@videncrypt/react 0.1.0

package/README.md

@@ -0,0 +1,288 @@
+# @videncrypt/react
+
+React component and hook for embedding secure VidEncrypt videos.
+
+## Installation
+
+```bash
+npm install @videncrypt/react
+```
+
+> `@videncrypt/js` is installed automatically as a dependency.
+
+---
+
+## Quick start
+
+```tsx
+import { VidEncryptPlayer } from '@videncrypt/react';
+
+export default function Page() {
+  return (
+    <VidEncryptPlayer
+      videoId="YOUR_VIDEO_ID"
+      onPlay={() => console.log('playing')}
+      onEnded={() => console.log('ended')}
+    />
+  );
+}
+```
+
+---
+
+## VidEncryptPlayer
+
+The main component. Renders the player inside a responsive container with built-in loading and error states.
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `videoId` | `string` | **required** | Video ID from your VidEncrypt dashboard |
+| `width` | `string \| number` | `'100%'` | Player width |
+| `aspectRatio` | `string` | `'16/9'` | Aspect ratio e.g. `'4/3'`, `'1/1'` |
+| `title` | `string` | `''` | iframe title (accessibility) |
+| `autoPlay` | `boolean` | `false` | Auto-play on load (requires `muted: true` in most browsers) |
+| `muted` | `boolean` | `false` | Start muted |
+| `loop` | `boolean` | `false` | Loop video |
+| `startTime` | `number` | `0` | Start at N seconds |
+| `showControls` | `boolean` | `true` | Show player controls |
+| `showBranding` | `boolean` | `true` | Show VidEncrypt badge |
+| `primaryColor` | `string` | `'#2563EB'` | Accent color (hex) |
+| `embedBaseUrl` | `string` | `'https://app.videncrypt.com'` | Override for staging |
+| `className` | `string` | — | CSS class on the wrapper div |
+| `style` | `CSSProperties` | — | Inline style on the wrapper div |
+| `loadingSlot` | `ReactNode` | built-in spinner | Custom loading state |
+| `errorSlot` | `(error) => ReactNode` | built-in error UI | Custom error state |
+| `onReady` | `() => void` | — | Player initialized |
+| `onPlay` | `() => void` | — | Playback started |
+| `onPause` | `() => void` | — | Playback paused |
+| `onEnded` | `() => void` | — | Video ended |
+| `onProgress` | `(currentTime, duration) => void` | — | Position update (~5s interval) |
+| `onError` | `(error: PlayerError) => void` | — | Playback error |
+| `onFullscreenChange` | `(isFullscreen: boolean) => void` | — | Fullscreen toggled |
+
+### Examples
+
+**Custom aspect ratio:**
+```tsx
+<VidEncryptPlayer
+  videoId="YOUR_VIDEO_ID"
+  aspectRatio="4/3"
+  width={640}
+/>
+```
+
+**Autoplay muted:**
+```tsx
+<VidEncryptPlayer
+  videoId="YOUR_VIDEO_ID"
+  autoPlay
+  muted
+/>
+```
+
+**Custom loading and error states:**
+```tsx
+<VidEncryptPlayer
+  videoId="YOUR_VIDEO_ID"
+  loadingSlot={<MySpinner />}
+  errorSlot={(error) => (
+    <div className="error">
+      {error.message} ({error.code})
+    </div>
+  )}
+/>
+```
+
+**Custom accent color:**
+```tsx
+<VidEncryptPlayer
+  videoId="YOUR_VIDEO_ID"
+  primaryColor="#7C3AED"
+/>
+```
+
+---
+
+## usePlayer hook
+
+For full control over the player with your own UI.
+
+```tsx
+import { usePlayer } from '@videncrypt/react';
+
+function CustomPlayer({ videoId }: { videoId: string }) {
+  const {
+    containerRef,
+    playing,
+    state,
+    play,
+    pause,
+    seek,
+    setVolume,
+  } = usePlayer({ videoId });
+
+  return (
+    <div>
+      {/* Player mounts here */}
+      <div ref={containerRef} />
+
+      {/* Custom controls */}
+      <button onClick={playing ? pause : play}>
+        {playing ? 'Pause' : 'Play'}
+      </button>
+
+      <button onClick={() => seek(30)}>
+        Skip to 30s
+      </button>
+
+      <input
+        type="range"
+        min={0}
+        max={1}
+        step={0.1}
+        onChange={(e) => setVolume(Number(e.target.value))}
+      />
+
+      <p>
+        {state.currentTime.toFixed(0)}s / {state.duration.toFixed(0)}s
+      </p>
+    </div>
+  );
+}
+```
+
+### Hook return values
+
+| Value | Type | Description |
+|---|---|---|
+| `containerRef` | `RefObject<HTMLDivElement>` | Attach to your container div |
+| `state` | `PlayerState` | Full player state snapshot |
+| `ready` | `boolean` | True after player initializes |
+| `playing` | `boolean` | True while playing |
+| `error` | `PlayerError \| null` | Current error or null |
+| `play()` | `() => void` | Start playback |
+| `pause()` | `() => void` | Pause playback |
+| `seek(time)` | `(number) => void` | Seek to seconds |
+| `setVolume(v)` | `(number) => void` | Set volume 0–1 |
+| `mute()` | `() => void` | Mute audio |
+| `unmute()` | `() => void` | Unmute audio |
+| `enterFullscreen()` | `() => void` | Enter fullscreen |
+| `exitFullscreen()` | `() => void` | Exit fullscreen |
+
+### PlayerState
+
+```typescript
+interface PlayerState {
+  playing:     boolean;
+  muted:       boolean;
+  currentTime: number;
+  duration:    number;
+  fullscreen:  boolean;
+  ready:       boolean;
+}
+```
+
+### PlayerError
+
+```typescript
+interface PlayerError {
+  code:    'token-expired' | 'not-found' | 'domain-not-allowed'
+         | 'network-error' | 'unknown';
+  message: string;
+}
+```
+
+---
+
+## Framework examples
+
+### Next.js App Router
+
+```tsx
+// app/watch/[id]/page.tsx
+import { VidEncryptPlayer } from '@videncrypt/react';
+
+export default function WatchPage({ params }: { params: { id: string } }) {
+  return (
+    <main className="max-w-4xl mx-auto p-6">
+      <VidEncryptPlayer videoId={params.id} />
+    </main>
+  );
+}
+```
+
+### Next.js with progress tracking
+
+```tsx
+'use client';
+
+import { VidEncryptPlayer } from '@videncrypt/react';
+import { useState } from 'react';
+
+export default function VideoPage({ videoId }: { videoId: string }) {
+  const [progress, setProgress] = useState(0);
+
+  return (
+    <div>
+      <VidEncryptPlayer
+        videoId={videoId}
+        onProgress={(currentTime, duration) => {
+          setProgress(Math.round((currentTime / duration) * 100));
+        }}
+      />
+      <p>{progress}% watched</p>
+    </div>
+  );
+}
+```
+
+### Pause other videos when one plays
+
+```tsx
+'use client';
+
+import { usePlayer } from '@videncrypt/react';
+
+const VIDEO_IDS = ['video-aaa', 'video-bbb', 'video-ccc'];
+
+export default function VideoList() {
+  const players = VIDEO_IDS.map((id) =>
+    usePlayer({
+      videoId: id,
+      onPlay: () => {
+        // pause all others when this one plays
+        players.forEach((p, i) => {
+          if (VIDEO_IDS[i] !== id) p.pause();
+        });
+      },
+    })
+  );
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      {players.map((player, i) => (
+        <div key={VIDEO_IDS[i]} ref={player.containerRef} />
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+## TypeScript
+
+All types are exported from `@videncrypt/react` — no need to import from `@videncrypt/js` separately.
+
+```typescript
+import type {
+  PlayerOptions,
+  PlayerState,
+  PlayerError,
+  VidEncryptPlayerProps,
+  UsePlayerOptions,
+  UsePlayerReturn,
+} from '@videncrypt/react';
+```

package/dist/index.cjs

@@ -0,0 +1,221 @@
+"use strict";
+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.ts
+var index_exports = {};
+__export(index_exports, {
+  VidEncryptPlayer: () => VidEncryptPlayer,
+  usePlayer: () => usePlayer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-player.ts
+var import_react = require("react");
+var import_js = require("@videncrypt/js");
+function usePlayer(options) {
+  var _a, _b;
+  const containerRef = (0, import_react.useRef)(null);
+  const playerRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)({
+    playing: false,
+    muted: (_a = options.muted) != null ? _a : false,
+    currentTime: (_b = options.startTime) != null ? _b : 0,
+    duration: 0,
+    fullscreen: false,
+    ready: false
+  });
+  const [error, setError] = (0, import_react.useState)(null);
+  const optsRef = (0, import_react.useRef)(options);
+  optsRef.current = options;
+  (0, import_react.useEffect)(() => {
+    var _a2;
+    const container = containerRef.current;
+    if (!container) return;
+    (_a2 = playerRef.current) == null ? void 0 : _a2.destroy();
+    setError(null);
+    const player = new import_js.Player({
+      ...optsRef.current,
+      container,
+      onReady: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, ready: true }));
+        (_b2 = (_a3 = optsRef.current).onReady) == null ? void 0 : _b2.call(_a3);
+      },
+      onPlay: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: true }));
+        (_b2 = (_a3 = optsRef.current).onPlay) == null ? void 0 : _b2.call(_a3);
+      },
+      onPause: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: false }));
+        (_b2 = (_a3 = optsRef.current).onPause) == null ? void 0 : _b2.call(_a3);
+      },
+      onEnded: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: false }));
+        (_b2 = (_a3 = optsRef.current).onEnded) == null ? void 0 : _b2.call(_a3);
+      },
+      onProgress: (currentTime, duration) => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, currentTime, duration }));
+        (_b2 = (_a3 = optsRef.current).onProgress) == null ? void 0 : _b2.call(_a3, currentTime, duration);
+      },
+      onError: (e) => {
+        var _a3, _b2;
+        setError(e);
+        (_b2 = (_a3 = optsRef.current).onError) == null ? void 0 : _b2.call(_a3, e);
+      },
+      onFullscreenChange: (isFullscreen) => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, fullscreen: isFullscreen }));
+        (_b2 = (_a3 = optsRef.current).onFullscreenChange) == null ? void 0 : _b2.call(_a3, isFullscreen);
+      }
+    });
+    playerRef.current = player;
+    return () => {
+      player.destroy();
+      playerRef.current = null;
+    };
+  }, [options.videoId]);
+  const play = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.play();
+  }, []);
+  const pause = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.pause();
+  }, []);
+  const seek = (0, import_react.useCallback)((t) => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.seek(t);
+  }, []);
+  const setVolume = (0, import_react.useCallback)((v) => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.setVolume(v);
+  }, []);
+  const mute = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.mute();
+  }, []);
+  const unmute = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.unmute();
+  }, []);
+  const enterFullscreen = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.enterFullscreen();
+  }, []);
+  const exitFullscreen = (0, import_react.useCallback)(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.exitFullscreen();
+  }, []);
+  return {
+    containerRef,
+    state,
+    ready: state.ready,
+    playing: state.playing,
+    error,
+    play,
+    pause,
+    seek,
+    setVolume,
+    mute,
+    unmute,
+    enterFullscreen,
+    exitFullscreen
+  };
+}
+
+// src/player.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function VidEncryptPlayer({
+  className,
+  style,
+  loadingSlot,
+  errorSlot,
+  ...options
+}) {
+  const { containerRef, ready, error } = usePlayer(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        background: "#000",
+        ...style
+      },
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, style: { width: "100%" } }),
+        !ready && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: overlayStyle, children: loadingSlot != null ? loadingSlot : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultLoading, {}) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: overlayStyle, children: errorSlot ? errorSlot(error) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultError, { error }) })
+      ]
+    }
+  );
+}
+function DefaultLoading() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#000",
+    pointerEvents: "none"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      width: 32,
+      height: 32,
+      border: "3px solid rgba(255,255,255,0.15)",
+      borderTopColor: "#2563EB",
+      borderRadius: "50%",
+      animation: "ve-spin 0.75s linear infinite"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        @keyframes ve-spin { to { transform: rotate(360deg); } }
+      ` })
+  ] });
+}
+function DefaultError({ error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#000",
+    gap: 8
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: 13, margin: 0 }, children: error.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "rgba(255,255,255,0.25)", fontSize: 11, margin: 0 }, children: error.code })
+  ] });
+}
+var overlayStyle = {
+  position: "absolute",
+  inset: 0
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VidEncryptPlayer,
+  usePlayer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/use-player.ts","../src/player.tsx"],"sourcesContent":["// Main component\nexport { VidEncryptPlayer } from './player';\nexport type { VidEncryptPlayerProps } from './player';\n\n// Hook for custom implementations\nexport { usePlayer } from './use-player';\nexport type { UsePlayerOptions, UsePlayerReturn } from './use-player';\n\n// Re-export types from @videncrypt/js so consumers\n// only need to import from @videncrypt/react\nexport type {\n  PlayerOptions,\n  PlayerState,\n  PlayerError,\n  PlayerEventMap,\n} from '@videncrypt/js';","import { useEffect, useRef, useState, useCallback } from 'react';\nimport { Player } from '@videncrypt/js';\nimport type { PlayerOptions, PlayerState, PlayerError } from '@videncrypt/js';\n\n// ── usePlayer hook ─────────────────────────────────────────\n// Creates and manages a VidEncryptPlayer instance.\n// Handles lifecycle — creates on mount, destroys on unmount.\n// Re-creates when videoId changes.\n\nexport interface UsePlayerOptions\n  extends Omit<PlayerOptions, 'container'> {\n  // container is handled by the component via ref\n}\n\nexport interface UsePlayerReturn {\n  // Attach this ref to the container div\n  containerRef: React.RefObject<HTMLDivElement | null>;\n\n  // Current player state\n  state:   PlayerState;\n  ready:   boolean;\n  playing: boolean;\n  error:   PlayerError | null;\n\n  // Playback controls\n  play:             () => void;\n  pause:            () => void;\n  seek:             (time: number) => void;\n  setVolume:        (volume: number) => void;\n  mute:             () => void;\n  unmute:           () => void;\n  enterFullscreen:  () => void;\n  exitFullscreen:   () => void;\n}\n\nexport function usePlayer(options: UsePlayerOptions): UsePlayerReturn {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const playerRef    = useRef<InstanceType<typeof Player> | null>(null);\n\n  const [state, setState] = useState<PlayerState>({\n    playing:     false,\n    muted:       options.muted    ?? false,\n    currentTime: options.startTime ?? 0,\n    duration:    0,\n    fullscreen:  false,\n    ready:       false,\n  });\n\n  const [error, setError] = useState<PlayerError | null>(null);\n\n  // Stable options ref — avoids recreating player on every render\n  // when callbacks are inline arrow functions\n  const optsRef = useRef(options);\n  optsRef.current = options;\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Destroy previous instance if videoId changed\n    playerRef.current?.destroy();\n    setError(null);\n\n    const player = new Player({\n      ...optsRef.current,\n      container,\n\n      onReady: () => {\n        setState((s) => ({ ...s, ready: true }));\n        optsRef.current.onReady?.();\n      },\n      onPlay: () => {\n        setState((s) => ({ ...s, playing: true }));\n        optsRef.current.onPlay?.();\n      },\n      onPause: () => {\n        setState((s) => ({ ...s, playing: false }));\n        optsRef.current.onPause?.();\n      },\n      onEnded: () => {\n        setState((s) => ({ ...s, playing: false }));\n        optsRef.current.onEnded?.();\n      },\n      onProgress: (currentTime, duration) => {\n        setState((s) => ({ ...s, currentTime, duration }));\n        optsRef.current.onProgress?.(currentTime, duration);\n      },\n      onError: (e) => {\n        setError(e);\n        optsRef.current.onError?.(e);\n      },\n      onFullscreenChange: (isFullscreen) => {\n        setState((s) => ({ ...s, fullscreen: isFullscreen }));\n        optsRef.current.onFullscreenChange?.(isFullscreen);\n      },\n    });\n\n    playerRef.current = player;\n\n    return () => {\n      player.destroy();\n      playerRef.current = null;\n    };\n  }, [options.videoId]); // only re-create when videoId changes\n\n  // ── Stable control functions ───────────────────────────\n  // useCallback with empty deps — these never change,\n  // they just call the current player ref\n\n  const play            = useCallback(() => playerRef.current?.play(),                    []);\n  const pause           = useCallback(() => playerRef.current?.pause(),                   []);\n  const seek            = useCallback((t: number) => playerRef.current?.seek(t),          []);\n  const setVolume       = useCallback((v: number) => playerRef.current?.setVolume(v),     []);\n  const mute            = useCallback(() => playerRef.current?.mute(),                    []);\n  const unmute          = useCallback(() => playerRef.current?.unmute(),                  []);\n  const enterFullscreen = useCallback(() => playerRef.current?.enterFullscreen(),         []);\n  const exitFullscreen  = useCallback(() => playerRef.current?.exitFullscreen(),          []);\n\n  return {\n    containerRef,\n    state,\n    ready:   state.ready,\n    playing: state.playing,\n    error,\n    play,\n    pause,\n    seek,\n    setVolume,\n    mute,\n    unmute,\n    enterFullscreen,\n    exitFullscreen,\n  };\n}","'use client';\n\nimport { usePlayer, type UsePlayerOptions } from './use-player';\nimport type { PlayerError } from '@videncrypt/js';\n\n// ── Props ──────────────────────────────────────────────────\n\nexport interface VidEncryptPlayerProps extends UsePlayerOptions {\n  // Container sizing\n  className?: string;\n  style?:     React.CSSProperties;\n\n  // Loading slot — shown while player initializes\n  // Default: simple grey box\n  loadingSlot?: React.ReactNode;\n\n  // Error slot — shown on playback error\n  // Default: error message + code\n  errorSlot?: (error: PlayerError) => React.ReactNode;\n}\n\n// ── Component ──────────────────────────────────────────────\n\nexport function VidEncryptPlayer({\n  className,\n  style,\n  loadingSlot,\n  errorSlot,\n  ...options\n}: VidEncryptPlayerProps) {\n  const { containerRef, ready, error } = usePlayer(options);\n\n  return (\n    <div\n      style={{\n        position:   'relative',\n        width:      '100%',\n        background: '#000',\n        ...style,\n      }}\n      className={className}\n    >\n      {/* Player mounts here — always rendered so the ref is stable */}\n      <div ref={containerRef} style={{ width: '100%' }} />\n\n      {/* Loading overlay — shown until player is ready */}\n      {!ready && !error && (\n        <div style={overlayStyle}>\n          {loadingSlot ?? <DefaultLoading />}\n        </div>\n      )}\n\n      {/* Error overlay */}\n      {error && (\n        <div style={overlayStyle}>\n          {errorSlot ? errorSlot(error) : <DefaultError error={error} />}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── Default loading state ──────────────────────────────────\n\nfunction DefaultLoading() {\n  return (\n    <div style={{\n      position:        'absolute',\n      inset:           0,\n      display:         'flex',\n      alignItems:      'center',\n      justifyContent:  'center',\n      background:      '#000',\n      pointerEvents:   'none',\n    }}>\n      <div style={{\n        width:           32,\n        height:          32,\n        border:          '3px solid rgba(255,255,255,0.15)',\n        borderTopColor:  '#2563EB',\n        borderRadius:    '50%',\n        animation:       've-spin 0.75s linear infinite',\n      }} />\n      <style>{`\n        @keyframes ve-spin { to { transform: rotate(360deg); } }\n      `}</style>\n    </div>\n  );\n}\n\n// ── Default error state ────────────────────────────────────\n\nfunction DefaultError({ error }: { error: PlayerError }) {\n  return (\n    <div style={{\n      position:       'absolute',\n      inset:          0,\n      display:        'flex',\n      flexDirection:  'column',\n      alignItems:     'center',\n      justifyContent: 'center',\n      background:     '#000',\n      gap:            8,\n    }}>\n      <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, margin: 0 }}>\n        {error.message}\n      </p>\n      <p style={{ color: 'rgba(255,255,255,0.25)', fontSize: 11, margin: 0 }}>\n        {error.code}\n      </p>\n    </div>\n  );\n}\n\n// ── Shared styles ──────────────────────────────────────────\n\nconst overlayStyle: React.CSSProperties = {\n  position: 'absolute',\n  inset:    0,\n};"],"mappings":"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","names":["_a","_b"]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PlayerOptions, PlayerState, PlayerError } from '@videncrypt/js';
+export { PlayerError, PlayerEventMap, PlayerOptions, PlayerState } from '@videncrypt/js';
+
+interface UsePlayerOptions extends Omit<PlayerOptions, 'container'> {
+}
+interface UsePlayerReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    state: PlayerState;
+    ready: boolean;
+    playing: boolean;
+    error: PlayerError | null;
+    play: () => void;
+    pause: () => void;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => void;
+    exitFullscreen: () => void;
+}
+declare function usePlayer(options: UsePlayerOptions): UsePlayerReturn;
+
+interface VidEncryptPlayerProps extends UsePlayerOptions {
+    className?: string;
+    style?: React.CSSProperties;
+    loadingSlot?: React.ReactNode;
+    errorSlot?: (error: PlayerError) => React.ReactNode;
+}
+declare function VidEncryptPlayer({ className, style, loadingSlot, errorSlot, ...options }: VidEncryptPlayerProps): react_jsx_runtime.JSX.Element;
+
+export { type UsePlayerOptions, type UsePlayerReturn, VidEncryptPlayer, type VidEncryptPlayerProps, usePlayer };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PlayerOptions, PlayerState, PlayerError } from '@videncrypt/js';
+export { PlayerError, PlayerEventMap, PlayerOptions, PlayerState } from '@videncrypt/js';
+
+interface UsePlayerOptions extends Omit<PlayerOptions, 'container'> {
+}
+interface UsePlayerReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    state: PlayerState;
+    ready: boolean;
+    playing: boolean;
+    error: PlayerError | null;
+    play: () => void;
+    pause: () => void;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => void;
+    exitFullscreen: () => void;
+}
+declare function usePlayer(options: UsePlayerOptions): UsePlayerReturn;
+
+interface VidEncryptPlayerProps extends UsePlayerOptions {
+    className?: string;
+    style?: React.CSSProperties;
+    loadingSlot?: React.ReactNode;
+    errorSlot?: (error: PlayerError) => React.ReactNode;
+}
+declare function VidEncryptPlayer({ className, style, loadingSlot, errorSlot, ...options }: VidEncryptPlayerProps): react_jsx_runtime.JSX.Element;
+
+export { type UsePlayerOptions, type UsePlayerReturn, VidEncryptPlayer, type VidEncryptPlayerProps, usePlayer };

package/dist/index.mjs

@@ -0,0 +1,193 @@
+// src/use-player.ts
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Player } from "@videncrypt/js";
+function usePlayer(options) {
+  var _a, _b;
+  const containerRef = useRef(null);
+  const playerRef = useRef(null);
+  const [state, setState] = useState({
+    playing: false,
+    muted: (_a = options.muted) != null ? _a : false,
+    currentTime: (_b = options.startTime) != null ? _b : 0,
+    duration: 0,
+    fullscreen: false,
+    ready: false
+  });
+  const [error, setError] = useState(null);
+  const optsRef = useRef(options);
+  optsRef.current = options;
+  useEffect(() => {
+    var _a2;
+    const container = containerRef.current;
+    if (!container) return;
+    (_a2 = playerRef.current) == null ? void 0 : _a2.destroy();
+    setError(null);
+    const player = new Player({
+      ...optsRef.current,
+      container,
+      onReady: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, ready: true }));
+        (_b2 = (_a3 = optsRef.current).onReady) == null ? void 0 : _b2.call(_a3);
+      },
+      onPlay: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: true }));
+        (_b2 = (_a3 = optsRef.current).onPlay) == null ? void 0 : _b2.call(_a3);
+      },
+      onPause: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: false }));
+        (_b2 = (_a3 = optsRef.current).onPause) == null ? void 0 : _b2.call(_a3);
+      },
+      onEnded: () => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, playing: false }));
+        (_b2 = (_a3 = optsRef.current).onEnded) == null ? void 0 : _b2.call(_a3);
+      },
+      onProgress: (currentTime, duration) => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, currentTime, duration }));
+        (_b2 = (_a3 = optsRef.current).onProgress) == null ? void 0 : _b2.call(_a3, currentTime, duration);
+      },
+      onError: (e) => {
+        var _a3, _b2;
+        setError(e);
+        (_b2 = (_a3 = optsRef.current).onError) == null ? void 0 : _b2.call(_a3, e);
+      },
+      onFullscreenChange: (isFullscreen) => {
+        var _a3, _b2;
+        setState((s) => ({ ...s, fullscreen: isFullscreen }));
+        (_b2 = (_a3 = optsRef.current).onFullscreenChange) == null ? void 0 : _b2.call(_a3, isFullscreen);
+      }
+    });
+    playerRef.current = player;
+    return () => {
+      player.destroy();
+      playerRef.current = null;
+    };
+  }, [options.videoId]);
+  const play = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.play();
+  }, []);
+  const pause = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.pause();
+  }, []);
+  const seek = useCallback((t) => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.seek(t);
+  }, []);
+  const setVolume = useCallback((v) => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.setVolume(v);
+  }, []);
+  const mute = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.mute();
+  }, []);
+  const unmute = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.unmute();
+  }, []);
+  const enterFullscreen = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.enterFullscreen();
+  }, []);
+  const exitFullscreen = useCallback(() => {
+    var _a2;
+    return (_a2 = playerRef.current) == null ? void 0 : _a2.exitFullscreen();
+  }, []);
+  return {
+    containerRef,
+    state,
+    ready: state.ready,
+    playing: state.playing,
+    error,
+    play,
+    pause,
+    seek,
+    setVolume,
+    mute,
+    unmute,
+    enterFullscreen,
+    exitFullscreen
+  };
+}
+
+// src/player.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function VidEncryptPlayer({
+  className,
+  style,
+  loadingSlot,
+  errorSlot,
+  ...options
+}) {
+  const { containerRef, ready, error } = usePlayer(options);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        background: "#000",
+        ...style
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%" } }),
+        !ready && !error && /* @__PURE__ */ jsx("div", { style: overlayStyle, children: loadingSlot != null ? loadingSlot : /* @__PURE__ */ jsx(DefaultLoading, {}) }),
+        error && /* @__PURE__ */ jsx("div", { style: overlayStyle, children: errorSlot ? errorSlot(error) : /* @__PURE__ */ jsx(DefaultError, { error }) })
+      ]
+    }
+  );
+}
+function DefaultLoading() {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#000",
+    pointerEvents: "none"
+  }, children: [
+    /* @__PURE__ */ jsx("div", { style: {
+      width: 32,
+      height: 32,
+      border: "3px solid rgba(255,255,255,0.15)",
+      borderTopColor: "#2563EB",
+      borderRadius: "50%",
+      animation: "ve-spin 0.75s linear infinite"
+    } }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes ve-spin { to { transform: rotate(360deg); } }
+      ` })
+  ] });
+}
+function DefaultError({ error }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#000",
+    gap: 8
+  }, children: [
+    /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: 13, margin: 0 }, children: error.message }),
+    /* @__PURE__ */ jsx("p", { style: { color: "rgba(255,255,255,0.25)", fontSize: 11, margin: 0 }, children: error.code })
+  ] });
+}
+var overlayStyle = {
+  position: "absolute",
+  inset: 0
+};
+export {
+  VidEncryptPlayer,
+  usePlayer
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-player.ts","../src/player.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useCallback } from 'react';\nimport { Player } from '@videncrypt/js';\nimport type { PlayerOptions, PlayerState, PlayerError } from '@videncrypt/js';\n\n// ── usePlayer hook ─────────────────────────────────────────\n// Creates and manages a VidEncryptPlayer instance.\n// Handles lifecycle — creates on mount, destroys on unmount.\n// Re-creates when videoId changes.\n\nexport interface UsePlayerOptions\n  extends Omit<PlayerOptions, 'container'> {\n  // container is handled by the component via ref\n}\n\nexport interface UsePlayerReturn {\n  // Attach this ref to the container div\n  containerRef: React.RefObject<HTMLDivElement | null>;\n\n  // Current player state\n  state:   PlayerState;\n  ready:   boolean;\n  playing: boolean;\n  error:   PlayerError | null;\n\n  // Playback controls\n  play:             () => void;\n  pause:            () => void;\n  seek:             (time: number) => void;\n  setVolume:        (volume: number) => void;\n  mute:             () => void;\n  unmute:           () => void;\n  enterFullscreen:  () => void;\n  exitFullscreen:   () => void;\n}\n\nexport function usePlayer(options: UsePlayerOptions): UsePlayerReturn {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const playerRef    = useRef<InstanceType<typeof Player> | null>(null);\n\n  const [state, setState] = useState<PlayerState>({\n    playing:     false,\n    muted:       options.muted    ?? false,\n    currentTime: options.startTime ?? 0,\n    duration:    0,\n    fullscreen:  false,\n    ready:       false,\n  });\n\n  const [error, setError] = useState<PlayerError | null>(null);\n\n  // Stable options ref — avoids recreating player on every render\n  // when callbacks are inline arrow functions\n  const optsRef = useRef(options);\n  optsRef.current = options;\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Destroy previous instance if videoId changed\n    playerRef.current?.destroy();\n    setError(null);\n\n    const player = new Player({\n      ...optsRef.current,\n      container,\n\n      onReady: () => {\n        setState((s) => ({ ...s, ready: true }));\n        optsRef.current.onReady?.();\n      },\n      onPlay: () => {\n        setState((s) => ({ ...s, playing: true }));\n        optsRef.current.onPlay?.();\n      },\n      onPause: () => {\n        setState((s) => ({ ...s, playing: false }));\n        optsRef.current.onPause?.();\n      },\n      onEnded: () => {\n        setState((s) => ({ ...s, playing: false }));\n        optsRef.current.onEnded?.();\n      },\n      onProgress: (currentTime, duration) => {\n        setState((s) => ({ ...s, currentTime, duration }));\n        optsRef.current.onProgress?.(currentTime, duration);\n      },\n      onError: (e) => {\n        setError(e);\n        optsRef.current.onError?.(e);\n      },\n      onFullscreenChange: (isFullscreen) => {\n        setState((s) => ({ ...s, fullscreen: isFullscreen }));\n        optsRef.current.onFullscreenChange?.(isFullscreen);\n      },\n    });\n\n    playerRef.current = player;\n\n    return () => {\n      player.destroy();\n      playerRef.current = null;\n    };\n  }, [options.videoId]); // only re-create when videoId changes\n\n  // ── Stable control functions ───────────────────────────\n  // useCallback with empty deps — these never change,\n  // they just call the current player ref\n\n  const play            = useCallback(() => playerRef.current?.play(),                    []);\n  const pause           = useCallback(() => playerRef.current?.pause(),                   []);\n  const seek            = useCallback((t: number) => playerRef.current?.seek(t),          []);\n  const setVolume       = useCallback((v: number) => playerRef.current?.setVolume(v),     []);\n  const mute            = useCallback(() => playerRef.current?.mute(),                    []);\n  const unmute          = useCallback(() => playerRef.current?.unmute(),                  []);\n  const enterFullscreen = useCallback(() => playerRef.current?.enterFullscreen(),         []);\n  const exitFullscreen  = useCallback(() => playerRef.current?.exitFullscreen(),          []);\n\n  return {\n    containerRef,\n    state,\n    ready:   state.ready,\n    playing: state.playing,\n    error,\n    play,\n    pause,\n    seek,\n    setVolume,\n    mute,\n    unmute,\n    enterFullscreen,\n    exitFullscreen,\n  };\n}","'use client';\n\nimport { usePlayer, type UsePlayerOptions } from './use-player';\nimport type { PlayerError } from '@videncrypt/js';\n\n// ── Props ──────────────────────────────────────────────────\n\nexport interface VidEncryptPlayerProps extends UsePlayerOptions {\n  // Container sizing\n  className?: string;\n  style?:     React.CSSProperties;\n\n  // Loading slot — shown while player initializes\n  // Default: simple grey box\n  loadingSlot?: React.ReactNode;\n\n  // Error slot — shown on playback error\n  // Default: error message + code\n  errorSlot?: (error: PlayerError) => React.ReactNode;\n}\n\n// ── Component ──────────────────────────────────────────────\n\nexport function VidEncryptPlayer({\n  className,\n  style,\n  loadingSlot,\n  errorSlot,\n  ...options\n}: VidEncryptPlayerProps) {\n  const { containerRef, ready, error } = usePlayer(options);\n\n  return (\n    <div\n      style={{\n        position:   'relative',\n        width:      '100%',\n        background: '#000',\n        ...style,\n      }}\n      className={className}\n    >\n      {/* Player mounts here — always rendered so the ref is stable */}\n      <div ref={containerRef} style={{ width: '100%' }} />\n\n      {/* Loading overlay — shown until player is ready */}\n      {!ready && !error && (\n        <div style={overlayStyle}>\n          {loadingSlot ?? <DefaultLoading />}\n        </div>\n      )}\n\n      {/* Error overlay */}\n      {error && (\n        <div style={overlayStyle}>\n          {errorSlot ? errorSlot(error) : <DefaultError error={error} />}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── Default loading state ──────────────────────────────────\n\nfunction DefaultLoading() {\n  return (\n    <div style={{\n      position:        'absolute',\n      inset:           0,\n      display:         'flex',\n      alignItems:      'center',\n      justifyContent:  'center',\n      background:      '#000',\n      pointerEvents:   'none',\n    }}>\n      <div style={{\n        width:           32,\n        height:          32,\n        border:          '3px solid rgba(255,255,255,0.15)',\n        borderTopColor:  '#2563EB',\n        borderRadius:    '50%',\n        animation:       've-spin 0.75s linear infinite',\n      }} />\n      <style>{`\n        @keyframes ve-spin { to { transform: rotate(360deg); } }\n      `}</style>\n    </div>\n  );\n}\n\n// ── Default error state ────────────────────────────────────\n\nfunction DefaultError({ error }: { error: PlayerError }) {\n  return (\n    <div style={{\n      position:       'absolute',\n      inset:          0,\n      display:        'flex',\n      flexDirection:  'column',\n      alignItems:     'center',\n      justifyContent: 'center',\n      background:     '#000',\n      gap:            8,\n    }}>\n      <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, margin: 0 }}>\n        {error.message}\n      </p>\n      <p style={{ color: 'rgba(255,255,255,0.25)', fontSize: 11, margin: 0 }}>\n        {error.code}\n      </p>\n    </div>\n  );\n}\n\n// ── Shared styles ──────────────────────────────────────────\n\nconst overlayStyle: React.CSSProperties = {\n  position: 'absolute',\n  inset:    0,\n};"],"mappings":"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","names":["_a","_b"]}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@videncrypt/react",
+  "version": "0.1.0",
+  "description": "React component for VidEncrypt secure video player",
+  "license": "MIT",
+  "author": "VidEncrypt",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@videncrypt/js": "0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}