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

package/dist/default/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/default/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/default/ui/captions-button/index.js

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

package/dist/default/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/default/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/default/ui/controls/controls-root.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { 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) 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/default/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,SAEH,QAAO;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/default/ui/controls/index.js

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

package/dist/default/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/default/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/default/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/default/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/default/ui/error-dialog/index.js

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

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { 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) 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/default/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,WAEH,QAAO;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/default/ui/fullscreen-button/index.js

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

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

@@ -0,0 +1,44 @@
+'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) => {}, [displayName]);
+	return {
+		getButtonProps: useCallback((externalProps) => {
+			return mergeProps(createButton({
+				onActivate,
+				isDisabled
+			}), externalProps);
+		}, [onActivate, isDisabled]),
+		buttonRef
+	};
+}
+
+//#endregion
+export { useButton };
+//# sourceMappingURL=use-button.js.map

package/dist/default/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,IAKjC,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/default/ui/mute-button/index.js

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

package/dist/default/ui/mute-button/mute-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 { selectVolume } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/mute-button/mute-button.tsx
+/**
+* A button that toggles mute state.
+*/
+const MuteButton = forwardRef(function MuteButton(componentProps, forwardedRef) {
+	const { render, className, style, label, disabled, ...elementProps } = componentProps;
+	const volume = usePlayer(selectVolume);
+	const [core] = useState(() => new MuteButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "MuteButton",
+		onActivate: () => core.toggle(volume),
+		isDisabled: () => disabled || !volume
+	});
+	if (!volume) return null;
+	const state = core.getState(volume);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MuteButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			core.getAttrs(state),
+			elementProps,
+			getButtonProps()
+		]
+	});
+});
+
+//#endregion
+export { MuteButton };
+//# sourceMappingURL=mute-button.js.map

package/dist/default/ui/mute-button/mute-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectVolume } 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 MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/**\n * A button that toggles mute state.\n */\nexport const MuteButton = forwardRef(function MuteButton(\n  componentProps: MuteButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const volume = usePlayer(selectVolume);\n\n  const [core] = useState(() => new MuteButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'MuteButton',\n    onActivate: () => core.toggle(volume!),\n    isDisabled: () => disabled || !volume,\n  });\n\n  if (!volume) {\n    if (__DEV__) logMissingFeature('MuteButton', 'volume');\n    return null;\n  }\n\n  const state = core.getState(volume);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MuteButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,OAAQ;EACtC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,OAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,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/default/ui/pip-button/index.js

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

package/dist/default/ui/pip-button/pip-button.js

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

package/dist/default/ui/pip-button/pip-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPiP } 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 PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\nexport const PiPButton = forwardRef(function PiPButton(\n  componentProps: PiPButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const pip = usePlayer(selectPiP);\n\n  const [core] = useState(() => new PiPButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PiPButton',\n    onActivate: () => core.toggle(pip!),\n    isDisabled: () => disabled || !pip,\n  });\n\n  if (!pip) {\n    if (__DEV__) logMissingFeature('PiPButton', 'pip');\n    return null;\n  }\n\n  const state = core.getState(pip);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PiPButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,MAAM,UAAU,UAAU;CAEhC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;AAClD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,IAAK;EACnC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,IAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,IAAI;AAEhC,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/default/ui/play-button/index.js

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

package/dist/default/ui/play-button/play-button.js

@@ -0,0 +1,60 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/play-button/play-button.tsx
+/**
+* A button that toggles playback.
+*
+* @example
+* ```tsx
+* <PlayButton />
+*
+* <PlayButton
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.paused ? <PlayIcon /> : <PauseIcon />}
+*     </button>
+*   )}
+* />
+* ```
+*/
+const PlayButton = forwardRef(function PlayButton(componentProps, forwardedRef) {
+	const { render, className, style, label, disabled, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const [core] = useState(() => new PlayButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "PlayButton",
+		onActivate: () => core.toggle(playback),
+		isDisabled: () => disabled || !playback
+	});
+	if (!playback) return null;
+	const state = core.getState(playback);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: PlayButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			core.getAttrs(state),
+			elementProps,
+			getButtonProps()
+		]
+	});
+});
+
+//#endregion
+export { PlayButton };
+//# sourceMappingURL=play-button.js.map

package/dist/default/ui/play-button/play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } 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 PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = forwardRef(function PlayButton(\n  componentProps: PlayButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PlayButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PlayButton',\n    onActivate: () => core.toggle(playback!),\n    isDisabled: () => disabled || !playback,\n  });\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('PlayButton', 'playback');\n    return null;\n  }\n\n  const state = core.getState(playback);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PlayButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,SAAU;EACxC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,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/default/ui/poster/index.js

@@ -0,0 +1,3 @@
+import { Poster } from "./poster.js";
+
+export { Poster };

package/dist/default/ui/poster/poster.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { PosterCore, PosterDataAttrs } from "@videojs/core";
+
+//#region src/ui/poster/poster.tsx
+/**
+* Displays the video poster image. Shows before playback starts, hides after.
+*
+* @example
+* ```tsx
+* <Poster src="poster.jpg" alt="Video description" />
+*
+* <Poster
+*   src="poster.jpg"
+*   alt="Video description"
+*   className={(state) => state.visible ? 'visible' : 'hidden'}
+* />
+* ```
+*/
+const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const [core] = useState(() => new PosterCore());
+	if (!playback) return null;
+	return renderElement("img", {
+		render,
+		className,
+		style
+	}, {
+		state: core.getState(playback),
+		stateAttrMap: PosterDataAttrs,
+		ref: [forwardedRef],
+		props: [elementProps]
+	});
+});
+
+//#endregion
+export { Poster };
+//# sourceMappingURL=poster.js.map

package/dist/default/ui/poster/poster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } 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 PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(playback),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,SAAS,SAAS;EAC9B,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

package/dist/default/ui/seek-button/index.js

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