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

package/README.md

@@ -0,0 +1,24 @@
+# @universal-web-video-player/player-solid
+
+SolidJS wrapper for the Universal Video Player.
+
+## Installation
+
+```bash
+npm install @universal-web-video-player/player-solid @universal-web-video-player/player-web-component
+```
+
+## Usage
+
+```tsx
+import { UvpPlayer } from '@universal-web-video-player/player-solid';
+
+function App() {
+  return (
+    <UvpPlayer 
+      sourceUrl="https://example.com/video.mp4"
+      autoplay={true}
+    />
+  );
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import { UvpQualityOption, UvpSourceItem, UvpScaleMode, UvpState } from '@universal-web-video-player/player-core';
+import { Component, JSX } from 'solid-js';
+
+interface UvpSolidPlayerProps {
+    sourceUrl?: string;
+    sourceType?: "mp4" | "mov" | "hls" | "dash";
+    qualities?: UvpQualityOption[];
+    autoplay?: boolean;
+    muted?: boolean;
+    autoNext?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+    volume?: number;
+    customControls?: boolean;
+    poster?: string;
+    controls?: boolean;
+    playlist?: UvpSourceItem[];
+    scaleMode?: UvpScaleMode;
+    hideSettings?: boolean;
+    hideFullscreen?: boolean;
+    hidePlaylist?: boolean;
+    hideVolume?: boolean;
+    class?: string;
+    ref?: (el: any) => void;
+    onReady?: (event: CustomEvent) => void;
+    onPlay?: (event: CustomEvent) => void;
+    onPause?: (event: CustomEvent) => void;
+    onEnded?: (event: CustomEvent) => void;
+    onQualityChange?: (event: CustomEvent) => void;
+    onError?: (event: CustomEvent) => void;
+    onStateChange?: (state: UvpState) => void;
+    children?: JSX.Element;
+}
+declare const UvpSolidPlayer: Component<UvpSolidPlayerProps>;
+declare module "solid-js" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "uvp-player": any;
+        }
+    }
+}
+
+export { UvpSolidPlayer, type UvpSolidPlayerProps };

package/dist/index.js

@@ -0,0 +1,97 @@
+// src/index.tsx
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { getOwner as _$getOwner } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { defineUvpPlayerElement } from "@universal-web-video-player/player-web-component";
+import { onMount, onCleanup, mergeProps, createMemo, createEffect } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<uvp-player>`, true, false, false);
+defineUvpPlayerElement();
+var UvpSolidPlayer = (props) => {
+  const merged = mergeProps({
+    controls: true,
+    playbackRate: 1,
+    volume: 1
+  }, props);
+  let playerElement;
+  const qualitiesJson = createMemo(() => merged.qualities && merged.qualities.length > 0 ? JSON.stringify(merged.qualities) : void 0);
+  const playlistJson = createMemo(() => merged.playlist && merged.playlist.length > 0 ? JSON.stringify(merged.playlist) : void 0);
+  createEffect(() => {
+    if (playerElement) {
+      if (merged.volume !== void 0) playerElement.volume = merged.volume;
+      if (merged.playbackRate !== void 0) playerElement.playbackRate = merged.playbackRate;
+      if (merged.loop !== void 0) playerElement.loop = merged.loop;
+      if (merged.muted !== void 0) playerElement.muted = merged.muted;
+    }
+  });
+  onMount(() => {
+    if (props.ref) props.ref(playerElement);
+    const eventHandlers = {
+      ready: (e) => props.onReady?.(e),
+      play: (e) => props.onPlay?.(e),
+      pause: (e) => props.onPause?.(e),
+      ended: (e) => props.onEnded?.(e),
+      qualitychange: (e) => props.onQualityChange?.(e),
+      error: (e) => props.onError?.(e),
+      "uvp-state-change": (e) => props.onStateChange?.(e.detail)
+    };
+    Object.entries(eventHandlers).forEach(([name, handler]) => {
+      if (handler) playerElement.addEventListener(name, handler);
+    });
+    onCleanup(() => {
+      Object.entries(eventHandlers).forEach(([name, handler]) => {
+        if (handler) playerElement.removeEventListener(name, handler);
+      });
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    _$use((el) => playerElement = el, _el$);
+    _el$._$owner = _$getOwner();
+    _$insert(_el$, () => props.children);
+    _$effect((_p$) => {
+      var _v$ = merged.class, _v$2 = merged.sourceUrl, _v$3 = merged.sourceType, _v$4 = qualitiesJson(), _v$5 = playlistJson(), _v$6 = merged.poster, _v$7 = merged.autoplay ? "" : void 0, _v$8 = merged.muted ? "" : void 0, _v$9 = merged.controls === false ? "false" : void 0, _v$0 = merged.autoNext ? "true" : void 0, _v$1 = merged.customControls ? "true" : void 0, _v$10 = merged.scaleMode, _v$11 = merged.hideSettings ? "" : void 0, _v$12 = merged.hideFullscreen ? "" : void 0, _v$13 = merged.hidePlaylist ? "" : void 0, _v$14 = merged.hideVolume ? "" : void 0;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "source-url", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "source-type", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$, "source-qualities", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$, "playlist", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$, "poster", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute(_el$, "autoplay", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setAttribute(_el$, "muted", _p$.h = _v$8);
+      _v$9 !== _p$.r && _$setAttribute(_el$, "controls", _p$.r = _v$9);
+      _v$0 !== _p$.d && _$setAttribute(_el$, "auto-next", _p$.d = _v$0);
+      _v$1 !== _p$.l && _$setAttribute(_el$, "custom-controls", _p$.l = _v$1);
+      _v$10 !== _p$.u && _$setAttribute(_el$, "scale-mode", _p$.u = _v$10);
+      _v$11 !== _p$.c && _$setAttribute(_el$, "hide-settings", _p$.c = _v$11);
+      _v$12 !== _p$.w && _$setAttribute(_el$, "hide-fullscreen", _p$.w = _v$12);
+      _v$13 !== _p$.m && _$setAttribute(_el$, "hide-playlist", _p$.m = _v$13);
+      _v$14 !== _p$.f && _$setAttribute(_el$, "hide-volume", _p$.f = _v$14);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0
+    });
+    return _el$;
+  })();
+};
+export {
+  UvpSolidPlayer
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@universal-web-video-player/player-solid",
+  "version": "0.5.0",
+  "description": "SolidJS 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",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --dts --format esm --clean",
+    "lint": "tsc --noEmit",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@universal-web-video-player/player-web-component": "0.5.0"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1"
+  },
+  "devDependencies": {
+    "esbuild-plugin-solid": "^0.6.0",
+    "solid-js": "^1.8.15",
+    "tsup": "^8.1.0",
+    "typescript": "~5.5.4"
+  },
+  "license": "MIT",
+  "author": "AIPXPERTS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aipxperts/aipxperts-video-player.git",
+    "directory": "packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/aipxperts/aipxperts-video-player/issues"
+  },
+  "homepage": "https://github.com/aipxperts/aipxperts-video-player#readme",
+  "keywords": [
+    "video",
+    "player",
+    "solid"
+  ]
+}