videojs-vue 0.1.0 → 0.3.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,36 @@ 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.
+Serve your video and poster at the URLs above. Component registration and skin styles are included; no Vue `isCustomElement` configuration is needed.
 
-## Entry points
+To use the upstream Compat skin, change the import to `videojs-vue/video/compat`. This entry loads only that skin and keeps the same player API. It does not include polyfills or guarantee a lower minimum browser version; see [Compat skin](https://videojs-vue-docs.vercel.app/guide/styling#compat-skin).
 
-| 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 Chrome 90+, use `videojs-vue/video/legacy` with `videojs-vue/skins/legacy.css`, opt-in `videojs-vue/polyfills`, and a consumer build targeting `chrome90`. See [legacy mode](https://videojs-vue-docs.vercel.app/guide/legacy) for setup and validation limits.
 
-For HLS, install `@videojs/hlsjs-video@10.0.1` and pass `HlsVideo` to the `media` prop. The basic entry does not import hls.js.
+`core-js` is an optional peer dependency. Install it with `pnpm add core-js@^3.50.0` before importing `videojs-vue/polyfills`. Other entries do not require it. If your target browsers or application already provide `Array.prototype.at` and `Object.hasOwn`, omit both the polyfill import and the `core-js` installation, including when using the legacy skin.
 
-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/Audio.d.ts

@@ -0,0 +1,69 @@
+import { MediaTrack } from "../media/types.js";
+import "../index.js";
+//#region src/audio/Audio.d.ts
+export 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

package/dist/audio/Audio.js

@@ -0,0 +1,21 @@
+import { mediaEmits } from "../media/events.js";
+import { commonMediaProps } from "../media/props.js";
+import { useMediaElement } from "../media/useMediaElement.js";
+import { defineComponent } from "vue";
+//#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 { Audio };