@livepeer-frameworks/player-core 0.1.0 → 0.1.2

package/dist/player.css

@@ -16,25 +16,25 @@
  */
 .fw-player-surface {
   /* Tokyo Night color palette */
-  --tn-bg-dark: 235 21% 11%;      /* #1a1b26 - Darkest (slab backgrounds) */
-  --tn-bg: 233 23% 17%;            /* #24283b - Main background */
-  --tn-bg-highlight: 233 23% 21%;  /* #292e42 - Elevated surfaces */
-  --tn-bg-visual: 232 27% 25%;     /* #33395e - Selection/active states */
+  --tn-bg-dark: 235 21% 11%; /* #1a1b26 - Darkest (slab backgrounds) */
+  --tn-bg: 233 23% 17%; /* #24283b - Main background */
+  --tn-bg-highlight: 233 23% 21%; /* #292e42 - Elevated surfaces */
+  --tn-bg-visual: 232 27% 25%; /* #33395e - Selection/active states */
 
   /* Text hierarchy */
-  --tn-fg: 223 27% 76%;            /* #a9b1d6 - Primary text */
-  --tn-fg-bright: 220 13% 91%;     /* #e2e4ea - Bright/highlighted text */
-  --tn-fg-dark: 224 16% 53%;       /* #787c99 - Secondary text (muted) */
-  --tn-fg-gutter: 228 15% 45%;     /* #5a607f - Borders, seams */
+  --tn-fg: 223 27% 76%; /* #a9b1d6 - Primary text */
+  --tn-fg-bright: 220 13% 91%; /* #e2e4ea - Bright/highlighted text */
+  --tn-fg-dark: 224 16% 53%; /* #787c99 - Secondary text (muted) */
+  --tn-fg-gutter: 228 15% 45%; /* #5a607f - Borders, seams */
 
   /* Accent colors (semantic) */
-  --tn-blue: 218 79% 73%;          /* #7aa2f7 - Primary actions */
-  --tn-green: 95 53% 55%;          /* #9ece6a - Success */
-  --tn-red: 348 74% 64%;           /* #f7768e - Destructive, live */
-  --tn-yellow: 35 79% 64%;         /* #e0af68 - Warnings */
-  --tn-purple: 267 82% 77%;        /* #bb9af7 - Secondary accent */
-  --tn-cyan: 178 64% 63%;          /* #7dcfff - Info */
-  --tn-teal: 162 66% 62%;          /* #73daca - Terminal green */
+  --tn-blue: 218 79% 73%; /* #7aa2f7 - Primary actions */
+  --tn-green: 95 53% 55%; /* #9ece6a - Success */
+  --tn-red: 348 74% 64%; /* #f7768e - Destructive, live */
+  --tn-yellow: 35 79% 64%; /* #e0af68 - Warnings */
+  --tn-purple: 267 82% 77%; /* #bb9af7 - Secondary accent */
+  --tn-cyan: 178 64% 63%; /* #7dcfff - Info */
+  --tn-teal: 162 66% 62%; /* #73daca - Terminal green */
 
   /* Player-internal variables (not shared with host) */
   --fw-background: var(--tn-bg);
@@ -74,7 +74,8 @@
      ANIMATIONS
      ===================================================== */
   @keyframes float {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0px) scale(1);
     }
     50% {
@@ -161,6 +162,7 @@
     background: var(--fw-controls-bg);
     border-top: 1px solid var(--fw-seam);
     backdrop-filter: blur(8px);
+    pointer-events: auto;
   }
 
   /* Control group - seamed sections within bar */
@@ -183,7 +185,9 @@
     border-radius: 0;
     background: transparent;
     color: hsl(var(--tn-fg));
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
     cursor: pointer;
     border: none;
   }
@@ -201,10 +205,18 @@
   }
 
   /* Status indicators */
-  .fw-status-online { color: hsl(var(--tn-green)); }
-  .fw-status-offline { color: hsl(var(--tn-red)); }
-  .fw-status-warning { color: hsl(var(--tn-yellow)); }
-  .fw-status-info { color: hsl(var(--tn-cyan)); }
+  .fw-status-online {
+    color: hsl(var(--tn-green));
+  }
+  .fw-status-offline {
+    color: hsl(var(--tn-red));
+  }
+  .fw-status-warning {
+    color: hsl(var(--tn-yellow));
+  }
+  .fw-status-info {
+    color: hsl(var(--tn-cyan));
+  }
 
   /* =====================================================
      PLAYER CONTAINER STYLES (Slab-based)
@@ -215,7 +227,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    border-radius: 0;  /* Slabs don't have rounded corners */
+    border-radius: 0; /* Slabs don't have rounded corners */
     background-color: hsl(var(--tn-bg-dark));
     border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
   }
@@ -317,7 +329,9 @@
     overflow-y: auto;
     background: hsl(var(--tn-bg-dark));
     border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
     border-radius: 0.25rem;
     z-index: 50;
   }
@@ -358,7 +372,9 @@
     color: hsl(var(--tn-fg));
     border: none;
     cursor: pointer;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-settings-btn:hover {
@@ -413,7 +429,9 @@
     background: hsl(var(--tn-bg-dark));
     padding: 0;
     color: hsl(var(--tn-fg));
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
   }
 
   .fw-context-menu-item {
@@ -426,7 +444,9 @@
     font-size: 0.875rem;
     outline: none;
     color: hsl(var(--tn-fg));
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-context-menu-item:hover,
@@ -467,7 +487,9 @@
     font-size: 0.875rem;
     outline: none;
     color: hsl(var(--tn-fg));
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-context-menu-checkbox:hover,
@@ -496,7 +518,9 @@
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
     border: none;
     cursor: pointer;
   }
@@ -517,26 +541,27 @@
     color: white;
   }
 
-
   /* --- Volume Control --- */
   .fw-volume-group {
     display: flex;
     align-items: center;
-    border-radius: 0.25rem;
-    transition: background-color 0.2s, width 0.2s;
+    border-radius: 0;
+    transition:
+      background-color 0.2s,
+      width 0.2s;
     cursor: pointer;
   }
 
   .fw-volume-group--expanded {
-    background: rgb(255 255 255 / 0.1);
+    background: hsl(var(--tn-bg-visual) / 0.5);
   }
 
   .fw-volume-group:hover {
-    background: rgb(255 255 255 / 0.05);
+    background: hsl(var(--tn-bg-visual) / 0.5);
   }
 
   .fw-volume-group--expanded:hover {
-    background: rgb(255 255 255 / 0.1);
+    background: hsl(var(--tn-bg-visual) / 0.5);
   }
 
   .fw-volume-group--disabled {
@@ -565,7 +590,9 @@
     display: flex;
     align-items: center;
     overflow: hidden;
-    transition: width 0.2s ease-out, opacity 0.2s ease-out;
+    transition:
+      width 0.2s ease-out,
+      opacity 0.2s ease-out;
   }
 
   .fw-volume-slider-wrapper--collapsed {
@@ -579,6 +606,108 @@
     opacity: 1;
   }
 
+  /* --- Slider Component (shared by React/Svelte) --- */
+  .fw-slider {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 1.25rem;
+    touch-action: none;
+    user-select: none;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .fw-slider--vertical {
+    flex-direction: column;
+    width: 1.25rem;
+    height: 100%;
+  }
+
+  .fw-slider-track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 4px;
+    border-radius: 9999px;
+    background: hsl(var(--tn-fg-gutter) / 0.4);
+    overflow: hidden;
+    transition: height 0.15s ease;
+  }
+
+  .fw-slider:hover .fw-slider-track {
+    height: 6px;
+  }
+
+  .fw-slider--vertical .fw-slider-track {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    right: auto;
+    width: 4px;
+    height: auto;
+    transform: translateX(-50%);
+  }
+
+  .fw-slider--vertical:hover .fw-slider-track {
+    width: 6px;
+    height: auto;
+  }
+
+  .fw-slider-range {
+    position: absolute;
+    height: 100%;
+    border-radius: 9999px;
+    background: hsl(var(--tn-fg));
+  }
+
+  .fw-slider-range--accent {
+    background: hsl(var(--tn-cyan));
+  }
+
+  .fw-slider--vertical .fw-slider-range {
+    width: 100%;
+    height: auto;
+    bottom: 0;
+  }
+
+  .fw-slider-thumb {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: hsl(var(--tn-fg));
+    border: none;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
+    cursor: pointer;
+    transition:
+      width 0.15s ease,
+      height 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .fw-slider:hover .fw-slider-thumb {
+    width: 14px;
+    height: 14px;
+  }
+
+  .fw-slider-thumb:focus {
+    outline: none;
+  }
+
+  .fw-slider-thumb:focus-visible {
+    box-shadow: 0 0 0 2px hsl(var(--tn-fg) / 0.5);
+  }
+
+  .fw-slider-thumb--accent {
+    background: hsl(var(--tn-cyan));
+  }
+
+  .fw-slider-thumb[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   /* --- Time Display --- */
   .fw-time-display {
     font-family: ui-monospace, monospace;
@@ -676,7 +805,9 @@
     background: hsl(var(--tn-blue));
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     transform: translate(-50%, -50%);
-    transition: opacity 0.15s ease, transform 0.15s ease;
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
     opacity: 0;
     pointer-events: none;
   }
@@ -949,7 +1080,9 @@
     border: none;
     color: hsl(var(--tn-fg-dark));
     cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
   }
 
   .fw-error-close:hover {
@@ -980,7 +1113,9 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
   }
 
   .fw-error-btn:hover {
@@ -1076,7 +1211,9 @@
     border-right: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
     color: hsl(var(--tn-fg-dark));
     cursor: pointer;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-dev-tab:hover {
@@ -1183,7 +1320,9 @@
     border: none;
     color: hsl(var(--tn-fg-dark));
     cursor: pointer;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-dev-mode-btn:hover {
@@ -1211,7 +1350,9 @@
     color: hsl(var(--tn-fg));
     font-size: 0.75rem;
     cursor: pointer;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
   }
 
   .fw-dev-action-btn:last-child {
@@ -1378,7 +1519,9 @@
     z-index: 50;
     background: hsl(var(--tn-bg-dark));
     border: 1px solid hsl(var(--tn-fg-gutter));
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
     padding: 0.5rem;
     font-size: 10px;
     white-space: nowrap;

package/dist/types/core/ABRController.d.ts

@@ -1,11 +1,11 @@
-import type { ABRMode, ABROptions, PlaybackQuality, QualityLevel } from '../types';
+import type { ABRMode, ABROptions, PlaybackQuality, QualityLevel } from "../types";
 export interface ABRControllerConfig {
     /** ABR options */
     options?: Partial<ABROptions>;
     /** Callback to get available qualities */
     getQualities: () => QualityLevel[];
     /** Callback to select a quality */
-    selectQuality: (id: string | 'auto') => void;
+    selectQuality: (id: string | "auto") => void;
     /** Callback to get current quality */
     getCurrentQuality?: () => QualityLevel | null;
     /** Callback to get bandwidth estimate (bits per second) - typically from player stats */
@@ -13,7 +13,7 @@ export interface ABRControllerConfig {
     /** Debug logging */
     debug?: boolean;
 }
-export type ABRDecision = 'upgrade' | 'downgrade' | 'maintain' | 'none';
+export type ABRDecision = "upgrade" | "downgrade" | "maintain" | "none";
 /**
  * ABRController - Adaptive Bitrate Controller
  *
@@ -138,7 +138,7 @@ export declare class ABRController {
     /**
      * Manually set quality (switches to manual mode temporarily)
      */
-    setQuality(id: string | 'auto'): void;
+    setQuality(id: string | "auto"): void;
     /**
      * Get current ABR mode
      */

package/dist/types/core/CodecUtils.d.ts

@@ -45,7 +45,7 @@ export declare function isCodecSupported(codecString: string, containerType?: st
  * @param type - Track type to filter ('video' or 'audio')
  * @returns Best supported track or null
  */
-export declare function getBestSupportedTrack(tracks: TrackInfo[], type: 'video' | 'audio'): TrackInfo | null;
+export declare function getBestSupportedTrack(tracks: TrackInfo[], type: "video" | "audio"): TrackInfo | null;
 declare const _default: {
     translateCodec: typeof translateCodec;
     isCodecSupported: typeof isCodecSupported;

package/dist/types/core/ErrorClassifier.d.ts

@@ -0,0 +1,77 @@
+/**
+ * ErrorClassifier - Centralized error classification and recovery orchestration
+ *
+ * Implements a 4-tier error handling system:
+ * - Tier 1 (TRANSIENT): Silent retry with exponential backoff
+ * - Tier 2 (RECOVERABLE): Protocol/player swap with toast notification
+ * - Tier 3 (DEGRADED): Quality drop with informational toast
+ * - Tier 4 (FATAL): Blocking error modal
+ */
+import { ErrorCode, type ClassifiedError, type ErrorHandlingEvents } from "./PlayerInterface";
+type EventListener<K extends keyof ErrorHandlingEvents> = (data: ErrorHandlingEvents[K]) => void;
+export type RecoveryAction = {
+    type: "retry";
+    delayMs: number;
+} | {
+    type: "swap";
+    reason: string;
+} | {
+    type: "toast";
+    message: string;
+} | {
+    type: "fatal";
+    error: ClassifiedError;
+};
+export interface ErrorClassifierOptions {
+    /** Number of alternative player/protocol combos available */
+    alternativesCount?: number;
+    /** Enable debug logging */
+    debug?: boolean;
+}
+/**
+ * Centralized error classifier that tracks retry state and determines recovery actions.
+ */
+export declare class ErrorClassifier {
+    private retryCounts;
+    private lastErrorTime;
+    private alternativesRemaining;
+    private listeners;
+    private debug;
+    private lastQualityToastTime;
+    private static readonly QUALITY_TOAST_DEBOUNCE_MS;
+    constructor(options?: ErrorClassifierOptions);
+    /**
+     * Update the count of remaining alternatives (called after a swap attempt)
+     */
+    setAlternativesRemaining(count: number): void;
+    /**
+     * Reset retry counts (call when playback successfully resumes)
+     */
+    reset(): void;
+    /**
+     * Classify a raw error and determine the appropriate recovery action.
+     *
+     * @param code - Error code identifying the error type
+     * @param originalError - Original error object or message
+     * @returns The recovery action to take
+     */
+    classify(code: ErrorCode, originalError?: Error | string): RecoveryAction;
+    classifyWithDetails(code: ErrorCode, message: string, details?: ClassifiedError["details"], originalError?: Error | string): RecoveryAction;
+    /**
+     * Notify classifier that a protocol swap occurred (for event emission)
+     */
+    notifyProtocolSwap(fromPlayer: string, toPlayer: string, fromProtocol: string, toProtocol: string, reason: string): void;
+    /**
+     * Calculate exponential backoff delay with jitter
+     */
+    private calculateBackoff;
+    /**
+     * Map common error patterns to error codes
+     */
+    static mapErrorToCode(error: Error | string): ErrorCode;
+    on<K extends keyof ErrorHandlingEvents>(event: K, listener: EventListener<K>): void;
+    off<K extends keyof ErrorHandlingEvents>(event: K, listener: EventListener<K>): void;
+    private emit;
+    private log;
+}
+export {};

package/dist/types/core/GatewayClient.d.ts

@@ -4,9 +4,9 @@
  * Framework-agnostic client for resolving viewer endpoints from the Gateway GraphQL API.
  * Extracted from useViewerEndpoints.ts for use in headless core.
  */
-import { TypedEventEmitter } from './EventEmitter';
-import type { ContentEndpoints, ContentType } from '../types';
-export type GatewayStatus = 'idle' | 'loading' | 'ready' | 'error';
+import { TypedEventEmitter } from "./EventEmitter";
+import type { ContentEndpoints, ContentType } from "../types";
+export type GatewayStatus = "idle" | "loading" | "ready" | "error";
 export interface GatewayClientConfig {
     /** Gateway GraphQL endpoint URL */
     gatewayUrl: string;
@@ -32,7 +32,7 @@ export interface GatewayClientEvents {
         endpoints: ContentEndpoints;
     };
 }
-type CircuitBreakerState = 'closed' | 'open' | 'half-open';
+type CircuitBreakerState = "closed" | "open" | "half-open";
 /**
  * Client for resolving viewer endpoints from the Gateway GraphQL API.
  *

package/dist/types/core/MetaTrackManager.d.ts

@@ -1,4 +1,4 @@
-import type { MetaTrackEvent } from '../types';
+import type { MetaTrackEvent } from "../types";
 export interface MetaTrackSubscription {
     trackId: string;
     callback: (event: MetaTrackEvent) => void;
@@ -19,7 +19,7 @@ export interface MetaTrackManagerConfig {
     /** Fast-forward interval in seconds for catching up (default: 5) */
     fastForwardInterval?: number;
 }
-type ConnectionState = 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+type ConnectionState = "disconnected" | "connecting" | "connected" | "reconnecting";
 /**
  * MetaTrackManager - Handles real-time metadata subscriptions via MistServer WebSocket
  *

package/dist/types/core/MistReporter.d.ts

@@ -20,7 +20,7 @@ export interface MistReporterStats {
     lastError: string | null;
     firstPlayback: number | null;
     playbackScore: number;
-    autoplay: 'success' | 'muted' | 'failed' | null;
+    autoplay: "success" | "muted" | "failed" | null;
     videoHeight: number | null;
     videoWidth: number | null;
     playerHeight: number | null;
@@ -97,7 +97,7 @@ export declare class MistReporter {
     /**
      * Increment a counter stat
      */
-    add(key: 'nWaiting' | 'nStalled' | 'nError', amount?: number): void;
+    add(key: "nWaiting" | "nStalled" | "nError", amount?: number): void;
     /**
      * Initialize reporting for a video element
      */
@@ -113,7 +113,7 @@ export declare class MistReporter {
     /**
      * Update autoplay status
      */
-    setAutoplayStatus(status: 'success' | 'muted' | 'failed'): void;
+    setAutoplayStatus(status: "success" | "muted" | "failed"): void;
     /**
      * Update current tracks
      */

package/dist/types/core/MistSignaling.d.ts

@@ -17,7 +17,7 @@
  * - tracks: Select tracks { video: string, audio: string }
  * - set_speed: Set playback rate { play_rate: number | "auto" }
  */
-import { TypedEventEmitter } from './EventEmitter';
+import { TypedEventEmitter } from "./EventEmitter";
 export interface MistSignalingConfig {
     /** WebSocket URL (will convert http to ws) */
     url: string;
@@ -42,35 +42,35 @@ export interface MistTimeUpdate {
 }
 export interface MistSignalingEvents {
     /** Connection established */
-    'connected': void;
+    connected: void;
     /** Connection closed */
-    'disconnected': {
+    disconnected: {
         code: number;
     };
     /** SDP answer received */
-    'answer_sdp': {
+    answer_sdp: {
         result: boolean;
         answer_sdp: string;
     };
     /** Time/track update */
-    'time_update': MistTimeUpdate;
+    time_update: MistTimeUpdate;
     /** Seek completed */
-    'seeked': {
+    seeked: {
         live_point?: boolean;
     };
     /** Playback speed changed */
-    'speed_changed': {
+    speed_changed: {
         play_rate: number;
         play_rate_curr: number;
     };
     /** Stream ended */
-    'stopped': void;
+    stopped: void;
     /** Error occurred */
-    'error': {
+    error: {
         message: string;
     };
 }
-export type MistSignalingState = 'connecting' | 'connected' | 'disconnected' | 'closed';
+export type MistSignalingState = "connecting" | "connected" | "disconnected" | "closed";
 /**
  * MistSignaling handles WebSocket communication with MistServer for WebRTC
  */
@@ -113,7 +113,7 @@ export declare class MistSignaling extends TypedEventEmitter<MistSignalingEvents
     /**
      * Seek to position (in seconds or "live")
      */
-    seek(time: number | 'live'): Promise<string>;
+    seek(time: number | "live"): Promise<string>;
     /**
      * Pause playback (hold)
      */
@@ -135,7 +135,7 @@ export declare class MistSignaling extends TypedEventEmitter<MistSignalingEvents
      * Set playback speed
      * @param rate - Playback rate (1.0 normal, "auto" for live catch-up)
      */
-    setSpeed(rate: number | 'auto'): boolean;
+    setSpeed(rate: number | "auto"): boolean;
     /**
      * Close the connection
      */