@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/src/components/StreamStateOverlay.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { StreamStatus } from '../types';
+import React from "react";
+import type { StreamStatus } from "../types";
 
 export interface StreamStateOverlayProps {
   /** Current stream status */
@@ -23,43 +23,93 @@ function StatusIcon({ status }: { status: StreamStatus }) {
   const iconClass = "w-5 h-5";
 
   switch (status) {
-    case 'ONLINE':
+    case "ONLINE":
       return (
-        <svg className={`${iconClass} fw-status-online`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg
+          className={`${iconClass} fw-status-online`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
         </svg>
       );
 
-    case 'OFFLINE':
+    case "OFFLINE":
       return (
-        <svg className={`${iconClass} fw-status-offline`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
+        <svg
+          className={`${iconClass} fw-status-offline`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+          />
         </svg>
       );
 
-    case 'INITIALIZING':
-    case 'BOOTING':
-    case 'WAITING_FOR_DATA':
+    case "INITIALIZING":
+    case "BOOTING":
+    case "WAITING_FOR_DATA":
       return (
-        <svg className={`${iconClass} fw-status-warning animate-spin`} fill="none" viewBox="0 0 24 24">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        <svg
+          className={`${iconClass} fw-status-warning animate-spin`}
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
         </svg>
       );
 
-    case 'SHUTTING_DOWN':
+    case "SHUTTING_DOWN":
       return (
-        <svg className={`${iconClass} fw-status-warning`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        <svg
+          className={`${iconClass} fw-status-warning`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M13 10V3L4 14h7v7l9-11h-7z"
+          />
         </svg>
       );
 
-    case 'ERROR':
-    case 'INVALID':
+    case "ERROR":
+    case "INVALID":
     default:
       return (
-        <svg className={`${iconClass} fw-status-offline`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        <svg
+          className={`${iconClass} fw-status-offline`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
         </svg>
       );
   }
@@ -70,15 +120,24 @@ function StatusIcon({ status }: { status: StreamStatus }) {
  */
 function getStatusLabel(status: StreamStatus): string {
   switch (status) {
-    case 'ONLINE': return 'ONLINE';
-    case 'OFFLINE': return 'OFFLINE';
-    case 'INITIALIZING': return 'INITIALIZING';
-    case 'BOOTING': return 'STARTING';
-    case 'WAITING_FOR_DATA': return 'WAITING';
-    case 'SHUTTING_DOWN': return 'ENDING';
-    case 'ERROR': return 'ERROR';
-    case 'INVALID': return 'INVALID';
-    default: return 'STATUS';
+    case "ONLINE":
+      return "ONLINE";
+    case "OFFLINE":
+      return "OFFLINE";
+    case "INITIALIZING":
+      return "INITIALIZING";
+    case "BOOTING":
+      return "STARTING";
+    case "WAITING_FOR_DATA":
+      return "WAITING";
+    case "SHUTTING_DOWN":
+      return "ENDING";
+    case "ERROR":
+      return "ERROR";
+    case "INVALID":
+      return "INVALID";
+    default:
+      return "STATUS";
   }
 }
 
@@ -94,26 +153,26 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
   percentage,
   onRetry,
   visible = true,
-  className = '',
+  className = "",
 }) => {
-  if (!visible || status === 'ONLINE') {
+  if (!visible || status === "ONLINE") {
     return null;
   }
 
-  const showRetry = status === 'ERROR' || status === 'INVALID' || status === 'OFFLINE';
-  const showProgress = status === 'INITIALIZING' && percentage !== undefined;
+  const showRetry = status === "ERROR" || status === "INVALID" || status === "OFFLINE";
+  const showProgress = status === "INITIALIZING" && percentage !== undefined;
 
   return (
     <div
       className={`absolute inset-0 z-20 flex items-center justify-center ${className}`}
-      style={{ backgroundColor: 'hsl(var(--tn-bg-dark) / 0.8)', backdropFilter: 'blur(4px)' }}
+      style={{ backgroundColor: "hsl(var(--tn-bg-dark) / 0.8)", backdropFilter: "blur(4px)" }}
       role="status"
       aria-live="polite"
     >
       {/* Slab container - no rounded corners, seam borders */}
       <div
         className="fw-slab w-[280px] max-w-[90%]"
-        style={{ backgroundColor: 'hsl(var(--tn-bg) / 0.95)' }}
+        style={{ backgroundColor: "hsl(var(--tn-bg) / 0.95)" }}
       >
         {/* Slab header - status label with icon */}
         <div className="fw-slab-header flex items-center gap-2">
@@ -123,7 +182,7 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
 
         {/* Slab body - message and progress */}
         <div className="fw-slab-body">
-          <p className="text-sm" style={{ color: 'hsl(var(--tn-fg))' }}>
+          <p className="text-sm" style={{ color: "hsl(var(--tn-fg))" }}>
             {message}
           </p>
 
@@ -132,33 +191,30 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
               {/* Progress bar - no rounded corners */}
               <div
                 className="h-1.5 w-full overflow-hidden"
-                style={{ backgroundColor: 'hsl(var(--tn-bg-visual))' }}
+                style={{ backgroundColor: "hsl(var(--tn-bg-visual))" }}
               >
                 <div
                   className="h-full transition-all duration-300"
                   style={{
                     width: `${Math.min(100, percentage)}%`,
-                    backgroundColor: 'hsl(var(--tn-yellow))',
+                    backgroundColor: "hsl(var(--tn-yellow))",
                   }}
                 />
               </div>
-              <p
-                className="mt-1.5 text-xs font-mono"
-                style={{ color: 'hsl(var(--tn-fg-dark))' }}
-              >
+              <p className="mt-1.5 text-xs font-mono" style={{ color: "hsl(var(--tn-fg-dark))" }}>
                 {Math.round(percentage)}%
               </p>
             </div>
           )}
 
-          {status === 'OFFLINE' && (
-            <p className="mt-2 text-xs" style={{ color: 'hsl(var(--tn-fg-dark))' }}>
+          {status === "OFFLINE" && (
+            <p className="mt-2 text-xs" style={{ color: "hsl(var(--tn-fg-dark))" }}>
               The stream will start when the broadcaster goes live
             </p>
           )}
 
-          {(status === 'BOOTING' || status === 'WAITING_FOR_DATA') && (
-            <p className="mt-2 text-xs" style={{ color: 'hsl(var(--tn-fg-dark))' }}>
+          {(status === "BOOTING" || status === "WAITING_FOR_DATA") && (
+            <p className="mt-2 text-xs" style={{ color: "hsl(var(--tn-fg-dark))" }}>
               Please wait while the stream prepares...
             </p>
           )}
@@ -167,11 +223,11 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
           {!showRetry && (
             <div
               className="mt-3 flex items-center gap-2 text-xs"
-              style={{ color: 'hsl(var(--tn-fg-dark))' }}
+              style={{ color: "hsl(var(--tn-fg-dark))" }}
             >
               <span
                 className="h-1.5 w-1.5 animate-pulse"
-                style={{ backgroundColor: 'hsl(var(--tn-cyan))' }}
+                style={{ backgroundColor: "hsl(var(--tn-cyan))" }}
               />
               <span>Checking stream status...</span>
             </div>
@@ -185,7 +241,7 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
               type="button"
               onClick={onRetry}
               className="fw-btn-flush py-2.5 text-xs font-medium uppercase tracking-wide"
-              style={{ color: 'hsl(var(--tn-blue))' }}
+              style={{ color: "hsl(var(--tn-blue))" }}
               aria-label="Retry connection"
             >
               Retry Connection

package/src/components/SubtitleRenderer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useRef } from 'react';
-import type { SubtitleCue, MetaTrackEvent } from '../types';
+import React, { useEffect, useState, useRef } from "react";
+import type { SubtitleCue, MetaTrackEvent } from "../types";
 
 export interface SubtitleRendererProps {
   /** Current video playback time in seconds */
@@ -40,48 +40,48 @@ export interface SubtitleStyle {
 }
 
 const DEFAULT_STYLE: SubtitleStyle = {
-  fontSize: '1.5rem',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: 'white',
-  backgroundColor: 'rgba(0, 0, 0, 0.75)',
-  textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
-  bottom: '5%',
-  maxWidth: '90%',
-  padding: '0.5em 1em',
-  borderRadius: '4px',
+  fontSize: "1.5rem",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  color: "white",
+  backgroundColor: "rgba(0, 0, 0, 0.75)",
+  textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)",
+  bottom: "5%",
+  maxWidth: "90%",
+  padding: "0.5em 1em",
+  borderRadius: "4px",
 };
 
 /**
  * Parse subtitle cue from meta track event data
  */
 function parseSubtitleCue(data: unknown): SubtitleCue | null {
-  if (typeof data !== 'object' || data === null) return null;
+  if (typeof data !== "object" || data === null) return null;
 
   const obj = data as Record<string, unknown>;
 
   // Extract text
-  const text = typeof obj.text === 'string' ? obj.text : String(obj.text ?? '');
+  const text = typeof obj.text === "string" ? obj.text : String(obj.text ?? "");
   if (!text) return null;
 
   // Extract timing
   let startTime = 0;
   let endTime = Infinity;
 
-  if ('startTime' in obj) startTime = Number(obj.startTime);
-  else if ('start' in obj) startTime = Number(obj.start);
+  if ("startTime" in obj) startTime = Number(obj.startTime);
+  else if ("start" in obj) startTime = Number(obj.start);
 
-  if ('endTime' in obj) endTime = Number(obj.endTime);
-  else if ('end' in obj) endTime = Number(obj.end);
+  if ("endTime" in obj) endTime = Number(obj.endTime);
+  else if ("end" in obj) endTime = Number(obj.end);
 
   // Extract ID
-  const id = typeof obj.id === 'string' ? obj.id : String(Date.now());
+  const id = typeof obj.id === "string" ? obj.id : String(Date.now());
 
   return {
     id,
     text,
     startTime,
     endTime,
-    lang: typeof obj.lang === 'string' ? obj.lang : undefined,
+    lang: typeof obj.lang === "string" ? obj.lang : undefined,
   };
 }
 
@@ -121,10 +121,10 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   subscribeToMetaTrack,
   metaTrackId,
   style: customStyle,
-  className = '',
+  className = "",
 }) => {
   const [liveCues, setLiveCues] = useState<SubtitleCue[]>([]);
-  const [displayedText, setDisplayedText] = useState<string>('');
+  const [displayedText, setDisplayedText] = useState<string>("");
   const lastCueIdRef = useRef<string | null>(null);
 
   const style = { ...DEFAULT_STYLE, ...customStyle };
@@ -139,12 +139,12 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
     }
 
     const handleMetaEvent = (event: MetaTrackEvent) => {
-      if (event.type === 'subtitle') {
+      if (event.type === "subtitle") {
         const cue = parseSubtitleCue(event.data);
         if (cue) {
-          setLiveCues(prev => {
+          setLiveCues((prev) => {
             // Deduplicate by ID
-            const existing = prev.find(c => c.id === cue.id);
+            const existing = prev.find((c) => c.id === cue.id);
             if (existing) return prev;
 
             // Keep last 50 cues max
@@ -165,13 +165,13 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   // Find active cue based on current time
   useEffect(() => {
     if (!enabled) {
-      setDisplayedText('');
+      setDisplayedText("");
       return;
     }
 
     // Find cue that matches current time
     const currentTimeMs = currentTime * 1000; // Convert to ms if needed
-    const activeCue = allCues.find(cue => {
+    const activeCue = allCues.find((cue) => {
       const start = cue.startTime;
       const end = cue.endTime;
       return currentTimeMs >= start && currentTimeMs < end;
@@ -181,7 +181,7 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
       setDisplayedText(activeCue.text);
       lastCueIdRef.current = activeCue.id;
     } else {
-      setDisplayedText('');
+      setDisplayedText("");
       lastCueIdRef.current = null;
     }
   }, [enabled, currentTime, allCues]);
@@ -190,9 +190,9 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   useEffect(() => {
     const currentTimeMs = currentTime * 1000;
 
-    setLiveCues(prev => {
+    setLiveCues((prev) => {
       // Remove cues that are more than 30 seconds old
-      return prev.filter(cue => {
+      return prev.filter((cue) => {
         const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
         return endTime >= currentTimeMs - 30000;
       });

package/src/components/ThumbnailOverlay.tsx

@@ -9,7 +9,7 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
   message,
   showUnmuteMessage = false,
   style,
-  className
+  className,
 }) => {
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     e.stopPropagation();
@@ -29,8 +29,9 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
       }}
       style={style}
       className={cn(
-        "fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      , className)}
+        "fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      )}
     >
       {thumbnailUrl && (
         <div
@@ -73,9 +74,7 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
               </svg>
             </Button>
             <div className="w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur">
-              <p className="text-base font-semibold text-primary">
-                {message ?? "Click to play"}
-              </p>
+              <p className="text-base font-semibold text-primary">{message ?? "Click to play"}</p>
               <p className="mt-1 text-xs text-white/70">
                 {message ? "Start streaming instantly" : "Jump into the live feed"}
               </p>

package/src/components/TitleOverlay.tsx

@@ -31,15 +31,9 @@ const TitleOverlay: React.FC<TitleOverlayProps> = ({
         className
       )}
     >
-      {title && (
-        <h2 className="text-white text-sm font-medium truncate max-w-[80%]">
-          {title}
-        </h2>
-      )}
+      {title && <h2 className="text-white text-sm font-medium truncate max-w-[80%]">{title}</h2>}
       {description && (
-        <p className="text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]">
-          {description}
-        </p>
+        <p className="text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]">{description}</p>
       )}
     </div>
   );

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