videojs-vue 0.1.0 → 0.2.0

package/README.md

@@ -1,14 +1,27 @@
 # videojs-vue
 
-Vue 3 components and composables for Video.js 10. Start with a complete player, then compose your own interface using the same upstream store and media capabilities.
+[![CI](https://github.com/ntnyq/videojs-vue/workflows/CI/badge.svg)](https://github.com/ntnyq/videojs-vue/actions)
+[![NPM VERSION](https://img.shields.io/npm/v/videojs-vue.svg)](https://www.npmjs.com/package/videojs-vue)
+[![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)
+
+Vue 3 components and composables for Video.js 10, with video and audio players, packaged skins, reactive playback state, and optional HLS support.
+
+[Documentation](https://videojs-vue-docs.vercel.app) · [Playground](https://videojs-vue-playground.vercel.app)
+
+## Installation
+
+Requires Vue 3.5 or later.
 
 ```sh
 pnpm add videojs-vue vue
 ```
 
+## Usage
+
 ```vue
 <script setup lang="ts">
-import { VideoPlayer } from 'videojs-vue'
+import { VideoPlayer } from 'videojs-vue/video/default'
 </script>
 
 <template>
@@ -20,39 +33,30 @@ import { VideoPlayer } from 'videojs-vue'
 </template>
 ```
 
-No `isCustomElement` configuration is needed when using the Vue components. Registration and packaged skin styles are included. Vue 3.5+ is required.
-
-## Entry points
-
-| Import                  | Purpose                                                        |
-| ----------------------- | -------------------------------------------------------------- |
-| `videojs-vue`           | `VideoPlayer`, `PlayerRoot`, `Video`, skins, state and actions |
-| `videojs-vue/media/hls` | Optional `HlsVideo` adapter and HLS source types               |
-| `videojs-vue/ui`        | Composable upstream controls and layout components             |
-
-For HLS, install `@videojs/hlsjs-video@10.0.1` and pass `HlsVideo` to the `media` prop. The basic entry does not import hls.js.
+Serve your video and poster at the URLs above. Component registration and skin styles are included; no Vue `isCustomElement` configuration is needed.
 
-See [getting started](docs/guide/getting-started.md), [API contracts](docs/api/overview.md), [composition](docs/guide/composition.md), and [lifecycle / SSR](docs/guide/lifecycle.md).
+See the [documentation](https://videojs-vue-docs.vercel.app) for HLS, custom controls, internationalization, and the API reference. Try the [playground](https://videojs-vue-playground.vercel.app) for interactive examples.
 
-## Workspace
+## Audio
 
-The root is the publishable package. Both `playground` and `docs` are private pnpm workspace packages consuming `videojs-vue` through `workspace:*`. Docs use VitePress **2.0.0-alpha.20** (the current v2 prerelease).
+```vue
+<script setup lang="ts">
+import { AudioPlayer } from 'videojs-vue/audio/default'
+</script>
 
-```sh
-pnpm install
-pnpm build
-pnpm play:dev        # localhost:5174
-pnpm docs:dev        # localhost:5173
-pnpm release:check   # format, lint, types, tests, package and both sites
+<template>
+  <AudioPlayer
+    src="/episode.mp3"
+    title="Episode one"
+  />
+</template>
 ```
 
-Run `pnpm dev` in another terminal while changing library source. Both sites consume the built package. See [playground scenarios](docs/playground.md).
-
-## Scope
+The fixed audio entry loads only the default audio skin. Use `videojs-vue/audio` when switching between both skins at runtime. Lightweight `core`, `composables`, and individual control entries are also available; see [bundle size and imports](https://videojs-vue-docs.vercel.app/guide/bundle-size). See the [audio API](https://videojs-vue-docs.vercel.app/api/audio).
 
-This version focuses on on-demand native video and HLS. Packaged default/neutral skins and a small set of upstream control bindings share one player store. It does not recreate Video.js internals, maintain a second playback state machine, or introduce a plugin framework. Audio, dedicated live presets, YouTube/Mux adapters and persistence remain future work.
+## Credits
 
-The previous provider/controller API and experimental component entrypoints have been removed. Migrate to `VideoPlayer` or `PlayerRoot` and the two composables described in the docs.
+Built on [Video.js](https://videojs.org), which provides the player, media adapters, and controls. Thanks to the [Video.js contributors](https://github.com/videojs/video.js).
 
 ## License
 

package/dist/Audio-D-RH-zmq.js

@@ -0,0 +1,55 @@
+import { t as createCommonPlayerActions } from "./actions-CRZ5C4-3.js";
+import { t as AUDIO_PLAYER_CONTEXT } from "./context-Zjy9Z5Uy.js";
+import "./register/audio/player.js";
+import { a as mediaEmits, n as commonMediaProps, t as useMediaElement } from "./useMediaElement-CO_r--i0.js";
+import { n as preservePlayerTree, r as createPlayerEmits, t as usePlayerRoot } from "./usePlayerRoot-Nsnn7msd.js";
+import { defineComponent, h, provide, withDirectives } from "vue";
+//#region src/audio/AudioPlayerRoot.ts
+const audioPlayerEmits = createPlayerEmits();
+/**
+* Vue component ref exposes the player handle alongside the standard instance.
+*/
+const AudioPlayerRoot = defineComponent({
+	name: "AudioPlayerRoot",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		poster: String
+	},
+	emits: audioPlayerEmits,
+	setup(props, { attrs, slots, emit, expose }) {
+		const { element, handle } = usePlayerRoot(createCommonPlayerActions, {
+			onReady: () => emit("ready", handle),
+			onMediaEvent: emit,
+			onVolume: (volume) => emit("update:volume", volume),
+			onMuted: (muted) => emit("update:muted", muted),
+			onPlaybackRate: (rate) => emit("update:playbackRate", rate)
+		});
+		provide(AUDIO_PLAYER_CONTEXT, handle);
+		expose(handle);
+		return () => withDirectives(h("audio-player", {
+			...attrs,
+			ref: element,
+			"content-title": props.title,
+			poster: props.poster
+		}, slots["default"]?.()), [[preservePlayerTree]]);
+	}
+});
+//#endregion
+//#region src/audio/Audio.ts
+const Audio = defineComponent({
+	name: "Audio",
+	inheritAttrs: false,
+	props: commonMediaProps,
+	emits: mediaEmits,
+	setup(props, context) {
+		return useMediaElement({
+			tag: "audio",
+			props,
+			context,
+			emit: context.emit
+		});
+	}
+});
+//#endregion
+export { AudioPlayerRoot as n, audioPlayerEmits as r, Audio as t };

package/dist/Audio-DmoQgIRM.d.ts

@@ -0,0 +1,70 @@
+import { t as MediaTrack } from "./types-wAkjM01D.js";
+import "./index-DhJ5A5TI.js";
+//#region src/audio/Audio.d.ts
+declare const Audio: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly src: import("vue").PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: import("vue").PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: import("vue").PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: import("vue").PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: import("vue").PropType<number | undefined>;
+  readonly muted: {
+    readonly type: import("vue").PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: import("vue").PropType<number | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<"abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "ended" | "enterpictureinpicture" | "error" | "leavepictureinpicture" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play" | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend" | "timeupdate" | "volumechange" | "waiting", (event: Event) => boolean>, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly src: import("vue").PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: import("vue").PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: import("vue").PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: import("vue").PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: import("vue").PropType<number | undefined>;
+  readonly muted: {
+    readonly type: import("vue").PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: import("vue").PropType<number | undefined>;
+}>> & Readonly<{
+  onAbort?: (event: Event) => any;
+  onCanplay?: (event: Event) => any;
+  onCanplaythrough?: (event: Event) => any;
+  onDurationchange?: (event: Event) => any;
+  onEmptied?: (event: Event) => any;
+  onEnded?: (event: Event) => any;
+  onEnterpictureinpicture?: (event: Event) => any;
+  onError?: (event: Event) => any;
+  onLeavepictureinpicture?: (event: Event) => any;
+  onLoadeddata?: (event: Event) => any;
+  onLoadedmetadata?: (event: Event) => any;
+  onLoadstart?: (event: Event) => any;
+  onPause?: (event: Event) => any;
+  onPlay?: (event: Event) => any;
+  onPlaying?: (event: Event) => any;
+  onProgress?: (event: Event) => any;
+  onRatechange?: (event: Event) => any;
+  onSeeked?: (event: Event) => any;
+  onSeeking?: (event: Event) => any;
+  onStalled?: (event: Event) => any;
+  onSuspend?: (event: Event) => any;
+  onTimeupdate?: (event: Event) => any;
+  onVolumechange?: (event: Event) => any;
+  onWaiting?: (event: Event) => any;
+}>, {
+  readonly autoplay: boolean;
+  readonly loop: boolean;
+  readonly preload: "auto" | "metadata" | "none";
+  readonly muted: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { Audio as t };

package/dist/AudioPlayerRoot-D47326rh.d.ts

@@ -0,0 +1,79 @@
+import { r as AudioPlayerHandle } from "./types-DR9kogyX.js";
+import "./player-DwjY3MEu.js";
+import { PropType } from "vue";
+//#region src/audio/AudioPlayerRoot.d.ts
+declare const component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  ready: (_player: AudioPlayerHandle) => boolean;
+  'update:volume': (_volume: number) => boolean;
+  'update:muted': (_muted: boolean) => boolean;
+  'update:playbackRate': (_rate: number) => boolean;
+  abort: (event: Event) => boolean;
+  canplay: (event: Event) => boolean;
+  canplaythrough: (event: Event) => boolean;
+  durationchange: (event: Event) => boolean;
+  emptied: (event: Event) => boolean;
+  ended: (event: Event) => boolean;
+  enterpictureinpicture: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  leavepictureinpicture: (event: Event) => boolean;
+  loadeddata: (event: Event) => boolean;
+  loadedmetadata: (event: Event) => boolean;
+  loadstart: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  play: (event: Event) => boolean;
+  playing: (event: Event) => boolean;
+  progress: (event: Event) => boolean;
+  ratechange: (event: Event) => boolean;
+  seeked: (event: Event) => boolean;
+  seeking: (event: Event) => boolean;
+  stalled: (event: Event) => boolean;
+  suspend: (event: Event) => boolean;
+  timeupdate: (event: Event) => boolean;
+  volumechange: (event: Event) => boolean;
+  waiting: (event: Event) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>> & Readonly<{
+  onAbort?: (event: Event) => any;
+  onCanplay?: (event: Event) => any;
+  onCanplaythrough?: (event: Event) => any;
+  onDurationchange?: (event: Event) => any;
+  onEmptied?: (event: Event) => any;
+  onEnded?: (event: Event) => any;
+  onEnterpictureinpicture?: (event: Event) => any;
+  onError?: (event: Event) => any;
+  onLeavepictureinpicture?: (event: Event) => any;
+  onLoadeddata?: (event: Event) => any;
+  onLoadedmetadata?: (event: Event) => any;
+  onLoadstart?: (event: Event) => any;
+  onPause?: (event: Event) => any;
+  onPlay?: (event: Event) => any;
+  onPlaying?: (event: Event) => any;
+  onProgress?: (event: Event) => any;
+  onRatechange?: (event: Event) => any;
+  onReady?: (_player: AudioPlayerHandle) => any;
+  onSeeked?: (event: Event) => any;
+  onSeeking?: (event: Event) => any;
+  onStalled?: (event: Event) => any;
+  onSuspend?: (event: Event) => any;
+  onTimeupdate?: (event: Event) => any;
+  "onUpdate:muted"?: (_muted: boolean) => any;
+  "onUpdate:playbackRate"?: (_rate: number) => any;
+  "onUpdate:volume"?: (_volume: number) => any;
+  onVolumechange?: (event: Event) => any;
+  onWaiting?: (event: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Vue component ref exposes the player handle alongside the standard instance.
+ */
+declare const AudioPlayerRoot: typeof component & {
+  new (): InstanceType<typeof component> & AudioPlayerHandle;
+};
+//#endregion
+export { AudioPlayerRoot as t };

package/dist/Video-fUL_ClzK.js

@@ -0,0 +1,55 @@
+import { n as createPlayerActions } from "./actions-CRZ5C4-3.js";
+import { r as PLAYER_CONTEXT } from "./context-Zjy9Z5Uy.js";
+import { a as mediaEmits, r as mediaProps, t as useMediaElement } from "./useMediaElement-CO_r--i0.js";
+import { n as preservePlayerTree, r as createPlayerEmits, t as usePlayerRoot } from "./usePlayerRoot-Nsnn7msd.js";
+import "./register/video/player.js";
+import { defineComponent, h, provide, withDirectives } from "vue";
+//#region src/player/PlayerRoot.ts
+const playerEmits = createPlayerEmits();
+/**
+* Vue component ref exposes the player handle alongside the standard instance.
+*/
+const PlayerRoot = defineComponent({
+	name: "PlayerRoot",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		poster: String
+	},
+	emits: playerEmits,
+	setup(props, { attrs, slots, emit, expose }) {
+		const { element, handle } = usePlayerRoot(createPlayerActions, {
+			onReady: () => emit("ready", handle),
+			onMediaEvent: emit,
+			onVolume: (volume) => emit("update:volume", volume),
+			onMuted: (muted) => emit("update:muted", muted),
+			onPlaybackRate: (rate) => emit("update:playbackRate", rate)
+		});
+		provide(PLAYER_CONTEXT, handle);
+		expose(handle);
+		return () => withDirectives(h("video-player", {
+			...attrs,
+			ref: element,
+			"content-title": props.title,
+			poster: props.poster
+		}, slots["default"]?.()), [[preservePlayerTree]]);
+	}
+});
+//#endregion
+//#region src/media/Video.ts
+const Video = defineComponent({
+	name: "Video",
+	inheritAttrs: false,
+	props: mediaProps,
+	emits: mediaEmits,
+	setup(props, context) {
+		return useMediaElement({
+			tag: "video",
+			props,
+			context,
+			emit: context.emit
+		});
+	}
+});
+//#endregion
+export { PlayerRoot as n, playerEmits as r, Video as t };

package/dist/actions-CRZ5C4-3.js

@@ -0,0 +1,59 @@
+//#region src/player/actions.ts
+function requirePlayerStore(getStore) {
+	const store = getStore();
+	if (!store) throw new Error("[videojs-vue] Player is not ready or is inactive.");
+	return store;
+}
+/**
+* Resolve shared playback commands against the active store on every call.
+* @param {() => AudioPlayerStore | null} getStore - Reads the currently active audio or video store.
+* @returns {CommonPlayerActions} Commands bound to the current player.
+*/
+function createCommonPlayerActions(getStore) {
+	const requireStore = () => requirePlayerStore(getStore);
+	return {
+		async play() {
+			return await requireStore().play();
+		},
+		pause() {
+			return requireStore().pause();
+		},
+		async seek(time) {
+			return await requireStore().seek(time);
+		},
+		setVolume(volume) {
+			return requireStore().setVolume(volume);
+		},
+		setMuted(muted) {
+			return requireStore().setMuted(muted);
+		},
+		setPlaybackRate(rate) {
+			return requireStore().setPlaybackRate(rate);
+		}
+	};
+}
+/**
+* Resolve on every call so actions cannot retain an unmounted player's store.
+* @param {() => PlayerStore | null} getStore - Reads the currently active store.
+* @returns {PlayerActions} Commands bound to the current player.
+*/
+function createPlayerActions(getStore) {
+	const requireStore = () => requirePlayerStore(getStore);
+	return {
+		...createCommonPlayerActions(getStore),
+		async requestFullscreen() {
+			return await requireStore().requestFullscreen();
+		},
+		async exitFullscreen() {
+			return await requireStore().exitFullscreen();
+		},
+		async requestPictureInPicture() {
+			return await requireStore().requestPictureInPicture();
+		},
+		async exitPictureInPicture() {
+			return await requireStore().exitPictureInPicture();
+		}
+	};
+}
+//#endregion
+export { createPlayerActions as n, createCommonPlayerActions as t };

package/dist/audio/composables.d.ts

@@ -0,0 +1,18 @@
+import { a as AudioPlayerStore, i as AudioPlayerState, o as AudioPlayerTarget, r as AudioPlayerHandle, t as AudioPlayerActions } from "../types-DR9kogyX.js";
+import { ComputedRef } from "vue";
+//#region src/audio/composables.d.ts
+/**
+ * Subscribe to an audio snapshot selection; unavailable players yield undefined.
+ * @param {(state: AudioPlayerState) => Selected} selector - Selects from the immutable upstream audio snapshot.
+ * @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+ * @returns {ComputedRef<Selected | undefined>} A readonly selection, undefined while unavailable.
+ */
+export declare function useAudioPlayerState<Selected>(selector: (state: AudioPlayerState) => Selected, target?: AudioPlayerTarget): ComputedRef<Selected | undefined>;
+/**
+ * Resolve the current audio player on each call. Unready actions are never queued.
+ * @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+ * @returns {AudioPlayerActions} Playback commands bound to the current player.
+ */
+export declare function useAudioPlayerActions(target?: AudioPlayerTarget): AudioPlayerActions;
+//#endregion
+export type { AudioPlayerActions, AudioPlayerHandle, AudioPlayerState, AudioPlayerStore, AudioPlayerTarget };

package/dist/audio/composables.js

@@ -0,0 +1,25 @@
+import { t as useStoreSelection } from "../useStoreSelection-BFUpSMPo.js";
+import { t as createCommonPlayerActions } from "../actions-CRZ5C4-3.js";
+import { a as useTarget, t as AUDIO_PLAYER_CONTEXT } from "../context-Zjy9Z5Uy.js";
+//#region src/audio/composables.ts
+/**
+* Subscribe to an audio snapshot selection; unavailable players yield undefined.
+* @param {(state: AudioPlayerState) => Selected} selector - Selects from the immutable upstream audio snapshot.
+* @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+* @returns {ComputedRef<Selected | undefined>} A readonly selection, undefined while unavailable.
+*/
+function useAudioPlayerState(selector, target) {
+	const player = useTarget(AUDIO_PLAYER_CONTEXT, "AudioPlayerRoot", target);
+	return useStoreSelection(() => player.value?.store, selector);
+}
+/**
+* Resolve the current audio player on each call. Unready actions are never queued.
+* @param {AudioPlayerTarget} target - Explicit player target, or injected audio context when omitted.
+* @returns {AudioPlayerActions} Playback commands bound to the current player.
+*/
+function useAudioPlayerActions(target) {
+	const player = useTarget(AUDIO_PLAYER_CONTEXT, "AudioPlayerRoot", target);
+	return createCommonPlayerActions(() => player.value?.store ?? null);
+}
+//#endregion
+export { useAudioPlayerActions, useAudioPlayerState };

package/dist/audio/core.d.ts

@@ -0,0 +1,6 @@
+import { a as PlayerMedia, t as MediaTrack } from "../types-wAkjM01D.js";
+import { a as AudioPlayerStore, i as AudioPlayerState, n as AudioPlayerElement, o as AudioPlayerTarget, r as AudioPlayerHandle, t as AudioPlayerActions } from "../types-DR9kogyX.js";
+import { t as AudioPlayerRoot } from "../AudioPlayerRoot-D47326rh.js";
+import { r as MediaEventName, t as CommonMediaProps } from "../index-DhJ5A5TI.js";
+import { t as Audio } from "../Audio-DmoQgIRM.js";
+export { Audio, type CommonMediaProps as AudioMediaProps, type AudioPlayerActions, type AudioPlayerElement, type AudioPlayerHandle, AudioPlayerRoot, type AudioPlayerState, type AudioPlayerStore, type AudioPlayerTarget, type MediaEventName, type MediaTrack, type PlayerMedia };

package/dist/audio/core.js

@@ -0,0 +1 @@
+export { t as Audio, n as AudioPlayerRoot } from "../Audio-D-RH-zmq.js";