@viostream/viostream-player-vue 0.1.1

package/README.md

@@ -0,0 +1,478 @@
+# viostream-player-vue
+
+<a href="https://www.npmjs.com/package/@viostream/viostream-player-vue"><img src="https://img.shields.io/npm/v/@viostream/viostream-player-vue.svg?sanitize=true" alt="npm version"></a>
+<a href="https://www.npmjs.com/package/@viostream/viostream-player-vue"><img src="https://img.shields.io/npm/l/@viostream/viostream-player-vue.svg?sanitize=true" alt="License"></a>
+<a href="https://npmcharts.com/compare/@viostream/viostream-player-vue?interval=30"><img src="https://img.shields.io/npm/dm/@viostream/viostream-player-vue.svg?sanitize=true" alt="Downloads"></a>
+
+Vue 3 SDK for the [Viostream](https://www.viostream.com) video player. Embed, control, and listen to player events with full TypeScript support.
+
+## Requirements
+
+- Vue 3.3+
+- A Viostream account key (found on the **Settings > General** page in Viostream)
+
+## Installation
+
+```bash
+npm install @viostream/viostream-player-vue
+```
+
+## Quick Start
+
+### Component
+
+Drop a `<ViostreamPlayer>` into any Vue component. The SDK loads the Viostream script automatically.
+
+```vue
+<script setup lang="ts">
+import { ViostreamPlayer } from '@viostream/viostream-player-vue';
+</script>
+
+<template>
+  <ViostreamPlayer
+    account-key="vc-100100100"
+    public-key="nhedxonrxsyfee"
+    :display-title="true"
+    :sharing="true"
+    @play="console.log('playing')"
+  />
+</template>
+```
+
+### Headless / Programmatic
+
+Use `createViostreamPlayer` when you need full control without a component:
+
+```ts
+import { createViostreamPlayer } from '@viostream/viostream-player-vue';
+
+const player = await createViostreamPlayer({
+  accountKey: 'vc-100100100',
+  publicKey: 'nhedxonrxsyfee',
+  target: 'my-video-div', // element id or HTMLElement
+  options: { displayTitle: true }
+});
+
+player.play();
+```
+
+---
+
+## `<ViostreamPlayer>` Component
+
+### Props
+
+#### Required
+
+| Prop | Type | Description |
+|---|---|---|
+| `account-key` | `string` | Your Viostream account key (e.g. `'vc-100100100'`). |
+| `public-key` | `string` | The public key of the media asset to embed. |
+
+#### Embed Options
+
+All embed options are optional and passed directly to the Viostream embed API.
+
+| Prop | Type | Description |
+|---|---|---|
+| `chapters` | `boolean` | Display chapter markers. |
+| `chapter-display-type` | `'dropdown' \| 'progressbar' \| 'horizontal'` | Chapter display style. |
+| `chapter-slug` | `string` | Seek to a named chapter before playback. |
+| `display-title` | `boolean` | Show the video title overlay. |
+| `hls-quality-selector` | `boolean` | Show the HLS quality selector. |
+| `player-key` | `string` | Override the player theme to use. |
+| `sharing` | `boolean` | Show sharing controls. |
+| `speed-selector` | `boolean` | Show playback speed selector. |
+| `start-end-timespan` | `string` | Play a specific section (e.g. `'10,30'`). |
+| `start-time` | `string` | Seek to a time (seconds) before playback. |
+| `transcript-download` | `boolean` | Allow transcript download. |
+
+#### Events
+
+| Event | Payload | Fires when |
+|---|---|---|
+| `@play` | — | Playback starts or resumes. |
+| `@pause` | — | Playback is paused. |
+| `@ended` | — | Media finishes playing. |
+| `@time-update` | `ViostreamTimeUpdateData` | Current time changes. `.seconds`, `.duration`. |
+| `@volume-change` | `ViostreamVolumeChangeData` | Volume changes. `.volume`. |
+| `@error` | `ViostreamErrorData` | An error occurs. `.code`, `.message`. |
+| `@progress` | `ViostreamProgressData` | Buffering progress. `.percent`. |
+| `@ready` | — | Player is ready. |
+| `@seeked` | — | Seek operation completes. |
+| `@loaded` | — | Metadata has loaded. |
+
+#### Other Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `class` | `string` | CSS class applied to the outer wrapper `<div>`. |
+| `@player-ready` | `(player: ViostreamPlayerInstance) => void` | Event providing the player instance for programmatic control. |
+
+#### Slots
+
+| Slot | Scoped Props | Description |
+|---|---|---|
+| `loading` | — | Custom content shown while the player is loading. |
+| `error` | `{ message: string }` | Custom error display. Receives the error message. |
+
+### Getting the Player Instance
+
+Use `@player-ready` to get a reference to the player for programmatic control:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ViostreamPlayer } from '@viostream/viostream-player-vue';
+import type { ViostreamPlayerInstance } from '@viostream/viostream-player-vue';
+
+const player = ref<ViostreamPlayerInstance>();
+</script>
+
+<template>
+  <ViostreamPlayer
+    account-key="vc-100100100"
+    public-key="nhedxonrxsyfee"
+    @player-ready="(p) => (player = p)"
+  />
+
+  <button @click="player?.play()">Play</button>
+  <button @click="player?.pause()">Pause</button>
+</template>
+```
+
+### Custom Loading and Error States
+
+Use slots to replace the default loading/error UI:
+
+```vue
+<ViostreamPlayer
+  account-key="vc-100100100"
+  public-key="nhedxonrxsyfee"
+>
+  <template #loading>
+    <p>Loading video...</p>
+  </template>
+
+  <template #error="{ message }">
+    <div class="my-error">Something went wrong: {{ message }}</div>
+  </template>
+</ViostreamPlayer>
+```
+
+### Cleanup
+
+The player is destroyed automatically when the component unmounts. All event listeners are cleaned up and the player iframe is removed from the DOM.
+
+---
+
+## `createViostreamPlayer()`
+
+For use outside of Vue components or when you need full lifecycle control.
+
+```ts
+import { createViostreamPlayer } from '@viostream/viostream-player-vue';
+import type { CreateViostreamPlayerOptions } from '@viostream/viostream-player-vue';
+
+const player = await createViostreamPlayer({
+  accountKey: 'vc-100100100',
+  publicKey: 'nhedxonrxsyfee',
+  target: 'my-video-div',       // element id (string) or HTMLElement
+  options: {
+    displayTitle: true,
+    sharing: true,
+    speedSelector: true
+  }
+});
+```
+
+### Options
+
+| Property | Type | Description |
+|---|---|---|
+| `accountKey` | `string` | Your Viostream account key. |
+| `publicKey` | `string` | Public key of the media asset. |
+| `target` | `string \| HTMLElement` | Container element id or direct DOM reference. |
+| `options` | `ViostreamEmbedOptions` | Embed options (same as component props above). |
+
+---
+
+## Player Instance API
+
+Both the component (via `@player-ready`) and `createViostreamPlayer()` provide a `ViostreamPlayerInstance` with the following methods.
+
+### Playback Controls
+
+```ts
+player.play();
+player.pause();
+player.mute();
+player.unmute();
+player.setVolume(0.5);          // 0 to 1
+player.setLoop(true);
+player.setCurrentTime(30);      // seek to 30 seconds
+player.setCurrentTime(30, true); // seek and auto-play
+player.reload();                // reload the player
+player.reload({ key: 'value' }); // reload with new settings
+```
+
+### Getters (Promise-based)
+
+All getters return promises. The SDK converts the underlying callback-based API to `async`/`await`.
+
+```ts
+const volume    = await player.getVolume();          // number (0-1)
+const loop      = await player.getLoop();            // boolean
+const time      = await player.getCurrentTime();     // number (seconds)
+const paused    = await player.getPaused();          // boolean
+const duration  = await player.getDuration();        // number (seconds)
+const muted     = await player.getMuted();           // boolean
+const ratio     = await player.getAspectRatio();     // number
+const liveTime  = await player.getLiveCurrentTime(); // number (seconds)
+const height    = await player.getHeight();          // number (pixels)
+const tracks    = await player.getTracks();          // ViostreamTrack[]
+```
+
+### Track Management
+
+```ts
+const tracks = await player.getTracks();
+player.setTrack(tracks[0]);   // pass a ViostreamTrack object
+player.setTrack('en');        // or a track id string
+```
+
+### Cue Management
+
+```ts
+player.cueAdd({ startTime: 10, text: 'Introduction' });
+
+player.cueUpdate(
+  { startTime: 10, text: 'Introduction' },
+  { text: 'Updated Introduction' }
+);
+
+player.cueDelete('cue-id');
+```
+
+### Automatic Speech Recognition (ASR)
+
+```ts
+player.asrAdd(cueArray, 'asr-track-id');
+```
+
+### Events
+
+Subscribe to player events with `on()`. It returns an unsubscribe function.
+
+```ts
+// Subscribe
+const unsubscribe = player.on('timeupdate', (data) => {
+  console.log(`${data.seconds}s / ${data.duration}s`);
+});
+
+// Unsubscribe later
+unsubscribe();
+
+// Or use off() directly
+const handler = () => console.log('paused');
+player.on('pause', handler);
+player.off('pause', handler);
+```
+
+#### Available Events
+
+| Event | Callback Data | Description |
+|---|---|---|
+| `play` | `void` | Playback started or resumed. |
+| `pause` | `void` | Playback paused. |
+| `ended` | `void` | Media finished playing. |
+| `timeupdate` | `{ seconds: number, duration: number }` | Playback time changed. |
+| `volumechange` | `{ volume: number }` | Volume changed. |
+| `error` | `{ code?: number, message?: string }` | Error occurred. |
+| `progress` | `{ percent: number }` | Buffering progress. |
+| `ready` | `void` | Player is ready. |
+| `seeked` | `void` | Seek completed. |
+| `loaded` | `void` | Metadata loaded. |
+
+Custom event names are also accepted via the string index signature:
+
+```ts
+player.on('my-custom-event', (data) => {
+  console.log(data);
+});
+```
+
+### Destroy
+
+When using `createViostreamPlayer()`, you are responsible for cleanup:
+
+```ts
+player.destroy();
+```
+
+After calling `destroy()`:
+- All event listeners are removed.
+- The player iframe is removed from the DOM.
+- Getter calls will reject with `"Player has been destroyed"`.
+- `player.raw` returns `undefined`.
+
+### Raw Escape Hatch
+
+If you need direct access to the underlying Viostream player instance:
+
+```ts
+const raw = player.raw; // RawViostreamPlayerInstance | undefined
+if (raw) {
+  raw.getVolume((vol) => console.log(vol)); // callback-based original API
+}
+```
+
+---
+
+## Script Loader
+
+The SDK loads the Viostream API script automatically. If you need manual control over loading (e.g. preloading), you can use `loadViostream` directly:
+
+```ts
+import { loadViostream } from '@viostream/viostream-player-vue';
+
+const api = await loadViostream('vc-100100100');
+// api.embed(...) is now available
+```
+
+The loader:
+- Injects `<script src="https://play.viostream.com/api/{accountKey}">` into `<head>`.
+- Deduplicates requests -- calling it multiple times with the same key returns the same promise.
+- Times out after 15 seconds if the script fails to load.
+- Detects if the script tag already exists in the DOM (e.g. added manually) and waits for it.
+
+---
+
+## TypeScript
+
+Every export is fully typed. Import types alongside runtime exports:
+
+```ts
+import { ViostreamPlayer, createViostreamPlayer } from '@viostream/viostream-player-vue';
+import type {
+  ViostreamPlayerInstance,
+  ViostreamPlayerProps,
+  ViostreamPlayerEventProps,
+  ViostreamEmbedOptions,
+  ViostreamTimeUpdateData,
+  ViostreamVolumeChangeData,
+  ViostreamErrorData,
+  ViostreamProgressData,
+  ViostreamPlayerEventMap,
+  ViostreamEventHandler,
+  ViostreamCue,
+  ViostreamCueFieldUpdate,
+  ViostreamTrack,
+  CreateViostreamPlayerOptions,
+  RawViostreamPlayerInstance,
+  ViostreamGlobal
+} from '@viostream/viostream-player-vue';
+```
+
+---
+
+## Full Example
+
+A complete example showing the component with custom controls, event logging, and async getters:
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ViostreamPlayer } from '@viostream/viostream-player-vue';
+import type {
+  ViostreamPlayerInstance,
+  ViostreamTimeUpdateData,
+} from '@viostream/viostream-player-vue';
+
+const player = ref<ViostreamPlayerInstance>();
+const currentTime = ref(0);
+const duration = ref(0);
+const paused = ref(true);
+const log = ref<string[]>([]);
+
+function addLog(msg: string) {
+  log.value = [msg, ...log.value.slice(0, 49)];
+}
+
+function handleReady(p: ViostreamPlayerInstance) {
+  player.value = p;
+  p.getDuration().then((d) => (duration.value = d));
+}
+
+function handleTimeUpdate(data: ViostreamTimeUpdateData) {
+  currentTime.value = data.seconds;
+  duration.value = data.duration;
+}
+
+function format(s: number): string {
+  return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
+}
+</script>
+
+<template>
+  <ViostreamPlayer
+    account-key="vc-100100100"
+    public-key="nhedxonrxsyfee"
+    :display-title="true"
+    :sharing="true"
+    :speed-selector="true"
+    :hls-quality-selector="true"
+    @play="() => { paused = false; addLog('play'); }"
+    @pause="() => { paused = true; addLog('pause'); }"
+    @ended="() => addLog('ended')"
+    @time-update="handleTimeUpdate"
+    @player-ready="handleReady"
+  />
+
+  <div>
+    <button @click="paused ? player?.play() : player?.pause()">
+      {{ paused ? 'Play' : 'Pause' }}
+    </button>
+    <button @click="player?.setCurrentTime(0)">Restart</button>
+    <span>{{ format(currentTime) }} / {{ format(duration) }}</span>
+  </div>
+
+  <div>
+    <button @click="async () => {
+      const vol = await player?.getVolume();
+      addLog(`volume: ${vol}`);
+    }">Get Volume</button>
+    <button @click="async () => {
+      const tracks = await player?.getTracks();
+      addLog(`tracks: ${JSON.stringify(tracks)}`);
+    }">Get Tracks</button>
+  </div>
+
+  <pre>{{ log.join('\n') }}</pre>
+</template>
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build (compile and bundle to dist/)
+npm run build
+
+# Type-check
+npm run check
+
+# Run tests
+npm run test
+
+# Run tests in watch mode
+npm run test:watch
+```
+
+## License
+
+MIT

package/dist/ViostreamPlayer.vue.d.ts

@@ -0,0 +1,84 @@
+import { ViostreamPlayer, ViostreamTimeUpdateData, ViostreamVolumeChangeData, ViostreamErrorData, ViostreamProgressData } from '@viostream/viostream-player-core';
+type __VLS_Props = {
+    accountKey: string;
+    publicKey: string;
+    chapters?: boolean;
+    chapterDisplayType?: 'progressbar';
+    chapterSlug?: string;
+    displayTitle?: boolean;
+    hlsQualitySelector?: boolean;
+    playerKey?: string;
+    sharing?: boolean;
+    speedSelector?: boolean;
+    startEndTimespan?: string;
+    startTime?: string;
+    transcriptDownload?: boolean;
+    class?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        loading?: () => unknown;
+        error?: (props: {
+            message: string;
+        }) => unknown;
+    }> & {
+        loading?: () => unknown;
+        error?: (props: {
+            message: string;
+        }) => unknown;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    play: () => any;
+    pause: () => any;
+    ended: () => any;
+    timeUpdate: (data: ViostreamTimeUpdateData) => any;
+    volumeChange: (data: ViostreamVolumeChangeData) => any;
+    error: (data: ViostreamErrorData) => any;
+    progress: (data: ViostreamProgressData) => any;
+    ready: () => any;
+    seeked: () => any;
+    loaded: () => any;
+    playerReady: (player: ViostreamPlayer) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPlay?: (() => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onEnded?: (() => any) | undefined;
+    onTimeUpdate?: ((data: ViostreamTimeUpdateData) => any) | undefined;
+    onVolumeChange?: ((data: ViostreamVolumeChangeData) => any) | undefined;
+    onError?: ((data: ViostreamErrorData) => any) | undefined;
+    onProgress?: ((data: ViostreamProgressData) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onSeeked?: (() => any) | undefined;
+    onLoaded?: (() => any) | undefined;
+    onPlayerReady?: ((player: ViostreamPlayer) => any) | undefined;
+}>, {
+    chapters: boolean;
+    chapterDisplayType: "progressbar";
+    chapterSlug: string;
+    displayTitle: boolean;
+    hlsQualitySelector: boolean;
+    playerKey: string;
+    sharing: boolean;
+    speedSelector: boolean;
+    startEndTimespan: string;
+    startTime: string;
+    transcriptDownload: boolean;
+    class: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ViostreamPlayer.vue.d.ts.map

package/dist/ViostreamPlayer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViostreamPlayer.vue.d.ts","sourceRoot":"","sources":["../src/ViostreamPlayer.vue"],"names":[],"mappings":"AAMA;AA8OA,OAAO,KAAK,EAEV,eAAe,EAGf,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,kCAAkC,CAAC;AAM1C,KAAK,WAAW,GAAG;IAEjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAGlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2LF,iBAAS,cAAc;WAuCT,OAAO,IAA6B;;kBA1LtC,MAAM,OAAO;gBACf,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;kBADrC,MAAM,OAAO;gBACf,CAAC,KAAK,EAAE;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;;;;EA8LhD;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;cApQR,OAAO;wBACG,aAAa;iBACpB,MAAM;kBACL,OAAO;wBACD,OAAO;eAChB,MAAM;aACR,OAAO;mBACD,OAAO;sBACJ,MAAM;eACb,MAAM;wBACG,OAAO;WAGpB,MAAM;;;kBAiQd,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @viostream/viostream-player-vue
+ *
+ * Vue 3 SDK for the Viostream video player.
+ *
+ * @example Component usage
+ * ```vue
+ * <script setup lang="ts">
+ *   import { ViostreamPlayer } from '@viostream/viostream-player-vue';
+ * </script>
+ *
+ * <template>
+ *   <ViostreamPlayer
+ *     account-key="vc-100100100"
+ *     public-key="nhedxonrxsyfee"
+ *     :display-title="true"
+ *     @play="console.log('playing')"
+ *   />
+ * </template>
+ * ```
+ *
+ * @example Headless / programmatic usage
+ * ```ts
+ * import { createViostreamPlayer } from '@viostream/viostream-player-vue';
+ *
+ * const player = await createViostreamPlayer({
+ *   accountKey: 'vc-100100100',
+ *   publicKey: 'nhedxonrxsyfee',
+ *   target: 'my-video-div'
+ * });
+ *
+ * player.play();
+ * const time = await player.getCurrentTime();
+ * player.on('ended', () => console.log('done'));
+ * ```
+ */
+export { default as ViostreamPlayer } from './ViostreamPlayer.vue';
+export { createViostreamPlayer, wrapRawPlayer, loadViostream, } from '@viostream/viostream-player-core';
+export type { CreateViostreamPlayerOptions, ViostreamEmbedOptions, ViostreamTimeUpdateData, ViostreamVolumeChangeData, ViostreamErrorData, ViostreamProgressData, ViostreamPlayerEventMap, ViostreamEventHandler, ViostreamCue, ViostreamCueFieldUpdate, ViostreamTrack, ViostreamPlayer as ViostreamPlayerInstance, RawViostreamPlayerInstance, ViostreamGlobal, } from '@viostream/viostream-player-core';
+export type { ViostreamPlayerProps, ViostreamPlayerEventProps, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,aAAa,GACd,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EACV,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,YAAY,EACZ,uBAAuB,EACvB,cAAc,EACd,eAAe,IAAI,uBAAuB,EAC1C,0BAA0B,EAC1B,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,113 @@
+import { defineComponent as V, ref as l, onMounted as _, onUnmounted as D, openBlock as K, createElementBlock as B, normalizeClass as P, renderSlot as m, createCommentVNode as f, createElementVNode as C, toDisplayString as R } from "vue";
+import { loadViostream as N, wrapRawPlayer as M } from "@viostream/viostream-player-core";
+import { createViostreamPlayer as F, loadViostream as I, wrapRawPlayer as L } from "@viostream/viostream-player-core";
+const U = ["data-viostream-public-key"], Q = {
+  "data-viostream-error": "",
+  style: { color: "red", padding: "1em" }
+}, O = /* @__PURE__ */ V({
+  __name: "ViostreamPlayer",
+  props: {
+    accountKey: {},
+    publicKey: {},
+    chapters: { type: Boolean, default: void 0 },
+    chapterDisplayType: { default: void 0 },
+    chapterSlug: { default: void 0 },
+    displayTitle: { type: Boolean, default: void 0 },
+    hlsQualitySelector: { type: Boolean, default: void 0 },
+    playerKey: { default: void 0 },
+    sharing: { type: Boolean, default: void 0 },
+    speedSelector: { type: Boolean, default: void 0 },
+    startEndTimespan: { default: void 0 },
+    startTime: { default: void 0 },
+    transcriptDownload: { type: Boolean, default: void 0 },
+    class: { default: void 0 }
+  },
+  emits: ["play", "pause", "ended", "timeUpdate", "volumeChange", "error", "progress", "ready", "seeked", "loaded", "playerReady"],
+  setup(y, { emit: v }) {
+    const a = y, t = v, d = `viostream-player-${Math.random().toString(36).slice(2, 10)}`, h = l(), n = l(), o = l(), p = l(!0);
+    let s = !1;
+    const c = [];
+    function g() {
+      const e = {};
+      return a.chapters !== void 0 && (e.chapters = a.chapters), a.chapterDisplayType !== void 0 && (e.chapterDisplayType = a.chapterDisplayType), a.chapterSlug !== void 0 && (e.chapterSlug = a.chapterSlug), a.displayTitle !== void 0 && (e.displayTitle = a.displayTitle), a.hlsQualitySelector !== void 0 && (e.hlsQualitySelector = a.hlsQualitySelector), a.playerKey !== void 0 && (e.playerKey = a.playerKey), a.sharing !== void 0 && (e.sharing = a.sharing), a.speedSelector !== void 0 && (e.speedSelector = a.speedSelector), a.startEndTimespan !== void 0 && (e.startEndTimespan = a.startEndTimespan), a.startTime !== void 0 && (e.startTime = a.startTime), a.transcriptDownload !== void 0 && (e.transcriptDownload = a.transcriptDownload), e;
+    }
+    const T = [
+      ["play", () => t("play")],
+      ["pause", () => t("pause")],
+      ["ended", () => t("ended")],
+      ["timeUpdate", (e) => t("timeUpdate", e)],
+      ["volumeChange", (e) => t("volumeChange", e)],
+      ["error", (e) => t("error", e)],
+      ["progress", (e) => t("progress", e)],
+      ["ready", () => t("ready")],
+      ["seeked", () => t("seeked")],
+      ["loaded", () => t("loaded")]
+    ], S = {
+      play: "play",
+      pause: "pause",
+      ended: "ended",
+      timeUpdate: "timeupdate",
+      volumeChange: "volumechange",
+      error: "error",
+      progress: "progress",
+      ready: "ready",
+      seeked: "seeked",
+      loaded: "loaded"
+    };
+    function w(e) {
+      for (const [i, u] of T) {
+        const r = S[i];
+        if (r) {
+          const k = e.on(r, u);
+          c.push(k);
+        }
+      }
+    }
+    function E() {
+      for (const e of c)
+        e();
+      c.length = 0;
+    }
+    async function b() {
+      try {
+        const e = await N(a.accountKey);
+        if (s) return;
+        const i = g(), u = e.embed(a.publicKey, d, i), r = M(u, d);
+        if (s) {
+          r.destroy();
+          return;
+        }
+        n.value = r, p.value = !1, w(r), t("playerReady", r);
+      } catch (e) {
+        s || (o.value = e instanceof Error ? e.message : String(e), p.value = !1);
+      }
+    }
+    return _(() => {
+      b();
+    }), D(() => {
+      var e;
+      s = !0, E(), (e = n.value) == null || e.destroy(), n.value = void 0;
+    }), (e, i) => (K(), B("div", {
+      id: d,
+      class: P(a.class),
+      ref_key: "containerRef",
+      ref: h,
+      "data-viostream-player": "",
+      "data-viostream-public-key": y.publicKey
+    }, [
+      p.value ? m(e.$slots, "loading", { key: 0 }) : f("", !0),
+      o.value ? m(e.$slots, "error", {
+        key: 1,
+        message: o.value
+      }, () => [
+        C("div", Q, " Failed to load Viostream player: " + R(o.value), 1)
+      ]) : f("", !0)
+    ], 10, U));
+  }
+});
+export {
+  O as ViostreamPlayer,
+  F as createViostreamPlayer,
+  I as loadViostream,
+  L as wrapRawPlayer
+};

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import { ViostreamEmbedOptions, ViostreamPlayer, ViostreamTimeUpdateData, ViostreamVolumeChangeData, ViostreamErrorData, ViostreamProgressData } from '@viostream/viostream-player-core';
+/** Callback props for player events on the `<ViostreamPlayer>` component. */
+export interface ViostreamPlayerEventProps {
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (data: ViostreamTimeUpdateData) => void;
+    onVolumeChange?: (data: ViostreamVolumeChangeData) => void;
+    onError?: (data: ViostreamErrorData) => void;
+    onProgress?: (data: ViostreamProgressData) => void;
+    onReady?: () => void;
+    onSeeked?: () => void;
+    onLoaded?: () => void;
+}
+/** Props accepted by the `<ViostreamPlayer>` component. */
+export interface ViostreamPlayerProps extends ViostreamEmbedOptions, ViostreamPlayerEventProps {
+    /** Your Viostream account key (e.g. `'vc-100100100'`). */
+    accountKey: string;
+    /** The public key of the media asset to embed. */
+    publicKey: string;
+    /**
+     * Optional CSS class applied to the outer wrapper `<div>`.
+     */
+    class?: string;
+    /**
+     * Callback fired once the player is ready, providing the `ViostreamPlayer` instance.
+     */
+    onPlayerReady?: (player: ViostreamPlayer) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,qBAAqB,EACrB,eAAe,EACf,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,kCAAkC,CAAC;AAM1C,6EAA6E;AAC7E,MAAM,WAAW,yBAAyB;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC3D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,2DAA2D;AAC3D,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB,EAAE,yBAAyB;IAC5F,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACnD"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@viostream/viostream-player-vue",
+  "version": "0.1.1",
+  "description": "Vue 3 SDK for the Viostream video player — embed, control, and listen to player events",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vue-tsc -b && vite build",
+    "check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "dependencies": {
+    "@viostream/viostream-player-core": "^0.1.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "jsdom": "^28.1.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "viostream",
+    "video",
+    "player",
+    "embed",
+    "sdk"
+  ]
+}