npm - @videojs/react - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.32 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1563) hide show

package/dist/default/media/hlsjs-video/media.js CHANGED Viewed

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

package/dist/default/media/hlsjs-video/media.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hlsjs-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsJsVideoProps\n extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps~~>,\n~~ Partial<HlsMediaProps> {\n children?: ReactNode;\n}\n\nexport const HlsJsVideo = forwardRef<HTMLVideoElement, HlsJsVideoProps>(function HlsJsVideo(\n { children, ...props },\n ref\n) {\n const media = useMediaInstance(HlsJsMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n {children}\n </video>\n );\n});\n\nexport namespace HlsJsVideo {\n export type Props = HlsJsVideoProps;\n}\n"],"mappings":";;;;;;;;;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,~~oBAGN~~;~~EAClC~~;CACI,CAAA;AAEX,CAAC"}
1	+ {"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hlsjs-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { HlsJsMedia, hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\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 HlsJsVideoProps\n extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>, Partial<HlsMediaProps> {\n children?: ReactNode;\n}\n\nexport const HlsJsVideo = forwardRef<HTMLVideoElement, HlsJsVideoProps>(function HlsJsVideo(\n { children, ...props },\n ref\n) {\n const media = useMediaInstance(HlsJsMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n {children}\n </video>\n );\n});\n\nexport namespace HlsJsVideo {\n export type Props = HlsJsVideoProps;\n}\n"],"mappings":";;;;;;;;;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,oBAAoB;CAEjE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/mux-audio/hls-js.js CHANGED Viewed

@@ -14,9 +14,12 @@ const muxAudioDefaultProps = {
 };
 const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
 	const media = useMediaInstance(MuxMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxAudioDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

package/dist/default/media/mux-audio/hls-js.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-audio/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\n// `source` comes from `MuxMediaProps` only: `MuxSource` extends `HlsSource` with\n// Mux identity fields, so the narrower type has to win.\nexport interface MuxAudioProps\n extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsMediaProps, 'source'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxAudioDefaultProps: Omit<HlsMediaProps, 'source'> & MuxMediaProps = {\n ...hlsMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n const media = useMediaInstance(MuxMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);\n\n return (\n <audio ref={composedRef} {...htmlProps}>\n {children}\n </audio>\n );\n});\n\nexport namespace MuxAudio {\n export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;~~AAsBA~~,MAAM,uBAAsE;CAC1E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;~~CAKvC~~,~~OACE~~,~~oBAAC~~,~~SAAD~~;~~EAAO~~,~~KAJW~~,~~gBADF~~,~~eAAe~~,~~KACW~~,GAAG~~,GAIvB~~;~~EAAG~~,~~GAHT~~,aAAa,OAAO,OAAO,~~oBAGN~~;~~EAClC~~;CACI,CAAA;AAEX,CAAC"}
1	+ {"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-audio/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\nimport type { AudioHTMLAttributes, ReactNode } 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\n// `source` comes from `MuxMediaProps` only: `MuxSource` extends `HlsSource` with\n// Mux identity fields, so the narrower type has to win.\nexport interface MuxAudioProps\n extends\n Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsMediaProps, 'source'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxAudioDefaultProps: Omit<HlsMediaProps, 'source'> & MuxMediaProps = {\n ...hlsMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n const media = useMediaInstance(MuxMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);\n\n return (\n <audio ref={composedRef} {...htmlProps}>\n {children}\n </audio>\n );\n});\n\nexport namespace MuxAudio {\n export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,uBAAsE;CAC1E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;CACvC,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,oBAAoB;CAEjE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/mux-audio/spf.js CHANGED Viewed

@@ -14,9 +14,12 @@ const muxAudioDefaultProps = {
 };
 const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
 	const media = useMediaInstance(MuxAudioMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxAudioDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

package/dist/default/media/mux-audio/spf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-audio/spf.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { hlsAudioMediaDefaultProps } from '@videojs/spf/hls-audio';\nimport type { MuxMediaProps } from '@videojs/spf/mux-audio';\nimport { MuxAudioMedia, muxMediaDefaultProps } from '@videojs/spf/mux-audio';\nimport type { AudioHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\n// `src` and `source` come from `MuxMediaProps`: the Mux Media owns both, and its\n// `source` is the structured Mux one rather than the generic engine's.\nexport interface MuxAudioProps\n extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsAudioMediaProps, 'src'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxAudioDefaultProps: Omit<HlsAudioMediaProps, 'src'> & MuxMediaProps = {\n ...hlsAudioMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n const media = useMediaInstance(MuxAudioMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);\n\n return (\n <audio ref={composedRef} {...htmlProps}>\n {children}\n </audio>\n );\n});\n\nexport namespace MuxAudio {\n export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;~~AAsBA~~,MAAM,uBAAwE;CAC5E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;~~CAK5C~~,~~OACE~~,~~oBAAC~~,~~SAAD~~;~~EAAO~~,~~KAJW~~,~~gBADF~~,~~eAAe~~,~~KACW~~,GAAG~~,GAIvB~~;~~EAAG~~,~~GAHT~~,aAAa,OAAO,OAAO,~~oBAGN~~;~~EAClC~~;CACI,CAAA;AAEX,CAAC"}
1	+ {"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-audio/spf.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { hlsAudioMediaDefaultProps } from '@videojs/spf/hls-audio';\nimport type { MuxMediaProps } from '@videojs/spf/mux-audio';\nimport { MuxAudioMedia, muxMediaDefaultProps } from '@videojs/spf/mux-audio';\nimport type { AudioHTMLAttributes, ReactNode } 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\n// `src` and `source` come from `MuxMediaProps`: the Mux Media owns both, and its\n// `source` is the structured Mux one rather than the generic engine's.\nexport interface MuxAudioProps\n extends\n Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsAudioMediaProps, 'src'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxAudioDefaultProps: Omit<HlsAudioMediaProps, 'src'> & MuxMediaProps = {\n ...hlsAudioMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n const media = useMediaInstance(MuxAudioMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);\n\n return (\n <audio ref={composedRef} {...htmlProps}>\n {children}\n </audio>\n );\n});\n\nexport namespace MuxAudio {\n export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,uBAAwE;CAC5E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAC5C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,oBAAoB;CAEjE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/mux-data/mux-data.js CHANGED Viewed

@@ -4,28 +4,24 @@ import { useSyncProps } from "../../utils/use-sync-props.js";
 import { MuxData, muxDataDefaultProps } from "@videojs/media/dom/mux";
 //#region src/media/mux-data/mux-data.tsx
 /**
-* Adds [Mux Data](https://www.mux.com/data) monitoring to the surrounding
-* player's media.
+* Adds [Mux Data](https://www.mux.com/data) monitoring to the surrounding player's media.
 *
-* Renders nothing — place it inside the Player as a sibling of the
-* media component (e.g. `<MuxVideo />`) and it registers a `MuxData` media
-* component with the active media.
+* Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<MuxVideo />`) and it
+* registers a `MuxData` media component with the active media.
 *
-* Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID
-* as its `video_id`, which Mux attributes to the owning environment. Set
-* `envKey` to monitor sources Mux doesn't host.
+* Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID as its `video_id`, which Mux attributes
+* to the owning environment. Set `envKey` to monitor sources Mux doesn't host.
 *
-* Any media component works. When the media plays through an hls.js or dash.js
-* engine, that engine is handed to the Mux Data SDK so the view also carries
-* stream-level detail such as rendition switches and request timing.
+* Any media component works. When the media plays through an hls.js or dash.js engine, that engine is handed to the Mux
+* Data SDK so the view also carries stream-level detail such as rendition switches and request timing.
 *
 * @example
-* ```tsx
-* <Player>
-*   <MuxVideo source={{ playbackId: 'abc123' }} />
-*   <MuxData playerSoftwareName="mux-video" />
-* </Player>
-* ```
+*   ```tsx
+*   <Player>
+*     <MuxVideo source={{ playbackId: 'abc123' }} />
+*     <MuxData playerSoftwareName="mux-video" />
+*   </Player>;
+*   ```;
 */
 function MuxData$1(props) {
 	const component = useMediaComponent(MuxData);

package/dist/default/media/mux-data/mux-data.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mux-data.js","names":["MuxData","MuxDataComponent"],"sources":["../../../../src/media/mux-data/mux-data.tsx"],"sourcesContent":["'use client';\n\nimport type { MuxDataProps as MuxDataComponentProps } from '@videojs/media/dom/mux';\nimport { MuxData as MuxDataComponent, muxDataDefaultProps } from '@videojs/media/dom/mux';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type MuxDataProps = Partial<MuxDataComponentProps>;\n\n/*\n Adds [Mux Data](https://www.mux.com/data) monitoring to the surrounding\n * player's media.\n \n Renders nothing — place it inside the Player as a sibling of the\n * media component (e.g. `<MuxVideo />`) and it registers a `MuxData` media\n * component with the active media.\n \n Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID\n * as its `video_id`, which Mux attributes to the owning environment. Set\n * `envKey` to monitor sources Mux doesn't host.\n \n Any media component works. When the media plays through an hls.js or dash.js\n * engine, that engine is handed to the Mux Data SDK so the view also carries\n * stream-level detail such as rendition switches and request timing.\n \n @example\n * ```tsx\n * <Player>\n * <MuxVideo source={{ playbackId: 'abc123' }} />\n * <MuxData playerSoftwareName=\"mux-video\" />\n * </Player>\n * ~~```\~~n */\nexport function MuxData(props: MuxDataProps): ReactNode {\n const component = useMediaComponent(MuxDataComponent);\n const { MuxDataSdk, ...rest } = props;\n\n // `useSyncProps` treats an `undefined` prop as \"reset to the default\", but\n // `MuxDataSdk={undefined}` is how consumers disable monitoring. Sync it here\n // instead: passing the prop wins even when its value is `undefined`, and only\n // omitting it falls back to the default SDK.\n const sdk = 'MuxDataSdk' in props ? MuxDataSdk : muxDataDefaultProps.MuxDataSdk;\n if (component.MuxDataSdk !== sdk) component.MuxDataSdk = sdk;\n\n useSyncProps(component, rest, muxDataDefaultProps);\n\n return null;\n}\n\nexport namespace MuxData {\n export type Props = MuxDataProps;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA~~,SAAgBA,UAAQ,OAAgC;CACtD,MAAM,YAAY,kBAAkBC,OAAgB;CACpD,MAAM,EAAE,YAAY,GAAG,SAAS;CAMhC,MAAM,MAAM,gBAAgB,QAAQ,aAAa,oBAAoB;~~CACrE~~,IAAI,UAAU,eAAe,KAAK,UAAU,aAAa;CAEzD,aAAa,WAAW,MAAM,mBAAmB;CAEjD,OAAO;AACT"}
1	+ {"version":3,"file":"mux-data.js","names":["MuxData","MuxDataComponent"],"sources":["../../../../src/media/mux-data/mux-data.tsx"],"sourcesContent":["'use client';\n\nimport type { MuxDataProps as MuxDataComponentProps } from '@videojs/media/dom/mux';\nimport { MuxData as MuxDataComponent, muxDataDefaultProps } from '@videojs/media/dom/mux';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type MuxDataProps = Partial<MuxDataComponentProps>;\n\n/*\n Adds [Mux Data](https://www.mux.com/data) monitoring to the surrounding player's media.\n \n Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<MuxVideo />`) and it\n * registers a `MuxData` media component with the active media.\n \n Mux-hosted playback needs no `envKey`: the view reports the Mux playback ID as its `video_id`, which Mux attributes\n * to the owning environment. Set `envKey` to monitor sources Mux doesn't host.\n \n Any media component works. When the media plays through an hls.js or dash.js engine, that engine is handed to the Mux\n * Data SDK so the view also carries stream-level detail such as rendition switches and request timing.\n \n @example\n * ```tsx\n * <Player>\n * <MuxVideo source={{ playbackId: 'abc123' }} />\n * <MuxData playerSoftwareName=\"mux-video\" />\n * </Player>;\n * ```;\n */\nexport function MuxData(props: MuxDataProps): ReactNode {\n const component = useMediaComponent(MuxDataComponent);\n const { MuxDataSdk, ...rest } = props;\n\n // `useSyncProps` treats an `undefined` prop as \"reset to the default\", but\n // `MuxDataSdk={undefined}` is how consumers disable monitoring. Sync it here\n // instead: passing the prop wins even when its value is `undefined`, and only\n // omitting it falls back to the default SDK.\n const sdk = 'MuxDataSdk' in props ? MuxDataSdk : muxDataDefaultProps.MuxDataSdk;\n\n if (component.MuxDataSdk !== sdk) component.MuxDataSdk = sdk;\n\n useSyncProps(component, rest, muxDataDefaultProps);\n\n return null;\n}\n\nexport namespace MuxData {\n export type Props = MuxDataProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgBA,UAAQ,OAAgC;CACtD,MAAM,YAAY,kBAAkBC,OAAgB;CACpD,MAAM,EAAE,YAAY,GAAG,SAAS;CAMhC,MAAM,MAAM,gBAAgB,QAAQ,aAAa,oBAAoB;CAErE,IAAI,UAAU,eAAe,KAAK,UAAU,aAAa;CAEzD,aAAa,WAAW,MAAM,mBAAmB;CAEjD,OAAO;AACT"}

package/dist/default/media/mux-video/hls-js.js CHANGED Viewed

@@ -15,9 +15,12 @@ const muxVideoDefaultProps = {
 };
 const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(MuxMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);
 	return /* @__PURE__ */ jsxs("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxVideoDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children: [/* @__PURE__ */ jsx(MuxStoryboard, { media }), children]
 	});
 });

package/dist/default/media/mux-video/hls-js.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-video/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\nimport { MuxStoryboard } from './storyboard';\n\n// `source` comes from `MuxMediaProps` only: `MuxSource` extends `HlsSource` with\n// Mux identity fields, so the narrower type has to win.\nexport interface MuxVideoProps\n extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsMediaProps, 'source'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxVideoDefaultProps: Omit<HlsMediaProps, 'source'> & MuxMediaProps = {\n ...hlsMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n const media = useMediaInstance(MuxMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n <MuxStoryboard media={media} />\n {children}\n </video>\n );\n});\n\nexport namespace MuxVideo {\n export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;~~AAuBA~~,MAAM,uBAAsE;CAC1E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;~~CAKvC~~,~~OACE~~,~~qBAAC~~,~~SAAD~~;~~EAAO~~,~~KAJW~~,~~gBADF~~,~~eAAe~~,~~KACW~~,GAAG~~,GAIvB~~;~~EAAG~~,~~GAHT~~,aAAa,OAAO,OAAO,~~oBAGN~~;~~EAArC~~,UAAA,CACE,oBAAC,eAAD,EAAsB,MAAQ,CAAA,GAC7B,QACI;;AAEX,CAAC"}
1	+ {"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-video/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\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';\nimport { MuxStoryboard } from './storyboard';\n\n// `source` comes from `MuxMediaProps` only: `MuxSource` extends `HlsSource` with\n// Mux identity fields, so the narrower type has to win.\nexport interface MuxVideoProps\n extends\n Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsMediaProps, 'source'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxVideoDefaultProps: Omit<HlsMediaProps, 'source'> & MuxMediaProps = {\n ...hlsMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n const media = useMediaInstance(MuxMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n <MuxStoryboard media={media} />\n {children}\n </video>\n );\n});\n\nexport namespace MuxVideo {\n export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,uBAAsE;CAC1E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;CACvC,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,oBAAoB;CAEjE,OACE,qBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAA7B,UAAA,CACE,oBAAC,eAAD,EAAsB,MAAQ,CAAA,GAC7B,QACI;;AAEX,CAAC"}

package/dist/default/media/mux-video/spf.js CHANGED Viewed

@@ -15,9 +15,12 @@ const muxVideoDefaultProps = {
 };
 const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(MuxVideoMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);
 	return /* @__PURE__ */ jsxs("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxVideoDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children: [/* @__PURE__ */ jsx(MuxStoryboard, { media }), children]
 	});
 });

package/dist/default/media/mux-video/spf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { hlsVideoMediaDefaultProps } from '@videojs/spf/hls-video';\nimport type { MuxMediaProps } from '@videojs/spf/mux-video';\nimport { MuxVideoMedia, muxMediaDefaultProps } from '@videojs/spf/mux-video';\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';\nimport { MuxStoryboard } from './storyboard';\n\n// `src` and `source` come from `MuxMediaProps`: the Mux Media owns both, and its\n// `source` is the structured Mux one rather than the generic engine's.\nexport interface MuxVideoProps\n extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsVideoMediaProps, 'src'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxVideoDefaultProps: Omit<HlsVideoMediaProps, 'src'> & MuxMediaProps = {\n ...hlsVideoMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n const media = useMediaInstance(MuxVideoMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n <MuxStoryboard media={media} />\n {children}\n </video>\n );\n});\n\nexport namespace MuxVideo {\n export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;~~AAuBA~~,MAAM,uBAAwE;CAC5E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;~~CAK5C~~,~~OACE~~,~~qBAAC~~,~~SAAD~~;~~EAAO~~,~~KAJW~~,~~gBADF~~,~~eAAe~~,~~KACW~~,GAAG~~,GAIvB~~;~~EAAG~~,~~GAHT~~,aAAa,OAAO,OAAO,~~oBAGN~~;~~EAArC~~,UAAA,CACE,oBAAC,eAAD,EAAsB,MAAQ,CAAA,GAC7B,QACI;;AAEX,CAAC"}
1	+ {"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { hlsVideoMediaDefaultProps } from '@videojs/spf/hls-video';\nimport type { MuxMediaProps } from '@videojs/spf/mux-video';\nimport { MuxVideoMedia, muxMediaDefaultProps } from '@videojs/spf/mux-video';\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';\nimport { MuxStoryboard } from './storyboard';\n\n// `src` and `source` come from `MuxMediaProps`: the Mux Media owns both, and its\n// `source` is the structured Mux one rather than the generic engine's.\nexport interface MuxVideoProps\n extends\n Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps \| keyof MuxMediaProps>,\n Partial<Omit<HlsVideoMediaProps, 'src'>>,\n Partial<MuxMediaProps> {\n children?: ReactNode;\n}\n\nconst muxVideoDefaultProps: Omit<HlsVideoMediaProps, 'src'> & MuxMediaProps = {\n ...hlsVideoMediaDefaultProps,\n ...muxMediaDefaultProps,\n};\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n const media = useMediaInstance(MuxVideoMedia);\n const attachRef = useAttachMedia(media);\n const composedRef = useComposedRefs(attachRef, ref);\n const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);\n\n return (\n <video ref={composedRef} {...htmlProps}>\n <MuxStoryboard media={media} />\n {children}\n </video>\n );\n});\n\nexport namespace MuxVideo {\n export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,uBAAwE;CAC5E,GAAG;CACH,GAAG;AACL;AAEA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,aAAa;CAC5C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,oBAAoB;CAEjE,OACE,qBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAA7B,UAAA,CACE,oBAAC,eAAD,EAAsB,MAAQ,CAAA,GAC7B,QACI;;AAEX,CAAC"}

package/dist/default/media/mux-video/storyboard.js CHANGED Viewed

@@ -3,10 +3,7 @@ import { MediaStreamTypes } from "@videojs/media";
 import { useCallback, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/media/mux-video/storyboard.tsx
-/**
-* Renders the storyboard track in its own component so media changes don't
-* re-render the whole media component.
-*/
+/** Renders the storyboard track in its own component so media changes don't re-render the whole media component. */
 function MuxStoryboard({ media }) {
 	const subscribe = useCallback((onChange) => {
 		let cancelled = false;

package/dist/default/media/mux-video/storyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"storyboard.js","names":[],"sources":["../../../../src/media/mux-video/storyboard.tsx"],"sourcesContent":["'use client';\n\nimport { type MediaStreamType, MediaStreamTypes } from '@videojs/media';\nimport type { MuxContentData } from '@videojs/media/dom/mux/source';\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/*\n What the storyboard track needs from whichever Mux Media renders it.\n \n Structural on purpose: the hls.js-backed `MuxMedia` and the SPF-backed one\n * satisfy it identically, so this component carries no engine.\n /\nexport interface MuxStoryboardMedia {\n readonly streamType: MediaStreamType \| undefined;\n readonly contentData: MuxContentData;\n addEventListener(type: string, listener: () => void): void;\n removeEventListener(type: string, listener: () => void): void;\n}\n\n~~/\n~~ Renders the storyboard track in its own component so media changes don't\n * re-render the whole media component~~.\n~~ */\nexport function MuxStoryboard({ media }: { media: MuxStoryboardMedia }) {\n const subscribe = useCallback(\n (onChange: () => void) => {\n // `useSyncProps` writes `src` / `source` during render and those setters\n // dispatch `sourcechange` synchronously. Defer (and coalesce) notifications\n // so we never schedule an update while another component is rendering.\n let cancelled = false;\n let scheduled = false;\n const notify = () => {\n if (scheduled) return;\n scheduled = true;\n queueMicrotask(() => {\n scheduled = false;\n if (!cancelled) onChange();\n });\n };\n media.addEventListener('streamtypechange', notify);\n media.addEventListener('sourcechange', notify);\n return () => {\n cancelled = true;\n media.removeEventListener('streamtypechange', notify);\n media.removeEventListener('sourcechange', notify);\n };\n },\n [media]\n );\n\n // The stream type is detected at runtime and live streams have no storyboard.\n // The '' fallback keeps the snapshot a string rather than sometimes undefined.\n const getSnapshot = () => (media.streamType === MediaStreamTypes.LIVE ? '' : (media.contentData.storyboard ?? ''));\n const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n if (!src) return null;\n return <track kind=\"metadata\" label=\"thumbnails\" src={src} default />;\n}\n"],"mappings":"~~;;;;;;;;;AAuBA~~,SAAgB,cAAc,EAAE,SAAwC;CACtE,MAAM,YAAY,aACf,aAAyB;EAIxB,IAAI,YAAY;EAChB,IAAI,YAAY;EAChB,MAAM,eAAe;GACnB,IAAI,WAAW;~~GACf~~,YAAY;GACZ,qBAAqB;IACnB,YAAY;~~IACZ~~,IAAI,CAAC,WAAW,SAAS;GAC3B,CAAC;EACH;~~EACA~~,MAAM,iBAAiB,oBAAoB,MAAM;EACjD,MAAM,iBAAiB,gBAAgB,MAAM;EAC7C,aAAa;GACX,YAAY;GACZ,MAAM,oBAAoB,oBAAoB,MAAM;GACpD,MAAM,oBAAoB,gBAAgB,MAAM;EAClD;CACF,GACA,CAAC,KAAK,CACR;CAIA,MAAM,oBAAqB,MAAM,eAAe,iBAAiB,OAAO,KAAM,MAAM,YAAY,cAAc;CAC9G,MAAM,MAAM,qBAAqB,WAAW,aAAa,WAAW;~~CAEpE~~,IAAI,CAAC,KAAK,OAAO;~~CACjB~~,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAW,OAAM;EAAkB;EAAK,SAAA;CAAS,CAAA;AACtE"}
1	+ {"version":3,"file":"storyboard.js","names":[],"sources":["../../../../src/media/mux-video/storyboard.tsx"],"sourcesContent":["'use client';\n\nimport { type MediaStreamType, MediaStreamTypes } from '@videojs/media';\nimport type { MuxContentData } from '@videojs/media/dom/mux/source';\nimport { useCallback, useSyncExternalStore } from 'react';\n\n/*\n What the storyboard track needs from whichever Mux Media renders it.\n \n Structural on purpose: the hls.js-backed `MuxMedia` and the SPF-backed one satisfy it identically, so this component\n * carries no engine.\n /\nexport interface MuxStoryboardMedia {\n readonly streamType: MediaStreamType \| undefined;\n readonly contentData: MuxContentData;\n addEventListener(type: string, listener: () => void): void;\n removeEventListener(type: string, listener: () => void): void;\n}\n\n/* Renders the storyboard track in its own component so media changes don't re-render the whole media component. */\nexport function MuxStoryboard({ media }: { media: MuxStoryboardMedia }) {\n const subscribe = useCallback(\n (onChange: () => void) => {\n // `useSyncProps` writes `src` / `source` during render and those setters\n // dispatch `sourcechange` synchronously. Defer (and coalesce) notifications\n // so we never schedule an update while another component is rendering.\n let cancelled = false;\n let scheduled = false;\n const notify = () => {\n if (scheduled) return;\n\n scheduled = true;\n queueMicrotask(() => {\n scheduled = false;\n\n if (!cancelled) onChange();\n });\n };\n\n media.addEventListener('streamtypechange', notify);\n media.addEventListener('sourcechange', notify);\n return () => {\n cancelled = true;\n media.removeEventListener('streamtypechange', notify);\n media.removeEventListener('sourcechange', notify);\n };\n },\n [media]\n );\n\n // The stream type is detected at runtime and live streams have no storyboard.\n // The '' fallback keeps the snapshot a string rather than sometimes undefined.\n const getSnapshot = () => (media.streamType === MediaStreamTypes.LIVE ? '' : (media.contentData.storyboard ?? ''));\n const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n if (!src) return null;\n\n return <track kind=\"metadata\" label=\"thumbnails\" src={src} default />;\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,cAAc,EAAE,SAAwC;CACtE,MAAM,YAAY,aACf,aAAyB;EAIxB,IAAI,YAAY;EAChB,IAAI,YAAY;EAChB,MAAM,eAAe;GACnB,IAAI,WAAW;GAEf,YAAY;GACZ,qBAAqB;IACnB,YAAY;IAEZ,IAAI,CAAC,WAAW,SAAS;GAC3B,CAAC;EACH;EAEA,MAAM,iBAAiB,oBAAoB,MAAM;EACjD,MAAM,iBAAiB,gBAAgB,MAAM;EAC7C,aAAa;GACX,YAAY;GACZ,MAAM,oBAAoB,oBAAoB,MAAM;GACpD,MAAM,oBAAoB,gBAAgB,MAAM;EAClD;CACF,GACA,CAAC,KAAK,CACR;CAIA,MAAM,oBAAqB,MAAM,eAAe,iBAAiB,OAAO,KAAM,MAAM,YAAY,cAAc;CAC9G,MAAM,MAAM,qBAAqB,WAAW,aAAa,WAAW;CACpE,IAAI,CAAC,KAAK,OAAO;CAEjB,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAW,OAAM;EAAkB;EAAK,SAAA;CAAS,CAAA;AACtE"}

package/dist/default/media/native-hls-video/media.js CHANGED Viewed

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

package/dist/default/media/native-hls-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/shaka-video/media.js CHANGED Viewed

@@ -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/default/media/shaka-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/spotify-audio/media.js CHANGED Viewed

@@ -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/default/media/spotify-audio/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/tiktok-video/media.js CHANGED Viewed

@@ -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/default/media/tiktok-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/twitch-video/media.js CHANGED Viewed

@@ -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/default/media/twitch-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/video.js CHANGED Viewed

@@ -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/default/media/video.js.map CHANGED Viewed

	@@ -1 +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"}
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\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/default/media/vimeo-video/media.js CHANGED Viewed

@@ -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/default/media/vimeo-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/media/youtube-video/media.js CHANGED Viewed

@@ -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/default/media/youtube-video/media.js.map CHANGED Viewed

	@@ -1 +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"}
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';\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/default/player/container.js CHANGED Viewed

@@ -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/default/player/container.js.map CHANGED Viewed

	@@ -1 +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"}
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/default/player/context.js CHANGED Viewed

@@ -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. */