@videojs/react 10.0.0-beta.26 → 10.0.0-beta.28

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

@@ -0,0 +1,38 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CloudflareMedia, buildCloudflareIframeSrc, cloudflareMediaDefaultProps } from "@videojs/media/dom/cloudflare";
+//#region src/media/cloudflare-video/media.tsx
+const CloudflareVideo = forwardRef(function CloudflareVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(CloudflareMedia);
+	const props = { ...rawProps };
+	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const [initialSrc] = useState(() => buildCloudflareIframeSrc(props.src || props.source?.src || "", {
+		...cloudflareMediaDefaultProps,
+		...props,
+		defaultMuted: !!(props.defaultMuted || props.muted)
+	}));
+	const iframeProps = useSyncProps(media, props, cloudflareMediaDefaultProps);
+	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=media.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/cloudflare-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { CloudflareMediaProps } from '@videojs/media/dom/cloudflare';\nimport { buildCloudflareIframeSrc, CloudflareMedia, cloudflareMediaDefaultProps } from '@videojs/media/dom/cloudflare';\nimport type { ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface CloudflareVideoProps extends Partial<CloudflareMediaProps> {\n  children?: ReactNode;\n}\n\nexport const CloudflareVideo = forwardRef<HTMLIFrameElement, CloudflareVideoProps>(function CloudflareVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(CloudflareMedia);\n  const props: Partial<CloudflareMediaProps> & 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      ...cloudflareMediaDefaultProps,\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<CloudflareMediaProps, Record<string, unknown>>(\n    media,\n    props,\n    cloudflareMediaDefaultProps\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":";;;;;;;;;AAeA,MAAa,kBAAkB,WAAoD,SAAS,gBAC1F,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,QAAiE,EAAE,GAAG,SAAS;CAErF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,yBAAyB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAC7D,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAClB,OACA,OACA,2BACF;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/google-cast/google-cast.js

@@ -6,16 +6,16 @@ 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 provider as a sibling of the
+* 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.Provider>
+* <Player>
 *   <HlsJsVideo src="https://example.com/stream.m3u8" />
 *   <GoogleCast receiver="YOUR_APP_ID" />
-* </Player.Provider>
+* </Player>
 * ```
 */
 function GoogleCast$1(props) {

package/dist/default/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 provider 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.Provider>\n *   <HlsJsVideo src=\"https://example.com/stream.m3u8\" />\n *   <GoogleCast receiver=\"YOUR_APP_ID\" />\n * </Player.Provider>\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\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"}

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

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

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

@@ -0,0 +1,21 @@
+"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 { 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);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(useAttachMedia(media), ref),
+		...useSyncProps(media, props, hlsAudioMediaDefaultProps),
+		children
+	});
+});
+//#endregion
+export { HlsAudio };
+
+//# sourceMappingURL=media.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,45 @@
+"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 { 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.
+*
+* `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.
+*
+* `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 composedRef = useComposedRefs(useAttachMedia(media), ref);
+	return /* @__PURE__ */ jsx("video", {
+		...useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps),
+		ref: composedRef,
+		muted: true,
+		autoPlay: true,
+		loop: true,
+		playsInline: true,
+		disableRemotePlayback: true,
+		disablePictureInPicture: true,
+		children
+	});
+});
+//#endregion
+export { HlsBackgroundVideo };
+
+//# sourceMappingURL=media.js.map

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

@@ -0,0 +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 } 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 * `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 attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsBackgroundVideoMediaDefaultProps);\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CAEtD,MAAM,cAAc,gBADF,eAAe,KACW,GAAG,GAAG;CAGlD,OAUE,oBAAC,SAAD;EACE,GAbc,aAAa,OAAO,OAAO,mCAa7B;EACZ,KAAK;EACL,OAAA;EACA,UAAA;EACA,MAAA;EACA,aAAA;EACA,uBAAA;EACA,yBAAA;EAEC;CACI,CAAA;AAEX,CAAC"}

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

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

package/dist/{dev/media/simple-hls-video → default/media/hls-video}/media.js

@@ -5,18 +5,17 @@ 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 { simpleHlsMediaDefaultProps } from "@videojs/spf/hls";
-import { SimpleHlsMedia } from "@videojs/media/dom/simple-hls";
-//#region src/media/simple-hls-video/media.tsx
-const SimpleHlsVideo = forwardRef(function SimpleHlsVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(SimpleHlsMedia);
+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);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, simpleHlsMediaDefaultProps),
+		...useSyncProps(media, props, hlsVideoMediaDefaultProps),
 		children
 	});
 });
 //#endregion
-export { SimpleHlsVideo };
+export { HlsVideo };
 
 //# sourceMappingURL=media.js.map

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

@@ -0,0 +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"}

package/dist/default/media/mux-audio/{media.js → hls-js.js}

@@ -7,7 +7,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { hlsMediaDefaultProps } from "@videojs/media/dom/hls-js";
 import { MuxMedia, muxMediaDefaultProps } from "@videojs/media/dom/mux";
-//#region src/media/mux-audio/media.tsx
+//#region src/media/mux-audio/hls-js.tsx
 const muxAudioDefaultProps = {
 	...hlsMediaDefaultProps,
 	...muxMediaDefaultProps
@@ -23,4 +23,4 @@ const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
 //#endregion
 export { MuxAudio };
 
-//# sourceMappingURL=media.js.map
+//# 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 { 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"}

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

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

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

@@ -0,0 +1,26 @@
+"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 { hlsAudioMediaDefaultProps } from "@videojs/spf/hls-audio";
+import { MuxAudioMedia, muxMediaDefaultProps } from "@videojs/spf/mux-audio";
+//#region src/media/mux-audio/spf.tsx
+const muxAudioDefaultProps = {
+	...hlsAudioMediaDefaultProps,
+	...muxMediaDefaultProps
+};
+const MuxAudio = forwardRef(function MuxAudio({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxAudioMedia);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(useAttachMedia(media), ref),
+		...useSyncProps(media, props, muxAudioDefaultProps),
+		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 { 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"}

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

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

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

@@ -7,7 +7,7 @@ import { MuxData, muxDataDefaultProps } from "@videojs/media/dom/mux";
 * Adds [Mux Data](https://www.mux.com/data) monitoring to the surrounding
 * player's media.
 *
-* Renders nothing — place it inside the player provider as a sibling of the
+* 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.
 *
@@ -15,12 +15,16 @@ import { MuxData, muxDataDefaultProps } from "@videojs/media/dom/mux";
 * 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.
+*
 * @example
 * ```tsx
-* <Player.Provider>
+* <Player>
 *   <MuxVideo source={{ playbackId: 'abc123' }} />
 *   <MuxData playerSoftwareName="mux-video" />
-* </Player.Provider>
+* </Player>
 * ```
 */
 function MuxData$1(props) {

package/dist/default/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 provider 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 * @example\n * ```tsx\n * <Player.Provider>\n *   <MuxVideo source={{ playbackId: 'abc123' }} />\n *   <MuxData playerSoftwareName=\"mux-video\" />\n * </Player.Provider>\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":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,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\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"}

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

@@ -0,0 +1,27 @@
+"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 { hlsMediaDefaultProps } from "@videojs/media/dom/hls-js";
+import { MuxMedia, muxMediaDefaultProps } from "@videojs/media/dom/mux";
+//#region src/media/mux-video/hls-js.tsx
+const muxVideoDefaultProps = {
+	...hlsMediaDefaultProps,
+	...muxMediaDefaultProps
+};
+const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxMedia);
+	return /* @__PURE__ */ jsxs("video", {
+		ref: useComposedRefs(useAttachMedia(media), ref),
+		...useSyncProps(media, props, muxVideoDefaultProps),
+		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 { 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"}

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

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

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

@@ -0,0 +1,27 @@
+"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 { hlsVideoMediaDefaultProps } from "@videojs/spf/hls-video";
+import { MuxVideoMedia, muxMediaDefaultProps } from "@videojs/spf/mux-video";
+//#region src/media/mux-video/spf.tsx
+const muxVideoDefaultProps = {
+	...hlsVideoMediaDefaultProps,
+	...muxMediaDefaultProps
+};
+const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
+	const media = useMediaInstance(MuxVideoMedia);
+	return /* @__PURE__ */ jsxs("video", {
+		ref: useComposedRefs(useAttachMedia(media), ref),
+		...useSyncProps(media, props, muxVideoDefaultProps),
+		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 { 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"}

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

@@ -0,0 +1,43 @@
+"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/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"}

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

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

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

@@ -0,0 +1,40 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SpotifyMedia, buildSpotifyIframeSrc, spotifyMediaDefaultProps } from "@videojs/media/dom/spotify";
+//#region src/media/spotify-audio/media.tsx
+const SpotifyAudio = forwardRef(function SpotifyAudio({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(SpotifyMedia);
+	const props = { ...rawProps };
+	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const [initialSrc] = useState(() => buildSpotifyIframeSrc(props.src || props.source?.src || "", {
+		...spotifyMediaDefaultProps,
+		...props
+	}));
+	const { style, ...iframeProps } = useSyncProps(media, props, spotifyMediaDefaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "Spotify audio player",
+		src: initialSrc || void 0,
+		"data-cross-origin-frame": true,
+		allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
+		frameBorder: 0,
+		width: "100%",
+		height: "100%",
+		referrerPolicy: props.source?.engine?.spotify?.referrerPolicy,
+		...iframeProps,
+		style: props.controls ? style : {
+			...style,
+			display: "none"
+		},
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { SpotifyAudio };
+
+//# sourceMappingURL=media.js.map

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

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

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

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

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

@@ -0,0 +1,38 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TikTokMedia, buildTikTokIframeSrc, tiktokMediaDefaultProps } from "@videojs/media/dom/tiktok";
+//#region src/media/tiktok-video/media.tsx
+const TikTokVideo = forwardRef(function TikTokVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(TikTokMedia);
+	const props = { ...rawProps };
+	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const [initialSrc] = useState(() => buildTikTokIframeSrc(props.src || props.source?.src || "", {
+		...tiktokMediaDefaultProps,
+		...props,
+		defaultMuted: !!(props.defaultMuted || props.muted)
+	}));
+	const iframeProps = useSyncProps(media, props, tiktokMediaDefaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "TikTok 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?.tiktok?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { TikTokVideo };
+
+//# sourceMappingURL=media.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/tiktok-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { TikTokMediaProps } from '@videojs/media/dom/tiktok';\nimport { buildTikTokIframeSrc, TikTokMedia, tiktokMediaDefaultProps } from '@videojs/media/dom/tiktok';\nimport type { ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { useAttachIframe } from '../../utils/use-attach-iframe';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface TikTokVideoProps extends Partial<TikTokMediaProps> {\n  children?: ReactNode;\n}\n\nexport const TikTokVideo = forwardRef<HTMLIFrameElement, TikTokVideoProps>(function TikTokVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TikTokMedia);\n  const props: Partial<TikTokMediaProps> & Record<string, unknown> = { ...rawProps };\n  const attachRef = useAttachIframe(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const [initialSrc] = useState(() =>\n    // `source.src` is the only other way to name a video, so honor it when `src` is absent.\n    buildTikTokIframeSrc(props.src || props.source?.src || '', {\n      ...tiktokMediaDefaultProps,\n      ...props,\n      // The frame reads mute once, out of the URL it is rendered with, and either\n      // prop says to start muted. Rendering it any other way than the media\n      // builds it would have the media rebuild the frame on mount.\n      defaultMuted: !!(props.defaultMuted || props.muted),\n    })\n  );\n  const iframeProps = useSyncProps<TikTokMediaProps, Record<string, unknown>>(media, props, tiktokMediaDefaultProps);\n\n  return (\n    <iframe\n      title=\"TikTok video player\"\n      // Empty means there is no embed to point at yet; React warns about `src=\"\"`,\n      // and the media builds the URL itself once a source resolves.\n      src={initialSrc || undefined}\n      data-cross-origin-frame\n      allow=\"accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      allowFullScreen\n      frameBorder={0}\n      width=\"100%\"\n      height=\"100%\"\n      referrerPolicy={props.source?.engine?.tiktok?.referrerPolicy}\n      {...iframeProps}\n      ref={composedRef}\n    >\n      {children}\n    </iframe>\n  );\n});\n\nexport namespace TikTokVideo {\n  export type Props = TikTokVideoProps;\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,WAAW;CAC1C,MAAM,QAA6D,EAAE,GAAG,SAAS;CAEjF,MAAM,cAAc,gBADF,gBAAgB,KACU,GAAG,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EACzD,GAAG;EACH,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAAwD,OAAO,OAAO,uBAAuB;CAEjH,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,iBAAA;EACA,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}

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

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

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

@@ -0,0 +1,38 @@
+"use client";
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { useAttachIframe } from "../../utils/use-attach-iframe.js";
+import { useSyncProps } from "../../utils/use-sync-props.js";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TwitchMedia, buildTwitchIframeSrc, twitchMediaDefaultProps } from "@videojs/media/dom/twitch";
+//#region src/media/twitch-video/media.tsx
+const TwitchVideo = forwardRef(function TwitchVideo({ children, ...rawProps }, ref) {
+	const media = useMediaInstance(TwitchMedia);
+	const props = { ...rawProps };
+	const composedRef = useComposedRefs(useAttachIframe(media), ref);
+	const [initialSrc] = useState(() => globalThis.location ? buildTwitchIframeSrc(props.src || props.source?.src || "", {
+		...twitchMediaDefaultProps,
+		...props
+	}) : "");
+	const iframeProps = useSyncProps(media, props, twitchMediaDefaultProps);
+	return /* @__PURE__ */ jsx("iframe", {
+		title: "Twitch video player",
+		src: initialSrc || void 0,
+		"data-cross-origin-frame": true,
+		allow: "accelerometer; fullscreen; autoplay; encrypted-media; picture-in-picture;",
+		sandbox: "allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox",
+		scrolling: "no",
+		frameBorder: 0,
+		width: "100%",
+		height: "100%",
+		referrerPolicy: props.source?.engine?.twitch?.referrerPolicy,
+		...iframeProps,
+		ref: composedRef,
+		children
+	});
+});
+//#endregion
+export { TwitchVideo };
+
+//# sourceMappingURL=media.js.map