feat: add slider preview thumbnails (#935)

packages/react/src/presets/video/minimal-skin.tailwind.tsx

@@ -26,6 +26,7 @@ import {
   iconState,
   overlay,
   popup,
+  preview,
   root,
   seek,
   slider,
@@ -44,6 +45,7 @@ import { PlayButton } from '@/ui/play-button';
 import { PlaybackRateButton } from '@/ui/playback-rate-button';
 import { Popover } from '@/ui/popover';
 import { SeekButton } from '@/ui/seek-button';
+import { Slider } from '@/ui/slider';
 import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
@@ -233,6 +235,13 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
               </TimeSlider.Track>
               <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+              <div className={preview.root}>
+                <div className={preview.thumbnailWrapper}>
+                  <Slider.Thumbnail className={preview.thumbnail} />
+                </div>
+                <TimeSlider.Value type="pointer" className={preview.timestamp} />
+                <SpinnerIcon className={cn(icon, preview.spinner)} />
+              </div>
             </TimeSlider.Root>
           </div>
 

packages/react/src/presets/video/minimal-skin.tsx

@@ -26,6 +26,7 @@ import { PlayButton } from '@/ui/play-button';
 import { PlaybackRateButton } from '@/ui/playback-rate-button';
 import { Popover } from '@/ui/popover';
 import { SeekButton } from '@/ui/seek-button';
+import { Slider } from '@/ui/slider';
 import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
@@ -164,6 +165,14 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 <TimeSlider.Buffer className="media-slider__buffer" />
               </TimeSlider.Track>
               <TimeSlider.Thumb className="media-slider__thumb" />
+
+              <div className="media-preview media-slider__preview">
+                <div className="media-preview__thumbnail-wrapper">
+                  <Slider.Thumbnail className="media-preview__thumbnail" />
+                </div>
+                <TimeSlider.Value type="pointer" className="media-preview__timestamp" />
+                <SpinnerIcon className="media-preview__spinner media-icon" />
+              </div>
             </TimeSlider.Root>
           </div>
 

packages/react/src/presets/video/skin.tailwind.tsx

@@ -25,6 +25,7 @@ import {
   overlay,
   playbackRate,
   popup,
+  preview,
   root,
   seek,
   slider,
@@ -43,6 +44,7 @@ import { PlayButton } from '@/ui/play-button';
 import { PlaybackRateButton } from '@/ui/playback-rate-button';
 import { Popover } from '@/ui/popover';
 import { SeekButton } from '@/ui/seek-button';
+import { Slider } from '@/ui/slider';
 import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
@@ -228,6 +230,11 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
                 <TimeSlider.Buffer render={(props) => <SliderFill type="buffer" {...props} />} />
               </TimeSlider.Track>
               <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />
+              <div className={preview.root}>
+                <Slider.Thumbnail className={preview.thumbnail} />
+                <TimeSlider.Value type="pointer" className={preview.timestamp} />
+                <SpinnerIcon className={cn(icon, preview.spinner)} />
+              </div>
             </TimeSlider.Root>
             <Time.Value type="duration" className={time.duration} />
           </Time.Group>

packages/react/src/presets/video/skin.tsx

@@ -26,6 +26,7 @@ import { PlayButton } from '@/ui/play-button';
 import { PlaybackRateButton } from '@/ui/playback-rate-button';
 import { Popover } from '@/ui/popover';
 import { SeekButton } from '@/ui/seek-button';
+import { Slider } from '@/ui/slider';
 import { Time } from '@/ui/time';
 import { TimeSlider } from '@/ui/time-slider';
 import { Tooltip } from '@/ui/tooltip';
@@ -159,6 +160,12 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
                 <TimeSlider.Buffer className="media-slider__buffer" />
               </TimeSlider.Track>
               <TimeSlider.Thumb className="media-slider__thumb" />
+
+              <div className="media-surface media-preview media-slider__preview">
+                <Slider.Thumbnail className="media-preview__thumbnail" />
+                <TimeSlider.Value type="pointer" className="media-preview__timestamp" />
+                <SpinnerIcon className="media-preview__spinner media-icon" />
+              </div>
             </TimeSlider.Root>
             <Time.Value type="duration" className="media-time__value" />
           </Time.Group>

packages/react/src/ui/thumbnail/index.ts

@@ -0,0 +1 @@
+export * from './thumbnail';