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

package/dist/dev/media/google-cast/google-cast.js

@@ -6,20 +6,20 @@ import { GoogleCast, googleCastDefaultProps } from "@videojs/media/dom/google-ca
 /**
 * Adds Google Cast support to the surrounding player's media.
 *
-* Renders nothing — place it inside the Player as a sibling of the
-* media component (e.g. `<HlsJsVideo />`) and it registers a `GoogleCast`
-* media component with the active media.
+* Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it
+* registers a `GoogleCast` media component with the active media.
 *
 * @example
-* ```tsx
-* <Player>
-*   <HlsJsVideo src="https://example.com/stream.m3u8" />
-*   <GoogleCast receiver="YOUR_APP_ID" />
-* </Player>
-* ```
+*   ```tsx
+*   <Player>
+*     <HlsJsVideo src="https://example.com/stream.m3u8" />
+*     <GoogleCast receiver="YOUR_APP_ID" />
+*   </Player>;
+*   ```;
 */
 function GoogleCast$1(props) {
-	useSyncProps(useMediaComponent(GoogleCast), props, googleCastDefaultProps);
+	const component = useMediaComponent(GoogleCast);
+	useSyncProps(component, props, googleCastDefaultProps);
 	return null;
 }
 //#endregion

package/dist/dev/media/google-cast/google-cast.js.map

@@ -1 +1 @@
-{"version":3,"file":"google-cast.js","names":["GoogleCast","GoogleCastComponent"],"sources":["../../../../src/media/google-cast/google-cast.tsx"],"sourcesContent":["'use client';\n\nimport type { GoogleCastProps as GoogleCastComponentProps } from '@videojs/media/dom/google-cast';\nimport { GoogleCast as GoogleCastComponent, googleCastDefaultProps } from '@videojs/media/dom/google-cast';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type GoogleCastProps = Partial<GoogleCastComponentProps>;\n\n/**\n * Adds Google Cast support to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the\n * media component (e.g. `<HlsJsVideo />`) and it registers a `GoogleCast`\n * media component with the active media.\n *\n * @example\n * ```tsx\n * <Player>\n *   <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *   <GoogleCast receiver=\"YOUR_APP_ID\" />\n * </Player>\n * ```\n */\nexport function GoogleCast(props: GoogleCastProps): ReactNode {\n  const component = useMediaComponent(GoogleCastComponent);\n\n  useSyncProps(component, props, googleCastDefaultProps);\n\n  return null;\n}\n\nexport namespace GoogleCast {\n  export type Props = GoogleCastProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,SAAgBA,aAAW,OAAmC;CAG5D,aAFkB,kBAAkBC,UAEf,GAAG,OAAO,sBAAsB;CAErD,OAAO;AACT"}
+{"version":3,"file":"google-cast.js","names":["GoogleCast","GoogleCastComponent"],"sources":["../../../../src/media/google-cast/google-cast.tsx"],"sourcesContent":["'use client';\n\nimport type { GoogleCastProps as GoogleCastComponentProps } from '@videojs/media/dom/google-cast';\nimport { GoogleCast as GoogleCastComponent, googleCastDefaultProps } from '@videojs/media/dom/google-cast';\nimport type { ReactNode } from 'react';\n\nimport { useMediaComponent } from '../../utils/use-media-component';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport type GoogleCastProps = Partial<GoogleCastComponentProps>;\n\n/**\n * Adds Google Cast support to the surrounding player's media.\n *\n * Renders nothing — place it inside the Player as a sibling of the media component (e.g. `<HlsJsVideo />`) and it\n * registers a `GoogleCast` media component with the active media.\n *\n * @example\n *   ```tsx\n *   <Player>\n *     <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *     <GoogleCast receiver=\"YOUR_APP_ID\" />\n *   </Player>;\n *   ```;\n */\nexport function GoogleCast(props: GoogleCastProps): ReactNode {\n  const component = useMediaComponent(GoogleCastComponent);\n\n  useSyncProps(component, props, googleCastDefaultProps);\n\n  return null;\n}\n\nexport namespace GoogleCast {\n  export type Props = GoogleCastProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,SAAgBA,aAAW,OAAmC;CAC5D,MAAM,YAAY,kBAAkBC,UAAmB;CAEvD,aAAa,WAAW,OAAO,sBAAsB;CAErD,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"mappings":";;;UAWiB,sBACP,KAAK,oBAAoB,yBAAyB,qBACxD,QAAQ;EACV,WAAW;;cAGA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"mappings":";;;UAYiB,sBACP,KAAK,oBAAoB,yBAAyB,qBAAqB,QAAQ;EACvF,WAAW;;cAGA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}

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

@@ -9,9 +9,12 @@ import { HlsAudioMedia, hlsAudioMediaDefaultProps } from "@videojs/spf/hls-audio
 //#region src/media/hls-audio/media.tsx
 const HlsAudio = forwardRef(function HlsAudio({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsAudioMedia);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);
 	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, hlsAudioMediaDefaultProps),
+		ref: composedRef,
+		...htmlProps,
 		children
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { HlsAudioMedia, hlsAudioMediaDefaultProps } from '@videojs/spf/hls-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\nexport interface HlsAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps>,\n    Partial<HlsAudioMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsAudio = forwardRef<HTMLAudioElement, HlsAudioProps>(function HlsAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsAudioMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace HlsAudio {\n  export type Props = HlsAudioProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,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,yBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsAudioMediaProps } from '@videojs/spf/hls-audio';\nimport { HlsAudioMedia, hlsAudioMediaDefaultProps } from '@videojs/spf/hls-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\nexport interface HlsAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsAudioMediaProps>, Partial<HlsAudioMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsAudio = forwardRef<HTMLAudioElement, HlsAudioProps>(function HlsAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsAudioMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsAudioMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace HlsAudio {\n  export type Props = HlsAudioProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,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,yBAAyB;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

@@ -3,29 +3,23 @@ import { HlsBackgroundVideoMediaProps } from "@videojs/spf/hls-background-video"
 //#region src/media/hls-background-video/media.d.ts
 interface HlsBackgroundVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsBackgroundVideoMediaProps>, Partial<HlsBackgroundVideoMediaProps> {}
 /**
- * A muted, looping, chrome-less video over the SPF background-video engine — the
- * React counterpart to `<hls-background-video>`, and the replacement for the
- * standalone `mux-background-video` package's component.
+ * A muted, looping, chrome-less video over the SPF background-video engine — the React counterpart to
+ * `<hls-background-video>`, and the replacement for the standalone `mux-background-video` package's component.
  *
- * `src` is an HLS URL and the whole surface. Capping which rendition is fetched
- * is a param on that URL (`?max_resolution=720p` on a Mux stream, for one) rather
- * than a prop, which keeps the renditions it excludes out of the manifest instead
- * of merely unpicked.
+ * `src` is an HLS URL and the whole surface. Capping which rendition is fetched is a param on that URL
+ * (`?max_resolution=720p` on a Mux stream, for one) rather than a prop, which keeps the renditions it excludes out of
+ * the manifest instead of merely unpicked.
  *
- * There is no structured Mux `source`: playback-ID identity, poster, and
- * storyboard belong to `MuxVideo`, since none of them mean anything without
- * controls to hang them on.
+ * There is no structured Mux `source`: playback-ID identity, poster, and storyboard belong to `MuxVideo`, since none of
+ * them mean anything without controls to hang them on.
  *
- * `onError` fires for an unplayable source, which it could not do on its own:
- * nothing about one reaches the media element, so the `<video>`'s own `error`
- * stays null at `readyState 0`. The engine reports the condition, the Media
- * promotes the fatal one, and this component re-fires it on the `<video>` — where
- * a handler already listening for a failed source receives it. Which condition it
- * was is on the console and `engine.state.errors`; the handler gets "this source
- * won't play", which is the decision a background video actually has to make.
+ * `onError` fires for an unplayable source, which it could not do on its own: nothing about one reaches the media
+ * element, so the `<video>`'s own `error` stays null at `readyState 0`. The engine reports the condition, the Media
+ * promotes the fatal one, and this component re-fires it on the `<video>` — where a handler already listening for a
+ * failed source receives it. Which condition it was is on the console and `engine.state.errors`; the handler gets "this
+ * source won't play", which is the decision a background video actually has to make.
  *
- * `MuxBackgroundVideo` is this same component under the name the package it
- * replaces used — an alias, not a variant.
+ * `MuxBackgroundVideo` is this same component under the name the package it replaces used — an alias, not a variant.
  */
 declare const HlsBackgroundVideo: import("react").ForwardRefExoticComponent<HlsBackgroundVideoProps & import("react").RefAttributes<HTMLVideoElement>>;
 declare namespace HlsBackgroundVideo {

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"mappings":";;;UAgBiB,gCACP,KAAK,oBAAoB,yBAAyB,+BACxD,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BC,oCAAkB,0BAAA,0CAAA,cAAA;kBA6Cd;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"mappings":";;;UAiBiB,gCAEb,KAAK,oBAAoB,yBAAyB,+BAClD,QAAQ;;;;;;;;;;;;;;;;;;;;cAqBC,oCAAkB,0BAAA,0CAAA,cAAA;kBA8Cd;OACH,QAAQ"}

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

@@ -8,34 +8,29 @@ import { jsx } from "react/jsx-runtime";
 import { HlsBackgroundVideoMedia, hlsBackgroundVideoMediaDefaultProps } from "@videojs/spf/hls-background-video";
 //#region src/media/hls-background-video/media.tsx
 /**
-* A muted, looping, chrome-less video over the SPF background-video engine — the
-* React counterpart to `<hls-background-video>`, and the replacement for the
-* standalone `mux-background-video` package's component.
+* A muted, looping, chrome-less video over the SPF background-video engine — the React counterpart to
+* `<hls-background-video>`, and the replacement for the standalone `mux-background-video` package's component.
 *
-* `src` is an HLS URL and the whole surface. Capping which rendition is fetched
-* is a param on that URL (`?max_resolution=720p` on a Mux stream, for one) rather
-* than a prop, which keeps the renditions it excludes out of the manifest instead
-* of merely unpicked.
+* `src` is an HLS URL and the whole surface. Capping which rendition is fetched is a param on that URL
+* (`?max_resolution=720p` on a Mux stream, for one) rather than a prop, which keeps the renditions it excludes out of
+* the manifest instead of merely unpicked.
 *
-* There is no structured Mux `source`: playback-ID identity, poster, and
-* storyboard belong to `MuxVideo`, since none of them mean anything without
-* controls to hang them on.
+* There is no structured Mux `source`: playback-ID identity, poster, and storyboard belong to `MuxVideo`, since none of
+* them mean anything without controls to hang them on.
 *
-* `onError` fires for an unplayable source, which it could not do on its own:
-* nothing about one reaches the media element, so the `<video>`'s own `error`
-* stays null at `readyState 0`. The engine reports the condition, the Media
-* promotes the fatal one, and this component re-fires it on the `<video>` — where
-* a handler already listening for a failed source receives it. Which condition it
-* was is on the console and `engine.state.errors`; the handler gets "this source
-* won't play", which is the decision a background video actually has to make.
+* `onError` fires for an unplayable source, which it could not do on its own: nothing about one reaches the media
+* element, so the `<video>`'s own `error` stays null at `readyState 0`. The engine reports the condition, the Media
+* promotes the fatal one, and this component re-fires it on the `<video>` — where a handler already listening for a
+* failed source receives it. Which condition it was is on the console and `engine.state.errors`; the handler gets "this
+* source won't play", which is the decision a background video actually has to make.
 *
-* `MuxBackgroundVideo` is this same component under the name the package it
-* replaces used — an alias, not a variant.
+* `MuxBackgroundVideo` is this same component under the name the package it replaces used — an alias, not a variant.
 */
 const HlsBackgroundVideo = forwardRef(function HlsBackgroundVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(HlsBackgroundVideoMedia);
 	const videoRef = useRef(null);
-	const composedRef = useComposedRefs(useAttachMedia(media), videoRef, ref);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, videoRef, ref);
 	const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);
 	useEffect(() => {
 		const forward = () => videoRef.current?.dispatchEvent(new Event("error"));

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport {\n  HlsBackgroundVideoMedia,\n  type HlsBackgroundVideoMediaProps,\n  hlsBackgroundVideoMediaDefaultProps,\n} from '@videojs/spf/hls-background-video';\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } 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` is the only prop the Media owns, taken from the adapter rather than\n// restated here so the two can't disagree about what the surface is.\nexport interface HlsBackgroundVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsBackgroundVideoMediaProps>,\n    Partial<HlsBackgroundVideoMediaProps> {}\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine — the\n * React counterpart to `<hls-background-video>`, and the replacement for the\n * standalone `mux-background-video` package's component.\n *\n * `src` is an HLS URL and the whole surface. Capping which rendition is fetched\n * is a param on that URL (`?max_resolution=720p` on a Mux stream, for one) rather\n * than a prop, which keeps the renditions it excludes out of the manifest instead\n * of merely unpicked.\n *\n * There is no structured Mux `source`: playback-ID identity, poster, and\n * storyboard belong to `MuxVideo`, since none of them mean anything without\n * controls to hang them on.\n *\n * `onError` fires for an unplayable source, which it could not do on its own:\n * nothing about one reaches the media element, so the `<video>`'s own `error`\n * stays null at `readyState 0`. The engine reports the condition, the Media\n * promotes the fatal one, and this component re-fires it on the `<video>` — where\n * a handler already listening for a failed source receives it. Which condition it\n * was is on the console and `engine.state.errors`; the handler gets \"this source\n * won't play\", which is the decision a background video actually has to make.\n *\n * `MuxBackgroundVideo` is this same component under the name the package it\n * replaces used — an alias, not a variant.\n */\nexport const HlsBackgroundVideo = forwardRef<HTMLVideoElement, HlsBackgroundVideoProps>(function HlsBackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsBackgroundVideoMedia);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, videoRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);\n\n  // Re-fired on the element rather than handed to `onError` directly, so React's\n  // own event plumbing delivers it: the handler gets the synthetic event it is\n  // typed for, and anything else listening on the node — the consumer's own\n  // `addEventListener`, a testing-library assertion — sees the same failure.\n  useEffect(() => {\n    const forward = () => videoRef.current?.dispatchEvent(new Event('error'));\n    media.addEventListener('error', forward);\n    return () => media.removeEventListener('error', forward);\n  }, [media]);\n\n  return (\n    // The same set `<hls-background-video>` forces onto its inner video, so the\n    // two platforms present the same surface: silent looping playback with no\n    // affordance a UA could hang chrome on — AirPlay, Cast, and picture-in-picture\n    // all being things a background video has nowhere to put.\n    //\n    // Applied after the spread rather than before it, unlike the generic\n    // `BackgroundVideo`: they're what the component is for, and attaching the\n    // Media re-applies its own anyway, so honoring `muted={false}` would only\n    // look like it worked.\n    <video\n      {...htmlProps}\n      ref={composedRef}\n      muted\n      autoPlay\n      loop\n      playsInline\n      disableRemotePlayback\n      disablePictureInPicture\n    >\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsBackgroundVideo {\n  export type Props = HlsBackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CACtD,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,cAAc,gBADF,eAAe,KACW,GAAG,UAAU,GAAG;CAC5D,MAAM,YAAY,aAAa,OAAO,OAAO,mCAAmC;CAMhF,gBAAgB;EACd,MAAM,gBAAgB,SAAS,SAAS,cAAc,IAAI,MAAM,OAAO,CAAC;EACxE,MAAM,iBAAiB,SAAS,OAAO;EACvC,aAAa,MAAM,oBAAoB,SAAS,OAAO;CACzD,GAAG,CAAC,KAAK,CAAC;CAEV,OAUE,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAA;EACA,UAAA;EACA,MAAA;EACA,aAAA;EACA,uBAAA;EACA,yBAAA;EAEC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-background-video/media.tsx"],"sourcesContent":["'use client';\n\nimport {\n  HlsBackgroundVideoMedia,\n  type HlsBackgroundVideoMediaProps,\n  hlsBackgroundVideoMediaDefaultProps,\n} from '@videojs/spf/hls-background-video';\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useRef } 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` is the only prop the Media owns, taken from the adapter rather than\n// restated here so the two can't disagree about what the surface is.\nexport interface HlsBackgroundVideoProps\n  extends\n    Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsBackgroundVideoMediaProps>,\n    Partial<HlsBackgroundVideoMediaProps> {}\n\n/**\n * A muted, looping, chrome-less video over the SPF background-video engine — the React counterpart to\n * `<hls-background-video>`, and the replacement for the standalone `mux-background-video` package's component.\n *\n * `src` is an HLS URL and the whole surface. Capping which rendition is fetched is a param on that URL\n * (`?max_resolution=720p` on a Mux stream, for one) rather than a prop, which keeps the renditions it excludes out of\n * the manifest instead of merely unpicked.\n *\n * There is no structured Mux `source`: playback-ID identity, poster, and storyboard belong to `MuxVideo`, since none of\n * them mean anything without controls to hang them on.\n *\n * `onError` fires for an unplayable source, which it could not do on its own: nothing about one reaches the media\n * element, so the `<video>`'s own `error` stays null at `readyState 0`. The engine reports the condition, the Media\n * promotes the fatal one, and this component re-fires it on the `<video>` — where a handler already listening for a\n * failed source receives it. Which condition it was is on the console and `engine.state.errors`; the handler gets \"this\n * source won't play\", which is the decision a background video actually has to make.\n *\n * `MuxBackgroundVideo` is this same component under the name the package it replaces used — an alias, not a variant.\n */\nexport const HlsBackgroundVideo = forwardRef<HTMLVideoElement, HlsBackgroundVideoProps>(function HlsBackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsBackgroundVideoMedia);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, videoRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);\n\n  // Re-fired on the element rather than handed to `onError` directly, so React's\n  // own event plumbing delivers it: the handler gets the synthetic event it is\n  // typed for, and anything else listening on the node — the consumer's own\n  // `addEventListener`, a testing-library assertion — sees the same failure.\n  useEffect(() => {\n    const forward = () => videoRef.current?.dispatchEvent(new Event('error'));\n\n    media.addEventListener('error', forward);\n    return () => media.removeEventListener('error', forward);\n  }, [media]);\n\n  return (\n    // The same set `<hls-background-video>` forces onto its inner video, so the\n    // two platforms present the same surface: silent looping playback with no\n    // affordance a UA could hang chrome on — AirPlay, Cast, and picture-in-picture\n    // all being things a background video has nowhere to put.\n    //\n    // Applied after the spread rather than before it, unlike the generic\n    // `BackgroundVideo`: they're what the component is for, and attaching the\n    // Media re-applies its own anyway, so honoring `muted={false}` would only\n    // look like it worked.\n    <video\n      {...htmlProps}\n      ref={composedRef}\n      muted\n      autoPlay\n      loop\n      playsInline\n      disableRemotePlayback\n      disablePictureInPicture\n    >\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsBackgroundVideo {\n  export type Props = HlsBackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CACtD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,UAAU,GAAG;CAC5D,MAAM,YAAY,aAAa,OAAO,OAAO,mCAAmC;CAMhF,gBAAgB;EACd,MAAM,gBAAgB,SAAS,SAAS,cAAc,IAAI,MAAM,OAAO,CAAC;EAExE,MAAM,iBAAiB,SAAS,OAAO;EACvC,aAAa,MAAM,oBAAoB,SAAS,OAAO;CACzD,GAAG,CAAC,KAAK,CAAC;CAEV,OAUE,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAA;EACA,UAAA;EACA,MAAA;EACA,aAAA;EACA,uBAAA;EACA,yBAAA;EAEC;CACI,CAAA;AAEX,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"mappings":";;;UAWiB,sBACP,KAAK,oBAAoB,yBAAyB,qBACxD,QAAQ;EACV,WAAW;;cAGA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"mappings":";;;UAYiB,sBACP,KAAK,oBAAoB,yBAAyB,qBAAqB,QAAQ;EACvF,WAAW;;cAGA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { HlsVideoMedia, hlsVideoMediaDefaultProps } from '@videojs/spf/hls-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';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps>,\n    Partial<HlsVideoMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsVideoMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsVideoMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,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,yBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsVideoMediaProps } from '@videojs/spf/hls-video';\nimport { HlsVideoMedia, hlsVideoMediaDefaultProps } from '@videojs/spf/hls-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';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoMediaProps>, Partial<HlsVideoMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsVideoMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsVideoMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,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,yBAAyB;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

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

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

@@ -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/dev/media/hlsjs-video/media.js.map

@@ -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"}
+{"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/dev/media/mux-audio/hls-js.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hls-js.d.ts","names":[],"sources":["../../../../src/media/mux-audio/hls-js.tsx"],"mappings":";;;;UAeiB,sBACP,KAAK,oBAAoB,yBAAyB,sBAAsB,gBAC9E,QAAQ,KAAK,2BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}
+{"version":3,"file":"hls-js.d.ts","names":[],"sources":["../../../../src/media/mux-audio/hls-js.tsx"],"mappings":";;;;UAgBiB,sBAEb,KAAK,oBAAoB,yBAAyB,sBAAsB,gBACxE,QAAQ,KAAK,2BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}

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

@@ -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/dev/media/mux-audio/hls-js.js.map

@@ -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"}
+{"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/dev/media/mux-audio/spf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spf.d.ts","names":[],"sources":["../../../../src/media/mux-audio/spf.tsx"],"mappings":";;;;UAeiB,sBACP,KAAK,oBAAoB,yBAAyB,2BAA2B,gBACnF,QAAQ,KAAK,6BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}
+{"version":3,"file":"spf.d.ts","names":[],"sources":["../../../../src/media/mux-audio/spf.tsx"],"mappings":";;;;UAgBiB,sBAEb,KAAK,oBAAoB,yBAAyB,2BAA2B,gBAC7E,QAAQ,KAAK,6BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAaJ;OACH,QAAQ"}

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

@@ -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/dev/media/mux-audio/spf.js.map

@@ -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"}
+{"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/dev/media/mux-data/mux-data.d.ts

@@ -3,28 +3,24 @@ import { MuxDataProps } from "@videojs/media/dom/mux";
 //#region src/media/mux-data/mux-data.d.ts
 type MuxDataProps$1 = Partial<MuxDataProps>;
 /**
- * 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>;
+ *   ```;
  */
 declare function MuxData$1(props: MuxDataProps$1): ReactNode;
 declare namespace MuxData$1 {

package/dist/dev/media/mux-data/mux-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mux-data.d.ts","names":[],"sources":["../../../../src/media/mux-data/mux-data.tsx"],"mappings":";;;KASY,iBAAe,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;iBA0BnB,UAAQ,OAAO,iBAAe;kBAgB7B;OACH,QAAQ"}
+{"version":3,"file":"mux-data.d.ts","names":[],"sources":["../../../../src/media/mux-data/mux-data.tsx"],"mappings":";;;KASY,iBAAe,QAAQ;;;;;;;;;;;;;;;;;;;;;iBAsBnB,UAAQ,OAAO,iBAAe;kBAiB7B;OACH,QAAQ"}

package/dist/dev/media/mux-data/mux-data.js

@@ -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/dev/media/mux-data/mux-data.js.map

@@ -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"}
+{"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/dev/media/mux-video/hls-js.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hls-js.d.ts","names":[],"sources":["../../../../src/media/mux-video/hls-js.tsx"],"mappings":";;;;UAgBiB,sBACP,KAAK,oBAAoB,yBAAyB,sBAAsB,gBAC9E,QAAQ,KAAK,2BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAcJ;OACH,QAAQ"}
+{"version":3,"file":"hls-js.d.ts","names":[],"sources":["../../../../src/media/mux-video/hls-js.tsx"],"mappings":";;;;UAiBiB,sBAEb,KAAK,oBAAoB,yBAAyB,sBAAsB,gBACxE,QAAQ,KAAK,2BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAcJ;OACH,QAAQ"}

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

@@ -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/dev/media/mux-video/hls-js.js.map

@@ -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"}
+{"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/dev/media/mux-video/spf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spf.d.ts","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"mappings":";;;;UAgBiB,sBACP,KAAK,oBAAoB,yBAAyB,2BAA2B,gBACnF,QAAQ,KAAK,6BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAcJ;OACH,QAAQ"}
+{"version":3,"file":"spf.d.ts","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"mappings":";;;;UAiBiB,sBAEb,KAAK,oBAAoB,yBAAyB,2BAA2B,gBAC7E,QAAQ,KAAK,6BACb,QAAQ;EACV,WAAW;;cAQA,0BAAQ,0BAAA,gCAAA,cAAA;kBAcJ;OACH,QAAQ"}

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

@@ -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/dev/media/mux-video/spf.js.map

@@ -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"}
+{"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/dev/media/mux-video/storyboard.js

@@ -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/dev/media/mux-video/storyboard.js.map

@@ -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"}
+{"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/dev/media/native-hls-video/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/native-hls-video/media.tsx"],"mappings":";;;UAWiB,4BACP,KAAK,oBAAoB,yBAAyB,sBACxD,QAAQ;EACV,WAAW;;cAGA,gCAAc,0BAAA,sCAAA,cAAA;kBAgBV;OACH,QAAQ"}
+{"version":3,"file":"media.d.ts","names":[],"sources":["../../../../src/media/native-hls-video/media.tsx"],"mappings":";;;UAYiB,4BACP,KAAK,oBAAoB,yBAAyB,sBAAsB,QAAQ;EACxF,WAAW;;cAGA,gCAAc,0BAAA,sCAAA,cAAA;kBAgBV;OACH,QAAQ"}

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

@@ -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
 	});
 });