@livepeer-frameworks/player-core 0.1.0 → 0.1.1

package/README.md

@@ -15,36 +15,37 @@ npm i @livepeer-frameworks/player-core
 ## Basic Usage
 
 ```ts
-import { PlayerController } from '@livepeer-frameworks/player-core';
+import { PlayerController } from "@livepeer-frameworks/player-core";
 
 const controller = new PlayerController({
-  contentId: 'pk_...', // playbackId
-  contentType: 'live',
-  gatewayUrl: 'https://your-bridge/graphql',
+  contentId: "pk_...", // playbackId
+  contentType: "live",
+  gatewayUrl: "https://your-bridge/graphql",
   debug: true,
 });
 
-const container = document.getElementById('player')!;
+const container = document.getElementById("player")!;
 await controller.attach(container);
 ```
 
 Notes:
+
 - There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.
 
 ### Direct MistServer Node (mistUrl)
 
 ```ts
 const controller = new PlayerController({
-  contentId: 'pk_...',
-  contentType: 'live',
-  mistUrl: 'https://edge.example.com',
+  contentId: "pk_...",
+  contentType: "live",
+  mistUrl: "https://edge.example.com",
 });
 ```
 
 ### Styles
 
 ```ts
-import '@livepeer-frameworks/player-core/player.css';
+import "@livepeer-frameworks/player-core/player.css";
 ```
 
 ## Controls & Shortcuts
@@ -73,6 +74,7 @@ The player ships with keyboard/mouse shortcuts when the player is focused (click
 | Click/Tap and hold | 2x speed | Disabled on live-only |
 
 **Constraints**
+
 - Live-only streams disable seeking/skip/2x hold and frame-step.
 - Live with DVR buffer enables the same shortcuts as VOD.
 - Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.

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,105 @@
     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 +802,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 +1077,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 +1110,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 +1208,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 +1317,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 +1347,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 +1516,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Core player logic for FrameWorks streaming - framework agnostic",
   "main": "dist/cjs/index.js",

package/src/core/ABRController.ts

@@ -1,11 +1,11 @@
-import type { ABRMode, ABROptions, PlaybackQuality, QualityLevel } from '../types';
-import { TimerManager } from './TimerManager';
+import type { ABRMode, ABROptions, PlaybackQuality, QualityLevel } from "../types";
+import { TimerManager } from "./TimerManager";
 
 /**
  * Default ABR options
  */
 const DEFAULT_OPTIONS: Required<ABROptions> = {
-  mode: 'auto',
+  mode: "auto",
   maxResolution: { width: 1920, height: 1080 },
   maxBitrate: 8000000, // 8 Mbps
   minBufferForUpgrade: 10,
@@ -18,7 +18,7 @@ export interface ABRControllerConfig {
   /** 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 */
@@ -27,7 +27,7 @@ export interface ABRControllerConfig {
   debug?: boolean;
 }
 
-export type ABRDecision = 'upgrade' | 'downgrade' | 'maintain' | 'none';
+export type ABRDecision = "upgrade" | "downgrade" | "maintain" | "none";
 
 /**
  * ABRController - Adaptive Bitrate Controller
@@ -54,8 +54,8 @@ export class ABRController {
   private options: Required<ABROptions>;
   private config: ABRControllerConfig;
   private videoElement: HTMLVideoElement | null = null;
-  private currentQualityId: string | 'auto' = 'auto';
-  private lastDecision: ABRDecision = 'none';
+  private currentQualityId: string | "auto" = "auto";
+  private lastDecision: ABRDecision = "none";
   private lastDecisionTime = 0;
   private resizeObserver: ResizeObserver | null = null;
   private qualityChangeCallbacks: Array<(level: QualityLevel) => void> = [];
@@ -96,18 +96,18 @@ export class ABRController {
     this.stop();
     this.videoElement = videoElement;
 
-    if (this.options.mode === 'manual') {
-      this.log('Manual mode - no automatic ABR');
+    if (this.options.mode === "manual") {
+      this.log("Manual mode - no automatic ABR");
       return;
     }
 
     // Setup resize observer for ABR_resize mode
-    if (this.options.mode === 'resize' || this.options.mode === 'auto') {
+    if (this.options.mode === "resize" || this.options.mode === "auto") {
       this.setupResizeObserver();
     }
 
     // Start active bandwidth monitoring for bitrate mode
-    if (this.options.mode === 'bitrate' || this.options.mode === 'auto') {
+    if (this.options.mode === "bitrate" || this.options.mode === "auto") {
       this.startActiveMonitoring();
     }
   }
@@ -133,7 +133,7 @@ export class ABRController {
     this.timers.startInterval(
       () => this.checkBandwidthAndSwitch(),
       ABRController.MONITORING_INTERVAL_MS,
-      'monitoring'
+      "monitoring"
     );
 
     // Initial check
@@ -182,8 +182,10 @@ export class ABRController {
       if (smoothedBandwidth < currentBitrate * ABRController.DOWNGRADE_THRESHOLD) {
         const lowerQuality = this.findLowerQuality(qualities, currentQuality);
         if (lowerQuality) {
-          this.log(`ABR: bandwidth ${Math.round(smoothedBandwidth / 1000)}kbps < ${Math.round(currentBitrate * ABRController.DOWNGRADE_THRESHOLD / 1000)}kbps threshold -> downgrading to ${lowerQuality.label}`);
-          this.lastDecision = 'downgrade';
+          this.log(
+            `ABR: bandwidth ${Math.round(smoothedBandwidth / 1000)}kbps < ${Math.round((currentBitrate * ABRController.DOWNGRADE_THRESHOLD) / 1000)}kbps threshold -> downgrading to ${lowerQuality.label}`
+          );
+          this.lastDecision = "downgrade";
           this.lastDecisionTime = now;
           this.lastDowngradeTime = now;
           this.selectQuality(lowerQuality.id);
@@ -201,11 +203,14 @@ export class ABRController {
         // D2: Hysteresis - require 1.5x headroom to upgrade
         // Once at a quality level, stay until bandwidth drops below 1.2x (not 1.0x)
         const shouldUpgrade = smoothedBandwidth >= targetBitrate * ABRController.UPGRADE_HEADROOM;
-        const _canHoldHigher = smoothedBandwidth >= targetBitrate * ABRController.UPGRADE_HOLD_THRESHOLD;
+        const _canHoldHigher =
+          smoothedBandwidth >= targetBitrate * ABRController.UPGRADE_HOLD_THRESHOLD;
 
         if (shouldUpgrade) {
-          this.log(`ABR: bandwidth ${Math.round(smoothedBandwidth / 1000)}kbps >= ${Math.round(targetBitrate * ABRController.UPGRADE_HEADROOM / 1000)}kbps headroom -> upgrading to ${higherQuality.label}`);
-          this.lastDecision = 'upgrade';
+          this.log(
+            `ABR: bandwidth ${Math.round(smoothedBandwidth / 1000)}kbps >= ${Math.round((targetBitrate * ABRController.UPGRADE_HEADROOM) / 1000)}kbps headroom -> upgrading to ${higherQuality.label}`
+          );
+          this.lastDecision = "upgrade";
           this.lastDecisionTime = now;
           this.lastUpgradeTime = now;
           this.selectQuality(higherQuality.id);
@@ -282,7 +287,7 @@ export class ABRController {
    * Handle viewport resize (ABR_resize mode)
    */
   private handleResize(width: number, height: number): void {
-    if (this.options.mode !== 'resize' && this.options.mode !== 'auto') {
+    if (this.options.mode !== "resize" && this.options.mode !== "auto") {
       return;
     }
 
@@ -291,7 +296,10 @@ export class ABRController {
 
     // Find best quality for viewport size
     const targetWidth = Math.min(width * window.devicePixelRatio, this.options.maxResolution.width);
-    const targetHeight = Math.min(height * window.devicePixelRatio, this.options.maxResolution.height);
+    const targetHeight = Math.min(
+      height * window.devicePixelRatio,
+      this.options.maxResolution.height
+    );
 
     const bestQuality = this.findBestQualityForResolution(qualities, targetWidth, targetHeight);
 
@@ -307,7 +315,7 @@ export class ABRController {
    * Called by QualityMonitor when playback quality drops
    */
   handleQualityDegraded(quality: PlaybackQuality): void {
-    if (this.options.mode !== 'bitrate' && this.options.mode !== 'auto') {
+    if (this.options.mode !== "bitrate" && this.options.mode !== "auto") {
       return;
     }
 
@@ -327,7 +335,7 @@ export class ABRController {
 
         if (lowerQuality) {
           this.log(`Bitrate ABR: score ${quality.score} -> downgrading to ${lowerQuality.label}`);
-          this.lastDecision = 'downgrade';
+          this.lastDecision = "downgrade";
           this.lastDecisionTime = now;
           this.lastDowngradeTime = now;
           this.selectQuality(lowerQuality.id);
@@ -342,7 +350,7 @@ export class ABRController {
    * Called when conditions are good enough to try higher quality
    */
   handleQualityImproved(quality: PlaybackQuality): void {
-    if (this.options.mode !== 'bitrate' && this.options.mode !== 'auto') {
+    if (this.options.mode !== "bitrate" && this.options.mode !== "auto") {
       return;
     }
 
@@ -363,7 +371,7 @@ export class ABRController {
 
         if (higherQuality && this.isWithinConstraints(higherQuality)) {
           this.log(`Bitrate ABR: score ${quality.score} -> upgrading to ${higherQuality.label}`);
-          this.lastDecision = 'upgrade';
+          this.lastDecision = "upgrade";
           this.lastDecisionTime = now;
           this.lastUpgradeTime = now;
           this.selectQuality(higherQuality.id);
@@ -381,7 +389,7 @@ export class ABRController {
     targetHeight: number
   ): QualityLevel | null {
     // Filter out qualities that exceed constraints
-    const validQualities = qualities.filter(q => this.isWithinConstraints(q));
+    const validQualities = qualities.filter((q) => this.isWithinConstraints(q));
 
     if (validQualities.length === 0) return null;
 
@@ -409,10 +417,7 @@ export class ABRController {
   /**
    * Find a lower quality level
    */
-  private findLowerQuality(
-    qualities: QualityLevel[],
-    current: QualityLevel
-  ): QualityLevel | null {
+  private findLowerQuality(qualities: QualityLevel[], current: QualityLevel): QualityLevel | null {
     const currentBitrate = current.bitrate ?? 0;
 
     // Sort by bitrate descending
@@ -431,10 +436,7 @@ export class ABRController {
   /**
    * Find a higher quality level
    */
-  private findHigherQuality(
-    qualities: QualityLevel[],
-    current: QualityLevel
-  ): QualityLevel | null {
+  private findHigherQuality(qualities: QualityLevel[], current: QualityLevel): QualityLevel | null {
     const currentBitrate = current.bitrate ?? 0;
 
     // Sort by bitrate ascending
@@ -466,15 +468,15 @@ export class ABRController {
   /**
    * Select a quality level
    */
-  private selectQuality(id: string | 'auto'): void {
+  private selectQuality(id: string | "auto"): void {
     this.currentQualityId = id;
     this.config.selectQuality(id);
 
     // Notify callbacks
     const qualities = this.config.getQualities();
-    const selected = qualities.find(q => q.id === id);
+    const selected = qualities.find((q) => q.id === id);
     if (selected) {
-      this.qualityChangeCallbacks.forEach(cb => cb(selected));
+      this.qualityChangeCallbacks.forEach((cb) => cb(selected));
     }
   }
 
@@ -494,7 +496,7 @@ export class ABRController {
   /**
    * Manually set quality (switches to manual mode temporarily)
    */
-  setQuality(id: string | 'auto'): void {
+  setQuality(id: string | "auto"): void {
     this.selectQuality(id);
   }