@videojs/react 10.0.0-rc.2 → 10.0.0-rc.3

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

@@ -1 +1 @@
-{"version":3,"file":"spf.js","names":[],"sources":["../../../../src/media/mux-video/spf.tsx"],"sourcesContent":["'use client';\n\nimport { type 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"}
+{"version":3,"file":"spf.js","names":["{ children, ...props }","<MuxStoryboard media={media} />","<video ref={composedRef} {...htmlProps}>\n      <MuxStoryboard media={media} />\n      {children}\n    </video>"],"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 Adapter owns both, and its\n// `source` is the structured Mux one rather than the generic engine's. Both are\n// omitted from the base rather than intersected with it — the two `source` types\n// describe different things, and an intersection satisfies neither.\nexport interface MuxVideoProps\n  extends\n    Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsVideoAdapterProps | keyof MuxAdapterProps>,\n    Partial<Omit<HlsVideoAdapterProps, 'src' | 'source'>>,\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":";;;;;;;;;;;AAwBA,MAAa,WAAW,WAA4C,SAAS,SAAA,IAAiC,KAAK;;CAA3B,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,SAAZA;;;;;;;;CACpF,MAAM,QAAQ,iBAAiB,eAAe;CAC9C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,gBAAgB,YAAY;CAIrEC,IAAAA;CAAsB,IAAA,EAAA,OAAA,OAAA;EAAtB,KAAA,oBAAC,eAAD,EAAsB,MAAQ,CAAA;EAAR,EAAA,KAAA;;;CADxBC,IAAAA;CAEG,IAAA,EAAA,OAAA,YAAA,EAAA,OAFS,eAAA,EAAA,OAAiB,aAAA,EAAA,OAC3BD,IAAAA;EADF,KAAA,qBAAC,SAAD;GAAO,KAAK;GAAa,GAAI;GAA7B,UAAA,CACEA,IACC,QACI;;EADJ,EAAA,KAAA;EAFS,EAAA,KAAA;EAAiB,EAAA,KAAA;EAC3BA,EAAAA,KAAAA;;;CAFJ,OACEC;AAKJ,CAAC"}

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

@@ -1,38 +1,60 @@
 "use client";
 import { MediaStreamTypes } from "@videojs/media";
-import { useCallback, useSyncExternalStore } from "react";
+import { c } from "react-compiler-runtime";
+import { 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();
-			});
+function MuxStoryboard(t0) {
+	const $ = c(7);
+	const { media } = t0;
+	let t1;
+	if ($[0] !== media) {
+		t1 = (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.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 ?? "";
+		$[0] = media;
+		$[1] = t1;
+	} else t1 = $[1];
+	const subscribe = t1;
+	let t2;
+	if ($[2] !== media.contentData || $[3] !== media.streamType) {
+		t2 = () => media.streamType === MediaStreamTypes.LIVE ? "" : media.contentData.storyboard ?? "";
+		$[2] = media.contentData;
+		$[3] = media.streamType;
+		$[4] = t2;
+	} else t2 = $[4];
+	const getSnapshot = t2;
 	const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 	if (!src) return null;
-	return /* @__PURE__ */ jsx("track", {
-		kind: "metadata",
-		label: "thumbnails",
-		src,
-		default: true
-	});
+	let t3;
+	if ($[5] !== src) {
+		t3 = /* @__PURE__ */ jsx("track", {
+			kind: "metadata",
+			label: "thumbnails",
+			src,
+			default: true
+		});
+		$[5] = src;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 }
 //#endregion
 export { MuxStoryboard };

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

@@ -1 +1 @@
-{"version":3,"file":"storyboard.js","names":[],"sources":["../../../../src/media/mux-video/storyboard.tsx"],"sourcesContent":["'use client';\n\nimport { type MediaStreamType, MediaStreamTypes } from '@videojs/media';\nimport type { MuxContentData } from '@videojs/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"}
+{"version":3,"file":"storyboard.js","names":["{ media }: { media: MuxStoryboardMedia }","(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    }","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  )","() => (media.streamType === MediaStreamTypes.LIVE ? '' : (media.contentData.storyboard ?? ''))","contentData","streamType","<track kind=\"metadata\" label=\"thumbnails\" src={src} default />"],"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,cAAA,IAAwD;;CAA1C,MAAA,EAAE,UAAFA;CAE1BC,IAAAA;CAiBE,IAAA,EAAA,OAAA,OAAA;EAjBF,MAAC,aAAyB;GAIxB,IAAI,YAAY;GAChB,IAAI,YAAY;GAChB,MAAM,eAAe;IACnB,IAAI,WAAW;IAEf,YAAY;IACZ,qBAAqB;KACnB,YAAY;KAEZ,IAAI,CAAC,WAAW,SAAS;IAC3B,CAAC;GACH;GAEA,MAAM,iBAAiB,oBAAoB,MAAM;GACjD,MAAM,iBAAiB,gBAAgB,MAAM;GAC7C,aAAa;IACX,YAAY;IACZ,MAAM,oBAAoB,oBAAoB,MAAM;IACpD,MAAM,oBAAoB,gBAAgB,MAAM;GAClD;EACF;EAPE,EAAA,KAAA;;;CAlBJ,MAAM,YAAYC;CA+BEC,IAAAA;CAAgEC,IAAAA,EAAAA,OAAAA,MAAAA,eAAAA,EAAAA,OAAnDC,MAAAA,YAAAA;EAAb,WAAO,MAAM,eAAe,iBAAiB,OAAO,KAAM,MAAM,YAAY,cAAc;EAA1BD,EAAAA,KAAAA,MAAAA;EAAnDC,EAAAA,KAAAA,MAAAA;;;CAAjC,MAAM,cAAcF;CACpB,MAAM,MAAM,qBAAqB,WAAW,aAAa,WAAW;CACpE,IAAI,CAAC,KAAK,OAAO;CAEVG,IAAAA;CAA+C,IAAA,EAAA,OAAA,KAAA;EAA/C,KAAA,oBAAC,SAAD;GAAO,MAAK;GAAW,OAAM;GAAkB;GAAK,SAAA;EAAS,CAAA;EAAd,EAAA,KAAA;;;CAAtD,OAAOA;AACT"}

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

@@ -3,20 +3,41 @@ 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 { c } from "react-compiler-runtime";
 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 NativeHlsVideo = forwardRef(function NativeHlsVideo(t0, ref) {
+	const $ = c(7);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
 	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
-	});
+	let t1;
+	if ($[3] !== children || $[4] !== composedRef || $[5] !== htmlProps) {
+		t1 = /* @__PURE__ */ jsx("video", {
+			ref: composedRef,
+			...htmlProps,
+			children
+		});
+		$[3] = children;
+		$[4] = composedRef;
+		$[5] = htmlProps;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
 });
 //#endregion
 export { NativeHlsVideo };

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

@@ -1 +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"}
+{"version":3,"file":"adapter.js","names":["{ children, ...props }","<video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>"],"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,eAAA,IAEvF,KACA;;CAFE,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,SAAZA;;;;;;;;CAGA,MAAM,QAAQ,iBAAiB,gBAAgB;CAC/C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,iBAAiB,YAAY;CAGxEC,IAAAA;CACG,IAAA,EAAA,OAAA,YAAA,EAAA,OADS,eAAA,EAAA,OAAiB,WAAA;EAA7B,KAAA,oBAAC,SAAD;GAAO,KAAK;GAAa,GAAI;GAC1B;EACI,CAAA;EADJ,EAAA,KAAA;EADS,EAAA,KAAA;EAAiB,EAAA,KAAA;;;CAD/B,OACEA;AAIJ,CAAC"}

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

@@ -3,20 +3,41 @@ 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 { c } from "react-compiler-runtime";
 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 ShakaVideo = forwardRef(function ShakaVideo(t0, ref) {
+	const $ = c(7);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
 	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
-	});
+	let t1;
+	if ($[3] !== children || $[4] !== composedRef || $[5] !== htmlProps) {
+		t1 = /* @__PURE__ */ jsx("video", {
+			ref: composedRef,
+			...htmlProps,
+			children
+		});
+		$[3] = children;
+		$[4] = composedRef;
+		$[5] = htmlProps;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
 });
 //#endregion
 export { ShakaVideo };

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

@@ -1 +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"}
+{"version":3,"file":"adapter.js","names":["{ children, ...props }","<video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>"],"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,WAAA,IAE/E,KACA;;CAFE,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,SAAZA;;;;;;;;CAGA,MAAM,QAAQ,iBAAiB,YAAY;CAC3C,MAAM,YAAY,eAAe,KAAK;CACtC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,YAAY,aAAa,OAAO,OAAO,aAAa,YAAY;CAGpEC,IAAAA;CACG,IAAA,EAAA,OAAA,YAAA,EAAA,OADS,eAAA,EAAA,OAAiB,WAAA;EAA7B,KAAA,oBAAC,SAAD;GAAO,KAAK;GAAa,GAAI;GAC1B;EACI,CAAA;EADJ,EAAA,KAAA;EADS,EAAA,KAAA;EAAiB,EAAA,KAAA;;;CAD/B,OACEA;AAIJ,CAAC"}

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

@@ -1,7 +1,8 @@
+import { MediaEventProps } from "../../utils/use-media-events.js";
 import { ReactNode } from "react";
-import { SpotifyAdapterProps } from "@videojs/spotify-audio";
+import { SpotifyAdapter, SpotifyAdapterProps } from "@videojs/spotify-audio";
 //#region src/media/spotify-audio/adapter.d.ts
-interface SpotifyAudioProps extends Partial<SpotifyAdapterProps> {
+interface SpotifyAudioProps extends Partial<SpotifyAdapterProps>, MediaEventProps<SpotifyAdapter> {
   children?: ReactNode;
 }
 declare const SpotifyAudio: import("react").ForwardRefExoticComponent<SpotifyAudioProps & import("react").RefAttributes<HTMLIFrameElement>>;

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

@@ -1,39 +1,97 @@
 "use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaEvents } from "../../utils/use-media-events.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 { c } from "react-compiler-runtime";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SpotifyAdapter, buildSpotifyIframeSrc } from "@videojs/spotify-audio";
 //#region src/media/spotify-audio/adapter.tsx
-const SpotifyAudio = forwardRef(function SpotifyAudio({ children, ...rawProps }, ref) {
+const SpotifyAudio = forwardRef(function SpotifyAudio(t0, ref) {
+	const $ = c(20);
+	let children;
+	let rawProps;
+	if ($[0] !== t0) {
+		({children, ...rawProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rawProps;
+	} else {
+		children = $[1];
+		rawProps = $[2];
+	}
 	const media = useMediaInstance(SpotifyAdapter);
-	const props = { ...rawProps };
-	const attachRef = useAttachIframe(media);
-	const composedRef = useComposedRefs(attachRef, ref);
-	const [initialSrc] = useState(() => buildSpotifyIframeSrc(props.src || props.source?.src || "", {
-		...SpotifyAdapter.defaultProps,
-		...props
-	}));
-	const { style, ...iframeProps } = useSyncProps(media, props, SpotifyAdapter.defaultProps);
-	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 : {
+	let t1;
+	if ($[3] !== rawProps) {
+		t1 = { ...rawProps };
+		$[3] = rawProps;
+		$[4] = t1;
+	} else t1 = $[4];
+	const props = t1;
+	let t2;
+	if ($[5] !== props) {
+		t2 = () => buildSpotifyIframeSrc(props.src || props.source?.src || "", {
+			...SpotifyAdapter.defaultProps,
+			...props
+		});
+		$[5] = props;
+		$[6] = t2;
+	} else t2 = $[6];
+	const [initialSrc] = useState(t2);
+	const { ref: eventsRef, props: elementProps } = useMediaEvents(useSyncProps(media, props, SpotifyAdapter.defaultProps), media);
+	const t3 = elementProps;
+	let iframeProps;
+	let style;
+	if ($[7] !== t3) {
+		({style, ...iframeProps} = t3);
+		$[7] = t3;
+		$[8] = iframeProps;
+		$[9] = style;
+	} else {
+		iframeProps = $[8];
+		style = $[9];
+	}
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(eventsRef, attachRef, ref);
+	const t4 = initialSrc || void 0;
+	const t5 = props.source?.engine?.spotify?.referrerPolicy;
+	let t6;
+	if ($[10] !== props.controls || $[11] !== style) {
+		t6 = props.controls ? style : {
 			...style,
 			display: "none"
-		},
-		ref: composedRef,
-		children
-	});
+		};
+		$[10] = props.controls;
+		$[11] = style;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== children || $[14] !== composedRef || $[15] !== iframeProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx("iframe", {
+			title: "Spotify audio player",
+			src: t4,
+			"data-cross-origin-frame": true,
+			allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
+			frameBorder: 0,
+			width: "100%",
+			height: "100%",
+			referrerPolicy: t5,
+			...iframeProps,
+			style: t6,
+			ref: composedRef,
+			children
+		});
+		$[13] = children;
+		$[14] = composedRef;
+		$[15] = iframeProps;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
 });
 //#endregion
 export { SpotifyAudio };

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

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/spotify-audio/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildSpotifyIframeSrc, SpotifyAdapter, type SpotifyAdapterProps } from '@videojs/spotify-audio';\nimport { type CSSProperties, 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 SpotifyAudioProps extends Partial<SpotifyAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const SpotifyAudio = forwardRef<HTMLIFrameElement, SpotifyAudioProps>(function SpotifyAudio(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(SpotifyAdapter);\n  const props: Partial<SpotifyAdapterProps> & 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 || '', { ...SpotifyAdapter.defaultProps, ...props })\n  );\n  const { style, ...iframeProps } = useSyncProps<SpotifyAdapterProps, Record<string, unknown>>(\n    media,\n    props,\n    SpotifyAdapter.defaultProps\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":";;;;;;;;;AAcA,MAAa,eAAe,WAAiD,SAAS,aACpF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,cAAc;CAC7C,MAAM,QAAgE,EAAE,GAAG,SAAS;CACpF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EAAE,GAAG,eAAe;EAAc,GAAG;CAAM,CAAC,CAC1G;CACA,MAAM,EAAE,OAAO,GAAG,gBAAgB,aAChC,OACA,OACA,eAAe,YACjB;CAEA,OACE,oBAAC,UAAD;EACE,OAAM;EAGN,KAAK,cAAc,KAAA;EACnB,2BAAA;EACA,OAAM;EACN,aAAa;EACb,OAAM;EACN,QAAO;EACP,gBAAgB,MAAM,QAAQ,QAAQ,SAAS;EAC/C,GAAI;EAKJ,OAAO,MAAM,WAAW,QAAQ;GAAE,GAAG;GAAO,SAAS;EAAO;EAC5D,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"adapter.js","names":["{ children, ...rawProps }","{ ...rawProps }","() =>\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 || '', { ...SpotifyAdapter.defaultProps, ...props })","props.src","elementProps as Record<string, unknown> & { style?: CSSProperties }","props.controls ? style : { ...style, display: 'none' }","controls","<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>","initialSrc || undefined","props.source?.engine?.spotify?.referrerPolicy"],"sources":["../../../../src/media/spotify-audio/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildSpotifyIframeSrc, SpotifyAdapter, type SpotifyAdapterProps } from '@videojs/spotify-audio';\nimport { type CSSProperties, forwardRef, type ReactNode, useState } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { type MediaEventProps, useMediaEvents } from '../../utils/use-media-events';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SpotifyAudioProps extends Partial<SpotifyAdapterProps>, MediaEventProps<SpotifyAdapter> {\n  children?: ReactNode;\n}\n\nexport const SpotifyAudio = forwardRef<HTMLIFrameElement, SpotifyAudioProps>(function SpotifyAudio(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(SpotifyAdapter);\n  const props: Partial<SpotifyAdapterProps> & Record<string, unknown> = { ...rawProps };\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 || '', { ...SpotifyAdapter.defaultProps, ...props })\n  );\n  const { ref: eventsRef, props: elementProps } = useMediaEvents(\n    useSyncProps<SpotifyAdapterProps, Record<string, unknown>>(media, props, SpotifyAdapter.defaultProps),\n    media\n  );\n  const { style, ...iframeProps } = elementProps as Record<string, unknown> & { style?: CSSProperties };\n  const attachRef = useAttachMedia(media);\n  // Listeners first: `attach()` dispatches `loadstart` synchronously.\n  const composedRef = useComposedRefs(eventsRef, attachRef, ref);\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,aAAA,IAEpF,KACA;;CAFE,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,YAAZA;;;;;;;;CAGA,MAAM,QAAQ,iBAAiB,cAAc;CACyBC,IAAAA;CAAK,IAAA,EAAA,OAAA,UAAA;EAAL,KAAA,EAAE,GAAG,SAAS;EAAT,EAAA,KAAA;;;CAA3E,MAAM,QAAgEA;CACxCC,IAAAA;CAENC,IAAAA,EAAAA,OAAAA,OAAAA;EAFM,WAE5B,sBAAsB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;GAAE,GAAG,eAAe;GAAc,GAAG;EAAM,CAAC;EAAlFA,EAAAA,KAAAA;;;CAFxB,MAAM,CAAC,cAAc,SAASD,EAG9B;CACA,MAAM,EAAE,KAAK,WAAW,OAAO,iBAAiB,eAC9C,aAA2D,OAAO,OAAO,eAAe,YAAY,GACpG,KACF;CACkC,MAAA,KAAA;CAAhB,IAAA;CAAV,IAAA;CAA0BE,IAAAA,EAAAA,OAAAA,IAAAA;EAAlC,CAAM,CAAE,UAAO,eAAmBA;;;;;;;;CAClC,MAAM,YAAY,eAAe,KAAK;CAEtC,MAAM,cAAc,gBAAgB,WAAW,WAAW,GAAG;CAOpD,MAAA,KAAA,cAAc,KAAA;CAMH,MAAA,KAAA,MAAM,QAAQ,QAAQ,SAAS;CAMxCC,IAAAA;CAAMC,IAAAA,EAAAA,QAAAA,MAAAA,YAAAA,EAAAA,QAAW,OAAA;EAAjB,KAAA,MAAM,WAAW,QAAQ;GAAE,GAAG;GAAO,SAAS;EAAO;EAA/CA,EAAAA,MAAAA,MAAAA;EAAW,EAAA,MAAA;;;CAhB1BC,IAAAA;CAmBG,IAAA,EAAA,QAAA,YAAA,EAAA,QAFI,eAAA,EAAA,QAND,eAAA,EAAA,QAPCC,MAAAA,EAAAA,QAMWC,MAAAA,EAAAA,QAMTJ,IAAAA;EAhBT,KAAA,oBAAC,UAAD;GACE,OAAM;GAGN,KAAKG;GACL,2BAAA;GACA,OAAM;GACN,aAAa;GACb,OAAM;GACN,QAAO;GACP,gBAAgBC;GAChB,GAAI;GAKJ,OAAOJ;GACP,KAAK;GAEJ;EACK,CAAA;EADL,EAAA,MAAA;EAFI,EAAA,MAAA;EAND,EAAA,MAAA;EAPCG,EAAAA,MAAAA;EAMWC,EAAAA,MAAAA;EAMTJ,EAAAA,MAAAA;;;CAjBX,OACEE;AAsBJ,CAAC"}

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

@@ -1,7 +1,8 @@
+import { MediaEventProps } from "../../utils/use-media-events.js";
 import { ReactNode } from "react";
-import { TikTokAdapterProps } from "@videojs/tiktok-video";
+import { TikTokAdapter, TikTokAdapterProps } from "@videojs/tiktok-video";
 //#region src/media/tiktok-video/adapter.d.ts
-interface TikTokVideoProps extends Partial<TikTokAdapterProps> {
+interface TikTokVideoProps extends Partial<TikTokAdapterProps>, MediaEventProps<TikTokAdapter> {
   children?: ReactNode;
 }
 declare const TikTokVideo: import("react").ForwardRefExoticComponent<TikTokVideoProps & import("react").RefAttributes<HTMLIFrameElement>>;

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

@@ -1,37 +1,75 @@
 "use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAttachMedia } from "../../utils/use-attach-media.js";
+import { useMediaEvents } from "../../utils/use-media-events.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 { c } from "react-compiler-runtime";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { TikTokAdapter, buildTikTokIframeSrc } from "@videojs/tiktok-video";
 //#region src/media/tiktok-video/adapter.tsx
-const TikTokVideo = forwardRef(function TikTokVideo({ children, ...rawProps }, ref) {
+const TikTokVideo = forwardRef(function TikTokVideo(t0, ref) {
+	const $ = c(13);
+	let children;
+	let rawProps;
+	if ($[0] !== t0) {
+		({children, ...rawProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rawProps;
+	} else {
+		children = $[1];
+		rawProps = $[2];
+	}
 	const media = useMediaInstance(TikTokAdapter);
-	const props = { ...rawProps };
-	const attachRef = useAttachIframe(media);
-	const composedRef = useComposedRefs(attachRef, ref);
-	const [initialSrc] = useState(() => buildTikTokIframeSrc(props.src || props.source?.src || "", {
-		...TikTokAdapter.defaultProps,
-		...props,
-		defaultMuted: !!(props.defaultMuted || props.muted)
-	}));
-	const iframeProps = useSyncProps(media, props, TikTokAdapter.defaultProps);
-	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
-	});
+	let t1;
+	if ($[3] !== rawProps) {
+		t1 = { ...rawProps };
+		$[3] = rawProps;
+		$[4] = t1;
+	} else t1 = $[4];
+	const props = t1;
+	let t2;
+	if ($[5] !== props) {
+		t2 = () => buildTikTokIframeSrc(props.src || props.source?.src || "", {
+			...TikTokAdapter.defaultProps,
+			...props,
+			defaultMuted: !!(props.defaultMuted || props.muted)
+		});
+		$[5] = props;
+		$[6] = t2;
+	} else t2 = $[6];
+	const [initialSrc] = useState(t2);
+	const { ref: eventsRef, props: iframeProps } = useMediaEvents(useSyncProps(media, props, TikTokAdapter.defaultProps), media);
+	const attachRef = useAttachMedia(media);
+	const composedRef = useComposedRefs(eventsRef, attachRef, ref);
+	const t3 = initialSrc || void 0;
+	const t4 = props.source?.engine?.tiktok?.referrerPolicy;
+	let t5;
+	if ($[7] !== children || $[8] !== composedRef || $[9] !== iframeProps || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx("iframe", {
+			title: "TikTok video player",
+			src: t3,
+			"data-cross-origin-frame": true,
+			allow: "accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture",
+			allowFullScreen: true,
+			frameBorder: 0,
+			width: "100%",
+			height: "100%",
+			referrerPolicy: t4,
+			...iframeProps,
+			ref: composedRef,
+			children
+		});
+		$[7] = children;
+		$[8] = composedRef;
+		$[9] = iframeProps;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 });
 //#endregion
 export { TikTokVideo };

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

@@ -1 +1 @@
-{"version":3,"file":"adapter.js","names":[],"sources":["../../../../src/media/tiktok-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildTikTokIframeSrc, TikTokAdapter, type TikTokAdapterProps } from '@videojs/tiktok-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 TikTokVideoProps extends Partial<TikTokAdapterProps> {\n  children?: ReactNode;\n}\n\nexport const TikTokVideo = forwardRef<HTMLIFrameElement, TikTokVideoProps>(function TikTokVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TikTokAdapter);\n  const props: Partial<TikTokAdapterProps> & 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      ...TikTokAdapter.defaultProps,\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<TikTokAdapterProps, Record<string, unknown>>(\n    media,\n    props,\n    TikTokAdapter.defaultProps\n  );\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":";;;;;;;;;AAcA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,UAAU,GAAG,YACf,KACA;CACA,MAAM,QAAQ,iBAAiB,aAAa;CAC5C,MAAM,QAA+D,EAAE,GAAG,SAAS;CACnF,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,cAAc,gBAAgB,WAAW,GAAG;CAClD,MAAM,CAAC,cAAc,eAEnB,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;EACzD,GAAG,cAAc;EACjB,GAAG;EAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;CAC/C,CAAC,CACH;CACA,MAAM,cAAc,aAClB,OACA,OACA,cAAc,YAChB;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,QAAQ;EAC9C,GAAI;EACJ,KAAK;EAEJ;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"adapter.js","names":["{ children, ...rawProps }","{ ...rawProps }","() =>\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      ...TikTokAdapter.defaultProps,\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    })","props.src","<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>","initialSrc || undefined","props.source?.engine?.tiktok?.referrerPolicy"],"sources":["../../../../src/media/tiktok-video/adapter.tsx"],"sourcesContent":["'use client';\n\nimport { buildTikTokIframeSrc, TikTokAdapter, type TikTokAdapterProps } from '@videojs/tiktok-video';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { type MediaEventProps, useMediaEvents } from '../../utils/use-media-events';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface TikTokVideoProps extends Partial<TikTokAdapterProps>, MediaEventProps<TikTokAdapter> {\n  children?: ReactNode;\n}\n\nexport const TikTokVideo = forwardRef<HTMLIFrameElement, TikTokVideoProps>(function TikTokVideo(\n  { children, ...rawProps },\n  ref\n) {\n  const media = useMediaInstance(TikTokAdapter);\n  const props: Partial<TikTokAdapterProps> & Record<string, unknown> = { ...rawProps };\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      ...TikTokAdapter.defaultProps,\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 { ref: eventsRef, props: iframeProps } = useMediaEvents(\n    useSyncProps<TikTokAdapterProps, Record<string, unknown>>(media, props, TikTokAdapter.defaultProps),\n    media\n  );\n  const attachRef = useAttachMedia(media);\n  // Listeners first: `attach()` dispatches `loadstart` synchronously.\n  const composedRef = useComposedRefs(eventsRef, attachRef, ref);\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,YAAA,IAElF,KACA;;CAFE,IAAA;CAAa,IAAA;CAAfA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,aAAU,YAAZA;;;;;;;;CAGA,MAAM,QAAQ,iBAAiB,aAAa;CACyBC,IAAAA;CAAK,IAAA,EAAA,OAAA,UAAA;EAAL,KAAA,EAAE,GAAG,SAAS;EAAT,EAAA,KAAA;;;CAA1E,MAAM,QAA+DA;CACvCC,IAAAA;CAEPC,IAAAA,EAAAA,OAAAA,OAAAA;EAFO,WAE5B,qBAAqB,MAAM,OAAO,MAAM,QAAQ,OAAO,IAAI;GACzD,GAAG,cAAc;GACjB,GAAG;GAIH,cAAc,CAAC,EAAE,MAAM,gBAAgB,MAAM;EAC/C,CAAC;EAPoBA,EAAAA,KAAAA;;;CAFvB,MAAM,CAAC,cAAc,SAASD,EAU9B;CACA,MAAM,EAAE,KAAK,WAAW,OAAO,gBAAgB,eAC7C,aAA0D,OAAO,OAAO,cAAc,YAAY,GAClG,KACF;CACA,MAAM,YAAY,eAAe,KAAK;CAEtC,MAAM,cAAc,gBAAgB,WAAW,WAAW,GAAG;CAOpD,MAAA,KAAA,cAAc,KAAA;CAOH,MAAA,KAAA,MAAM,QAAQ,QAAQ,QAAQ;CAXhDE,IAAAA;CAeG,IAAA,EAAA,OAAA,YAAA,EAAA,OAFI,eAAA,EAAA,OADD,eAAA,EAAA,QARCC,MAAAA,EAAAA,QAOWC,IAAAA;EAXlB,KAAA,oBAAC,UAAD;GACE,OAAM;GAGN,KAAKD;GACL,2BAAA;GACA,OAAM;GACN,iBAAA;GACA,aAAa;GACb,OAAM;GACN,QAAO;GACP,gBAAgBC;GAChB,GAAI;GACJ,KAAK;GAEJ;EACK,CAAA;EADL,EAAA,KAAA;EAFI,EAAA,KAAA;EADD,EAAA,KAAA;EARCD,EAAAA,MAAAA;EAOWC,EAAAA,MAAAA;;;CAZpB,OACEF;AAkBJ,CAAC"}

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

@@ -1,7 +1,8 @@
+import { MediaEventProps } from "../../utils/use-media-events.js";
 import { ReactNode } from "react";
-import { TwitchAdapterProps } from "@videojs/twitch-video";
+import { TwitchAdapter, TwitchAdapterProps } from "@videojs/twitch-video";
 //#region src/media/twitch-video/adapter.d.ts
-interface TwitchVideoProps extends Partial<TwitchAdapterProps> {
+interface TwitchVideoProps extends Partial<TwitchAdapterProps>, MediaEventProps<TwitchAdapter> {
   children?: ReactNode;
 }
 declare const TwitchVideo: import("react").ForwardRefExoticComponent<TwitchVideoProps & import("react").RefAttributes<HTMLIFrameElement>>;