@videojs/react 10.0.0-beta.8 → 10.0.0-rc.1

package/dist/default/media/background-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/background-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaAttach } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaAttach();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,eAAe;CAEhC,MAAM,WAAW,aACd,OAAgC;EAC/B,WAAW,EAAE;CACf,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,cAAc,gBAAgB,KAAK,QAAQ;CAEjD,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,OAAA;EAAM,UAAA;EAAS,MAAA;EAAK,aAAA;EAAY,uBAAA;EAAsB,yBAAA;EAAwB,GAAI;EACxG;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/background-video/index.js

@@ -1,28 +1,2 @@
-'use client';
-
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaAttach } from "../../player/context.js";
-import { forwardRef, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/media/background-video/index.tsx
-const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
-	const setMedia = useMediaAttach();
-	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			setMedia?.(el);
-		}, [setMedia])),
-		muted: true,
-		autoPlay: true,
-		loop: true,
-		playsInline: true,
-		disableRemotePlayback: true,
-		disablePictureInPicture: true,
-		...props,
-		children
-	});
-});
-
-//#endregion
+import { BackgroundVideo } from "./adapter.js";
 export { BackgroundVideo };
-//# sourceMappingURL=index.js.map

package/dist/default/media/cloudflare-video/adapter.js

@@ -0,0 +1,39 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CloudflareAdapter, buildCloudflareIframeSrc } from "@videojs/cloudflare-video";
+//#region src/media/cloudflare-video/adapter.tsx
+const CloudflareVideo = forwardRef(function CloudflareVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(CloudflareAdapter);
+	const props = { ...rawProps };
+	const attachRef = useAttachIframe(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const [initialSrc] = useState(() => buildCloudflareIframeSrc(props.src || props.source?.src || "", {
+		...CloudflareAdapter.defaultProps,
+		...props,
+		defaultMuted: !!(props.defaultMuted || props.muted)
+	}));
+	const iframeProps = useSyncProps(media, props, CloudflareAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "Cloudflare Stream video player",
+		src: initialSrc || void 0,
+		"data-cross-origin-frame": true,
+		allow: "accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture",
+		allowFullScreen: true,
+		frameBorder: 0,
+		width: "100%",
+		height: "100%",
+		referrerPolicy: props.source?.engine?.cloudflare?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { CloudflareVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/cloudflare-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/cloudflare-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildCloudflareIframeSrc, CloudflareAdapter, type CloudflareAdapterProps } from '@videojs/cloudflare-video';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface CloudflareVideoProps extends Partial<CloudflareAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const CloudflareVideo = forwardRef<HTMLIFrameElement, CloudflareVideoProps>(function CloudflareVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(CloudflareAdapter);\n  const props: Partial<CloudflareAdapterProps> & 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    buildCloudflareIframeSrc(props.src || props.source?.src || '', {\n      ...CloudflareAdapter.defaultProps,\n      ...props,\n      // The embed reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Leaving `muted` out of the URL would leave a\n      // muted autoplay blocked by the browser, since the embed comes up audible.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<CloudflareAdapterProps, Record<string, unknown>>(\n    media,\n    props,\n    CloudflareAdapter.defaultProps\n  );\n\n  return (\n    <iframe\n      title=\"Cloudflare Stream 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?.cloudflare?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace CloudflareVideo {\n  export type Props = CloudflareVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,kBAAkB,WAAoD,SAAS,gBAC1F,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,iBAAiB;CAChD,MAAM,QAAmE,EAAE,GAAG,SAAS;CACvF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,yBAAyB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAC7D,GAAG,kBAAkB;EACrB,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAClB,OACA,OACA,kBAAkB,YACpB;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,YAAY;EAClD,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

package/dist/default/media/cloudflare-video/index.js

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

package/dist/default/media/dash-video/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DashAdapter } from "@videojs/dash-video";
+//#region src/media/dash-video/adapter.tsx
+const DashVideo = forwardRef(function DashVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(DashAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, DashAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { DashVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/dash-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/dash-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { DashAdapter, type DashAdapterProps } from '@videojs/dash-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 DashVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashAdapterProps>, Partial<DashAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(DashAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, DashAdapter.defaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,YAAY,YAAY;CAErE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

@@ -1,26 +1,2 @@
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaAttach } from "../../player/context.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { attachMediaElement } from "../../utils/attach-media-element.js";
-import { mediaProps } from "../../utils/media-props.js";
-import { forwardRef, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { DashMedia } from "@videojs/core/dom/media/dash";
-
-//#region src/media/dash-video/index.tsx
-const DashVideo = forwardRef(({ children, ...props }, ref) => {
-	const mediaApi = useMemo(() => new DashMedia(), []);
-	const setMedia = useMediaAttach();
-	useDestroy(mediaApi, () => {
-		setMedia?.(mediaApi);
-	});
-	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
-		...mediaProps(mediaApi, props),
-		children
-	});
-});
-
-//#endregion
-export { DashVideo, DashVideo as default };
-//# sourceMappingURL=index.js.map
+import { DashVideo } from "./adapter.js";
+export { DashVideo };

package/dist/default/media/hls-audio/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsAudioAdapter } from "@videojs/spf/hls-audio";
+//#region src/media/hls-audio/adapter.tsx
+const HlsAudio = forwardRef(function HlsAudio({ children, ...props }, ref) {
+	const media = useMediaInstance(HlsAudioAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, HlsAudioAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { HlsAudio };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/hls-audio/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-audio/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { HlsAudioAdapter, type HlsAudioAdapterProps } from '@videojs/spf/hls-audio';\nimport { type AudioHTMLAttributes, forwardRef, type ReactNode } 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 HlsAudioAdapterProps>, Partial<HlsAudioAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const HlsAudio = forwardRef<HTMLAudioElement, HlsAudioProps>(function HlsAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsAudioAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, HlsAudioAdapter.defaultProps);\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":";;;;;;;;;AAeA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/hls-audio/index.js

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

package/dist/default/media/hls-background-video/adapter.js

@@ -0,0 +1,55 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsBackgroundVideoAdapter } from "@videojs/spf/hls-background-video";
+//#region src/media/hls-background-video/adapter.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.
+*
+* `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.
+*
+* `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.
+*/
+const HlsBackgroundVideo = forwardRef(function HlsBackgroundVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(HlsBackgroundVideoAdapter);
+	const videoRef = useRef(null);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, videoRef, ref);
+	const htmlProps = useSyncProps(media, props, HlsBackgroundVideoAdapter.defaultProps);
+	useEffect(() => {
+		const forward = () => videoRef.current?.dispatchEvent(new Event("error"));
+		media.addEventListener("error", forward);
+		return () => media.removeEventListener("error", forward);
+	}, [media]);
+	return /* @__PURE__ */ jsx("video", {
+		...htmlProps,
+		ref: composedRef,
+		muted: true,
+		autoPlay: true,
+		loop: true,
+		playsInline: true,
+		disableRemotePlayback: true,
+		disablePictureInPicture: true,
+		children
+	});
+});
+//#endregion
+export { HlsBackgroundVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/hls-background-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-background-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { HlsBackgroundVideoAdapter, type HlsBackgroundVideoAdapterProps } from '@videojs/spf/hls-background-video';\nimport { forwardRef, useEffect, useRef, type VideoHTMLAttributes } 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 HlsBackgroundVideoAdapterProps>,\n    Partial<HlsBackgroundVideoAdapterProps> {}\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(HlsBackgroundVideoAdapter);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, videoRef, ref);\n  const htmlProps = useSyncProps(media, props, HlsBackgroundVideoAdapter.defaultProps);\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,yBAAyB;CACxD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,UAAU,GAAG;CAC5D,MAAM,YAAY,aAAa,OAAO,OAAO,0BAA0B,YAAY;CAMnF,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/default/media/hls-background-video/index.js

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

package/dist/default/media/hls-video/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsVideoAdapter } from "@videojs/spf/hls-video";
+//#region src/media/hls-video/adapter.tsx
+const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(HlsVideoAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, HlsVideoAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { HlsVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/hls-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hls-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { HlsVideoAdapter, type HlsVideoAdapterProps } from '@videojs/spf/hls-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 HlsVideoAdapterProps>, Partial<HlsVideoAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsVideoAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, HlsVideoAdapter.defaultProps);\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":";;;;;;;;;AAeA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/hls-video/index.js

@@ -1,26 +1,2 @@
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useMediaAttach } from "../../player/context.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { attachMediaElement } from "../../utils/attach-media-element.js";
-import { mediaProps } from "../../utils/media-props.js";
-import { forwardRef, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { HlsMedia } from "@videojs/core/dom/media/hls";
-
-//#region src/media/hls-video/index.tsx
-const HlsVideo = forwardRef(({ children, ...props }, ref) => {
-	const mediaApi = useMemo(() => new HlsMedia(), []);
-	const setMedia = useMediaAttach();
-	useDestroy(mediaApi, () => {
-		setMedia?.(mediaApi);
-	});
-	return /* @__PURE__ */ jsx("video", {
-		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
-		...mediaProps(mediaApi, props),
-		children
-	});
-});
-
-//#endregion
-export { HlsVideo, HlsVideo as default };
-//# sourceMappingURL=index.js.map
+import { HlsVideo } from "./adapter.js";
+export { HlsVideo };

package/dist/default/media/hlsjs-video/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsJsAdapter } from "@videojs/hlsjs-video";
+//#region src/media/hlsjs-video/adapter.tsx
+const HlsJsVideo = forwardRef(function HlsJsVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(HlsJsAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, HlsJsAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { HlsJsVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/hlsjs-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/hlsjs-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { HlsJsAdapter, type HlsJsAdapterProps } from '@videojs/hlsjs-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 HlsJsAdapterProps>, Partial<HlsJsAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const HlsJsVideo = forwardRef<HTMLVideoElement, HlsJsVideoProps>(function HlsJsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(HlsJsAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, HlsJsAdapter.defaultProps);\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":";;;;;;;;;AAeA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,aAAa,YAAY;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/hlsjs-video/index.js

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

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

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MuxAudioAdapter } from "@videojs/mux-audio";
+//#region src/media/mux-audio/hls-js.tsx
+const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxAudioAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, MuxAudioAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { MuxAudio };
+
+//# sourceMappingURL=hls-js.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-audio/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsJsAdapterProps } from '@videojs/hlsjs-video';\nimport { MuxAudioAdapter, type MuxAudioAdapterProps } from '@videojs/mux-audio';\nimport { type AudioHTMLAttributes, forwardRef, type ReactNode } 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 `MuxAudioAdapterProps` 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 HlsJsAdapterProps | keyof MuxAudioAdapterProps>,\n    Partial<Omit<HlsJsAdapterProps, 'source'>>,\n    Partial<MuxAudioAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxAudioAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, MuxAudioAdapter.defaultProps);\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":";;;;;;;;;AAqBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

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

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

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MuxAudioAdapter } from "@videojs/mux-audio/spf";
+//#region src/media/mux-audio/spf.tsx
+const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxAudioAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, MuxAudioAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { MuxAudio };
+
+//# sourceMappingURL=spf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-audio/spf.tsx"],"sourcesContent":["'use client';\n\nimport { type MuxAdapterProps, MuxAudioAdapter } from '@videojs/mux-audio/spf';\nimport type { HlsAudioAdapterProps } from '@videojs/spf/hls-audio';\nimport { type AudioHTMLAttributes, forwardRef, type ReactNode } 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 `MuxAdapterProps`: 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 HlsAudioAdapterProps | keyof MuxAdapterProps>,\n    Partial<Omit<HlsAudioAdapterProps, 'src'>>,\n    Partial<MuxAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxAudioAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, MuxAudioAdapter.defaultProps);\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":";;;;;;;;;AAqBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

package/dist/default/media/mux-background-video/index.js

@@ -0,0 +1,2 @@
+import { HlsBackgroundVideo } from "../hls-background-video/adapter.js";
+export { HlsBackgroundVideo as MuxBackgroundVideo };

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

@@ -0,0 +1,25 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { MuxStoryboard } from "./storyboard.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MuxVideoAdapter } from "@videojs/mux-video";
+//#region src/media/mux-video/hls-js.tsx
+const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxVideoAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, MuxVideoAdapter.defaultProps);
+	return /* @__PURE__ */ jsxs("video", {
+		ref: composedRef,
+		...htmlProps,
+		children: [/* @__PURE__ */ jsx(MuxStoryboard, { media }), children]
+	});
+});
+//#endregion
+export { MuxVideo };
+
+//# sourceMappingURL=hls-js.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hls-js.js","names":[],"sources":["../../../../src/media/mux-video/hls-js.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsJsAdapterProps } from '@videojs/hlsjs-video';\nimport { MuxVideoAdapter, type MuxVideoAdapterProps } from '@videojs/mux-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 `MuxVideoAdapterProps` 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 HlsJsAdapterProps | keyof MuxVideoAdapterProps>,\n    Partial<Omit<HlsJsAdapterProps, 'source'>>,\n    Partial<MuxVideoAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxVideoAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, MuxVideoAdapter.defaultProps);\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":";;;;;;;;;;AAsBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,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/index.js

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

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

@@ -0,0 +1,25 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { MuxStoryboard } from "./storyboard.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MuxVideoAdapter } from "@videojs/mux-video/spf";
+//#region src/media/mux-video/spf.tsx
+const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxVideoAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, MuxVideoAdapter.defaultProps);
+	return /* @__PURE__ */ jsxs("video", {
+		ref: composedRef,
+		...htmlProps,
+		children: [/* @__PURE__ */ jsx(MuxStoryboard, { media }), children]
+	});
+});
+//#endregion
+export { MuxVideo };
+
+//# sourceMappingURL=spf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"sourcesContent":["'use client';\n\nimport { type MuxAdapterProps, MuxVideoAdapter } from '@videojs/mux-video/spf';\nimport type { HlsVideoAdapterProps } from '@videojs/spf/hls-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 `MuxAdapterProps`: 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 HlsVideoAdapterProps | keyof MuxAdapterProps>,\n    Partial<Omit<HlsVideoAdapterProps, 'src'>>,\n    Partial<MuxAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxVideoAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, MuxVideoAdapter.defaultProps);\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":";;;;;;;;;;AAsBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAEzE,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

@@ -0,0 +1,40 @@
+"use client";
+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. */
+function MuxStoryboard({ media }) {
+	const subscribe = useCallback((onChange) => {
+		let cancelled = false;
+		let scheduled = false;
+		const notify = () => {
+			if (scheduled) return;
+			scheduled = true;
+			queueMicrotask(() => {
+				scheduled = false;
+				if (!cancelled) onChange();
+			});
+		};
+		media.addEventListener("streamtypechange", notify);
+		media.addEventListener("sourcechange", notify);
+		return () => {
+			cancelled = true;
+			media.removeEventListener("streamtypechange", notify);
+			media.removeEventListener("sourcechange", notify);
+		};
+	}, [media]);
+	const getSnapshot = () => media.streamType === MediaStreamTypes.LIVE ? "" : media.contentData.storyboard ?? "";
+	const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	if (!src) return null;
+	return /* @__PURE__ */ jsx("track", {
+		kind: "metadata",
+		label: "thumbnails",
+		src,
+		default: true
+	});
+}
+//#endregion
+export { MuxStoryboard };
+
+//# sourceMappingURL=storyboard.js.map

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

@@ -0,0 +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/mux-video';\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 `MuxVideoAdapter` and the SPF-backed one satisfy it identically, so this\n * 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/** 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/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { NativeHlsAdapter } from "@videojs/native-hls-video";
+//#region src/media/native-hls-video/adapter.tsx
+const NativeHlsVideo = forwardRef(function NativeHlsVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(NativeHlsAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, NativeHlsAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { NativeHlsVideo };
+
+//# sourceMappingURL=adapter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/native-hls-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { NativeHlsAdapter, type NativeHlsAdapterProps } from '@videojs/native-hls-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 NativeHlsAdapterProps>, Partial<NativeHlsAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(NativeHlsAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, NativeHlsAdapter.defaultProps);\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":";;;;;;;;;AAeA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,gBAAgB;CAC/C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,iBAAiB,YAAY;CAE1E,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}

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

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

package/dist/default/media/shaka-video/adapter.js

@@ -0,0 +1,24 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ShakaAdapter } from "@videojs/shaka-video";
+//#region src/media/shaka-video/adapter.tsx
+const ShakaVideo = forwardRef(function ShakaVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(ShakaAdapter);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(attachRef, ref);
+	const htmlProps = useSyncProps(media, props, ShakaAdapter.defaultProps);
+	return /* @__PURE__ */ jsx("video", {
+		ref: composedRef,
+		...htmlProps,
+		children
+	});
+});
+//#endregion
+export { ShakaVideo };
+
+//# sourceMappingURL=adapter.js.map

package/dist/default/media/shaka-video/adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/shaka-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { ShakaAdapter, type ShakaAdapterProps } from '@videojs/shaka-video';\nimport { forwardRef, type ReactNode, type VideoHTMLAttributes } 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 ShakaAdapterProps>, Partial<ShakaAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const ShakaVideo = forwardRef<HTMLVideoElement, ShakaVideoProps>(function ShakaVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(ShakaAdapter);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, ShakaAdapter.defaultProps);\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":";;;;;;;;;AAeA,MAAa,aAAa,WAA8C,SAAS,WAC/E,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,aAAa,YAAY;CAEtE,OACE,oBAAC,SAAD;EAAO,KAAK;EAAa,GAAI;EAC1B;CACI,CAAA;AAEX,CAAC"}