@livepeer-frameworks/player-react 0.1.0 → 0.1.1

package/src/components/players/MistWebRTCPlayer/index.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useRef, useEffect } from 'react';
-import { MistWebRTCPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useRef, useEffect } from "react";
+import { MistWebRTCPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { MistWebRTCPlayerImpl };
@@ -39,13 +39,22 @@ export const MistWebRTCPlayer: React.FC<Props> = ({
     const player = new MistWebRTCPlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'webrtc' },
-      { autoplay: autoPlay, muted, controls, poster, onReady, onError: (e) => onError?.(typeof e === 'string' ? new Error(e) : e) }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(
+        containerRef.current,
+        { url: src, type: "webrtc" },
+        {
+          autoplay: autoPlay,
+          muted,
+          controls,
+          poster,
+          onReady,
+          onError: (e) => onError?.(typeof e === "string" ? new Error(e) : e),
+        }
+      )
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -53,7 +62,7 @@ export const MistWebRTCPlayer: React.FC<Props> = ({
     };
   }, [src, autoPlay, muted, controls, poster, onReady, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default MistWebRTCPlayerImpl;

package/src/components/players/NativePlayer.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { NativePlayerImpl, DirectPlaybackPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { NativePlayerImpl, DirectPlaybackPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementations from core for backwards compatibility
 export { NativePlayerImpl, DirectPlaybackPlayerImpl };
@@ -23,11 +23,11 @@ type Props = {
 // React component wrapper
 const NativePlayer: React.FC<Props> = ({
   src,
-  type = 'html5/video/mp4',
+  type = "html5/video/mp4",
   muted = true,
   autoPlay = true,
   controls = true,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<NativePlayerImpl | null>(null);
@@ -38,13 +38,11 @@ const NativePlayer: React.FC<Props> = ({
     const player = new NativePlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: src, type },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(containerRef.current, { url: src, type }, { autoplay: autoPlay, muted, controls })
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -52,7 +50,7 @@ const NativePlayer: React.FC<Props> = ({
     };
   }, [src, type, muted, autoPlay, controls, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default NativePlayer;

package/src/components/players/VideoJsPlayer.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { VideoJsPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { VideoJsPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { VideoJsPlayerImpl };
@@ -25,7 +25,7 @@ const VideoJsPlayer: React.FC<Props> = ({
   muted = true,
   autoPlay = true,
   controls = true,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<VideoJsPlayerImpl | null>(null);
@@ -36,13 +36,15 @@ const VideoJsPlayer: React.FC<Props> = ({
     const player = new VideoJsPlayerImpl();
     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)));
-    });
+    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();
@@ -50,7 +52,7 @@ const VideoJsPlayer: React.FC<Props> = ({
     };
   }, [src, muted, autoPlay, controls, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default VideoJsPlayer;

package/src/context/PlayerContext.tsx

@@ -12,12 +12,12 @@
  * ```
  */
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, useContext, type ReactNode } from "react";
 import {
   usePlayerController,
   type UsePlayerControllerConfig,
   type UsePlayerControllerReturn,
-} from '../hooks/usePlayerController';
+} from "../hooks/usePlayerController";
 
 // Context holds the full hook return value
 const PlayerContext = createContext<UsePlayerControllerReturn | null>(null);
@@ -35,11 +35,7 @@ export interface PlayerProviderProps {
 export function PlayerProvider({ children, config }: PlayerProviderProps) {
   const playerController = usePlayerController(config);
 
-  return (
-    <PlayerContext.Provider value={playerController}>
-      {children}
-    </PlayerContext.Provider>
-  );
+  return <PlayerContext.Provider value={playerController}>{children}</PlayerContext.Provider>;
 }
 
 /**
@@ -49,7 +45,7 @@ export function PlayerProvider({ children, config }: PlayerProviderProps) {
 export function usePlayerContext(): UsePlayerControllerReturn {
   const context = useContext(PlayerContext);
   if (!context) {
-    throw new Error('usePlayerContext must be used within a PlayerProvider');
+    throw new Error("usePlayerContext must be used within a PlayerProvider");
   }
   return context;
 }

package/src/context/index.ts

@@ -6,6 +6,6 @@ export {
   PlayerProvider,
   usePlayerContext,
   usePlayerContextOptional,
-  PlayerContext
-} from './PlayerContext';
-export type { PlayerContextValue, UsePlayerControllerConfig } from './PlayerContext';
+  PlayerContext,
+} from "./PlayerContext";
+export type { PlayerContextValue, UsePlayerControllerConfig } from "./PlayerContext";

package/src/hooks/useMetaTrack.ts

@@ -1,12 +1,12 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
-import { MetaTrackManager, type MetaTrackEvent } from '@livepeer-frameworks/player-core';
-import type { UseMetaTrackOptions } from '../types';
+import { useEffect, useState, useRef, useCallback } from "react";
+import { MetaTrackManager, type MetaTrackEvent } from "@livepeer-frameworks/player-core";
+import type { UseMetaTrackOptions } from "../types";
 
 export interface UseMetaTrackReturn {
   /** Whether connected to MistServer WebSocket */
   isConnected: boolean;
   /** Connection state */
-  connectionState: 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+  connectionState: "disconnected" | "connecting" | "connected" | "reconnecting";
   /** List of subscribed track IDs */
   subscribedTracks: string[];
   /** Subscribe to a meta track */
@@ -54,15 +54,12 @@ export interface UseMetaTrackReturn {
  * ```
  */
 export function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn {
-  const {
-    mistBaseUrl,
-    streamName,
-    subscriptions: initialSubscriptions,
-    enabled = true,
-  } = options;
+  const { mistBaseUrl, streamName, subscriptions: initialSubscriptions, enabled = true } = options;
 
   const [isConnected, setIsConnected] = useState(false);
-  const [connectionState, setConnectionState] = useState<'disconnected' | 'connecting' | 'connected' | 'reconnecting'>('disconnected');
+  const [connectionState, setConnectionState] = useState<
+    "disconnected" | "connecting" | "connected" | "reconnecting"
+  >("disconnected");
   const [subscribedTracks, setSubscribedTracks] = useState<string[]>([]);
   const managerRef = useRef<MetaTrackManager | null>(null);
 
@@ -74,7 +71,7 @@ export function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn {
         managerRef.current = null;
       }
       setIsConnected(false);
-      setConnectionState('disconnected');
+      setConnectionState("disconnected");
       return;
     }
 
@@ -90,7 +87,7 @@ export function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn {
       if (managerRef.current) {
         const state = managerRef.current.getState();
         setConnectionState(state);
-        setIsConnected(state === 'connected');
+        setIsConnected(state === "connected");
         setSubscribedTracks(managerRef.current.getSubscribedTracks());
       }
     };
@@ -108,28 +105,31 @@ export function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn {
         managerRef.current = null;
       }
       setIsConnected(false);
-      setConnectionState('disconnected');
+      setConnectionState("disconnected");
     };
   }, [enabled, mistBaseUrl, streamName, initialSubscriptions]);
 
   /**
    * Subscribe to a meta track
    */
-  const subscribe = useCallback((trackId: string, callback: (event: MetaTrackEvent) => void): () => void => {
-    if (!managerRef.current) {
-      return () => {};
-    }
+  const subscribe = useCallback(
+    (trackId: string, callback: (event: MetaTrackEvent) => void): (() => void) => {
+      if (!managerRef.current) {
+        return () => {};
+      }
 
-    const unsubscribe = managerRef.current.subscribe(trackId, callback);
-    setSubscribedTracks(managerRef.current.getSubscribedTracks());
+      const unsubscribe = managerRef.current.subscribe(trackId, callback);
+      setSubscribedTracks(managerRef.current.getSubscribedTracks());
 
-    return () => {
-      unsubscribe();
-      if (managerRef.current) {
-        setSubscribedTracks(managerRef.current.getSubscribedTracks());
-      }
-    };
-  }, []);
+      return () => {
+        unsubscribe();
+        if (managerRef.current) {
+          setSubscribedTracks(managerRef.current.getSubscribedTracks());
+        }
+      };
+    },
+    []
+  );
 
   /**
    * Unsubscribe from a meta track

package/src/hooks/usePlaybackQuality.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
-import { QualityMonitor, type PlaybackQuality } from '@livepeer-frameworks/player-core';
-import type { UsePlaybackQualityOptions } from '../types';
+import { useEffect, useState, useRef, useCallback } from "react";
+import { QualityMonitor, type PlaybackQuality } from "@livepeer-frameworks/player-core";
+import type { UsePlaybackQualityOptions } from "../types";
 
 /**
  * Hook to monitor video playback quality