@universal-web-video-player/player-svelte 0.5.0

package/README.md

@@ -0,0 +1,23 @@
+# @universal-web-video-player/player-svelte
+
+Svelte wrapper for the Universal Video Player.
+
+## Installation
+
+```bash
+npm install @universal-web-video-player/player-svelte @universal-web-video-player/player-web-component
+```
+
+## Usage
+
+```svelte
+<script>
+  import { UvpPlayer } from '@universal-web-video-player/player-svelte';
+</script>
+
+<UvpPlayer 
+  sourceUrl="https://example.com/video.mp4"
+  autoplay={true}
+  on:play={() => console.log('Playing!')}
+/>
+```

package/dist/UvpPlayer.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { defineUvpPlayerElement } from '@universal-web-video-player/player-web-component';
+  import type { 
+    UvpQualityOption, 
+    UvpSourceItem, 
+    UvpScaleMode, 
+    UvpState 
+  } from '@universal-web-video-player/player-core';
+
+  defineUvpPlayerElement();
+
+  export let sourceUrl: string | undefined = undefined;
+  export let sourceType: 'mp4' | 'mov' | 'hls' | 'dash' | undefined = undefined;
+  export let qualities: UvpQualityOption[] = [];
+  export let autoplay = false;
+  export let muted = false;
+  export let autoNext = false;
+  export let loop = false;
+  export let playbackRate = 1.0;
+  export let volume = 1.0;
+  export let customControls = false;
+  export let poster: string | undefined = undefined;
+  export let controls = true;
+  export let playlist: UvpSourceItem[] = [];
+  export let scaleMode: UvpScaleMode | undefined = undefined;
+  
+  // Feature Flags
+  export let hideSettings = false;
+  export let hideFullscreen = false;
+  export let hidePlaylist = false;
+  export let hideVolume = false;
+
+  const dispatch = createEventDispatcher();
+  let playerElement: HTMLElement & any;
+
+  // Imperative API
+  export const play = () => playerElement?.play() ?? Promise.resolve();
+  export const pause = () => playerElement?.pause();
+  export const seek = (seconds: number) => playerElement?.seek(seconds);
+  export const next = () => playerElement?.next();
+  export const previous = () => playerElement?.previous();
+  export const seekToLive = () => playerElement?.seekToLive();
+  export const getPlayerState = () => playerElement?.getPlayerState() as UvpState;
+
+  // Direct property synchronization
+  $: if (playerElement) {
+    if (volume !== undefined) playerElement.volume = volume;
+    if (playbackRate !== undefined) playerElement.playbackRate = playbackRate;
+    if (loop !== undefined) playerElement.loop = loop;
+    if (muted !== undefined) playerElement.muted = muted;
+  }
+
+  $: qualitiesJson = qualities.length > 0 ? JSON.stringify(qualities) : undefined;
+  $: playlistJson = playlist.length > 0 ? JSON.stringify(playlist) : undefined;
+
+  function handleEvent(event: Event) {
+    const type = event.type === 'uvp-state-change' ? 'statechange' : event.type;
+    const detail = (event as CustomEvent).detail;
+    dispatch(type, detail);
+  }
+
+  onMount(() => {
+    const events = ['ready', 'play', 'pause', 'ended', 'qualitychange', 'error', 'uvp-state-change'];
+    events.forEach(name => {
+      playerElement.addEventListener(name, handleEvent);
+    });
+
+    return () => {
+      events.forEach(name => {
+        playerElement.removeEventListener(name, handleEvent);
+      });
+    };
+  });
+</script>
+
+<uvp-player
+  bind:this={playerElement}
+  source-url={sourceUrl}
+  source-type={sourceType}
+  source-qualities={qualitiesJson}
+  playlist={playlistJson}
+  poster={poster}
+  autoplay={autoplay ? '' : undefined}
+  muted={muted ? '' : undefined}
+  controls={controls === false ? 'false' : undefined}
+  auto-next={autoNext ? 'true' : undefined}
+  custom-controls={customControls ? 'true' : undefined}
+  scale-mode={scaleMode}
+  hide-settings={hideSettings ? '' : undefined}
+  hide-fullscreen={hideFullscreen ? '' : undefined}
+  hide-playlist={hidePlaylist ? '' : undefined}
+  hide-volume={hideVolume ? '' : undefined}
+  class={$$props.class}
+>
+  <slot />
+</uvp-player>
+
+<style>
+  uvp-player {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/UvpPlayer.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UvpQualityOption, UvpSourceItem, UvpScaleMode, UvpState } from '@universal-web-video-player/player-core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        sourceUrl?: string | undefined;
+        sourceType?: "mp4" | "mov" | "hls" | "dash" | undefined;
+        qualities?: UvpQualityOption[] | undefined;
+        autoplay?: boolean | undefined;
+        muted?: boolean | undefined;
+        autoNext?: boolean | undefined;
+        loop?: boolean | undefined;
+        playbackRate?: number | undefined;
+        volume?: number | undefined;
+        customControls?: boolean | undefined;
+        poster?: string | undefined;
+        controls?: boolean | undefined;
+        playlist?: UvpSourceItem[] | undefined;
+        scaleMode?: UvpScaleMode | undefined;
+        hideSettings?: boolean | undefined;
+        hideFullscreen?: boolean | undefined;
+        hidePlaylist?: boolean | undefined;
+        hideVolume?: boolean | undefined;
+        play?: (() => any) | undefined;
+        pause?: (() => any) | undefined;
+        seek?: ((seconds: number) => any) | undefined;
+        next?: (() => any) | undefined;
+        previous?: (() => any) | undefined;
+        seekToLive?: (() => any) | undefined;
+        getPlayerState?: (() => UvpState) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type UvpPlayerProps = typeof __propDef.props;
+export type UvpPlayerEvents = typeof __propDef.events;
+export type UvpPlayerSlots = typeof __propDef.slots;
+export default class UvpPlayer extends SvelteComponentTyped<UvpPlayerProps, UvpPlayerEvents, UvpPlayerSlots> {
+    get play(): () => any;
+    get pause(): () => any;
+    get seek(): (seconds: number) => any;
+    get next(): () => any;
+    get previous(): () => any;
+    get seekToLive(): () => any;
+    get getPlayerState(): () => UvpState;
+}
+export {};
+//# sourceMappingURL=UvpPlayer.svelte.d.ts.map

package/dist/UvpPlayer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UvpPlayer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/UvpPlayer.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EACR,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,QAAQ,EACT,MAAM,yCAAyC,CAAC;AAiFnD,QAAA,MAAM,SAAS;;;oBADwjB,MAAM,GAAG,SAAS;qBAAe,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS;oBAAc,gBAAgB,EAAE;;;;;;;;iBAAiN,MAAM,GAAG,SAAS;;mBAAyC,aAAa,EAAE;oBAAc,YAAY,GAAG,SAAS;;;;;;;0BA5Cz9B,MAAM;;;;gCAImC,QAAQ;;;;;;;;CAyCK,CAAC;AACjF,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;IACxG,IAAI,IAAI,cAA4D;IACpE,IAAI,KAAK,cAA6D;IACtE,IAAI,IAAI,cArDc,MAAM,SAqDwC;IACpE,IAAI,IAAI,cAA4D;IACpE,IAAI,QAAQ,cAAgE;IAC5E,IAAI,UAAU,cAAkE;IAChF,IAAI,cAAc,UArD6C,QAAQ,CAqDiB;CAC3F"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UvpPlayer } from './UvpPlayer.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as UvpPlayer } from './UvpPlayer.svelte';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@universal-web-video-player/player-svelte",
+  "version": "0.5.0",
+  "description": "Svelte wrapper for universal video player",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "svelte-package -o dist",
+    "lint": "svelte-check",
+    "typecheck": "svelte-check"
+  },
+  "dependencies": {
+    "@universal-web-video-player/player-web-component": "0.5.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=3"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.1",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.7",
+    "typescript": "~5.5.4"
+  },
+  "license": "MIT",
+  "author": "AIPXPERTS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aipxperts/aipxperts-video-player.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/aipxperts/aipxperts-video-player/issues"
+  },
+  "homepage": "https://github.com/aipxperts/aipxperts-video-player#readme",
+  "keywords": [
+    "video",
+    "player",
+    "svelte"
+  ]
+}

package/src/lib/UvpPlayer.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { defineUvpPlayerElement } from '@universal-web-video-player/player-web-component';
+  import type { 
+    UvpQualityOption, 
+    UvpSourceItem, 
+    UvpScaleMode, 
+    UvpState 
+  } from '@universal-web-video-player/player-core';
+
+  defineUvpPlayerElement();
+
+  export let sourceUrl: string | undefined = undefined;
+  export let sourceType: 'mp4' | 'mov' | 'hls' | 'dash' | undefined = undefined;
+  export let qualities: UvpQualityOption[] = [];
+  export let autoplay = false;
+  export let muted = false;
+  export let autoNext = false;
+  export let loop = false;
+  export let playbackRate = 1.0;
+  export let volume = 1.0;
+  export let customControls = false;
+  export let poster: string | undefined = undefined;
+  export let controls = true;
+  export let playlist: UvpSourceItem[] = [];
+  export let scaleMode: UvpScaleMode | undefined = undefined;
+  
+  // Feature Flags
+  export let hideSettings = false;
+  export let hideFullscreen = false;
+  export let hidePlaylist = false;
+  export let hideVolume = false;
+
+  const dispatch = createEventDispatcher();
+  let playerElement: HTMLElement & any;
+
+  // Imperative API
+  export const play = () => playerElement?.play() ?? Promise.resolve();
+  export const pause = () => playerElement?.pause();
+  export const seek = (seconds: number) => playerElement?.seek(seconds);
+  export const next = () => playerElement?.next();
+  export const previous = () => playerElement?.previous();
+  export const seekToLive = () => playerElement?.seekToLive();
+  export const getPlayerState = () => playerElement?.getPlayerState() as UvpState;
+
+  // Direct property synchronization
+  $: if (playerElement) {
+    if (volume !== undefined) playerElement.volume = volume;
+    if (playbackRate !== undefined) playerElement.playbackRate = playbackRate;
+    if (loop !== undefined) playerElement.loop = loop;
+    if (muted !== undefined) playerElement.muted = muted;
+  }
+
+  $: qualitiesJson = qualities.length > 0 ? JSON.stringify(qualities) : undefined;
+  $: playlistJson = playlist.length > 0 ? JSON.stringify(playlist) : undefined;
+
+  function handleEvent(event: Event) {
+    const type = event.type === 'uvp-state-change' ? 'statechange' : event.type;
+    const detail = (event as CustomEvent).detail;
+    dispatch(type, detail);
+  }
+
+  onMount(() => {
+    const events = ['ready', 'play', 'pause', 'ended', 'qualitychange', 'error', 'uvp-state-change'];
+    events.forEach(name => {
+      playerElement.addEventListener(name, handleEvent);
+    });
+
+    return () => {
+      events.forEach(name => {
+        playerElement.removeEventListener(name, handleEvent);
+      });
+    };
+  });
+</script>
+
+<uvp-player
+  bind:this={playerElement}
+  source-url={sourceUrl}
+  source-type={sourceType}
+  source-qualities={qualitiesJson}
+  playlist={playlistJson}
+  poster={poster}
+  autoplay={autoplay ? '' : undefined}
+  muted={muted ? '' : undefined}
+  controls={controls === false ? 'false' : undefined}
+  auto-next={autoNext ? 'true' : undefined}
+  custom-controls={customControls ? 'true' : undefined}
+  scale-mode={scaleMode}
+  hide-settings={hideSettings ? '' : undefined}
+  hide-fullscreen={hideFullscreen ? '' : undefined}
+  hide-playlist={hidePlaylist ? '' : undefined}
+  hide-volume={hideVolume ? '' : undefined}
+  class={$$props.class}
+>
+  <slot />
+</uvp-player>
+
+<style>
+  uvp-player {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/lib/index.ts

@@ -0,0 +1 @@
+export { default as UvpPlayer } from './UvpPlayer.svelte';