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

package/dist/dev/utils/use-destroy.js

@@ -2,18 +2,16 @@ import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts
 /**
-* Destroy an instance on unmount, deferring destruction to survive React
-* StrictMode's simulated unmount/re-mount cycle.
+* Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.
 *
-* StrictMode runs effects, then immediately runs cleanup, then re-runs
-* effects — all synchronously. By deferring `destroy()` to a macrotask,
-* the re-mount effect can cancel it before it fires.
+* StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring
+* `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.
 *
 * @param instance - Object with a `destroy()` method.
-* @param setup - Optional setup called on first mount. Skipped on StrictMode
-*   re-mount since the previous setup was never torn down.
-* @param teardown - Optional teardown called right before `destroy()` on real
-*   unmount. Skipped on StrictMode simulated unmount.
+* @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was
+*   never torn down.
+* @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated
+*   unmount.
 */
 function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n *   unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs effects — all synchronously. By deferring\n * `destroy()` to a macrotask, the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode re-mount since the previous setup was\n *   never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated\n *   unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/dev/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAE1D,OAAO;AACT"}

package/dist/dev/utils/use-latest-ref.d.ts

@@ -2,8 +2,10 @@
 /**
  * Keep a ref that always points to the latest value.
  *
- * Useful for capturing callbacks or derived values inside closures
- * that are created once (e.g. factory callbacks) without stale reads.
+ * Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)
+ * without stale reads.
+ *
+ * @param value - Value the ref should expose after each render.
  */
 declare function useLatestRef<Value>(value: Value): Readonly<{
   current: Value;

package/dist/dev/utils/use-latest-ref.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;iBAQgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAMtD;OACH,OAAO,SAAS;IAAW,SAAS"}
+{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;;;;;;;;iBAUgB,aAAa,OAAO,OAAO,QAAQ;EAAW,SAAS;;kBAOtD;OACH,OAAO,SAAS;IAAW,SAAS"}

package/dist/dev/utils/use-latest-ref.js

@@ -3,8 +3,10 @@ import { useRef } from "react";
 /**
 * Keep a ref that always points to the latest value.
 *
-* Useful for capturing callbacks or derived values inside closures
-* that are created once (e.g. factory callbacks) without stale reads.
+* Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)
+* without stale reads.
+*
+* @param value - Value the ref should expose after each render.
 */
 function useLatestRef(value) {
 	const ref = useRef(value);

package/dist/dev/utils/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,UAAU;CACd,OAAO;AACT"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures that are created once (e.g. factory callbacks)\n * without stale reads.\n *\n * @param value - Value the ref should expose after each render.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,KAAK;CAExB,IAAI,UAAU;CACd,OAAO;AACT"}

package/dist/dev/utils/use-media-component.d.ts

@@ -1,13 +1,14 @@
 import { MediaComponent } from "@videojs/media/dom/media-host";
 //#region src/utils/use-media-component.d.ts
 /**
- * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
- * with the media provided by the surrounding player context.
+ * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding
+ * player context.
  *
- * Instantiates the component class once, registers it when a media host is
- * available, follows the media when it changes, and destroys the component
- * on unmount. Media that is not a media host (e.g. a plain `<video>`
- * element) cannot carry media components and is ignored.
+ * Instantiates the component class once, registers it when a media host is available, follows the media when it
+ * changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)
+ * cannot carry media components and is ignored.
+ *
+ * @param ComponentClass - Media component class to instantiate and register.
  */
 declare function useMediaComponent<Component extends MediaComponent & {
   destroy(): void;

package/dist/dev/utils/use-media-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;iBAgBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}
+{"version":3,"file":"use-media-component.d.ts","names":[],"sources":["../../../src/utils/use-media-component.ts"],"mappings":";;;;;;;;;;;;iBAiBgB,kBAAkB,kBAAkB;EAAmB;GACrE,0BAA0B,YACzB"}

package/dist/dev/utils/use-media-component.js

@@ -4,13 +4,14 @@ import { useEffect, useState } from "react";
 import { HTMLMediaElementHost, addMediaComponent } from "@videojs/media/dom/media-host";
 //#region src/utils/use-media-component.ts
 /**
-* Create a media component (e.g. `GoogleCast`, `MuxData`) and register it
-* with the media provided by the surrounding player context.
+* Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding
+* player context.
 *
-* Instantiates the component class once, registers it when a media host is
-* available, follows the media when it changes, and destroys the component
-* on unmount. Media that is not a media host (e.g. a plain `<video>`
-* element) cannot carry media components and is ignored.
+* Instantiates the component class once, registers it when a media host is available, follows the media when it
+* changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)
+* cannot carry media components and is ignored.
+*
+* @param ComponentClass - Media component class to instantiate and register.
 */
 function useMediaComponent(ComponentClass) {
 	const media = useMedia();

package/dist/dev/utils/use-media-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it\n * with the media provided by the surrounding player context.\n *\n * Instantiates the component class once, registers it when a media host is\n * available, follows the media when it changes, and destroys the component\n * on unmount. Media that is not a media host (e.g. a plain `<video>`\n * element) cannot carry media components and is ignored.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAC9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}
+{"version":3,"file":"use-media-component.js","names":[],"sources":["../../../src/utils/use-media-component.ts"],"sourcesContent":["import type { HTMLMediaTargetLike, MediaComponent } from '@videojs/media/dom/media-host';\nimport { addMediaComponent, HTMLMediaElementHost } from '@videojs/media/dom/media-host';\nimport { useEffect, useState } from 'react';\n\nimport { useMedia } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create a media component (e.g. `GoogleCast`, `MuxData`) and register it with the media provided by the surrounding\n * player context.\n *\n * Instantiates the component class once, registers it when a media host is available, follows the media when it\n * changes, and destroys the component on unmount. Media that is not a media host (e.g. a plain `<video>` element)\n * cannot carry media components and is ignored.\n *\n * @param ComponentClass - Media component class to instantiate and register.\n */\nexport function useMediaComponent<Component extends MediaComponent & { destroy(): void }>(\n  ComponentClass: new () => Component\n): Component {\n  const media = useMedia();\n  const [component] = useState(() => new ComponentClass());\n\n  useDestroy(component);\n\n  useEffect(() => {\n    if (!(media instanceof HTMLMediaElementHost)) return;\n\n    return addMediaComponent(media as HTMLMediaElementHost<HTMLMediaTargetLike, any>, component);\n  }, [media, component]);\n\n  return component;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,kBACd,gBACW;CACX,MAAM,QAAQ,SAAS;CACvB,MAAM,CAAC,aAAa,eAAe,IAAI,eAAe,CAAC;CAEvD,WAAW,SAAS;CAEpB,gBAAgB;EACd,IAAI,EAAE,iBAAiB,uBAAuB;EAE9C,OAAO,kBAAkB,OAAyD,SAAS;CAC7F,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,OAAO;AACT"}

package/dist/dev/utils/use-media-instance.d.ts

@@ -3,14 +3,15 @@ import { Media } from "@videojs/media";
 /**
  * Create and manage a media instance lifecycle within a player context.
  *
- * Instantiates the media class once, attaches it to the player on mount,
- * and safely detaches on unmount using a functional updater to avoid race
- * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+ * Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a
+ * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
  *
- * An optional `setup` callback runs once on mount — e.g. to add media
- * components via `addMediaComponent`. Components registered there are destroyed
- * together with the media instance on unmount (`media.destroy()` destroys
- * all of its registered components).
+ * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components
+ * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+ * registered components).
+ *
+ * @param MediaClass - Media class to instantiate and attach to the current player.
+ * @param setup - Optional callback run once before the instance is attached.
  */
 declare function useMediaInstance<Instance extends Media & {
   destroy(): void;

package/dist/dev/utils/use-media-instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;iBAkBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;;;;;;;;;;;iBAmBgB,iBAAiB,iBAAiB;EAAU;GAC1D,sBAAsB,UACtB,SAAS,OAAO,oBACf"}

package/dist/dev/utils/use-media-instance.js

@@ -5,14 +5,15 @@ import { useState } from "react";
 /**
 * Create and manage a media instance lifecycle within a player context.
 *
-* Instantiates the media class once, attaches it to the player on mount,
-* and safely detaches on unmount using a functional updater to avoid race
-* conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
+* Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a
+* functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).
 *
-* An optional `setup` callback runs once on mount — e.g. to add media
-* components via `addMediaComponent`. Components registered there are destroyed
-* together with the media instance on unmount (`media.destroy()` destroys
-* all of its registered components).
+* An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components
+* registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its
+* registered components).
+*
+* @param MediaClass - Media class to instantiate and attach to the current player.
+* @param setup - Optional callback run once before the instance is attached.
 */
 function useMediaInstance(MediaClass, setup) {
 	const [instance] = useState(() => new MediaClass());

package/dist/dev/utils/use-media-instance.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media\n * components via `addMediaComponent`. Components registered there are destroyed\n * together with the media instance on unmount (`media.destroy()` destroys\n * all of its registered components).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["import type { Media } from '@videojs/media';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount, and safely detaches on unmount using a\n * functional updater to avoid race conditions when swapping media components (e.g. DashVideo → HlsJsVideo).\n *\n * An optional `setup` callback runs once on mount — e.g. to add media components via `addMediaComponent`. Components\n * registered there are destroyed together with the media instance on unmount (`media.destroy()` destroys all of its\n * registered components).\n *\n * @param MediaClass - Media class to instantiate and attach to the current player.\n * @param setup - Optional callback run once before the instance is attached.\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance,\n  setup?: (media: Instance) => void\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => {\n      setup?.(instance);\n      setMedia?.(instance);\n    },\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBACd,YACA,OACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,WAAW,CAAC;CAClD,MAAM,WAAW,eAAe;CAEhC,WACE,gBACM;EACJ,QAAQ,QAAQ;EAChB,WAAW,QAAQ;CACrB,SACM,YAAY,SAAU,SAAS,WAAW,OAAO,IAAK,CAC9D;CAEA,OAAO;AACT"}

package/dist/dev/utils/use-render.d.ts

@@ -17,22 +17,19 @@ interface UseRenderParameters<State, RenderedElementType extends Element> {
 /**
  * Render a UI component element.
  *
- * Handles:
- * - Default tag rendering
- * - Render prop (element or function)
- * - Props merging (event handlers chained, className concatenated, style merged)
- * - Ref composition
- * - className/style as functions of state
+ * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+ * className concatenated, style merged) - Ref composition - className/style as functions of state
  *
- * @public
  * @example
- * ```tsx
- * return renderElement('button', componentProps, {
- *   state,
- *   ref: [forwardedRef, buttonRef],
- *   props: [{ type: 'button' }, elementProps, getButtonProps],
- * });
- * ```
+ *   ```tsx
+ *   return renderElement('button', componentProps, {
+ *     state,
+ *     ref: [forwardedRef, buttonRef],
+ *     props: [{ type: 'button' }, elementProps, getButtonProps],
+ *   });
+ *   ```;
+ *
+ * @public
  */
 declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
 declare namespace renderElement {

package/dist/dev/utils/use-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAcK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAqCd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAiDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;KAeK,yBAAyB,MAAM,IAAI;UAEvB,wBAAwB;EACvC,uBAAuB,OAAO;EAC9B,QAAQ,kBAAkB,OAAO,UAAU;EAC3C,SAAS,WAAW;;UAGL,oBAAoB,OAAO,4BAA4B;EACtE,OAAO;EACP,MAAM,IAAI,uBAAuB,IAAI;EACrC;EACA,eAAe,aAAa;;;;;;;;;;;;;;;;;;;iBAmCd,cACd,sBACA,4BAA4B,SAC5B,gBAAgB,kBAEhB,SAAS,SACT,gBAAgB,wBAAwB,QACxC,QAAQ,oBAAoB,OAAO,uBAClC;kBAoDc;OACH,eAAe,SAAS,wBAAwB;OAChD,WAAW,OAAO,4BAA4B,WAAW,oBAAoB,OAAO"}

package/dist/dev/utils/use-render.js

@@ -15,29 +15,27 @@ function getElementRef(element) {
 /**
 * Render a UI component element.
 *
-* Handles:
-* - Default tag rendering
-* - Render prop (element or function)
-* - Props merging (event handlers chained, className concatenated, style merged)
-* - Ref composition
-* - className/style as functions of state
+* Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,
+* className concatenated, style merged) - Ref composition - className/style as functions of state
 *
-* @public
 * @example
-* ```tsx
-* return renderElement('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [{ type: 'button' }, elementProps, getButtonProps],
-* });
-* ```
+*   ```tsx
+*   return renderElement('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [{ type: 'button' }, elementProps, getButtonProps],
+*   });
+*   ```;
+*
+* @public
 */
 function renderElement(element, componentProps, params) {
 	const { className: classNameProp, style: styleProp, render } = componentProps;
 	const { state, ref, props, stateAttrMap } = params;
 	const className = resolveClassName(classNameProp, state);
 	const style = resolveStyle(styleProp, state);
-	const mergedProps = mergeProps(stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {}, ...Array.isArray(props) ? props : props ? [props] : []);
+	const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};
+	const mergedProps = mergeProps(stateDataAttrs, ...Array.isArray(props) ? props : props ? [props] : []);
 	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
 	if (style !== void 0) mergedProps.style = mergedProps.style ? {
 		...mergedProps.style,

package/dist/dev/utils/use-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport { resolveClassName } from '@videojs/utils/style';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<unknown> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes only when a component explicitly opts in with a\n  // mapping. State is still passed to render/className/style callbacks.\n  const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;AA6BA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CACnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAQ3C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC,GAIjC,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,GAAG;EAClD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,UAAU;EAE9D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EACpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAIA,YAAY,MADM,YAAY,KAAK,YAAY,GACrB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["import { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport { resolveClassName } from '@videojs/utils/style';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\n\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<unknown> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles: - Default tag rendering - Render prop (element or function) - Props merging (event handlers chained,\n * className concatenated, style merged) - Ref composition - className/style as functions of state\n *\n * @example\n *   ```tsx\n *   return renderElement('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [{ type: 'button' }, elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @public\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes only when a component explicitly opts in with a\n  // mapping. State is still passed to render/className/style callbacks.\n  const stateDataAttrs = stateAttrMap ? getStateDataAttrs(state, stateAttrMap) : {};\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;AA8BA,SAAS,aACP,OACA,OAC2B;CAC3B,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;AAC5C;AAEA,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;CAEnB,OAAO,WAAW,OAAO,WAAW,OAAO;AAC7C;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,KAAK;CACvD,MAAM,QAAQ,aAAa,WAAW,KAAK;CAI3C,MAAM,iBAAiB,eAAe,kBAAkB,OAAO,YAAY,IAAI,CAAC;CAIhF,MAAM,cAAc,WAAW,gBAAgB,GAD5B,MAAM,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC,KAAK,IAAI,CAAC,CACsB;CAE3F,IAAI,cAAc,KAAA,GAEhB,YAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;CAG5F,IAAI,UAAU,KAAA,GACZ,YAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;CAAM,IAAI;CAGlG,IAAI,WAAW,MAAM,GAAG;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,GAAG;EAElD,OAAO,OAAO;GAAE,GAAG;GAAa,KAAK;EAAU,GAAgB,KAAK;CACtE;CAEA,IAAI,eAAe,MAAM,GAAG;EAC1B,MAAM,aAAa,cAAc,MAAM;EAEvC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,UAAU;EAE9D,MAAM,eAAe,WAAW,aAAa,OAAO,KAAgC;EAEpF,aAAa,MAAM;EAEnB,OAAO,aAAa,QAAQ,YAAY;CAC1C;CAKA,YAAY,MAFM,YAAY,KAAK,YAAY,GAErB;CAE1B,OAAO,cAAc,SAAS,WAAW;AAC3C"}

package/dist/dev/utils/use-safe-id.js

@@ -4,10 +4,9 @@ const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
 * Generate a CSS-safe identifier from React's `useId()`.
 *
-* `useId()` returns values like `:r0:` which contain colons — invalid
-* in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
-* This hook strips non-alphanumeric/underscore/hyphen characters and
-* optionally prepends a prefix.
+* `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by
+* `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally
+* prepends a prefix.
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");

package/dist/dev/utils/use-safe-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;AAEA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["import { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid in CSS `<dashed-ident>` tokens (used by\n * `anchor-name` / `position-anchor`). This hook strips non-alphanumeric/underscore/hyphen characters and optionally\n * prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;AAEA,MAAM,eAAe;;;;;;;;AASrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAE5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

package/dist/dev/utils/use-sync-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\nimport { useRef } from 'react';\n\nexport function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(\n  target: Props,\n  props: Partial<Props> & Rest,\n  defaults: Props\n): Omit<Rest, keyof Props> {\n  const rest: Record<string, unknown> = {};\n  const synced = new Set<string>();\n  const prevSyncedRef = useRef<Set<string> | null>(null);\n\n  const sync = (key: string, value: unknown) => {\n    if (target[key as keyof Props] !== value) target[key as keyof Props] = value as Props[keyof Props];\n  };\n\n  // Reset props the consumer stopped passing (or passed as `undefined`) back to\n  // their defaults before applying the current ones, so a reset can never wipe a\n  // value another prop derives in the same render (e.g. `source` deriving `src`).\n  // Mirrors react-dom removing absent attributes.\n  for (const key of prevSyncedRef.current ?? []) {\n    if (isUndefined((props as Record<string, unknown>)[key])) sync(key, (defaults as Record<string, unknown>)[key]);\n  }\n\n  for (const key in props) {\n    if (key in defaults) {\n      if (isUndefined(props[key])) continue;\n      synced.add(key);\n      sync(key, props[key]);\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  prevSyncedRef.current = synced;\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;;AAGA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,CAAC;CACvC,MAAM,yBAAS,IAAI,IAAY;CAC/B,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,QAAQ,KAAa,UAAmB;EAC5C,IAAI,OAAO,SAAwB,OAAO,OAAO,OAAsB;CACzE;CAMA,KAAK,MAAM,OAAO,cAAc,WAAW,CAAC,GAC1C,IAAI,YAAa,MAAkC,IAAI,GAAG,KAAK,KAAM,SAAqC,IAAI;CAGhH,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU;EACnB,IAAI,YAAY,MAAM,IAAI,GAAG;EAC7B,OAAO,IAAI,GAAG;EACd,KAAK,KAAK,MAAM,IAAI;CACtB,OACE,KAAK,OAAO,MAAM;CAItB,cAAc,UAAU;CAExB,OAAO;AACT"}
+{"version":3,"file":"use-sync-props.js","names":[],"sources":["../../../src/utils/use-sync-props.ts"],"sourcesContent":["import { isUndefined } from '@videojs/utils/predicate';\nimport { useRef } from 'react';\n\nexport function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(\n  target: Props,\n  props: Partial<Props> & Rest,\n  defaults: Props\n): Omit<Rest, keyof Props> {\n  const rest: Record<string, unknown> = {};\n  const synced = new Set<string>();\n  const prevSyncedRef = useRef<Set<string> | null>(null);\n\n  const sync = (key: string, value: unknown) => {\n    if (target[key as keyof Props] !== value) target[key as keyof Props] = value as Props[keyof Props];\n  };\n\n  // Reset props the consumer stopped passing (or passed as `undefined`) back to\n  // their defaults before applying the current ones, so a reset can never wipe a\n  // value another prop derives in the same render (e.g. `source` deriving `src`).\n  // Mirrors react-dom removing absent attributes.\n  for (const key of prevSyncedRef.current ?? []) {\n    if (isUndefined((props as Record<string, unknown>)[key])) sync(key, (defaults as Record<string, unknown>)[key]);\n  }\n\n  for (const key in props) {\n    if (key in defaults) {\n      if (isUndefined(props[key])) continue;\n\n      synced.add(key);\n      sync(key, props[key]);\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  prevSyncedRef.current = synced;\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;;AAGA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,CAAC;CACvC,MAAM,yBAAS,IAAI,IAAY;CAC/B,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,QAAQ,KAAa,UAAmB;EAC5C,IAAI,OAAO,SAAwB,OAAO,OAAO,OAAsB;CACzE;CAMA,KAAK,MAAM,OAAO,cAAc,WAAW,CAAC,GAC1C,IAAI,YAAa,MAAkC,IAAI,GAAG,KAAK,KAAM,SAAqC,IAAI;CAGhH,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,UAAU;EACnB,IAAI,YAAY,MAAM,IAAI,GAAG;EAE7B,OAAO,IAAI,GAAG;EACd,KAAK,KAAK,MAAM,IAAI;CACtB,OACE,KAAK,OAAO,MAAM;CAItB,cAAc,UAAU;CAExB,OAAO;AACT"}

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/react documentation
 
-Bundled markdown documentation for `@videojs/react` v10.0.0-beta.30.
+Bundled markdown documentation for `@videojs/react` v10.0.0-beta.32.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/concepts/browser-support.md

@@ -1,6 +1,10 @@
-# Browser Support
+# Browser support
 
-Which browsers Video.js 10 supports and how it handles newer platform features
+Browsers and rendering environments supported by Video.js 10
+
+Support starts with an evergreen browser baseline and extends to the rendering environments described below.
+
+## Browser baseline
 
 Video.js 10 currently targets **evergreen browsers**: the latest two stable versions of Chrome, Firefox, Safari, and Edge.
 
@@ -8,7 +12,7 @@ Note
 
 Video.js 10 is in beta. The browser support matrix may expand as we approach GA based on community feedback and usage data.
 
-## Why evergreen?
+### Why evergreen?
 
 Video.js 10 builds directly on the web platform: custom elements, CSS custom properties, anchor positioning, and modern JavaScript APIs. Targeting evergreen browsers lets us:
 
@@ -16,17 +20,21 @@ Video.js 10 builds directly on the web platform: custom elements, CSS custom pro
 *   **Use platform-native features** like `popover` and anchor positioning instead of JavaScript equivalents
 *   **Keep the core slim** so platform-specific adapters (HTML, React) add only what they need
 
-## Progressive enhancement
+### Progressive enhancement
 
-When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to absolute positioning where it isn’t.
+When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to JavaScript-computed positioning where it isn’t.
 
 ## Rendering contexts
 
-### WebViews and PWAs
+### WebViews
+
+A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) can behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary.
+
+Video.js 10 beta targets standard browser environments. If you embed a player inside a native app, test it on each platform and WebView version you support.
 
-A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary. Progressive Web Apps (PWAs) installed via “Add to Homescreen” can exhibit similar quirks, since they also run in a limited browser context rather than a full browser tab.
+### Progressive Web Apps
 
-Video.js 10 beta targets only standard browser environments. If you embed a player inside a native app or PWA, test thoroughly for your specific platform and runtime.
+Installed Progressive Web Apps (PWAs) use the browser engine, but their standalone display mode and platform policies can affect fullscreen, media sessions, and other browser integration. Test playback both in a browser tab and in the installed app.
 
 ### Smart TVs and set-top boxes
 

package/docs/concepts/bundlers.md

@@ -0,0 +1,43 @@
+# Bundlers
+
+Bundler requirements for Video.js package exports, CSS, and wrapper libraries
+
+Before the browser runs your application, a bundler such as Vite combines its imports into files the browser can load. Your bundler must understand the import paths published by Video.js packages.
+
+## Package exports
+
+Each Video.js package has an `exports` field in its `package.json`. This field lists the import paths that applications and libraries can use, such as `@videojs/html/video/player` and `@videojs/react/live-video`.
+
+If an older bundler reports that one of these paths is missing or not exported, upgrade the bundler before adding an alias that bypasses the package’s public API.
+
+## Vite compatibility
+
+Use a current Vite release. Testing confirmed that Vite 5.4.19 can load Video.js JavaScript and CSS package exports. Vite 3.2.8 can load the JavaScript, but it cannot load an exported stylesheet such as `@videojs/html/video/skin.css`.
+
+Packaged HTML skins import their own styles, so an HTML application using `@videojs/html/video/skin` doesn’t need to import `skin.css` separately. The CSS limitation matters only when your application imports that stylesheet directly.
+
+## Externalize Video.js in a wrapper library
+
+You can skip this section when building an application.
+
+If you publish a library that expects its users to install Video.js separately, leave Video.js out of your library’s bundle. Rollup calls a dependency left out of the bundle **external**.
+
+Rollup’s array form matches only the exact package name, so `external: ['@videojs/html']` misses imports such as `@videojs/html/video/player`.
+
+Match the package name and everything below it instead:
+
+rollup.config.js
+
+```
+const videojsPeers = ['@videojs/html'];
+
+export default {
+  external(id) {
+    return videojsPeers.some(
+      (packageName) => id === packageName || id.startsWith(`${packageName}/`)
+    );
+  }
+};
+```
+
+Add every `@videojs/*` package your library imports directly to `videojsPeers` and list it in `peerDependencies`.

package/docs/concepts/media-sources.md

@@ -54,7 +54,7 @@ A side-car component’s own settings
 
 that component’s props
 
-[Mux Data](./mux-data.md), [Google Cast](./cast.md)
+[Mux Data](./mux-data.md), [GoogleCast](../reference/google-cast.md)
 
 `type` is worth reaching for when the URL lies about its contents. Video.js infers the content type from the file extension, so a manifest served from an extensionless or signed URL may need to say so explicitly:
 
@@ -138,16 +138,40 @@ options for the browser’s own HLS support (today, [DRM](#licensing-one-engine-
 
 `engine.vimeo`
 
-`VimeoVideo`
+[VimeoVideo](../reference/vimeo-video.md)
 
 [Vimeo embed parameters](https://developer.vimeo.com/player/sdk/embed)
 
 `engine.youtube`
 
-`YouTubeVideo`
+[YouTubeVideo](../reference/youtube-video.md)
 
 [YouTube player parameters](https://developer.chrome.com/docs/youtube/iframe_api_reference#Parameters)
 
+`engine.cloudflare`
+
+[CloudflareVideo](../reference/cloudflare-video.md)
+
+[Stream player parameters](https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/)
+
+`engine.spotify`
+
+[SpotifyAudio](../reference/spotify-audio.md)
+
+[Spotify embed options](https://developer.spotify.com/documentation/embeds)
+
+`engine.tiktok`
+
+[TikTokVideo](../reference/tiktok-video.md)
+
+[TikTok player parameters](https://developers.tiktok.com/doc/embed-player)
+
+`engine.twitch`
+
+[TwitchVideo](../reference/twitch-video.md)
+
+[Twitch embed parameters](https://dev.twitch.tv/docs/embed/video-and-clips/)
+
 Naming the engine rather than using one generic key matters where an element has more than one to choose from. `HlsJsVideo` plays through hls.js or through the browser depending on the platform and `preferPlayback`, and only one of them runs — so a single source can describe both paths without either engine reading the other’s options.
 
 hls.js reads its options when the engine is constructed, so changing them tears down the engine and builds a new one:
@@ -432,7 +456,7 @@ the [Mux Data](./mux-data.md) component’s own props
 
 `config.googleCast`
 
-the [Google Cast](./cast.md) component’s own props
+the [GoogleCast](../reference/google-cast.md) component’s own props
 
 `config` on VimeoVideo
 

package/docs/concepts/mux-data.md

@@ -79,8 +79,8 @@ The [MuxData reference](../reference/mux-data.md) lists every option: the metada
 
 [
 
-Google Cast
+Cast to AirPlay and Chromecast
 
-The other media component you compose onto a player
+Add Google Cast and AirPlay to a player
 
-](./cast.md)
+](../how-to/cast-to-airplay-and-chromecast.md)