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

package/dist/dev/ui/captions-button/captions-button.d.ts

@@ -0,0 +1,36 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+
+//#region src/ui/captions-button/captions-button.d.ts
+type CaptionsButtonState = {
+  active: boolean;
+};
+type CaptionButtonCoreProps = {
+  /** Custom label for the button. */label?: string | ((state: CaptionsButtonState) => string) | undefined; /** Whether the button is disabled. */
+  disabled?: boolean | undefined;
+};
+interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonState>, CaptionButtonCoreProps {}
+/**
+ * A button that toggles captions.
+ *
+ * @example
+ * ```tsx
+ * <CaptionsButton />
+ *
+ * <CaptionsButton
+ *   render={(props, state) => (
+ *     <button {...props}>
+ *       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare const CaptionsButton: react.ForwardRefExoticComponent<Omit<CaptionsButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace CaptionsButton {
+  type Props = CaptionsButtonProps;
+  type State = CaptionsButtonState;
+}
+//#endregion
+export { CaptionsButton, CaptionsButtonProps, CaptionsButtonState };
+//# sourceMappingURL=captions-button.d.ts.map

package/dist/dev/ui/captions-button/captions-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;KAWY,mBAAA;EACV,MAAA;AAAA;AAAA,KAEG,sBAAA;EAH0B,mCAK7B,KAAA,cAAmB,KAAA,EAAO,mBAAA,0BAJ1B;EAMA,QAAA;AAAA;AAAA,UAOe,mBAAA,SAA4B,gBAAA,WAA2B,mBAAA,GAAsB,sBAAA;;;;;;;;AAA9F;;;;;;;;;cAkBa,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBA2BV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,mBAAA;AAAA"}

package/dist/dev/ui/captions-button/captions-button.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { forwardRef, useState } from "react";
+
+//#region src/ui/captions-button/captions-button.tsx
+const CaptionButtonDataAttrs = { active: "data-active" };
+/**
+* A button that toggles captions.
+*
+* @example
+* ```tsx
+* <CaptionsButton />
+*
+* <CaptionsButton
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}
+*     </button>
+*   )}
+* />
+* ```
+*/
+const CaptionsButton = forwardRef(function CaptionsButton(componentProps, forwardedRef) {
+	const { render, className, style, label, disabled, ...elementProps } = componentProps;
+	const [isActive, setIsActive] = useState(false);
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "CaptionsButton",
+		onActivate: () => setIsActive((active) => !active),
+		isDisabled: () => disabled ?? false
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state: { active: isActive },
+		stateAttrMap: CaptionButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			elementProps,
+			getButtonProps(),
+			{ "aria-pressed": isActive }
+		]
+	});
+});
+
+//#endregion
+export { CaptionsButton };
+//# sourceMappingURL=captions-button.js.map

package/dist/dev/ui/captions-button/captions-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\n// FIXME: Replace with state/props from core.\nexport type CaptionsButtonState = {\n  active: boolean;\n};\ntype CaptionButtonCoreProps = {\n  /** Custom label for the button. */\n  label?: string | ((state: CaptionsButtonState) => string) | undefined;\n  /** Whether the button is disabled. */\n  disabled?: boolean | undefined;\n};\nconst CaptionButtonDataAttrs = {\n  /** Present when the captions are active. */\n  active: 'data-active',\n} as const satisfies StateAttrMap<CaptionsButtonState>;\n\nexport interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonState>, CaptionButtonCoreProps {}\n\n/**\n * A button that toggles captions.\n *\n * @example\n * ```tsx\n * <CaptionsButton />\n *\n * <CaptionsButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const CaptionsButton = forwardRef(function CaptionsButton(\n  componentProps: CaptionsButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  // FIXME: Replace with actual captions state\n  const [isActive, setIsActive] = useState(false);\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'CaptionsButton',\n    onActivate: () => setIsActive((active) => !active), // FIXME: Replace with actual toggle logic\n    isDisabled: () => disabled ?? false,\n  });\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: { active: isActive }, // FIXME: Replace with actual toggle logic\n      stateAttrMap: CaptionButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [elementProps, getButtonProps(), { 'aria-pressed': isActive }],\n    }\n  );\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonState;\n}\n"],"mappings":";;;;;;;AAoBA,MAAM,yBAAyB,EAE7B,QAAQ,eACT;;;;;;;;;;;;;;;;;AAoBD,MAAa,iBAAiB,WAAW,SAAS,eAChD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAGvE,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,aAAa,WAAW,CAAC,OAAO;EAClD,kBAAkB,YAAY;EAC/B,CAAC;AAEF,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,EAAE,QAAQ,UAAU;EAC3B,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;GAAc,gBAAgB;GAAE,EAAE,gBAAgB,UAAU;GAAC;EACtE,CACF;EACD"}

package/dist/dev/ui/captions-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CaptionsButton, CaptionsButtonProps, CaptionsButtonState } from "./captions-button.js";
+export { CaptionsButton, type CaptionsButtonProps, type CaptionsButtonState };

package/dist/dev/ui/captions-button/index.js

@@ -0,0 +1,3 @@
+import { CaptionsButton } from "./captions-button.js";
+
+export { CaptionsButton };

package/dist/dev/ui/controls/controls-group.d.ts

@@ -0,0 +1,17 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/ui/controls/controls-group.d.ts
+type GroupState = Record<string, never>;
+interface ControlsGroupProps extends UIComponentProps<'div', GroupState> {
+  children?: ReactNode | undefined;
+}
+/** Layout group for related controls; sets `role="group"` when labeled. */
+declare const ControlsGroup: react.ForwardRefExoticComponent<Omit<ControlsGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace ControlsGroup {
+  type Props = ControlsGroupProps;
+}
+//#endregion
+export { ControlsGroup, ControlsGroupProps };
+//# sourceMappingURL=controls-group.d.ts.map

package/dist/dev/ui/controls/controls-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-group.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"mappings":";;;;;KAQK,UAAA,GAAa,MAAA;AAAA,UAED,kBAAA,SAA2B,gBAAA,QAAwB,UAAA;EAClE,QAAA,GAAW,SAAA;AAAA;;cAIA,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqBT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;AAAA"}

package/dist/dev/ui/controls/controls-group.js

@@ -0,0 +1,27 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/controls/controls-group.tsx
+/** Layout group for related controls; sets `role="group"` when labeled. */
+const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			role,
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { ControlsGroup };
+//# sourceMappingURL=controls-group.js.map

package/dist/dev/ui/controls/controls-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-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\ntype GroupState = Record<string, never>;\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', GroupState> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU;AAIvF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE;GAAM;GAAU,EAAE,aAAa;EAC1C,CACF;EACD"}

package/dist/dev/ui/controls/controls-root.d.ts

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { ReactNode } from "react";
+import { ControlsCore } from "@videojs/core";
+
+//#region src/ui/controls/controls-root.d.ts
+interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {
+  children?: ReactNode | undefined;
+}
+/** Root container for player controls state and rendered control content. */
+declare const ControlsRoot: react.ForwardRefExoticComponent<Omit<ControlsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace ControlsRoot {
+  type Props = ControlsRootProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsRoot, ControlsRootProps };
+//# sourceMappingURL=controls-root.d.ts.map

package/dist/dev/ui/controls/controls-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;;;;UAWiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA,CAAa,KAAA;EAC9E,QAAA,GAAW,SAAA;AAAA;AADb;AAAA,cAKa,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6BR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA,CAAa,KAAA;AAAA"}

package/dist/dev/ui/controls/controls-root.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, selectControls } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+
+//#region src/ui/controls/controls-root.tsx
+/** Root container for player controls state and rendered control content. */
+const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new ControlsCore());
+	if (!controls) {
+		logMissingFeature("Controls.Root", "controls");
+		return null;
+	}
+	const state = core.getState(controls);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: ControlsDataAttrs,
+		ref: [forwardedRef],
+		props: [{ children }, elementProps]
+	});
+});
+
+//#endregion
+export { ControlsRoot };
+//# sourceMappingURL=controls-root.js.map

package/dist/dev/ui/controls/controls-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } 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 ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  const state = core.getState(controls);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ControlsDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,UAAU;AACA,oBAAkB,iBAAiB,WAAW;AAC3D,SAAO;;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}

package/dist/dev/ui/controls/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Controls };

package/dist/dev/ui/controls/index.js

@@ -0,0 +1,3 @@
+import { index_parts_exports } from "./index.parts.js";
+
+export { index_parts_exports as Controls };

package/dist/dev/ui/controls/index.parts.d.ts

@@ -0,0 +1,10 @@
+import { ControlsGroup, ControlsGroupProps } from "./controls-group.js";
+import { ControlsRoot, ControlsRootProps } from "./controls-root.js";
+
+//#region src/ui/controls/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/controls/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"mappings":""}

package/dist/dev/ui/controls/index.parts.js

@@ -0,0 +1,13 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ControlsGroup } from "./controls-group.js";
+import { ControlsRoot } from "./controls-root.js";
+
+//#region src/ui/controls/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => ControlsGroup,
+	Root: () => ControlsRoot
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/controls/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsGroup as Group, type ControlsGroupProps as GroupProps } from './controls-group';\nexport { ControlsRoot as Root, type ControlsRootProps as RootProps } from './controls-root';\n"],"mappings":""}

package/dist/dev/ui/error-dialog/error-dialog.d.ts

@@ -0,0 +1,35 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+
+//#region src/ui/error-dialog/error-dialog.d.ts
+type ErrorDialogState = {
+  visible: boolean;
+  onDismiss: () => void;
+};
+interface ErrorDialogProps extends UIComponentProps<'div', ErrorDialogState> {
+  'aria-labelledby': string;
+  'aria-describedby'?: string;
+  dismiss?: () => void;
+}
+/**
+ * Displays an error dialog when media playback encounters an error.
+ *
+ * @example
+ * ```tsx
+ * <ErrorDialog />
+ *
+ * <ErrorDialog
+ *   render={(props, state) => (
+ *     <div {...props}>Something went wrong</div>
+ *   )}
+ * />
+ * ```
+ */
+declare const ErrorDialog: react.ForwardRefExoticComponent<Omit<ErrorDialogProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace ErrorDialog {
+  type Props = ErrorDialogProps;
+  type State = ErrorDialogState;
+}
+//#endregion
+export { ErrorDialog, ErrorDialogProps };
+//# sourceMappingURL=error-dialog.d.ts.map

package/dist/dev/ui/error-dialog/error-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog.tsx"],"mappings":";;;;KAOK,gBAAA;EAAqB,OAAA;EAAkB,SAAA;AAAA;AAAA,UAE3B,gBAAA,SAAyB,gBAAA,QAAwB,gBAAA;EAChE,iBAAA;EACA,kBAAA;EACA,OAAA;AAAA;;;;;;;;;;;AAmBF;;;;cAAa,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,gBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgDP,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;EAAA,KACR,KAAA,GAAQ,gBAAA;AAAA"}

package/dist/dev/ui/error-dialog/error-dialog.js

@@ -0,0 +1,54 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef, useEffect, useRef, useState } from "react";
+
+//#region src/ui/error-dialog/error-dialog.tsx
+/**
+* Displays an error dialog when media playback encounters an error.
+*
+* @example
+* ```tsx
+* <ErrorDialog />
+*
+* <ErrorDialog
+*   render={(props, state) => (
+*     <div {...props}>Something went wrong</div>
+*   )}
+* />
+* ```
+*/
+const ErrorDialog = forwardRef(function ErrorDialog(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const dialogRef = useRef(null);
+	const [hasError, setHasError] = useState(false);
+	useEffect(() => {
+		const handle = setTimeout(() => {}, 2e3);
+		return () => clearTimeout(handle);
+	}, []);
+	useEffect(() => {
+		if (!hasError) return;
+		requestAnimationFrame(() => {
+			dialogRef.current?.focus();
+		});
+	}, [hasError]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state: {
+			visible: hasError,
+			onDismiss: () => setHasError(false)
+		},
+		ref: [forwardedRef, dialogRef],
+		props: [{
+			role: "alertdialog",
+			tabIndex: -1
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { ErrorDialog };
+//# sourceMappingURL=error-dialog.js.map

package/dist/dev/ui/error-dialog/error-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\ntype ErrorDialogState = { visible: boolean; onDismiss: () => void };\n\nexport interface ErrorDialogProps extends UIComponentProps<'div', ErrorDialogState> {\n  'aria-labelledby': string;\n  'aria-describedby'?: string;\n  dismiss?: () => void;\n}\n\nconst DEBUG = false;\n\n/**\n * Displays an error dialog when media playback encounters an error.\n *\n * @example\n * ```tsx\n * <ErrorDialog />\n *\n * <ErrorDialog\n *   render={(props, state) => (\n *     <div {...props}>Something went wrong</div>\n *   )}\n * />\n * ```\n */\nexport const ErrorDialog = forwardRef(function ErrorDialog(\n  componentProps: ErrorDialogProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const dialogRef = useRef<HTMLDivElement>(null);\n\n  const [hasError, setHasError] = useState(false);\n\n  // FIXME: This is just debugging code\n  useEffect(() => {\n    const handle = setTimeout(() => {\n      if (!DEBUG) return;\n      setHasError(true);\n    }, 2000);\n\n    return () => clearTimeout(handle);\n  }, []);\n\n  // Focus the dialog when it becomes visible to ensure it's announced by screen readers.\n  // Wait a frame for the accessibility tree to update with the dialog before focusing.\n  useEffect(() => {\n    if (!hasError) return;\n    requestAnimationFrame(() => {\n      dialogRef.current?.focus();\n    });\n  }, [hasError]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state: {\n        visible: hasError,\n        onDismiss: () => setHasError(false),\n      },\n      ref: [forwardedRef, dialogRef],\n      props: [\n        {\n          role: 'alertdialog',\n          tabIndex: -1,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace ErrorDialog {\n  export type Props = ErrorDialogProps;\n  export type State = ErrorDialogState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,YAAY,OAAuB,KAAK;CAE9C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAG/C,iBAAgB;EACd,MAAM,SAAS,iBAAiB,IAG7B,IAAK;AAER,eAAa,aAAa,OAAO;IAChC,EAAE,CAAC;AAIN,iBAAgB;AACd,MAAI,CAAC,SAAU;AACf,8BAA4B;AAC1B,aAAU,SAAS,OAAO;IAC1B;IACD,CAAC,SAAS,CAAC;AAEd,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO;GACL,SAAS;GACT,iBAAiB,YAAY,MAAM;GACpC;EACD,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,UAAU;GACX,EACD,aACD;EACF,CACF;EACD"}

package/dist/dev/ui/error-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { ErrorDialog, ErrorDialogProps } from "./error-dialog.js";
+export { ErrorDialog, ErrorDialogProps };

package/dist/dev/ui/error-dialog/index.js

@@ -0,0 +1,3 @@
+import { ErrorDialog } from "./error-dialog.js";
+
+export { ErrorDialog };

package/dist/dev/ui/fullscreen-button/fullscreen-button.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { FullscreenButtonCore } from "@videojs/core";
+
+//#region src/ui/fullscreen-button/fullscreen-button.d.ts
+interface FullscreenButtonProps extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}
+declare const FullscreenButton: react.ForwardRefExoticComponent<Omit<FullscreenButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace FullscreenButton {
+  type Props = FullscreenButtonProps;
+  type State = FullscreenButtonCore.State;
+}
+//#endregion
+export { FullscreenButton, FullscreenButtonProps };
+//# sourceMappingURL=fullscreen-button.d.ts.map

package/dist/dev/ui/fullscreen-button/fullscreen-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;;;UAYiB,qBAAA,SACP,gBAAA,WAA2B,oBAAA,CAAqB,KAAA,GACtD,oBAAA,CAAqB,KAAA;AAAA,cAEZ,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAoCZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

package/dist/dev/ui/fullscreen-button/fullscreen-button.js

@@ -0,0 +1,47 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { logMissingFeature, selectFullscreen } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/fullscreen-button/fullscreen-button.tsx
+const FullscreenButton = forwardRef(function FullscreenButton(componentProps, forwardedRef) {
+	const { render, className, style, label, disabled, ...elementProps } = componentProps;
+	const fullscreen = usePlayer(selectFullscreen);
+	const [core] = useState(() => new FullscreenButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "FullscreenButton",
+		onActivate: () => core.toggle(fullscreen),
+		isDisabled: () => disabled || !fullscreen
+	});
+	if (!fullscreen) {
+		logMissingFeature("FullscreenButton", "fullscreen");
+		return null;
+	}
+	const state = core.getState(fullscreen);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: FullscreenButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			core.getAttrs(state),
+			elementProps,
+			getButtonProps()
+		]
+	});
+});
+
+//#endregion
+export { FullscreenButton };
+//# sourceMappingURL=fullscreen-button.js.map

package/dist/dev/ui/fullscreen-button/fullscreen-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectFullscreen } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\nexport const FullscreenButton = forwardRef(function FullscreenButton(\n  componentProps: FullscreenButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const fullscreen = usePlayer(selectFullscreen);\n\n  const [core] = useState(() => new FullscreenButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'FullscreenButton',\n    onActivate: () => core.toggle(fullscreen!),\n    isDisabled: () => disabled || !fullscreen,\n  });\n\n  if (!fullscreen) {\n    if (__DEV__) logMissingFeature('FullscreenButton', 'fullscreen');\n    return null;\n  }\n\n  const state = core.getState(fullscreen);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: FullscreenButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,SAAS,iBAClD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,aAAa,UAAU,iBAAiB;CAE9C,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;AACzD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,WAAY;EAC1C,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,YAAY;AACF,oBAAkB,oBAAoB,aAAa;AAChE,SAAO;;CAGT,MAAM,QAAQ,KAAK,SAAS,WAAW;AAEvC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}

package/dist/dev/ui/fullscreen-button/index.d.ts

@@ -0,0 +1,2 @@
+import { FullscreenButton, FullscreenButtonProps } from "./fullscreen-button.js";
+export { FullscreenButton, type FullscreenButtonProps };

package/dist/dev/ui/fullscreen-button/index.js

@@ -0,0 +1,3 @@
+import { FullscreenButton } from "./fullscreen-button.js";
+
+export { FullscreenButton };

package/dist/dev/ui/hooks/use-button.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithRef, Ref } from "react";
+
+//#region src/ui/hooks/use-button.d.ts
+interface UseButtonParameters {
+  displayName: string;
+  onActivate: () => void;
+  isDisabled: () => boolean;
+}
+interface UseButtonReturnValue {
+  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;
+  buttonRef: Ref<HTMLElement>;
+}
+/**
+ * Hook for button behavior with keyboard and pointer interaction.
+ *
+ * @example
+ * ```tsx
+ * const { getButtonProps, buttonRef } = useButton({
+ *   displayName: 'PlayButton',
+ *   onActivate: () => togglePlayback(),
+ *   isDisabled: () => disabled,
+ * });
+ *
+ * return useRender('button', componentProps, {
+ *   state,
+ *   ref: [forwardedRef, buttonRef],
+ *   props: [elementProps, getButtonProps],
+ * });
+ * ```
+ *
+ * @param params - Button configuration with activation handler and disabled check.
+ */
+declare function useButton(params: UseButtonParameters): UseButtonReturnValue;
+declare namespace useButton {
+  type Parameters = UseButtonParameters;
+  type ReturnValue = UseButtonReturnValue;
+}
+//#endregion
+export { useButton };
+//# sourceMappingURL=use-button.d.ts.map

package/dist/dev/ui/hooks/use-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-button.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"mappings":";;;UAOiB,mBAAA;EACf,WAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,UAGe,oBAAA;EACf,cAAA,GAAiB,aAAA,GAAgB,qBAAA,eAAoC,qBAAA;EACrE,SAAA,EAAW,GAAA,CAAI,WAAA;AAAA;;;AAFjB;;;;;;;;;;;;;;;;;;iBAyBgB,SAAA,CAAU,MAAA,EAAQ,mBAAA,GAAsB,oBAAA;AAAA,kBAuBvC,SAAA;EAAA,KACH,UAAA,GAAa,mBAAA;EAAA,KACb,WAAA,GAAc,oBAAA;AAAA"}

package/dist/dev/ui/hooks/use-button.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { mergeProps } from "../../utils/merge-props.js";
+import { createButton } from "@videojs/core/dom";
+import { useCallback } from "react";
+
+//#region src/ui/hooks/use-button.ts
+/**
+* Hook for button behavior with keyboard and pointer interaction.
+*
+* @example
+* ```tsx
+* const { getButtonProps, buttonRef } = useButton({
+*   displayName: 'PlayButton',
+*   onActivate: () => togglePlayback(),
+*   isDisabled: () => disabled,
+* });
+*
+* return useRender('button', componentProps, {
+*   state,
+*   ref: [forwardedRef, buttonRef],
+*   props: [elementProps, getButtonProps],
+* });
+* ```
+*
+* @param params - Button configuration with activation handler and disabled check.
+*/
+function useButton(params) {
+	const { displayName, onActivate, isDisabled } = params;
+	const buttonRef = useCallback((element) => {
+		if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
+	}, [displayName]);
+	return {
+		getButtonProps: useCallback((externalProps) => {
+			return mergeProps(createButton({
+				onActivate,
+				isDisabled
+			}), externalProps);
+		}, [onActivate, isDisabled]),
+		buttonRef
+	};
+}
+
+//#endregion
+export { useButton };
+//# sourceMappingURL=use-button.js.map

package/dist/dev/ui/hooks/use-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["'use client';\n\nimport { createButton } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: () => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n *   displayName: 'PlayButton',\n *   onActivate: () => togglePlayback(),\n *   isDisabled: () => disabled,\n * });\n *\n * return useRender('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [elementProps, getButtonProps],\n * });\n * ```\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;AAC/B,MAAe,WAAW,QAAQ,YAAY,SAC5C,SAAQ,KAAK,GAAG,YAAY,qDAAqD;IAGrF,CAAC,YAAY,CACd;AAUD,QAAO;EAAE,gBARc,aACpB,kBAAqF;AAEpF,UAAO,WADa,aAAa;IAAE;IAAY;IAAY,CAAC,EAC7B,cAAc;KAE/C,CAAC,YAAY,WAAW,CACzB;EAEwB;EAAW"}

package/dist/dev/ui/mute-button/index.d.ts

@@ -0,0 +1,2 @@
+import { MuteButton, MuteButtonProps } from "./mute-button.js";
+export { MuteButton, type MuteButtonProps };

package/dist/dev/ui/mute-button/index.js

@@ -0,0 +1,3 @@
+import { MuteButton } from "./mute-button.js";
+
+export { MuteButton };

package/dist/dev/ui/mute-button/mute-button.d.ts

@@ -0,0 +1,17 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { MuteButtonCore } from "@videojs/core";
+
+//#region src/ui/mute-button/mute-button.d.ts
+interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}
+/**
+ * A button that toggles mute state.
+ */
+declare const MuteButton: react.ForwardRefExoticComponent<Omit<MuteButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace MuteButton {
+  type Props = MuteButtonProps;
+  type State = MuteButtonCore.State;
+}
+//#endregion
+export { MuteButton, MuteButtonProps };
+//# sourceMappingURL=mute-button.d.ts.map

package/dist/dev/ui/mute-button/mute-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;cAKa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAoCN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}