@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.3

package/dist/default/ui/time/time-group.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-group.tsx
+/**
+* Container for composed time displays. Renders a `<span>` element.
+*
+* @example
+* ```tsx
+* <Time.Group>
+*   <Time.Value type="current" />
+*   <Time.Separator />
+*   <Time.Value type="duration" />
+* </Time.Group>
+* ```
+*/
+const Group = forwardRef(function Group(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{ children }, elementProps]
+	});
+});
+
+//#endregion
+export { Group };
+//# sourceMappingURL=time-group.js.map

package/dist/default/ui/time/time-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n * ```tsx\n * <Time.Group>\n *   <Time.Value type=\"current\" />\n *   <Time.Separator />\n *   <Time.Value type=\"duration\" />\n * </Time.Group>\n * ```\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;AAIhE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}

package/dist/default/ui/time/time-separator.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-separator.tsx
+/**
+* Divider between time values. Hidden from screen readers.
+*
+* @example
+* ```tsx
+* <Time.Separator />
+* <Time.Separator> of </Time.Separator>
+* ```
+*/
+const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
+	const { render, className, style, children = "/", ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			"aria-hidden": "true",
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Separator };
+//# sourceMappingURL=time-separator.js.map

package/dist/default/ui/time/time-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}

package/dist/default/ui/time/time-value.js

@@ -0,0 +1,54 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+
+//#region src/ui/time/time-value.tsx
+/**
+* Displays a formatted time value (current, duration, or remaining).
+*
+* @example
+* ```tsx
+* <Time.Value />
+* <Time.Value type="duration" />
+* <Time.Value type="remaining" negativeSign="−" />
+* ```
+*/
+const Value = forwardRef(function Value(componentProps, forwardedRef) {
+	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new TimeCore());
+	core.setProps({
+		type,
+		negativeSign,
+		label
+	});
+	if (!time) return null;
+	const state = core.getState(time);
+	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: negativeSign ?? TimeCore.defaultProps.negativeSign
+	}), state.text] }) : state.text;
+	return renderElement("time", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeDataAttrs,
+		ref: [forwardedRef],
+		props: [{
+			dateTime: state.datetime,
+			children: content,
+			...core.getAttrs(state)
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Value };
+//# sourceMappingURL=time-value.js.map

package/dist/default/ui/time/time-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,KAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CAEjC,MAAM,UAAU,MAAM,WACpB,4CACE,oBAAC;EAAK,eAAY;YAAQ,gBAAgB,SAAS,aAAa;GAAoB,EACnF,MAAM,QACN,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}

package/dist/default/utils/attach-media-element.js

@@ -0,0 +1,12 @@
+//#region src/utils/attach-media-element.ts
+function attachMediaElement(media) {
+	return (element) => {
+		if (element) media.attach(element);
+		else media.detach();
+		return () => media.detach();
+	};
+}
+
+//#endregion
+export { attachMediaElement };
+//# sourceMappingURL=attach-media-element.js.map

package/dist/default/utils/attach-media-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-media-element.js","names":[],"sources":["../../../src/utils/attach-media-element.ts"],"sourcesContent":["interface Attachable {\n  attach(target: EventTarget): void;\n  detach(): void;\n}\n\nexport function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void {\n  return (element: T | null) => {\n    if (element) {\n      media.attach(element);\n    } else {\n      media.detach();\n    }\n    // React 19+ accepts a cleanup function as the return value\n    return () => media.detach();\n  };\n}\n"],"mappings":";AAKA,SAAgB,mBAA+C,OAAgD;AAC7G,SAAQ,YAAsB;AAC5B,MAAI,QACF,OAAM,OAAO,QAAQ;MAErB,OAAM,QAAQ;AAGhB,eAAa,MAAM,QAAQ"}

package/dist/default/utils/media-props.js

@@ -0,0 +1,11 @@
+//#region src/utils/media-props.ts
+function mediaProps(media, props) {
+	const { src, ...remainingProps } = props;
+	if (props.preload && media.preload !== props.preload) media.preload = props.preload;
+	if (media.src !== src) media.src = src ?? "";
+	return remainingProps;
+}
+
+//#endregion
+export { mediaProps };
+//# sourceMappingURL=media-props.js.map

package/dist/default/utils/media-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-props.js","names":[],"sources":["../../../src/utils/media-props.ts"],"sourcesContent":["import type { MediaApi } from '@videojs/core/dom';\nimport type { VideoHTMLAttributes } from 'react';\n\ninterface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport function mediaProps(media: MediaApi, props: VideoProps) {\n  const { src, ...remainingProps } = props;\n\n  // Preload can still be passed as a prop to the native media element\n  if (props.preload && media.preload !== props.preload) {\n    media.preload = props.preload as '' | 'none' | 'metadata' | 'auto';\n  }\n\n  if (media.src !== src) {\n    media.src = src ?? '';\n  }\n\n  // The remaining props are passed to the native media element\n  return remainingProps;\n}\n"],"mappings":";AAKA,SAAgB,WAAW,OAAiB,OAAmB;CAC7D,MAAM,EAAE,KAAK,GAAG,mBAAmB;AAGnC,KAAI,MAAM,WAAW,MAAM,YAAY,MAAM,QAC3C,OAAM,UAAU,MAAM;AAGxB,KAAI,MAAM,QAAQ,IAChB,OAAM,MAAM,OAAO;AAIrB,QAAO"}

package/dist/default/utils/merge-props.js

@@ -0,0 +1,85 @@
+'use client';
+
+//#region src/utils/merge-props.ts
+/**
+* Check if a key is an event handler key (on* with capital letter).
+*/
+function isEventHandlerKey(key) {
+	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+/**
+* Check if a key/value pair is an event handler (includes undefined values).
+*/
+function isEventHandler(key, value) {
+	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
+}
+/**
+* Merge two event handlers - external runs first, ours runs second.
+*/
+function mergeEventHandlers(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return (event) => {
+		theirs(event);
+		ours(event);
+	};
+}
+/**
+* Merge two className values - concatenate strings.
+*/
+function mergeClassNames(ours, theirs) {
+	if (theirs && ours) return `${theirs} ${ours}`;
+	return theirs || ours;
+}
+/**
+* Merge two style objects - theirs overwrites conflicts.
+*/
+function mergeStyles(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return {
+		...ours,
+		...theirs
+	};
+}
+/**
+* Merge a single props object into accumulated result.
+*/
+function mergeOne(merged, props) {
+	if (!props) return merged;
+	for (const key in props) {
+		const value = props[key];
+		if (key === "className") merged.className = mergeClassNames(merged.className, value);
+		else if (key === "style") merged.style = mergeStyles(merged.style, value);
+		else if (isEventHandler(key, value)) merged[key] = mergeEventHandlers(merged[key], value);
+		else merged[key] = value;
+	}
+	return merged;
+}
+/**
+* Merge multiple props objects.
+*
+* - Event handlers (on*): chained - external first, ours second
+* - className: concatenated
+* - style: merged objects (external wins conflicts)
+* - other: last one wins
+*
+* @public
+* @example
+* ```ts
+* const merged = mergeProps(
+*   { onClick: ourHandler, className: 'base' },
+*   { onClick: theirHandler, className: 'custom' }
+* );
+* // { onClick: chainedHandler, className: 'custom base' }
+* ```
+*/
+function mergeProps(...propSets) {
+	let merged = {};
+	for (const props of propSets) merged = mergeOne(merged, props);
+	return merged;
+}
+
+//#endregion
+export { mergeProps };
+//# sourceMappingURL=merge-props.js.map

package/dist/default/utils/merge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}

package/dist/default/utils/use-composed-refs.js

@@ -0,0 +1,57 @@
+'use client';
+
+import { useCallback } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+
+//#region src/utils/use-composed-refs.ts
+/**
+* Set a given ref to a given value.
+*
+* Handles both callback refs and RefObject(s).
+*
+* @returns Cleanup function if the ref callback returned one (React 19+)
+*/
+function setRef(ref, value) {
+	if (isFunction(ref)) return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* Compose multiple refs into a single callback ref.
+*
+* @example
+* ```tsx
+* const composedRef = composeRefs(ref1, ref2, ref3);
+* return <div ref={composedRef} />;
+* ```
+*/
+function composeRefs(...refs) {
+	const flatRefs = refs.flat();
+	return (node) => {
+		const cleanups = flatRefs.map((ref) => setRef(ref, node));
+		if (cleanups.some(isFunction)) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (isFunction(cleanup)) cleanup();
+				else setRef(flatRefs[i], null);
+			}
+		};
+	};
+}
+/**
+* Hook that composes multiple refs into a single callback ref.
+*
+* Memoized for stable reference.
+*
+* @example
+* ```tsx
+* const composedRef = useComposedRefs(forwardedRef, localRef);
+* return <div ref={composedRef} />;
+* ```
+*/
+function useComposedRefs(...refs) {
+	return useCallback(composeRefs(...refs), [...refs]);
+}
+
+//#endregion
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.js.map

package/dist/default/utils/use-composed-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,OACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { composeRefs } from "./use-composed-refs.js";
+import { mergeProps } from "./merge-props.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { cloneElement, createElement, isValidElement } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+
+//#region src/utils/use-render.tsx
+function resolveClassName(className, state) {
+	return isFunction(className) ? className(state) : className;
+}
+function resolveStyle(style, state) {
+	return isFunction(style) ? style(state) : style;
+}
+function getElementRef(element) {
+	const elementAny = element;
+	return elementAny.ref ?? elementAny.props?.ref;
+}
+/**
+* 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
+*
+* @public
+* @example
+* ```tsx
+* return renderElement('button', componentProps, {
+*   state,
+*   ref: [forwardedRef, buttonRef],
+*   props: [{ type: 'button' }, elementProps, getButtonProps],
+* });
+* ```
+*/
+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(getStateDataAttrs(state, stateAttrMap), ...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,
+		...style
+	} : style;
+	if (isFunction(render)) {
+		const mergedRef = composeRefs(ref, mergedProps.ref);
+		return render({
+			...mergedProps,
+			ref: mergedRef
+		}, state);
+	}
+	if (isValidElement(render)) {
+		const elementRef = getElementRef(render);
+		const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);
+		const elementProps = mergeProps(mergedProps, render.props);
+		elementProps.ref = mergedRef;
+		return cloneElement(render, elementProps);
+	}
+	mergedProps.ref = composeRefs(ref, mergedProps.ref);
+	return createElement(element, mergedProps);
+}
+
+//#endregion
+export { renderElement };
+//# sourceMappingURL=use-render.js.map

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

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

package/dist/dev/_virtual/_rolldown/runtime.js

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/dist/dev/index.d.ts

@@ -0,0 +1,23 @@
+import { Container, ContainerProps, PlayerContextValue, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
+import { CreatePlayerConfig, CreatePlayerResult, ProviderProps, createPlayer } from "./player/create-player.js";
+import { HTMLProps, RenderFunction, RenderProp, UIComponentProps } from "./utils/types.js";
+import { BufferingIndicator, BufferingIndicatorProps } from "./ui/buffering-indicator/buffering-indicator.js";
+import { ControlsGroupProps } from "./ui/controls/controls-group.js";
+import { ControlsRootProps } from "./ui/controls/controls-root.js";
+import { index_parts_d_exports } from "./ui/controls/index.parts.js";
+import "./ui/controls/index.js";
+import { FullscreenButton, FullscreenButtonProps } from "./ui/fullscreen-button/fullscreen-button.js";
+import { useButton } from "./ui/hooks/use-button.js";
+import { MuteButton, MuteButtonProps } from "./ui/mute-button/mute-button.js";
+import { PiPButton, PiPButtonProps } from "./ui/pip-button/pip-button.js";
+import { PlayButton, PlayButtonProps } from "./ui/play-button/play-button.js";
+import { Poster, PosterProps } from "./ui/poster/poster.js";
+import { SeekButton, SeekButtonProps } from "./ui/seek-button/seek-button.js";
+import { index_parts_d_exports as index_parts_d_exports$1 } from "./ui/time/index.parts.js";
+import "./ui/time/index.js";
+import { mergeProps } from "./utils/merge-props.js";
+import { renderElement } from "./utils/use-render.js";
+import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";
+import { useSelector, useStore } from "@videojs/store/react";
+export * from "@videojs/core/dom";
+export { BufferingIndicator, type BufferingIndicatorProps, type Comparator, Container, type ContainerProps, index_parts_d_exports as Controls, type ControlsGroupProps, type ControlsRootProps, type CreatePlayerConfig, type CreatePlayerResult, FullscreenButton, type FullscreenButtonProps, type HTMLProps, MuteButton, type MuteButtonProps, PiPButton, type PiPButtonProps, PlayButton, type PlayButtonProps, type PlayerContextValue, Poster, type PosterProps, type ProviderProps, type RenderFunction, type RenderProp, SeekButton, type SeekButtonProps, type Selector, index_parts_d_exports$1 as Time, type UIComponentProps, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, useSelector, useStore };

package/dist/dev/index.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { Container, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
+import { createPlayer } from "./player/create-player.js";
+import { mergeProps } from "./utils/merge-props.js";
+import { renderElement } from "./utils/use-render.js";
+import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator.js";
+import { index_parts_exports } from "./ui/controls/index.parts.js";
+import { useButton } from "./ui/hooks/use-button.js";
+import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
+import { MuteButton } from "./ui/mute-button/mute-button.js";
+import { PiPButton } from "./ui/pip-button/pip-button.js";
+import { PlayButton } from "./ui/play-button/play-button.js";
+import { Poster } from "./ui/poster/poster.js";
+import { SeekButton } from "./ui/seek-button/seek-button.js";
+import { index_parts_exports as index_parts_exports$1 } from "./ui/time/index.parts.js";
+import { createSelector, shallowEqual } from "@videojs/store";
+import { useSelector, useStore } from "@videojs/store/react";
+
+export * from "@videojs/core/dom"
+
+export { BufferingIndicator, Container, index_parts_exports as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, Poster, SeekButton, index_parts_exports$1 as Time, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, useSelector, useStore };

package/dist/dev/media/audio.d.ts

@@ -0,0 +1,12 @@
+import * as react from "react";
+import { AudioHTMLAttributes } from "react";
+
+//#region src/media/audio.d.ts
+interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}
+declare const Audio: react.ForwardRefExoticComponent<AudioProps & react.RefAttributes<HTMLAudioElement>>;
+declare namespace Audio {
+  type Props = AudioProps;
+}
+//#endregion
+export { Audio, AudioProps };
+//# sourceMappingURL=audio.d.ts.map

package/dist/dev/media/audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.d.ts","names":[],"sources":["../../../src/media/audio.tsx"],"mappings":";;;;UAQiB,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,cAE3C,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,UAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}

package/dist/dev/media/audio.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { useComposedRefs } from "../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/media/audio.tsx
+const Audio = forwardRef(function Audio({ children, ...props }, ref) {
+	const setMedia = useMediaRegistration();
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(ref, useCallback((el) => {
+			setMedia?.(el);
+		}, [setMedia])),
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { Audio };
+//# sourceMappingURL=audio.js.map

package/dist/dev/media/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport type { AudioHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLAudioElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB,GAAI;EAC1B;GACK;EAEV"}

package/dist/dev/media/background-video/index.d.ts

@@ -0,0 +1,12 @@
+import * as react from "react";
+import { VideoHTMLAttributes } from "react";
+
+//#region src/media/background-video/index.d.ts
+interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
+declare const BackgroundVideo: react.ForwardRefExoticComponent<BackgroundVideoProps & react.RefAttributes<HTMLVideoElement>>;
+declare namespace BackgroundVideo {
+  type Props = BackgroundVideoProps;
+}
+//#endregion
+export { BackgroundVideo, BackgroundVideoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/background-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"mappings":";;;;UAQiB,oBAAA,SAA6B,mBAAA,CAAoB,gBAAA;AAAA,cAErD,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAsBX,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}

package/dist/dev/media/background-video/index.js

@@ -0,0 +1,28 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/media/background-video/index.tsx
+const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
+	const setMedia = useMediaRegistration();
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(ref, useCallback((el) => {
+			setMedia?.(el);
+		}, [setMedia])),
+		muted: true,
+		autoPlay: true,
+		loop: true,
+		playsInline: true,
+		disableRemotePlayback: true,
+		disablePictureInPicture: true,
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { BackgroundVideo };
+//# sourceMappingURL=index.js.map

package/dist/dev/media/background-video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB;EAAM;EAAS;EAAK;EAAY;EAAsB;EAAwB,GAAI;EACxG;GACK;EAEV"}

package/dist/dev/media/hls-video/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from "react";
+import { PropsWithChildren, VideoHTMLAttributes } from "react";
+
+//#region src/media/hls-video/index.d.ts
+type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+declare const HlsVideo: react.ForwardRefExoticComponent<VideoHTMLAttributes<HTMLVideoElement> & {
+  children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLVideoElement>>;
+//#endregion
+export { HlsVideo, HlsVideo as default, HlsVideoProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/dev/media/hls-video/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"mappings":";;;;KAQY,aAAA,GAAgB,iBAAA,CAAkB,mBAAA,CAAoB,gBAAA;AAAA,cAErD,QAAA,QAAQ,yBAAA,CAAA,mBAAA,CAAA,gBAAA;aAAA,KAAA,CAAA,SAAA;AAAA"}

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

@@ -0,0 +1,25 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../../player/context.js";
+import { attachMediaElement } from "../../utils/attach-media-element.js";
+import { mediaProps } from "../../utils/media-props.js";
+import { forwardRef, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsMedia } from "@videojs/core/dom/media/hls";
+
+//#region src/media/hls-video/index.tsx
+const HlsVideo = forwardRef(({ children, ...props }, ref) => {
+	const mediaApi = useMemo(() => new HlsMedia(), []);
+	const setMedia = useMediaRegistration();
+	useEffect(() => {
+		setMedia?.(mediaApi);
+	}, [mediaApi, setMedia]);
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
+		...mediaProps(mediaApi, props),
+		children
+	});
+});
+
+//#endregion
+export { HlsVideo, HlsVideo as default };
+//# sourceMappingURL=index.js.map