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

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { logMissingFeature, 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) {
+		logMissingFeature("MuteButton", "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/dev/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,QAAQ;AACE,oBAAkB,cAAc,SAAS;AACtD,SAAO;;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/dev/ui/pip-button/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAYiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA,cAE1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAoCL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/pip-button/pip-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, 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) {
+		logMissingFeature("PiPButton", "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/dev/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,KAAK;AACK,oBAAkB,aAAa,MAAM;AAClD,SAAO;;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/dev/ui/play-button/index.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { PlayButtonCore } from "@videojs/core";
+
+//#region src/ui/play-button/play-button.d.ts
+interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}
+/**
+ * A button that toggles playback.
+ *
+ * @example
+ * ```tsx
+ * <PlayButton />
+ *
+ * <PlayButton
+ *   render={(props, state) => (
+ *     <button {...props}>
+ *       {state.paused ? <PlayIcon /> : <PauseIcon />}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare const PlayButton: react.ForwardRefExoticComponent<Omit<PlayButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace PlayButton {
+  type Props = PlayButtonProps;
+  type State = PlayButtonCore.State;
+}
+//#endregion
+export { PlayButton, PlayButtonProps };
+//# sourceMappingURL=play-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,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"}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { logMissingFeature, 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) {
+		logMissingFeature("PlayButton", "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/dev/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,UAAU;AACA,oBAAkB,cAAc,WAAW;AACxD,SAAO;;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/dev/ui/poster/index.d.ts

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

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

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

package/dist/dev/ui/poster/poster.d.ts

@@ -0,0 +1,28 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { PosterCore } from "@videojs/core";
+
+//#region src/ui/poster/poster.d.ts
+interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
+/**
+ * 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'}
+ * />
+ * ```
+ */
+declare const Poster: react.ForwardRefExoticComponent<Omit<PosterProps, "ref"> & react.RefAttributes<HTMLImageElement>>;
+declare namespace Poster {
+  type Props = PosterProps;
+  type State = PosterCore.State;
+}
+//#endregion
+export { Poster, PosterProps };
+//# sourceMappingURL=poster.d.ts.map

package/dist/dev/ui/poster/poster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA2BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}

package/dist/dev/ui/poster/poster.js

@@ -0,0 +1,46 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, 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) {
+		logMissingFeature("Poster", "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/dev/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,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;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/dev/ui/seek-button/index.d.ts

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

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

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

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

@@ -0,0 +1,31 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { SeekButtonCore } from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button.d.ts
+interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}
+/**
+ * A button that seeks forward or backward by a configurable number of seconds.
+ *
+ * @example
+ * ```tsx
+ * <SeekButton seconds={-10} />
+ *
+ * <SeekButton
+ *   seconds={30}
+ *   render={(props, state) => (
+ *     <button {...props}>
+ *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare const SeekButton: react.ForwardRefExoticComponent<Omit<SeekButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace SeekButton {
+  type Props = SeekButtonProps;
+  type State = SeekButtonCore.State;
+}
+//#endregion
+export { SeekButton, SeekButtonProps };
+//# sourceMappingURL=seek-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,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"}

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

@@ -0,0 +1,65 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { logMissingFeature, selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/seek-button/seek-button.tsx
+/**
+* A button that seeks forward or backward by a configurable number of seconds.
+*
+* @example
+* ```tsx
+* <SeekButton seconds={-10} />
+*
+* <SeekButton
+*   seconds={30}
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*     </button>
+*   )}
+* />
+* ```
+*/
+const SeekButton = forwardRef(function SeekButton(componentProps, forwardedRef) {
+	const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new SeekButtonCore());
+	core.setProps({
+		seconds,
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: "SeekButton",
+		onActivate: () => core.seek(time),
+		isDisabled: () => disabled || !time
+	});
+	if (!time) {
+		logMissingFeature("SeekButton", "time");
+		return null;
+	}
+	const state = core.getState(time);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: SeekButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			core.getAttrs(state),
+			elementProps,
+			getButtonProps()
+		]
+	});
+});
+
+//#endregion
+export { SeekButton };
+//# sourceMappingURL=seek-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = forwardRef(function SeekButton(\n  componentProps: SeekButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new SeekButtonCore());\n  core.setProps({ seconds, label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'SeekButton',\n    onActivate: () => core.seek(time!),\n    isDisabled: () => disabled || !time,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('SeekButton', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: SeekButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,OAAO,UAAU,GAAG,iBAAiB;CAEhF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAS;EAAO;EAAU,CAAC;CAE3C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,KAAK,KAAM;EAClC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;AAEjC,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/time/index.d.ts

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

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

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

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

@@ -0,0 +1,11 @@
+import { Group, GroupProps } from "./time-group.js";
+import { Separator, SeparatorProps } from "./time-separator.js";
+import { Value, ValueProps } from "./time-value.js";
+
+//#region src/ui/time/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { Group, GroupProps, Separator, SeparatorProps, Value, ValueProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { Group } from "./time-group.js";
+import { Separator } from "./time-separator.js";
+import { Value } from "./time-value.js";
+
+//#region src/ui/time/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => Group,
+	Separator: () => Separator,
+	Value: () => Value
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time/index.parts.ts"],"sourcesContent":["export { Group, type GroupProps } from './time-group';\nexport { Separator, type SeparatorProps } from './time-separator';\nexport { Value, type ValueProps } from './time-value';\n"],"mappings":""}

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

@@ -0,0 +1,29 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/ui/time/time-group.d.ts
+type GroupState = Record<string, never>;
+interface GroupProps extends UIComponentProps<'span', GroupState> {
+  /** Time value components to render inside the group. */
+  children?: ReactNode | undefined;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Group: react.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare namespace Group {
+  type Props = GroupProps;
+}
+//#endregion
+export { Group, GroupProps };
+//# sourceMappingURL=time-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-group.d.ts","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"mappings":";;;;;KASK,UAAA,GAAa,MAAA;AAAA,UAED,UAAA,SAAmB,gBAAA,SAAyB,UAAA;;EAE3D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;;;;cAiBa,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/time/time-separator.d.ts

@@ -0,0 +1,26 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/ui/time/time-separator.d.ts
+type SeparatorState = Record<string, never>;
+interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
+  /** Separator content. Defaults to "/". */
+  children?: ReactNode | undefined;
+}
+/**
+ * Divider between time values. Hidden from screen readers.
+ *
+ * @example
+ * ```tsx
+ * <Time.Separator />
+ * <Time.Separator> of </Time.Separator>
+ * ```
+ */
+declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare namespace Separator {
+  type Props = SeparatorProps;
+}
+//#endregion
+export { Separator, SeparatorProps };
+//# sourceMappingURL=time-separator.d.ts.map

package/dist/dev/ui/time/time-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"mappings":";;;;;KASK,cAAA,GAAiB,MAAA;AAAA,UAEL,cAAA,SAAuB,gBAAA,SAAyB,cAAA;;EAE/D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;cAca,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}