@videojs/react 0.1.0-preview.9 → 10.0.0-alpha.4

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

@@ -0,0 +1,235 @@
+import { Container } from "../../player/context.js";
+import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.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";
+import { PiPButton } from "../../ui/pip-button/pip-button.js";
+import { PlayButton } from "../../ui/play-button/play-button.js";
+import { SeekButton } from "../../ui/seek-button/seek-button.js";
+import { Group } from "../../ui/time/time-group.js";
+import { Value } from "../../ui/time/time-value.js";
+import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
+import { ErrorDialog } from "../../ui/error-dialog/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 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";
+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 { forwardRef } from "react";
+import { Fragment, 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
+	});
+});
+function PlayButtonIcon({ state, className, ...rest }) {
+	const { ended, paused } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(RestartIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": !ended })
+		}),
+		/* @__PURE__ */ jsx(PlayIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": ended || !paused })
+		}),
+		/* @__PURE__ */ jsx(PauseIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": paused })
+		})
+	] });
+}
+function MuteButtonIcon({ state, className, ...rest }) {
+	const { muted, volumeLevel } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(VolumeOffIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": !muted })
+		}),
+		/* @__PURE__ */ jsx(VolumeLowIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": muted || volumeLevel !== "low" })
+		}),
+		/* @__PURE__ */ jsx(VolumeHighIcon, {
+			...rest,
+			className: cn(className, { "media-icon--hidden": muted || volumeLevel === "low" })
+		})
+	] });
+}
+function CaptionsButtonIcon({ state, className, ...rest }) {
+	const { active } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CaptionsOffIcon, {
+		...rest,
+		className: cn(className, { "media-icon--hidden": active })
+	}), /* @__PURE__ */ jsx(CaptionsOnIcon, {
+		...rest,
+		className: cn(className, { "media-icon--hidden": !active })
+	})] });
+}
+function FullscreenButtonIcon({ state, className, ...rest }) {
+	const { fullscreen } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FullscreenExitIcon, {
+		...rest,
+		className: cn(className, { "media-icon--hidden": !fullscreen })
+	}), /* @__PURE__ */ jsx(FullscreenEnterIcon, {
+		...rest,
+		className: cn(className, { "media-icon--hidden": fullscreen })
+	})] });
+}
+function VideoSkin(props) {
+	const { children, className, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Container, {
+		className: cn("media-default-skin", className),
+		...rest,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props, state) => state.visible ? /* @__PURE__ */ jsx("div", {
+				...props,
+				className: "media-buffering-indicator",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "media-surface",
+					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
+				})
+			}) : null }),
+			/* @__PURE__ */ jsx(ErrorDialog, {
+				"aria-labelledby": "media-error-title",
+				"aria-describedby": "media-error-description",
+				render: (props, { onDismiss }) => /* @__PURE__ */ jsx("div", {
+					...props,
+					className: "media-error",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "media-error__dialog media-surface",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "media-error__content",
+							children: [/* @__PURE__ */ jsx("p", {
+								id: "media-error-title",
+								className: "media-error__title",
+								children: "Something went wrong."
+							}), /* @__PURE__ */ jsx("p", {
+								id: "media-error-description",
+								className: "media-error__description",
+								children: "An error occurred while trying to play the video. Please try again."
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "media-error__actions",
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: onDismiss,
+								children: "OK"
+							})
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(ControlsRoot, {
+				className: "media-surface media-controls",
+				children: [
+					/* @__PURE__ */ jsx(PlayButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						...props,
+						className: "media-button--icon",
+						children: /* @__PURE__ */ jsx(PlayButtonIcon, {
+							state,
+							className: "media-icon"
+						})
+					}) }),
+					/* @__PURE__ */ jsx(SeekButton, {
+						seconds: -SEEK_TIME,
+						render: (props) => /* @__PURE__ */ jsx(Button, {
+							...props,
+							className: "media-button--icon media-button--seek",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "media-icon__container",
+								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
+									className: "media-icon__label",
+									children: SEEK_TIME
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(SeekButton, {
+						seconds: SEEK_TIME,
+						render: (props) => /* @__PURE__ */ jsx(Button, {
+							...props,
+							className: "media-button--icon media-button--seek",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "media-icon__container",
+								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
+									className: "media-icon__label",
+									children: SEEK_TIME
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs(Group, {
+						className: "media-time",
+						children: [
+							/* @__PURE__ */ jsx(Value, {
+								type: "current",
+								className: "media-time__value"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "media-slider",
+								style: {
+									height: "4px",
+									background: "oklab(1 0 0 / 0.2)"
+								}
+							}),
+							/* @__PURE__ */ jsx(Value, {
+								type: "duration",
+								className: "media-time__value"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(MuteButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						...props,
+						className: "media-button--icon",
+						children: /* @__PURE__ */ jsx(MuteButtonIcon, {
+							state,
+							className: "media-icon"
+						})
+					}) }),
+					/* @__PURE__ */ jsx(CaptionsButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						...props,
+						className: "media-button--icon",
+						children: /* @__PURE__ */ jsx(CaptionsButtonIcon, {
+							state,
+							className: "media-icon"
+						})
+					}) }),
+					/* @__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, state) => /* @__PURE__ */ jsx(Button, {
+						...props,
+						className: "media-button--icon",
+						children: /* @__PURE__ */ jsx(FullscreenButtonIcon, {
+							state,
+							className: "media-icon"
+						})
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
+		]
+	});
+}
+
+//#endregion
+export { VideoSkin };
+//# sourceMappingURL=skin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import type { FullscreenButtonState, MuteButtonState, PlayButtonState } from '@videojs/core';\nimport {\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, type CaptionsButtonState } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\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 { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport type { BaseSkinProps } from '../types';\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\nfunction PlayButtonIcon({ state, className, ...rest }: { state: PlayButtonState } & ComponentProps<'svg'>) {\n  const { ended, paused } = state;\n  return (\n    <>\n      <RestartIcon {...rest} className={cn(className, { 'media-icon--hidden': !ended })} />\n      <PlayIcon {...rest} className={cn(className, { 'media-icon--hidden': ended || !paused })} />\n      <PauseIcon {...rest} className={cn(className, { 'media-icon--hidden': paused })} />\n    </>\n  );\n}\n\nfunction MuteButtonIcon({ state, className, ...rest }: { state: MuteButtonState } & ComponentProps<'svg'>) {\n  const { muted, volumeLevel } = state;\n  return (\n    <>\n      <VolumeOffIcon {...rest} className={cn(className, { 'media-icon--hidden': !muted })} />\n      <VolumeLowIcon {...rest} className={cn(className, { 'media-icon--hidden': muted || volumeLevel !== 'low' })} />\n      <VolumeHighIcon {...rest} className={cn(className, { 'media-icon--hidden': muted || volumeLevel === 'low' })} />\n    </>\n  );\n}\n\nfunction CaptionsButtonIcon({ state, className, ...rest }: { state: CaptionsButtonState } & ComponentProps<'svg'>) {\n  const { active } = state;\n  return (\n    <>\n      <CaptionsOffIcon {...rest} className={cn(className, { 'media-icon--hidden': active })} />\n      <CaptionsOnIcon {...rest} className={cn(className, { 'media-icon--hidden': !active })} />\n    </>\n  );\n}\n\nfunction FullscreenButtonIcon({ state, className, ...rest }: { state: FullscreenButtonState } & ComponentProps<'svg'>) {\n  const { fullscreen } = state;\n  return (\n    <>\n      <FullscreenExitIcon {...rest} className={cn(className, { 'media-icon--hidden': !fullscreen })} />\n      <FullscreenEnterIcon {...rest} className={cn(className, { 'media-icon--hidden': fullscreen })} />\n    </>\n  );\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      {children}\n\n      <BufferingIndicator\n        render={(props, state) =>\n          state.visible ? (\n            <div {...props} className=\"media-buffering-indicator\">\n              <div className=\"media-surface\">\n                <SpinnerIcon className=\"media-icon\" />\n              </div>\n            </div>\n          ) : null\n        }\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div {...props} className=\"media-error\">\n            <div className=\"media-error__dialog media-surface\">\n              <div className=\"media-error__content\">\n                <p id=\"media-error-title\" className=\"media-error__title\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className=\"media-error__description\">\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className=\"media-error__actions\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root className=\"media-surface media-controls\">\n        <PlayButton\n          render={(props, state) => (\n            <Button {...props} className=\"media-button--icon\">\n              <PlayButtonIcon state={state} className=\"media-icon\" />\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          {/* Temporary spacer */}\n          <div className=\"media-slider\" style={{ height: '4px', background: 'oklab(1 0 0 / 0.2)' }} />\n          <Time.Value type=\"duration\" className=\"media-time__value\" />\n        </Time.Group>\n\n        <MuteButton\n          render={(props, state) => (\n            <Button {...props} className=\"media-button--icon\">\n              <MuteButtonIcon state={state} className=\"media-icon\" />\n            </Button>\n          )}\n        />\n\n        <CaptionsButton\n          render={(props, state) => (\n            <Button {...props} className=\"media-button--icon\">\n              <CaptionsButtonIcon state={state} className=\"media-icon\" />\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, state) => (\n            <Button {...props} className=\"media-button--icon\">\n              <FullscreenButtonIcon state={state} className=\"media-icon\" />\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    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/default/presets/video/skin.tailwind.js

@@ -0,0 +1,234 @@
+import { Container } from "../../player/context.js";
+import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.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";
+import { PiPButton } from "../../ui/pip-button/pip-button.js";
+import { PlayButton } from "../../ui/play-button/play-button.js";
+import { SeekButton } from "../../ui/seek-button/seek-button.js";
+import { Group } from "../../ui/time/time-group.js";
+import { Value } from "../../ui/time/time-value.js";
+import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
+import { ErrorDialog } from "../../ui/error-dialog/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 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";
+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 { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@videojs/utils/style";
+
+//#region src/presets/video/skin.tailwind.tsx
+const SEEK_TIME = 10;
+const surface = cn("bg-white/10", "backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150", "ring ring-white/5 ring-inset shadow-sm shadow-black/15", "after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20", "contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20");
+const icon = cn("[grid-area:1/1] size-4.5 shrink-0", "drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25", "transition-discrete transition-[display,opacity] duration-150 ease-out");
+const iconHidden = "hidden opacity-0";
+const Button = forwardRef(function Button({ className, variant, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn("shrink-0 border-none cursor-pointer select-none", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,color,outline-offset] duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", variant === "icon" ? cn("grid p-2 bg-transparent rounded-full", "text-white/90", "text-shadow-2xs text-shadow-black/25", "hover:bg-white/10 hover:text-white hover:no-underline", "focus-visible:bg-white/10 focus-visible:text-white", "focus-visible:outline-blue-500 focus-visible:outline-offset-2", "aria-expanded:bg-white/10 aria-expanded:text-white") : cn("flex items-center justify-center py-2 px-4 bg-white rounded-full", "text-black font-medium", "focus-visible:outline-blue-500 focus-visible:outline-offset-2"), className),
+		...props
+	});
+});
+function PlayButtonIcon({ state, className, ...rest }) {
+	const { ended, paused } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(RestartIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: !ended })
+		}),
+		/* @__PURE__ */ jsx(PlayIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: ended || !paused })
+		}),
+		/* @__PURE__ */ jsx(PauseIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: paused })
+		})
+	] });
+}
+function MuteButtonIcon({ state, className, ...rest }) {
+	const { muted, volumeLevel } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(VolumeOffIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: !muted })
+		}),
+		/* @__PURE__ */ jsx(VolumeLowIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: muted || volumeLevel !== "low" })
+		}),
+		/* @__PURE__ */ jsx(VolumeHighIcon, {
+			...rest,
+			className: cn(className, { [iconHidden]: muted || volumeLevel === "low" })
+		})
+	] });
+}
+function CaptionsButtonIcon({ state, className, ...rest }) {
+	const { active } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CaptionsOffIcon, {
+		...rest,
+		className: cn(className, { [iconHidden]: active })
+	}), /* @__PURE__ */ jsx(CaptionsOnIcon, {
+		...rest,
+		className: cn(className, { [iconHidden]: !active })
+	})] });
+}
+function FullscreenButtonIcon({ state, className, ...rest }) {
+	const { fullscreen } = state;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FullscreenExitIcon, {
+		...rest,
+		className: cn(className, { [iconHidden]: !fullscreen })
+	}), /* @__PURE__ */ jsx(FullscreenEnterIcon, {
+		...rest,
+		className: cn(className, { [iconHidden]: fullscreen })
+	})] });
+}
+function VideoSkinTailwind(props) {
+	const { children, className, ...rest } = props;
+	return /* @__PURE__ */ jsxs(Container, {
+		className: cn("relative isolate overflow-clip @container/media-root", "rounded-[var(--media-border-radius,2rem)] bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10", "before:inset-px before:ring-1 before:ring-inset before:ring-white/15", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/10", "[&>video]:block [&>video]:w-full [&>video]:h-full", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-[250ms]", "[&>img:not([data-visible])]:opacity-0", "[&:fullscreen]:rounded-none", className),
+		...rest,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props, state) => state.visible ? /* @__PURE__ */ jsx("div", {
+				...props,
+				className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10 text-white",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("p-1 rounded-full", surface),
+					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: icon })
+				})
+			}) : null }),
+			/* @__PURE__ */ jsx(ErrorDialog, {
+				"aria-labelledby": "media-error-title",
+				"aria-describedby": "media-error-description",
+				render: (props, { onDismiss }) => /* @__PURE__ */ jsx("div", {
+					...props,
+					className: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn("hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto", "group-data-[visible]/error:flex", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", surface),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
+							children: [/* @__PURE__ */ jsx("p", {
+								id: "media-error-title",
+								className: "font-semibold leading-tight",
+								children: "Something went wrong."
+							}), /* @__PURE__ */ jsx("p", {
+								id: "media-error-description",
+								className: "opacity-70",
+								children: "An error occurred while trying to play the video. Please try again."
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex gap-2 *:flex-1",
+							children: /* @__PURE__ */ jsx(Button, {
+								onClick: onDismiss,
+								children: "OK"
+							})
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(ControlsRoot, {
+				className: cn("peer/controls", surface, "absolute @container/media-controls bottom-3 inset-x-3", "p-[0.175rem] flex items-center gap-[0.075rem]", "text-white rounded-full z-10", "will-change-[scale,transform,filter,opacity]", "transition-[scale,transform,filter,opacity] ease-out", "delay-0 duration-100 origin-bottom", "not-data-[visible]:pointer-events-none not-data-[visible]:blur-[8px]", "not-data-[visible]:scale-90 not-data-[visible]:opacity-0", "not-data-[visible]:delay-500 not-data-[visible]:duration-300", "motion-reduce:not-data-[visible]:duration-100", "motion-reduce:not-data-[visible]:blur-none", "motion-reduce:not-data-[visible]:scale-100", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5"),
+				children: [
+					/* @__PURE__ */ jsx(PlayButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						variant: "icon",
+						...props,
+						children: /* @__PURE__ */ jsx(PlayButtonIcon, {
+							state,
+							className: icon
+						})
+					}) }),
+					/* @__PURE__ */ jsx(SeekButton, {
+						seconds: -SEEK_TIME,
+						render: (props) => /* @__PURE__ */ jsx(Button, {
+							variant: "icon",
+							...props,
+							className: "@max-md/media-controls:hidden",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(SeekIcon, { className: cn(icon, "[scale:-1_1]") }), /* @__PURE__ */ jsx("span", {
+									className: "absolute left-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums",
+									children: SEEK_TIME
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(SeekButton, {
+						seconds: SEEK_TIME,
+						render: (props) => /* @__PURE__ */ jsx(Button, {
+							variant: "icon",
+							...props,
+							className: "@max-md/media-controls:hidden",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(SeekIcon, { className: icon }), /* @__PURE__ */ jsx("span", {
+									className: "absolute right-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums",
+									children: SEEK_TIME
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs(Group, {
+						className: "@container/media-time flex items-center flex-1 gap-3 px-2",
+						children: [
+							/* @__PURE__ */ jsx(Value, {
+								type: "current",
+								className: "hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums"
+							}),
+							/* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-white/20" }),
+							/* @__PURE__ */ jsx(Value, {
+								type: "duration",
+								className: "text-shadow-2xs text-shadow-black/25 tabular-nums"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(CaptionsButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						variant: "icon",
+						...props,
+						children: /* @__PURE__ */ jsx(CaptionsButtonIcon, {
+							state,
+							className: icon
+						})
+					}) }),
+					/* @__PURE__ */ jsx(MuteButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						variant: "icon",
+						...props,
+						children: /* @__PURE__ */ jsx(MuteButtonIcon, {
+							state,
+							className: icon
+						})
+					}) }),
+					/* @__PURE__ */ jsx(PiPButton, { render: (props) => /* @__PURE__ */ jsx(Button, {
+						variant: "icon",
+						...props,
+						children: /* @__PURE__ */ jsx(PipIcon, { className: icon })
+					}) }),
+					/* @__PURE__ */ jsx(FullscreenButton, { render: (props, state) => /* @__PURE__ */ jsx(Button, {
+						variant: "icon",
+						...props,
+						children: /* @__PURE__ */ jsx(FullscreenButtonIcon, {
+							state,
+							className: icon
+						})
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-gradient-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-[0px] backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-[visible]/controls:opacity-100", "peer-data-[visible]/controls:duration-150", "peer-data-[visible]/controls:delay-0", "peer-data-[visible]/error:opacity-100", "peer-data-[visible]/error:duration-150", "peer-data-[visible]/error:delay-0", "peer-data-[visible]/error:backdrop-blur-[8px]", "motion-reduce:duration-100") })
+		]
+	});
+}
+
+//#endregion
+export { VideoSkinTailwind };
+//# sourceMappingURL=skin.tailwind.js.map

package/dist/default/presets/video/skin.tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.tailwind.js","names":["Controls.Root","Time.Group","Time.Value"],"sources":["../../../../src/presets/video/skin.tailwind.tsx"],"sourcesContent":["import type { FullscreenButtonState, MuteButtonState, PlayButtonState } from '@videojs/core';\nimport {\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, type CaptionsButtonState } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\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 { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport type { VideoSkinProps } from './skin';\n\nconst SEEK_TIME = 10;\n\n/* ------------------------------------ Reused fragments ------------------------------------- */\n\nconst surface = cn(\n  'bg-white/10',\n  'backdrop-blur-3xl backdrop-brightness-90 backdrop-saturate-150',\n  // Border and shadow\n  'ring ring-white/5 ring-inset shadow-sm shadow-black/15',\n  // Border to enhance contrast on lighter videos\n  'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10',\n  // Reduced transparency for users with preference\n  '[@media(prefers-reduced-transparency:reduce)]:bg-black/70 [@media(prefers-reduced-transparency:reduce)]:ring-black [@media(prefers-reduced-transparency:reduce)]:after:ring-white/20',\n  // High contrast mode\n  'contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20'\n);\n\nconst icon = cn(\n  '[grid-area:1/1] size-4.5 shrink-0',\n  'drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25',\n  'transition-discrete transition-[display,opacity] duration-150 ease-out'\n);\n\nconst iconHidden = 'hidden opacity-0';\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(\n        // Shared\n        'shrink-0 border-none cursor-pointer select-none',\n        'outline-2 outline-transparent -outline-offset-2',\n        'transition-[background-color,color,outline-offset] duration-150 ease-out',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale',\n        // Variant\n        variant === 'icon'\n          ? cn(\n              'grid p-2 bg-transparent rounded-full',\n              'text-white/90',\n              'text-shadow-2xs text-shadow-black/25',\n              'hover:bg-white/10 hover:text-white hover:no-underline',\n              'focus-visible:bg-white/10 focus-visible:text-white',\n              'focus-visible:outline-blue-500 focus-visible:outline-offset-2',\n              'aria-expanded:bg-white/10 aria-expanded:text-white'\n            )\n          : cn(\n              'flex items-center justify-center py-2 px-4 bg-white rounded-full',\n              'text-black font-medium',\n              'focus-visible:outline-blue-500 focus-visible:outline-offset-2'\n            ),\n        className\n      )}\n      {...props}\n    />\n  );\n});\n\nfunction PlayButtonIcon({ state, className, ...rest }: { state: PlayButtonState } & ComponentProps<'svg'>) {\n  const { ended, paused } = state;\n  return (\n    <>\n      <RestartIcon {...rest} className={cn(className, { [iconHidden]: !ended })} />\n      <PlayIcon {...rest} className={cn(className, { [iconHidden]: ended || !paused })} />\n      <PauseIcon {...rest} className={cn(className, { [iconHidden]: paused })} />\n    </>\n  );\n}\n\nfunction MuteButtonIcon({ state, className, ...rest }: { state: MuteButtonState } & ComponentProps<'svg'>) {\n  const { muted, volumeLevel } = state;\n  return (\n    <>\n      <VolumeOffIcon {...rest} className={cn(className, { [iconHidden]: !muted })} />\n      <VolumeLowIcon {...rest} className={cn(className, { [iconHidden]: muted || volumeLevel !== 'low' })} />\n      <VolumeHighIcon {...rest} className={cn(className, { [iconHidden]: muted || volumeLevel === 'low' })} />\n    </>\n  );\n}\n\nfunction CaptionsButtonIcon({ state, className, ...rest }: { state: CaptionsButtonState } & ComponentProps<'svg'>) {\n  const { active } = state;\n  return (\n    <>\n      <CaptionsOffIcon {...rest} className={cn(className, { [iconHidden]: active })} />\n      <CaptionsOnIcon {...rest} className={cn(className, { [iconHidden]: !active })} />\n    </>\n  );\n}\n\nfunction FullscreenButtonIcon({ state, className, ...rest }: { state: FullscreenButtonState } & ComponentProps<'svg'>) {\n  const { fullscreen } = state;\n  return (\n    <>\n      <FullscreenExitIcon {...rest} className={cn(className, { [iconHidden]: !fullscreen })} />\n      <FullscreenEnterIcon {...rest} className={cn(className, { [iconHidden]: fullscreen })} />\n    </>\n  );\n}\n\n/* ------------------------------------------ Skin ------------------------------------------- */\n\nexport function VideoSkinTailwind(props: VideoSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container\n      className={cn(\n        // Layout & containment\n        'relative isolate overflow-clip @container/media-root',\n        // Appearance\n        'rounded-[var(--media-border-radius,2rem)] bg-black',\n        'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',\n        // Resets\n        '**:box-border **:m-0',\n        '[&_button]:font-[inherit]',\n        'motion-safe:[interpolate-size:allow-keywords]',\n        // Inner highlight ring (::before)\n        'before:absolute before:pointer-events-none before:rounded-[inherit] before:z-10',\n        'before:inset-px before:ring-1 before:ring-inset before:ring-white/15',\n        // Outer border ring (::after)\n        'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',\n        'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10',\n        // Video element\n        '[&>video]:block [&>video]:w-full [&>video]:h-full',\n        // Poster image\n        '[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full',\n        '[&>img]:object-cover [&>img]:pointer-events-none',\n        '[&>img]:transition-opacity [&>img]:duration-[250ms]',\n        '[&>img:not([data-visible])]:opacity-0',\n        // Fullscreen\n        '[&:fullscreen]:rounded-none',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n\n      <BufferingIndicator\n        render={(props, state) =>\n          state.visible ? (\n            <div\n              {...props}\n              className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10 text-white\"\n            >\n              <div className={cn('p-1 rounded-full', surface)}>\n                <SpinnerIcon className={icon} />\n              </div>\n            </div>\n          ) : null\n        }\n      />\n\n      <ErrorDialog\n        aria-labelledby=\"media-error-title\"\n        aria-describedby=\"media-error-description\"\n        render={(props, { onDismiss }) => (\n          <div\n            {...props}\n            className=\"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-[visible]:flex\"\n          >\n            <div\n              className={cn(\n                'hidden flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm pointer-events-auto',\n                'group-data-[visible]/error:flex',\n                'transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete',\n                'starting:opacity-0 starting:scale-50',\n                'ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',\n                surface\n              )}\n            >\n              <div className=\"flex flex-col gap-2 px-2 pt-2 pb-1.5\">\n                <p id=\"media-error-title\" className=\"font-semibold leading-tight\">\n                  Something went wrong.\n                </p>\n                <p id=\"media-error-description\" className=\"opacity-70\">\n                  An error occurred while trying to play the video. Please try again.\n                </p>\n              </div>\n              <div className=\"flex gap-2 *:flex-1\">\n                <Button onClick={onDismiss}>OK</Button>\n              </div>\n            </div>\n          </div>\n        )}\n      />\n\n      <Controls.Root\n        className={cn(\n          // Peer marker for overlay/captions\n          'peer/controls',\n          // Surface\n          surface,\n          // Layout\n          'absolute @container/media-controls bottom-3 inset-x-3',\n          'p-[0.175rem] flex items-center gap-[0.075rem]',\n          'text-white rounded-full z-10',\n          // Transitions\n          'will-change-[scale,transform,filter,opacity]',\n          'transition-[scale,transform,filter,opacity] ease-out',\n          'delay-0 duration-100 origin-bottom',\n          // Hidden state\n          'not-data-[visible]:pointer-events-none not-data-[visible]:blur-[8px]',\n          'not-data-[visible]:scale-90 not-data-[visible]:opacity-0',\n          'not-data-[visible]:delay-500 not-data-[visible]:duration-300',\n          // Reduced motion + hidden\n          'motion-reduce:not-data-[visible]:duration-100',\n          'motion-reduce:not-data-[visible]:blur-none',\n          'motion-reduce:not-data-[visible]:scale-100',\n          // Wider container\n          '@2xl/media-root:p-1 @2xl/media-root:gap-0.5'\n        )}\n      >\n        <PlayButton\n          render={(props, state) => (\n            <Button variant=\"icon\" {...props}>\n              <PlayButtonIcon state={state} className={icon} />\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={-SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className=\"@max-md/media-controls:hidden\">\n              <span className=\"relative\">\n                <SeekIcon className={cn(icon, '[scale:-1_1]')} />\n                <span className=\"absolute left-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <SeekButton\n          seconds={SEEK_TIME}\n          render={(props) => (\n            <Button variant=\"icon\" {...props} className=\"@max-md/media-controls:hidden\">\n              <span className=\"relative\">\n                <SeekIcon className={icon} />\n                <span className=\"absolute right-0 -bottom-0.75 text-[0.75em] font-[480] tabular-nums\">{SEEK_TIME}</span>\n              </span>\n            </Button>\n          )}\n        />\n\n        <Time.Group className=\"@container/media-time flex items-center flex-1 gap-3 px-2\">\n          <Time.Value\n            type=\"current\"\n            className=\"hidden @2xs/media-time:block text-shadow-2xs text-shadow-black/25 tabular-nums\"\n          />\n          {/* Temporary spacer */}\n          <div className=\"flex-1 h-1 rounded-full bg-white/20\" />\n          <Time.Value type=\"duration\" className=\"text-shadow-2xs text-shadow-black/25 tabular-nums\" />\n        </Time.Group>\n\n        <CaptionsButton\n          render={(props, state) => (\n            <Button variant=\"icon\" {...props}>\n              <CaptionsButtonIcon state={state} className={icon} />\n            </Button>\n          )}\n        />\n\n        <MuteButton\n          render={(props, state) => (\n            <Button variant=\"icon\" {...props}>\n              <MuteButtonIcon state={state} className={icon} />\n            </Button>\n          )}\n        />\n\n        <PiPButton\n          render={(props) => (\n            <Button variant=\"icon\" {...props}>\n              <PipIcon className={icon} />\n            </Button>\n          )}\n        />\n\n        <FullscreenButton\n          render={(props, state) => (\n            <Button variant=\"icon\" {...props}>\n              <FullscreenButtonIcon state={state} className={icon} />\n            </Button>\n          )}\n        />\n      </Controls.Root>\n\n      {/* <div\n        className={cn(\n          'absolute z-20 pointer-events-none text-balance text-base',\n          'inset-x-4 bottom-6',\n          'transition-transform duration-150 ease-out delay-600',\n          'motion-reduce:duration-50',\n          // Responsive font sizes\n          '@xs/media-root:text-2xl',\n          '@3xl/media-root:text-3xl',\n          '@7xl/media-root:text-4xl',\n          // Shift up when controls visible\n          'peer-data-[visible]/controls:-translate-y-12 peer-data-[visible]/controls:delay-25',\n        )}\n      >\n        <div className=\"max-w-[42ch] mx-auto text-center flex flex-col items-center\">\n          <span className={cn(\n            'block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2',\n            '[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]',\n            'contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70',\n            '*:inline',\n          )}>\n            An example cue\n          </span>\n        </div>\n      </div> */}\n\n      <div\n        className={cn(\n          // Layout\n          'absolute inset-0 flex flex-col items-start',\n          'pointer-events-none rounded-[inherit]',\n          // Default: hidden\n          'opacity-0',\n          'bg-gradient-to-t from-black/50 via-black/30 to-transparent',\n          'backdrop-blur-[0px] backdrop-saturate-120 backdrop-brightness-90',\n          // Transitions\n          'transition-[opacity,backdrop-filter] ease-out',\n          'duration-300 delay-500',\n          // Shown when controls visible\n          'peer-data-[visible]/controls:opacity-100',\n          'peer-data-[visible]/controls:duration-150',\n          'peer-data-[visible]/controls:delay-0',\n          // Shown when error visible (+ blur)\n          'peer-data-[visible]/error:opacity-100',\n          'peer-data-[visible]/error:duration-150',\n          'peer-data-[visible]/error:delay-0',\n          'peer-data-[visible]/error:backdrop-blur-[8px]',\n          // Reduced motion\n          'motion-reduce:duration-100'\n        )}\n      />\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/default/ui/buffering-indicator/buffering-indicator.js

@@ -0,0 +1,50 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState, useSyncExternalStore } from "react";
+import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
+
+//#region src/ui/buffering-indicator/buffering-indicator.tsx
+/**
+* Displays a buffering indicator when media is waiting for data.
+*
+* Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
+*
+* @example
+* ```tsx
+* <BufferingIndicator />
+*
+* <BufferingIndicator delay={1000} />
+*
+* <BufferingIndicator
+*   render={(props, state) => (
+*     <div {...props}>{state.visible && <Spinner />}</div>
+*   )}
+* />
+* ```
+*/
+const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps, forwardedRef) {
+	const { render, className, style, delay, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const [core] = useState(() => new BufferingIndicatorCore());
+	core.setProps({ delay });
+	if (playback) core.update(playback);
+	const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);
+	if (!playback) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: BufferingIndicatorDataAttrs,
+		ref: [forwardedRef],
+		props: [elementProps]
+	});
+});
+
+//#endregion
+export { BufferingIndicator };
+//# sourceMappingURL=buffering-indicator.js.map

package/dist/default/ui/buffering-indicator/buffering-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n    BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n *   render={(props, state) => (\n *     <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

package/dist/default/ui/buffering-indicator/index.js

@@ -0,0 +1,3 @@
+import { BufferingIndicator } from "./buffering-indicator.js";
+
+export { BufferingIndicator };