@videojs/react 10.0.0-beta.25 → 10.0.0-beta.27

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":";;;;;KAeK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAiDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}
+{"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;;;;;;;;;;;;;;;;;;;;;;iBA4Cd,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\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 resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\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":";;;;;;;;AAWA,SAAgB,aAAa,OAA8C;AACzE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,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,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAQ5C,MAAM,cAAc,WAJG,eAAe,kBAAkB,OAAO,aAAa,GAAG,EAAE,EAIlC,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,KAAA,EAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,KAAA,EACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\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 resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\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":";;;;;;;;AAWA,SAAgB,aAAa,OAA8C;CACzE,OAAO,WAAW,KAAK,KAAK,eAAe,KAAK;AAClD;AAiBA,SAAS,iBACP,WACA,OACoB;CACpB,OAAO,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;AACpD;AAEA,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"}

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":["'use client';\n\nimport { 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":";;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,OAAO,GAAG,QAAQ"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { 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":";;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,MAAM,CAAC,CAAC,QAAQ,cAAc,EAAE;CAC5C,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AACvC"}

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

@@ -1,11 +1,20 @@
+import { useRef } from "react";
 import { isUndefined } from "@videojs/utils/predicate";
 //#region src/utils/use-sync-props.ts
 function useSyncProps(target, props, defaults) {
 	const rest = {};
-	for (const key in props) if (key in defaults) {
-		const value = isUndefined(props[key]) ? defaults[key] : props[key];
+	const synced = /* @__PURE__ */ new Set();
+	const prevSyncedRef = useRef(null);
+	const sync = (key, value) => {
 		if (target[key] !== value) target[key] = value;
+	};
+	for (const key of prevSyncedRef.current ?? []) if (isUndefined(props[key])) sync(key, defaults[key]);
+	for (const key in props) if (key in defaults) {
+		if (isUndefined(props[key])) continue;
+		synced.add(key);
+		sync(key, props[key]);
 	} else rest[key] = props[key];
+	prevSyncedRef.current = synced;
 	return rest;
 }
 //#endregion

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';\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\n  for (const key in props) {\n    if (key in defaults) {\n      const value = isUndefined(props[key]) ? (defaults as Record<string, unknown>)[key] : props[key];\n      if (target[key as keyof typeof target] !== value) target[key as keyof typeof target] = value as any;\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  return rest as Omit<Rest, keyof Props>;\n}\n"],"mappings":";;AAEA,SAAgB,aACd,QACA,OACA,UACyB;CACzB,MAAM,OAAgC,EAAE;AAExC,MAAK,MAAM,OAAO,MAChB,KAAI,OAAO,UAAU;EACnB,MAAM,QAAQ,YAAY,MAAM,KAAK,GAAI,SAAqC,OAAO,MAAM;AAC3F,MAAI,OAAO,SAAgC,MAAO,QAAO,OAA8B;OAEvF,MAAK,OAAO,MAAM;AAItB,QAAO"}
+{"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"}

package/docs/README.md

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

package/docs/concepts/accessibility.md

@@ -27,6 +27,14 @@ All interactive components support keyboard control. For example, buttons activa
 
 Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`.
 
+The player container is focusable and labeled: it takes `role="group"`, `tabindex="0"`, and an `aria-label` you can override. Keyboard users can tab to the player as a whole, and screen readers announce it as a named group.
+
+## Status announcements
+
+The player announces confirmed state changes through a visually hidden live region (`role="status"`), so screen reader users hear when playback starts or pauses, captions turn on or off, fullscreen, picture-in-picture, playback rate, or volume change, and where a seek lands.
+
+Announcements follow confirmed state from the player store rather than requested changes, so routine time updates never reach the live region. Rapid volume and seek changes are grouped into a single announcement, and the player stays quiet while one of its sliders has focus, since the slider already announces its own value. State the store tracks is covered for you; a custom control that tracks its own state needs its own live region.
+
 ## Captions and subtitles
 
 The [text tracks feature](../reference/feature-text-tracks.md) supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these customization preferences into the web platform natively.

package/docs/concepts/cast.md

@@ -1,23 +1,58 @@
 # Google Cast
 
-How to add Chromecast support to your Video.js player — lazy SDK loading, session lifecycle, and configuration options
+Cast playback to Chromecast devices with the Google Cast component, and configure the receiver and load request
 
-Video.js has built-in Google Cast support for HLS and DASH media elements. When a Chromecast device is on the same network, a Cast button appears automatically in Chromium browsers. Tapping it starts a session that moves playback to the TV while the browser stays in control.
+Add Google Cast to any Video.js streaming media element (HLS and DASH) by placing the Google Cast component next to it. Pair it with a [CastButton](../reference/cast-button.md) and users can move playback to a Chromecast device while the browser stays in control:
+
+App.tsx
+
+```
+import { CastButton, Container, createPlayer } from '@videojs/react';
+import { GoogleCast } from '@videojs/react/media/google-cast';
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { videoFeatures } from '@videojs/react/video';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function App() {
+  return (
+    <Player>
+      <Container>
+        <HlsJsVideo
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <GoogleCast />
+        <CastButton />
+      </Container>
+    </Player>
+  );
+}
+```
+
+The component registers Google Cast with whichever media the player is using, so it works with any of the streaming media elements. The pre-built [skins](./skins.md) include a Cast button already. It appears when a Chromecast device is on the network and stays hidden otherwise.
+
+Caution
+
+Casting needs this component. Without it, [CastButton](../reference/cast-button.md) drives the browser’s native Remote Playback API rather than a Cast session, so receivers and load requests don’t apply.
 
 Note
 
-Cast is only available in Chromium-based browsers (Chrome, Edge, and others built on Blink). On other browsers, `remotePlaybackAvailability` is `'unsupported'`.
+Cast only works in Chromium-based browsers (Chrome, Edge, and others built on Blink). On other browsers, `remotePlaybackAvailability` is `'unsupported'`.
 
 ## How Cast works
 
 Cast uses a **sender / receiver** model:
 
-*   **Sender** — the browser tab. It controls playback commands (play, pause, seek, volume) and sends a load request to the receiver with the source URL and metadata.
-*   **Receiver** — the Chromecast device running the default media receiver application (or a custom receiver you configure).
+*   **Sender**: the browser tab. It sends the receiver a load request with the source URL and metadata, then issues playback commands (play, pause, seek, volume).
+*   **Receiver**: the Chromecast device running a receiver application, either Google’s default media receiver or a custom one you configure.
 
 ### Session lifecycle
 
-A Cast session moves through three states, exposed via the [Remote Playback](../reference/feature-remote-playback.md) feature:
+A Cast session moves through three states, exposed by the [Remote Playback](../reference/feature-remote-playback.md) feature:
 
 State
 
@@ -29,19 +64,19 @@ No active session
 
 `'connecting'`
 
-User accepted; session negotiating
+Device picked; session starting
 
 `'connected'`
 
-Receiver is playing
+Session active; receiver has the media
 
-While `connected`, the media element’s `play`, `pause`, `currentTime`, `volume`, `muted`, and `playbackRate` all proxy to the Cast receiver. Local playback is suspended.
+While `connected`, the media element’s `play`, `pause`, `currentTime`, `volume`, `muted`, and `playbackRate` all forward to the Cast receiver. Local playback is suspended.
 
 ### The lazy-loaded SDK
 
-The Cast SDK (`cast_sender.js`) is injected into the page as a `<script>` tag the first time a Cast-capable media element is created in a Chromium browser. No SDK cost is paid on browsers that don’t support Cast.
+Video.js injects the Cast SDK (`cast_sender.js`) as a `<script>` tag the first time a Google Cast component is added in a Chromium browser. Browsers that can’t cast — and players without the component — never load the SDK.
 
-Set `disableRemotePlayback` on the media element to opt out:
+Set `disableRemotePlayback` on the media element to opt out of remote playback entirely:
 
 tsx
 
@@ -49,86 +84,26 @@ tsx
 <HlsJsVideo disableRemotePlayback />
 ```
 
-## Minimal setup
-
-Cast works out of the box with the `videoFeatures` preset — no extra configuration needed. Add a `CastButton` to give users a way to start and stop a session:
-
-tsx
-
-```
-import { createPlayer, CastButton } from '@videojs/react';
-import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
-import { videoFeatures } from '@videojs/react/video';
-
-const Player = createPlayer({ features: videoFeatures });
-
-export default function App() {
-  return (
-    <Player.Provider>
-      <Player.Container>
-        <HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoPlay muted playsInline loop />
-        <CastButton />
-      </Player.Container>
-    </Player.Provider>
-  );
-}
-```
-
-## Configuring Cast
-
-All Cast configuration is set via the `config.googleCast` property. In React, pass it as a declarative prop. In HTML, set it as a JavaScript property; HTML attributes are not supported.
-
-### Custom receiver application ID
-
-By default, Video.js uses Google’s [Default Media Receiver](https://developers.google.com/cast/docs/web_sender/integrate#default_media_web_receiver) (`CC1AD845`). To use your own receiver app, set `receiver`:
-
-tsx
-
-```
-<HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" config={{ googleCast: { receiver: 'YOUR_APP_ID' } }} />
-```
-
-### Custom data on load
+## Configure Cast
 
-Pass arbitrary data to the receiver with each load request via `customData`. The receiver app reads it from the `customData` field of the load request:
+By default, the receiver loads the same source the browser plays through Google’s [Default Media Receiver](https://developers.google.com/cast/docs/web_sender/integrate#default_media_web_receiver). Point Cast at your own receiver app, send a different source, attach custom data to the load request, or override the stream type through the component’s options:
 
 tsx
 
 ```
-<HlsJsVideo
+<HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
+<GoogleCast
+  receiver="YOUR_APP_ID"
   src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
-  config={{ googleCast: { customData: { token: 'abc123', userId: 'u_789' } } }}
+  contentType="application/x-mpegURL"
 />
 ```
 
-### Cast source override
-
-By default the receiver loads the same URL as the browser. Use `src` (and optionally `contentType`) to send a different URL, for example, a separate manifest or CDN-edge URL accessible from the TV network:
-
-tsx
+The [GoogleCast reference](../reference/google-cast.md) documents every option. HLS sources need no extra receiver setup: Video.js detects the segment format and configures the load request, and the Default Media Receiver plays HLS natively.
 
-```
-<HlsJsVideo
-  src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-  config={{ googleCast: { src: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8', contentType: 'application/x-mpegURL' } }}
-/>
-```
+## Read Cast state
 
-### HLS on the receiver
-
-When the source (or `config.googleCast.src`) is an HLS playlist, Video.js automatically detects the segment format (TS or fMP4) by inspecting the playlist and sets `hlsSegmentFormat` / `hlsVideoSegmentFormat` on the Cast load request. The default media receiver handles HLS natively, so no extra configuration is needed.
-
-Use `streamType` to tell the receiver whether the stream is `'on-demand'` or `'live'` (falls back to the player’s `streamType` when unset):
-
-tsx
-
-```
-<HlsJsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" config={{ googleCast: { streamType: 'live' } }} />
-```
-
-## Cast state and selectors
-
-Cast session state lives in the [Remote Playback](../reference/feature-remote-playback.md) feature slice. Use `selectRemotePlayback` to subscribe:
+Cast session state lives in the [Remote Playback](../reference/feature-remote-playback.md) feature slice. Subscribe with `selectRemotePlayback`:
 
 tsx
 
@@ -145,18 +120,12 @@ function CastStatus() {
 
 ## Browser availability
 
-Cast availability is surfaced as `remotePlaybackAvailability` on the remote playback feature. Hide the button when unsupported:
-
-css
-
-```
-.cast-button[data-availability="unsupported"] {
-  display: none;
-}
-```
+The Remote Playback feature reports availability as `'available'` (a device is on the network), `'unavailable'` (no device found), or `'unsupported'` (the browser can’t cast). A [CastButton](../reference/cast-button.md) handles the presentation for you: it hides itself when Cast is unsupported, and shows a disabled state when Cast is supported but no device is reachable. See its reference for the data attributes and styling hooks.
 
 ## See also
 
+[GoogleCast reference](../reference/google-cast.md)
+
 [CastButton component reference](../reference/cast-button.md)
 
 [Remote Playback feature reference](../reference/feature-remote-playback.md)

package/docs/concepts/features.md

@@ -10,15 +10,18 @@ Not every player needs to support every use case. To address this, Video.js has
 
 You probably don’t want to hand-pick every feature your player needs. A **feature bundle** groups the features needed for a specific use case into a single array.
 
-For example, `videoFeatures` bundles playback, volume, time, fullscreen, and more — everything a general video player needs:
+For example, the `/video` preset configures `VideoPlayer` with `videoFeatures`, which bundles playback, volume, time, fullscreen, and more — everything a general video player needs:
 
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
-import { videoFeatures } from '@videojs/react/video';
+import { VideoPlayer, Video, VideoSkin } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+<VideoPlayer>
+  <VideoSkin>
+    <Video src="movie.mp4" />
+  </VideoSkin>
+</VideoPlayer>
 ```
 
 Feature bundles are usually paired with specific skins and media elements in a **preset**. To learn more about this, and the available presets, you’ll want to check out the presets guide.
@@ -34,7 +37,7 @@ tsx
 ```
 import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';
 
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
 });
 ```
@@ -49,7 +52,7 @@ tsx
 import { createPlayer, playbackFeature } from '@videojs/react';
 import { backgroundFeatures } from '@videojs/react/background';
 
-const Player = createPlayer({
+const { Player } = createPlayer({
   features: [...backgroundFeatures, playbackFeature],
 });
 ```
@@ -106,13 +109,21 @@ Could work, not ready yet
 
 Platform can never do this
 
-Components that depend on availability (like [`PiPButton`](../reference/pip-button.md) and [`FullscreenButton`](../reference/fullscreen-button.md)) expose a `data-availability` attribute, so you can hide unsupported controls with CSS:
+Components that depend on availability (like [`PiPButton`](../reference/pip-button.md) and [`FullscreenButton`](../reference/fullscreen-button.md)) handle the three states for you:
+
+*   **`unsupported`** — the HTML custom element receives the native `hidden` attribute (and `data-hidden`); React buttons return `null`. No CSS needed.
+*   **`unavailable`** — the presentation controls stay hidden while capability detection is unresolved. Cast remains visible but disabled when its API is supported and no device is reachable.
+*   **`disabled` prop** — an available button stays visible and focusable with `aria-disabled="true"` plus `data-disabled` for styling.
+*   **`available`** — fully interactive.
+
+Use `data-disabled` to style the non-interactive state:
 
 css
 
 ```
-.pip-button[data-availability="unsupported"] {
-  display: none;
+.pip-button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 ```
 
@@ -124,7 +135,7 @@ PiPControl.tsx
 function PiPControl() {
   const availability = usePlayer((s) => s.pipAvailability);
 
-  if (availability === 'unsupported') return null;
+  if (availability !== 'available') return null;
 
   return <PiPButton />;
 }