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

package/README.md

@@ -0,0 +1,50 @@
+# @universal-web-video-player/player-react
+
+React wrapper for the Universal Video Player.
+
+## Installation
+
+```bash
+npm install @universal-web-video-player/player-react @universal-web-video-player/player-web-component
+```
+
+## Usage
+
+```tsx
+import { UvpReactPlayer } from '@universal-web-video-player/player-react';
+
+function App() {
+  return (
+    <div style={{ width: '800px', height: '450px' }}>
+      <UvpReactPlayer 
+        sourceUrl="https://example.com/video.mp4"
+        autoplay
+        muted
+        onPlay={() => console.log('Playing!')}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+- `sourceUrl`: string
+- `sourceType`: 'mp4' | 'mov' | 'hls' | 'dash'
+- `qualities`: UvpQualityOption[]
+- `autoplay`: boolean
+- `muted`: boolean
+- `poster`: string
+- `controls`: boolean (default true)
+- `playlist`: UvpSourceItem[]
+
+## Methods (via Ref)
+
+```tsx
+const playerRef = useRef<UvpReactPlayerHandle>(null);
+
+// ...
+playerRef.current?.play();
+playerRef.current?.pause();
+playerRef.current?.seek(10);
+```

package/dist/index.cjs

@@ -0,0 +1,158 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  UvpReactPlayer: () => UvpReactPlayer
+});
+module.exports = __toCommonJS(index_exports);
+var import_player_web_component = require("@universal-web-video-player/player-web-component");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_player_web_component.defineUvpPlayerElement)();
+function UvpReactPlayerImpl(props, ref) {
+  const elementRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    play: () => elementRef.current?.play() ?? Promise.resolve(),
+    pause: () => elementRef.current?.pause(),
+    seek: (seconds) => elementRef.current?.seek(seconds),
+    next: () => elementRef.current?.next(),
+    previous: () => elementRef.current?.previous(),
+    seekToLive: () => elementRef.current?.seekToLive(),
+    getPlayerState: () => elementRef.current?.getPlayerState(),
+    get playbackRate() {
+      return elementRef.current?.playbackRate ?? 1;
+    },
+    set playbackRate(val) {
+      if (elementRef.current) elementRef.current.playbackRate = val;
+    },
+    get volume() {
+      return elementRef.current?.volume ?? 1;
+    },
+    set volume(val) {
+      if (elementRef.current) elementRef.current.volume = val;
+    },
+    get muted() {
+      return elementRef.current?.muted ?? false;
+    },
+    set muted(val) {
+      if (elementRef.current) elementRef.current.muted = val;
+    },
+    get loop() {
+      return elementRef.current?.loop ?? false;
+    },
+    set loop(val) {
+      if (elementRef.current) elementRef.current.loop = val;
+    },
+    get config() {
+      return elementRef.current?.config;
+    },
+    set config(val) {
+      if (elementRef.current) elementRef.current.config = val;
+    }
+  }));
+  (0, import_react.useEffect)(() => {
+    if (elementRef.current && props.volume !== void 0) {
+      elementRef.current.volume = props.volume;
+    }
+  }, [props.volume]);
+  (0, import_react.useEffect)(() => {
+    if (elementRef.current && props.playbackRate !== void 0) {
+      elementRef.current.playbackRate = props.playbackRate;
+    }
+  }, [props.playbackRate]);
+  (0, import_react.useEffect)(() => {
+    if (elementRef.current && props.loop !== void 0) {
+      elementRef.current.loop = props.loop;
+    }
+  }, [props.loop]);
+  (0, import_react.useEffect)(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const listeners = [
+      ["ready", props.onReady ? (e) => props.onReady?.(e) : void 0],
+      ["play", props.onPlay ? (e) => props.onPlay?.(e) : void 0],
+      ["pause", props.onPause ? (e) => props.onPause?.(e) : void 0],
+      ["ended", props.onEnded ? (e) => props.onEnded?.(e) : void 0],
+      ["qualitychange", props.onQualityChange ? (e) => props.onQualityChange?.(e) : void 0],
+      ["error", props.onError ? (e) => props.onError?.(e) : void 0],
+      ["uvp-state-change", props.onStateChange ? (e) => props.onStateChange?.(e.detail) : void 0]
+    ];
+    listeners.forEach(([name, handler]) => {
+      if (handler) element.addEventListener(name, handler);
+    });
+    return () => {
+      listeners.forEach(([name, handler]) => {
+        if (handler) element.removeEventListener(name, handler);
+      });
+    };
+  }, [props.onEnded, props.onError, props.onPause, props.onPlay, props.onQualityChange, props.onReady, props.onStateChange]);
+  const attributes = (0, import_react.useMemo)(
+    () => ({
+      "source-url": props.sourceUrl,
+      "source-type": props.sourceType,
+      "source-qualities": props.qualities && props.qualities.length > 0 ? JSON.stringify(props.qualities) : void 0,
+      playlist: props.playlist ? JSON.stringify(props.playlist) : void 0,
+      poster: props.poster,
+      autoplay: props.autoplay ? "" : void 0,
+      muted: props.muted ? "" : void 0,
+      controls: props.controls === false ? "false" : void 0,
+      "auto-next": props.autoNext ? "true" : void 0,
+      "custom-controls": props.customControls ? "true" : void 0,
+      "scale-mode": props.scaleMode,
+      "hide-settings": props.hideSettings ? "" : void 0,
+      "hide-fullscreen": props.hideFullscreen ? "" : void 0,
+      "hide-playlist": props.hidePlaylist ? "" : void 0,
+      "hide-volume": props.hideVolume ? "" : void 0
+    }),
+    [
+      props.poster,
+      props.playlist,
+      props.qualities,
+      props.sourceType,
+      props.sourceUrl,
+      props.autoplay,
+      props.muted,
+      props.controls,
+      props.autoNext,
+      props.customControls,
+      props.scaleMode,
+      props.hideSettings,
+      props.hideFullscreen,
+      props.hidePlaylist,
+      props.hideVolume
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "uvp-player",
+    {
+      ref: elementRef,
+      className: props.className,
+      ...attributes,
+      children: props.children
+    }
+  );
+}
+var UvpReactPlayer = (0, import_react.forwardRef)(UvpReactPlayerImpl);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UvpReactPlayer
+});

package/dist/index.d.cts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { UvpState, UvpQualityOption, UvpSourceItem, UvpScaleMode } from '@universal-web-video-player/player-core';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "uvp-player": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                "source-url"?: string;
+                "source-type"?: "mp4" | "mov" | "hls" | "dash";
+                "source-qualities"?: string;
+                poster?: string;
+                autoplay?: boolean | string;
+                muted?: boolean | string;
+                controls?: boolean | string;
+                "auto-next"?: boolean | string;
+                loop?: boolean | string;
+                "playback-rate"?: number | string;
+                volume?: number | string;
+                "custom-controls"?: boolean | string;
+                playlist?: string;
+                "scale-mode"?: string;
+                "hide-settings"?: boolean | string;
+                "hide-fullscreen"?: boolean | string;
+                "hide-playlist"?: boolean | string;
+                "hide-volume"?: boolean | string;
+                ref?: React.Ref<HTMLElement & UvpReactPlayerHandle>;
+            };
+        }
+    }
+}
+interface UvpReactPlayerProps {
+    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;
+    className?: string;
+    playlist?: UvpSourceItem[];
+    scaleMode?: UvpScaleMode;
+    hideSettings?: boolean;
+    hideFullscreen?: boolean;
+    hidePlaylist?: boolean;
+    hideVolume?: boolean;
+    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?: React.ReactNode;
+}
+interface UvpReactPlayerHandle {
+    play: () => Promise<void>;
+    pause: () => void;
+    seek: (seconds: number) => void;
+    next: () => void;
+    previous: () => void;
+    seekToLive: () => void;
+    playbackRate: number;
+    volume: number;
+    muted: boolean;
+    loop: boolean;
+    config: any;
+    getPlayerState: () => UvpState;
+}
+declare const UvpReactPlayer: React.ForwardRefExoticComponent<UvpReactPlayerProps & React.RefAttributes<UvpReactPlayerHandle>>;
+
+export { UvpReactPlayer, type UvpReactPlayerHandle, type UvpReactPlayerProps };

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { UvpState, UvpQualityOption, UvpSourceItem, UvpScaleMode } from '@universal-web-video-player/player-core';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "uvp-player": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                "source-url"?: string;
+                "source-type"?: "mp4" | "mov" | "hls" | "dash";
+                "source-qualities"?: string;
+                poster?: string;
+                autoplay?: boolean | string;
+                muted?: boolean | string;
+                controls?: boolean | string;
+                "auto-next"?: boolean | string;
+                loop?: boolean | string;
+                "playback-rate"?: number | string;
+                volume?: number | string;
+                "custom-controls"?: boolean | string;
+                playlist?: string;
+                "scale-mode"?: string;
+                "hide-settings"?: boolean | string;
+                "hide-fullscreen"?: boolean | string;
+                "hide-playlist"?: boolean | string;
+                "hide-volume"?: boolean | string;
+                ref?: React.Ref<HTMLElement & UvpReactPlayerHandle>;
+            };
+        }
+    }
+}
+interface UvpReactPlayerProps {
+    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;
+    className?: string;
+    playlist?: UvpSourceItem[];
+    scaleMode?: UvpScaleMode;
+    hideSettings?: boolean;
+    hideFullscreen?: boolean;
+    hidePlaylist?: boolean;
+    hideVolume?: boolean;
+    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?: React.ReactNode;
+}
+interface UvpReactPlayerHandle {
+    play: () => Promise<void>;
+    pause: () => void;
+    seek: (seconds: number) => void;
+    next: () => void;
+    previous: () => void;
+    seekToLive: () => void;
+    playbackRate: number;
+    volume: number;
+    muted: boolean;
+    loop: boolean;
+    config: any;
+    getPlayerState: () => UvpState;
+}
+declare const UvpReactPlayer: React.ForwardRefExoticComponent<UvpReactPlayerProps & React.RefAttributes<UvpReactPlayerHandle>>;
+
+export { UvpReactPlayer, type UvpReactPlayerHandle, type UvpReactPlayerProps };

package/dist/index.js

@@ -0,0 +1,140 @@
+"use client";
+
+// src/index.tsx
+import { defineUvpPlayerElement } from "@universal-web-video-player/player-web-component";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+defineUvpPlayerElement();
+function UvpReactPlayerImpl(props, ref) {
+  const elementRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    play: () => elementRef.current?.play() ?? Promise.resolve(),
+    pause: () => elementRef.current?.pause(),
+    seek: (seconds) => elementRef.current?.seek(seconds),
+    next: () => elementRef.current?.next(),
+    previous: () => elementRef.current?.previous(),
+    seekToLive: () => elementRef.current?.seekToLive(),
+    getPlayerState: () => elementRef.current?.getPlayerState(),
+    get playbackRate() {
+      return elementRef.current?.playbackRate ?? 1;
+    },
+    set playbackRate(val) {
+      if (elementRef.current) elementRef.current.playbackRate = val;
+    },
+    get volume() {
+      return elementRef.current?.volume ?? 1;
+    },
+    set volume(val) {
+      if (elementRef.current) elementRef.current.volume = val;
+    },
+    get muted() {
+      return elementRef.current?.muted ?? false;
+    },
+    set muted(val) {
+      if (elementRef.current) elementRef.current.muted = val;
+    },
+    get loop() {
+      return elementRef.current?.loop ?? false;
+    },
+    set loop(val) {
+      if (elementRef.current) elementRef.current.loop = val;
+    },
+    get config() {
+      return elementRef.current?.config;
+    },
+    set config(val) {
+      if (elementRef.current) elementRef.current.config = val;
+    }
+  }));
+  useEffect(() => {
+    if (elementRef.current && props.volume !== void 0) {
+      elementRef.current.volume = props.volume;
+    }
+  }, [props.volume]);
+  useEffect(() => {
+    if (elementRef.current && props.playbackRate !== void 0) {
+      elementRef.current.playbackRate = props.playbackRate;
+    }
+  }, [props.playbackRate]);
+  useEffect(() => {
+    if (elementRef.current && props.loop !== void 0) {
+      elementRef.current.loop = props.loop;
+    }
+  }, [props.loop]);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const listeners = [
+      ["ready", props.onReady ? (e) => props.onReady?.(e) : void 0],
+      ["play", props.onPlay ? (e) => props.onPlay?.(e) : void 0],
+      ["pause", props.onPause ? (e) => props.onPause?.(e) : void 0],
+      ["ended", props.onEnded ? (e) => props.onEnded?.(e) : void 0],
+      ["qualitychange", props.onQualityChange ? (e) => props.onQualityChange?.(e) : void 0],
+      ["error", props.onError ? (e) => props.onError?.(e) : void 0],
+      ["uvp-state-change", props.onStateChange ? (e) => props.onStateChange?.(e.detail) : void 0]
+    ];
+    listeners.forEach(([name, handler]) => {
+      if (handler) element.addEventListener(name, handler);
+    });
+    return () => {
+      listeners.forEach(([name, handler]) => {
+        if (handler) element.removeEventListener(name, handler);
+      });
+    };
+  }, [props.onEnded, props.onError, props.onPause, props.onPlay, props.onQualityChange, props.onReady, props.onStateChange]);
+  const attributes = useMemo(
+    () => ({
+      "source-url": props.sourceUrl,
+      "source-type": props.sourceType,
+      "source-qualities": props.qualities && props.qualities.length > 0 ? JSON.stringify(props.qualities) : void 0,
+      playlist: props.playlist ? JSON.stringify(props.playlist) : void 0,
+      poster: props.poster,
+      autoplay: props.autoplay ? "" : void 0,
+      muted: props.muted ? "" : void 0,
+      controls: props.controls === false ? "false" : void 0,
+      "auto-next": props.autoNext ? "true" : void 0,
+      "custom-controls": props.customControls ? "true" : void 0,
+      "scale-mode": props.scaleMode,
+      "hide-settings": props.hideSettings ? "" : void 0,
+      "hide-fullscreen": props.hideFullscreen ? "" : void 0,
+      "hide-playlist": props.hidePlaylist ? "" : void 0,
+      "hide-volume": props.hideVolume ? "" : void 0
+    }),
+    [
+      props.poster,
+      props.playlist,
+      props.qualities,
+      props.sourceType,
+      props.sourceUrl,
+      props.autoplay,
+      props.muted,
+      props.controls,
+      props.autoNext,
+      props.customControls,
+      props.scaleMode,
+      props.hideSettings,
+      props.hideFullscreen,
+      props.hidePlaylist,
+      props.hideVolume
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "uvp-player",
+    {
+      ref: elementRef,
+      className: props.className,
+      ...attributes,
+      children: props.children
+    }
+  );
+}
+var UvpReactPlayer = forwardRef(UvpReactPlayerImpl);
+export {
+  UvpReactPlayer
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@universal-web-video-player/player-react",
+  "version": "0.5.0",
+  "description": "React wrapper for universal video player",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --dts --format esm,cjs --clean",
+    "test": "vitest run --environment jsdom",
+    "lint": "tsc --noEmit",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@universal-web-video-player/player-web-component": "0.5.0",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^2.1.8"
+  },
+  "license": "MIT",
+  "author": "AIPXPERTS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aipxperts/aipxperts-video-player.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/aipxperts/aipxperts-video-player/issues"
+  },
+  "homepage": "https://github.com/aipxperts/aipxperts-video-player#readme",
+  "keywords": [
+    "video",
+    "player",
+    "react"
+  ]
+}