@viostream/viostream-player-svelte 0.1.2

package/README.md

@@ -0,0 +1,456 @@
+# viostream-player-svelte
+
+Svelte 5 SDK for the [Viostream](https://www.viostream.com) video player. Embed, control, and listen to player events with full TypeScript support.
+
+## Requirements
+
+- Svelte 5
+- A Viostream account key (found on the **Settings > General** page in Viostream)
+
+## Installation
+
+```bash
+npm install viostream-player-svelte
+```
+
+## Quick Start
+
+### Component
+
+Drop a `<ViostreamPlayer>` into any Svelte component. The SDK loads the Viostream script automatically.
+
+```svelte
+<script lang="ts">
+  import { ViostreamPlayer } from 'viostream-player-svelte';
+</script>
+
+<ViostreamPlayer
+  accountKey="vc-100100100"
+  publicKey="nhedxonrxsyfee"
+  displayTitle={true}
+  sharing={true}
+  onplay={() => console.log('playing')}
+/>
+```
+
+### Headless / Programmatic
+
+Use `createViostreamPlayer` when you need full control without a component:
+
+```ts
+import { createViostreamPlayer } from 'viostream-player-svelte';
+
+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 |
+|---|---|---|
+| `accountKey` | `string` | Your Viostream account key (e.g. `'vc-100100100'`). |
+| `publicKey` | `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. |
+| `chapterDisplayType` | `'dropdown' \| 'progressbar' \| 'horizontal'` | Chapter display style. |
+| `chapterSlug` | `string` | Seek to a named chapter before playback. |
+| `displayTitle` | `boolean` | Show the video title overlay. |
+| `hlsQualitySelector` | `boolean` | Show the HLS quality selector. |
+| `playerKey` | `string` | Override the player theme to use. |
+| `sharing` | `boolean` | Show sharing controls. |
+| `speedSelector` | `boolean` | Show playback speed selector. |
+| `startEndTimespan` | `string` | Play a specific section (e.g. `'10,30'`). |
+| `startTime` | `string` | Seek to a time (seconds) before playback. |
+| `transcriptDownload` | `boolean` | Allow transcript download. |
+
+#### Event Callbacks
+
+| Prop | Signature | Fires when |
+|---|---|---|
+| `onplay` | `() => void` | Playback starts or resumes. |
+| `onpause` | `() => void` | Playback is paused. |
+| `onended` | `() => void` | Media finishes playing. |
+| `ontimeupdate` | `(data: ViostreamTimeUpdateData) => void` | Current time changes. `data.seconds`, `data.duration`. |
+| `onvolumechange` | `(data: ViostreamVolumeChangeData) => void` | Volume changes. `data.volume`. |
+| `onerror` | `(data: ViostreamErrorData) => void` | An error occurs. `data.code`, `data.message`. |
+| `onprogress` | `(data: ViostreamProgressData) => void` | Buffering progress. `data.percent`. |
+| `onready` | `() => void` | Player is ready. |
+| `onseeked` | `() => void` | Seek operation completes. |
+| `onloaded` | `() => void` | Metadata has loaded. |
+
+#### Other Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `class` | `string` | CSS class applied to the outer wrapper `<div>`. |
+| `onplayerready` | `(player: ViostreamPlayerInstance) => void` | Callback providing the player instance for programmatic control. |
+| `loading` | `Snippet` | Optional Svelte 5 snippet rendered while the player is loading. |
+| `error` | `Snippet<[string]>` | Optional snippet rendered on error. Receives the error message as an argument. |
+
+### Getting the Player Instance
+
+Use `onplayerready` to get a reference to the player for programmatic control:
+
+```svelte
+<script lang="ts">
+  import { ViostreamPlayer } from 'viostream-player-svelte';
+  import type { ViostreamPlayerInstance } from 'viostream-player-svelte';
+
+  let player: ViostreamPlayerInstance | undefined = $state();
+</script>
+
+<ViostreamPlayer
+  accountKey="vc-100100100"
+  publicKey="nhedxonrxsyfee"
+  onplayerready={(p) => (player = p)}
+/>
+
+<button onclick={() => player?.play()}>Play</button>
+<button onclick={() => player?.pause()}>Pause</button>
+```
+
+### Custom Loading and Error States
+
+Use Svelte 5 snippets to replace the default loading/error UI:
+
+```svelte
+<ViostreamPlayer
+  accountKey="vc-100100100"
+  publicKey="nhedxonrxsyfee"
+>
+  {#snippet loading()}
+    <p>Loading video...</p>
+  {/snippet}
+
+  {#snippet error(message)}
+    <div class="my-error">Something went wrong: {message}</div>
+  {/snippet}
+</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 Svelte components or when you need full lifecycle control.
+
+```ts
+import { createViostreamPlayer } from 'viostream-player-svelte';
+import type { CreateViostreamPlayerOptions } from 'viostream-player-svelte';
+
+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 `onplayerready`) 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-player-svelte';
+
+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-player-svelte';
+import type {
+  ViostreamPlayerInstance,
+  ViostreamPlayerProps,
+  ViostreamEmbedOptions,
+  ViostreamTimeUpdateData,
+  ViostreamVolumeChangeData,
+  ViostreamErrorData,
+  ViostreamProgressData,
+  ViostreamPlayerEventMap,
+  ViostreamEventHandler,
+  ViostreamCue,
+  ViostreamCueFieldUpdate,
+  ViostreamTrack,
+  CreateViostreamPlayerOptions,
+  RawViostreamPlayerInstance,
+  ViostreamGlobal
+} from 'viostream-player-svelte';
+```
+
+---
+
+## Full Example
+
+A complete example showing the component with custom controls, event logging, and async getters:
+
+```svelte
+<script lang="ts">
+  import { ViostreamPlayer } from 'viostream-player-svelte';
+  import type { ViostreamPlayerInstance, ViostreamTimeUpdateData } from 'viostream-player-svelte';
+
+  let player: ViostreamPlayerInstance | undefined = $state();
+  let currentTime = $state(0);
+  let duration = $state(0);
+  let paused = $state(true);
+  let log: string[] = $state([]);
+
+  function handleReady(p: ViostreamPlayerInstance) {
+    player = p;
+    p.getDuration().then((d) => (duration = d));
+  }
+
+  function handleTimeUpdate(data: ViostreamTimeUpdateData) {
+    currentTime = data.seconds;
+    duration = data.duration;
+  }
+
+  function format(s: number): string {
+    return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
+  }
+</script>
+
+<ViostreamPlayer
+  accountKey="vc-100100100"
+  publicKey="nhedxonrxsyfee"
+  displayTitle={true}
+  sharing={true}
+  speedSelector={true}
+  hlsQualitySelector={true}
+  onplay={() => { paused = false; log = ['play', ...log]; }}
+  onpause={() => { paused = true; log = ['pause', ...log]; }}
+  onended={() => { log = ['ended', ...log]; }}
+  ontimeupdate={handleTimeUpdate}
+  onplayerready={handleReady}
+/>
+
+<div>
+  <button onclick={() => paused ? player?.play() : player?.pause()}>
+    {paused ? 'Play' : 'Pause'}
+  </button>
+  <button onclick={() => player?.setCurrentTime(0)}>Restart</button>
+  <span>{format(currentTime)} / {format(duration)}</span>
+</div>
+
+<div>
+  <button onclick={async () => {
+    const vol = await player?.getVolume();
+    log = [`volume: ${vol}`, ...log];
+  }}>Get Volume</button>
+  <button onclick={async () => {
+    const tracks = await player?.getTracks();
+    log = [`tracks: ${JSON.stringify(tracks)}`, ...log];
+  }}>Get Tracks</button>
+</div>
+
+<pre>{log.join('\n')}</pre>
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start the dev server (serves the demo page)
+npm run dev
+
+# Type-check
+npm run check
+
+# Run tests
+npm run test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Build the library for publishing
+npm run package
+```
+
+## License
+
+MIT

package/dist/ViostreamPlayer.svelte

@@ -0,0 +1,222 @@
+<!--
+  @component ViostreamPlayer
+
+  Svelte 5 component that embeds a Viostream video player.
+
+  Usage:
+  ```svelte
+  <script lang="ts">
+    import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
+    import type { ViostreamPlayer as ViostreamPlayerType } from '@viostream/viostream-player-svelte';
+
+    let player: ViostreamPlayerType | undefined = $state();
+  </script>
+
+  <ViostreamPlayer
+    accountKey="vc-100100100"
+    publicKey="nhedxonrxsyfee"
+    displayTitle={true}
+    sharing={true}
+    onplay={() => console.log('playing!')}
+    ontimeupdate={(d) => console.log('time:', d.seconds)}
+    onplayerready={(p) => (player = p)}
+  />
+  ```
+-->
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { loadViostream, wrapRawPlayer } from '@viostream/viostream-player-core';
+	import type {
+		ViostreamEmbedOptions,
+		ViostreamPlayer,
+		RawViostreamPlayerInstance,
+		ViostreamEventHandler,
+	} from '@viostream/viostream-player-core';
+	import type { ViostreamPlayerProps } from './types.js';
+
+	let {
+		// Required props
+		accountKey,
+		publicKey,
+
+		// Embed options
+		chapters,
+		chapterDisplayType,
+		chapterSlug,
+		displayTitle,
+		hlsQualitySelector,
+		playerKey,
+		sharing,
+		speedSelector,
+		startEndTimespan,
+		startTime,
+		transcriptDownload,
+
+		// Event callbacks
+		onplay,
+		onpause,
+		onended,
+		ontimeupdate,
+		onvolumechange,
+		onerror,
+		onprogress,
+		onready,
+		onseeked,
+		onloaded,
+
+		// Component callbacks
+		onplayerready,
+
+		// Snippet overrides
+		loading: loadingSnippet,
+		error: errorSnippet,
+
+		// Styling
+		class: className,
+
+		// Spread rest for future-proofing
+		...restProps
+	}: ViostreamPlayerProps & {
+		loading?: Snippet;
+		error?: Snippet<[string]>;
+	} = $props();
+
+	// Internal state
+	let containerEl: HTMLDivElement | undefined = $state();
+	let player: ViostreamPlayer | undefined = $state();
+	let errorMsg: string | undefined = $state();
+	let isLoading = $state(true);
+
+	// Unique ID for the container
+	const containerId = `viostream-player-${Math.random().toString(36).slice(2, 10)}`;
+
+	// Build the embed options object from props
+	function buildEmbedOptions(): ViostreamEmbedOptions {
+		const opts: ViostreamEmbedOptions = {};
+		if (chapters !== undefined) opts.chapters = chapters;
+		if (chapterDisplayType !== undefined) opts.chapterDisplayType = chapterDisplayType;
+		if (chapterSlug !== undefined) opts.chapterSlug = chapterSlug;
+		if (displayTitle !== undefined) opts.displayTitle = displayTitle;
+		if (hlsQualitySelector !== undefined) opts.hlsQualitySelector = hlsQualitySelector;
+		if (playerKey !== undefined) opts.playerKey = playerKey;
+		if (sharing !== undefined) opts.sharing = sharing;
+		if (speedSelector !== undefined) opts.speedSelector = speedSelector;
+		if (startEndTimespan !== undefined) opts.startEndTimespan = startEndTimespan;
+		if (startTime !== undefined) opts.startTime = startTime;
+		if (transcriptDownload !== undefined) opts.transcriptDownload = transcriptDownload;
+		return opts;
+	}
+
+	// Event wiring: maps event names to their prop callbacks
+	const EVENT_MAP: Array<[string, (() => ViostreamEventHandler | undefined)]> = [
+		['play', () => onplay as ViostreamEventHandler | undefined],
+		['pause', () => onpause as ViostreamEventHandler | undefined],
+		['ended', () => onended as ViostreamEventHandler | undefined],
+		['timeupdate', () => ontimeupdate as ViostreamEventHandler | undefined],
+		['volumechange', () => onvolumechange as ViostreamEventHandler | undefined],
+		['error', () => onerror as ViostreamEventHandler | undefined],
+		['progress', () => onprogress as ViostreamEventHandler | undefined],
+		['ready', () => onready as ViostreamEventHandler | undefined],
+		['seeked', () => onseeked as ViostreamEventHandler | undefined],
+		['loaded', () => onloaded as ViostreamEventHandler | undefined]
+	];
+
+	onMount(() => {
+		let destroyed = false;
+		const unsubscribers: Array<() => void> = [];
+
+		async function init() {
+			try {
+				const api = await loadViostream(accountKey);
+
+				if (destroyed) return;
+
+				const embedOpts = buildEmbedOptions();
+				const raw: RawViostreamPlayerInstance = api.embed(publicKey, containerId, embedOpts);
+				const wrappedPlayer = wrapRawPlayer(raw, containerId);
+
+				if (destroyed) {
+					wrappedPlayer.destroy();
+					return;
+				}
+
+				player = wrappedPlayer;
+				isLoading = false;
+
+				// Wire up event callbacks from props
+				for (const [eventName, getHandler] of EVENT_MAP) {
+					const handler = getHandler();
+					if (handler) {
+						const unsub = wrappedPlayer.on(eventName, handler);
+						unsubscribers.push(unsub);
+					}
+				}
+
+				// Notify consumer that the player is ready
+				onplayerready?.(wrappedPlayer);
+			} catch (err) {
+				if (!destroyed) {
+					errorMsg = err instanceof Error ? err.message : String(err);
+					isLoading = false;
+				}
+			}
+		}
+
+		init();
+
+		return () => {
+			destroyed = true;
+			for (const unsub of unsubscribers) {
+				unsub();
+			}
+			player?.destroy();
+			player = undefined;
+		};
+	});
+
+	// Re-wire event handlers reactively when callback props change
+	// This handles the case where a consumer conditionally provides callbacks
+	$effect(() => {
+		if (!player) return;
+
+		const currentUnsubscribers: Array<() => void> = [];
+
+		for (const [eventName, getHandler] of EVENT_MAP) {
+			const handler = getHandler();
+			if (handler) {
+				const unsub = player.on(eventName, handler);
+				currentUnsubscribers.push(unsub);
+			}
+		}
+
+		return () => {
+			for (const unsub of currentUnsubscribers) {
+				unsub();
+			}
+		};
+	});
+</script>
+
+<div
+	id={containerId}
+	class={className}
+	bind:this={containerEl}
+	data-viostream-player
+	data-viostream-public-key={publicKey}
+>
+	{#if isLoading}
+		{#if loadingSnippet}
+			{@render loadingSnippet()}
+		{/if}
+	{/if}
+
+	{#if errorMsg}
+		{#if errorSnippet}
+			{@render errorSnippet(errorMsg)}
+		{:else}
+			<div data-viostream-error style="color: red; padding: 1em;">
+				Failed to load Viostream player: {errorMsg}
+			</div>
+		{/if}
+	{/if}
+</div>

package/dist/ViostreamPlayer.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type Snippet } from 'svelte';
+import type { ViostreamPlayer } from '@viostream/viostream-player-core';
+import type { ViostreamPlayerProps } from './types.js';
+type $$ComponentProps = ViostreamPlayerProps & {
+    loading?: Snippet;
+    error?: Snippet<[string]>;
+};
+/**
+ * ViostreamPlayer
+ *
+ * Svelte 5 component that embeds a Viostream video player.
+ *
+ * Usage:
+ * ```svelte
+ * <script lang="ts">
+ *   import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
+ *   import type { ViostreamPlayer as ViostreamPlayerType } from '@viostream/viostream-player-svelte';
+ *
+ *   let player: ViostreamPlayerType | undefined = $state();
+ * </script>
+ *
+ * <ViostreamPlayer
+ *   accountKey="vc-100100100"
+ *   publicKey="nhedxonrxsyfee"
+ *   displayTitle={true}
+ *   sharing={true}
+ *   onplay={() => console.log('playing!')}
+ *   ontimeupdate={(d) => console.log('time:', d.seconds)}
+ *   onplayerready={(p) => (player = p)}
+ * />
+ * ```
+ */
+declare const ViostreamPlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViostreamPlayer = ReturnType<typeof ViostreamPlayer>;
+export default ViostreamPlayer;

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @viostream/viostream-player-svelte
+ *
+ * Svelte 5 SDK for the Viostream video player.
+ *
+ * @example Component usage
+ * ```svelte
+ * <script lang="ts">
+ *   import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
+ * </script>
+ *
+ * <ViostreamPlayer
+ *   accountKey="vc-100100100"
+ *   publicKey="nhedxonrxsyfee"
+ *   displayTitle={true}
+ *   onplay={() => console.log('playing')}
+ * />
+ * ```
+ *
+ * @example Headless / programmatic usage
+ * ```ts
+ * import { createViostreamPlayer } from '@viostream/viostream-player-svelte';
+ *
+ * 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.svelte';
+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';

package/dist/index.js

@@ -0,0 +1,38 @@
+/**
+ * @viostream/viostream-player-svelte
+ *
+ * Svelte 5 SDK for the Viostream video player.
+ *
+ * @example Component usage
+ * ```svelte
+ * <script lang="ts">
+ *   import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
+ * </script>
+ *
+ * <ViostreamPlayer
+ *   accountKey="vc-100100100"
+ *   publicKey="nhedxonrxsyfee"
+ *   displayTitle={true}
+ *   onplay={() => console.log('playing')}
+ * />
+ * ```
+ *
+ * @example Headless / programmatic usage
+ * ```ts
+ * import { createViostreamPlayer } from '@viostream/viostream-player-svelte';
+ *
+ * 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'));
+ * ```
+ */
+// Component
+export { default as ViostreamPlayer } from './ViostreamPlayer.svelte';
+// Re-export everything from core so consumers can import from this package
+export { createViostreamPlayer, wrapRawPlayer, loadViostream, } from '@viostream/viostream-player-core';

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Viostream Player SDK — Svelte-specific type definitions
+ *
+ * Core types (ViostreamPlayer, ViostreamEmbedOptions, etc.) are re-exported from
+ * `@viostream/viostream-player-core`. This file defines only the Svelte component props.
+ */
+import type { 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;
+}

package/dist/types.js

@@ -0,0 +1,7 @@
+/**
+ * Viostream Player SDK — Svelte-specific type definitions
+ *
+ * Core types (ViostreamPlayer, ViostreamEmbedOptions, etc.) are re-exported from
+ * `@viostream/viostream-player-core`. This file defines only the Svelte component props.
+ */
+export {};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@viostream/viostream-player-svelte",
+  "version": "0.1.2",
+  "description": "Svelte 5 SDK for the Viostream video player — embed, control, and listen to player events",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "scripts": {
+    "package": "svelte-kit sync && svelte-package && publint",
+    "build": "npm run package",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "dependencies": {
+    "@viostream/viostream-player-core": "^0.1.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "jsdom": "^28.1.0",
+    "publint": "^0.3.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "viostream",
+    "video",
+    "player",
+    "embed",
+    "sdk"
+  ]
+}