npm - @videojs/react - Versions diffs - 10.0.0-beta.4 → 10.0.0-beta.6 - Mend

@videojs/react 10.0.0-beta.4 → 10.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/dist/dev/presets/video/minimal-skin.css CHANGED Viewed

@@ -100,7 +100,6 @@
 .media-minimal-skin *::before,
 .media-minimal-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-minimal-skin img,
 .media-minimal-skin video,
@@ -151,9 +150,11 @@
   display: block;
   width: 100%;
   height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
 }
 .media-minimal-skin ::slotted(video) {
-  border-radius: var(--media-border-radius, 0.75rem);
+  border-radius: var(--media-video-border-radius);
 }
 .media-minimal-skin video {
   border-radius: inherit;
@@ -168,10 +169,11 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  border-radius: inherit;
-  object-fit: cover;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
   transition: opacity 0.25s;
   pointer-events: none;
+  border-radius: inherit;
   &:not([data-visible]) {
     opacity: 0;
@@ -182,14 +184,10 @@
    Fullscreen
    ========================================================================== */
-.media-minimal-skin:fullscreen video,
 .media-minimal-skin:fullscreen ::slotted(video),
-.media-minimal-skin > img {
+.media-minimal-skin:fullscreen video {
   object-fit: contain;
 }
-.media-minimal-skin:fullscreen ::slotted(video) {
-  border-radius: 0;
-}
 /* ==========================================================================
    Overlay / Scrim
@@ -202,22 +200,28 @@
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
   backdrop-filter: blur(0) saturate(1.5);
   opacity: 0;
-  transition-property: opacity, backdrop-filter;
-  transition-duration: 500ms;
-  transition-delay: 500ms;
-  transition-timing-function: ease-out;
   pointer-events: none;
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 100ms;
+  @media (pointer: fine) {
+    transition-property: opacity, backdrop-filter;
+    transition-duration: 500ms;
+    transition-delay: 500ms;
+    transition-timing-function: ease-out;
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 100ms;
+    }
   }
 }
 .media-minimal-skin .media-controls[data-visible] ~ .media-overlay,
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
   opacity: 1;
-  transition-duration: 150ms;
-  transition-delay: 0ms;
+  @media (pointer: fine) {
+    transition-duration: 150ms;
+    transition-delay: 0ms;
+  }
 }
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
@@ -411,6 +415,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
   &:focus-visible {
     outline-color: currentColor;
@@ -507,6 +512,54 @@
   scale: -1 1;
 }
+/* ==========================================================================
+   Media preview
+   ========================================================================== */
+.media-minimal-skin .media-preview {
+  & .media-preview__thumbnail-wrapper {
+    position: relative;
+    border-radius: 0.5rem;
+    background-color: oklch(0 0 0 / 0.9);
+  }
+  & .media-preview__thumbnail {
+    display: block;
+    border-radius: inherit;
+  }
+  & .media-preview__timestamp {
+    display: block;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    margin-top: 0.5rem;
+  }
+  & .media-overlay {
+    opacity: 1;
+  }
+  & .media-preview__spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
+  & .media-preview__thumbnail,
+  & .media-preview__spinner {
+    transition: opacity 150ms ease-out;
+  }
+  &:has(.media-preview__thumbnail[data-loading]) {
+    & .media-preview__thumbnail {
+      opacity: 0;
+    }
+    & .media-preview__spinner {
+      opacity: 1;
+    }
+  }
+}
 /* ==========================================================================
    Slider
    ========================================================================== */
@@ -519,6 +572,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -648,11 +702,6 @@
   }
 }
-/* Time display within slider */
-.media-minimal-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */
@@ -664,12 +713,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
@@ -689,6 +738,48 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
+}
+.media-minimal-skin .media-popover {
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 .media-minimal-skin .media-tooltip {
@@ -701,7 +792,16 @@
     0 2px 4px -2px oklch(0 0 0 / 0.1);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
   @media (prefers-reduced-transparency: reduce) {
     background-color: oklch(0 0 0 / 0.7);
@@ -717,6 +817,7 @@
    ========================================================================== */
 .media-minimal-skin {
+  --media-caption-track-duration: 150ms;
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
@@ -724,23 +825,21 @@
     --media-caption-track-delay: 25ms;
     --media-caption-track-y: -3rem;
   }
+  @media (prefers-reduced-motion: reduce) {
+    --media-caption-track-duration: 50ms;
+  }
 }
 .media-minimal-skin video::-webkit-media-text-track-container {
   /* NOTE: The delay must account for the controls delay/duration */
-  transition: transform 150ms ease-out;
+  transition: transform var(--media-caption-track-duration) ease-out;
   transition-delay: var(--media-caption-track-delay);
   transform: translateY(var(--media-caption-track-y)) scale(0.98);
   z-index: 1;
   font-family: inherit;
 }
-@media (prefers-reduced-motion: reduce) {
-  .media-minimal-skin video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}
 /* ==========================================================================
    Root
@@ -749,6 +848,7 @@
 .media-minimal-skin--video {
   background: oklch(0 0 0);
   --media-border-color: oklch(0 0 0 / 0.15);
+  --media-video-border-radius: var(--media-border-radius, 0.75rem);
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.15);
@@ -767,7 +867,7 @@
   /* Fullscreen */
   &:fullscreen {
-    border-radius: 0;
+    --media-border-radius: 0;
   }
 }
@@ -782,13 +882,16 @@
   z-index: 10;
   gap: 0.5rem;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  will-change: transform, filter, opacity;
-  transition-property: transform, filter, opacity;
-  transition-duration: 75ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-out;
   color: oklch(1 0 0);
+  @media (pointer: fine) {
+    will-change: transform, filter, opacity;
+    transition-property: transform, filter, opacity;
+    transition-duration: 75ms;
+    transition-delay: 0ms;
+    transition-timing-function: ease-out;
+  }
   @container media-root (width > 40rem) {
     gap: 0.875rem;
     padding: 2.5rem 0.75rem 0.75rem 0.75rem;
@@ -796,21 +899,29 @@
   &:not([data-visible]) {
     opacity: 0;
-    transform: translateY(100%);
-    filter: blur(8px);
-    transition-duration: 500ms;
-    transition-delay: 500ms;
     pointer-events: none;
-    @media (prefers-reduced-motion: reduce) {
-      scale: 1;
-      transform: translateY(0);
-      filter: blur(0);
-      transition-duration: 100ms;
+    @media (pointer: fine) {
+      transform: translateY(100%);
+      filter: blur(8px);
+      transition-duration: 500ms;
+      transition-delay: 500ms;
+      @media (prefers-reduced-motion: reduce) {
+        scale: 1;
+        transform: translateY(0);
+        filter: blur(0);
+        transition-duration: 100ms;
+      }
     }
   }
 }
+/* Hide cursor when controls are hidden in fullscreen */
+.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
+  cursor: none;
+}
 /* ==========================================================================
    Sliders
    ========================================================================== */
@@ -829,3 +940,48 @@
   padding: 0.25rem;
 }
+/* ==========================================================================
+   Slider preview
+   ========================================================================== */
+.media-minimal-skin .media-slider__preview {
+  position: absolute;
+  left: var(--media-slider-pointer);
+  bottom: calc(100% + 0.5rem);
+  translate: -50%;
+  opacity: 0;
+  scale: 0.8;
+  filter: blur(8px);
+  transition-property: scale, opacity, filter;
+  transition-duration: 150ms;
+  transform-origin: bottom;
+  & .media-preview__thumbnail-wrapper {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow:
+        0 0 0 1px oklch(0 0 0 / 0.05),
+        0 1px 3px 0 oklch(0 0 0 / 0.2),
+        0 1px 2px -1px oklch(0 0 0 / 0.2);
+    }
+  }
+  & .media-preview__thumbnail {
+    max-width: 11rem;
+  }
+  &:has(.media-preview__thumbnail[data-loading]) {
+    max-height: 6rem;
+  }
+}
+.media-minimal-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
+  opacity: 1;
+  scale: 1;
+  filter: blur(0);
+}

package/dist/dev/presets/video/minimal-skin.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"mappings":";;;;~~KAqCY~~,qBAAA,GAAwB,aAAA;AAAA,iBAsCpB,gBAAA,CAAiB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}
1	+ {"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"mappings":";;;;KAsCY,qBAAA,GAAwB,aAAA;AAAA,iBAsCpB,gBAAA,CAAiB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}

package/dist/dev/presets/video/minimal-skin.js CHANGED Viewed

@@ -14,7 +14,9 @@ import { SeekButton } from "../../ui/seek-button/seek-button.js";
 import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
 import { SliderFill } from "../../ui/slider/slider-fill.js";
 import { SliderThumb } from "../../ui/slider/slider-thumb.js";
+import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
 import { SliderTrack } from "../../ui/slider/slider-track.js";
+import { SliderValue } from "../../ui/slider/slider-value.js";
 import { Group } from "../../ui/time/time-group.js";
 import { Separator } from "../../ui/time/time-separator.js";
 import { Value } from "../../ui/time/time-value.js";
@@ -176,10 +178,27 @@ function MinimalVideoSkin(props) {
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
 							className: "media-slider",
-							children: [/* @__PURE__ */ jsxs(SliderTrack, {
-								className: "media-slider__track",
-								children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
-							}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" })]
+							children: [
+								/* @__PURE__ */ jsxs(SliderTrack, {
+									className: "media-slider__track",
+									children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
+								}),
+								/* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" }),
+								/* @__PURE__ */ jsxs("div", {
+									className: "media-preview media-slider__preview",
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: "media-preview__thumbnail-wrapper",
+											children: /* @__PURE__ */ jsx(SliderThumbnail, { className: "media-preview__thumbnail" })
+										}),
+										/* @__PURE__ */ jsx(SliderValue, {
+											type: "pointer",
+											className: "media-preview__timestamp"
+										}),
+										/* @__PURE__ */ jsx(SpinnerIcon, { className: "media-preview__spinner media-icon" })
+									]
+								})
+							]
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {

package/dist/dev/presets/video/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":["Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nconst errorClasses = {\n root: 'media-error',\n dialog: 'media-error__dialog',\n content: 'media-error__content',\n title: 'media-error__title',\n description: 'media-error__description',\n actions: 'media-error__actions',\n close: 'media-button',\n};\n\nfunction PlayLabel(): ReactNode {\n const paused = usePlayer((s) => Boolean(s.paused));\n const ended = usePlayer((s) => Boolean(s.ended));\n if (ended) return <>Replay</>;\n return paused ? <>Play</> : <>Pause</>;\n}\n\nfunction CaptionsLabel(): ReactNode {\n const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n return active ? <>Disable captions</> : <>Enable captions</>;\n}\n\nfunction PiPLabel(): ReactNode {\n const pip = usePlayer((s) => Boolean(s.pip));\n return pip ? <>Exit picture-in-picture</> : <>Enter picture-in-picture</>;\n}\n\nfunction FullscreenLabel(): ReactNode {\n const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n return fullscreen ? <>Exit fullscreen</> : <>Enter fullscreen</>;\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root className=\"media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--play\">\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n </TimeSlider.Root>\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger\n render={\n <MuteButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--mute\">\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className=\"media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <CaptionsButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--captions\">\n <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <CaptionsLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <PiPLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <FullscreenButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"minimal-skin.js","names":["Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value","Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb"],"sources":["../../../../src/presets/video/minimal-skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type MinimalVideoSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return <button ref={ref} type=\"button\" className={cn('media-button', className)} {...props} />;\n});\n\nconst errorClasses = {\n root: 'media-error',\n dialog: 'media-error__dialog',\n content: 'media-error__content',\n title: 'media-error__title',\n description: 'media-error__description',\n actions: 'media-error__actions',\n close: 'media-button',\n};\n\nfunction PlayLabel(): ReactNode {\n const paused = usePlayer((s) => Boolean(s.paused));\n const ended = usePlayer((s) => Boolean(s.ended));\n if (ended) return <>Replay</>;\n return paused ? <>Play</> : <>Pause</>;\n}\n\nfunction CaptionsLabel(): ReactNode {\n const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n return active ? <>Disable captions</> : <>Enable captions</>;\n}\n\nfunction PiPLabel(): ReactNode {\n const pip = usePlayer((s) => Boolean(s.pip));\n return pip ? <>Exit picture-in-picture</> : <>Enter picture-in-picture</>;\n}\n\nfunction FullscreenLabel(): ReactNode {\n const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n return fullscreen ? <>Exit fullscreen</> : <>Enter fullscreen</>;\n}\n\nexport function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-minimal-skin media-minimal-skin--video', className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root className=\"media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--play\">\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={-SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton\n seconds={SEEK_TIME}\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--seek\">\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n <Time.Separator className=\"media-time__separator\" />\n <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n </Time.Group>\n\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n\n <div className=\"media-preview media-slider__preview\">\n <div className=\"media-preview__thumbnail-wrapper\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n </div>\n <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\n </TimeSlider.Root>\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger\n render={\n <MuteButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--mute\">\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className=\"media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <CaptionsButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--captions\">\n <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <CaptionsLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <PiPLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <FullscreenButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon media-button--fullscreen\">\n <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className=\"media-tooltip\">\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/dev/presets/video/minimal-skin.tailwind.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/video/minimal-skin.tailwind.tsx"],"mappings":";;;;~~iBA6IgB~~,wBAAA,CAAyB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}
1	+ {"version":3,"file":"minimal-skin.tailwind.d.ts","names":[],"sources":["../../../../src/presets/video/minimal-skin.tailwind.tsx"],"mappings":";;;;iBA+IgB,wBAAA,CAAyB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}

package/dist/dev/presets/video/minimal-skin.tailwind.js CHANGED Viewed

@@ -14,7 +14,9 @@ import { SeekButton } from "../../ui/seek-button/seek-button.js";
 import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
 import { SliderFill as SliderFill$1 } from "../../ui/slider/slider-fill.js";
 import { SliderThumb as SliderThumb$1 } from "../../ui/slider/slider-thumb.js";
+import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
 import { SliderTrack as SliderTrack$1 } from "../../ui/slider/slider-track.js";
+import { SliderValue } from "../../ui/slider/slider-value.js";
 import { Group } from "../../ui/time/time-group.js";
 import { Separator } from "../../ui/time/time-separator.js";
 import { Value } from "../../ui/time/time-value.js";
@@ -48,7 +50,7 @@ import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.
 import { time } from "../../skins/dist/default/minimal/tailwind/components/time.js";
 import { ErrorDialog } from "./error-dialog.js";
 import { overlay } from "../../skins/dist/default/minimal/tailwind/components/overlay.js";
-import { controls, popup, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
+import { controls, popup, preview, root, slider } from "../../skins/dist/default/minimal/tailwind/video.tailwind.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
@@ -218,13 +220,30 @@ function MinimalVideoSkinTailwind(props) {
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
 							render: (props) => /* @__PURE__ */ jsx(SliderRoot, { ...props }),
-							children: [/* @__PURE__ */ jsxs(SliderTrack$1, {
-								render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
-								children: [/* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) }), /* @__PURE__ */ jsx(SliderBuffer, { render: (props) => /* @__PURE__ */ jsx(SliderFill, {
-									type: "buffer",
-									...props
-								}) })]
-							}), /* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, { ...props }) })]
+							children: [
+								/* @__PURE__ */ jsxs(SliderTrack$1, {
+									render: (props) => /* @__PURE__ */ jsx(SliderTrack, { ...props }),
+									children: [/* @__PURE__ */ jsx(SliderFill$1, { render: (props) => /* @__PURE__ */ jsx(SliderFill, { ...props }) }), /* @__PURE__ */ jsx(SliderBuffer, { render: (props) => /* @__PURE__ */ jsx(SliderFill, {
+										type: "buffer",
+										...props
+									}) })]
+								}),
+								/* @__PURE__ */ jsx(SliderThumb$1, { render: (props) => /* @__PURE__ */ jsx(SliderThumb, { ...props }) }),
+								/* @__PURE__ */ jsxs("div", {
+									className: preview.root,
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											className: preview.thumbnailWrapper,
+											children: /* @__PURE__ */ jsx(SliderThumbnail, { className: preview.thumbnail })
+										}),
+										/* @__PURE__ */ jsx(SliderValue, {
+											type: "pointer",
+											className: preview.timestamp
+										}),
+										/* @__PURE__ */ jsx(SpinnerIcon, { className: cn(icon, preview.spinner) })
+									]
+								})
+							]
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {