@livepeer-frameworks/player-core 0.1.0 → 0.1.2

package/src/core/SeekingUtils.ts

@@ -11,13 +11,13 @@
  * - Latency tier: Protocol-based classification affecting live detection thresholds
  */
 
-import type { MistStreamInfo, MistTrackInfo } from '../types';
+import type { MistStreamInfo, MistTrackInfo } from "../types";
 
 // ============================================================================
 // Types
 // ============================================================================
 
-export type LatencyTier = 'ultra-low' | 'low' | 'medium' | 'high';
+export type LatencyTier = "ultra-low" | "low" | "medium" | "high";
 
 export interface LiveThresholds {
   /** Seconds behind live edge to exit "LIVE" state (become clickable) */
@@ -66,13 +66,13 @@ export interface CanSeekParams {
  */
 export const LATENCY_TIERS: Record<LatencyTier, LiveThresholds> = {
   // WebRTC/WHEP: sub-second latency
-  'ultra-low': { exitLive: 2, enterLive: 0.5 },
+  "ultra-low": { exitLive: 2, enterLive: 0.5 },
   // MEWS (WebSocket MP4): 2-5s latency
-  'low': { exitLive: 5, enterLive: 1.5 },
+  low: { exitLive: 5, enterLive: 1.5 },
   // HLS/DASH: 10-30s latency (segment-based)
-  'medium': { exitLive: 15, enterLive: 5 },
+  medium: { exitLive: 15, enterLive: 5 },
   // Fallback for unknown protocols
-  'high': { exitLive: 30, enterLive: 10 },
+  high: { exitLive: 30, enterLive: 10 },
 };
 
 /**
@@ -97,30 +97,30 @@ export const DEFAULT_BUFFER_WINDOW_SEC = 60;
  * @returns Latency tier classification
  */
 export function getLatencyTier(sourceType?: string): LatencyTier {
-  if (!sourceType) return 'medium';
+  if (!sourceType) return "medium";
   const t = sourceType.toLowerCase();
 
   // Ultra-low: WebRTC protocols (sub-second latency)
-  if (t === 'whep' || t === 'webrtc' || t.includes('mist/webrtc')) {
-    return 'ultra-low';
+  if (t === "whep" || t === "webrtc" || t.includes("mist/webrtc")) {
+    return "ultra-low";
   }
 
   // Low: WebSocket-based streaming (2-5s latency)
-  if (t.startsWith('ws/') || t.startsWith('wss/')) {
-    return 'low';
+  if (t.startsWith("ws/") || t.startsWith("wss/")) {
+    return "low";
   }
 
   // Medium: HLS/DASH (segment-based, 10-30s latency)
-  if (t.includes('mpegurl') || t.includes('dash')) {
-    return 'medium';
+  if (t.includes("mpegurl") || t.includes("dash")) {
+    return "medium";
   }
 
   // Progressive MP4/WebM - use medium defaults
-  if (t.includes('video/mp4') || t.includes('video/webm')) {
-    return 'medium';
+  if (t.includes("video/mp4") || t.includes("video/webm")) {
+    return "medium";
   }
 
-  return 'medium';
+  return "medium";
 }
 
 /**
@@ -160,7 +160,14 @@ export function supportsPlaybackRate(video: HTMLVideoElement | null): boolean {
  * @returns Seekable range with start and live edge
  */
 export function calculateSeekableRange(params: SeekableRangeParams): SeekableRange {
-  const { isLive, video, mistStreamInfo, currentTime, duration, allowMediaStreamDvr = false } = params;
+  const {
+    isLive,
+    video,
+    mistStreamInfo,
+    currentTime,
+    duration,
+    allowMediaStreamDvr = false,
+  } = params;
 
   // VOD: full duration is seekable
   if (!isLive) {
@@ -183,8 +190,10 @@ export function calculateSeekableRange(params: SeekableRangeParams): SeekableRan
   if ((allowMediaStreamDvr || !isMediaStream) && mistStreamInfo?.meta?.tracks) {
     const tracks = Object.values(mistStreamInfo.meta.tracks) as MistTrackInfo[];
     if (tracks.length > 0) {
-      const firstmsValues = tracks.map(t => t.firstms).filter((v): v is number => v !== undefined);
-      const lastmsValues = tracks.map(t => t.lastms).filter((v): v is number => v !== undefined);
+      const firstmsValues = tracks
+        .map((t) => t.firstms)
+        .filter((v): v is number => v !== undefined);
+      const lastmsValues = tracks.map((t) => t.lastms).filter((v): v is number => v !== undefined);
 
       if (firstmsValues.length > 0 && lastmsValues.length > 0) {
         const firstms = Math.max(...firstmsValues);
@@ -273,11 +282,11 @@ export function calculateLiveThresholds(
   bufferWindowMs?: number
 ): LiveThresholds {
   // Determine tier from source type, or use ultra-low for WebRTC
-  const tier = sourceType ? getLatencyTier(sourceType) : (isWebRTC ? 'ultra-low' : 'medium');
+  const tier = sourceType ? getLatencyTier(sourceType) : isWebRTC ? "ultra-low" : "medium";
   const tierThresholds = LATENCY_TIERS[tier];
 
   // For medium/high tiers, scale thresholds based on buffer_window
-  if ((tier === 'medium' || tier === 'high') && bufferWindowMs && bufferWindowMs > 0) {
+  if ((tier === "medium" || tier === "high") && bufferWindowMs && bufferWindowMs > 0) {
     const bufferWindowSec = bufferWindowMs / 1000;
     // Scale thresholds proportionally to buffer, with reasonable bounds
     return {
@@ -356,7 +365,7 @@ export function isLiveContent(
 
   // MistServer type
   if (mistStreamInfo?.type) {
-    return mistStreamInfo.type === 'live';
+    return mistStreamInfo.type === "live";
   }
 
   // Fallback: non-finite duration indicates live

package/src/core/StreamStateClient.ts

@@ -5,9 +5,9 @@
  * Extracted from useStreamState.ts for use in headless core.
  */
 
-import { TypedEventEmitter } from './EventEmitter';
-import { TimerManager } from './TimerManager';
-import type { StreamState, StreamStatus, MistStreamInfo } from '../types';
+import { TypedEventEmitter } from "./EventEmitter";
+import { TimerManager } from "./TimerManager";
+import type { StreamState, StreamStatus, MistStreamInfo } from "../types";
 
 // ============================================================================
 // Types
@@ -26,7 +26,7 @@ export interface StreamStateClientConfig {
 
 type StreamStateClientResolvedConfig = Omit<
   StreamStateClientConfig,
-  'pollInterval' | 'useWebSocket'
+  "pollInterval" | "useWebSocket"
 > & {
   pollInterval: number;
   useWebSocket: boolean;
@@ -50,9 +50,9 @@ export interface StreamStateClientEvents {
 const DEFAULT_POLL_INTERVAL = 3000;
 
 const initialState: StreamState = {
-  status: 'OFFLINE',
+  status: "OFFLINE",
   isOnline: false,
-  message: 'Connecting...',
+  message: "Connecting...",
   lastUpdate: 0,
 };
 
@@ -66,14 +66,14 @@ const initialState: StreamState = {
 function parseErrorToStatus(error: string): StreamStatus {
   const lowerError = error.toLowerCase();
 
-  if (lowerError.includes('offline')) return 'OFFLINE';
-  if (lowerError.includes('initializing')) return 'INITIALIZING';
-  if (lowerError.includes('booting')) return 'BOOTING';
-  if (lowerError.includes('waiting for data')) return 'WAITING_FOR_DATA';
-  if (lowerError.includes('shutting down')) return 'SHUTTING_DOWN';
-  if (lowerError.includes('invalid')) return 'INVALID';
+  if (lowerError.includes("offline")) return "OFFLINE";
+  if (lowerError.includes("initializing")) return "INITIALIZING";
+  if (lowerError.includes("booting")) return "BOOTING";
+  if (lowerError.includes("waiting for data")) return "WAITING_FOR_DATA";
+  if (lowerError.includes("shutting down")) return "SHUTTING_DOWN";
+  if (lowerError.includes("invalid")) return "INVALID";
 
-  return 'ERROR';
+  return "ERROR";
 }
 
 /**
@@ -81,25 +81,25 @@ function parseErrorToStatus(error: string): StreamStatus {
  */
 function getStatusMessage(status: StreamStatus, percentage?: number): string {
   switch (status) {
-    case 'ONLINE':
-      return 'Stream is online';
-    case 'OFFLINE':
-      return 'Stream is offline';
-    case 'INITIALIZING':
+    case "ONLINE":
+      return "Stream is online";
+    case "OFFLINE":
+      return "Stream is offline";
+    case "INITIALIZING":
       return percentage !== undefined
         ? `Initializing... ${Math.round(percentage * 10) / 10}%`
-        : 'Stream is initializing';
-    case 'BOOTING':
-      return 'Stream is starting up';
-    case 'WAITING_FOR_DATA':
-      return 'Waiting for stream data';
-    case 'SHUTTING_DOWN':
-      return 'Stream is shutting down';
-    case 'INVALID':
-      return 'Stream status is invalid';
-    case 'ERROR':
+        : "Stream is initializing";
+    case "BOOTING":
+      return "Stream is starting up";
+    case "WAITING_FOR_DATA":
+      return "Waiting for stream data";
+    case "SHUTTING_DOWN":
+      return "Stream is shutting down";
+    case "INVALID":
+      return "Stream status is invalid";
+    case "ERROR":
     default:
-      return 'Stream error';
+      return "Stream error";
   }
 }
 
@@ -161,14 +161,14 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
     const { mistBaseUrl, streamName, useWebSocket } = this.config;
 
     if (!mistBaseUrl || !streamName) {
-      console.warn('[StreamStateClient] Missing mistBaseUrl or streamName');
+      console.warn("[StreamStateClient] Missing mistBaseUrl or streamName");
       return;
     }
 
     // Reset state
     this.setState({
       ...initialState,
-      message: 'Connecting...',
+      message: "Connecting...",
       lastUpdate: Date.now(),
     });
 
@@ -176,21 +176,25 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
     const currentConnectionId = ++this.connectionId;
 
     // Debounce connection to prevent rapid reconnects during mount/unmount cycles
-    this.timers.start(() => {
-      // Check if this connection attempt is still valid
-      if (!this.isRunning || this.connectionId !== currentConnectionId) {
-        return;
-      }
-
-      // Always do initial HTTP poll to get full data (including sources)
-      // Then connect WebSocket for real-time updates
-      this.pollHttp().then(() => {
-        // Verify still valid before WebSocket connection
-        if (useWebSocket && this.isRunning && this.connectionId === currentConnectionId) {
-          this.connectWebSocket();
+    this.timers.start(
+      () => {
+        // Check if this connection attempt is still valid
+        if (!this.isRunning || this.connectionId !== currentConnectionId) {
+          return;
         }
-      });
-    }, StreamStateClient.CONNECTION_DEBOUNCE_MS, 'connect');
+
+        // Always do initial HTTP poll to get full data (including sources)
+        // Then connect WebSocket for real-time updates
+        this.pollHttp().then(() => {
+          // Verify still valid before WebSocket connection
+          if (useWebSocket && this.isRunning && this.connectionId === currentConnectionId) {
+            this.connectWebSocket();
+          }
+        });
+      },
+      StreamStateClient.CONNECTION_DEBOUNCE_MS,
+      "connect"
+    );
   }
 
   /**
@@ -287,15 +291,17 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
     try {
       // Convert http(s) to ws(s)
       const wsUrl = mistBaseUrl
-        .replace(/^http:/, 'ws:')
-        .replace(/^https:/, 'wss:')
-        .replace(/\/$/, '');
+        .replace(/^http:/, "ws:")
+        .replace(/^https:/, "wss:")
+        .replace(/\/$/, "");
 
-      const ws = new WebSocket(`${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`);
+      const ws = new WebSocket(
+        `${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`
+      );
       this.ws = ws;
 
       ws.onopen = () => {
-        console.debug('[StreamStateClient] WebSocket connected');
+        console.debug("[StreamStateClient] WebSocket connected");
       };
 
       ws.onmessage = (event) => {
@@ -303,12 +309,12 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
           const data = JSON.parse(event.data) as MistStreamInfo;
           this.processStreamInfo(data);
         } catch (e) {
-          console.warn('[StreamStateClient] Failed to parse WebSocket message:', e);
+          console.warn("[StreamStateClient] Failed to parse WebSocket message:", e);
         }
       };
 
       ws.onerror = () => {
-        console.warn('[StreamStateClient] WebSocket error, falling back to HTTP polling');
+        console.warn("[StreamStateClient] WebSocket error, falling back to HTTP polling");
         ws.close();
       };
 
@@ -320,11 +326,11 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
         // Disable WebSocket and switch to HTTP polling
         // This ensures pollHttp() schedules repeat polls (see line 365 condition)
         this.config.useWebSocket = false;
-        console.debug('[StreamStateClient] WebSocket closed, switching to HTTP polling');
+        console.debug("[StreamStateClient] WebSocket closed, switching to HTTP polling");
         this.pollHttp();
       };
     } catch (error) {
-      console.warn('[StreamStateClient] WebSocket connection failed:', error);
+      console.warn("[StreamStateClient] WebSocket connection failed:", error);
       // Disable WebSocket and switch to HTTP polling
       this.config.useWebSocket = false;
       this.pollHttp();
@@ -337,10 +343,10 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
     const { mistBaseUrl, streamName, pollInterval } = this.config;
 
     try {
-      const url = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
+      const url = `${mistBaseUrl.replace(/\/$/, "")}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
       const response = await fetch(url, {
-        method: 'GET',
-        headers: { 'Accept': 'application/json' },
+        method: "GET",
+        headers: { Accept: "application/json" },
       });
 
       if (!response.ok) {
@@ -360,21 +366,21 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
     } catch (error) {
       if (!this.isRunning) return;
 
-      const errorMessage = error instanceof Error ? error.message : 'Connection failed';
+      const errorMessage = error instanceof Error ? error.message : "Connection failed";
       this.setState({
         ...this.state,
-        status: 'ERROR',
+        status: "ERROR",
         isOnline: false,
         message: errorMessage,
         lastUpdate: Date.now(),
         error: errorMessage,
       });
-      this.emit('error', { error: errorMessage });
+      this.emit("error", { error: errorMessage });
     }
 
     // Schedule next poll
     if (this.isRunning && !this.config.useWebSocket) {
-      this.timers.start(() => this.pollHttp(), pollInterval, 'poll');
+      this.timers.start(() => this.pollHttp(), pollInterval, "poll");
     }
   }
 
@@ -402,8 +408,8 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
       // Merge new data with existing streamInfo to preserve source/tracks from initial fetch
       // WebSocket updates may not include source array
       const mergedStreamInfo: MistStreamInfo = {
-        ...this.state.streamInfo,  // Keep existing source/meta if present
-        ...data,                   // Override with new data
+        ...this.state.streamInfo, // Keep existing source/meta if present
+        ...data, // Override with new data
         // Explicitly preserve source if not in new data
         source: data.source || this.state.streamInfo?.source,
         // Merge meta to preserve tracks
@@ -416,9 +422,9 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
       };
 
       newState = {
-        status: 'ONLINE',
+        status: "ONLINE",
         isOnline: true,
-        message: 'Stream is online',
+        message: "Stream is online",
         lastUpdate: Date.now(),
         streamInfo: mergedStreamInfo,
       };
@@ -428,9 +434,9 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
 
     // Emit online/offline events on state transitions
     if (newState.isOnline && !this.wasOnline) {
-      this.emit('online', undefined as never);
+      this.emit("online", undefined as never);
     } else if (!newState.isOnline && this.wasOnline) {
-      this.emit('offline', undefined as never);
+      this.emit("offline", undefined as never);
     }
     this.wasOnline = newState.isOnline;
   }
@@ -449,7 +455,7 @@ export class StreamStateClient extends TypedEventEmitter<StreamStateClientEvents
       prevState.lastUpdate !== state.lastUpdate;
 
     if (hasChanged) {
-      this.emit('stateChange', { state });
+      this.emit("stateChange", { state });
     }
   }
 }

package/src/core/SubtitleManager.ts

@@ -59,12 +59,12 @@ export class SubtitleManager {
     const onLoadedData = () => this.correctSubtitleSync();
     const onSeeked = () => this.correctSubtitleSync();
 
-    video.addEventListener('loadeddata', onLoadedData);
-    video.addEventListener('seeked', onSeeked);
+    video.addEventListener("loadeddata", onLoadedData);
+    video.addEventListener("seeked", onSeeked);
 
     this.listeners = [
-      () => video.removeEventListener('loadeddata', onLoadedData),
-      () => video.removeEventListener('seeked', onSeeked),
+      () => video.removeEventListener("loadeddata", onLoadedData),
+      () => video.removeEventListener("seeked", onSeeked),
     ];
   }
 
@@ -72,7 +72,7 @@ export class SubtitleManager {
    * Detach from video element
    */
   detach(): void {
-    this.listeners.forEach(fn => fn());
+    this.listeners.forEach((fn) => fn());
     this.listeners = [];
     this.removeAllTracks();
     this.video = null;
@@ -92,7 +92,7 @@ export class SubtitleManager {
    */
   getTrackElements(): HTMLTrackElement[] {
     if (!this.video) return [];
-    return Array.from(this.video.querySelectorAll('track'));
+    return Array.from(this.video.querySelectorAll("track"));
   }
 
   /**
@@ -101,7 +101,7 @@ export class SubtitleManager {
    */
   setSubtitle(track: SubtitleTrackInfo | null): void {
     if (!this.video) {
-      this.log('Cannot set subtitle: no video element attached');
+      this.log("Cannot set subtitle: no video element attached");
       return;
     }
 
@@ -110,20 +110,20 @@ export class SubtitleManager {
 
     if (!track) {
       this.currentTrackId = null;
-      this.log('Subtitles disabled');
+      this.log("Subtitles disabled");
       return;
     }
 
     // Create new track element
-    const trackElement = document.createElement('track');
-    trackElement.kind = 'subtitles';
+    const trackElement = document.createElement("track");
+    trackElement.kind = "subtitles";
     trackElement.label = track.label;
     trackElement.srclang = track.lang;
     trackElement.src = this.buildTrackUrl(track.src);
     trackElement.default = true;
 
     // Set up load handler for sync correction
-    trackElement.addEventListener('load', () => {
+    trackElement.addEventListener("load", () => {
       this.correctSubtitleSync();
     });
 
@@ -133,7 +133,7 @@ export class SubtitleManager {
     // Enable the track
     const textTrack = this.video.textTracks[this.video.textTracks.length - 1];
     if (textTrack) {
-      textTrack.mode = 'showing';
+      textTrack.mode = "showing";
     }
 
     this.log(`Subtitle track set: ${track.label} (${track.lang})`);
@@ -146,14 +146,14 @@ export class SubtitleManager {
     let url = src;
 
     // If relative URL and base URL provided, construct full URL
-    if (!url.startsWith('http') && this.config.mistBaseUrl) {
-      const base = this.config.mistBaseUrl.replace(/\/$/, '');
-      url = url.startsWith('/') ? `${base}${url}` : `${base}/${url}`;
+    if (!url.startsWith("http") && this.config.mistBaseUrl) {
+      const base = this.config.mistBaseUrl.replace(/\/$/, "");
+      url = url.startsWith("/") ? `${base}${url}` : `${base}/${url}`;
     }
 
     // Append URL params if configured
     if (this.config.urlAppend) {
-      const separator = url.includes('?') ? '&' : '?';
+      const separator = url.includes("?") ? "&" : "?";
       url = `${url}${separator}${this.config.urlAppend}`;
     }
 
@@ -181,8 +181,8 @@ export class SubtitleManager {
   removeAllTracks(): void {
     if (!this.video) return;
 
-    const tracks = this.video.querySelectorAll('track');
-    tracks.forEach(track => track.remove());
+    const tracks = this.video.querySelectorAll("track");
+    tracks.forEach((track) => track.remove());
   }
 
   /**
@@ -258,7 +258,9 @@ export class SubtitleManager {
    * Parse subtitle tracks from MistServer stream info
    */
   static parseTracksFromStreamInfo(
-    streamInfo: { meta?: { tracks?: Record<string, { type: string; codec: string; lang?: string }> } },
+    streamInfo: {
+      meta?: { tracks?: Record<string, { type: string; codec: string; lang?: string }> };
+    },
     baseUrl: string,
     streamName: string
   ): SubtitleTrackInfo[] {
@@ -267,9 +269,9 @@ export class SubtitleManager {
     if (!streamInfo.meta?.tracks) return tracks;
 
     for (const [trackId, trackData] of Object.entries(streamInfo.meta.tracks)) {
-      if (trackData.type === 'meta' && trackData.codec === 'subtitle') {
-        const lang = trackData.lang || 'und';
-        const label = lang === 'und' ? `Subtitles ${trackId}` : lang.toUpperCase();
+      if (trackData.type === "meta" && trackData.codec === "subtitle") {
+        const lang = trackData.lang || "und";
+        const label = lang === "und" ? `Subtitles ${trackId}` : lang.toUpperCase();
         tracks.push(SubtitleManager.createTrackInfo(trackId, label, lang, baseUrl, streamName));
       }
     }