@videojs/react 10.0.0-beta.28 → 10.0.0-beta.29

package/docs/how-to/customize-skins.md

@@ -93,10 +93,10 @@ skin.css
 ```
 'use client';
 
-import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode, isValidElement } from 'react';
+import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { audioText, captionsText, playbackRateText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { AirPlayEnterIcon, AirPlayExitIcon, CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, CheckIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, GearIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, QualityIcon, RestartIcon, SpeechIcon, SpeedIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons';
-import { Poster, useTranslator, Container, usePlayer, AirPlayButton, useAudioTrackOptions, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, useCaptionsOptions, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, Menu, MuteButton, PiPButton, PlayButton, usePlaybackRateOptions, PlaybackRateRadioGroup, Popover, useQualityOptions, QualityRadioGroup, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider, type RenderProp } from '@videojs/react';
+import { Poster, useTranslator, Container, usePlayer, AirPlayButton, useAudioTrackOptions, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, useCaptionsOptions, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, Menu, MuteButton, PiPButton, PlayButton, usePlaybackRateOptions, PlaybackRateRadioGroup, Popover, useQualityOptions, QualityRadioGroup, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider } from '@videojs/react';
 import { Video } from '@videojs/react/video';
 import './player.css';
 import { Player } from './player';
@@ -379,9 +379,11 @@ const SEEK_TIME = 10;
 
 export interface VideoPlayerProps {
   src: string;
+  poster?: string | undefined;
   style?: CSSProperties;
   className?: string;
-  poster?: string | RenderProp<Poster.State> | undefined;
+  renderPoster?: Poster.Props['render'];
+  placeholder?: string | undefined;
 }
 
 /**
@@ -393,13 +395,13 @@ export interface VideoPlayerProps {
  * />
  * ```
  */
-export function VideoPlayer({ src, className, poster, placeholder, style, ...rest }: VideoPlayerProps): ReactNode {
+export function VideoPlayer({ src, poster, className, renderPoster, placeholder, style, ...rest }: VideoPlayerProps): ReactNode {
   const containerStyle = placeholder
     ? ({ '--media-poster-placeholder': `url(${placeholder})`, ...style } as CSSProperties)
     : style;
 
   return (
-    <Player>
+    <Player poster={poster}>
       <Container
         className={`media-default-skin media-default-skin--video ${className ?? ''}`}
         style={containerStyle}
@@ -407,9 +409,7 @@ export function VideoPlayer({ src, className, poster, placeholder, style, ...res
       >
         <Video src={src} playsInline />
 
-        {poster && (
-          <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
-        )}
+        <Poster render={renderPoster} />
 
         <BufferingIndicator
           render={(props) => (
@@ -633,18 +633,6 @@ function VolumePopover(): ReactNode {
     </Popover.Root>
   );
 }
-
-// ================================================================
-// Utilities
-// ================================================================
-
-function isString(value: unknown): value is string {
-  return typeof value === 'string';
-}
-
-function isRenderProp(value: unknown): value is RenderProp<unknown> {
-  return typeof value === 'function' || isValidElement(value);
-}
 ```
 ```
 import { createPlayer } from '@videojs/react';
@@ -1212,7 +1200,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
     position: relative;
     display: block;
     max-width: var(--thumbnail-max-width);
-    max-height: var(--max-height);
+    max-height: var(--thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
 
@@ -1267,8 +1255,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --thumb-size: calc(var(--spacing) * 3);
   --chapter-gap: calc(var(--spacing) * 1);
   --chapter-inset-start: calc(var(--chapter-gap) / 2);
   --chapter-inset-end: calc(var(--chapter-gap) / 2);
@@ -1321,13 +1308,22 @@ export const { Player } = createPlayer({ features: videoFeatures });
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -1354,6 +1350,14 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -1435,45 +1439,6 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -1490,10 +1455,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -1510,22 +1473,12 @@ export const { Player } = createPlayer({ features: videoFeatures });
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -1534,37 +1487,70 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -1575,7 +1561,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -1589,7 +1576,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2336,8 +2323,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
    still in the DOM — just `display: none` — so its animations would keep
    running. Set the variables to `none` to short-circuit the keyframes. */
 .media-button--airplay:not([data-airplay-state="connected"]) {
-  --media-icon--airplay__fill-animation: none;
-  --media-icon--airplay__triangle-animation: none;
+  --media-icon-airplay-fill-animation: none;
+  --media-icon-airplay-triangle-animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2504,6 +2491,12 @@ export const { Player } = createPlayer({ features: videoFeatures });
   .media-controls--primary,
   .media-controls--secondary {
     position: absolute;
+  }
+  /* Primary must be higher for the preview/thumbnail */
+  .media-controls--primary {
+    z-index: 20;
+  }
+  .media-controls--secondary {
     z-index: 10;
   }
 
@@ -2520,6 +2513,11 @@ export const { Player } = createPlayer({ features: videoFeatures });
     transform-origin: top;
   }
 
+  .media-time-controls {
+    flex: 1;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   @container media-root (width < 32rem) {
     .media-controls--primary,
     .media-controls--secondary {
@@ -2570,6 +2568,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
         }
       }
     }
+
+    .media-button--captions {
+      display: none;
+    }
   }
 
   @container media-root (width >= 32rem) {
@@ -2606,11 +2608,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
         translate: 0 4px;
       }
     }
-  }
 
-  .media-time-controls {
-    flex: 1;
-    padding-inline: calc(var(--spacing) * 3);
+    .media-time-controls {
+      padding-inline: calc(var(--spacing) * 3);
+    }
   }
 
   @media (pointer: fine) {
@@ -2659,7 +2660,7 @@ skin.css
 import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { playbackRateText } from '@videojs/core/i18n/text/menu';
 import { CheckIcon, PauseIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons';
-import { useTranslator, Container, usePlayer, BufferingIndicator, ErrorDialog, Hotkey, Menu, MuteButton, PlayButton, usePlaybackRateOptions, PlaybackRateButton, PlaybackRateRadioGroup as PlaybackRateRadioGroupComponent, Popover, SeekButton, StatusAnnouncer, Time, TimeSlider, Tooltip, VolumeSlider, type Poster, type RenderProp } from '@videojs/react';
+import { useTranslator, Container, usePlayer, BufferingIndicator, ErrorDialog, Hotkey, Menu, MuteButton, PlayButton, usePlaybackRateOptions, PlaybackRateButton, PlaybackRateRadioGroup as PlaybackRateRadioGroupComponent, Popover, SeekButton, StatusAnnouncer, Time, TimeSlider, Tooltip, VolumeSlider, type Poster } from '@videojs/react';
 import { Audio } from '@videojs/react/audio';
 import './player.css';
 import { Player } from './player';
@@ -3340,8 +3341,7 @@ export const { Player } = createPlayer({ features: audioFeatures });
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
   --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 2.5);
-  --thumb-active-size: calc(var(--spacing) * 3);
+  --thumb-size: calc(var(--spacing) * 3);
   --chapter-gap: calc(var(--spacing) * 1);
   --chapter-inset-start: calc(var(--chapter-gap) / 2);
   --chapter-inset-end: calc(var(--chapter-gap) / 2);
@@ -3394,13 +3394,22 @@ export const { Player } = createPlayer({ features: audioFeatures });
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -3427,6 +3436,14 @@ export const { Player } = createPlayer({ features: audioFeatures });
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -3508,45 +3525,6 @@ export const { Player } = createPlayer({ features: audioFeatures });
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
-    }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, height, width, outline-offset, left, top;
-    }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
-    }
-    .media-slider__buffer {
-      transition-timing-function: ease-out;
-      transition-duration: 250ms;
-    }
-  }
-
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
-    }
-  }
-
   /* Thumb */
   .media-slider__thumb {
     position: absolute;
@@ -3563,10 +3541,8 @@ export const { Player } = createPlayer({ features: audioFeatures });
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
+    scale: 0.8;
     translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-    transition-property: opacity, height, width, outline-offset;
 
     &[data-orientation="horizontal"] {
       top: 50%;
@@ -3583,22 +3559,12 @@ export const { Player } = createPlayer({ features: audioFeatures });
       opacity: 1;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        outline-color: oklch(from currentColor l c h / 0.15);
-        outline-offset: 0;
-      }
-    }
-
     &::after {
       position: absolute;
       inset: -4px;
       content: "";
       border-radius: inherit;
       box-shadow: 0 0 0 2px currentColor;
-      transition-timing-function: ease-out;
-      transition-duration: 150ms;
-      transition-property: opacity, scale;
     }
 
     &:not(:focus-visible)::after {
@@ -3607,37 +3573,70 @@ export const { Player } = createPlayer({ features: audioFeatures });
     }
 
     &.media-slider__thumb--persistent {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
       opacity: 1;
+      scale: 1;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        outline-color: oklch(from currentColor l c h / 0.15);
+        outline-offset: 0;
+      }
     }
-  }
 
-  &:active .media-slider__thumb,
-  &:focus-within .media-slider__thumb {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
+    @media (prefers-reduced-motion: no-preference) {
+      transition-timing-function: ease-out;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
+
+      &::after {
+        transition-timing-function: ease-out;
+        transition-duration: 150ms;
+        transition-property: opacity, scale;
+      }
+    }
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover .media-slider__thumb {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 36;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
-    min-width: var(--max-width);
+    min-width: var(--max-size);
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -3648,7 +3647,8 @@ export const { Player } = createPlayer({ features: audioFeatures });
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
       bottom: calc(100% + (var(--spacing) * 9));
     }
 
@@ -3662,7 +3662,7 @@ export const { Player } = createPlayer({ features: audioFeatures });
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       padding-inline: calc(var(--spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
@@ -4243,10 +4243,10 @@ skin.css
 ```
 'use client';
 
-import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode, isValidElement } from 'react';
+import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { audioText, captionsText, playbackRateText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { AirPlayEnterIcon, AirPlayExitIcon, CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, CheckIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, GearIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, QualityIcon, RestartIcon, SpeechIcon, SpeedIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons/minimal';
-import { Poster, useTranslator, Container, usePlayer, AirPlayButton, useAudioTrackOptions, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, useCaptionsOptions, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, Menu, MuteButton, PiPButton, PlayButton, usePlaybackRateOptions, PlaybackRateRadioGroup, Popover, useQualityOptions, QualityRadioGroup, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider, type RenderProp } from '@videojs/react';
+import { Poster, useTranslator, Container, usePlayer, AirPlayButton, useAudioTrackOptions, AudioTrackRadioGroup, BufferingIndicator, CaptionsButton, CaptionsRadioGroup, useCaptionsOptions, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, Menu, MuteButton, PiPButton, PlayButton, usePlaybackRateOptions, PlaybackRateRadioGroup, Popover, useQualityOptions, QualityRadioGroup, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider } from '@videojs/react';
 import { Video } from '@videojs/react/video';
 import './player.css';
 import { Player } from './player';
@@ -4453,9 +4453,11 @@ const SEEK_TIME = 10;
 
 export interface VideoPlayerProps {
   src: string;
+  poster?: string | undefined;
   style?: CSSProperties;
   className?: string;
-  poster?: string | RenderProp<Poster.State> | undefined;
+  renderPoster?: Poster.Props['render'];
+  placeholder?: string | undefined;
 }
 
 /**
@@ -4467,13 +4469,13 @@ export interface VideoPlayerProps {
  * />
  * ```
  */
-export function VideoPlayer({ src, className, poster, placeholder, style, ...rest }: VideoPlayerProps): ReactNode {
+export function VideoPlayer({ src, poster, className, renderPoster, placeholder, style, ...rest }: VideoPlayerProps): ReactNode {
   const containerStyle = placeholder
     ? ({ '--media-poster-placeholder': `url(${placeholder})`, ...style } as CSSProperties)
     : style;
 
   return (
-    <Player>
+    <Player poster={poster}>
       <Container
         className={`media-minimal-skin media-minimal-skin--video ${className ?? ''}`}
         style={containerStyle}
@@ -4481,9 +4483,7 @@ export function VideoPlayer({ src, className, poster, placeholder, style, ...res
       >
         <Video src={src} playsInline />
 
-        {poster && (
-          <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
-        )}
+        <Poster render={renderPoster} />
 
         <BufferingIndicator
           render={(props) => (
@@ -4761,18 +4761,6 @@ function VolumePopover(): ReactNode {
     </Popover.Root>
   );
 }
-
-// ================================================================
-// Utilities
-// ================================================================
-
-function isString(value: unknown): value is string {
-  return typeof value === 'string';
-}
-
-function isRenderProp(value: unknown): value is RenderProp<unknown> {
-  return typeof value === 'function' || isValidElement(value);
-}
 ```
 ```
 import { createPlayer } from '@videojs/react';
@@ -5365,7 +5353,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
     position: relative;
     display: block;
     max-width: var(--thumbnail-max-width);
-    max-height: var(--max-height);
+    max-height: var(--thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
   }
@@ -5409,9 +5397,13 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -5443,71 +5435,17 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  /* Shared track fills */
-  .media-slider__buffer,
-  .media-slider__fill {
+  /* Shared track fills */
+  .media-slider__buffer,
+  .media-slider__fill {
     position: absolute;
     pointer-events: none;
     border-radius: inherit;
@@ -5516,13 +5454,22 @@ export const { Player } = createPlayer({ features: videoFeatures });
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -5549,6 +5496,14 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -5572,9 +5527,6 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -5591,8 +5543,6 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -5605,7 +5555,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -5613,7 +5563,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -5621,7 +5571,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -5629,63 +5579,102 @@ export const { Player } = createPlayer({ features: videoFeatures });
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -5697,8 +5686,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {
@@ -6498,8 +6488,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
    still in the DOM — just `display: none` — so its animations would keep
    running. Set the variables to `none` to short-circuit the keyframes. */
 .media-button--airplay:not([data-airplay-state="connected"]) {
-  --media-icon--airplay__fill-animation: none;
-  --media-icon--airplay__triangle-animation: none;
+  --media-icon-airplay-fill-animation: none;
+  --media-icon-airplay-triangle-animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -6661,6 +6651,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   --base-boundary-offset: 1;
   --inset-factor: 1;
   --inset: calc(var(--spacing) * var(--inset-factor));
+  --volume-mask: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
 
   position: absolute;
   inset-inline: var(--inset);
@@ -6716,6 +6707,37 @@ export const { Player } = createPlayer({ features: videoFeatures });
     justify-content: end;
   }
 
+  :is(.media-time-controls, .media-button-group:last-child) {
+    mask-image: var(--volume-mask-image, none);
+    mask-repeat: no-repeat;
+    mask-position: var(--volume-mask-position, 100% 0);
+    mask-size: var(--volume-mask-size, 200% 100%);
+    transition: mask-position 50ms ease-out;
+  }
+
+  @container media-root (width <= 42rem) {
+    .media-popover--volume {
+      --media-popover-side-offset: calc(var(--spacing) * 3);
+    }
+  }
+
+  &:has(.media-button--mute[aria-expanded="true"]) {
+    @container media-root (width <= 42rem) {
+      .media-button-group:last-child {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+        --volume-mask-size: 400% 100%;
+      }
+    }
+
+    @container media-root (width > 42rem) {
+      .media-time-controls {
+        --volume-mask-image: var(--volume-mask);
+        --volume-mask-position: 0 0;
+      }
+    }
+  }
+
   @container media-root (width > 42rem) {
     --inset-factor: 2;
     --base-side-offset: 2;
@@ -6733,20 +6755,6 @@ export const { Player } = createPlayer({ features: videoFeatures });
     .media-button-group:last-child {
       flex: 0 0 auto;
     }
-
-    .media-time-controls {
-      mask-position: 100% 0;
-      mask-size: 200% 100%;
-      transition: mask-position 50ms ease-out;
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-image: linear-gradient(to right, transparent 10%, #000 25%, #000 100%);
-    }
-
-    &:has(.media-button--mute[aria-expanded="true"]) .media-time-controls {
-      mask-position: 0 0;
-    }
   }
 }
 
@@ -6771,9 +6779,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
 .media-minimal-skin--video .media-slider .media-slider__preview {
   --preview-end-inset: calc(100cqi - 100%);
   --preview-left: clamp(
-    calc(var(--max-width) / 2),
+    calc(var(--max-size) / 2),
     var(--media-slider-pointer),
-    calc(100% - var(--max-width) / 2 + var(--preview-end-inset))
+    calc(100% - var(--max-size) / 2 + var(--preview-end-inset))
   );
 
   @container media-root (width > 42rem) {
@@ -6797,7 +6805,7 @@ skin.css
 import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { playbackRateText } from '@videojs/core/i18n/text/menu';
 import { CheckIcon, PauseIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons/minimal';
-import { useTranslator, Container, usePlayer, BufferingIndicator, ErrorDialog, Hotkey, Menu, MuteButton, PlayButton, usePlaybackRateOptions, PlaybackRateButton, PlaybackRateRadioGroup as PlaybackRateRadioGroupComponent, Popover, SeekButton, StatusAnnouncer, Time, TimeSlider, Tooltip, VolumeSlider, type Poster, type RenderProp } from '@videojs/react';
+import { useTranslator, Container, usePlayer, BufferingIndicator, ErrorDialog, Hotkey, Menu, MuteButton, PlayButton, usePlaybackRateOptions, PlaybackRateButton, PlaybackRateRadioGroup as PlaybackRateRadioGroupComponent, Popover, SeekButton, StatusAnnouncer, Time, TimeSlider, Tooltip, VolumeSlider, type Poster } from '@videojs/react';
 import { Audio } from '@videojs/react/audio';
 import './player.css';
 import { Player } from './player';
@@ -7488,9 +7496,13 @@ export const { Player } = createPlayer({ features: audioFeatures });
 }
 
 .media-minimal-skin .media-slider {
+  --track-size: calc(var(--spacing) * 1);
+  --track-highlighted-size: calc(var(--spacing) * 1.75);
+  --track-border-radius: 99px;
   --thumb-size: calc(var(--spacing) * 3);
-  --thumb-active-size: calc(var(--spacing) * 3);
-  --track-border-radius: calc(Infinity * 1px);
+  --chapter-gap: calc(var(--spacing) * 1);
+  --chapter-inset-start: calc(var(--chapter-gap) / 2);
+  --chapter-inset-end: calc(var(--chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -7522,68 +7534,14 @@ export const { Player } = createPlayer({ features: audioFeatures });
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: calc(var(--spacing) * 0.75);
+      height: var(--track-size);
     }
     &[data-orientation="vertical"] {
-      width: calc(var(--spacing) * 0.75);
+      width: var(--track-size);
       height: 100%;
     }
   }
 
-  /* Thumb */
-  .media-slider__thumb {
-    position: absolute;
-    z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    user-select: none;
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    background-color: currentColor;
-    border-radius: calc(Infinity * 1px);
-    box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
-      0 1px 3px 0 oklch(0 0 0 / 0.15),
-      0 1px 2px -1px oklch(0 0 0 / 0.15);
-    opacity: 0;
-    transform-origin: center;
-    scale: 0.7;
-    translate: -50% -50%;
-    transition-timing-function: ease-out;
-    transition-duration: 150ms;
-
-    &[data-orientation="horizontal"] {
-      top: 50%;
-      left: var(--media-slider-fill);
-    }
-    &[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-fill));
-      left: 50%;
-    }
-
-    &:focus-visible {
-      outline-color: var(--focus-ring-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:focus-within .media-slider__thumb,
-  .media-slider__thumb--persistent {
-    width: var(--thumb-active-size);
-    height: var(--thumb-active-size);
-    opacity: 1;
-    scale: 1;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover .media-slider__thumb {
-      width: var(--thumb-active-size);
-      height: var(--thumb-active-size);
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
   /* Shared track fills */
   .media-slider__buffer,
   .media-slider__fill {
@@ -7595,13 +7553,22 @@ export const { Player } = createPlayer({ features: audioFeatures });
       inset-block: 0;
       left: 0;
       width: 100%;
-      transition-property: clip-path;
     }
     &[data-orientation="vertical"] {
       inset-inline: 0;
       bottom: 0;
       height: 100%;
-      transition-property: clip-path;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: clip-path 200ms ease-out;
+    }
+  }
+  &[data-dragging],
+  &[data-seeking] {
+    .media-slider__fill,
+    .media-slider__buffer {
+      transition-duration: 0ms;
     }
   }
 
@@ -7628,6 +7595,14 @@ export const { Player } = createPlayer({ features: audioFeatures });
       clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
     }
   }
+  &[data-dragging] {
+    .media-slider__fill[data-orientation="horizontal"] {
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+    }
+    .media-slider__fill[data-orientation="vertical"] {
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    }
+  }
 
   /* Chapters */
   .media-slider__chapters {
@@ -7651,9 +7626,6 @@ export const { Player } = createPlayer({ features: audioFeatures });
   }
 
   .media-slider__chapter {
-    --chapter-gap: calc(var(--spacing) * 1);
-    --chapter-inset-start: calc(var(--chapter-gap) / 2);
-    --chapter-inset-end: calc(var(--chapter-gap) / 2);
     position: absolute;
     inset: 0;
     display: flex;
@@ -7670,8 +7642,6 @@ export const { Player } = createPlayer({ features: audioFeatures });
     }
 
     .media-slider__chapter-track {
-      --chapter-track-size: calc(var(--spacing) * 0.75);
-      --chapter-track-highlighted-size: calc(var(--spacing) * 1.25);
       border-radius: var(--track-border-radius);
 
       @media (prefers-reduced-motion: no-preference) {
@@ -7684,7 +7654,7 @@ export const { Player } = createPlayer({ features: audioFeatures });
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--chapter-track-size);
+        height: var(--track-size);
         clip-path: inset(
           0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
@@ -7692,7 +7662,7 @@ export const { Player } = createPlayer({ features: audioFeatures });
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--chapter-track-highlighted-size);
+        height: var(--track-highlighted-size);
       }
     }
 
@@ -7700,7 +7670,7 @@ export const { Player } = createPlayer({ features: audioFeatures });
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--chapter-track-size);
+        width: var(--track-size);
         clip-path: inset(
           calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
             calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
@@ -7708,63 +7678,102 @@ export const { Player } = createPlayer({ features: audioFeatures });
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--chapter-track-highlighted-size);
+        width: var(--track-highlighted-size);
       }
     }
   }
 
-  /* Dragging — thumb and fill follow the pointer position */
-  &[data-dragging] {
-    .media-slider__thumb[data-orientation="horizontal"] {
-      left: var(--media-slider-pointer);
-    }
-    .media-slider__thumb[data-orientation="vertical"] {
-      top: calc(100% - var(--media-slider-pointer));
-    }
-    .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+  /* Thumb */
+  .media-slider__thumb {
+    position: absolute;
+    z-index: 10;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    user-select: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    background-color: currentColor;
+    border-radius: calc(Infinity * 1px);
+    box-shadow:
+      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+      0 1px 3px 0 oklch(0 0 0 / 0.15),
+      0 1px 2px -1px oklch(0 0 0 / 0.15);
+    opacity: 0;
+    transform-origin: center;
+    scale: 0.7;
+    translate: -50% -50%;
+
+    &[data-orientation="horizontal"] {
+      top: 50%;
+      left: var(--media-slider-fill);
     }
-    .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
     }
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .media-slider__thumb {
-      transition-property: opacity, scale, height, width, outline-offset, left, top;
+    &:focus-visible {
+      outline-color: var(--focus-ring-color);
+      outline-offset: 2px;
     }
-    .media-slider__fill {
-      transition-timing-function: linear;
-      transition-duration: 200ms;
+
+    &:focus-visible,
+    &.media-slider__thumb--persistent {
+      opacity: 1;
+      scale: 1;
     }
-    .media-slider__buffer {
+
+    @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 250ms;
+      transition-duration: 150ms;
+      transition-property: opacity, outline-offset, left, top, scale;
     }
   }
 
-  &[data-dragging],
-  &[data-seeking] {
-    .media-slider__thumb,
-    .media-slider__fill,
-    .media-slider__buffer {
-      transition-duration: 0ms;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .media-slider__thumb {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  &[data-dragging] .media-slider__thumb {
+    opacity: 1;
+    scale: 0.9;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: opacity, outline-offset, scale;
+    }
+
+    &[data-orientation="horizontal"] {
+      left: var(--media-slider-pointer);
+    }
+    &[data-orientation="vertical"] {
+      top: calc(100% - var(--media-slider-pointer));
     }
   }
 
   /* Preview */
   .media-slider__preview {
-    --max-width: min(calc(var(--spacing) * 48), 100cqi);
-    --max-height: calc(var(--spacing) * 32);
+    --max-size-factor: 28;
+    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
 
     min-width: 100%;
     height: calc(var(--spacing) * 1);
 
+    @container media-root (width > 32rem) {
+      --max-size-factor: 36;
+    }
+
+    @container media-root (width > 42rem) {
+      --max-size-factor: 48;
+    }
+
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: var(--preview-left, var(--media-slider-pointer));
-      max-width: var(--max-width);
+      max-width: var(--max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
@@ -7776,8 +7785,9 @@ export const { Player } = createPlayer({ features: audioFeatures });
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-width);
-      bottom: calc(100% + (var(--spacing) * 12));
+      --thumbnail-max-width: var(--max-size);
+      --thumbnail-max-height: var(--max-size);
+      bottom: calc(100% + (var(--spacing) * 11));
     }
 
     .media-slider__value {