@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/native-hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { NativeHlsMediaProps } from '@videojs/media/dom/native-hls';\nimport { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/media/dom/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,cAAc;CAK7C,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,0BAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/native-hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { NativeHlsMediaProps } from '@videojs/media/dom/native-hls';\nimport { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/media/dom/native-hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\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>, 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,cAAc;CAC7C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,0BAA0B;CAEvE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/shaka-video/media.tsx"],"mappings":";;;UAWiB,wBACP,KAAK,oBAAoB,yBAAyB,kBACxD,QAAQ;EACV,WAAW;;cAGA,4BAAU,0BAAA,kCAAA,cAAA;kBAgBN;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/shaka-video/media.tsx"],"mappings":";;;UAYiB,wBACP,KAAK,oBAAoB,yBAAyB,kBAAkB,QAAQ;EACpF,WAAW;;cAGA,4BAAU,0BAAA,kCAAA,cAAA;kBAgBN;OACH,QAAQ"}

package/dist/dev/media/shaka-video/media.js

@@ -9,9 +9,12 @@ import { ShakaMedia, shakaMediaDefaultProps } from "@videojs/media/dom/shaka";
 //#region src/media/shaka-video/media.tsx
 const ShakaVideo = forwardRef(function ShakaVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(ShakaMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, shakaMediaDefaultProps);
 	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, shakaMediaDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/shaka-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { ShakaMediaProps } from '@videojs/media/dom/shaka';\nimport { ShakaMedia, shakaMediaDefaultProps } from '@videojs/media/dom/shaka';\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 ShakaVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof ShakaMediaProps>,\n    Partial<ShakaMediaProps> {\n  children?: ReactNode;\n}\n\nexport const ShakaVideo = forwardRef<HTMLVideoElement, ShakaVideoProps>(function ShakaVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(ShakaMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, shakaMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace ShakaVideo {\n  export type Props = ShakaVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,UAAU;CAKzC,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,sBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/shaka-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { ShakaMediaProps } from '@videojs/media/dom/shaka';\nimport { ShakaMedia, shakaMediaDefaultProps } from '@videojs/media/dom/shaka';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\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 ShakaVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof ShakaMediaProps>, Partial<ShakaMediaProps> {\n  children?: ReactNode;\n}\n\nexport const ShakaVideo = forwardRef<HTMLVideoElement, ShakaVideoProps>(function ShakaVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(ShakaMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, shakaMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace ShakaVideo {\n  export type Props = ShakaVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,UAAU;CACzC,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,sBAAsB;CAEnE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/spotify-audio/media.tsx"],"mappings":";;;UAWiB,0BAA0B,QAAQ;EACjD,WAAW;;cAGA,8BAAY,0BAAA,oCAAA,cAAA;kBA2CR;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/spotify-audio/media.tsx"],"mappings":";;;UAYiB,0BAA0B,QAAQ;EACjD,WAAW;;cAGA,8BAAY,0BAAA,oCAAA,cAAA;kBA2CR;OACH,QAAQ"}

package/dist/dev/media/spotify-audio/media.js

@@ -10,7 +10,8 @@ import { SpotifyMedia, buildSpotifyIframeSrc, spotifyMediaDefaultProps } from "@
 const SpotifyAudio = forwardRef(function SpotifyAudio({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(SpotifyMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => buildSpotifyIframeSrc(props.src || props.source?.src || "", {
 		...spotifyMediaDefaultProps,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/spotify-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { SpotifyMediaProps } from '@videojs/media/dom/spotify';\nimport { buildSpotifyIframeSrc, SpotifyMedia, spotifyMediaDefaultProps } from '@videojs/media/dom/spotify';\nimport type { CSSProperties, 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 SpotifyAudioProps extends Partial<SpotifyMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SpotifyAudio = forwardRef<HTMLIFrameElement, SpotifyAudioProps>(function SpotifyAudio(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(SpotifyMedia);\n  const props: Partial<SpotifyMediaProps> & 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 an entity, so honor it when `src` is absent.\n    buildSpotifyIframeSrc(props.src || props.source?.src || '', { ...spotifyMediaDefaultProps, ...props })\n  );\n  const { style, ...iframeProps } = useSyncProps<SpotifyMediaProps, Record<string, unknown>>(\n    media,\n    props,\n    spotifyMediaDefaultProps\n  ) as Record<string, unknown> & { style?: CSSProperties };\n\n  return (\n    <iframe\n      title=\"Spotify audio 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=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\"\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.spotify?.referrerPolicy}\n      {...iframeProps}\n      // Without Spotify's own chrome the embed is a transport and nothing else:\n      // its player UI would otherwise show through whatever skin is drawn over it.\n      // Inline so a `className` cannot put it back on screen, merged so a\n      // consumer's own styles survive. A hidden iframe still loads and plays.\n      style={props.controls ? style : { ...style, display: 'none' }}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace SpotifyAudio {\n  export type Props = SpotifyAudioProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,QAA8D,EAAE,GAAG,SAAS;CAElF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAA0B,GAAG;CAAM,CAAC,CACvG;CACA,MAAM,EAAE,OAAO,GAAG,gBAAgB,aAChC,OACA,OACA,wBACF;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,SAAS;EAC/C,GAAI;EAKJ,OAAO,MAAM,WAAW,QAAQ;GAAE,GAAG;GAAO,SAAS;EAAO;EAC5D,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/spotify-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { SpotifyMediaProps } from '@videojs/media/dom/spotify';\nimport { buildSpotifyIframeSrc, SpotifyMedia, spotifyMediaDefaultProps } from '@videojs/media/dom/spotify';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef, 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 SpotifyAudioProps extends Partial<SpotifyMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SpotifyAudio = forwardRef<HTMLIFrameElement, SpotifyAudioProps>(function SpotifyAudio(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(SpotifyMedia);\n  const props: Partial<SpotifyMediaProps> & 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 an entity, so honor it when `src` is absent.\n    buildSpotifyIframeSrc(props.src || props.source?.src || '', { ...spotifyMediaDefaultProps, ...props })\n  );\n  const { style, ...iframeProps } = useSyncProps<SpotifyMediaProps, Record<string, unknown>>(\n    media,\n    props,\n    spotifyMediaDefaultProps\n  ) as Record<string, unknown> & { style?: CSSProperties };\n\n  return (\n    <iframe\n      title=\"Spotify audio 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=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\"\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.spotify?.referrerPolicy}\n      {...iframeProps}\n      // Without Spotify's own chrome the embed is a transport and nothing else:\n      // its player UI would otherwise show through whatever skin is drawn over it.\n      // Inline so a `className` cannot put it back on screen, merged so a\n      // consumer's own styles survive. A hidden iframe still loads and plays.\n      style={props.controls ? style : { ...style, display: 'none' }}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace SpotifyAudio {\n  export type Props = SpotifyAudioProps;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,eAAe,WAAiD,SAAS,aACpF,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,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAA0B,GAAG;CAAM,CAAC,CACvG;CACA,MAAM,EAAE,OAAO,GAAG,gBAAgB,aAChC,OACA,OACA,wBACF;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,SAAS;EAC/C,GAAI;EAKJ,OAAO,MAAM,WAAW,QAAQ;GAAE,GAAG;GAAO,SAAS;EAAO;EAC5D,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/tiktok-video/media.tsx"],"mappings":";;;UAWiB,yBAAyB,QAAQ;EAChD,WAAW;;cAGA,6BAAW,0BAAA,mCAAA,cAAA;kBA0CP;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/tiktok-video/media.tsx"],"mappings":";;;UAYiB,yBAAyB,QAAQ;EAChD,WAAW;;cAGA,6BAAW,0BAAA,mCAAA,cAAA;kBA0CP;OACH,QAAQ"}

package/dist/dev/media/tiktok-video/media.js

@@ -10,7 +10,8 @@ import { TikTokMedia, buildTikTokIframeSrc, tiktokMediaDefaultProps } from "@vid
 const TikTokVideo = forwardRef(function TikTokVideo({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(TikTokMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => buildTikTokIframeSrc(props.src || props.source?.src || "", {
 		...tiktokMediaDefaultProps,
 		...props,

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/tiktok-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { TikTokMediaProps } from '@videojs/media/dom/tiktok';\nimport { buildTikTokIframeSrc, TikTokMedia, tiktokMediaDefaultProps } from '@videojs/media/dom/tiktok';\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 TikTokVideoProps extends Partial<TikTokMediaProps> {\n  children?: ReactNode;\n}\n\nexport const TikTokVideo = forwardRef<HTMLIFrameElement, TikTokVideoProps>(function TikTokVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TikTokMedia);\n  const props: Partial<TikTokMediaProps> & 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    buildTikTokIframeSrc(props.src || props.source?.src || '', {\n      ...tiktokMediaDefaultProps,\n      ...props,\n      // The frame reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Rendering it any other way than the media\n      // builds it would have the media rebuild the frame on mount.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<TikTokMediaProps, Record<string, unknown>>(media, props, tiktokMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"TikTok 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?.tiktok?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace TikTokVideo {\n  export type Props = TikTokVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA6D,EAAE,GAAG,SAAS;CAEjF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EACzD,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAAwD,OAAO,OAAO,uBAAuB;CAEjH,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,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/tiktok-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { TikTokMediaProps } from '@videojs/media/dom/tiktok';\nimport { buildTikTokIframeSrc, TikTokMedia, tiktokMediaDefaultProps } from '@videojs/media/dom/tiktok';\nimport type { ReactNode } from 'react';\nimport { forwardRef, 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 TikTokVideoProps extends Partial<TikTokMediaProps> {\n  children?: ReactNode;\n}\n\nexport const TikTokVideo = forwardRef<HTMLIFrameElement, TikTokVideoProps>(function TikTokVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TikTokMedia);\n  const props: Partial<TikTokMediaProps> & 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    buildTikTokIframeSrc(props.src || props.source?.src || '', {\n      ...tiktokMediaDefaultProps,\n      ...props,\n      // The frame reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Rendering it any other way than the media\n      // builds it would have the media rebuild the frame on mount.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<TikTokMediaProps, Record<string, unknown>>(media, props, tiktokMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"TikTok 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?.tiktok?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace TikTokVideo {\n  export type Props = TikTokVideoProps;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA6D,EAAE,GAAG,SAAS;CACjF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EACzD,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAAwD,OAAO,OAAO,uBAAuB;CAEjH,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,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/twitch-video/media.tsx"],"mappings":";;;UAWiB,yBAAyB,QAAQ;EAChD,WAAW;;cAGA,6BAAW,0BAAA,mCAAA,cAAA;kBAyCP;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/twitch-video/media.tsx"],"mappings":";;;UAYiB,yBAAyB,QAAQ;EAChD,WAAW;;cAGA,6BAAW,0BAAA,mCAAA,cAAA;kBAyCP;OACH,QAAQ"}

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

@@ -10,7 +10,8 @@ import { TwitchMedia, buildTwitchIframeSrc, twitchMediaDefaultProps } from "@vid
 const TwitchVideo = forwardRef(function TwitchVideo({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(TwitchMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => globalThis.location ? buildTwitchIframeSrc(props.src || props.source?.src || "", {
 		...twitchMediaDefaultProps,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/twitch-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { TwitchMediaProps } from '@videojs/media/dom/twitch';\nimport { buildTwitchIframeSrc, TwitchMedia, twitchMediaDefaultProps } from '@videojs/media/dom/twitch';\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 TwitchVideoProps extends Partial<TwitchMediaProps> {\n  children?: ReactNode;\n}\n\nexport const TwitchVideo = forwardRef<HTMLIFrameElement, TwitchVideoProps>(function TwitchVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TwitchMedia);\n  const props: Partial<TwitchMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // Server rendering has no `location` to name as the embed's parent, and Twitch\n    // refuses to play in a page its URL never named. Rendering no `src` leaves the\n    // URL to `attach()`, which builds it where there is a hostname to name.\n    globalThis.location\n      ? // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n        buildTwitchIframeSrc(props.src || props.source?.src || '', { ...twitchMediaDefaultProps, ...props })\n      : ''\n  );\n  const iframeProps = useSyncProps<TwitchMediaProps, Record<string, unknown>>(media, props, twitchMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"Twitch 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; picture-in-picture;\"\n      sandbox=\"allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n      scrolling=\"no\"\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.twitch?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace TwitchVideo {\n  export type Props = TwitchVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA6D,EAAE,GAAG,SAAS;CAEjF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAInB,WAAW,WAEP,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAAyB,GAAG;CAAM,CAAC,IACnG,EACN;CACA,MAAM,cAAc,aAAwD,OAAO,OAAO,uBAAuB;CAEjH,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,SAAQ;EACR,WAAU;EACV,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/twitch-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { TwitchMediaProps } from '@videojs/media/dom/twitch';\nimport { buildTwitchIframeSrc, TwitchMedia, twitchMediaDefaultProps } from '@videojs/media/dom/twitch';\nimport type { ReactNode } from 'react';\nimport { forwardRef, 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 TwitchVideoProps extends Partial<TwitchMediaProps> {\n  children?: ReactNode;\n}\n\nexport const TwitchVideo = forwardRef<HTMLIFrameElement, TwitchVideoProps>(function TwitchVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TwitchMedia);\n  const props: Partial<TwitchMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // Server rendering has no `location` to name as the embed's parent, and Twitch\n    // refuses to play in a page its URL never named. Rendering no `src` leaves the\n    // URL to `attach()`, which builds it where there is a hostname to name.\n    globalThis.location\n      ? // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n        buildTwitchIframeSrc(props.src || props.source?.src || '', { ...twitchMediaDefaultProps, ...props })\n      : ''\n  );\n  const iframeProps = useSyncProps<TwitchMediaProps, Record<string, unknown>>(media, props, twitchMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"Twitch 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; picture-in-picture;\"\n      sandbox=\"allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n      scrolling=\"no\"\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.twitch?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace TwitchVideo {\n  export type Props = TwitchVideoProps;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA6D,EAAE,GAAG,SAAS;CACjF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAInB,WAAW,WAEP,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAAyB,GAAG;CAAM,CAAC,IACnG,EACN;CACA,MAAM,cAAc,aAAwD,OAAO,OAAO,uBAAuB;CAEjH,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,SAAQ;EACR,WAAU;EACV,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

@@ -1,6 +1,13 @@
 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> {}
+/**
+ * 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":";;UAMiB,mBAAmB,oBAAoB;cAE3C,uBAAK,0BAAA,6BAAA,cAAA;kBAWD;OACH,QAAQ"}
+{"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

@@ -3,9 +3,17 @@ 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
 	});

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

@@ -1 +1 @@
-{"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\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":";;;;;AAQA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CAIxG,OACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,eAC+B,CAGxB;EAAG,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}
+{"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/media.d.ts.map

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

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

@@ -10,7 +10,8 @@ import { VimeoMedia, buildVimeoIframeSrc, vimeoMediaDefaultProps } from "@videoj
 const VimeoVideo = forwardRef(function VimeoVideo({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(VimeoMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => buildVimeoIframeSrc(props.src || props.source?.src || "", {
 		...vimeoMediaDefaultProps,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/vimeo-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { VimeoMediaProps } from '@videojs/media/dom/vimeo';\nimport { buildVimeoIframeSrc, VimeoMedia, vimeoMediaDefaultProps } from '@videojs/media/dom/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(() =>\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 || '', { ...vimeoMediaDefaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<VimeoMediaProps, Record<string, unknown>>(media, props, vimeoMediaDefaultProps);\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":";;;;;;;;;AAeA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,UAAU;CACzC,MAAM,QAA4D,EAAE,GAAG,SAAS;CAEhF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,oBAAoB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAAwB,GAAG;CAAM,CAAC,CACnG;CACA,MAAM,cAAc,aAAuD,OAAO,OAAO,sBAAsB;CAE/G,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"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/vimeo-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { VimeoMediaProps } from '@videojs/media/dom/vimeo';\nimport { buildVimeoIframeSrc, VimeoMedia, vimeoMediaDefaultProps } from '@videojs/media/dom/vimeo';\nimport type { ReactNode } from 'react';\nimport { forwardRef, 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<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(() =>\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 || '', { ...vimeoMediaDefaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<VimeoMediaProps, Record<string, unknown>>(media, props, vimeoMediaDefaultProps);\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":";;;;;;;;;AAgBA,MAAa,aAAa,WAA+C,SAAS,WAChF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,UAAU;CACzC,MAAM,QAA4D,EAAE,GAAG,SAAS;CAChF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,oBAAoB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAAwB,GAAG;CAAM,CAAC,CACnG;CACA,MAAM,cAAc,aAAuD,OAAO,OAAO,sBAAsB;CAE/G,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/youtube-video/media.d.ts.map

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

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

@@ -10,7 +10,8 @@ import { YouTubeMedia, buildYouTubeIframeSrc, youtubeMediaDefaultProps } from "@
 const YouTubeVideo = forwardRef(function YouTubeVideo({ children, ...rawProps }, ref) {
 	const media = useMediaInstance(YouTubeMedia);
 	const props = { ...rawProps };
-	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
 	const [initialSrc] = useState(() => buildYouTubeIframeSrc(props.src || props.source?.src || "", {
 		...youtubeMediaDefaultProps,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/youtube-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { YouTubeMediaProps } from '@videojs/media/dom/youtube';\nimport { buildYouTubeIframeSrc, YouTubeMedia, youtubeMediaDefaultProps } from '@videojs/media/dom/youtube';\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 YouTubeVideoProps extends Partial<YouTubeMediaProps> {\n  children?: ReactNode;\n}\n\nexport const YouTubeVideo = forwardRef<HTMLIFrameElement, YouTubeVideoProps>(function YouTubeVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(YouTubeMedia);\n  const props: Partial<YouTubeMediaProps> & 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 || '', { ...youtubeMediaDefaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<YouTubeMediaProps, Record<string, unknown>>(media, props, youtubeMediaDefaultProps);\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":";;;;;;;;;AAeA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,QAA8D,EAAE,GAAG,SAAS;CAElF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAA0B,GAAG;CAAM,CAAC,CACvG;CACA,MAAM,cAAc,aAAyD,OAAO,OAAO,wBAAwB;CAEnH,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"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/youtube-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { YouTubeMediaProps } from '@videojs/media/dom/youtube';\nimport { buildYouTubeIframeSrc, YouTubeMedia, youtubeMediaDefaultProps } from '@videojs/media/dom/youtube';\nimport type { ReactNode } from 'react';\nimport { forwardRef, 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<YouTubeMediaProps> {\n  children?: ReactNode;\n}\n\nexport const YouTubeVideo = forwardRef<HTMLIFrameElement, YouTubeVideoProps>(function YouTubeVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(YouTubeMedia);\n  const props: Partial<YouTubeMediaProps> & 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 || '', { ...youtubeMediaDefaultProps, ...props })\n  );\n  const iframeProps = useSyncProps<YouTubeMediaProps, Record<string, unknown>>(media, props, youtubeMediaDefaultProps);\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":";;;;;;;;;AAgBA,MAAa,eAAe,WAAiD,SAAS,aACpF,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,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG;EAA0B,GAAG;CAAM,CAAC,CACvG;CACA,MAAM,cAAc,aAAyD,OAAO,OAAO,wBAAwB;CAEnH,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/player/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UAqBiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBAgDL;OACH,QAAQ"}
+{"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

@@ -1,15 +1,20 @@
-import { useTranslator } from "../i18n/context.js";
+import { I18nContext, useTranslator } from "../i18n/context.js";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
-import { useContainerAttach } from "./context.js";
+import { useContainerAttach, usePlayer } from "./context.js";
 import { PopupGroupProvider } from "./popup-group-context.js";
-import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, createPopupGroup, focusContainer } from "@videojs/core/dom";
-import { forwardRef, useEffect, useRef, useState } from "react";
+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 { ContainerCore, ContainerDataAttrs } from "@videojs/core";
 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, ...props }, ref) {
+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);
@@ -23,15 +28,25 @@ const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_C
 		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,
-		...ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledBy
-		} : { "aria-label": translator(labelText) },
+		...accessibleNameProps,
+		...localeProps,
 		...props,
+		...stateAttrs,
 		onPointerUp: handlePointerUp,
 		children: /* @__PURE__ */ jsx(PopupGroupProvider, {
 			value: popupGroup,

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } 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    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const [popupGroup] = useState(() => createPopupGroup());\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    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\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\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":";;;;;;;;;AAyBA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,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;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}
+{"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

@@ -15,10 +15,9 @@ declare function usePlayerContext(): PlayerContextValue;
 /**
  * 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.
+ * 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
  */
@@ -26,22 +25,25 @@ 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.
+ * 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.
+ * @label With Selector
  */
 declare function usePlayer<R>(selector: (state: UnknownState) => R): R;
 /**
- * Access player state when available, but return `undefined` outside a Player.
+ * Returns the player store when available, or `undefined` outside a Player.
  *
- * This is useful for components that can operate without player context
- * (e.g. they accept fully explicit props as a fallback).
+ * @label Without Selector
  */
-/** @label Without Selector */
 declare function useOptionalPlayer(): UnknownStore | undefined;
-/** @label With Selector */
+/**
+ * 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;

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

@@ -1 +1 @@
-{"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;;;;;;;;iBAapD,qBAAqB;;iBAErB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAS5D,YAAY;;iBAMZ,gBAAgB;;iBAMhB,wBAAwB;;iBAMxB,kBAAkB,SAAS,eAAe;;iBAM1C,sBAAsB,SAAS,eAAe"}
+{"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

@@ -26,7 +26,8 @@ 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. */

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

@@ -1 +1 @@
-{"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  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\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 a Player.\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. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\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  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  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"],"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;CACzE,OAAO;AACT;AAuBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAYA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CAEpC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,CAAiB;CACjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAE5D,OADY,WAAW,aACd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAEnF,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAE7F,OADY,WAAW,aACd,CAAC,EAAE;AACd"}
+{"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"}

package/dist/dev/player/create-player.d.ts

@@ -3,41 +3,57 @@ import { Media } from "@videojs/media/dom";
 import { InferStoreState } from "@videojs/store";
 import { FC, ReactNode } from "react";
 //#region src/player/create-player.d.ts
+/** Configures the feature-backed store and provider component created by {@link createPlayer}. */
 interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
+  /** Features combined into the player's store, state, actions, and configuration props. */
   features: Features;
+  /** Name shown for the generated provider component in development tools. */
   displayName?: string;
 }
+/** Props accepted by a generated Player provider. */
 type PlayerProps<Config = object> = { [Key in keyof Config]?: Config[Key] | undefined; } & {
+  /** Content placed inside the player context. The provider does not render a host element of its own. */
   children: ReactNode;
 };
+/** The provider component and typed hooks produced by {@link createPlayer}. */
 interface CreatePlayerResult<Store extends PlayerStore> {
+  /** Provides a new player store to its descendants without adding a layout element. */
   Player: FC<PlayerProps<InferPlayerConfig<Store>>>;
+  /** Accesses the configured store, or subscribes to a selected value from it. */
   usePlayer: UsePlayerHook<Store>;
+  /** Returns the media currently attached beneath the generated Player, or `null` before attachment. */
   useMedia: () => Media | null;
 }
+/** Typed player-store hook returned by {@link createPlayer}. */
 type UsePlayerHook<Store extends PlayerStore> = {
+  /** Returns the configured player store. */
   (): Store;
+  /**
+   * Subscribes to a value derived from the player state.
+   *
+   * @param selector - Derives the value consumed by the calling component.
+   */
   <R>(selector: (state: InferStoreState<Store>) => R): R;
 };
 /**
  * Create a player instance with a typed Player component and hooks.
  *
- * @label Video
  * @param config - Player configuration with features and optional display name.
+ * @label Video
  */
 declare function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;
 /**
  * Create a player for audio media.
  *
- * @label Audio
  * @param config - Player configuration with features and optional display name.
+ * @label Audio
  */
 declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;
 /**
  * Create a player with custom features.
  *
- * @label Generic
  * @param config - Player configuration with features and optional display name.
+ * @label Generic
  */
 declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
 //#endregion

package/dist/dev/player/create-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;UAyBiB,mBAAmB,iBAAiB;EACnD,UAAU;EACV;;KAGU,YAAY,sBACrB,aAAa,UAAU,OAAO;EAE/B,UAAU;;UAGK,mBAAmB,cAAc;EAChD,QAAQ,GAAG,YAAY,kBAAkB;EACzC,WAAW,cAAc;EACzB,gBAAgB;;KAGN,cAAc,cAAc;MAClC;GACH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;;UA0BiB,mBAAmB,iBAAiB;;EAEnD,UAAU;;EAGV;;;KAIU,YAAY,sBACrB,aAAa,UAAU,OAAO;;EAG/B,UAAU;;;UAIK,mBAAmB,cAAc;;EAEhD,QAAQ,GAAG,YAAY,kBAAkB;;EAGzC,WAAW,cAAc;;EAGzB,gBAAgB;;;KAIN,cAAc,cAAc;;MAElC;;;;;;GAOH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}

package/dist/dev/player/create-player.js

@@ -60,18 +60,19 @@ function createPlayer(config) {
 			container,
 			store
 		]);
+		const value = useMemo(() => ({
+			store,
+			media,
+			setMedia,
+			container,
+			setContainer
+		}), [
+			store,
+			media,
+			container
+		]);
 		return /* @__PURE__ */ jsx(PlayerContextProvider, {
-			value: useMemo(() => ({
-				store,
-				media,
-				setMedia,
-				container,
-				setContainer
-			}), [
-				store,
-				media,
-				container
-			]),
+			value,
 			children
 		});
 	}

package/dist/dev/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  children: ReactNode;\n};\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;AAyEA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAC/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAC3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IACxD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAI5B,OAAO,oBAAC,uBAAD;GAAuB,OAFhB,eAAe;IAAE;IAAO;IAAO;IAAU;IAAW;GAAa,IAAI;IAAC;IAAO;IAAO;GAAS,CAElE;GAAI;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EACnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["import {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\n/** Configures the feature-backed store and provider component created by {@link createPlayer}. */\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  /** Features combined into the player's store, state, actions, and configuration props. */\n  features: Features;\n\n  /** Name shown for the generated provider component in development tools. */\n  displayName?: string;\n}\n\n/** Props accepted by a generated Player provider. */\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  /** Content placed inside the player context. The provider does not render a host element of its own. */\n  children: ReactNode;\n};\n\n/** The provider component and typed hooks produced by {@link createPlayer}. */\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Provides a new player store to its descendants without adding a layout element. */\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n\n  /** Accesses the configured store, or subscribes to a selected value from it. */\n  usePlayer: UsePlayerHook<Store>;\n\n  /** Returns the media currently attached beneath the generated Player, or `null` before attachment. */\n  useMedia: () => Media | null;\n}\n\n/** Typed player-store hook returned by {@link createPlayer}. */\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  /** Returns the configured player store. */\n  (): Store;\n\n  /**\n   * Subscribes to a value derived from the player state.\n   *\n   * @param selector - Derives the value consumed by the calling component.\n   */\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Video\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Audio\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @param config - Player configuration with features and optional display name.\n * @label Generic\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;AA6FA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAE/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAE3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IAExD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAE5B,MAAM,QAAQ,eAAe;GAAE;GAAO;GAAO;GAAU;GAAW;EAAa,IAAI;GAAC;GAAO;GAAO;EAAS,CAAC;EAE5G,OAAO,oBAAC,uBAAD;GAA8B;GAAQ;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EAEnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}