@videojs/react 10.0.0-beta.23 → 10.0.0-beta.25

package/dist/dev/index.js

@@ -1,18 +1,22 @@
 "use client";
 import { composeRefs, useComposedRefs } from "./utils/use-composed-refs.js";
-import { Container, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext } from "./player/context.js";
+import { Container, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, usePlayer, usePlayerContext } from "./player/context.js";
 import { useLatestRef } from "./utils/use-latest-ref.js";
 import { useDestroy } from "./utils/use-destroy.js";
 import { createPlayer } from "./player/create-player.js";
-import { useAlertDialogContext } from "./ui/alert-dialog/context.js";
 import { mergeProps } from "./utils/merge-props.js";
 import { renderElement } from "./utils/use-render.js";
-import { index_parts_exports } from "./ui/alert-dialog/index.parts.js";
-import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator.js";
 import { useButton } from "./ui/hooks/use-button.js";
-import { useAriaKeyShortcuts } from "./ui/hotkey/use-aria-key-shortcuts.js";
+import { useHotkeyShortcut } from "./ui/hotkey/use-hotkey-shortcut.js";
+import { useMenuContext, useOptionalMenuContext } from "./ui/menu/context.js";
 import { useTooltipContext } from "./ui/tooltip/context.js";
+import { AirPlayButton } from "./ui/airplay-button/airplay-button.js";
+import { useAlertDialogContext } from "./ui/alert-dialog/context.js";
+import { index_parts_exports } from "./ui/alert-dialog/index.parts.js";
+import { useAudioTrackOptions } from "./ui/audio-track/use-audio-track-options.js";
+import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator.js";
 import { CaptionsButton } from "./ui/captions-button/captions-button.js";
+import { useCaptionsOptions } from "./ui/captions-radio-group/use-captions-options.js";
 import { CastButton } from "./ui/cast-button/cast-button.js";
 import { index_parts_exports as index_parts_exports$1 } from "./ui/controls/index.parts.js";
 import { useErrorDialogContext } from "./ui/error-dialog/context.js";
@@ -24,23 +28,32 @@ import { useTapGesture } from "./ui/gesture/use-tap-gesture.js";
 import { useSlider } from "./ui/hooks/use-slider.js";
 import { Hotkey, MediaHotkey } from "./ui/hotkey/hotkey.js";
 import { useHotkey } from "./ui/hotkey/use-hotkey.js";
+import { LiveButton } from "./ui/live-button/live-button.js";
+import { usePlaybackRateOptions } from "./ui/playback-rate/use-playback-rate-options.js";
+import { useQualityOptions } from "./ui/quality/use-quality-options.js";
+import { index_parts_exports as index_parts_exports$3 } from "./ui/menu/index.parts.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 { PlaybackRateButton } from "./ui/playback-rate-button/playback-rate-button.js";
 import { usePopoverContext } from "./ui/popover/context.js";
-import { index_parts_exports as index_parts_exports$3 } from "./ui/popover/index.parts.js";
+import { index_parts_exports as index_parts_exports$4 } from "./ui/popover/index.parts.js";
 import { Poster } from "./ui/poster/poster.js";
 import { SeekButton } from "./ui/seek-button/seek-button.js";
+import { index_parts_exports as index_parts_exports$5 } from "./ui/seek-indicator/index.parts.js";
 import { Thumbnail } from "./ui/thumbnail/thumbnail.js";
-import { index_parts_exports as index_parts_exports$4 } from "./ui/slider/index.parts.js";
-import { index_parts_exports as index_parts_exports$5 } from "./ui/time/index.parts.js";
-import { index_parts_exports as index_parts_exports$6 } from "./ui/time-slider/index.parts.js";
-import { index_parts_exports as index_parts_exports$7 } from "./ui/tooltip/index.parts.js";
-import { index_parts_exports as index_parts_exports$8 } from "./ui/volume-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$6 } from "./ui/slider/index.parts.js";
+import { StatusAnnouncer } from "./ui/status-announcer/status-announcer.js";
+import { index_parts_exports as index_parts_exports$7 } from "./ui/status-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$8 } from "./ui/time/index.parts.js";
+import { index_parts_exports as index_parts_exports$9 } from "./ui/time-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$10 } from "./ui/tooltip/index.parts.js";
+import { index_parts_exports as index_parts_exports$11 } from "./ui/volume-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$12 } from "./ui/volume-slider/index.parts.js";
 import { useAttachMedia } from "./utils/use-attach-media.js";
 import { useMediaInstance } from "./utils/use-media-instance.js";
 import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
-export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, MediaGesture, MediaHotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$3 as Popover, Poster, SeekButton, index_parts_exports$4 as Slider, Thumbnail, index_parts_exports$5 as Time, index_parts_exports$6 as TimeSlider, index_parts_exports$7 as Tooltip, index_parts_exports$8 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useAttachMedia, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };
+export * from "@videojs/core/media/predicate";
+export { AirPlayButton, index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$3 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$4 as Popover, Poster, SeekButton, index_parts_exports$5 as SeekIndicator, index_parts_exports$6 as Slider, StatusAnnouncer, index_parts_exports$7 as StatusIndicator, Thumbnail, index_parts_exports$8 as Time, index_parts_exports$9 as TimeSlider, index_parts_exports$10 as Tooltip, index_parts_exports$11 as VolumeIndicator, index_parts_exports$12 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAttachMedia, useAudioTrackOptions, useButton, useCaptionsOptions, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useHotkeyShortcut, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateOptions, usePlayer, usePlayerContext, usePopoverContext, useQualityOptions, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };

package/dist/dev/media/dash-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"mappings":";;;;;UAWiB,cAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,cAAA,GACxD,OAAA,CAAQ,cAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAaL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"mappings":";;;;;UAaiB,cAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,cAAA,GACxD,OAAA,CAAQ,cAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAeL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}

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

@@ -6,9 +6,13 @@ import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { DashMedia, dashMediaDefaultProps } from "@videojs/core/dom/media/dash";
+import { GoogleCast } from "@videojs/core/dom/media/google-cast";
+import { addComponent } from "@videojs/core/dom/media/media-host";
 //#region src/media/dash-video/index.tsx
 const DashVideo = forwardRef(function DashVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(DashMedia);
+	const media = useMediaInstance(DashMedia, (media) => {
+		addComponent(media, new GoogleCast());
+	});
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
 		...useSyncProps(media, props, dashMediaDefaultProps),

package/dist/dev/media/dash-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DashMediaProps } from '@videojs/core/dom/media/dash';\nimport { DashMedia, dashMediaDefaultProps } from '@videojs/core/dom/media/dash';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>,\n    Partial<DashMediaProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,UAAU;AAKzC,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,sBAAsB;EAI9D;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DashMediaProps } from '@videojs/core/dom/media/dash';\nimport { DashMedia, dashMediaDefaultProps } from '@videojs/core/dom/media/dash';\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>,\n    Partial<DashMediaProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,YAAY,UAAU;AACnD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,sBAAsB;EAI9D;EACK,CAAA;EAEV"}

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

@@ -0,0 +1,15 @@
+import * as _$react from "react";
+import { ReactNode, VideoHTMLAttributes } from "react";
+import { HlsMediaProps } from "@videojs/core/dom/media/hls-js";
+
+//#region src/media/hlsjs-video/index.d.ts
+interface HlsJsVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>, Partial<HlsMediaProps> {
+  children?: ReactNode;
+}
+declare const HlsJsVideo: _$react.ForwardRefExoticComponent<HlsJsVideoProps & _$react.RefAttributes<HTMLVideoElement>>;
+declare namespace HlsJsVideo {
+  type Props = HlsJsVideoProps;
+}
+//#endregion
+export { HlsJsVideo, HlsJsVideoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/hlsjs-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hlsjs-video/index.tsx"],"mappings":";;;;;UAaiB,eAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAkBN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;AAAA"}

package/dist/dev/media/{hls-video → hlsjs-video}/index.js

@@ -5,10 +5,14 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { HlsMedia, hlsMediaDefaultProps } from "@videojs/core/dom/media/hls";
-//#region src/media/hls-video/index.tsx
-const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(HlsMedia);
+import { GoogleCast } from "@videojs/core/dom/media/google-cast";
+import { addComponent } from "@videojs/core/dom/media/media-host";
+import { HlsJsMedia, hlsMediaDefaultProps } from "@videojs/core/dom/media/hls-js";
+//#region src/media/hlsjs-video/index.tsx
+const HlsJsVideo = forwardRef(function HlsJsVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(HlsJsMedia, (media) => {
+		addComponent(media, new GoogleCast());
+	});
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
 		...useSyncProps(media, props, hlsMediaDefaultProps),
@@ -16,6 +20,6 @@ const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) {
 	});
 });
 //#endregion
-export { HlsVideo };
+export { HlsJsVideo };
 
 //# sourceMappingURL=index.js.map

package/dist/dev/media/hlsjs-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hlsjs-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsJsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsJsVideo = forwardRef<HTMLVideoElement, HlsJsVideoProps>(function HlsJsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsJsVideo {\n  export type Props = HlsJsVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/dev/media/mux-audio/index.d.ts

@@ -1,9 +1,9 @@
 import * as _$react from "react";
 import { AudioHTMLAttributes, ReactNode } from "react";
-import { MuxMediaProps } from "@videojs/core/dom/media/mux";
+import { HlsMediaProps } from "@videojs/core/dom/media/hls-js";
 
 //#region src/media/mux-audio/index.d.ts
-interface MuxAudioProps extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof MuxMediaProps>, Partial<MuxMediaProps> {
+interface MuxAudioProps extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps>, Partial<HlsMediaProps> {
   children?: ReactNode;
 }
 declare const MuxAudio: _$react.ForwardRefExoticComponent<MuxAudioProps & _$react.RefAttributes<HTMLAudioElement>>;

package/dist/dev/media/mux-audio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-audio/index.tsx"],"mappings":";;;;;UAWiB,aAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAaJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-audio/index.tsx"],"mappings":";;;;;UAciB,aAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}

package/dist/dev/media/mux-audio/index.js

@@ -5,13 +5,19 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { MuxAudioMedia, muxMediaDefaultProps } from "@videojs/core/dom/media/mux";
+import { GoogleCast } from "@videojs/core/dom/media/google-cast";
+import { addComponent } from "@videojs/core/dom/media/media-host";
+import { HlsJsMedia, hlsMediaDefaultProps } from "@videojs/core/dom/media/hls-js";
+import { MuxData } from "@videojs/core/dom/media/mux";
 //#region src/media/mux-audio/index.tsx
 const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
-	const media = useMediaInstance(MuxAudioMedia);
+	const media = useMediaInstance(HlsJsMedia, (media) => {
+		addComponent(media, new MuxData({ playerSoftwareName: "mux-audio" }));
+		addComponent(media, new GoogleCast());
+	});
 	return /* @__PURE__ */ jsx("audio", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxMediaDefaultProps),
+		...useSyncProps(media, props, hlsMediaDefaultProps),
 		children
 	});
 });

package/dist/dev/media/mux-audio/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-audio/index.tsx"],"sourcesContent":["'use client';\n\nimport type { MuxMediaProps } from '@videojs/core/dom/media/mux';\nimport { MuxAudioMedia, muxMediaDefaultProps } from '@videojs/core/dom/media/mux';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof MuxMediaProps>,\n    Partial<MuxMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxAudioMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, muxMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace MuxAudio {\n  export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,cAAc;AAK7C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-audio/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport { MuxData } from '@videojs/core/dom/media/mux';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new MuxData({ playerSoftwareName: 'mux-audio' }));\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace MuxAudio {\n  export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,QAAQ,EAAE,oBAAoB,aAAa,CAAC,CAAC;AACrE,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

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

@@ -1,9 +1,9 @@
 import * as _$react from "react";
 import { ReactNode, VideoHTMLAttributes } from "react";
-import { MuxMediaProps } from "@videojs/core/dom/media/mux";
+import { HlsMediaProps } from "@videojs/core/dom/media/hls-js";
 
 //#region src/media/mux-video/index.d.ts
-interface MuxVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof MuxMediaProps>, Partial<MuxMediaProps> {
+interface MuxVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>, Partial<HlsMediaProps> {
   children?: ReactNode;
 }
 declare const MuxVideo: _$react.ForwardRefExoticComponent<MuxVideoProps & _$react.RefAttributes<HTMLVideoElement>>;

package/dist/dev/media/mux-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-video/index.tsx"],"mappings":";;;;;UAWiB,aAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAaJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/mux-video/index.tsx"],"mappings":";;;;;UAciB,aAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}

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

@@ -5,13 +5,19 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { MuxVideoMedia, muxMediaDefaultProps } from "@videojs/core/dom/media/mux";
+import { GoogleCast } from "@videojs/core/dom/media/google-cast";
+import { addComponent } from "@videojs/core/dom/media/media-host";
+import { HlsJsMedia, hlsMediaDefaultProps } from "@videojs/core/dom/media/hls-js";
+import { MuxData } from "@videojs/core/dom/media/mux";
 //#region src/media/mux-video/index.tsx
 const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(MuxVideoMedia);
+	const media = useMediaInstance(HlsJsMedia, (media) => {
+		addComponent(media, new MuxData({ playerSoftwareName: "mux-video" }));
+		addComponent(media, new GoogleCast());
+	});
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxMediaDefaultProps),
+		...useSyncProps(media, props, hlsMediaDefaultProps),
 		children
 	});
 });

package/dist/dev/media/mux-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { MuxMediaProps } from '@videojs/core/dom/media/mux';\nimport { MuxVideoMedia, muxMediaDefaultProps } from '@videojs/core/dom/media/mux';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof MuxMediaProps>,\n    Partial<MuxMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxVideoMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, muxMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace MuxVideo {\n  export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,cAAc;AAK7C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/mux-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls-js';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport { MuxData } from '@videojs/core/dom/media/mux';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface MuxVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsJsMedia, (media) => {\n    addComponent(media, new MuxData({ playerSoftwareName: 'mux-video' }));\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace MuxVideo {\n  export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa,UAAU;AACpD,eAAa,OAAO,IAAI,QAAQ,EAAE,oBAAoB,aAAa,CAAC,CAAC;AACrE,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/dev/media/native-hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"mappings":";;;;;UAWiB,mBAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,mBAAA,GACxD,OAAA,CAAQ,mBAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"mappings":";;;;;UAaiB,mBAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,mBAAA,GACxD,OAAA,CAAQ,mBAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAkBV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;AAAA"}

package/dist/dev/media/native-hls-video/index.js

@@ -5,10 +5,14 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { GoogleCast } from "@videojs/core/dom/media/google-cast";
+import { addComponent } from "@videojs/core/dom/media/media-host";
 import { NativeHlsMedia, nativeHlsMediaDefaultProps } from "@videojs/core/dom/media/native-hls";
 //#region src/media/native-hls-video/index.tsx
 const NativeHlsVideo = forwardRef(function NativeHlsVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(NativeHlsMedia);
+	const media = useMediaInstance(NativeHlsMedia, (media) => {
+		addComponent(media, new GoogleCast());
+	});
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
 		...useSyncProps(media, props, nativeHlsMediaDefaultProps),

package/dist/dev/media/native-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { NativeHlsMediaProps } from '@videojs/core/dom/media/native-hls';\nimport { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/core/dom/media/native-hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface NativeHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof NativeHlsMediaProps>,\n    Partial<NativeHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(NativeHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, nativeHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace NativeHlsVideo {\n  export type Props = NativeHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;AAK9C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,2BAA2B;EAInE;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { GoogleCast } from '@videojs/core/dom/media/google-cast';\nimport { addComponent } from '@videojs/core/dom/media/media-host';\nimport type { NativeHlsMediaProps } from '@videojs/core/dom/media/native-hls';\nimport { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/core/dom/media/native-hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface NativeHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof NativeHlsMediaProps>,\n    Partial<NativeHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(NativeHlsMedia, (media) => {\n    addComponent(media, new GoogleCast());\n  });\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, nativeHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace NativeHlsVideo {\n  export type Props = NativeHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,iBAAiB,UAAU;AACxD,eAAa,OAAO,IAAI,YAAY,CAAC;GACrC;AAKF,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,2BAA2B;EAInE;EACK,CAAA;EAEV"}

package/dist/dev/media/simple-hls-audio-only/index.d.ts

@@ -0,0 +1,15 @@
+import * as _$react from "react";
+import { AudioHTMLAttributes, ReactNode } from "react";
+import { SimpleHlsAudioOnlyMediaProps } from "@videojs/spf/hls";
+
+//#region src/media/simple-hls-audio-only/index.d.ts
+interface SimpleHlsAudioOnlyProps extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof SimpleHlsAudioOnlyMediaProps>, Partial<SimpleHlsAudioOnlyMediaProps> {
+  children?: ReactNode;
+}
+declare const SimpleHlsAudioOnly: _$react.ForwardRefExoticComponent<SimpleHlsAudioOnlyProps & _$react.RefAttributes<HTMLAudioElement>>;
+declare namespace SimpleHlsAudioOnly {
+  type Props = SimpleHlsAudioOnlyProps;
+}
+//#endregion
+export { SimpleHlsAudioOnly, SimpleHlsAudioOnlyProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/simple-hls-audio-only/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-audio-only/index.tsx"],"mappings":";;;;;UAYiB,uBAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,4BAAA,GACxD,OAAA,CAAQ,4BAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,kBAAA,EAAkB,OAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;AAAA"}

package/dist/dev/media/simple-hls-audio-only/index.js

@@ -0,0 +1,22 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SimpleHlsAudioOnlyMedia } from "@videojs/core/dom/media/simple-hls-audio-only";
+import { simpleHlsAudioOnlyMediaDefaultProps } from "@videojs/spf/hls";
+//#region src/media/simple-hls-audio-only/index.tsx
+const SimpleHlsAudioOnly = forwardRef(function SimpleHlsAudioOnly({ children, ...props }, ref) {
+	const media = useMediaInstance(SimpleHlsAudioOnlyMedia);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(useAttachMedia(media), ref),
+		...useSyncProps(media, props, simpleHlsAudioOnlyMediaDefaultProps),
+		children
+	});
+});
+//#endregion
+export { SimpleHlsAudioOnly };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/simple-hls-audio-only/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-audio-only/index.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsAudioOnlyMedia } from '@videojs/core/dom/media/simple-hls-audio-only';\nimport type { SimpleHlsAudioOnlyMediaProps } from '@videojs/spf/hls';\nimport { simpleHlsAudioOnlyMediaDefaultProps } from '@videojs/spf/hls';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsAudioOnlyProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof SimpleHlsAudioOnlyMediaProps>,\n    Partial<SimpleHlsAudioOnlyMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsAudioOnly = forwardRef<HTMLAudioElement, SimpleHlsAudioOnlyProps>(function SimpleHlsAudioOnly(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsAudioOnlyMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, simpleHlsAudioOnlyMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace SimpleHlsAudioOnly {\n  export type Props = SimpleHlsAudioOnlyProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,wBAAwB;AAKvD,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,oCAAoC;EAI5E;EACK,CAAA;EAEV"}

package/dist/dev/media/simple-hls-video/index.d.ts

@@ -1,9 +1,9 @@
 import * as _$react from "react";
 import { ReactNode, VideoHTMLAttributes } from "react";
-import { SpfMediaProps } from "@videojs/spf/dom";
+import { SimpleHlsMediaProps } from "@videojs/spf/hls";
 
 //#region src/media/simple-hls-video/index.d.ts
-interface SimpleHlsVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SpfMediaProps>, Partial<SpfMediaProps> {
+interface SimpleHlsVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SimpleHlsMediaProps>, Partial<SimpleHlsMediaProps> {
   children?: ReactNode;
 }
 declare const SimpleHlsVideo: _$react.ForwardRefExoticComponent<SimpleHlsVideoProps & _$react.RefAttributes<HTMLVideoElement>>;

package/dist/dev/media/simple-hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"mappings":";;;;;UAYiB,mBAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"mappings":";;;;;UAYiB,mBAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,mBAAA,GACxD,OAAA,CAAQ,mBAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAgBV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;AAAA"}

package/dist/dev/media/simple-hls-video/index.js

@@ -5,14 +5,14 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { simpleHlsMediaDefaultProps } from "@videojs/spf/hls";
 import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
-import { spfMediaDefaultProps } from "@videojs/spf/dom";
 //#region src/media/simple-hls-video/index.tsx
 const SimpleHlsVideo = forwardRef(function SimpleHlsVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(SimpleHlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, spfMediaDefaultProps),
+		...useSyncProps(media, props, simpleHlsMediaDefaultProps),
 		children
 	});
 });

package/dist/dev/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { SpfMediaProps } from '@videojs/spf/dom';\nimport { spfMediaDefaultProps } from '@videojs/spf/dom';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SpfMediaProps>,\n    Partial<SpfMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, spfMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;AAK9C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { SimpleHlsMediaProps } from '@videojs/spf/hls';\nimport { simpleHlsMediaDefaultProps } from '@videojs/spf/hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SimpleHlsMediaProps>,\n    Partial<SimpleHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, simpleHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;AAK9C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,2BAA2B;EAInE;EACK,CAAA;EAEV"}

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

@@ -0,0 +1,15 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { VimeoMediaProps } from "@videojs/core/dom/media/vimeo";
+
+//#region src/media/vimeo-video/index.d.ts
+interface VimeoVideoProps extends Partial<VimeoMediaProps> {
+  children?: ReactNode;
+}
+declare const VimeoVideo: _$react.ForwardRefExoticComponent<VimeoVideoProps & _$react.RefAttributes<HTMLIFrameElement>>;
+declare namespace VimeoVideo {
+  type Props = VimeoVideoProps;
+}
+//#endregion
+export { VimeoVideo, VimeoVideoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/vimeo-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/vimeo-video/index.tsx"],"mappings":";;;;;UAWiB,eAAA,SAAwB,OAAA,CAAQ,eAAA;EAC/C,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBA8BN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;AAAA"}

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

@@ -0,0 +1,37 @@
+"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 { VimeoMedia, buildVimeoIframeSrc, vimeoMediaDefaultProps } from "@videojs/core/dom/media/vimeo";
+//#region src/media/vimeo-video/index.tsx
+const VimeoVideo = forwardRef(function VimeoVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(VimeoMedia);
+	const props = { ...rawProps };
+	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const [initialSrc] = useState(() => buildVimeoIframeSrc(props.src ?? "", {
+		...vimeoMediaDefaultProps,
+		...props
+	}));
+	const iframeProps = useSyncProps(media, props, vimeoMediaDefaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "Vimeo video player",
+		src: initialSrc,
+		"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.config?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { VimeoVideo };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/media/vimeo-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/vimeo-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { VimeoMediaProps } from '@videojs/core/dom/media/vimeo';\nimport { buildVimeoIframeSrc, VimeoMedia, vimeoMediaDefaultProps } from '@videojs/core/dom/media/vimeo';\nimport type { ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface VimeoVideoProps extends Partial<VimeoMediaProps> {\n  children?: ReactNode;\n}\n\nexport const VimeoVideo = forwardRef<HTMLIFrameElement, VimeoVideoProps>(function VimeoVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(VimeoMedia);\n  const props: Partial<VimeoMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() => buildVimeoIframeSrc(props.src ?? '', { ...vimeoMediaDefaultProps, ...props }));\n  const iframeProps = useSyncProps<VimeoMediaProps, Record<string, unknown>>(media, props, vimeoMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"Vimeo video player\"\n      src={initialSrc}\n      data-cross-origin-frame\n      allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowFullScreen\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.config?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace VimeoVideo {\n  export type Props = VimeoVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA4D,EAAE,GAAG,UAAU;CAEjF,MAAM,cAAc,gBADF,gBAAgB,MAAM,EACO,IAAI;CACnD,MAAM,CAAC,cAAc,eAAe,oBAAoB,MAAM,OAAO,IAAI;EAAE,GAAG;EAAwB,GAAG;EAAO,CAAC,CAAC;CAClH,MAAM,cAAc,aAAuD,OAAO,OAAO,uBAAuB;AAEhH,QACE,oBAAC,UAAD;EACE,OAAM;EACN,KAAK;EACL,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ;EAC9B,GAAI;EACJ,KAAK;EAEJ;EACM,CAAA;EAEX"}

package/dist/dev/player/context.d.ts

@@ -1,4 +1,4 @@
-import { MediaContainer } from "@videojs/core/dom";
+import { MediaContainer, PopupGroup } from "@videojs/core/dom";
 import { UnknownState, UnknownStore } from "@videojs/store";
 import * as _$react from "react";
 import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from "react";
@@ -11,18 +11,27 @@ interface PlayerContextValue {
   setMedia: Dispatch<SetStateAction<Media$1 | null>>;
   container: MediaContainer | null;
   setContainer: Dispatch<SetStateAction<HTMLElement | null>>;
+  popupGroup?: PopupGroup;
 }
 /** Access the full player context value. Throws if used outside a Player Provider. */
 declare function usePlayerContext(): PlayerContextValue;
 /**
  * Access the player store from within a Player Provider.
  *
+ * This standalone hook has no knowledge of your configured features, so it
+ * returns an untyped `UnknownStore` whose state properties are typed as
+ * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,
+ * or pass a premade selector to recover the type from its return value.
+ *
  * @label Without Selector
  */
 declare function usePlayer(): UnknownStore;
 /**
  * Select a value from the player store. Re-renders when the selected value changes.
  *
+ * The selector receives `UnknownState`, so an inline selector returns `unknown`.
+ * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.
+ *
  * @label With Selector
  * @param selector - Derives a value from the player store state.
  */
@@ -41,6 +50,8 @@ declare function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R |
 declare function useMedia(): Media$1 | null;
 /** Access the container element from within a Player Provider. */
 declare function useContainer(): MediaContainer | null;
+/** Access the container element when a Player Provider is available. */
+declare function useOptionalContainer(): MediaContainer | null;
 /** Access the media attach setter for connecting a media element to the player. */
 declare function useMediaAttach(): Dispatch<SetStateAction<Media$1 | null>> | undefined;
 /** Access the container attach setter for connecting a container element to the player. */
@@ -53,5 +64,5 @@ declare namespace Container {
   type Props = ContainerProps;
 }
 //#endregion
-export { Container, ContainerProps, PlayerContextValue, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
+export { Container, ContainerProps, PlayerContextValue, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, usePlayer, usePlayerContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;;;UAWiB,kBAAA;EACf,KAAA,EAAO,YAAA;EACP,KAAA,EAAO,OAAA;EACP,QAAA,EAAU,QAAA,CAAS,cAAA,CAAe,OAAA;EAClC,SAAA,EAAW,cAAA;EACX,YAAA,EAAc,QAAA,CAAS,cAAA,CAAe,WAAA;AAAA;;iBAqBxB,gBAAA,CAAA,GAAoB,kBAAA;;;;;;iBAWpB,SAAA,CAAA,GAAa,YAAA;;;;;;;iBAOb,SAAA,GAAA,CAAa,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;;;;;;;iBAapD,iBAAA,CAAA,GAAqB,YAAA;;iBAErB,iBAAA,GAAA,CAAqB,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;iBAS5D,QAAA,CAAA,GAAY,OAAA;AA/B5B;AAAA,iBAqCgB,YAAA,CAAA,GAAgB,cAAA;;iBAMhB,cAAA,CAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;;iBAM1C,kBAAA,CAAA,GAAsB,QAAA,CAAS,cAAA,CAAe,WAAA;AAAA,UAK7C,cAAA,SAAuB,cAAA,CAAe,cAAA;EACrD,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA8BL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;;;UAWiB,kBAAA;EACf,KAAA,EAAO,YAAA;EACP,KAAA,EAAO,OAAA;EACP,QAAA,EAAU,QAAA,CAAS,cAAA,CAAe,OAAA;EAClC,SAAA,EAAW,cAAA;EACX,YAAA,EAAc,QAAA,CAAS,cAAA,CAAe,WAAA;EACtC,UAAA,GAAa,UAAA;AAAA;;iBAqBC,gBAAA,CAAA,GAAoB,kBAAA;;;;;;;;;;;iBAgBpB,SAAA,CAAA,GAAa,YAAA;;;;;;;;;;iBAUb,SAAA,GAAA,CAAa,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;AA1BpE;;;;;AAgBA;AAAA,iBAuBgB,iBAAA,CAAA,GAAqB,YAAA;;iBAErB,iBAAA,GAAA,CAAqB,QAAA,GAAW,KAAA,EAAO,YAAA,KAAiB,CAAA,GAAI,CAAA;;iBAS5D,QAAA,CAAA,GAAY,OAAA;;iBAMZ,YAAA,CAAA,GAAgB,cAAA;;iBAMhB,oBAAA,CAAA,GAAwB,cAAA;;iBAYxB,cAAA,CAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;;iBAM1C,kBAAA,CAAA,GAAsB,QAAA,CAAS,cAAA,CAAe,WAAA;AAAA,UAK7C,cAAA,SAAuB,cAAA,CAAe,cAAA;EACrD,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA8BL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}

package/dist/dev/player/context.js

@@ -41,6 +41,14 @@ function useContainer() {
 	const { container } = usePlayerContext();
 	return container;
 }
+/** Access the container element when a Player Provider is available. */
+function useOptionalContainer() {
+	return useContext(PlayerContext)?.container ?? null;
+}
+/** Access the interactive popup group when a Player Provider is available. */
+function useOptionalPopupGroup() {
+	return useContext(PlayerContext)?.popupGroup;
+}
 /** Access the media attach setter for connecting a media element to the player. */
 function useMediaAttach() {
 	return useContext(PlayerContext)?.setMedia;
@@ -72,6 +80,6 @@ const Container = forwardRef(function Container({ children, tabIndex = 0, ...pro
 	});
 });
 //#endregion
-export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
+export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, useOptionalPopupGroup, usePlayer, usePlayerContext };
 
 //# sourceMappingURL=context.js.map

package/dist/dev/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport type { MediaContainer } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player Provider. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player Provider.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside Provider.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player Provider. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player Provider. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { children, tabIndex = 0, ...props },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    // If nothing inside has focus, grab it so keyboard events reach hotkey listeners.\n    if (!el.contains(document.activeElement) || document.activeElement === document.body) {\n      el.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div ref={composedRef} tabIndex={tabIndex} {...props} onPointerUp={handlePointerUp}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;AAmBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAgBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,EAAkB;AAClE,QAAO,MAAM,QAAQ,KAAA;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,kBAAkB;AACxC,QAAO;;;AAIT,SAAgB,iBAAqE;AAEnF,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,qBAA+E;AAE7F,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,UAAU,WAAW,GAAG,GAAG,SAC7B,KACA;CACA,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,iBAAe,YAAY,QAAQ;AACnC,eAAa,eAAe,KAAK;IAChC,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB,UAA6C;AACpE,QAAM,cAAc,MAAM;EAC1B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,GAAG,SAAS,SAAS,cAAc,IAAI,SAAS,kBAAkB,SAAS,KAC9E,IAAG,MAAM,EAAE,eAAe,MAAM,CAAC;;AAIrC,QACE,oBAAC,OAAD;EAAK,KAAK;EAAuB;EAAU,GAAI;EAAO,aAAa;EAChE;EACG,CAAA;EAER"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport type { MediaContainer, PopupGroup } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n  popupGroup?: PopupGroup;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player Provider. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player Provider.\n *\n * This standalone hook has no knowledge of your configured features, so it\n * returns an untyped `UnknownStore` whose state properties are typed as\n * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,\n * or pass a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`.\n * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside Provider.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player Provider. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player Provider. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the container element when a Player Provider is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n  return ctx?.container ?? null;\n}\n\n/** Access the interactive popup group when a Player Provider is available. */\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.popupGroup;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { children, tabIndex = 0, ...props },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    // If nothing inside has focus, grab it so keyboard events reach hotkey listeners.\n    if (!el.contains(document.activeElement) || document.activeElement === document.body) {\n      el.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div ref={composedRef} tabIndex={tabIndex} {...props} onPointerUp={handlePointerUp}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;AAoBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAwBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,EAAkB;AAClE,QAAO,MAAM,QAAQ,KAAA;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,kBAAkB;AACxC,QAAO;;;AAIT,SAAgB,uBAA8C;AAE5D,QADY,WAAW,cAAc,EACzB,aAAa;;;AAI3B,SAAgB,wBAAgD;AAE9D,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,iBAAqE;AAEnF,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,qBAA+E;AAE7F,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,UAAU,WAAW,GAAG,GAAG,SAC7B,KACA;CACA,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,iBAAe,YAAY,QAAQ;AACnC,eAAa,eAAe,KAAK;IAChC,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB,UAA6C;AACpE,QAAM,cAAc,MAAM;EAC1B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,GAAG,SAAS,SAAS,cAAc,IAAI,SAAS,kBAAkB,SAAS,KAC9E,IAAG,MAAM,EAAE,eAAe,MAAM,CAAC;;AAIrC,QACE,oBAAC,OAAD;EAAK,KAAK;EAAuB;EAAU,GAAI;EAAO,aAAa;EAChE;EACG,CAAA;EAER"}