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

package/dist/default/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\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 from state\n  const stateDataAttrs = 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":";;;;;;;;;AAyBA,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;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,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":["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"}

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

@@ -1,7 +1,4 @@
-'use client';
-
 import { useId } from "react";
-
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
@@ -14,9 +11,9 @@ const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");
-	return prefix ? `${prefix}${raw}` : raw;
+	return prefix ? `${prefix}-${raw}` : raw;
 }
-
 //#endregion
 export { useSafeId };
+
 //# sourceMappingURL=use-safe-id.js.map

package/dist/default/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,SAAS,QAAQ"}
+{"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"}

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

@@ -0,0 +1,23 @@
+import { useRef } from "react";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/utils/use-sync-props.ts
+function useSyncProps(target, props, defaults) {
+	const rest = {};
+	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
+export { useSyncProps };
+
+//# sourceMappingURL=use-sync-props.js.map

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

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

package/dist/dev/__generated__/skins/default-video/styles/base.css

@@ -0,0 +1,25 @@
+@layer videojs.base {
+  @scope (.media-skin) {
+    :scope,
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button {
+      font: inherit;
+      color: inherit;
+      letter-spacing: inherit;
+    }
+
+    svg {
+      display: block;
+    }
+
+    [hidden] {
+      /* Hidden must override component display styles. */
+      display: none !important;
+    }
+  }
+}

package/dist/dev/__generated__/skins/default-video/styles/buttons.css

@@ -0,0 +1,266 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-airplay-button:not([data-airplay-state='connected']) {
+      --media-icon-airplay-fill-animation: none;
+      --media-icon-airplay-triangle-animation: none;
+    }
+
+    .media-airplay-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-airplay-button) {
+      &:not([data-airplay-state='connected']) .media-airplay-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-airplay-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-airplay-button) {
+      &[data-airplay-state='connected'] .media-airplay-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-button {
+      width: calc(var(--media-spacing) * 9);
+      height: calc(var(--media-spacing) * 9);
+      min-height: calc(var(--media-spacing) * 0);
+      cursor: pointer;
+      touch-action: manipulation;
+      border-radius: var(--media-control-radius);
+      padding: calc(var(--media-spacing) * 0);
+      text-align: center;
+      color: inherit;
+      outline-offset: -2px;
+      -webkit-user-select: none;
+      user-select: none;
+      background-color: #0000;
+      border-style: solid;
+      border-width: 0;
+      outline: 2px solid #0000;
+      flex-shrink: 0;
+      place-items: center;
+      transition-property: background-color, color, outline-offset, scale;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: grid;
+    }
+
+    @media (hover: hover) {
+      .media-button:hover {
+        background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+        color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
+      }
+    }
+
+    .media-button:focus-visible {
+      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+
+    .media-button:not([aria-disabled='true']):active {
+      scale: 0.9;
+    }
+
+    .media-button[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .media-button[aria-expanded='true'] {
+      background-color: var(--media-accent-color, oklch(100% 0 0 / 0.1));
+      color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0% 0 0))));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .media-button {
+        transition-duration: 50ms;
+      }
+    }
+
+    .media-button-icon {
+      width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+      height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+      filter: drop-shadow(0 1px #00000026);
+    }
+
+    .media-captions-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-captions-button) {
+      &:not([data-active]) .media-captions-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-captions-on-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-captions-button) {
+      &[data-active] .media-captions-on-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-cast-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-cast-button) {
+      &:not([data-cast-state='connected']) .media-cast-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-cast-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-cast-button) {
+      &[data-cast-state='connected'] .media-cast-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-fullscreen-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &:not([data-fullscreen]) .media-fullscreen-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-fullscreen-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &[data-fullscreen] .media-fullscreen-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pause-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-started]:not([data-paused]):not([data-ended]) .media-pause-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pip-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-pip-button) {
+      &:not([data-pip]) .media-pip-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pip-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-pip-button) {
+      &[data-pip] .media-pip-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-play-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &:not([data-ended]):not([data-started]) .media-play-icon,
+      &:not([data-ended])[data-paused] .media-play-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-restart-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-ended] .media-restart-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-high-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted]):not([data-volume-level='low']) .media-volume-high-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-low-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted])[data-volume-level='low'] .media-volume-low-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &[data-muted] .media-volume-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+  }
+}

package/dist/dev/__generated__/skins/default-video/styles/captions.css

@@ -0,0 +1,22 @@
+@layer videojs.components {
+  @scope (.media-skin) {
+    video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -2);
+      transition: translate var(--media-controls-transition-duration) ease-out 25ms;
+    }
+
+    :scope.media-theme-default:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -14);
+    }
+
+    :scope.media-theme-minimal:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+      translate: 0 calc(var(--media-spacing) * -18);
+    }
+
+    @container media-root (width > 42rem) {
+      :scope.media-theme-minimal:has([data-controls][data-visible]) video::-webkit-media-text-track-container {
+        translate: 0 calc(var(--media-spacing) * -12);
+      }
+    }
+  }
+}

package/dist/dev/__generated__/skins/default-video/styles/container.css

@@ -0,0 +1,158 @@
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-container,
+    :scope.media-container {
+      isolation: isolate;
+      border-radius: var(--media-video-border-radius);
+      width: 100%;
+      height: 100%;
+      font-family:
+        ui-sans-serif,
+        system-ui,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji,
+        Segoe UI Symbol,
+        Noto Color Emoji;
+      font-size: calc(var(--media-spacing) * 3.25);
+      -webkit-font-smoothing: auto;
+      -moz-osx-font-smoothing: auto;
+      outline-offset: -4px;
+      --spacing: var(--media-spacing);
+      background-color: #000;
+      outline: 2px solid #0000;
+      line-height: 1.5;
+      transition-property: outline-offset, outline-color;
+      transition-duration: 0.1s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+      position: relative;
+      overflow: hidden;
+      container: media-root / inline-size;
+    }
+
+    .media-container:before,
+    :scope.media-container:before {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      opacity: 0;
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      content: '';
+      background-repeat: no-repeat;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+    }
+
+    .media-container:after,
+    :scope.media-container:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      z-index: 10;
+      border-radius: inherit;
+      content: '';
+      position: absolute;
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        inset 0 0 0 1px light-dark(#0000001a, #ffffff26);
+    }
+
+    .media-container:focus-visible,
+    :scope.media-container:focus-visible {
+      outline-offset: 2px;
+      outline-color: #fff;
+    }
+
+    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before,
+    :scope.media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
+      content: '';
+      opacity: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .media-container,
+      :scope.media-container {
+        transition-duration: 50ms;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .media-container:after,
+      :scope.media-container:after {
+        content: '';
+        box-shadow:
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          0 0 #0000,
+          inset 0 0 0 1px canvastext;
+      }
+
+      .media-container:focus-visible,
+      :scope.media-container:focus-visible {
+        outline-color: canvastext;
+      }
+    }
+
+    @media (pointer: fine) {
+      .media-container:has([data-controls]:not([data-visible])),
+      :scope.media-container:has([data-controls]:not([data-visible])) {
+        cursor: none;
+      }
+    }
+
+    .media-container video,
+    :scope.media-container video {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .media-container:fullscreen,
+    :scope.media-container:fullscreen {
+      --media-video-border-radius: 0;
+    }
+
+    .media-container:fullscreen:after,
+    :scope.media-container:fullscreen:after {
+      content: '';
+      display: none;
+    }
+
+    @media (width >= 1280px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.25;
+      }
+    }
+
+    @media (width >= 1536px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.5;
+      }
+    }
+
+    @media (width >= 1920px) {
+      .media-container:fullscreen,
+      :scope.media-container:fullscreen {
+        --media-scale: 1.75;
+      }
+    }
+
+    .media-container:fullscreen video,
+    :scope.media-container:fullscreen video {
+      object-fit: contain;
+    }
+  }
+}