feat(ui): skin and icon tweaks

packages/core/icons/src/index.ts

@@ -1,13 +1,8 @@
+import fullscreenEnterAlt from '../assets/fullscreen-enter-alt.svg';
 // Import SVG files as strings
 import fullscreenEnter from '../assets/fullscreen-enter.svg';
+import fullscreenExitAlt from '../assets/fullscreen-exit-alt.svg';
 import fullscreenExit from '../assets/fullscreen-exit.svg';
-import microFullscreenEnter from '../assets/micro-fullscreen-enter.svg';
-import microFullscreenExit from '../assets/micro-fullscreen-exit.svg';
-import microPause from '../assets/micro-pause.svg';
-import microPlay from '../assets/micro-play.svg';
-import microVolumeHigh from '../assets/micro-volume-high.svg';
-import microVolumeLow from '../assets/micro-volume-low.svg';
-import microVolumeOff from '../assets/micro-volume-off.svg';
 import pause from '../assets/pause.svg';
 import play from '../assets/play.svg';
 import volumeHigh from '../assets/volume-high.svg';
@@ -22,13 +17,8 @@ export const SVG_ICONS: Record<string, string> = {
   volumeOff,
   fullscreenEnter,
   fullscreenExit,
-  microPlay,
-  microPause,
-  microVolumeHigh,
-  microVolumeLow,
-  microVolumeOff,
-  microFullscreenEnter,
-  microFullscreenExit,
+  fullscreenEnterAlt,
+  fullscreenExitAlt,
 };
 
 // TODO: Check if we need below? It seems to be unused now.

packages/react/react/src/skins/toasted/MediaSkinToasted.tsx

@@ -1,13 +1,13 @@
 import type { PropsWithChildren } from 'react';
 
 import {
-  MicroFullscreenEnterIcon,
-  MicroFullscreenExitIcon,
-  MicroPauseIcon,
-  MicroPlayIcon,
-  MicroVolumeHighIcon,
-  MicroVolumeLowIcon,
-  MicroVolumeOffIcon,
+  FullscreenEnterAltIcon,
+  FullscreenExitAltIcon,
+  PauseIcon,
+  PlayIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
 } from '@vjs-10/react-icons';
 
 import Popover from '@/components/Popover';
@@ -38,8 +38,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
         <Tooltip.Root delay={500} closeDelay={0}>
           <Tooltip.Trigger>
             <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
-              <MicroPlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
-              <MicroPauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
+              <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
+              <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
             </PlayButton>
           </Tooltip.Trigger>
           <Tooltip.Portal>
@@ -77,9 +77,9 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
           <Popover.Root openOnHover delay={200} closeDelay={300}>
             <Popover.Trigger>
               <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>
-                <MicroVolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
-                <MicroVolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
-                <MicroVolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
+                <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
+                <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
+                <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
               </MuteButton>
             </Popover.Trigger>
             <Popover.Portal>
@@ -99,8 +99,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
           <Tooltip.Root delay={500} closeDelay={0}>
             <Tooltip.Trigger>
               <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
-                <MicroFullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
-                <MicroFullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
+                <FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
+                <FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
               </FullscreenButton>
             </Tooltip.Trigger>
             <Tooltip.Portal>

packages/react/react/src/skins/toasted/styles.ts

@@ -34,7 +34,7 @@ const styles: MediaToastedSkinStyles = {
   ),
   Controls: cn(
     'controls', //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.
-    '@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-4 pb-4 pt-10 text-white',
+    '@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-3 pb-3 pt-10 text-white',
     // Animation
     'transition ease-in-out',
     //  FIXME: Temporary hide/show logic
@@ -58,8 +58,6 @@ const styles: MediaToastedSkinStyles = {
     'aria-busy:pointer-events-none aria-busy:cursor-not-allowed',
     // Expanded state
     'aria-expanded:text-white/80',
-    // Pressed state
-    'active:scale-95',
   ),
   ButtonGroup: cn('flex items-center gap-1.5'),
   IconButton: cn(
@@ -97,12 +95,19 @@ const styles: MediaToastedSkinStyles = {
   FullscreenButton: cn(
     '[&_.fullscreen-enter-icon]:opacity-100 [&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',
     '[&_.fullscreen-exit-icon]:opacity-0 [&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',
+    '[&_path]:transition-transform ease-out',
   ),
   FullscreenEnterIcon: cn(
     'fullscreen-enter-icon',
+    'group-hover/button:[&_.arrow-1]:translate-x-px group-hover/button:[&_.arrow-1]:-translate-y-px',
+    'group-hover/button:[&_.arrow-2]:-translate-x-px group-hover/button:[&_.arrow-2]:translate-y-px',
   ),
   FullscreenExitIcon: cn(
     'fullscreen-exit-icon',
+    '[&_.arrow-1]:translate-x-px [&_.arrow-1]:-translate-y-px',
+    '[&_.arrow-2]:-translate-x-px [&_.arrow-2]:translate-y-px',
+    'group-hover/button:[&_.arrow-1]:translate-0',
+    'group-hover/button:[&_.arrow-2]:translate-0',
   ),
   FullscreenTooltipPopup: cn(
     '[&_.fullscreen-enter-tooltip]:inline [&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',