videojs-vue 0.0.0 → 0.0.1

package/README.md

@@ -5,13 +5,17 @@
 [![NPM DOWNLOADS](https://img.shields.io/npm/dy/videojs-vue.svg)](https://www.npmjs.com/package/videojs-vue)
 [![LICENSE](https://img.shields.io/github/license/ntnyq/videojs-vue.svg)](https://github.com/ntnyq/videojs-vue/blob/main/LICENSE)
 
-A VueJS plugin for Videojs v10.
+A Vue-first wrapper around the Video.js v10 player primitives.
 
 > [!NOTE]
-> Status: **Work in progress**
+> Status: **Beta**
 
 ## Install
 
+```shell
+pnpm add videojs-vue
+```
+
 ```shell
 npm install videojs-vue
 ```
@@ -20,10 +24,185 @@ npm install videojs-vue
 yarn add videojs-vue
 ```
 
-```shell
-pnpm add videojs-vue
+## Usage
+
+The API follows the upstream `@videojs/react` player factory:
+
+```ts
+import { createPlayer } from 'videojs-vue'
+import { Video, videoFeatures } from 'videojs-vue/video'
+
+const Player = createPlayer({
+  features: videoFeatures,
+  displayName: 'VideoPlayer',
+})
 ```
 
+Render it with Vue's `h()` API or JSX:
+
+```ts
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const paused = Player.usePlayer(state => state.paused)
+    const store = Player.usePlayer()
+
+    return () =>
+      h(Player.Provider, () =>
+        h(Player.Container, { class: 'player-shell' }, () => [
+          h(Video, {
+            src: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4',
+            playsInline: true,
+          }),
+          h(
+            'button',
+            {
+              type: 'button',
+              onClick: () => (paused.value ? store.play() : store.pause()),
+            },
+            paused.value ? 'Play' : 'Pause',
+          ),
+        ]),
+      )
+  },
+})
+```
+
+## API
+
+### Root exports
+
+- `createPlayer(config)` returns:
+  - `Provider`
+  - `Container`
+  - `usePlayer()`
+  - `useMedia()`
+- `createPlayer({ plugins })` supports runtime extension hooks:
+  - `onProviderSetup(context)`
+  - `onAttach(context)`
+  - `onDetach(context)`
+  - `onProviderDestroy(context)`
+- `usePlayer(selector)` returns a readonly `ref`, which is the Vue equivalent of the React hook's reactive selected value.
+- `useOptionalPlayer()`, `useContainer()`, `useMediaAttach()` and `useContainerAttach()` are also exported for lower-level integrations.
+- Utility exports:
+  - `mergeProps(...props)`
+  - `renderElement(tag, componentProps, params)`
+
+### Preset entry points
+
+- `videojs-vue/video`
+  - `Video`
+  - `videoFeatures`
+- `videojs-vue/audio`
+  - `Audio`
+  - `audioFeatures`
+- `videojs-vue/background`
+  - `BackgroundVideo`
+  - `backgroundFeatures`
+- `videojs-vue/live-video`
+  - `Video`
+  - `liveVideoFeatures`
+- `videojs-vue/live-audio`
+  - `Audio`
+  - `liveAudioFeatures`
+
+### UI entry points
+
+- `videojs-vue/full-screen-button` (or `videojs-vue/fullscreen-button`)
+  - `FullscreenButton`
+- `videojs-vue/playback-rate-button`
+  - `PlaybackRateButton`
+- `videojs-vue/poster`
+  - `Poster`
+- `videojs-vue/time`
+  - `Time.Group`
+  - `Time.Separator`
+  - `Time.Value`
+- `videojs-vue/play-button`
+  - `PlayButton`
+- `videojs-vue/mute-button`
+  - `MuteButton`
+- `videojs-vue/pip-button`
+  - `PiPButton`
+- `videojs-vue/seek-button`
+  - `SeekButton`
+- `videojs-vue/volume-slider`
+  - `VolumeSlider.Root`
+  - `VolumeSlider.Track`
+  - `VolumeSlider.Fill`
+  - `VolumeSlider.Thumb`
+  - `VolumeSlider.Value`
+  - `VolumeSlider.Preview`
+- `videojs-vue/time-slider`
+  - `TimeSlider.Root`
+  - `TimeSlider.Track`
+  - `TimeSlider.Buffer`
+  - `TimeSlider.Fill`
+  - `TimeSlider.Thumb`
+  - `TimeSlider.Value`
+  - `TimeSlider.Preview`
+- `videojs-vue/controls`
+  - `Controls.Root`
+  - `Controls.Group`
+- `videojs-vue/tooltip`
+  - `Tooltip.Provider`
+  - `Tooltip.Root`
+  - `Tooltip.Trigger`
+  - `Tooltip.Popup`
+  - `Tooltip.Arrow`
+- `videojs-vue/popover`
+  - `Popover.Root`
+  - `Popover.Trigger`
+  - `Popover.Popup`
+  - `Popover.Arrow`
+- `videojs-vue/captions-button`
+  - `CaptionsButton`
+- `videojs-vue/cast-button`
+  - `CastButton`
+- `videojs-vue/buffering-indicator`
+  - `BufferingIndicator`
+- `videojs-vue/alert-dialog`
+  - `AlertDialog.Root`
+  - `AlertDialog.Popup`
+  - `AlertDialog.Title`
+  - `AlertDialog.Description`
+  - `AlertDialog.Close`
+- `videojs-vue/error-dialog`
+  - `ErrorDialog.Root`
+  - `ErrorDialog.Popup`
+  - `ErrorDialog.Title`
+  - `ErrorDialog.Description`
+  - `ErrorDialog.Close`
+- `videojs-vue/hotkey`
+  - `Hotkey`
+- `videojs-vue/gesture`
+  - `Gesture`
+- `videojs-vue/thumbnail`
+  - `Thumbnail`
+- `videojs-vue/slider`
+  - `Slider.Root`
+  - `Slider.Track`
+  - `Slider.Buffer`
+  - `Slider.Fill`
+  - `Slider.Thumb`
+  - `Slider.Value`
+  - `Slider.Preview`
+  - `Slider.Thumbnail`
+
+## Notes
+
+- `Provider` owns the Video.js store instance and reattaches it whenever the media element or container changes.
+- `Container` keeps the same focus behavior as the React implementation: on pointer release it focuses itself when nothing inside already has focus, so keyboard shortcuts can work reliably.
+- Media components use native `<video>` / `<audio>` elements, register themselves automatically through provide/inject, and reactively sync key media props (`src`, `poster`, `autoplay`, `controls`, `loop`, `muted`, `playsInline`, `preload`, `crossOrigin`, `volume`, `playbackRate`).
+- Captions button now uses reactive track state and auto-disables when no caption/subtitle tracks are available.
+
+## Migration (Current Beta)
+
+- UI button primitives now use unified internal prop-merging behavior (`mergeProps`) instead of per-component manual click chaining.
+- External event handlers still run before internal handlers and can cancel internal behavior via `event.preventDefault()`.
+- Prefer `playsInline` over lowercase `playsinline` in JSX/templates.
+
 ## License
 
 [MIT](./LICENSE) License © 2026-PRESENT [ntnyq](https://github.com/ntnyq)

package/dist/AlertDialog-BPntemoC.js

@@ -0,0 +1,112 @@
+import { t as renderElement } from "./renderElement-D_UbvLk5.js";
+import { computed, defineComponent, h, inject, provide, shallowRef, watch } from "vue";
+//#region src/ui/alert-dialog/AlertDialog.ts
+const ALERT_DIALOG_KEY = Symbol("videojs-alert-dialog");
+function useAlertDialogContext() {
+	const context = inject(ALERT_DIALOG_KEY, null);
+	if (!context) throw new Error("AlertDialog parts must be used within AlertDialog.Root");
+	return context;
+}
+const AlertDialog = {
+	Root: defineComponent({
+		name: "VideoJsAlertDialogRoot",
+		inheritAttrs: false,
+		props: {
+			open: {
+				type: Boolean,
+				default: void 0
+			},
+			defaultOpen: {
+				type: Boolean,
+				default: false
+			},
+			onOpenChange: {
+				type: Function,
+				default: void 0
+			},
+			onOpenChangeComplete: {
+				type: Function,
+				default: void 0
+			}
+		},
+		setup(props, { attrs, slots }) {
+			const internalOpen = shallowRef(Boolean(props.defaultOpen));
+			const controlled = computed(() => props.open !== void 0);
+			const open = computed(() => controlled.value ? Boolean(props.open) : internalOpen.value);
+			function setOpen(nextOpen) {
+				if (!controlled.value) internalOpen.value = nextOpen;
+				props.onOpenChange?.(nextOpen);
+				props.onOpenChangeComplete?.(nextOpen);
+			}
+			watch(() => props.open, (value) => {
+				if (controlled.value && typeof value === "boolean") internalOpen.value = value;
+			}, { immediate: true });
+			provide(ALERT_DIALOG_KEY, {
+				open,
+				setOpen
+			});
+			return () => h("div", { ...attrs }, slots["default"]?.());
+		}
+	}),
+	Popup: defineComponent({
+		name: "VideoJsAlertDialogPopup",
+		inheritAttrs: false,
+		setup(_, { attrs, slots, expose }) {
+			const element = shallowRef(null);
+			const dialog = useAlertDialogContext();
+			expose({ el: element });
+			return () => {
+				if (!dialog.open.value) return null;
+				return h("div", {
+					...attrs,
+					ref: ((value) => {
+						element.value = value;
+					}),
+					role: "alertdialog",
+					"aria-modal": "true"
+				}, slots["default"]?.());
+			};
+		}
+	}),
+	Title: defineComponent({
+		name: "VideoJsAlertDialogTitle",
+		inheritAttrs: false,
+		setup(_, { attrs, slots }) {
+			return () => h("h2", { ...attrs }, slots["default"]?.());
+		}
+	}),
+	Description: defineComponent({
+		name: "VideoJsAlertDialogDescription",
+		inheritAttrs: false,
+		setup(_, { attrs, slots }) {
+			return () => h("p", { ...attrs }, slots["default"]?.());
+		}
+	}),
+	Close: defineComponent({
+		name: "VideoJsAlertDialogClose",
+		inheritAttrs: false,
+		setup(_, { attrs, slots, expose }) {
+			const element = shallowRef(null);
+			const dialog = useAlertDialogContext();
+			expose({ el: element });
+			return () => {
+				const content = slots["default"]?.() ?? "Close";
+				return renderElement("button", {}, {
+					state: { open: dialog.open.value },
+					ref: (value) => {
+						element.value = value;
+					},
+					props: [{
+						type: "button",
+						children: content,
+						onClick: (event) => {
+							if (!event.defaultPrevented) dialog.setOpen(false);
+						}
+					}, attrs]
+				});
+			};
+		}
+	})
+};
+//#endregion
+export { useAlertDialogContext as n, AlertDialog as t };

package/dist/Audio-3HgRIaNt.js

@@ -0,0 +1,29 @@
+import { o as useMediaAttach } from "./context-C48Uabdu.js";
+import { t as useSyncMediaProps } from "./useSyncMediaProps-C7F52G6b.js";
+import { defineComponent, h, onBeforeUnmount, shallowRef, watch } from "vue";
+//#region src/media/Audio.ts
+const Audio = defineComponent({
+	name: "VideoJsAudio",
+	inheritAttrs: false,
+	setup(_, { attrs, expose, slots }) {
+		const setMedia = useMediaAttach();
+		const element = shallowRef(null);
+		watch(element, (value) => {
+			setMedia?.(value);
+		}, { immediate: true });
+		useSyncMediaProps(element, attrs);
+		onBeforeUnmount(() => {
+			const current = element.value;
+			setMedia?.((previous) => previous === current ? null : previous);
+		});
+		expose({ el: element });
+		return () => h("audio", {
+			...attrs,
+			ref: ((value) => {
+				element.value = value;
+			})
+		}, slots["default"]?.());
+	}
+});
+//#endregion
+export { Audio as t };

package/dist/Audio-rV5KrK6q.d.ts

@@ -0,0 +1,7 @@
+import { AudioHTMLAttributes } from "vue";
+
+//#region src/media/Audio.d.ts
+interface AudioProps extends AudioHTMLAttributes {}
+declare const Audio: import("vue").DefineComponent<AudioProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AudioProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { AudioProps as n, Audio as t };

package/dist/BufferingIndicator-Crzitkyo.js

@@ -0,0 +1,64 @@
+import { a as useMedia } from "./context-C48Uabdu.js";
+import { t as useMediaEvents } from "./useMediaEvents-Br7vzJ_l.js";
+import { defineComponent, h, onBeforeUnmount, shallowRef } from "vue";
+//#region src/ui/buffering-indicator/BufferingIndicator.ts
+const BufferingIndicator = defineComponent({
+	name: "VideoJsBufferingIndicator",
+	inheritAttrs: false,
+	props: { delay: {
+		type: Number,
+		default: 500
+	} },
+	setup(props, { attrs, slots }) {
+		const media = useMedia();
+		const visible = shallowRef(false);
+		let timer = null;
+		function clearTimer() {
+			if (!timer) return;
+			clearTimeout(timer);
+			timer = null;
+		}
+		function queueShow() {
+			clearTimer();
+			timer = setTimeout(() => {
+				visible.value = true;
+			}, Math.max(0, props.delay));
+		}
+		function hide() {
+			clearTimer();
+			visible.value = false;
+		}
+		useMediaEvents(media, {
+			onDetach: hide,
+			bindings: () => [
+				{
+					type: "waiting",
+					listener: queueShow
+				},
+				{
+					type: "stalled",
+					listener: queueShow
+				},
+				{
+					type: "playing",
+					listener: hide
+				},
+				{
+					type: "canplay",
+					listener: hide
+				}
+			]
+		});
+		onBeforeUnmount(() => {
+			hide();
+		});
+		return () => h("div", {
+			...attrs,
+			hidden: !visible.value,
+			"aria-hidden": !visible.value,
+			"aria-busy": visible.value
+		}, slots["default"]?.());
+	}
+});
+//#endregion
+export { BufferingIndicator as t };

package/dist/CaptionsButton-DZvnZsRf.js

@@ -0,0 +1,124 @@
+import { a as useMedia } from "./context-C48Uabdu.js";
+import { t as renderElement } from "./renderElement-D_UbvLk5.js";
+import { computed, defineComponent, shallowRef, watch } from "vue";
+//#region src/ui/factories/useCaptionTracks.ts
+function getCaptionTrackList(media) {
+	const synthetic = media?.__vjsTextTracks;
+	if (Array.isArray(synthetic)) return synthetic.filter((track) => track.kind === "captions" || track.kind === "subtitles");
+	const textTracks = media?.textTracks;
+	if (!textTracks) return [];
+	return [...textTracks].filter((track) => track.kind === "captions" || track.kind === "subtitles");
+}
+function useCaptionTracks(media) {
+	const tracks = shallowRef([]);
+	const enabled = computed(() => tracks.value.some((track) => track.mode === "showing"));
+	const selectedIndex = computed(() => tracks.value.findIndex((track) => track.mode === "showing"));
+	const refresh = () => {
+		tracks.value = getCaptionTrackList(media.value).map((track, index) => ({
+			index,
+			kind: track.kind,
+			label: track.label,
+			language: track.language,
+			mode: track.mode
+		}));
+	};
+	const hideAll = () => {
+		const list = getCaptionTrackList(media.value);
+		for (const track of list) track.mode = "hidden";
+		refresh();
+	};
+	const show = (index) => {
+		const list = getCaptionTrackList(media.value);
+		if (list.length === 0) return;
+		const nextIndex = Math.max(0, Math.min(index, list.length - 1));
+		for (const [trackIndex, track] of list.entries()) track.mode = trackIndex === nextIndex ? "showing" : "hidden";
+		refresh();
+	};
+	const toggle = () => {
+		if (enabled.value) {
+			hideAll();
+			return;
+		}
+		const index = selectedIndex.value;
+		show(Math.max(index, 0));
+	};
+	watch(media, (node, _, onCleanup) => {
+		refresh();
+		if (!node) return;
+		const onChange = () => {
+			refresh();
+		};
+		node.addEventListener("loadedmetadata", onChange);
+		node.addEventListener("emptied", onChange);
+		const list = node.textTracks;
+		if (list?.addEventListener) {
+			list.addEventListener("change", onChange);
+			list.addEventListener("addtrack", onChange);
+			list.addEventListener("removetrack", onChange);
+		}
+		onCleanup(() => {
+			node.removeEventListener("loadedmetadata", onChange);
+			node.removeEventListener("emptied", onChange);
+			if (list?.removeEventListener) {
+				list.removeEventListener("change", onChange);
+				list.removeEventListener("addtrack", onChange);
+				list.removeEventListener("removetrack", onChange);
+			}
+		});
+	}, { immediate: true });
+	return {
+		tracks,
+		enabled,
+		selectedIndex,
+		refresh,
+		hideAll,
+		show,
+		toggle
+	};
+}
+//#endregion
+//#region src/ui/captions-button/CaptionsButton.ts
+const CaptionsButton = defineComponent({
+	name: "VideoJsCaptionsButton",
+	inheritAttrs: false,
+	props: {
+		onLabel: {
+			type: String,
+			default: "Captions on"
+		},
+		offLabel: {
+			type: String,
+			default: "Captions off"
+		}
+	},
+	setup(props, { attrs, slots, expose }) {
+		const element = shallowRef(null);
+		const captionTracks = useCaptionTracks(useMedia());
+		const label = computed(() => captionTracks.enabled.value ? props.onLabel : props.offLabel);
+		expose({ el: element });
+		return () => {
+			const content = slots["default"]?.() ?? label.value;
+			return renderElement("button", {}, {
+				state: {
+					enabled: captionTracks.enabled.value,
+					trackCount: captionTracks.tracks.value.length
+				},
+				ref: (value) => {
+					element.value = value;
+				},
+				props: [{
+					type: "button",
+					"aria-label": label.value,
+					"aria-pressed": captionTracks.enabled.value,
+					children: content,
+					onClick: (event) => {
+						if (event.defaultPrevented) return;
+						captionTracks.toggle();
+					}
+				}, attrs]
+			});
+		};
+	}
+});
+//#endregion
+export { CaptionsButton as t };

package/dist/CastButton-B645yeE0.js

@@ -0,0 +1,32 @@
+import { a as useMedia } from "./context-C48Uabdu.js";
+import { t as renderElement } from "./renderElement-D_UbvLk5.js";
+import { defineComponent, shallowRef } from "vue";
+//#region src/ui/cast-button/CastButton.ts
+const CastButton = defineComponent({
+	name: "VideoJsCastButton",
+	inheritAttrs: false,
+	setup(_, { attrs, slots, expose }) {
+		const element = shallowRef(null);
+		const media = useMedia();
+		expose({ el: element });
+		return () => {
+			const content = slots["default"]?.() ?? "Cast";
+			return renderElement("button", {}, {
+				state: { hasMedia: Boolean(media.value) },
+				ref: (value) => {
+					element.value = value;
+				},
+				props: [{
+					type: "button",
+					children: content,
+					onClick: async (event) => {
+						if (event.defaultPrevented) return;
+						await media.value?.remote?.prompt?.();
+					}
+				}, attrs]
+			});
+		};
+	}
+});
+//#endregion
+export { CastButton as t };

package/dist/Controls-CEaWmHRW.js

@@ -0,0 +1,33 @@
+import { defineComponent, h, shallowRef } from "vue";
+const Controls = {
+	Root: defineComponent({
+		name: "VideoJsControlsRoot",
+		inheritAttrs: false,
+		setup(_, { attrs, slots, expose }) {
+			const element = shallowRef(null);
+			expose({ el: element });
+			return () => h("div", {
+				...attrs,
+				ref: ((value) => {
+					element.value = value;
+				})
+			}, slots["default"]?.());
+		}
+	}),
+	Group: defineComponent({
+		name: "VideoJsControlsGroup",
+		inheritAttrs: false,
+		setup(_, { attrs, slots, expose }) {
+			const element = shallowRef(null);
+			expose({ el: element });
+			return () => h("div", {
+				...attrs,
+				ref: ((value) => {
+					element.value = value;
+				})
+			}, slots["default"]?.());
+		}
+	})
+};
+//#endregion
+export { Controls as t };

package/dist/ErrorDialog-Csv288q6.js

@@ -0,0 +1,60 @@
+import { a as useMedia } from "./context-C48Uabdu.js";
+import { t as useMediaEvents } from "./useMediaEvents-Br7vzJ_l.js";
+import { t as AlertDialog } from "./AlertDialog-BPntemoC.js";
+import { computed, defineComponent, h, inject, provide, shallowRef } from "vue";
+//#region src/ui/error-dialog/ErrorDialog.ts
+const ERROR_DIALOG_KEY = Symbol("videojs-error-dialog");
+function useErrorDialogContext() {
+	const context = inject(ERROR_DIALOG_KEY, null);
+	if (!context) throw new Error("ErrorDialog parts must be used within ErrorDialog.Root");
+	return context;
+}
+const Root = defineComponent({
+	name: "VideoJsErrorDialogRoot",
+	inheritAttrs: false,
+	setup(_, { attrs, slots }) {
+		const media = useMedia();
+		const lastError = shallowRef(null);
+		const sync = () => {
+			const node = media.value;
+			lastError.value = node ? node.error ?? null : null;
+		};
+		const clear = () => {
+			lastError.value = null;
+		};
+		useMediaEvents(media, {
+			onAttach: sync,
+			onDetach: clear,
+			bindings: () => [{
+				type: "error",
+				listener: sync
+			}, {
+				type: "loadeddata",
+				listener: clear
+			}]
+		});
+		const open = computed(() => Boolean(lastError.value));
+		provide(ERROR_DIALOG_KEY, { lastError });
+		return () => h(AlertDialog.Root, {
+			...attrs,
+			open: open.value
+		}, slots);
+	}
+});
+const Description = defineComponent({
+	name: "VideoJsErrorDialogDescription",
+	inheritAttrs: false,
+	setup(_, { attrs, slots }) {
+		const { lastError } = useErrorDialogContext();
+		return () => h("p", { ...attrs }, slots["default"]?.() ?? lastError.value?.message ?? "Playback error");
+	}
+});
+const ErrorDialog = {
+	Root,
+	Popup: AlertDialog.Popup,
+	Title: AlertDialog.Title,
+	Description,
+	Close: AlertDialog.Close
+};
+//#endregion
+export { useErrorDialogContext as n, ErrorDialog as t };