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

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

@@ -0,0 +1,2 @@
+import { TwitchVideo } from "./adapter.js";
+export { TwitchVideo };

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

@@ -1,9 +1,14 @@
-import * as react from "react";
 import { VideoHTMLAttributes } from "react";
-
 //#region src/media/video.d.ts
+/** Native `<video>` attributes and children forwarded to the rendered media element. */
 interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
-declare const Video: react.ForwardRefExoticComponent<VideoProps & react.RefAttributes<HTMLVideoElement>>;
+/**
+ * Renders a native `<video>` element and forwards its element ref.
+ *
+ * Inside a Player, the element is registered as the player's current media on mount and detached on unmount. It can
+ * also render independently when no Player context is present.
+ */
+declare const Video: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HTMLVideoElement>>;
 declare namespace Video {
   type Props = VideoProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","names":[],"sources":["../../../src/media/video.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":"video.d.ts","names":[],"sources":["../../../src/media/video.tsx"],"mappings":";;;UAOiB,mBAAmB,oBAAoB;;;;;;;cAQ3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}

package/dist/dev/media/video.js

@@ -1,19 +1,24 @@
-'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/video.tsx
+/**
+* Renders a native `<video>` element and forwards its element ref.
+*
+* Inside a Player, the element is registered as the player's current media on mount and detached on unmount. It can
+* also render independently when no Player context is present.
+*/
 const Video = forwardRef(function Video({ children, ...props }, ref) {
+	const setMedia = useMediaAttach();
+	const composedRef = useComposedRefs(ref, setMedia);
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(ref, useMediaAttach()),
+		ref: composedRef,
 		...props,
 		children
 	});
 });
-
 //#endregion
 export { Video };
+
 //# sourceMappingURL=video.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\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":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["import type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\n/** Native `<video>` attributes and children forwarded to the rendered media element. */\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\n/**\n * Renders a native `<video>` element and forwards its element ref.\n *\n * Inside a Player, the element is registered as the player's current media on mount and detached on unmount. It can\n * also render independently when no Player context is present.\n */\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAeA,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/vimeo-video/adapter.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/vimeo-video/adapter.tsx"],"mappings":";;;UAUiB,wBAAwB,QAAQ;EAC/C,WAAW;;cAGA,4BAAU,0BAAA,kCAAA,cAAA;kBAmCN;OACH,QAAQ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/vimeo-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildVimeoIframeSrc, VimeoAdapter, type VimeoAdapterProps } from '@videojs/vimeo-video';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\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<VimeoAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const VimeoVideo = forwardRef<HTMLIFrameElement, VimeoVideoProps>(function VimeoVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(VimeoAdapter);\n  const props: Partial<VimeoAdapterProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n    buildVimeoIframeSrc(props.src || props.source?.src || '', { ...VimeoAdapter.defaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<VimeoAdapterProps, Record<string, unknown>>(media, props, VimeoAdapter.defaultProps);\n\n  return (\n    <iframe\n      title=\"Vimeo video player\"\n      // Empty means there is no embed to point at yet; React warns about `src=\"\"`,\n      // and the media builds the URL itself once a source resolves.\n      src={initialSrc || undefined}\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.source?.engine?.vimeo?.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":";;;;;;;;;AAcA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,QAA8D,EAAE,GAAG,SAAS;CAClF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,oBAAoB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG,aAAa;EAAc,GAAG;CAAM,CAAC,CACtG;CACA,MAAM,cAAc,aAAyD,OAAO,OAAO,aAAa,YAAY;CAEpH,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,OAAO;EAC7C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

@@ -0,0 +1,2 @@
+import { VimeoVideo, VimeoVideoProps } from "./adapter.js";
+export { VimeoVideo, VimeoVideoProps };

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

@@ -0,0 +1,2 @@
+import { VimeoVideo } from "./adapter.js";
+export { VimeoVideo };

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

@@ -0,0 +1,25 @@
+import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "react";
+import { WistiaAdapterProps, WistiaPlayer, WistiaSource } from "@videojs/wistia-video";
+//#region src/media/wistia-video/adapter.d.ts
+interface WistiaVideoProps extends Partial<Omit<WistiaAdapterProps, 'source'>>, HTMLAttributes<WistiaPlayer> {
+  /** Wistia's own options, `mediaId` among them: everything the player understands that a media does not. */
+  source?: WistiaSource | null;
+}
+/**
+ * Wistia is the one media here that ships a web component of its own, so this renders that component rather than a
+ * player of its own making, and `@videojs/wistia-video` registers it statically — the element the ref hands back is
+ * already a Wistia player. Wistia's own React wrapper defines it from an effect, a tick too late: the store reads a
+ * media once, as it attaches, and a bare `HTMLElement` is a media that cannot seek, buffer, or name a source.
+ *
+ * The translation is one layer thin. `source` carries Wistia's own options — `mediaId`, `playerColor`, `qualityMin` —
+ * straight through, so anything the player understands stays reachable without this component knowing about it; the
+ * rest is the handful a media names differently. The element itself is what the store attaches to, normalized in place,
+ * so the ref hands back one object that is both.
+ */
+declare const WistiaVideo: ForwardRefExoticComponent<WistiaVideoProps & RefAttributes<WistiaPlayer>>;
+declare namespace WistiaVideo {
+  type Props = WistiaVideoProps;
+}
+//#endregion
+export { WistiaVideo, WistiaVideoProps };
+//# sourceMappingURL=adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/wistia-video/adapter.tsx"],"mappings":";;;UA+BiB,yBAAyB,QAAQ,KAAK,gCAAgC,eAAe;;EAEpG,SAAS;;;;;;;;;;;;;cAcE,aAAa,0BAA0B,mBAAmB,cAAc;kBAiEpE;OACH,QAAQ"}

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

@@ -0,0 +1,56 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaAttach } from "../../player/context.js";
+import { createElement, forwardRef, useCallback, useState } from "react";
+import { WISTIA_PLAYER_TAG, normalizeWistiaPlayer, parseWistiaMediaId, parseWistiaStartTime, wistiaAttributes, wistiaMediaOptions, wistiaPlayerStyle } from "@videojs/wistia-video";
+//#region src/media/wistia-video/adapter.tsx
+/**
+* Wistia is the one media here that ships a web component of its own, so this renders that component rather than a
+* player of its own making, and `@videojs/wistia-video` registers it statically — the element the ref hands back is
+* already a Wistia player. Wistia's own React wrapper defines it from an effect, a tick too late: the store reads a
+* media once, as it attaches, and a bare `HTMLElement` is a media that cannot seek, buffer, or name a source.
+*
+* The translation is one layer thin. `source` carries Wistia's own options — `mediaId`, `playerColor`, `qualityMin` —
+* straight through, so anything the player understands stays reachable without this component knowing about it; the
+* rest is the handful a media names differently. The element itself is what the store attaches to, normalized in place,
+* so the ref hands back one object that is both.
+*/
+const WistiaVideo = forwardRef(function WistiaVideo({ autoplay, children, controls = false, defaultMuted, loop, muted, playsInline: _playsInline, poster, preload, source, src, style, ...rest }, ref) {
+	const setMedia = useMediaAttach();
+	const attachRef = useCallback((element) => {
+		if (element) normalizeWistiaPlayer(element);
+		setMedia?.(element);
+	}, [setMedia]);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const { mediaId, ...options } = source ?? {};
+	const resolved = mediaId ?? (src ? parseWistiaMediaId(src) : null);
+	const startTime = src ? parseWistiaStartTime(src) : null;
+	const [initialMuted] = useState(() => defaultMuted ?? muted);
+	return createElement(WISTIA_PLAYER_TAG, {
+		key: resolved,
+		...wistiaAttributes({
+			mediaId: resolved ?? "",
+			...wistiaMediaOptions({
+				autoplay,
+				controls,
+				loop,
+				poster,
+				preload
+			}),
+			muted: initialMuted,
+			currentTime: startTime,
+			...options
+		}),
+		...rest,
+		style: {
+			...wistiaPlayerStyle(controls),
+			...style
+		},
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { WistiaVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/wistia-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport {\n  normalizeWistiaPlayer,\n  parseWistiaMediaId,\n  parseWistiaStartTime,\n  WISTIA_PLAYER_TAG,\n  type WistiaAdapterProps,\n  wistiaAttributes,\n  wistiaMediaOptions,\n  type WistiaPlayer,\n  wistiaPlayerStyle,\n  type WistiaSource,\n} from '@videojs/wistia-video';\n// In a browser this entry is where `@wistia/wistia-player` is imported, so the tag below cannot outrun its\n// definition. Off one it resolves to the server bundle, which reaches for none of it and leaves the tag to\n// render as the plain markup a client then hydrates.\nimport {\n  createElement,\n  forwardRef,\n  type ForwardRefExoticComponent,\n  type HTMLAttributes,\n  type RefAttributes,\n  type RefCallback,\n  useCallback,\n  useState,\n} from 'react';\n\nimport { useMediaAttach } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface WistiaVideoProps extends Partial<Omit<WistiaAdapterProps, 'source'>>, HTMLAttributes<WistiaPlayer> {\n  /** Wistia's own options, `mediaId` among them: everything the player understands that a media does not. */\n  source?: WistiaSource | null;\n}\n\n/**\n * Wistia is the one media here that ships a web component of its own, so this renders that component rather than a\n * player of its own making, and `@videojs/wistia-video` registers it statically — the element the ref hands back is\n * already a Wistia player. Wistia's own React wrapper defines it from an effect, a tick too late: the store reads a\n * media once, as it attaches, and a bare `HTMLElement` is a media that cannot seek, buffer, or name a source.\n *\n * The translation is one layer thin. `source` carries Wistia's own options — `mediaId`, `playerColor`, `qualityMin` —\n * straight through, so anything the player understands stays reachable without this component knowing about it; the\n * rest is the handful a media names differently. The element itself is what the store attaches to, normalized in place,\n * so the ref hands back one object that is both.\n */\nexport const WistiaVideo: ForwardRefExoticComponent<WistiaVideoProps & RefAttributes<WistiaPlayer>> = forwardRef<\n  WistiaPlayer,\n  WistiaVideoProps\n>(function WistiaVideo(\n  {\n    autoplay,\n    children,\n    controls = false,\n    defaultMuted,\n    loop,\n    muted,\n    // Wistia has no inline-playback knob and plays inline, so this is accepted and goes no further.\n    playsInline: _playsInline,\n    poster,\n    preload,\n    source,\n    src,\n    style,\n    ...rest\n  },\n  ref\n) {\n  const setMedia = useMediaAttach();\n\n  const attachRef = useCallback<RefCallback<WistiaPlayer>>(\n    (element) => {\n      // No cast: this is where Wistia's real class is held to the contract the normalizer describes.\n      if (element) normalizeWistiaPlayer(element);\n\n      setMedia?.(element as never);\n    },\n    [setMedia]\n  );\n  const composedRef = useComposedRefs(attachRef, ref);\n\n  // A Wistia URL is accepted where a media id is expected, the way every other media here accepts a `src`.\n  const { mediaId, ...options } = source ?? {};\n  const resolved = mediaId ?? (src ? parseWistiaMediaId(src) : null);\n  // A `wtime` is a start position rather than a live playhead, and it belongs to the source it was written\n  // on — read again for each one, since this component outlives them. Not frozen: an unchanged `src` renders\n  // an unchanged attribute, which React leaves alone, so a playing media is never sent back to its start.\n  const startTime = src ? parseWistiaStartTime(src) : null;\n  // The muted state the player *starts* in, which is this component's to decide rather than the source's.\n  const [initialMuted] = useState(() => defaultMuted ?? muted);\n\n  return createElement(WISTIA_PLAYER_TAG, {\n    // A new media is a new element. Writing an attribute goes around the normalizer's `source` setter, which\n    // is what announces a source change, so the store would hold the last media's duration and title;\n    // remounting says it as a detach and an attach. A source that only recolors keeps this id and the player.\n    key: resolved,\n    ...wistiaAttributes({\n      mediaId: resolved ?? '',\n      ...wistiaMediaOptions({ autoplay, controls, loop, poster, preload }),\n      muted: initialMuted,\n      currentTime: startTime,\n      // Wistia's own options last, so a source reaches anything the props above do not name.\n      ...options,\n    }),\n    ...rest,\n    style: { ...wistiaPlayerStyle(controls), ...style },\n    ref: composedRef,\n    children,\n  });\n});\n\nexport namespace WistiaVideo {\n  export type Props = WistiaVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+CA,MAAa,cAAyF,WAGpG,SAAS,YACT,EACE,UACA,UACA,WAAW,OACX,cACA,MACA,OAEA,aAAa,cACb,QACA,SACA,QACA,KACA,OACA,GAAG,QAEL,KACA;CACA,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,aACf,YAAY;EAEX,IAAI,SAAS,sBAAsB,OAAO;EAE1C,WAAW,OAAgB;CAC7B,GACA,CAAC,QAAQ,CACX;CACA,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAGlD,MAAM,EAAE,SAAS,GAAG,YAAY,UAAU,CAAC;CAC3C,MAAM,WAAW,YAAY,MAAM,mBAAmB,GAAG,IAAI;CAI7D,MAAM,YAAY,MAAM,qBAAqB,GAAG,IAAI;CAEpD,MAAM,CAAC,gBAAgB,eAAe,gBAAgB,KAAK;CAE3D,OAAO,cAAc,mBAAmB;EAItC,KAAK;EACL,GAAG,iBAAiB;GAClB,SAAS,YAAY;GACrB,GAAG,mBAAmB;IAAE;IAAU;IAAU;IAAM;IAAQ;GAAQ,CAAC;GACnE,OAAO;GACP,aAAa;GAEb,GAAG;EACL,CAAC;EACD,GAAG;EACH,OAAO;GAAE,GAAG,kBAAkB,QAAQ;GAAG,GAAG;EAAM;EAClD,KAAK;EACL;CACF,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,2 @@
+import { WistiaVideo, WistiaVideoProps } from "./adapter.js";
+export { WistiaVideo, WistiaVideoProps };

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

@@ -0,0 +1,2 @@
+import { WistiaVideo } from "./adapter.js";
+export { WistiaVideo };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.d.ts","names":[],"sources":["../../../../src/media/youtube-video/adapter.tsx"],"mappings":";;;UAUiB,0BAA0B,QAAQ;EACjD,WAAW;;cAGA,8BAAY,0BAAA,oCAAA,cAAA;kBAuCR;OACH,QAAQ"}

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

@@ -0,0 +1,38 @@
+"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 { YouTubeAdapter, buildYouTubeIframeSrc } from "@videojs/youtube-video";
+//#region src/media/youtube-video/adapter.tsx
+const YouTubeVideo = forwardRef(function YouTubeVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(YouTubeAdapter);
+	const props = { ...rawProps };
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const [initialSrc] = useState(() => buildYouTubeIframeSrc(props.src || props.source?.src || "", {
+		...YouTubeAdapter.defaultProps,
+		...props
+	}));
+	const iframeProps = useSyncProps(media, props, YouTubeAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "YouTube 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?.youtube?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { YouTubeVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/youtube-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildYouTubeIframeSrc, YouTubeAdapter, type YouTubeAdapterProps } from '@videojs/youtube-video';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\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 YouTubeVideoProps extends Partial<YouTubeAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const YouTubeVideo = forwardRef<HTMLIFrameElement, YouTubeVideoProps>(function YouTubeVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(YouTubeAdapter);\n  const props: Partial<YouTubeAdapterProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n    buildYouTubeIframeSrc(props.src || props.source?.src || '', { ...YouTubeAdapter.defaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<YouTubeAdapterProps, Record<string, unknown>>(\n    media,\n    props,\n    YouTubeAdapter.defaultProps\n  );\n\n  return (\n    <iframe\n      title=\"YouTube video player\"\n      // Empty means there is no embed to point at yet; React warns about `src=\"\"`,\n      // and the media builds the URL itself once a source resolves.\n      src={initialSrc || undefined}\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.source?.engine?.youtube?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace YouTubeVideo {\n  export type Props = YouTubeVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,cAAc;CAC7C,MAAM,QAAgE,EAAE,GAAG,SAAS;CACpF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG,eAAe;EAAc,GAAG;CAAM,CAAC,CAC1G;CACA,MAAM,cAAc,aAClB,OACA,OACA,eAAe,YACjB;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,SAAS;EAC/C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

@@ -0,0 +1,2 @@
+import { YouTubeVideo, YouTubeVideoProps } from "./adapter.js";
+export { YouTubeVideo, YouTubeVideoProps };

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

@@ -0,0 +1,2 @@
+import { YouTubeVideo } from "./adapter.js";
+export { YouTubeVideo };

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/player/container.d.ts
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace Container {
+  type Props = ContainerProps;
+}
+//#endregion
+export { Container, ContainerProps };
+//# sourceMappingURL=container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UA2BiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBAmEL;OACH,QAAQ"}

package/dist/dev/player/container.js

@@ -0,0 +1,60 @@
+import { I18nContext, useTranslator } from "../i18n/context.js";
+import { useComposedRefs } from "../utils/use-composed-refs.js";
+import { useContainerAttach, usePlayer } from "./context.js";
+import { PopupGroupProvider } from "./popup-group-context.js";
+import { ContainerCore, ContainerDataAttrs } from "@videojs/core";
+import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, createPopupGroup, focusContainer, getStateDataAttrs, selectControls } from "@videojs/core/dom";
+import { forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { labelText } from "@videojs/core/i18n/text/container";
+import { getTextDirection } from "@videojs/utils/i18n";
+//#region src/player/container.tsx
+const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_CONTAINER_TAB_INDEX, role = DEFAULT_CONTAINER_ROLE, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, lang: langProp, dir: dirProp, ...props }, ref) {
+	const setContainer = useContainerAttach();
+	const translator = useTranslator();
+	const i18n = useContext(I18nContext);
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new ContainerCore());
+	const [popupGroup] = useState(() => createPopupGroup());
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(ref, internalRef);
+	useEffect(() => {
+		setContainer?.(internalRef.current);
+		return () => setContainer?.(null);
+	}, [setContainer]);
+	const handlePointerUp = (event) => {
+		props.onPointerUp?.(event);
+		const el = internalRef.current;
+		if (!el) return;
+		focusContainer(el);
+	};
+	const accessibleNameProps = ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	} : { "aria-label": translator(labelText) };
+	const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : void 0);
+	const localeProps = {
+		lang,
+		dir: dirProp ?? (lang ? getTextDirection(lang) : void 0)
+	};
+	if (controls) core.setMedia(controls);
+	const stateAttrs = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		ref: composedRef,
+		role,
+		tabIndex,
+		...accessibleNameProps,
+		...localeProps,
+		...props,
+		...stateAttrs,
+		onPointerUp: handlePointerUp,
+		children: /* @__PURE__ */ jsx(PopupGroupProvider, {
+			value: popupGroup,
+			children
+		})
+	});
+});
+//#endregion
+export { Container };
+
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import { ContainerCore, ContainerDataAttrs } from '@videojs/core';\nimport {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n  getStateDataAttrs,\n  selectControls,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport { getTextDirection } from '@videojs/utils/i18n';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { I18nContext, useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach, usePlayer } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    lang: langProp,\n    dir: dirProp,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const i18n = useContext(I18nContext);\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ContainerCore());\n\n  const [popupGroup] = useState(() => createPopupGroup());\n\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: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n  const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : undefined);\n  const localeProps = {\n    lang,\n    dir: dirProp ?? (lang ? getTextDirection(lang) : undefined),\n  };\n\n  if (controls) core.setMedia(controls);\n\n  const stateAttrs = controls ? getStateDataAttrs(core.getState(), ContainerDataAttrs) : undefined;\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...localeProps}\n      {...props}\n      {...stateAttrs}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;;;AA+BA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,MAAM,UACN,KAAK,SACL,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,OAAO,WAAW,WAAW;CACnC,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CAEjD,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CAEtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EAET,eAAe,EAAE;CACnB;CAEA,MAAM,sBACJ,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;EAAE,cAAc;EAAW,mBAAmB;CAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;CAC5C,MAAM,OAAO,aAAa,MAAM,iBAAiB,KAAK,SAAS,KAAA;CAC/D,MAAM,cAAc;EAClB;EACA,KAAK,YAAY,OAAO,iBAAiB,IAAI,IAAI,KAAA;CACnD;CAEA,IAAI,UAAU,KAAK,SAAS,QAAQ;CAEpC,MAAM,aAAa,WAAW,kBAAkB,KAAK,SAAS,GAAG,kBAAkB,IAAI,KAAA;CAEvF,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}

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

@@ -1,8 +1,7 @@
-import { Media, MediaContainer } from "@videojs/core/dom";
+import { MediaContainer } from "@videojs/core/dom";
+import { Media } from "@videojs/media";
 import { UnknownState, UnknownStore } from "@videojs/store";
-import * as react from "react";
-import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from "react";
-
+import { Dispatch, ReactNode, SetStateAction } from "react";
 //#region src/player/context.d.ts
 interface PlayerContextValue {
   store: UnknownStore;
@@ -11,10 +10,14 @@ interface PlayerContextValue {
   container: MediaContainer | null;
   setContainer: Dispatch<SetStateAction<HTMLElement | null>>;
 }
-/** Access the full player context value. Throws if used outside a Player Provider. */
+/** Access the full player context value. Throws if used outside a Player. */
 declare function usePlayerContext(): PlayerContextValue;
 /**
- * Access the player store from within a Player Provider.
+ * Access the player store from within a Player.
+ *
+ * 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
  */
@@ -22,25 +25,36 @@ declare function usePlayer(): UnknownStore;
 /**
  * Select a value from the player store. Re-renders when the selected value changes.
  *
- * @label With Selector
+ * The selector receives `UnknownState`, so an inline selector returns `unknown`. Pass a premade selector (e.g.
+ * `selectPlayback`) to get a typed result.
+ *
  * @param selector - Derives a value from the player store state.
+ * @label With Selector
  */
 declare function usePlayer<R>(selector: (state: UnknownState) => R): R;
-/** Access the media element from within a Player Provider. */
+/**
+ * Returns the player store when available, or `undefined` outside a Player.
+ *
+ * @label Without Selector
+ */
+declare function useOptionalPlayer(): UnknownStore | undefined;
+/**
+ * Selects a player value when available, or returns `undefined` outside a Player.
+ *
+ * @param selector - Derives a value from the player store state.
+ * @label With Selector
+ */
+declare function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;
+/** Access the media element from within a Player. */
 declare function useMedia(): Media | null;
-/** Access the container element from within a Player Provider. */
+/** Access the container element from within a Player. */
 declare function useContainer(): MediaContainer | null;
+/** Access the container element when a Player 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 | null>> | undefined;
 /** Access the container attach setter for connecting a container element to the player. */
 declare function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined;
-interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-}
-declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
-declare namespace Container {
-  type Props = ContainerProps;
-}
 //#endregion
-export { Container, ContainerProps, PlayerContextValue, useContainer, useContainerAttach, useMedia, useMediaAttach, usePlayer, usePlayerContext };
+export { 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":";;;;;;UAUiB,kBAAA;EACf,KAAA,EAAO,YAAA;EACP,KAAA,EAAO,KAAA;EACP,QAAA,EAAU,QAAA,CAAS,cAAA,CAAe,KAAA;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;;iBAwBpD,QAAA,CAAA,GAAY,KAAA;AA/B5B;AAAA,iBAqCgB,YAAA,CAAA,GAAgB,cAAA;;iBAMhB,cAAA,CAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,KAAA;;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,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;UAOiB;EACf,OAAO;EACP,OAAO;EACP,UAAU,SAAS,eAAe;EAClC,WAAW;EACX,cAAc,SAAS,eAAe;;;iBAqBxB,oBAAoB;;;;;;;;;;iBAgBpB,aAAa;;;;;;;;;;iBAUb,UAAU,GAAG,WAAW,OAAO,iBAAiB,IAAI;;;;;;iBAYpD,qBAAqB;;;;;;;iBAOrB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAU5D,YAAY;;iBAOZ,gBAAgB;;iBAOhB,wBAAwB;;iBAOxB,kBAAkB,SAAS,eAAe;;iBAO1C,sBAAsB,SAAS,eAAe"}

package/dist/dev/player/context.js

@@ -1,10 +1,6 @@
-'use client';
-
-import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useStore } from "@videojs/store/react";
-import { createContext, forwardRef, useContext, useEffect, useRef } from "react";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/player/context.tsx
 const PlayerContext = createContext(null);
 const EMPTY_UNSUBSCRIBE = () => {};
@@ -18,10 +14,10 @@ function PlayerContextProvider({ value, children }) {
 		children
 	});
 }
-/** Access the full player context value. Throws if used outside a Player Provider. */
+/** Access the full player context value. Throws if used outside a Player. */
 function usePlayerContext() {
 	const ctx = useContext(PlayerContext);
-	if (!ctx) throw new Error("usePlayerContext must be used within a Player Provider");
+	if (!ctx) throw new Error("usePlayerContext must be used within a Player");
 	return ctx;
 }
 function usePlayer(selector) {
@@ -30,19 +26,24 @@ function usePlayer(selector) {
 }
 function useOptionalPlayer(selector) {
 	const ctx = useContext(PlayerContext);
-	const value = useStore(ctx?.store ?? EMPTY_STORE, ctx ? selector : void 0);
+	const store = ctx?.store ?? EMPTY_STORE;
+	const value = useStore(store, ctx ? selector : void 0);
 	return ctx ? value : void 0;
 }
-/** Access the media element from within a Player Provider. */
+/** Access the media element from within a Player. */
 function useMedia() {
 	const { media } = usePlayerContext();
 	return media;
 }
-/** Access the container element from within a Player Provider. */
+/** Access the container element from within a Player. */
 function useContainer() {
 	const { container } = usePlayerContext();
 	return container;
 }
+/** Access the container element when a Player is available. */
+function useOptionalContainer() {
+	return useContext(PlayerContext)?.container ?? null;
+}
 /** Access the media attach setter for connecting a media element to the player. */
 function useMediaAttach() {
 	return useContext(PlayerContext)?.setMedia;
@@ -51,21 +52,7 @@ function useMediaAttach() {
 function useContainerAttach() {
 	return useContext(PlayerContext)?.setContainer;
 }
-const Container = forwardRef(function Container({ children, ...props }, ref) {
-	const setContainer = useContainerAttach();
-	const internalRef = useRef(null);
-	const composedRef = useComposedRefs(ref, internalRef);
-	useEffect(() => {
-		setContainer?.(internalRef.current);
-		return () => setContainer?.(null);
-	}, [setContainer]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: composedRef,
-		...props,
-		children
-	});
-});
-
 //#endregion
-export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
+export { PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, 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, MediaContainer } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, 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({ children, ...props }, ref) {\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  return (\n    <div ref={composedRef} {...props}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;AAkBA,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;EAAgB;EAAQ;GAAkC;;;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,OAAkB;AAClE,QAAO,MAAM,QAAQ;;;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,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CAClH,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;AAElB,QACE,oBAAC;EAAI,KAAK;EAAa,GAAI;EACxB;GACG;EAER"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["import type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\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. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it returns an untyped `UnknownStore` whose\n * state properties are typed as `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`, or pass\n * 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`. Pass a premade selector (e.g.\n * `selectPlayback`) to get a typed result.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n\n  return useStore(store, selector as any);\n}\n\n/**\n * Returns the player store when available, or `undefined` outside a Player.\n *\n * @label Without Selector\n */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/**\n * Selects a player value when available, or returns `undefined` outside a Player.\n *\n * @param selector - Derives a value from the player store state.\n * @label With Selector\n */\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\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n\n  return ctx?.container ?? null;\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\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\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;AAeA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAsBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAeA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CACpC,MAAM,QAAS,KAAK,SAAU;CAC9B,MAAM,QAAQ,SAAS,OAAQ,MAAM,WAAW,KAAA,CAAiB;CAEjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CAEvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAG5D,OAFY,WAAW,aAEd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAGnF,OAFY,WAAW,aAEd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAG7F,OAFY,WAAW,aAEd,CAAC,EAAE;AACd"}