npm - @videojs/react - Versions diffs - 10.0.0-alpha.9 → 10.0.0-beta.10 - Mend

@videojs/react 10.0.0-alpha.9 → 10.0.0-beta.10

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 (444) hide show

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

@@ -1,5 +1,7 @@
-import { Container } from "../../player/context.js";
+import { Container, usePlayer } from "../../player/context.js";
+import { isRenderProp } from "../../utils/use-render.js";
 import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
+import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
 import { ControlsRoot } from "../../ui/controls/controls-root.js";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
@@ -9,23 +11,30 @@ import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-
 import { PopoverPopup } from "../../ui/popover/popover-popup.js";
 import { PopoverRoot } from "../../ui/popover/popover-root.js";
 import { PopoverTrigger } from "../../ui/popover/popover-trigger.js";
+import { Poster } from "../../ui/poster/poster.js";
 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";
+import { TooltipPopup } from "../../ui/tooltip/tooltip-popup.js";
+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 { CaptionsButton } from "../../ui/captions-button/captions-button.js";
-import { ErrorDialog } from "./error-dialog.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";
 import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
 import PauseIcon from "../../icons/dist/react/default/pause.js";
-import PipIcon from "../../icons/dist/react/default/pip.js";
+import PipEnterIcon from "../../icons/dist/react/default/pip-enter.js";
+import PipExitIcon from "../../icons/dist/react/default/pip-exit.js";
 import PlayIcon from "../../icons/dist/react/default/play.js";
 import RestartIcon from "../../icons/dist/react/default/restart.js";
 import SeekIcon from "../../icons/dist/react/default/seek.js";
@@ -34,34 +43,85 @@ 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 { forwardRef } from "react";
+import { isString } from "@videojs/utils/predicate";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
 //#region src/presets/video/skin.tsx
 const SEEK_TIME = 10;
-const Button = forwardRef(function Button({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		className: cn("media-button", className),
-		...props
-	});
-});
-const errorClasses = {
+const ERROR_CLASSNAMES = {
 	root: "media-error",
 	dialog: "media-error__dialog media-surface",
 	content: "media-error__content",
 	title: "media-error__title",
 	description: "media-error__description",
 	actions: "media-error__actions",
-	close: "media-button"
+	close: "media-button media-button--primary"
 };
+const Button = forwardRef(function Button({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn("media-button media-button--subtle media-button--icon", className),
+		...props
+	});
+});
+function PlayLabel() {
+	const paused = usePlayer((s) => Boolean(s.paused));
+	if (usePlayer((s) => Boolean(s.ended))) return "Replay";
+	return paused ? "Play" : "Pause";
+}
+function CaptionsLabel() {
+	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? "Disable captions" : "Enable captions";
+}
+function PiPLabel() {
+	return usePlayer((s) => Boolean(s.pip)) ? "Exit picture-in-picture" : "Enter picture-in-picture";
+}
+function FullscreenLabel() {
+	return usePlayer((s) => Boolean(s.fullscreen)) ? "Exit fullscreen" : "Enter fullscreen";
+}
+function VolumePopover() {
+	const volumeUnsupported = usePlayer((s) => s.volumeAvailability === "unsupported");
+	const muteButton = /* @__PURE__ */ jsxs(MuteButton, {
+		className: "media-button--mute",
+		render: /* @__PURE__ */ jsx(Button, {}),
+		children: [
+			/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
+			/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
+			/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
+		]
+	});
+	if (volumeUnsupported) return muteButton;
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		openOnHover: true,
+		delay: 200,
+		closeDelay: 100,
+		side: "top",
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: muteButton }), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "media-surface media-popover media-popover--volume",
+			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
+				className: "media-slider",
+				orientation: "vertical",
+				thumbAlignment: "edge",
+				children: [/* @__PURE__ */ jsx(SliderTrack, {
+					className: "media-slider__track",
+					children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
+				}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
+			})
+		})]
+	});
+}
 function VideoSkin(props) {
-	const { children, className, ...rest } = props;
+	const { children, className, poster, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("media-default-skin", className),
+		className: cn("media-default-skin media-default-skin--video", className),
 		...rest,
 		children: [
+			children,
+			poster && /* @__PURE__ */ jsx(Poster, {
+				src: isString(poster) ? poster : void 0,
+				render: isRenderProp(poster) ? poster : void 0
+			}),
 			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
 				...props,
 				className: "media-buffering-indicator",
@@ -70,24 +130,31 @@ function VideoSkin(props) {
 					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
 				})
 			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classes: errorClasses }),
-			/* @__PURE__ */ jsxs(ControlsRoot, {
+			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ControlsRoot, {
 				className: "media-surface media-controls",
-				children: [
-					/* @__PURE__ */ jsx(PlayButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-						...props,
-						className: "media-button--icon media-button--play",
-						children: [
-							/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
-							/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
-							/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
-						]
-					}) }),
-					/* @__PURE__ */ jsx(SeekButton, {
-						seconds: -SEEK_TIME,
-						render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon media-button--seek",
+				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
+							className: "media-button--play",
+							render: /* @__PURE__ */ jsx(Button, {}),
+							children: [
+								/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
+								/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
+								/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
+							]
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: /* @__PURE__ */ jsx(PlayLabel, {})
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+							seconds: -SEEK_TIME,
+							className: "media-button--seek",
+							render: /* @__PURE__ */ jsx(Button, {}),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "media-icon__container",
 								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
@@ -95,13 +162,21 @@ function VideoSkin(props) {
 									children: SEEK_TIME
 								})]
 							})
-						})
+						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: [
+								"Seek backward ",
+								SEEK_TIME,
+								" seconds"
+							]
+						})]
 					}),
-					/* @__PURE__ */ jsx(SeekButton, {
-						seconds: SEEK_TIME,
-						render: (props) => /* @__PURE__ */ jsx(Button, {
-							...props,
-							className: "media-button--icon media-button--seek",
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
+							seconds: SEEK_TIME,
+							className: "media-button--seek",
+							render: /* @__PURE__ */ jsx(Button, {}),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "media-icon__container",
 								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
@@ -109,7 +184,14 @@ function VideoSkin(props) {
 									children: SEEK_TIME
 								})]
 							})
-						})
+						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: [
+								"Seek forward ",
+								SEEK_TIME,
+								" seconds"
+							]
+						})]
 					}),
 					/* @__PURE__ */ jsxs(Group, {
 						className: "media-time",
@@ -120,10 +202,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",
@@ -131,55 +227,53 @@ function VideoSkin(props) {
 							})
 						]
 					}),
-					/* @__PURE__ */ jsx(PlaybackRateButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-						...props,
-						className: "media-button--icon media-button--playback-rate"
-					}) }),
-					/* @__PURE__ */ jsxs(PopoverRoot, {
-						openOnHover: true,
-						delay: 200,
-						closeDelay: 100,
+					/* @__PURE__ */ jsxs(TooltipRoot, {
 						side: "top",
-						children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(MuteButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-							...props,
-							className: "media-button--icon media-button--mute",
-							children: [
-								/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
-								/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
-								/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
-							]
-						}) }) }), /* @__PURE__ */ jsx(PopoverPopup, {
-							className: "media-surface media-popup media-popup--volume media-popup-animation",
-							children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
-								className: "media-slider",
-								orientation: "vertical",
-								thumbAlignment: "edge",
-								children: [/* @__PURE__ */ jsx(SliderTrack, {
-									className: "media-slider__track",
-									children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
-								}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
-							})
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
+							className: "media-button--playback-rate",
+							render: /* @__PURE__ */ jsx(Button, {})
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: "Toggle playback rate"
 						})]
 					}),
-					/* @__PURE__ */ jsx(CaptionsButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-						...props,
-						className: "media-button--icon media-button--captions",
-						children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
-					}) }),
-					/* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
-						...props,
-						className: "media-button--icon",
-						children: /* @__PURE__ */ jsx(PipIcon, { className: "media-icon" })
-					}) }),
-					/* @__PURE__ */ jsx(FullscreenButton, { render: (props) => /* @__PURE__ */ jsxs(Button, {
-						...props,
-						className: "media-button--icon media-button--fullscreen",
-						children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
-					}) })
-				]
+					/* @__PURE__ */ jsx(VolumePopover, {}),
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
+							className: "media-button--captions",
+							render: /* @__PURE__ */ jsx(Button, {}),
+							children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: /* @__PURE__ */ jsx(CaptionsLabel, {})
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
+							className: "media-button--pip",
+							render: /* @__PURE__ */ jsx(Button, {}),
+							children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }), /* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" })]
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: /* @__PURE__ */ jsx(PiPLabel, {})
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TooltipRoot, {
+						side: "top",
+						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
+							className: "media-button--fullscreen",
+							render: /* @__PURE__ */ jsx(Button, {}),
+							children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
+						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+							className: "media-surface media-tooltip",
+							children: /* @__PURE__ */ jsx(FullscreenLabel, {})
+						})]
+					})
+				] })
 			}),
-			/* @__PURE__ */ jsx("div", { className: "media-overlay" }),
-			children
+			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
 		]
 	});
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value","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/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';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container } 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 { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\nimport { ErrorDialog } from './error-dialog';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = 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 media-surface',\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\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin', className)} {...rest}>\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n </div>\n )}\n />\n\n <ErrorDialog classes={errorClasses} />\n\n <Controls.Root className=\"media-surface media-controls\">\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 <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 <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 <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value\" />\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 <Time.Value type=\"duration\" className=\"media-time__value\" />\n </Time.Group>\n\n <PlaybackRateButton\n render={(props) => <Button {...props} className=\"media-button--icon media-button--playback-rate\" />}\n />\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-surface media-popup media-popup--volume media-popup-animation\">\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 <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 <PiPButton\n render={(props) => (\n <Button {...props} className=\"media-button--icon\">\n <PipIcon className=\"media-icon\" />\n </Button>\n )}\n />\n\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 </Controls.Root>\n\n {/* <div className=\"media-captions\">\n <div className=\"media-captions__container\">\n <span className=\"media-captions__text\">An example cue</span>\n <span className=\"media-captions__text\">\n <p>Another example cue with HTML</p>\n </span>\n </div>\n </div> */}\n\n <div className=\"media-overlay\" />\n\n {children}\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipEnterIcon,\n PipExitIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { isString } from '@videojs/utils/predicate';\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 { Poster } from '@/ui/poster';\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 { isRenderProp } from '@/utils/use-render';\nimport { ErrorDialog } from '../error-dialog';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n root: 'media-error',\n dialog: 'media-error__dialog media-surface',\n content: 'media-error__content',\n title: 'media-error__title',\n description: 'media-error__description',\n actions: 'media-error__actions',\n close: 'media-button media-button--primary',\n};\n\nexport type VideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn('media-button media-button--subtle media-button--icon', className)}\n {...props}\n />\n );\n});\n\nfunction PlayLabel(): string {\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(): string {\n const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n const pip = usePlayer((s) => Boolean(s.pip));\n return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton className=\"media-button--mute\" render={<Button />}>\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 </MuteButton>\n );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-surface 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}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, poster, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n {children}\n\n {poster && (\n <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n )}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n </div>\n )}\n />\n\n <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n <Controls.Root className=\"media-surface media-controls\">\n <Tooltip.Provider>\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton className=\"media-button--play\" render={<Button />}>\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 </PlayButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">\n <PlayLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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 </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface 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 seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\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 </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Time.Group className=\"media-time\">\n <Time.Value type=\"current\" className=\"media-time__value\" />\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-surface media-preview media-slider__preview\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className=\"media-time__value\" />\n </Time.Group>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n </CaptionsButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">\n <CaptionsLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PiPButton className=\"media-button--pip\" render={<Button />}>\n <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n </PiPButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">\n <PiPLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n </FullscreenButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">\n <FullscreenLabel />\n </Tooltip.Popup>\n </Tooltip.Root>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}