feat(ui): more skin style tweaks (#53)

packages/react/react/src/skins/default/MediaSkinDefault.tsx

@@ -36,7 +36,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
       <div className={styles.Overlay} aria-hidden="true" />
 
       <div className={styles.Controls} data-testid="media-controls">
-        <Tooltip.Root delay={400} closeDelay={0}>
+        <Tooltip.Root delay={500} closeDelay={0}>
           <Tooltip.Trigger>
             <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
               <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
@@ -93,7 +93,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
           </Popover.Portal>
         </Popover.Root>
 
-        <Tooltip.Root delay={400} closeDelay={0}>
+        <Tooltip.Root delay={500} closeDelay={0}>
           <Tooltip.Trigger>
             <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
               <FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />

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

@@ -32,7 +32,7 @@ const styles: MediaDefaultSkinStyles = {
   ),
   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-3 bottom-3 rounded-full flex items-center p-1 ring ring-white/10 ring-inset gap-0.5 text-white text-shadow',
+    '@container/controls absolute inset-x-3 bottom-3 rounded-full flex items-center p-1 ring ring-white/10 ring-inset gap-0.5 text-white',
     'shadow-sm shadow-black/15',
     // Background
     'bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90',
@@ -71,7 +71,7 @@ const styles: MediaDefaultSkinStyles = {
   ),
   IconButton: cn(
     'grid [&_.icon]:[grid-area:1/1]',
-    '[&_.icon]:shrink-0 [&_.icon]:transition-opacity [&_.icon]:duration-300 [&_.icon]:ease-out [&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_.icon]:shadow-black/20',
+    '[&_.icon]:shrink-0 [&_.icon]:transition-opacity [&_.icon]:duration-300 [&_.icon]:ease-out [&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_.icon]:shadow-black/25',
   ),
   PlayButton: cn(
     '[&_.pause-icon]:opacity-100 [&[data-paused]_.pause-icon]:opacity-0',
@@ -87,8 +87,6 @@ const styles: MediaDefaultSkinStyles = {
     'transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0',
     // Ring
     'ring-1 ring-white/10 ring-inset',
-    // Text shadow
-    'text-shadow shadow-black/10',
     // Border to enhance contrast on lighter videos
     'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none',
   ),
@@ -132,7 +130,7 @@ const styles: MediaDefaultSkinStyles = {
   FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),
   FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),
   TimeControls: cn('flex-1 flex items-center gap-3 px-1.5'),
-  TimeDisplay: cn('tabular-nums text-shadow-2xs shadow-black/50'),
+  TimeDisplay: cn('tabular-nums text-shadow-2xs/25'),
   SliderRoot: cn(
     'flex items-center justify-center flex-1 group/slider relative',
     '[&[data-orientation="horizontal"]]:h-5 [&[data-orientation="horizontal"]]:min-w-20',

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

@@ -35,7 +35,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
       <div className={styles.Overlay} aria-hidden="true" />
 
       <div className={styles.Controls}>
-        <Tooltip.Root delay={400} closeDelay={0}>
+        <Tooltip.Root delay={500} closeDelay={0}>
           <Tooltip.Trigger>
             <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
               <MicroPlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
@@ -43,7 +43,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
             </PlayButton>
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Positioner side="top" sideOffset={6} collisionPadding={12}>
+            <Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
               <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>
                 <span className={styles.PlayTooltip}>Play</span>
                 <span className={styles.PauseTooltip}>Pause</span>
@@ -58,8 +58,11 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
             // showRemaining
             className={styles.TimeDisplay}
           />
-          <span className="opacity-50">/</span>
-          <DurationDisplay className={`${styles.TimeDisplay} opacity-50`} />
+
+          <span className={styles.DurationDisplay}>
+            /
+            <DurationDisplay className={`${styles.TimeDisplay}`} />
+          </span>
         </div>
 
         <TimeSlider.Root className={`${styles.SliderRoot} ${styles.TimeSliderRoot}`}>
@@ -67,7 +70,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
             <TimeSlider.Progress className={styles.SliderProgress} />
             <TimeSlider.Pointer className={styles.SliderPointer} />
           </TimeSlider.Track>
-          <TimeSlider.Thumb className={`${styles.SliderThumb} ${styles.TimeSliderThumb}`} />
+          <TimeSlider.Thumb className={styles.SliderThumb} />
         </TimeSlider.Root>
 
         <div className={styles.ButtonGroup}>
@@ -93,7 +96,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
             </Popover.Portal>
           </Popover.Root>
 
-          <Tooltip.Root delay={400} closeDelay={0}>
+          <Tooltip.Root delay={500} closeDelay={0}>
             <Tooltip.Trigger>
               <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
                 <MicroFullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
@@ -101,7 +104,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
               </FullscreenButton>
             </Tooltip.Trigger>
             <Tooltip.Portal>
-              <Tooltip.Positioner side="top" sideOffset={6} collisionPadding={12}>
+              <Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
                 <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>
                   <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>
                   <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>

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

@@ -34,8 +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 text-shadow',
-    'shadow-sm shadow-black/15',
+    '@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-4 pb-4 pt-10 text-white',
     // Animation
     'transition ease-in-out',
     //  FIXME: Temporary hide/show logic
@@ -50,7 +49,7 @@ const styles: MediaToastedSkinStyles = {
     // Background/foreground
     'bg-transparent text-white',
     // Hover and focus states
-    'hover:text-white/70 focus-visible:text-white/70',
+    'hover:text-white/80 focus-visible:text-white/80',
     // Focus state
     '-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white',
     // Disabled state
@@ -58,14 +57,14 @@ const styles: MediaToastedSkinStyles = {
     // Loading state
     'aria-busy:pointer-events-none aria-busy:cursor-not-allowed',
     // Expanded state
-    'aria-expanded:text-white/70',
+    'aria-expanded:text-white/80',
     // Pressed state
     'active:scale-95',
   ),
   ButtonGroup: cn('flex items-center gap-1.5'),
   IconButton: cn(
     'grid [&_.icon]:[grid-area:1/1]',
-    '[&_.icon]:shrink-0 [&_.icon]:transition [&_.icon]:duration-300 [&_.icon]:ease-out [&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_.icon]:shadow-black/20',
+    '[&_.icon]:shrink-0 [&_.icon]:transition [&_.icon]:duration-300 [&_.icon]:ease-out [&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_.icon]:shadow-black/40',
   ),
   PlayButton: cn(
     '[&_.pause-icon]:opacity-100 [&[data-paused]_.pause-icon]:opacity-0',
@@ -75,7 +74,7 @@ const styles: MediaToastedSkinStyles = {
   PauseIcon: cn('pause-icon'),
   TooltipPopup: cn(
     'whitespace-nowrap flex origin-[var(--transform-origin)] flex-col rounded-md text-white text-xs @7xl/root:text-sm px-2 py-1',
-    'bg-black/30 backdrop-blur-sm',
+    'bg-black/10 backdrop-blur-md',
     // Animation
     'transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0',
   ),
@@ -112,24 +111,24 @@ const styles: MediaToastedSkinStyles = {
   FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),
   FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),
   TimeSliderRoot: cn('mx-2'),
-  TimeSliderThumb: cn('opacity-0'),
-  TimeDisplay: cn('tabular-nums text-shadow-2xs shadow-black/50'),
+  TimeDisplay: cn('tabular-nums text-shadow-2xs/40'),
+  DurationDisplay: cn('text-white/50 contents'),
   SliderRoot: cn(
     'flex items-center justify-center flex-1 group/slider relative',
     '[&[data-orientation="horizontal"]]:h-5 [&[data-orientation="horizontal"]]:min-w-20',
     '[&[data-orientation="vertical"]]:w-5 [&[data-orientation="vertical"]]:h-18',
   ),
   SliderTrack: cn(
-    'relative select-none rounded-full bg-white/10',
-    '[&[data-orientation="horizontal"]]:w-full [&[data-orientation="horizontal"]]:h-1',
-    '[&[data-orientation="vertical"]]:w-1',
+    'relative select-none rounded-full bg-white/10 transition-[height,width] ease-in-out',
+    '[&[data-orientation="horizontal"]]:w-full [&[data-orientation="horizontal"]]:h-0.5',
+    '[&[data-orientation="vertical"]]:w-0.5',
   ),
   SliderProgress: cn('bg-white rounded-[inherit]'),
   SliderPointer: cn('hidden'),
   SliderThumb: cn(
-    'bg-white z-10 select-none ring ring-black/10 rounded-full shadow-sm shadow-black/15 transition-[opacity,height,width] ease-in-out',
+    'opacity-0 scale-70 group-hover/slider:opacity-100 group-hover/slider:scale-100 focus-visible:opacity-100 focus-visible:scale-100',
+    'bg-white z-10 size-3 select-none ring ring-black/10 rounded-full shadow-sm shadow-black/15 transition-[opacity,scale] ease-out',
     '-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500',
-    'size-2.5 active:size-3 group-active/slider:size-3',
     '[&[data-orientation="horizontal"]]:hover:cursor-ew-resize',
     '[&[data-orientation="vertical"]]:hover:cursor-ns-resize',
   ),

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

@@ -25,8 +25,8 @@ export interface MediaToastedSkinStyles {
   readonly FullscreenExitTooltip: string;
   readonly PopoverPopup: string;
   readonly TimeSliderRoot: string;
-  readonly TimeSliderThumb: string;
   readonly TimeDisplay: string;
+  readonly DurationDisplay: string;
   readonly SliderRoot: string;
   readonly SliderTrack: string;
   readonly SliderProgress: string;