@livepeer-frameworks/player-react 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "description": "React components for FrameWorks streaming player",
   "main": "dist/cjs/index.js",
@@ -12,16 +12,21 @@
   ],
   "exports": {
     ".": {
+      "source": "./src/index.tsx",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/cjs/index.js"
     },
     "./player.css": "./src/player.css"
   },
   "scripts": {
-    "build": "NODE_ENV=production rollup -c",
+    "build": "pnpm run build:types && NODE_ENV=production rollup -c",
     "build:watch": "NODE_ENV=development rollup -c --watch",
-    "type-check": "tsc --noEmit"
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist/types",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@livepeer-frameworks/player-core": "workspace:*",
@@ -37,7 +42,9 @@
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
+    "@testing-library/react": "^16.1.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.1",
     "@radix-ui/react-context-menu": "^2.2.16",
@@ -45,20 +52,21 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
-    "@types/react": "^19.1.11",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.1.7",
-    "lucide-react": "^0.468.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "rollup": "^4.48.1",
+    "lucide-react": "^0.563.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "rollup": "^4.57.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "jsdom": "^28.0.0",
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "react",

package/src/components/DvdLogo.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { DvdLogoProps } from "../types";
+import type { DvdLogoProps } from "../types";
 
 type Point = { top: number; left: number };
 type Velocity = { x: number; y: number };

package/src/components/Player.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import IdleScreen from "./IdleScreen";
 import TitleOverlay from "./TitleOverlay";
 import StatsPanel from "./StatsPanel";
 import PlayerControls from "./PlayerControls";
 import DevModePanel from "./DevModePanel";
 import SpeedIndicator from "./SpeedIndicator";
-import SkipIndicator, { SkipDirection } from "./SkipIndicator";
+import type { SkipDirection } from "./SkipIndicator";
+import SkipIndicator from "./SkipIndicator";
 import { StatsIcon, SettingsIcon, PictureInPictureIcon } from "./Icons";
-import { PlayerProps } from "../types";
+import type { PlayerProps } from "../types";
 import { usePlayerController } from "../hooks/usePlayerController";
 import { cn } from "@livepeer-frameworks/player-core";
 import type { PlaybackMode, EndpointInfo } from "@livepeer-frameworks/player-core";
@@ -57,6 +58,7 @@ const PlayerInner: React.FC<PlayerProps> = ({
     setVolume,
     selectQuality,
     clearError,
+    dismissToast,
     retry,
     reload,
     jumpToLive,
@@ -122,6 +124,15 @@ const PlayerInner: React.FC<PlayerProps> = ({
     setSkipDirection(null);
   }, []);
 
+  // Auto-dismiss toast after 3 seconds
+  useEffect(() => {
+    if (!state.toast) return;
+    const timer = setTimeout(() => {
+      dismissToast();
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [state.toast, dismissToast]);
+
   // ============================================================================
   // Derived Values
   // ============================================================================
@@ -316,6 +327,34 @@ const PlayerInner: React.FC<PlayerProps> = ({
               </div>
             )}
 
+            {/* Toast notification */}
+            {state.toast && (
+              <div
+                className="absolute bottom-20 left-1/2 -translate-x-1/2 z-30 animate-in fade-in slide-in-from-bottom-2 duration-200"
+                role="status"
+                aria-live="polite"
+              >
+                <div className="flex items-center gap-2 rounded-lg border border-white/10 bg-black/80 px-4 py-2 text-sm text-white shadow-lg backdrop-blur-sm">
+                  <span>{state.toast.message}</span>
+                  <button
+                    type="button"
+                    onClick={dismissToast}
+                    className="ml-2 text-white/60 hover:text-white"
+                    aria-label="Dismiss"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                      <path
+                        d="M9 3L3 9M3 3L9 9"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            )}
+
             {/* Player controls */}
             {!useStockControls && (
               <PlayerControls

package/src/components/PlayerControls.tsx

@@ -90,7 +90,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   currentTime,
   duration,
   isVisible = true,
-  className,
+  className: _className,
   onSeek,
   mistStreamInfo,
   disabled = false,
@@ -509,22 +509,25 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
     else setInternalVolume(Math.round(v.volume * 100));
   };
 
-  const handleVolumeChange = (value: number[]) => {
-    if (disabled) return;
-    const next = Math.max(0, Math.min(100, value[0] ?? 0));
-    // Prefer prop callback from usePlayerController
-    if (onVolumeChange) {
-      onVolumeChange(next / 100);
-      return;
-    }
-    // Fallback: direct video manipulation
-    const v = video ?? (document.querySelector(".fw-player-video") as HTMLVideoElement | null);
-    if (!v) return;
-    v.volume = next / 100;
-    v.muted = next === 0;
-    setInternalVolume(next);
-    setInternalIsMuted(next === 0);
-  };
+  const handleVolumeChange = useCallback(
+    (value: number[]) => {
+      if (disabled) return;
+      const next = Math.max(0, Math.min(100, value[0] ?? 0));
+      // Prefer prop callback from usePlayerController
+      if (onVolumeChange) {
+        onVolumeChange(next / 100);
+        return;
+      }
+      // Fallback: direct video manipulation
+      const v = video ?? (document.querySelector(".fw-player-video") as HTMLVideoElement | null);
+      if (!v) return;
+      v.volume = next / 100;
+      v.muted = next === 0;
+      setInternalVolume(next);
+      setInternalIsMuted(next === 0);
+    },
+    [disabled, onVolumeChange, video]
+  );
 
   const handleFullscreen = () => {
     if (disabled) return;
@@ -601,6 +604,21 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   const [isVolumeHovered, setIsVolumeHovered] = useState(false);
   const [isVolumeFocused, setIsVolumeFocused] = useState(false);
   const isVolumeExpanded = isVolumeHovered || isVolumeFocused;
+  const volumeGroupRef = useRef<HTMLDivElement>(null);
+
+  // Non-passive wheel listener for volume control
+  useEffect(() => {
+    const el = volumeGroupRef.current;
+    if (!el) return;
+    const handler = (e: WheelEvent) => {
+      if (disabled || !hasAudio) return;
+      e.preventDefault();
+      const delta = e.deltaY < 0 ? 5 : -5;
+      handleVolumeChange([actualVolume + delta]);
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, [disabled, hasAudio, actualVolume, handleVolumeChange]);
 
   return (
     <div
@@ -671,6 +689,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
 
             {/* Volume pill - cohesive hover element (slab style) */}
             <div
+              ref={volumeGroupRef}
               className={cn(
                 "fw-volume-group",
                 isVolumeExpanded && "fw-volume-group--expanded",

package/src/components/PlayerErrorBoundary.tsx

@@ -1,4 +1,5 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+import React, { Component } from "react";
 import { Button } from "../ui/button";
 
 interface Props {

package/src/hooks/usePlayerController.ts

@@ -15,6 +15,7 @@ import {
   type PlaybackQuality,
   type ContentEndpoints,
   type ContentMetadata,
+  type ClassifiedError,
 } from "@livepeer-frameworks/player-core";
 
 // ============================================================================
@@ -32,6 +33,20 @@ export interface UsePlayerControllerConfig extends Omit<PlayerControllerConfig,
   onError?: (error: string) => void;
   /** Callback when ready */
   onReady?: (videoElement: HTMLVideoElement) => void;
+  /** Callback when protocol is swapped (for toast notification) */
+  onProtocolSwapped?: (data: {
+    fromPlayer: string;
+    toPlayer: string;
+    fromProtocol: string;
+    toProtocol: string;
+    reason: string;
+  }) => void;
+  /** Callback when playback fails after all recovery attempts (for error modal) */
+  onPlaybackFailed?: (error: {
+    code: string;
+    message: string;
+    details?: ClassifiedError["details"];
+  }) => void;
 }
 
 export interface PlayerControllerState {
@@ -61,6 +76,8 @@ export interface PlayerControllerState {
   volume: number;
   /** Error text */
   error: string | null;
+  /** Error details for debugging */
+  errorDetails: ClassifiedError["details"] | null;
   /** Is passive error */
   isPassiveError: boolean;
   /** Has playback ever started */
@@ -105,6 +122,8 @@ export interface PlayerControllerState {
   textTracks: Array<{ id: string; label: string; language?: string; active: boolean }>;
   /** Stream info for player selection (sources + tracks) */
   streamInfo: StreamInfo | null;
+  /** Toast message to display (auto-dismisses) */
+  toast: { message: string; timestamp: number } | null;
 }
 
 export interface UsePlayerControllerReturn {
@@ -140,6 +159,8 @@ export interface UsePlayerControllerReturn {
   toggleSubtitles: () => void;
   /** Clear error */
   clearError: () => void;
+  /** Dismiss toast notification */
+  dismissToast: () => void;
   /** Retry playback */
   retry: () => Promise<void>;
   /** Reload player */
@@ -183,6 +204,7 @@ const initialState: PlayerControllerState = {
   isMuted: true,
   volume: 1,
   error: null,
+  errorDetails: null,
   isPassiveError: false,
   hasPlaybackStarted: false,
   isHoldingSpeed: false,
@@ -201,6 +223,7 @@ const initialState: PlayerControllerState = {
   qualities: [],
   textTracks: [],
   streamInfo: null,
+  toast: null,
 };
 
 // ============================================================================
@@ -214,6 +237,8 @@ export function usePlayerController(config: UsePlayerControllerConfig): UsePlaye
     onStreamStateChange,
     onError,
     onReady,
+    onProtocolSwapped,
+    onPlaybackFailed,
     ...controllerConfig
   } = config;
 
@@ -421,6 +446,31 @@ export function usePlayerController(config: UsePlayerControllerConfig): UsePlaye
       })
     );
 
+    // Error handling events - show toasts/modals
+    unsubs.push(
+      controller.on("protocolSwapped", (data) => {
+        const message = `Switched to ${data.toProtocol}`;
+        setState((prev) => ({ ...prev, toast: { message, timestamp: Date.now() } }));
+        onProtocolSwapped?.(data);
+      })
+    );
+
+    unsubs.push(
+      controller.on("playbackFailed", (data) => {
+        setState((prev) => ({
+          ...prev,
+          error: data.message,
+          errorDetails: data.details ?? null,
+          isPassiveError: false,
+        }));
+        onPlaybackFailed?.({
+          code: data.code,
+          message: data.message,
+          details: data.details,
+        });
+      })
+    );
+
     // Attach controller to container
     // Note: Video event listeners are set up in the 'ready' handler above
     controller.attach(container).catch((err) => {
@@ -488,7 +538,16 @@ export function usePlayerController(config: UsePlayerControllerConfig): UsePlaye
 
   const clearError = useCallback(() => {
     controllerRef.current?.clearError();
-    setState((prev) => ({ ...prev, error: null, isPassiveError: false }));
+    setState((prev) => ({
+      ...prev,
+      error: null,
+      errorDetails: null,
+      isPassiveError: false,
+    }));
+  }, []);
+
+  const dismissToast = useCallback(() => {
+    setState((prev) => ({ ...prev, toast: null }));
   }, []);
 
   const jumpToLive = useCallback(() => {
@@ -556,6 +615,7 @@ export function usePlayerController(config: UsePlayerControllerConfig): UsePlaye
     togglePiP,
     toggleSubtitles,
     clearError,
+    dismissToast,
     retry,
     reload,
     getQualities,

package/dist/types/components/players/DashJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * DASH.js Player - React Wrapper
- *
- * MPEG-DASH streaming via dash.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { DashJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { DashJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const DashJsPlayer: React.FC<Props>;
-export default DashJsPlayer;

package/dist/types/components/players/HlsJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * HLS.js Player - React Wrapper
- *
- * Adaptive HLS streaming via hls.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { HlsJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { HlsJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const HlsJsPlayer: React.FC<Props>;
-export default HlsJsPlayer;

package/dist/types/components/players/MewsWsPlayer/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * MEWS WebSocket Player - React Wrapper
- *
- * Low-latency WebSocket MP4 streaming using MediaSource Extensions.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MewsWsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MewsWsPlayerImpl };
-type Props = {
-    wsUrl: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const MewsWsPlayer: React.FC<Props>;
-export default MewsWsPlayer;

package/dist/types/components/players/MistPlayer.d.ts

@@ -1,20 +0,0 @@
-/**
- * MistServer Legacy Player - React Wrapper
- *
- * Fallback player using MistServer's native player.js.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MistPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MistPlayerImpl };
-type Props = {
-    src: string;
-    streamName?: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    devMode?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const MistPlayer: React.FC<Props>;
-export default MistPlayer;

package/dist/types/components/players/MistWebRTCPlayer/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * MistWebRTC Player - React Wrapper
- *
- * MistServer native WebRTC with signaling for DVR support.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MistWebRTCPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MistWebRTCPlayerImpl };
-interface Props {
-    src: string;
-    autoPlay?: boolean;
-    muted?: boolean;
-    controls?: boolean;
-    poster?: string;
-    onReady?: (video: HTMLVideoElement) => void;
-    onError?: (error: Error) => void;
-}
-export declare const MistWebRTCPlayer: React.FC<Props>;
-export default MistWebRTCPlayerImpl;

package/dist/types/components/players/NativePlayer.d.ts

@@ -1,19 +0,0 @@
-/**
- * Native Player - React Wrapper
- *
- * HTML5 video and WHEP WebRTC playback.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { NativePlayerImpl, DirectPlaybackPlayerImpl } from '@livepeer-frameworks/player-core';
-export { NativePlayerImpl, DirectPlaybackPlayerImpl };
-type Props = {
-    src: string;
-    type?: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const NativePlayer: React.FC<Props>;
-export default NativePlayer;

package/dist/types/components/players/VideoJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * Video.js Player - React Wrapper
- *
- * HLS streaming via Video.js with VHS (videojs-http-streaming).
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { VideoJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { VideoJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const VideoJsPlayer: React.FC<Props>;
-export default VideoJsPlayer;

package/src/components/players/DashJsPlayer.tsx

@@ -1,58 +0,0 @@
-/**
- * DASH.js Player - React Wrapper
- *
- * MPEG-DASH streaming via dash.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from "react";
-import { DashJsPlayerImpl } from "@livepeer-frameworks/player-core";
-
-// Re-export the implementation from core for backwards compatibility
-export { DashJsPlayerImpl };
-
-type Props = {
-  src: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const DashJsPlayer: React.FC<Props> = ({
-  src,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  onError,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<DashJsPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new DashJsPlayerImpl();
-    playerRef.current = player;
-
-    player
-      .initialize(
-        containerRef.current,
-        { url: src, type: "dash/video/mp4" },
-        { autoplay: autoPlay, muted, controls }
-      )
-      .catch((e) => {
-        onError?.(e instanceof Error ? e : new Error(String(e)));
-      });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [src, muted, autoPlay, controls, onError]);
-
-  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
-};
-
-export default DashJsPlayer;

package/src/components/players/HlsJsPlayer.tsx

@@ -1,58 +0,0 @@
-/**
- * HLS.js Player - React Wrapper
- *
- * Adaptive HLS streaming via hls.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from "react";
-import { HlsJsPlayerImpl } from "@livepeer-frameworks/player-core";
-
-// Re-export the implementation from core for backwards compatibility
-export { HlsJsPlayerImpl };
-
-type Props = {
-  src: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const HlsJsPlayer: React.FC<Props> = ({
-  src,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  onError,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<HlsJsPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new HlsJsPlayerImpl();
-    playerRef.current = player;
-
-    player
-      .initialize(
-        containerRef.current,
-        { url: src, type: "html5/application/vnd.apple.mpegurl" },
-        { autoplay: autoPlay, muted, controls }
-      )
-      .catch((e) => {
-        onError?.(e instanceof Error ? e : new Error(String(e)));
-      });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [src, muted, autoPlay, controls, onError]);
-
-  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
-};
-
-export default HlsJsPlayer;