@videojs/react 10.0.0-beta.9 → 10.0.0-rc.1

package/dist/dev/internal/skins/shared/components/sliders/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../src/internal/skins/shared/components/sliders/slider.tsx"],"sourcesContent":["import { cn } from '@videojs/utils/style';\nimport type { ComponentProps } from 'react';\n\n/** Shared slider track. */\nexport type SliderTrackProps = ComponentProps<'div'>;\n\nexport function SliderTrack({ className, ...props }: SliderTrackProps) {\n  return <div className={cn('media-slider-track', className)} {...props} />;\n}\n\n/** Shared slider fill. */\nexport type SliderFillProps = ComponentProps<'div'>;\n\nexport function SliderFill({ className, ...props }: SliderFillProps) {\n  return <div className={cn('media-slider-fill', className)} {...props} />;\n}\n\n/** Shared slider buffer. */\nexport type SliderBufferProps = ComponentProps<'div'>;\n\nexport function SliderBuffer({ className, ...props }: SliderBufferProps) {\n  return <div className={cn('media-slider-buffer', className)} {...props} />;\n}\n\n/** Shared slider thumb. */\nexport type SliderThumbProps = ComponentProps<'div'>;\n\nexport function SliderThumb({ className, ...props }: SliderThumbProps) {\n  return <div className={cn('media-slider-thumb', className)} {...props} />;\n}\n"],"mappings":";;;AAMA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,sBAAsB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1E;AAKA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,qBAAqB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzE;AAKA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;CACvE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3E;AAKA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,sBAAsB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1E"}

package/dist/dev/internal/skins/shared/components/sliders/volume-slider.js

@@ -0,0 +1,27 @@
+import { SliderFill } from "../../../../../ui/slider/slider-fill.js";
+import { SliderThumb } from "../../../../../ui/slider/slider-thumb.js";
+import { SliderTrack } from "../../../../../ui/slider/slider-track.js";
+import { VolumeSliderRoot } from "../../../../../ui/volume-slider/volume-slider-root.js";
+import { SliderFill as SliderFill$1, SliderThumb as SliderThumb$1, SliderTrack as SliderTrack$1 } from "./slider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/shared/components/sliders/volume-slider.tsx
+/** @jsxImportSource react */
+function VolumeSlider({ className, ...props } = {}) {
+	return /* @__PURE__ */ jsxs(VolumeSliderRoot, {
+		className: (state) => cn("media-slider", "media-volume-slider", resolveClassName(className, state)),
+		thumbAlignment: "edge",
+		...props,
+		children: [/* @__PURE__ */ jsx(SliderTrack, {
+			render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
+			children: /* @__PURE__ */ jsx(SliderFill, { render: /* @__PURE__ */ jsx(SliderFill$1, {}) })
+		}), /* @__PURE__ */ jsx(SliderThumb, {
+			render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
+			className: "media-volume-slider-thumb"
+		})]
+	});
+}
+//#endregion
+export { VolumeSlider };
+
+//# sourceMappingURL=volume-slider.js.map

package/dist/dev/internal/skins/shared/components/sliders/volume-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider.js","names":["VolumeSliderPrimitive.Root","VolumeSliderPrimitive.Track","SliderTrack","VolumeSliderPrimitive.Fill","SliderFill","VolumeSliderPrimitive.Thumb","SliderThumb"],"sources":["../../../../../../../src/internal/skins/shared/components/sliders/volume-slider.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { VolumeSlider as VolumeSliderPrimitive } from '../../../../skin-primitives';\nimport { SliderFill, SliderThumb, SliderTrack } from './slider';\n\nexport type VolumeSliderProps = Omit<VolumeSliderPrimitive.RootProps, 'children'>;\n\nexport function VolumeSlider({ className, ...props }: VolumeSliderProps = {}) {\n  return (\n    <VolumeSliderPrimitive.Root\n      className={(state) => cn('media-slider', 'media-volume-slider', resolveClassName(className, state))}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <VolumeSliderPrimitive.Track render={<SliderTrack />}>\n        <VolumeSliderPrimitive.Fill render={<SliderFill />} />\n      </VolumeSliderPrimitive.Track>\n      <VolumeSliderPrimitive.Thumb render={<SliderThumb />} className={'media-volume-slider-thumb'} />\n    </VolumeSliderPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,aAAa,EAAE,WAAW,GAAG,UAA6B,CAAC,GAAG;CAC5E,OACE,qBAACA,kBAAD;EACE,YAAY,UAAU,GAAG,gBAAgB,uBAAuB,iBAAiB,WAAW,KAAK,CAAC;EAClG,gBAAe;EACf,GAAI;EAHN,UAAA,CAKE,oBAACC,aAAD;GAA6B,QAAQ,oBAACC,eAAD,CAAc,CAAA;GACjD,UAAA,oBAACC,YAAD,EAA4B,QAAQ,oBAACC,cAAD,CAAa,CAAA,EAAI,CAAA;EAC1B,CAAA,GAC7B,oBAACC,aAAD;GAA6B,QAAQ,oBAACC,eAAD,CAAc,CAAA;GAAG,WAAW;EAA8B,CAAA,CACrE;;AAEhC"}

package/dist/dev/internal/skins/shared/skins/shared/audio/error-dialog.js

@@ -0,0 +1,29 @@
+import { DialogBackdrop } from "../../../../../../ui/dialog/dialog-backdrop.js";
+import { DialogPopup } from "../../../../../../ui/dialog/dialog-popup.js";
+import { ErrorDialogClose } from "../../../../../../ui/error-dialog/error-dialog-close.js";
+import { ErrorDialogDescription } from "../../../../../../ui/error-dialog/error-dialog-description.js";
+import { ErrorDialogRoot } from "../../../../../../ui/error-dialog/error-dialog-root.js";
+import { ErrorDialogTitle } from "../../../../../../ui/error-dialog/error-dialog-title.js";
+import { Button } from "../../../components/buttons/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/audio/error-dialog.tsx
+/** @jsxImportSource react */
+function AudioErrorDialog() {
+	return /* @__PURE__ */ jsxs(ErrorDialogRoot, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "audio-dialog-backdrop" }), /* @__PURE__ */ jsxs(DialogPopup, {
+		className: "audio-dialog-popup",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "audio-dialog-content",
+			children: [/* @__PURE__ */ jsx(ErrorDialogTitle, { className: "audio-dialog-title" }), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: "audio-dialog-description" })]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "audio-dialog-actions",
+			children: /* @__PURE__ */ jsx(ErrorDialogClose, {
+				render: /* @__PURE__ */ jsx(Button, {}),
+				className: "audio-dialog-close"
+			})
+		})]
+	})] });
+}
+//#endregion
+export { AudioErrorDialog };
+
+//# sourceMappingURL=error-dialog.js.map

package/dist/dev/internal/skins/shared/skins/shared/audio/error-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog.js","names":["ErrorDialog.Root","ErrorDialog.Backdrop","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close"],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/audio/error-dialog.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { ErrorDialog } from '../../../../../skin-primitives';\nimport { Button } from '../../../components/buttons/button';\n\nexport function AudioErrorDialog() {\n  return (\n    <ErrorDialog.Root>\n      <ErrorDialog.Backdrop className={'audio-dialog-backdrop'} />\n      <ErrorDialog.Popup className={'audio-dialog-popup'}>\n        <div className={'audio-dialog-content'}>\n          <ErrorDialog.Title className={'audio-dialog-title'} />\n          <ErrorDialog.Description className={'audio-dialog-description'} />\n        </div>\n        <div className={'audio-dialog-actions'}>\n          <ErrorDialog.Close render={<Button />} className={'audio-dialog-close'} />\n        </div>\n      </ErrorDialog.Popup>\n    </ErrorDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AAKA,SAAgB,mBAAmB;CACjC,OACE,qBAACA,iBAAD,EAAA,UAAA,CACE,oBAACC,gBAAD,EAAsB,WAAW,wBAA0B,CAAA,GAC3D,qBAACC,aAAD;EAAmB,WAAW;EAA9B,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,oBAACC,kBAAD,EAAmB,WAAW,qBAAuB,CAAA,GACrD,oBAACC,wBAAD,EAAyB,WAAW,2BAA6B,CAAA,CAC9D;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW;GACd,UAAA,oBAACC,kBAAD;IAAmB,QAAQ,oBAAC,QAAD,CAAS,CAAA;IAAG,WAAW;GAAuB,CAAA;EACtE,CAAA,CACY;CACH,CAAA,CAAA,EAAA,CAAA;AAEtB"}

package/dist/dev/internal/skins/shared/skins/shared/audio/time-slider.js

@@ -0,0 +1,42 @@
+import { SliderBuffer } from "../../../../../../ui/slider/slider-buffer.js";
+import { SliderFill } from "../../../../../../ui/slider/slider-fill.js";
+import { SliderPreview } from "../../../../../../ui/slider/slider-preview.js";
+import { SliderThumb } from "../../../../../../ui/slider/slider-thumb.js";
+import { SliderTrack } from "../../../../../../ui/slider/slider-track.js";
+import { SliderValue } from "../../../../../../ui/slider/slider-value.js";
+import { TimeSliderRoot } from "../../../../../../ui/time-slider/time-slider-root.js";
+import { SliderBuffer as SliderBuffer$1, SliderFill as SliderFill$1, SliderThumb as SliderThumb$1, SliderTrack as SliderTrack$1 } from "../../../components/sliders/slider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, resolveClassName } from "@videojs/utils/style";
+//#region src/internal/skins/shared/skins/shared/audio/time-slider.tsx
+function AudioTimeSlider({ className, previewOverflow = "clamp", ...props } = {}) {
+	return /* @__PURE__ */ jsxs(TimeSliderRoot, {
+		className: (state) => cn("media-slider", "audio-time-slider", resolveClassName(className, state)),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(SliderTrack, {
+				render: /* @__PURE__ */ jsx(SliderTrack$1, {}),
+				children: [/* @__PURE__ */ jsx(SliderBuffer, { render: /* @__PURE__ */ jsx(SliderBuffer$1, {}) }), /* @__PURE__ */ jsx(SliderFill, { render: /* @__PURE__ */ jsx(SliderFill$1, {}) })]
+			}),
+			/* @__PURE__ */ jsx(SliderThumb, {
+				render: /* @__PURE__ */ jsx(SliderThumb$1, {}),
+				className: "audio-time-slider-thumb"
+			}),
+			/* @__PURE__ */ jsx(SliderPreview, {
+				className: "media-slider-preview",
+				overflow: previewOverflow,
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("media-slider-preview-content", "media-popup-surface", "media-tooltip", "audio-time-slider-preview-content"),
+					children: /* @__PURE__ */ jsx(SliderValue, {
+						className: "audio-time-slider-value",
+						type: "pointer"
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { AudioTimeSlider };
+
+//# sourceMappingURL=time-slider.js.map

package/dist/dev/internal/skins/shared/skins/shared/audio/time-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider.js","names":["TimeSlider.Root","TimeSlider.Track","SliderTrack","TimeSlider.Buffer","SliderBuffer","TimeSlider.Fill","SliderFill","TimeSlider.Thumb","SliderThumb","TimeSlider.Preview","TimeSlider.Value"],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/audio/time-slider.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport type { SliderPreviewOverflow } from '@videojs/core';\nimport { cn, resolveClassName } from '@videojs/utils/style';\n\nimport { TimeSlider } from '../../../../../skin-primitives';\nimport { SliderBuffer, SliderFill, SliderThumb, SliderTrack } from '../../../components/sliders/slider';\n\nexport interface AudioTimeSliderProps extends Omit<TimeSlider.RootProps, 'children'> {\n  previewOverflow?: SliderPreviewOverflow | undefined;\n}\n\nexport function AudioTimeSlider({ className, previewOverflow = 'clamp', ...props }: AudioTimeSliderProps = {}) {\n  return (\n    <TimeSlider.Root\n      className={(state) => cn('media-slider', 'audio-time-slider', resolveClassName(className, state))}\n      {...props}\n    >\n      <TimeSlider.Track render={<SliderTrack />}>\n        <TimeSlider.Buffer render={<SliderBuffer />} />\n        <TimeSlider.Fill render={<SliderFill />} />\n      </TimeSlider.Track>\n      <TimeSlider.Thumb render={<SliderThumb />} className={'audio-time-slider-thumb'} />\n      <TimeSlider.Preview className={'media-slider-preview'} overflow={previewOverflow}>\n        <div\n          className={cn(\n            'media-slider-preview-content',\n            'media-popup-surface',\n            'media-tooltip',\n            'audio-time-slider-preview-content'\n          )}\n        >\n          <TimeSlider.Value className={'audio-time-slider-value'} type=\"pointer\" />\n        </div>\n      </TimeSlider.Preview>\n    </TimeSlider.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,gBAAgB,EAAE,WAAW,kBAAkB,SAAS,GAAG,UAAgC,CAAC,GAAG;CAC7G,OACE,qBAACA,gBAAD;EACE,YAAY,UAAU,GAAG,gBAAgB,qBAAqB,iBAAiB,WAAW,KAAK,CAAC;EAChG,GAAI;EAFN,UAAA;GAIE,qBAACC,aAAD;IAAkB,QAAQ,oBAACC,eAAD,CAAc,CAAA;IAAxC,UAAA,CACE,oBAACC,cAAD,EAAmB,QAAQ,oBAACC,gBAAD,CAAe,CAAA,EAAI,CAAA,GAC9C,oBAACC,YAAD,EAAiB,QAAQ,oBAACC,cAAD,CAAa,CAAA,EAAI,CAAA,CAC1B;;GAClB,oBAACC,aAAD;IAAkB,QAAQ,oBAACC,eAAD,CAAc,CAAA;IAAG,WAAW;GAA4B,CAAA;GAClF,oBAACC,eAAD;IAAoB,WAAW;IAAwB,UAAU;IAC/D,UAAA,oBAAC,OAAD;KACE,WAAW,GACT,gCACA,uBACA,iBACA,mCACF;KAEA,UAAA,oBAACC,aAAD;MAAkB,WAAW;MAA2B,MAAK;KAAW,CAAA;IACrE,CAAA;GACa,CAAA;EACL;;AAErB"}

package/dist/dev/internal/skins/shared/skins/shared/live-playback-hotkeys.js

@@ -0,0 +1,37 @@
+import { Hotkey } from "../../../../../ui/hotkey/hotkey.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/live-playback-hotkeys.tsx
+/** @jsxImportSource react */
+function LivePlaybackHotkeys({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "Space",
+			action: "togglePaused"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "k",
+			action: "togglePaused"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "m",
+			action: "toggleMuted"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowUp",
+			action: "volumeStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowDown",
+			action: "volumeStep"
+		})
+	] });
+}
+//#endregion
+export { LivePlaybackHotkeys };
+
+//# sourceMappingURL=live-playback-hotkeys.js.map

package/dist/dev/internal/skins/shared/skins/shared/live-playback-hotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-playback-hotkeys.js","names":[],"sources":["../../../../../../../src/internal/skins/shared/skins/shared/live-playback-hotkeys.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Hotkey } from '../../../../skin-primitives';\n\nexport interface LivePlaybackHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function LivePlaybackHotkeys({ disabled = false }: LivePlaybackHotkeysProps = {}) {\n  return (\n    <>\n      <Hotkey disabled={disabled} keys=\"Space\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"k\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"m\" action=\"toggleMuted\" />\n      <Hotkey disabled={disabled} keys=\"ArrowUp\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowDown\" action=\"volumeStep\" />\n    </>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,oBAAoB,EAAE,WAAW,UAAoC,CAAC,GAAG;CACvF,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAQ,QAAO;EAAgB,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAgB,CAAA;EAC5D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAe,CAAA;EAC3D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAU,QAAO;EAAc,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAY,QAAO;EAAc,CAAA;CAClE,EAAA,CAAA;AAEN"}

package/dist/dev/internal/skins/shared/skins/shared/live-video/gestures.js

@@ -0,0 +1,31 @@
+import { Gesture } from "../../../../../../ui/gesture/gesture.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/live-video/gestures.tsx
+/** @jsxImportSource react */
+function LiveVideoGestures({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "tap",
+			action: "togglePaused",
+			pointer: "mouse",
+			region: "center"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "tap",
+			action: "toggleControls",
+			pointer: "touch"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "doubletap",
+			action: "toggleFullscreen",
+			region: "center"
+		})
+	] });
+}
+//#endregion
+export { LiveVideoGestures };
+
+//# sourceMappingURL=gestures.js.map

package/dist/dev/internal/skins/shared/skins/shared/live-video/gestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gestures.js","names":[],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/live-video/gestures.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Gesture } from '../../../../../skin-primitives';\n\nexport interface LiveVideoGesturesProps {\n  disabled?: boolean | undefined;\n}\n\nexport function LiveVideoGestures({ disabled = false }: LiveVideoGesturesProps = {}) {\n  return (\n    <>\n      <Gesture disabled={disabled} type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\" />\n      <Gesture disabled={disabled} type=\"tap\" action=\"toggleControls\" pointer=\"touch\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\" />\n    </>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,kBAAkB,EAAE,WAAW,UAAkC,CAAC,GAAG;CACnF,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAM,QAAO;GAAe,SAAQ;GAAQ,QAAO;EAAU,CAAA;EAC/F,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAM,QAAO;GAAiB,SAAQ;EAAS,CAAA;EACjF,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAY,QAAO;GAAmB,QAAO;EAAU,CAAA;CACzF,EAAA,CAAA;AAEN"}

package/dist/dev/internal/skins/shared/skins/shared/live-video/hotkeys.js

@@ -0,0 +1,29 @@
+import { Hotkey } from "../../../../../../ui/hotkey/hotkey.js";
+import { LivePlaybackHotkeys } from "../live-playback-hotkeys.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/live-video/hotkeys.tsx
+/** @jsxImportSource react */
+function LiveVideoHotkeys({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(LivePlaybackHotkeys, { disabled }),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "f",
+			action: "toggleFullscreen"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "c",
+			action: "toggleSubtitles"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "i",
+			action: "togglePictureInPicture"
+		})
+	] });
+}
+//#endregion
+export { LiveVideoHotkeys };
+
+//# sourceMappingURL=hotkeys.js.map

package/dist/dev/internal/skins/shared/skins/shared/live-video/hotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys.js","names":[],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/live-video/hotkeys.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Hotkey } from '../../../../../skin-primitives';\nimport { LivePlaybackHotkeys } from '../live-playback-hotkeys';\n\nexport interface LiveVideoHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function LiveVideoHotkeys({ disabled = false }: LiveVideoHotkeysProps = {}) {\n  return (\n    <>\n      <LivePlaybackHotkeys disabled={disabled} />\n      <Hotkey disabled={disabled} keys=\"f\" action=\"toggleFullscreen\" />\n      <Hotkey disabled={disabled} keys=\"c\" action=\"toggleSubtitles\" />\n      <Hotkey disabled={disabled} keys=\"i\" action=\"togglePictureInPicture\" />\n    </>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,iBAAiB,EAAE,WAAW,UAAiC,CAAC,GAAG;CACjF,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,qBAAD,EAA+B,SAAW,CAAA;EAC1C,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAoB,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAmB,CAAA;EAC/D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAA0B,CAAA;CACtE,EAAA,CAAA;AAEN"}

package/dist/dev/internal/skins/shared/skins/shared/playback-hotkeys.js

@@ -0,0 +1,84 @@
+import { Hotkey } from "../../../../../ui/hotkey/hotkey.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/playback-hotkeys.tsx
+/** @jsxImportSource react */
+function PlaybackHotkeys({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "Space",
+			action: "togglePaused"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "k",
+			action: "togglePaused"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "m",
+			action: "toggleMuted"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowRight",
+			action: "seekStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowLeft",
+			action: "seekStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "l",
+			action: "seekStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "j",
+			action: "seekStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowUp",
+			action: "volumeStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "ArrowDown",
+			action: "volumeStep"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "0-9",
+			action: "seekToPercent"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "Home",
+			action: "seekToPercent",
+			value: 0
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "End",
+			action: "seekToPercent",
+			value: 100
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: ">",
+			action: "speedUp"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "<",
+			action: "speedDown"
+		})
+	] });
+}
+//#endregion
+export { PlaybackHotkeys };
+
+//# sourceMappingURL=playback-hotkeys.js.map

package/dist/dev/internal/skins/shared/skins/shared/playback-hotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-hotkeys.js","names":[],"sources":["../../../../../../../src/internal/skins/shared/skins/shared/playback-hotkeys.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Hotkey } from '../../../../skin-primitives';\n\nexport interface PlaybackHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function PlaybackHotkeys({ disabled = false }: PlaybackHotkeysProps = {}) {\n  return (\n    <>\n      <Hotkey disabled={disabled} keys=\"Space\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"k\" action=\"togglePaused\" />\n      <Hotkey disabled={disabled} keys=\"m\" action=\"toggleMuted\" />\n      <Hotkey disabled={disabled} keys=\"ArrowRight\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowLeft\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"l\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"j\" action=\"seekStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowUp\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"ArrowDown\" action=\"volumeStep\" />\n      <Hotkey disabled={disabled} keys=\"0-9\" action=\"seekToPercent\" />\n      <Hotkey disabled={disabled} keys=\"Home\" action=\"seekToPercent\" value={0} />\n      <Hotkey disabled={disabled} keys=\"End\" action=\"seekToPercent\" value={100} />\n      <Hotkey disabled={disabled} keys=\">\" action=\"speedUp\" />\n      <Hotkey disabled={disabled} keys=\"<\" action=\"speedDown\" />\n    </>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,gBAAgB,EAAE,WAAW,UAAgC,CAAC,GAAG;CAC/E,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAQ,QAAO;EAAgB,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAgB,CAAA;EAC5D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAe,CAAA;EAC3D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAa,QAAO;EAAY,CAAA;EACjE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAY,QAAO;EAAY,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAY,CAAA;EACxD,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAY,CAAA;EACxD,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAU,QAAO;EAAc,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAY,QAAO;EAAc,CAAA;EAClE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAM,QAAO;EAAiB,CAAA;EAC/D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAO,QAAO;GAAgB,OAAO;EAAI,CAAA;EAC1E,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAM,QAAO;GAAgB,OAAO;EAAM,CAAA;EAC3E,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAW,CAAA;EACvD,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAa,CAAA;CACzD,EAAA,CAAA;AAEN"}

package/dist/dev/internal/skins/shared/skins/shared/video/gestures.js

@@ -0,0 +1,43 @@
+import { Gesture } from "../../../../../../ui/gesture/gesture.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/video/gestures.tsx
+/** @jsxImportSource react */
+function VideoGestures({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "tap",
+			action: "togglePaused",
+			pointer: "mouse",
+			region: "center"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "tap",
+			action: "toggleControls",
+			pointer: "touch"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "doubletap",
+			action: "seekStep",
+			region: "left"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "doubletap",
+			action: "toggleFullscreen",
+			region: "center"
+		}),
+		/* @__PURE__ */ jsx(Gesture, {
+			disabled,
+			type: "doubletap",
+			action: "seekStep",
+			region: "right"
+		})
+	] });
+}
+//#endregion
+export { VideoGestures };
+
+//# sourceMappingURL=gestures.js.map

package/dist/dev/internal/skins/shared/skins/shared/video/gestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gestures.js","names":[],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/video/gestures.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Gesture } from '../../../../../skin-primitives';\n\nexport interface VideoGesturesProps {\n  disabled?: boolean | undefined;\n}\n\nexport function VideoGestures({ disabled = false }: VideoGesturesProps = {}) {\n  return (\n    <>\n      <Gesture disabled={disabled} type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\" />\n      <Gesture disabled={disabled} type=\"tap\" action=\"toggleControls\" pointer=\"touch\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"seekStep\" region=\"left\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\" />\n      <Gesture disabled={disabled} type=\"doubletap\" action=\"seekStep\" region=\"right\" />\n    </>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,cAAc,EAAE,WAAW,UAA8B,CAAC,GAAG;CAC3E,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAM,QAAO;GAAe,SAAQ;GAAQ,QAAO;EAAU,CAAA;EAC/F,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAM,QAAO;GAAiB,SAAQ;EAAS,CAAA;EACjF,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAY,QAAO;GAAW,QAAO;EAAQ,CAAA;EAC/E,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAY,QAAO;GAAmB,QAAO;EAAU,CAAA;EACzF,oBAAC,SAAD;GAAmB;GAAU,MAAK;GAAY,QAAO;GAAW,QAAO;EAAS,CAAA;CAChF,EAAA,CAAA;AAEN"}

package/dist/dev/internal/skins/shared/skins/shared/video/hotkeys.js

@@ -0,0 +1,29 @@
+import { Hotkey } from "../../../../../../ui/hotkey/hotkey.js";
+import { PlaybackHotkeys } from "../playback-hotkeys.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/skins/shared/skins/shared/video/hotkeys.tsx
+/** @jsxImportSource react */
+function VideoHotkeys({ disabled = false } = {}) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(PlaybackHotkeys, { disabled }),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "f",
+			action: "toggleFullscreen"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "c",
+			action: "toggleSubtitles"
+		}),
+		/* @__PURE__ */ jsx(Hotkey, {
+			disabled,
+			keys: "i",
+			action: "togglePictureInPicture"
+		})
+	] });
+}
+//#endregion
+export { VideoHotkeys };
+
+//# sourceMappingURL=hotkeys.js.map

package/dist/dev/internal/skins/shared/skins/shared/video/hotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeys.js","names":[],"sources":["../../../../../../../../src/internal/skins/shared/skins/shared/video/hotkeys.tsx"],"sourcesContent":["/** @jsxImportSource react */\n\nimport { Hotkey } from '../../../../../skin-primitives';\nimport { PlaybackHotkeys } from '../playback-hotkeys';\n\nexport interface VideoHotkeysProps {\n  disabled?: boolean | undefined;\n}\n\nexport function VideoHotkeys({ disabled = false }: VideoHotkeysProps = {}) {\n  return (\n    <>\n      <PlaybackHotkeys disabled={disabled} />\n      <Hotkey disabled={disabled} keys=\"f\" action=\"toggleFullscreen\" />\n      <Hotkey disabled={disabled} keys=\"c\" action=\"toggleSubtitles\" />\n      <Hotkey disabled={disabled} keys=\"i\" action=\"togglePictureInPicture\" />\n    </>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,aAAa,EAAE,WAAW,UAA6B,CAAC,GAAG;CACzE,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,iBAAD,EAA2B,SAAW,CAAA;EACtC,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAoB,CAAA;EAChE,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAAmB,CAAA;EAC/D,oBAAC,QAAD;GAAkB;GAAU,MAAK;GAAI,QAAO;EAA0B,CAAA;CACtE,EAAA,CAAA;AAEN"}

package/dist/dev/media/audio.d.ts

@@ -1,9 +1,7 @@
-import * as react from "react";
 import { AudioHTMLAttributes } from "react";
-
 //#region src/media/audio.d.ts
 interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}
-declare const Audio: react.ForwardRefExoticComponent<AudioProps & react.RefAttributes<HTMLAudioElement>>;
+declare const Audio: import("react").ForwardRefExoticComponent<AudioProps & import("react").RefAttributes<HTMLAudioElement>>;
 declare namespace Audio {
   type Props = AudioProps;
 }

package/dist/dev/media/audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAWD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;UAMiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}

package/dist/dev/media/audio.js

@@ -1,19 +1,18 @@
-'use client';
-
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useMediaAttach } from "../player/context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/media/audio.tsx
 const Audio = forwardRef(function Audio({ children, ...props }, ref) {
+	const setMedia = useMediaAttach();
+	const composedRef = useComposedRefs(ref, setMedia);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(ref, useMediaAttach()),
+		ref: composedRef,
 		...props,
 		children
 	});
 });
-
 //#endregion
 export { Audio };
+
 //# sourceMappingURL=audio.js.map

package/dist/dev/media/audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;AAIxG,QACE,oBAAC;EAAM,KAHW,gBAAgB,KADnB,gBAAgB,CACiB;EAGvB,GAAI;EAC1B;GACK;EAEV"}
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["import type { AudioHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,gBAAgB,KAAK,QAAQ;CAEjD,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/dev/media/background-video/adapter.d.ts

@@ -0,0 +1,10 @@
+import { VideoHTMLAttributes } from "react";
+//#region src/media/background-video/adapter.d.ts
+interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
+declare const BackgroundVideo: import("react").ForwardRefExoticComponent<BackgroundVideoProps & import("react").RefAttributes<HTMLVideoElement>>;
+declare namespace BackgroundVideo {
+  type Props = BackgroundVideoProps;
+}
+//#endregion
+export { BackgroundVideo, BackgroundVideoProps };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/background-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/background-video/adapter.tsx"],"mappings":";;UAQiB,6BAA6B,oBAAoB;cAErD,iCAAe,0BAAA,uCAAA,cAAA;kBAsBX;OACH,QAAQ"}

package/dist/dev/media/background-video/adapter.js

@@ -0,0 +1,28 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaAttach } from "../../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/media/background-video/adapter.tsx
+const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
+	const setMedia = useMediaAttach();
+	const mediaRef = useCallback((el) => {
+		setMedia?.(el);
+	}, [setMedia]);
+	const composedRef = useComposedRefs(ref, mediaRef);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		muted: true,
+		autoPlay: true,
+		loop: true,
+		playsInline: true,
+		disableRemotePlayback: true,
+		disablePictureInPicture: true,
+		...props,
+		children
+	});
+});
+//#endregion
+export { BackgroundVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/dev/media/background-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/background-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaAttach } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaAttach();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,eAAe;CAEhC,MAAM,WAAW,aACd,OAAgC;EAC/B,WAAW,EAAE;CACf,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,cAAc,gBAAgB,KAAK,QAAQ;CAEjD,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,OAAA;EAAM,UAAA;EAAS,MAAA;EAAK,aAAA;EAAY,uBAAA;EAAsB,yBAAA;EAAwB,GAAI;EACxG;CACI,CAAA;AAEX,CAAC"}

package/dist/dev/media/background-video/index.d.ts

@@ -1,12 +1,2 @@
-import * as react from "react";
-import { VideoHTMLAttributes } from "react";
-
-//#region src/media/background-video/index.d.ts
-interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
-declare const BackgroundVideo: react.ForwardRefExoticComponent<BackgroundVideoProps & react.RefAttributes<HTMLVideoElement>>;
-declare namespace BackgroundVideo {
-  type Props = BackgroundVideoProps;
-}
-//#endregion
-export { BackgroundVideo, BackgroundVideoProps };
-//# sourceMappingURL=index.d.ts.map
+import { BackgroundVideo, BackgroundVideoProps } from "./adapter.js";
+export { BackgroundVideo, BackgroundVideoProps };

package/dist/dev/media/background-video/index.js

@@ -1,28 +1,2 @@
-'use client';
-
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaAttach } from "../../player/context.js";
-import { forwardRef, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/media/background-video/index.tsx
-const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
-	const setMedia = useMediaAttach();
-	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			setMedia?.(el);
-		}, [setMedia])),
-		muted: true,
-		autoPlay: true,
-		loop: true,
-		playsInline: true,
-		disableRemotePlayback: true,
-		disablePictureInPicture: true,
-		...props,
-		children
-	});
-});
-
-//#endregion
+import { BackgroundVideo } from "./adapter.js";
 export { BackgroundVideo };
-//# sourceMappingURL=index.js.map

package/dist/dev/media/cloudflare-video/adapter.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { CloudflareAdapterProps } from "@videojs/cloudflare-video";
+//#region src/media/cloudflare-video/adapter.d.ts
+interface CloudflareVideoProps extends Partial<CloudflareAdapterProps> {
+  children?: ReactNode;
+}
+declare const CloudflareVideo: import("react").ForwardRefExoticComponent<CloudflareVideoProps & import("react").RefAttributes<HTMLIFrameElement>>;
+declare namespace CloudflareVideo {
+  type Props = CloudflareVideoProps;
+}
+//#endregion
+export { CloudflareVideo, CloudflareVideoProps };
+//# sourceMappingURL=adapter.d.ts.map

package/dist/dev/media/cloudflare-video/adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/cloudflare-video/adapter.tsx"],"mappings":";;;UAUiB,6BAA6B,QAAQ;EACpD,WAAW;;cAGA,iCAAe,0BAAA,uCAAA,cAAA;kBA8CX;OACH,QAAQ"}

package/dist/dev/media/cloudflare-video/adapter.js

@@ -0,0 +1,39 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CloudflareAdapter, buildCloudflareIframeSrc } from "@videojs/cloudflare-video";
+//#region src/media/cloudflare-video/adapter.tsx
+const CloudflareVideo = forwardRef(function CloudflareVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(CloudflareAdapter);
+	const props = { ...rawProps };
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const [initialSrc] = useState(() => buildCloudflareIframeSrc(props.src || props.source?.src || "", {
+		...CloudflareAdapter.defaultProps,
+		...props,
+		defaultMuted: !!(props.defaultMuted || props.muted)
+	}));
+	const iframeProps = useSyncProps(media, props, CloudflareAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "Cloudflare Stream video player",
+		src: initialSrc || void 0,
+		"data-cross-origin-frame": true,
+		allow: "accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture",
+		allowFullScreen: true,
+		frameBorder: 0,
+		width: "100%",
+		height: "100%",
+		referrerPolicy: props.source?.engine?.cloudflare?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { CloudflareVideo };
+
+//# sourceMappingURL=adapter.js.map