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

@videojs/react 10.0.0-beta.5 → 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 (89) hide show

package/dist/default/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/default/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";
@@ -37,7 +39,6 @@ import SpinnerIcon from "../../icons/dist/react/minimal/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
-import { ErrorDialog } from "./error-dialog.js";
 import { iconState } from "../../skins/dist/default/shared/tailwind/icon-state.js";
 import { playbackRate } from "../../skins/dist/default/default/tailwind/components/playback-rate.js";
 import { bufferingIndicator } from "../../skins/dist/default/minimal/tailwind/components/buffering.js";
@@ -47,8 +48,9 @@ import { error } from "../../skins/dist/default/minimal/tailwind/components/erro
 import { icon, iconContainer, iconFlipped } from "../../skins/dist/default/minimal/tailwind/components/icon.js";
 import { seek } from "../../skins/dist/default/minimal/tailwind/components/seek.js";
 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", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.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.tailwind.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 { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\nimport {\n bufferingIndicator,\n button,\n buttonGroup,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n popup,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\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 { ErrorDialog } from './error-dialog';\nimport type { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n {...props}\n />\n );\n});\n\nconst errorClasses = {\n root: error.root,\n dialog: error.dialog,\n content: error.content,\n title: error.title,\n actions: error.actions,\n close: cn(button.base, button.default),\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root(false), className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className={bufferingIndicator}>\n <SpinnerIcon className={icon} />\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root\n data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n className={controls}\n >\n <Tooltip.Provider>\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className={time.controls}>\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <Time.Separator className={time.separator} />\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n </TimeSlider.Root>\n </div>\n\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.volume)}>\n <VolumeSlider.Root\n orientation=\"vertical\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\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 variant=\"icon\" {...props} className={iconState.captions.button}>\n <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props}>\n <PipIcon className={icon} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className={overlay} />\n </Container>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAA+E,SAAS,OACrG,EAAE,WAAW,SAAS,GAAG,SACzB,KACA;AACA,QACE,oBAAC;EACM;EACL,MAAK;EACL,WAAW,GAAG,OAAO,MAAM,YAAY,SAAS,OAAO,OAAO,OAAO,SAAS,UAAU;EACxF,GAAI;GACJ;EAEJ;AAEF,MAAM,aAAa,WAAkD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;AACrH,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;GAAS;EAC1E;AAEF,MAAM,cAAc,WAAkD,SAAS,YAC7E,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;GAAS;EAC3E;AAEF,MAAM,aAAa,WAAiF,SAAS,WAC3G,EAAE,OAAO,QAAQ,WAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,KAAK,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,UAAU;EACnG,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc,WAA6E,SAAS,YACxG,EAAE,YAAY,WAAW,GAAG,SAC5B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,MAAM,MAAM,aAAa,SAAY,OAAO,MAAM,aAAa,UAAU;EAC9F,GAAI;GACJ;EAEJ;AAEF,MAAM,eAAe;CACnB,MAAM,MAAM;CACZ,QAAQ,MAAM;CACd,SAAS,MAAM;CACf,OAAO,MAAM;CACb,SAAS,MAAM;CACf,OAAO,GAAG,OAAO,MAAM,OAAO,QAAQ;CACvC;AAED,SAAS,YAAuB;CAC9B,MAAM,SAAS,WAAW,MAAM,QAAQ,EAAE,OAAO,CAAC;AAElD,KADc,WAAW,MAAM,QAAQ,EAAE,MAAM,CAAC,CACrC,QAAO,0CAAE,WAAS;AAC7B,QAAO,SAAS,0CAAE,SAAO,GAAG,0CAAE,UAAQ;;AAGxC,SAAS,gBAA2B;AAElC,QADe,WAAW,MAAM,QAAQ,EAAE,iBAAiB,CAAC,GAC5C,0CAAE,qBAAmB,GAAG,0CAAE,oBAAkB;;AAG9D,SAAS,WAAsB;AAE7B,QADY,WAAW,MAAM,QAAQ,EAAE,IAAI,CAAC,GAC/B,0CAAE,4BAA0B,GAAG,0CAAE,6BAA2B;;AAG3E,SAAS,kBAA6B;AAEpC,QADmB,WAAW,MAAM,QAAQ,EAAE,WAAW,CAAC,GACtC,0CAAE,oBAAkB,GAAG,0CAAE,qBAAmB;;AAKlE,SAAgB,yBAAyB,OAAyC;CAChF,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,KAAK,MAAM,EAAE,UAAU;EAAE,GAAI;;GACnD;GAED,oBAAC,sBACC,SAAS,UACP,oBAAC;IAAI,GAAI;IAAO,WAAW;cACzB,oBAAC,eAAY,WAAW,OAAQ;KAC5B,GAER;GAEF,oBAAC,eAAY,SAAS,eAAgB;GAEtC,oBAACA;IACC,iBAAc;IACd,WAAW;cAEX,qBAACC;KACC,qBAAC;MAAI,WAAW;;OACd,qBAACC;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,KAAK;;UAC1D,oBAAC,eAAY,WAAW,GAAG,MAAM,UAAU,KAAK,QAAQ,GAAI;UAC5D,oBAAC,YAAS,WAAW,GAAG,MAAM,UAAU,KAAK,KAAK,GAAI;UACtD,oBAAC,aAAU,WAAW,GAAG,MAAM,UAAU,KAAK,MAAM,GAAI;;UACjD,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,cAAY;UACC;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC;SACC,SAAS,CAAC;SACV,SAAS,UACP,oBAAC;UAAO,SAAQ;UAAO,GAAI;UAAO,WAAW,KAAK;oBAChD,qBAAC;WAAK,WAAW;sBACf,oBAAC,YAAS,WAAW,GAAG,MAAM,YAAY,GAAI,EAC9C,oBAAC;YAAK,WAAW,GAAG,KAAK,OAAO,KAAK,cAAc;sBAAG;aAAiB;YAClE;WACA;UAEX,GAEJ,EACF,qBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;;UAAE;UAAe;UAAU;;UAAwB;SACjF;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC;SACC,SAAS;SACT,SAAS,UACP,oBAAC;UAAO,SAAQ;UAAO,GAAI;UAAO,WAAW,KAAK;oBAChD,qBAAC;WAAK,WAAW;sBACf,oBAAC,YAAS,WAAW,OAAQ,EAC7B,oBAAC;YAAK,WAAW,GAAG,KAAK,OAAO,KAAK,aAAa;sBAAG;aAAiB;YACjE;WACA;UAEX,GAEJ,EACF,qBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;;UAAE;UAAc;UAAU;;UAAwB;SAChF;;OACX;KAEN,qBAAC;MAAI,WAAW,KAAK;iBACnB,qBAACC;OAAW,WAAW,KAAK;;QAC1B,oBAACC;SAAW,MAAK;SAAU,WAAW,KAAK;UAAW;QACtD,oBAACC,aAAe,WAAW,KAAK,YAAa;QAC7C,oBAACD;SAAW,MAAK;SAAW,WAAW,KAAK;UAAY;;QAC7C,EAEb,qBAACE;OAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;kBAC3D,qBAACC;QAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;mBAC7D,oBAACC,gBAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI,EACjE,oBAACC,gBAAkB,SAAS,UAAU,oBAAC;SAAW,MAAK;SAAS,GAAI;UAAS,GAAI;SAChE,EACnB,oBAACC,iBAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS,GAAI;QACnD;OACd;KAEN,qBAAC;MAAI,WAAW;;OACd,qBAACV;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,sBACC,SAAS,UAAU,oBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,aAAa;UAAU,GACvF,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBAAE;UAAoC;SACpE;OAEf,qBAACS;QAAa;QAAY,OAAO;QAAK,YAAY;QAAK,MAAK;mBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,KAAK;;UAC1D,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,KAAK,WAAW,GAAI;;UAC3D,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,OAAO;mBACxC,qBAACC;UACC,aAAY;UACZ,gBAAe;UACf,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;qBAE5C,oBAACC;WAAmB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;qBAC/D,oBAACC,gBAAkB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI;YAChD,EACrB,oBAACC,iBAAmB,SAAS,UAAU,oBAAC;WAAY;WAAW,GAAI;YAAS,GAAI;WAC9D;UACN;SACH;OAEf,qBAACjB;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,kBACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,SAAS;oBAC9D,oBAAC,mBAAgB,WAAW,GAAG,MAAM,UAAU,SAAS,IAAI,GAAI,EAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,SAAS,GAAG,GAAI;UACvD,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,kBAAgB;UACH;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,aACC,SAAS,UACP,oBAAC;SAAO,SAAQ;SAAO,GAAI;mBACzB,oBAAC,WAAQ,WAAW,OAAQ;UACrB,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,aAAW;UACE;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,oBACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,WAAW;oBAChE,oBAAC,uBAAoB,WAAW,GAAG,MAAM,UAAU,WAAW,MAAM,GAAI,EACxE,oBAAC,sBAAmB,WAAW,GAAG,MAAM,UAAU,WAAW,KAAK,GAAI;UAC/D,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,oBAAkB;UACL;SACH;;OACX;QACW;KACL;GAEhB,oBAAC,SAAI,WAAW,UAAW;;GACjB"}
1	+ {"version":3,"file":"minimal-skin.tailwind.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.tailwind.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 { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind';\nimport {\n bufferingIndicator,\n button,\n buttonGroup,\n controls,\n error,\n icon,\n iconContainer,\n iconFlipped,\n iconState,\n overlay,\n popup,\n preview,\n root,\n seek,\n slider,\n time,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\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 { ErrorDialog } from './error-dialog';\nimport type { MinimalVideoSkinProps } from './minimal-skin';\n\nconst SEEK_TIME = 10;\n\n/* --------------------------------------- Components ---------------------------------------- /\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'> & { variant?: 'icon' }>(function Button(\n { className, variant, ...props },\n ref\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(button.base, variant === 'icon' ? button.icon : button.default, className)}\n {...props}\n />\n );\n});\n\nconst SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {\n return <div ref={ref} className={cn(slider.root, className)} {...props} />;\n});\n\nconst SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(\n { className, ...props },\n ref\n) {\n return <div ref={ref} className={cn(slider.track, className)} {...props} />;\n});\n\nconst SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' \| 'buffer' }>(function SliderFill(\n { type = 'fill', className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}\n {...props}\n />\n );\n});\n\nconst SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(\n { persistent, className, ...props },\n ref\n) {\n return (\n <div\n ref={ref}\n className={cn(slider.thumb.base, persistent ? undefined : slider.thumb.interactive, className)}\n {...props}\n />\n );\n});\n\nconst errorClasses = {\n root: error.root,\n dialog: error.dialog,\n content: error.content,\n title: error.title,\n actions: error.actions,\n close: cn(button.base, button.default),\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\n/ ------------------------------------------ Skin ------------------------------------------- */\n\nexport function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn(root(false), className)} {...rest}>\n {children}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className={bufferingIndicator}>\n <SpinnerIcon className={icon} />\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root\n data-controls=\"\" // Used as a hook for Tailwind has-[] styles\n className={controls}\n >\n <Tooltip.Provider>\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton\n render={(props) => (\n <Button variant=\"icon\" {...props} className={iconState.play.button}>\n <RestartIcon className={cn(icon, iconState.play.restart)} />\n <PlayIcon className={cn(icon, iconState.play.play)} />\n <PauseIcon className={cn(icon, iconState.play.pause)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={cn(icon, iconFlipped)} />\n <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={seek.button}>\n <span className={iconContainer}>\n <SeekIcon className={icon} />\n <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>\n </span>\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className={time.controls}>\n <Time.Group className={time.group}>\n <Time.Value type=\"current\" className={time.current} />\n <Time.Separator className={time.separator} />\n <Time.Value type=\"duration\" className={time.duration} />\n </Time.Group>\n\n <TimeSlider.Root render={(props) => <SliderRoot {...props} />}>\n <TimeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <TimeSlider.Fill render={(props) => <SliderFill {...props} />} />\n <TimeSlider.Buffer render={(props) => <SliderFill type=\"buffer\" {...props} />} />\n </TimeSlider.Track>\n <TimeSlider.Thumb render={(props) => <SliderThumb {...props} />} />\n <div className={preview.root}>\n <div className={preview.thumbnailWrapper}>\n <Slider.Thumbnail className={preview.thumbnail} />\n </div>\n <TimeSlider.Value type=\"pointer\" className={preview.timestamp} />\n <SpinnerIcon className={cn(icon, preview.spinner)} />\n </div>\n </TimeSlider.Root>\n </div>\n\n <div className={buttonGroup}>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlaybackRateButton\n render={(props) => <Button variant=\"icon\" {...props} className={playbackRate.button} />}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.mute.button}>\n <VolumeOffIcon className={cn(icon, iconState.mute.volumeOff)} />\n <VolumeLowIcon className={cn(icon, iconState.mute.volumeLow)} />\n <VolumeHighIcon className={cn(icon, iconState.mute.volumeHigh)} />\n </Button>\n )}\n />\n }\n />\n <Popover.Popup className={cn(popup.volume)}>\n <VolumeSlider.Root\n orientation=\"vertical\"\n thumbAlignment=\"edge\"\n render={(props) => <SliderRoot {...props} />}\n >\n <VolumeSlider.Track render={(props) => <SliderTrack {...props} />}>\n <VolumeSlider.Fill render={(props) => <SliderFill {...props} />} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />\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 variant=\"icon\" {...props} className={iconState.captions.button}>\n <CaptionsOffIcon className={cn(icon, iconState.captions.off)} />\n <CaptionsOnIcon className={cn(icon, iconState.captions.on)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props}>\n <PipIcon className={icon} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.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 variant=\"icon\" {...props} className={iconState.fullscreen.button}>\n <FullscreenEnterIcon className={cn(icon, iconState.fullscreen.enter)} />\n <FullscreenExitIcon className={cn(icon, iconState.fullscreen.exit)} />\n </Button>\n )}\n />\n }\n />\n <Tooltip.Popup className={cn(popup.tooltip)}>\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className={overlay} />\n </Container>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM,YAAY;AAIlB,MAAM,SAAS,WAA+E,SAAS,OACrG,EAAE,WAAW,SAAS,GAAG,SACzB,KACA;AACA,QACE,oBAAC;EACM;EACL,MAAK;EACL,WAAW,GAAG,OAAO,MAAM,YAAY,SAAS,OAAO,OAAO,OAAO,SAAS,UAAU;EACxF,GAAI;GACJ;EAEJ;AAEF,MAAM,aAAa,WAAkD,SAAS,WAAW,EAAE,WAAW,GAAG,SAAS,KAAK;AACrH,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,GAAI;GAAS;EAC1E;AAEF,MAAM,cAAc,WAAkD,SAAS,YAC7E,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAAC;EAAS;EAAK,WAAW,GAAG,OAAO,OAAO,UAAU;EAAE,GAAI;GAAS;EAC3E;AAEF,MAAM,aAAa,WAAiF,SAAS,WAC3G,EAAE,OAAO,QAAQ,WAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,KAAK,MAAM,SAAS,SAAS,OAAO,KAAK,OAAO,OAAO,KAAK,QAAQ,UAAU;EACnG,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc,WAA6E,SAAS,YACxG,EAAE,YAAY,WAAW,GAAG,SAC5B,KACA;AACA,QACE,oBAAC;EACM;EACL,WAAW,GAAG,OAAO,MAAM,MAAM,aAAa,SAAY,OAAO,MAAM,aAAa,UAAU;EAC9F,GAAI;GACJ;EAEJ;AAEF,MAAM,eAAe;CACnB,MAAM,MAAM;CACZ,QAAQ,MAAM;CACd,SAAS,MAAM;CACf,OAAO,MAAM;CACb,SAAS,MAAM;CACf,OAAO,GAAG,OAAO,MAAM,OAAO,QAAQ;CACvC;AAED,SAAS,YAAuB;CAC9B,MAAM,SAAS,WAAW,MAAM,QAAQ,EAAE,OAAO,CAAC;AAElD,KADc,WAAW,MAAM,QAAQ,EAAE,MAAM,CAAC,CACrC,QAAO,0CAAE,WAAS;AAC7B,QAAO,SAAS,0CAAE,SAAO,GAAG,0CAAE,UAAQ;;AAGxC,SAAS,gBAA2B;AAElC,QADe,WAAW,MAAM,QAAQ,EAAE,iBAAiB,CAAC,GAC5C,0CAAE,qBAAmB,GAAG,0CAAE,oBAAkB;;AAG9D,SAAS,WAAsB;AAE7B,QADY,WAAW,MAAM,QAAQ,EAAE,IAAI,CAAC,GAC/B,0CAAE,4BAA0B,GAAG,0CAAE,6BAA2B;;AAG3E,SAAS,kBAA6B;AAEpC,QADmB,WAAW,MAAM,QAAQ,EAAE,WAAW,CAAC,GACtC,0CAAE,oBAAkB,GAAG,0CAAE,qBAAmB;;AAKlE,SAAgB,yBAAyB,OAAyC;CAChF,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,qBAAC;EAAU,WAAW,GAAG,KAAK,MAAM,EAAE,UAAU;EAAE,GAAI;;GACnD;GAED,oBAAC,sBACC,SAAS,UACP,oBAAC;IAAI,GAAI;IAAO,WAAW;cACzB,oBAAC,eAAY,WAAW,OAAQ;KAC5B,GAER;GAEF,oBAAC,eAAY,SAAS,eAAgB;GAEtC,oBAACA;IACC,iBAAc;IACd,WAAW;cAEX,qBAACC;KACC,qBAAC;MAAI,WAAW;;OACd,qBAACC;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,KAAK;;UAC1D,oBAAC,eAAY,WAAW,GAAG,MAAM,UAAU,KAAK,QAAQ,GAAI;UAC5D,oBAAC,YAAS,WAAW,GAAG,MAAM,UAAU,KAAK,KAAK,GAAI;UACtD,oBAAC,aAAU,WAAW,GAAG,MAAM,UAAU,KAAK,MAAM,GAAI;;UACjD,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,cAAY;UACC;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC;SACC,SAAS,CAAC;SACV,SAAS,UACP,oBAAC;UAAO,SAAQ;UAAO,GAAI;UAAO,WAAW,KAAK;oBAChD,qBAAC;WAAK,WAAW;sBACf,oBAAC,YAAS,WAAW,GAAG,MAAM,YAAY,GAAI,EAC9C,oBAAC;YAAK,WAAW,GAAG,KAAK,OAAO,KAAK,cAAc;sBAAG;aAAiB;YAClE;WACA;UAEX,GAEJ,EACF,qBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;;UAAE;UAAe;UAAU;;UAAwB;SACjF;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC;SACC,SAAS;SACT,SAAS,UACP,oBAAC;UAAO,SAAQ;UAAO,GAAI;UAAO,WAAW,KAAK;oBAChD,qBAAC;WAAK,WAAW;sBACf,oBAAC,YAAS,WAAW,OAAQ,EAC7B,oBAAC;YAAK,WAAW,GAAG,KAAK,OAAO,KAAK,aAAa;sBAAG;aAAiB;YACjE;WACA;UAEX,GAEJ,EACF,qBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;;UAAE;UAAc;UAAU;;UAAwB;SAChF;;OACX;KAEN,qBAAC;MAAI,WAAW,KAAK;iBACnB,qBAACC;OAAW,WAAW,KAAK;;QAC1B,oBAACC;SAAW,MAAK;SAAU,WAAW,KAAK;UAAW;QACtD,oBAACC,aAAe,WAAW,KAAK,YAAa;QAC7C,oBAACD;SAAW,MAAK;SAAW,WAAW,KAAK;UAAY;;QAC7C,EAEb,qBAACE;OAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;;QAC3D,qBAACC;SAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;oBAC7D,oBAACC,gBAAgB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI,EACjE,oBAACC,gBAAkB,SAAS,UAAU,oBAAC;UAAW,MAAK;UAAS,GAAI;WAAS,GAAI;UAChE;QACnB,oBAACC,iBAAiB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS,GAAI;QACnE,qBAAC;SAAI,WAAW,QAAQ;;UACtB,oBAAC;WAAI,WAAW,QAAQ;qBACtB,oBAACC,mBAAiB,WAAW,QAAQ,YAAa;YAC9C;UACN,oBAACC;WAAiB,MAAK;WAAU,WAAW,QAAQ;YAAa;UACjE,oBAAC,eAAY,WAAW,GAAG,MAAM,QAAQ,QAAQ,GAAI;;UACjD;;QACU;OACd;KAEN,qBAAC;MAAI,WAAW;;OACd,qBAACZ;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,sBACC,SAAS,UAAU,oBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,aAAa;UAAU,GACvF,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBAAE;UAAoC;SACpE;OAEf,qBAACW;QAAa;QAAY,OAAO;QAAK,YAAY;QAAK,MAAK;mBAC1D,oBAACC,kBACC,QACE,oBAAC,cACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,KAAK;;UAC1D,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,iBAAc,WAAW,GAAG,MAAM,UAAU,KAAK,UAAU,GAAI;UAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,KAAK,WAAW,GAAI;;UAC3D,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,OAAO;mBACxC,qBAACC;UACC,aAAY;UACZ,gBAAe;UACf,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS;qBAE5C,oBAACC;WAAmB,SAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;qBAC/D,oBAACC,gBAAkB,SAAS,UAAU,oBAAC,cAAW,GAAI,QAAS,GAAI;YAChD,EACrB,oBAACC,iBAAmB,SAAS,UAAU,oBAAC;WAAY;WAAW,GAAI;YAAS,GAAI;WAC9D;UACN;SACH;OAEf,qBAACnB;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,kBACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,SAAS;oBAC9D,oBAAC,mBAAgB,WAAW,GAAG,MAAM,UAAU,SAAS,IAAI,GAAI,EAChE,oBAAC,kBAAe,WAAW,GAAG,MAAM,UAAU,SAAS,GAAG,GAAI;UACvD,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,kBAAgB;UACH;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,aACC,SAAS,UACP,oBAAC;SAAO,SAAQ;SAAO,GAAI;mBACzB,oBAAC,WAAQ,WAAW,OAAQ;UACrB,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,aAAW;UACE;SACH;OAEf,qBAACF;QAAa,MAAK;mBACjB,oBAACC,kBACC,QACE,oBAAC,oBACC,SAAS,UACP,qBAAC;SAAO,SAAQ;SAAO,GAAI;SAAO,WAAW,UAAU,WAAW;oBAChE,oBAAC,uBAAoB,WAAW,GAAG,MAAM,UAAU,WAAW,MAAM,GAAI,EACxE,oBAAC,sBAAmB,WAAW,GAAG,MAAM,UAAU,WAAW,KAAK,GAAI;UAC/D,GAEX,GAEJ,EACF,oBAACC;SAAc,WAAW,GAAG,MAAM,QAAQ;mBACzC,oBAAC,oBAAkB;UACL;SACH;;OACX;QACW;KACL;GAEhB,oBAAC,SAAI,WAAW,UAAW;;GACjB"}

package/dist/default/presets/video/skin.css CHANGED Viewed

@@ -100,7 +100,6 @@
 .media-default-skin *::before,
 .media-default-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-default-skin img,
 .media-default-skin video,
@@ -150,7 +149,7 @@
   background-color: var(--media-surface-background-color);
   backdrop-filter: var(--media-surface-backdrop-filter);
   box-shadow:
-    inset 0 0 0 1px var(--media-surface-inner-border-color),
+    0 0 0 1px var(--media-surface-outer-border-color),
     0 1px 3px 0 var(--media-surface-shadow-color),
     0 1px 2px -1px var(--media-surface-shadow-color);
@@ -161,7 +160,7 @@
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);
+    box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
     pointer-events: none;
   }
@@ -183,9 +182,11 @@
   display: block;
   width: 100%;
   height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
 }
 .media-default-skin ::slotted(video) {
-  border-radius: var(--media-border-radius, 2rem);
+  border-radius: var(--media-video-border-radius);
 }
 .media-default-skin video {
   border-radius: inherit;
@@ -200,10 +201,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;
@@ -214,14 +216,10 @@
    Fullscreen
    ========================================================================== */
-.media-default-skin:fullscreen video,
 .media-default-skin:fullscreen ::slotted(video),
-.media-default-skin:fullscreen > img {
+.media-default-skin:fullscreen video {
   object-fit: contain;
 }
-.media-default-skin:fullscreen ::slotted(video) {
-  border-radius: 0;
-}
 /* ==========================================================================
    Overlay / Scrim
@@ -434,6 +432,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
   &:focus-visible {
     outline-color: oklch(62.3% 0.214 259.815);
@@ -531,6 +530,63 @@
   scale: -1 1;
 }
+/* ==========================================================================
+   Media preview
+   ========================================================================== */
+.media-default-skin .media-preview {
+  background-color: oklch(0 0 0 / 0.9);
+  border-radius: 0.75rem;
+  & .media-preview__thumbnail {
+    display: block;
+    position: relative;
+    border-radius: inherit;
+    overflow: clip;
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
+    }
+  }
+  & .media-preview__timestamp {
+    position: absolute;
+    bottom: 0.5rem;
+    inset-inline: 0;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  & .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
    ========================================================================== */
@@ -543,6 +599,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -675,11 +732,6 @@
   }
 }
-/* Time display within slider */
-.media-default-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */
@@ -691,12 +743,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);
   }
@@ -716,10 +768,50 @@
   &[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-default-skin .media-popover {
   --media-popover-side-offset: 0.5rem;
+  &[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-default-skin .media-popover--volume {
   padding: 0.625rem 0.25rem;
@@ -731,7 +823,16 @@
   border-radius: calc(infinity * 1px);
   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);
+  }
 }
 /* ==========================================================================
@@ -739,6 +840,7 @@
    ========================================================================== */
 .media-default-skin {
+  --media-caption-track-duration: 150ms;
   --media-caption-track-delay: 600ms;
   --media-caption-track-y: -0.5rem;
@@ -746,11 +848,15 @@
     --media-caption-track-delay: 25ms;
     --media-caption-track-y: -3.5rem;
   }
+  @media (prefers-reduced-motion: reduce) {
+    --media-caption-track-duration: 50ms;
+  }
 }
 .media-default-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;
@@ -776,6 +882,7 @@
   --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
   --media-surface-shadow-color: oklch(0 0 0 / 0.15);
   --media-surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-video-border-radius: var(--media-border-radius, 2rem);
   @media (prefers-color-scheme: dark) {
     --media-border-color: oklch(1 0 0 / 0.1);
@@ -793,7 +900,7 @@
   }
   &:fullscreen {
-    border-radius: 0;
+    --media-border-radius: 0;
   }
 }
@@ -840,6 +947,11 @@
   }
 }
+/* Hide cursor when controls are hidden in fullscreen */
+.media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
+  cursor: none;
+}
 /* ==========================================================================
    Sliders
    ========================================================================== */
@@ -849,3 +961,29 @@
   box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
 }
+.media-default-skin .media-slider__preview {
+  position: absolute;
+  left: var(--media-slider-pointer);
+  bottom: calc(100% + 1.2rem);
+  translate: -50%;
+  opacity: 0;
+  scale: 0.8;
+  filter: blur(8px);
+  transition-property: scale, opacity, filter;
+  transition-duration: 150ms;
+  transform-origin: bottom;
+  & .media-preview__thumbnail {
+    max-width: 11rem;
+  }
+  &:has(.media-preview__thumbnail[data-loading]) {
+    max-height: 6rem;
+  }
+}
+.media-default-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
+  opacity: 1;
+  scale: 1;
+  filter: blur(0);
+}

package/dist/default/presets/video/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 { Value } from "../../ui/time/time-value.js";
 import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
@@ -23,7 +25,6 @@ import { TooltipProvider } from "../../ui/tooltip/tooltip-provider.js";
 import { TooltipRoot } from "../../ui/tooltip/tooltip-root.js";
 import { TooltipTrigger } from "../../ui/tooltip/tooltip-trigger.js";
 import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
-import { ErrorDialog } from "./error-dialog.js";
 import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
 import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
 import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
@@ -37,6 +38,7 @@ import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
 import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
+import { ErrorDialog } from "./error-dialog.js";
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
@@ -165,10 +167,24 @@ function VideoSkin(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-surface media-preview media-slider__preview",
+										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__ */ jsx(Value, {
 								type: "duration",