@livepeer-frameworks/player-core 0.0.3 → 0.1.0

package/dist/esm/index.js

@@ -158,7 +158,7 @@ function extractHEVCProfile(init) {
                 const profileIdc = bytes[i];
                 if (profileIdc >= 1 && profileIdc <= 5) {
                     // Valid profile IDC (1=Main, 2=Main10, 3=MainStill, 4=Range Extensions, 5=High Throughput)
-                    const tierFlag = 0; // Assume main tier
+                    // tierFlag assumed to be 0 (main tier)
                     const levelIdc = bytes[i + 1] || 93; // Default to level 3.1
                     // Format: hev1.{profile}.{tier_flag}{compatibility}.L{level}.{constraints}
                     return `hev1.${profileIdc}.6.L${levelIdc}.B0`;
@@ -599,6 +599,9 @@ const PROTOCOL_PENALTIES = {
     // MEWS - heavy penalty, prefer HLS/WebRTC (reference mews.js has issues)
     'ws/video/mp4': 0.50,
     'wss/video/mp4': 0.50,
+    // Native Mist WebRTC signaling - treat like MEWS (legacy/less stable than WHEP)
+    'webrtc': 0.50,
+    'mist/webrtc': 0.50,
     // DASH - heavy penalty, broken implementation
     'dash/video/mp4': 0.90, // Below legacy
     'dash/video/webm': 0.95,
@@ -671,8 +674,8 @@ const MODE_PROTOCOL_BONUSES = {
         'wss/video/h264': 0.52,
         // WHEP/WebRTC: sub-second latency
         'whep': 0.50,
-        'webrtc': 0.45,
-        'mist/webrtc': 0.45,
+        'webrtc': 0.25,
+        'mist/webrtc': 0.25,
         // MP4/WS (MEWS): 2-5s latency, good fallback
         'ws/video/mp4': 0.30,
         'wss/video/mp4': 0.30,
@@ -696,6 +699,7 @@ const MODE_PROTOCOL_BONUSES = {
         // WebRTC: minimal for quality mode
         'whep': 0.05,
         'webrtc': 0.05,
+        'mist/webrtc': 0.05,
     },
     'vod': {
         // VOD/Clip: Prefer seekable protocols, EXCLUDE WebRTC (no seek support)
@@ -719,8 +723,8 @@ const MODE_PROTOCOL_BONUSES = {
         'html5/video/mp4': 0.42,
         // WHEP/WebRTC: good for low latency
         'whep': 0.38,
-        'webrtc': 0.35,
-        'mist/webrtc': 0.35,
+        'webrtc': 0.20,
+        'mist/webrtc': 0.20,
         // MP4/WS (MEWS): lower latency than HLS
         'ws/video/mp4': 0.30,
         'wss/video/mp4': 0.30,
@@ -756,10 +760,12 @@ const PROTOCOL_ROUTING = {
     'wss/video/webm': { prefer: ['mews'] },
     // HLS
     'html5/application/vnd.apple.mpegurl': {
-        prefer: ['videojs', 'native'], // VideoJS loads faster than HLS.js, native for Safari
+        prefer: ['videojs', 'hlsjs'],
+        avoid: ['native'],
     },
     'html5/application/vnd.apple.mpegurl;version=7': {
-        prefer: ['videojs', 'native'],
+        prefer: ['videojs', 'hlsjs'],
+        avoid: ['native'],
     },
     // DASH
     'dash/video/mp4': { prefer: ['dashjs', 'videojs'] },
@@ -1090,6 +1096,13 @@ class PlayerManager {
         const selectionIndexBySource = new Map();
         selectionSources.forEach((s, idx) => selectionIndexBySource.set(s, idx));
         const totalSources = selectionSources.length;
+        const requiredTracks = [];
+        if (streamInfo.meta.tracks.some((t) => t.type === 'video')) {
+            requiredTracks.push('video');
+        }
+        if (streamInfo.meta.tracks.some((t) => t.type === 'audio')) {
+            requiredTracks.push('audio');
+        }
         // Track seen player+sourceType pairs to avoid duplicates
         const seenPairs = new Set();
         for (const player of players) {
@@ -1163,6 +1176,38 @@ class PlayerManager {
                     });
                     continue;
                 }
+                if (Array.isArray(tracktypes) && requiredTracks.length > 0) {
+                    const missing = requiredTracks.filter((t) => !tracktypes.includes(t));
+                    if (missing.length > 0) {
+                        const priorityScore = 1 - player.capability.priority / Math.max(maxPriority, 1);
+                        const sourceScore = 1 - sourceListIndex / Math.max(totalSources - 1, 1);
+                        const playerScore = scorePlayer(tracktypes, player.capability.priority, sourceListIndex, {
+                            maxPriority,
+                            totalSources,
+                            playerShortname: player.capability.shortname,
+                            mimeType: source.type,
+                            playbackMode: effectiveMode,
+                        });
+                        combinations.push({
+                            player: player.capability.shortname,
+                            playerName: player.capability.name,
+                            source,
+                            sourceIndex,
+                            sourceType: source.type,
+                            score: playerScore.total,
+                            compatible: false,
+                            incompatibleReason: `Missing required tracks: ${missing.join(', ')}`,
+                            scoreBreakdown: {
+                                trackScore: 0,
+                                trackTypes: tracktypes,
+                                priorityScore,
+                                sourceScore,
+                                weights: { tracks: 0.5, priority: 0.1, source: 0.05 },
+                            },
+                        });
+                        continue;
+                    }
+                }
                 // Compatible - calculate full score
                 const trackScore = Array.isArray(tracktypes)
                     ? tracktypes.reduce((sum, t) => sum + ({ video: 2.0, audio: 1.0, subtitle: 0.5 }[t] || 0), 0)
@@ -1622,8 +1667,8 @@ const DEFAULT_CACHE_TTL_MS = 10000;
 const CIRCUIT_BREAKER_THRESHOLD = 5; // Open after 5 consecutive failures
 const CIRCUIT_BREAKER_TIMEOUT_MS = 30000; // Half-open after 30 seconds
 const RESOLVE_VIEWER_QUERY = `
-  query ResolveViewer($contentType: String!, $contentId: String!) {
-    resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+  query ResolveViewer($contentId: String!) {
+    resolveViewerEndpoint(contentId: $contentId) {
       primary { nodeId baseUrl protocol url geoDistance loadScore outputs }
       fallbacks { nodeId baseUrl protocol url geoDistance loadScore outputs }
       metadata { contentType contentId title description durationSeconds status isLive viewers recordingSizeBytes clipSource createdAt }
@@ -1669,8 +1714,7 @@ async function fetchWithRetry(url, options, maxRetries, initialDelay) {
  * ```typescript
  * const client = new GatewayClient({
  *   gatewayUrl: 'https://gateway.example.com/graphql',
- *   contentType: 'live',
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  * });
  *
  * client.on('statusChange', ({ status }) => console.log('Status:', status));
@@ -1824,10 +1868,10 @@ class GatewayClient extends TypedEventEmitter {
     async doResolve() {
         // Abort any in-flight fetch (different from inFlightRequest promise tracking)
         this.abort();
-        const { gatewayUrl, contentType, contentId, authToken, maxRetries = DEFAULT_MAX_RETRIES, initialDelayMs = DEFAULT_INITIAL_DELAY_MS, } = this.config;
+        const { gatewayUrl, contentId, authToken, maxRetries = DEFAULT_MAX_RETRIES, initialDelayMs = DEFAULT_INITIAL_DELAY_MS, } = this.config;
         // Validate required params
-        if (!gatewayUrl || !contentType || !contentId) {
-            const error = 'Missing required parameters: gatewayUrl, contentType, or contentId';
+        if (!gatewayUrl || !contentId) {
+            const error = 'Missing required parameters: gatewayUrl or contentId';
             this.setStatus('error', error);
             throw new Error(error);
         }
@@ -1844,7 +1888,7 @@ class GatewayClient extends TypedEventEmitter {
                 },
                 body: JSON.stringify({
                     query: RESOLVE_VIEWER_QUERY,
-                    variables: { contentType, contentId },
+                    variables: { contentId },
                 }),
                 signal: ac.signal,
             }, maxRetries, initialDelayMs);
@@ -2056,7 +2100,7 @@ class TimerManager {
      */
     stopAll() {
         const count = this.timers.size;
-        for (const [internalId, entry] of this.timers) {
+        for (const [_internalId, entry] of this.timers) {
             if (entry.isInterval) {
                 clearInterval(entry.id);
             }
@@ -2188,7 +2232,7 @@ function getStatusMessage(status, percentage) {
  * ```typescript
  * const client = new StreamStateClient({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  * });
  *
  * client.on('stateChange', ({ state }) => console.log('State:', state));
@@ -2339,7 +2383,7 @@ class StreamStateClient extends TypedEventEmitter {
                 .replace(/^http:/, 'ws:')
                 .replace(/^https:/, 'wss:')
                 .replace(/\/$/, '');
-            const ws = new WebSocket(`${wsUrl}/json_${encodeURIComponent(streamName)}.js`);
+            const ws = new WebSocket(`${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`);
             this.ws = ws;
             ws.onopen = () => {
                 console.debug('[StreamStateClient] WebSocket connected');
@@ -2380,7 +2424,7 @@ class StreamStateClient extends TypedEventEmitter {
             return;
         const { mistBaseUrl, streamName, pollInterval } = this.config;
         try {
-            const url = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js`;
+            const url = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
             const response = await fetch(url, {
                 method: 'GET',
                 headers: { 'Accept': 'application/json' },
@@ -2793,7 +2837,6 @@ class LiveDurationProxy {
         }
         // Find valid seek range
         const bufferStart = buffered.start(0);
-        this.getBufferEnd();
         const liveEdge = this.getLiveEdge();
         // Clamp to valid range
         const clampedTime = Math.max(bufferStart, Math.min(time, liveEdge));
@@ -3130,7 +3173,7 @@ class NativePlayerImpl extends BasePlayer {
         const browser = getBrowserInfo();
         // Safari cannot play WebM - skip entirely
         // Reference: html5.js:28-29
-        if (mimetype === 'html5/video/webm' && browser.name === 'safari') {
+        if (mimetype === 'html5/video/webm' && browser.isSafari) {
             return false;
         }
         // Special handling for HLS
@@ -3269,7 +3312,7 @@ class NativePlayerImpl extends BasePlayer {
         // Use LiveDurationProxy for all live streams (non-WHEP)
         // WHEP handles its own live edge via signaling
         // This enables seeking and jump-to-live for native MP4/WebM/HLS live streams
-        const isLiveStream = streamInfo?.type === 'live' || !isFinite(streamInfo?.duration ?? Infinity);
+        const isLiveStream = streamInfo?.type === 'live';
         if (source.type !== 'whep' && isLiveStream) {
             this.setupLiveDurationProxy(video);
             this.setupAutoRecovery(video);
@@ -3918,13 +3961,29 @@ class HlsJsPlayerImpl extends BasePlayer {
             const Hls = mod.default || mod;
             console.log('[HLS.js] hls.js module imported, Hls.isSupported():', Hls.isSupported?.());
             if (Hls.isSupported()) {
-                this.hls = new Hls({
+                // Build optimized HLS.js config with user overrides
+                const hlsConfig = {
+                    // Worker disabled for lower latency (per HLS.js maintainer recommendation)
                     enableWorker: false,
+                    // LL-HLS support
                     lowLatencyMode: true,
-                    maxBufferLength: 15,
-                    maxMaxBufferLength: 60,
-                    backBufferLength: 30 // Reduced from 90 to prevent memory issues on long streams
-                });
+                    // AGGRESSIVE: Assume 5 Mbps initially (not 500kbps default)
+                    // This dramatically improves startup time by selecting appropriate quality faster
+                    abrEwmaDefaultEstimate: 5000000,
+                    // AGGRESSIVE: Minimal buffers for fastest startup
+                    maxBufferLength: 6, // Reduced from 15 (just 2 segments @ 3s)
+                    maxMaxBufferLength: 15, // Reduced from 60
+                    backBufferLength: Infinity, // Let browser manage (per maintainer advice)
+                    // Stay close to live edge but not too aggressive
+                    liveSyncDuration: 4, // Target 4 seconds behind live edge
+                    liveMaxLatencyDuration: 8, // Max 8 seconds before seeking to live
+                    // Faster ABR adaptation for live
+                    abrEwmaFastLive: 2.0, // Faster than default 3.0
+                    abrEwmaSlowLive: 6.0, // Faster than default 9.0
+                    // Allow user overrides
+                    ...options.hlsConfig,
+                };
+                this.hls = new Hls(hlsConfig);
                 this.hls.attachMedia(video);
                 this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
                     this.hls.loadSource(source.url);
@@ -4095,6 +4154,26 @@ class HlsJsPlayerImpl extends BasePlayer {
             }
         }
     }
+    /**
+     * Provide a seekable range override for live streams.
+     * Uses liveSyncPosition as the live edge to avoid waiting for the absolute end.
+     */
+    getSeekableRange() {
+        const video = this.videoElement;
+        if (!video?.seekable || video.seekable.length === 0)
+            return null;
+        const start = video.seekable.start(0);
+        let end = video.seekable.end(video.seekable.length - 1);
+        if (this.liveDurationProxy?.isLive() && this.hls && typeof this.hls.liveSyncPosition === 'number') {
+            const sync = this.hls.liveSyncPosition;
+            if (Number.isFinite(sync) && sync > 0) {
+                end = Math.min(end, sync);
+            }
+        }
+        if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start)
+            return null;
+        return { start, end };
+    }
     /**
      * Get latency from live edge (for live streams)
      */
@@ -4484,16 +4563,17 @@ class DashJsPlayerImpl extends BasePlayer {
                 console.debug('[DashJS v5] streamInitialized - isDynamic:', isDynamic);
             });
             // Configure dashjs v5 streaming settings BEFORE initialization
+            // AGGRESSIVE settings for fastest startup and low latency
             this.dashPlayer.updateSettings({
                 streaming: {
-                    // Buffer settings
+                    // AGGRESSIVE: Minimal buffers for fastest startup
                     buffer: {
                         fastSwitchEnabled: true,
-                        stableBufferTime: 16,
-                        bufferTimeAtTopQuality: 30,
-                        bufferTimeAtTopQualityLongForm: 60,
-                        bufferToKeep: 30,
-                        bufferPruningInterval: 30,
+                        stableBufferTime: 4, // Reduced from 16 (aggressive!)
+                        bufferTimeAtTopQuality: 8, // Reduced from 30
+                        bufferTimeAtTopQualityLongForm: 15, // Reduced from 60
+                        bufferToKeep: 10, // Reduced from 30
+                        bufferPruningInterval: 10, // Reduced from 30
                     },
                     // Gaps/stall handling
                     gaps: {
@@ -4502,12 +4582,23 @@ class DashJsPlayerImpl extends BasePlayer {
                         smallGapLimit: 1.5,
                         threshold: 0.3,
                     },
-                    // ABR - try disabling to isolate the issue
+                    // AGGRESSIVE: ABR with high initial bitrate estimate
                     abr: {
                         autoSwitchBitrate: { video: true, audio: true },
                         limitBitrateByPortal: false,
                         useDefaultABRRules: true,
-                        initialBitrate: { video: -1, audio: -1 }, // Let dashjs choose
+                        initialBitrate: { video: 5000000, audio: 128000 }, // 5Mbps initial (was -1)
+                    },
+                    // LIVE CATCHUP - critical for maintaining live edge (was missing!)
+                    liveCatchup: {
+                        enabled: true,
+                        maxDrift: 1.5, // Seek to live if drift > 1.5s
+                        playbackRate: {
+                            max: 0.15, // Speed up by max 15%
+                            min: -0.15, // Slow down by max 15%
+                        },
+                        playbackBufferMin: 0.3, // Min buffer before catchup
+                        mode: 'liveCatchupModeDefault',
                     },
                     // Retry settings - more aggressive
                     retryAttempts: {
@@ -4542,11 +4633,11 @@ class DashJsPlayerImpl extends BasePlayer {
                     abandonLoadTimeout: 5000, // 5 seconds instead of default 10
                     xhrWithCredentials: false,
                     text: { defaultEnabled: false },
-                    // Live delay settings for live streams
+                    // AGGRESSIVE: Tighter live delay
                     delay: {
-                        liveDelay: 4, // Target 4 seconds behind live edge
+                        liveDelay: 2, // Reduced from 4 (2s behind live edge)
                         liveDelayFragmentCount: null,
-                        useSuggestedPresentationDelay: true,
+                        useSuggestedPresentationDelay: false, // Ignore manifest suggestions
                     },
                 },
                 debug: {
@@ -4960,6 +5051,9 @@ class VideoJsPlayerImpl extends BasePlayer {
             const videojs = mod.default || mod;
             // When using custom controls (controls: false), disable ALL VideoJS UI elements
             const useVideoJsControls = options.controls === true;
+            // Android < 7 workaround: enable overrideNative for HLS
+            const androidMatch = navigator.userAgent.match(/android\s([\d.]*)/i);
+            const androidVersion = androidMatch ? parseFloat(androidMatch[1]) : null;
             // Build VideoJS options
             // NOTE: We disable UI components but NOT children array - that breaks playback
             const vjsOptions = {
@@ -4975,16 +5069,30 @@ class VideoJsPlayerImpl extends BasePlayer {
                 controlBar: useVideoJsControls,
                 liveTracker: useVideoJsControls,
                 // Don't set children: [] - that can break internal VideoJS components
+                // VHS (http-streaming) configuration - AGGRESSIVE for fastest startup
+                html5: {
+                    vhs: {
+                        // AGGRESSIVE: Start with lower quality for instant playback
+                        enableLowInitialPlaylist: true,
+                        // AGGRESSIVE: Assume 5 Mbps initially
+                        bandwidth: 5000000,
+                        // Persist bandwidth across sessions for returning users
+                        useBandwidthFromLocalStorage: true,
+                        // Enable partial segment processing for lower latency
+                        handlePartialData: true,
+                        // AGGRESSIVE: Very tight live range
+                        liveRangeSafeTimeDelta: 0.3,
+                        // Allow user overrides via options.vhsConfig
+                        ...options.vhsConfig,
+                    },
+                    // Android < 7 workaround
+                    ...(androidVersion && androidVersion < 7 ? {
+                        hls: { overrideNative: true }
+                    } : {}),
+                },
+                nativeAudioTracks: androidVersion && androidVersion < 7 ? false : undefined,
+                nativeVideoTracks: androidVersion && androidVersion < 7 ? false : undefined,
             };
-            // Android < 7 workaround: enable overrideNative for HLS
-            const androidMatch = navigator.userAgent.match(/android\s([\d.]*)/i);
-            const androidVersion = androidMatch ? parseFloat(androidMatch[1]) : null;
-            if (androidVersion && androidVersion < 7) {
-                console.debug('[VideoJS] Android < 7 detected, enabling overrideNative');
-                vjsOptions.html5 = { hls: { overrideNative: true } };
-                vjsOptions.nativeAudioTracks = false;
-                vjsOptions.nativeVideoTracks = false;
-            }
             console.debug('[VideoJS] Creating player with options:', vjsOptions);
             this.videojsPlayer = videojs(video, vjsOptions);
             console.debug('[VideoJS] Player created');
@@ -5188,26 +5296,6 @@ class VideoJsPlayerImpl extends BasePlayer {
         const v = this.proxyElement || this.videoElement;
         return v?.currentTime ?? 0;
     }
-    getDuration() {
-        const v = this.proxyElement || this.videoElement;
-        return v?.duration ?? 0;
-    }
-    getSeekableRange() {
-        if (this.videojsPlayer?.seekable) {
-            try {
-                const seekable = this.videojsPlayer.seekable();
-                if (seekable && seekable.length > 0) {
-                    const start = seekable.start(0) + this.timeCorrection;
-                    const end = seekable.end(seekable.length - 1) + this.timeCorrection;
-                    if (Number.isFinite(start) && Number.isFinite(end) && end >= start) {
-                        return { start, end };
-                    }
-                }
-            }
-            catch { }
-        }
-        return null;
-    }
     /**
      * Seek to time using VideoJS API (fixes backwards seeking in HLS).
      * Time should be in the corrected coordinate space (with firstms offset applied).
@@ -5322,6 +5410,31 @@ class VideoJsPlayerImpl extends BasePlayer {
             }
         }
     }
+    /**
+     * Provide a seekable range override for live streams.
+     * Uses VideoJS liveTracker seekableEnd as the live edge when available.
+     */
+    getSeekableRange() {
+        const video = this.videoElement;
+        if (!video?.seekable || video.seekable.length === 0)
+            return null;
+        let start = video.seekable.start(0);
+        let end = video.seekable.end(video.seekable.length - 1);
+        if (this.videojsPlayer?.liveTracker) {
+            const tracker = this.videojsPlayer.liveTracker;
+            const trackerEnd = tracker.seekableEnd?.();
+            const trackerStart = tracker.seekableStart?.();
+            if (typeof trackerStart === 'number' && Number.isFinite(trackerStart)) {
+                start = trackerStart;
+            }
+            if (typeof trackerEnd === 'number' && Number.isFinite(trackerEnd) && trackerEnd > 0) {
+                end = Math.min(end, trackerEnd);
+            }
+        }
+        if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start)
+            return null;
+        return { start, end };
+    }
     /**
      * Get latency from live edge (for live streams)
      */
@@ -5516,7 +5629,7 @@ class MistPlayerImpl extends BasePlayer {
                     ref.unload();
                 }
             }
-            catch (e) {
+            catch {
                 // Ignore cleanup errors
             }
             try {
@@ -5651,7 +5764,6 @@ class WebSocketManager {
             this.onError('Too many send retries');
             return false;
         }
-        // Helper to schedule retry with tracking
         const scheduleRetry = (delay) => {
             const timer = setTimeout(() => {
                 this.pendingRetryTimers.delete(timer);
@@ -6062,7 +6174,7 @@ class SourceBufferManager {
                 // Make sure end time is never 0 (mews.js:376)
                 this.sourceBuffer.remove(0, Math.max(0.1, currentTime - keepaway));
             }
-            catch (e) {
+            catch {
                 // Ignore errors during cleanup
             }
         });
@@ -6089,7 +6201,7 @@ class SourceBufferManager {
                     this.sourceBuffer.remove(0, Infinity);
                 }
             }
-            catch (e) {
+            catch {
                 // Ignore
             }
             // Wait for remove to complete, then reinit
@@ -6111,7 +6223,7 @@ class SourceBufferManager {
             try {
                 this.mediaSource.removeSourceBuffer(this.sourceBuffer);
             }
-            catch (e) {
+            catch {
                 // Ignore
             }
         }
@@ -6389,7 +6501,7 @@ class MewsWsPlayerImpl extends BasePlayer {
             return false;
         return Object.keys(playableTracks);
     }
-    async initialize(container, source, options) {
+    async initialize(container, source, options, streamInfo) {
         this.container = container;
         container.classList.add('fw-player-container');
         const video = document.createElement('video');
@@ -6419,13 +6531,15 @@ class MewsWsPlayerImpl extends BasePlayer {
             enabled: !!anyOpts.analytics?.enabled,
             endpoint: anyOpts.analytics?.endpoint || null
         };
-        // Get stream type from options if available
-        if (source.type === 'live') {
+        // Get stream type from streamInfo if available
+        // Note: source.type is a MIME string (e.g., 'ws/video/mp4'), not 'live'/'vod'
+        if (streamInfo?.type === 'live') {
             this.streamType = 'live';
         }
-        else if (source.type === 'vod') {
+        else if (streamInfo?.type === 'vod') {
             this.streamType = 'vod';
         }
+        // Fallback: will be determined by server on_time messages (end === 0 means live)
         try {
             // Initialize MediaSource (mews.js:138-196)
             this.mediaSource = new MediaSource();
@@ -7966,7 +8080,7 @@ class MistWebRTCPlayerImpl extends BasePlayer {
         });
     }
     // Private methods
-    async setupWebRTC(video, source, options) {
+    async setupWebRTC(video, source, _options) {
         const sourceAny = source;
         const iceServers = sourceAny?.iceServers || [];
         // Create signaling
@@ -8401,7 +8515,7 @@ class WebSocketController {
                         this.setState('disconnected');
                     }
                 };
-                this.ws.onerror = (event) => {
+                this.ws.onerror = (_event) => {
                     this.log('WebSocket error');
                     this.emit('error', new Error('WebSocket error'));
                 };
@@ -9386,7 +9500,7 @@ class SyncController {
     /**
      * Register a new track
      */
-    addTrack(trackIndex, track) {
+    addTrack(_trackIndex, _track) {
         // Jitter tracking will be initialized on first chunk
     }
     /**
@@ -9835,11 +9949,13 @@ class WebCodecsPlayerImpl extends BasePlayer {
             name: 'WebCodecs Player',
             shortname: 'webcodecs',
             priority: 0, // Highest priority - lowest latency option
-            // Raw WebSocket (12-byte header + AVCC NAL units) - NOT MP4-muxed
+            // Raw WebSocket (12-byte header + codec frames) - NOT MP4-muxed
             // MistServer's output_wsraw.cpp provides full codec negotiation (audio + video)
+            // MistServer's output_h264.cpp uses same 12-byte header but Annex B payload (video-only)
             // NOTE: ws/video/mp4 is MP4-fragmented which needs MEWS player (uses MSE)
             mimes: [
-                'ws/video/raw', 'wss/video/raw', // Raw codec frames (audio + video)
+                'ws/video/raw', 'wss/video/raw', // Raw codec frames - AVCC format (audio + video)
+                'ws/video/h264', 'wss/video/h264', // Annex B H264/HEVC (video-only, same 12-byte header)
             ],
         };
         this.wsController = null;
@@ -9856,6 +9972,8 @@ class WebCodecsPlayerImpl extends BasePlayer {
         this.debugging = false;
         this.verboseDebugging = false;
         this.streamType = 'live';
+        /** Payload format: 'avcc' for ws/video/raw, 'annexb' for ws/video/h264 */
+        this.payloadFormat = 'avcc';
         this.workerUidCounter = 0;
         this.workerListeners = new Map();
         // Playback state
@@ -9869,6 +9987,10 @@ class WebCodecsPlayerImpl extends BasePlayer {
         this._framesDecoded = 0;
         this._bytesReceived = 0;
         this._messagesReceived = 0;
+        this._isPaused = true;
+        this._suppressPlayPauseSync = false;
+        this._pendingStepPause = false;
+        this._stepPauseTimeout = null;
     }
     /**
      * Get cache key for a track's codec configuration
@@ -9915,7 +10037,8 @@ class WebCodecsPlayerImpl extends BasePlayer {
                     }
                     else {
                         // Use VideoDecoder.isConfigSupported()
-                        result = await VideoDecoder.isConfigSupported(config);
+                        const videoResult = await VideoDecoder.isConfigSupported(config);
+                        result = { supported: videoResult.supported === true, config: videoResult.config };
                     }
                     break;
                 }
@@ -9923,7 +10046,8 @@ class WebCodecsPlayerImpl extends BasePlayer {
                     // Audio requires numberOfChannels and sampleRate
                     config.numberOfChannels = track.channels ?? 2;
                     config.sampleRate = track.rate ?? 48000;
-                    result = await AudioDecoder.isConfigSupported(config);
+                    const audioResult = await AudioDecoder.isConfigSupported(config);
+                    result = { supported: audioResult.supported === true, config: audioResult.config };
                     break;
                 }
                 default:
@@ -10004,6 +10128,10 @@ class WebCodecsPlayerImpl extends BasePlayer {
                 playableTracks['subtitle'] = true;
             }
         }
+        // Annex B H264 WebSocket is video-only (no audio payloads)
+        if (mimetype.includes('video/h264')) {
+            delete playableTracks.audio;
+        }
         if (Object.keys(playableTracks).length === 0) {
             return false;
         }
@@ -10026,6 +10154,12 @@ class WebCodecsPlayerImpl extends BasePlayer {
         this._framesDecoded = 0;
         this._bytesReceived = 0;
         this._messagesReceived = 0;
+        // Detect payload format from source MIME type
+        // ws/video/h264 uses Annex B (start code delimited NALs), ws/video/raw uses AVCC (length-prefixed)
+        this.payloadFormat = source.type?.includes('h264') ? 'annexb' : 'avcc';
+        if (this.payloadFormat === 'annexb') {
+            this.log('Using Annex B payload format (ws/video/h264)');
+        }
         this.container = container;
         container.classList.add('fw-player-container');
         // Pre-populate track metadata from streamInfo (fetched via HTTP before WebSocket)
@@ -10079,6 +10213,31 @@ class WebCodecsPlayerImpl extends BasePlayer {
             video.poster = options.poster;
         this.videoElement = video;
         container.appendChild(video);
+        // Keep paused state in sync with actual element state
+        this._onVideoPlay = () => {
+            if (this._suppressPlayPauseSync)
+                return;
+            this._isPaused = false;
+            this.sendToWorker({
+                type: 'frametiming',
+                action: 'setPaused',
+                paused: false,
+                uid: this.workerUidCounter++,
+            }).catch(() => { });
+        };
+        this._onVideoPause = () => {
+            if (this._suppressPlayPauseSync)
+                return;
+            this._isPaused = true;
+            this.sendToWorker({
+                type: 'frametiming',
+                action: 'setPaused',
+                paused: true,
+                uid: this.workerUidCounter++,
+            }).catch(() => { });
+        };
+        video.addEventListener('play', this._onVideoPlay);
+        video.addEventListener('pause', this._onVideoPause);
         // Create MediaStream for output
         this.mediaStream = new MediaStream();
         video.srcObject = this.mediaStream;
@@ -10219,6 +10378,19 @@ class WebCodecsPlayerImpl extends BasePlayer {
         }
         // Clean up video element
         if (this.videoElement) {
+            if (this._onVideoPlay) {
+                this.videoElement.removeEventListener('play', this._onVideoPlay);
+                this._onVideoPlay = undefined;
+            }
+            if (this._onVideoPause) {
+                this.videoElement.removeEventListener('pause', this._onVideoPause);
+                this._onVideoPause = undefined;
+            }
+            if (this._stepPauseTimeout) {
+                clearTimeout(this._stepPauseTimeout);
+                this._stepPauseTimeout = null;
+            }
+            this._pendingStepPause = false;
             this.videoElement.srcObject = null;
             this.videoElement.remove();
             this.videoElement = null;
@@ -10381,8 +10553,17 @@ class WebCodecsPlayerImpl extends BasePlayer {
                 break;
             }
             case 'sendevent': {
-                if (msg.kind === 'timeupdate' && this.videoElement) {
-                    this.emit('timeupdate', this.videoElement.currentTime);
+                if (msg.kind === 'timeupdate') {
+                    if (this._pendingStepPause) {
+                        this.finishStepPause();
+                    }
+                    if (typeof msg.time === 'number' && Number.isFinite(msg.time)) {
+                        this._currentTime = msg.time;
+                        this.emit('timeupdate', this._currentTime);
+                    }
+                    else if (this.videoElement) {
+                        this.emit('timeupdate', this.videoElement.currentTime);
+                    }
                 }
                 else if (msg.kind === 'error') {
                     this.emit('error', new Error(msg.message ?? 'Unknown error'));
@@ -10515,7 +10696,7 @@ class WebCodecsPlayerImpl extends BasePlayer {
         if (msg.meta?.tracks) {
             const tracksObj = msg.meta.tracks;
             this.log(`Info contains ${Object.keys(tracksObj).length} tracks`);
-            for (const [name, track] of Object.entries(tracksObj)) {
+            for (const [_name, track] of Object.entries(tracksObj)) {
                 // Store track by its index for lookup when chunks arrive
                 if (track.idx !== undefined) {
                     this.tracksByIndex.set(track.idx, track);
@@ -10727,6 +10908,7 @@ class WebCodecsPlayerImpl extends BasePlayer {
             track,
             opts: {
                 optimizeForLatency: this.streamType === 'live',
+                payloadFormat: this.payloadFormat, // 'avcc' for ws/video/raw, 'annexb' for ws/video/h264
             },
             uid: this.workerUidCounter++,
         });
@@ -10865,18 +11047,94 @@ class WebCodecsPlayerImpl extends BasePlayer {
     // Playback Control
     // ============================================================================
     async play() {
+        this._isPaused = false;
         this.wsController?.play();
+        this.sendToWorker({
+            type: 'frametiming',
+            action: 'setPaused',
+            paused: false,
+            uid: this.workerUidCounter++,
+        });
         await this.videoElement?.play();
     }
     pause() {
+        this._isPaused = true;
         this.wsController?.hold();
+        this.sendToWorker({
+            type: 'frametiming',
+            action: 'setPaused',
+            paused: true,
+            uid: this.workerUidCounter++,
+        });
         this.videoElement?.pause();
     }
+    finishStepPause() {
+        if (!this.videoElement) {
+            this._pendingStepPause = false;
+            this._suppressPlayPauseSync = false;
+            if (this._stepPauseTimeout) {
+                clearTimeout(this._stepPauseTimeout);
+                this._stepPauseTimeout = null;
+            }
+            return;
+        }
+        if (this._stepPauseTimeout) {
+            clearTimeout(this._stepPauseTimeout);
+            this._stepPauseTimeout = null;
+        }
+        this._pendingStepPause = false;
+        this._suppressPlayPauseSync = false;
+        try {
+            this.videoElement.pause();
+        }
+        catch { }
+    }
+    frameStep(direction, _seconds) {
+        if (!this._isPaused)
+            return;
+        if (!this.videoElement)
+            return;
+        this.log(`Frame step requested dir=${direction} paused=${this._isPaused} videoPaused=${this.videoElement.paused}`);
+        // Ensure worker is paused (in case pause didn't flow through)
+        this.sendToWorker({
+            type: 'frametiming',
+            action: 'setPaused',
+            paused: true,
+            uid: this.workerUidCounter++,
+        }).catch(() => { });
+        // MediaStream-backed video elements don't present new frames while paused.
+        // Pulse playback briefly so the stepped frame can render, then pause again.
+        if (this.videoElement.paused) {
+            const video = this.videoElement;
+            this._suppressPlayPauseSync = true;
+            this._pendingStepPause = true;
+            try {
+                const maybePromise = video.play();
+                if (maybePromise && typeof maybePromise.catch === 'function') {
+                    maybePromise.catch(() => { });
+                }
+            }
+            catch { }
+            if ('requestVideoFrameCallback' in video) {
+                video.requestVideoFrameCallback(() => this.finishStepPause());
+            }
+            // Failsafe: avoid staying in suppressed state if no frame is delivered
+            this._stepPauseTimeout = setTimeout(() => this.finishStepPause(), 200);
+        }
+        this.sendToWorker({
+            type: 'framestep',
+            direction,
+            uid: this.workerUidCounter++,
+        });
+    }
     seek(time) {
         if (!this.wsController || !this.syncController)
             return;
         const timeMs = time * 1000;
         const seekId = this.syncController.startSeek(timeMs);
+        // Optimistically update current time for immediate UI feedback
+        this._currentTime = time;
+        this.emit('timeupdate', this._currentTime);
         // Flush worker queues
         this.sendToWorker({
             type: 'seek',
@@ -10902,6 +11160,9 @@ class WebCodecsPlayerImpl extends BasePlayer {
     setPlaybackRate(rate) {
         this.syncController?.setMainSpeed(rate);
     }
+    isPaused() {
+        return this._isPaused;
+    }
     isLive() {
         return this.streamType === 'live';
     }
@@ -11687,6 +11948,9 @@ class InteractionController {
         this.boundPointerCancel = this.handlePointerCancel.bind(this);
         this.boundContextMenu = this.handleContextMenu.bind(this);
         this.boundMouseMove = this.handleMouseMove.bind(this);
+        this.boundDoubleClick = this.handleDoubleClick.bind(this);
+        this.boundDocumentKeyDown = this.handleKeyDown.bind(this);
+        this.boundDocumentKeyUp = this.handleKeyUp.bind(this);
     }
     /**
      * Attach event listeners to container
@@ -11702,6 +11966,8 @@ class InteractionController {
         // Keyboard events
         container.addEventListener('keydown', this.boundKeyDown);
         container.addEventListener('keyup', this.boundKeyUp);
+        document.addEventListener('keydown', this.boundDocumentKeyDown);
+        document.addEventListener('keyup', this.boundDocumentKeyUp);
         // Pointer events (unified mouse + touch)
         container.addEventListener('pointerdown', this.boundPointerDown);
         container.addEventListener('pointerup', this.boundPointerUp);
@@ -11709,6 +11975,8 @@ class InteractionController {
         container.addEventListener('pointerleave', this.boundPointerCancel);
         // Mouse move for idle detection
         container.addEventListener('mousemove', this.boundMouseMove);
+        // Double click for fullscreen (desktop)
+        container.addEventListener('dblclick', this.boundDoubleClick);
         // Prevent context menu on long press
         container.addEventListener('contextmenu', this.boundContextMenu);
         // Start idle tracking
@@ -11724,11 +11992,14 @@ class InteractionController {
         const { container } = this.config;
         container.removeEventListener('keydown', this.boundKeyDown);
         container.removeEventListener('keyup', this.boundKeyUp);
+        document.removeEventListener('keydown', this.boundDocumentKeyDown);
+        document.removeEventListener('keyup', this.boundDocumentKeyUp);
         container.removeEventListener('pointerdown', this.boundPointerDown);
         container.removeEventListener('pointerup', this.boundPointerUp);
         container.removeEventListener('pointercancel', this.boundPointerCancel);
         container.removeEventListener('pointerleave', this.boundPointerCancel);
         container.removeEventListener('mousemove', this.boundMouseMove);
+        container.removeEventListener('dblclick', this.boundDoubleClick);
         container.removeEventListener('contextmenu', this.boundContextMenu);
         // Clear any pending timeouts
         if (this.holdCheckTimeout) {
@@ -11788,9 +12059,14 @@ class InteractionController {
         // Ignore if focus is on an input element
         if (this.isInputElement(e.target))
             return;
+        if (e.defaultPrevented)
+            return;
+        if (!this.shouldHandleKeyboard(e))
+            return;
         // Record interaction for idle detection
         this.recordInteraction();
         const { isLive } = this.config;
+        const isPaused = this.config.isPaused?.() ?? this.config.videoElement?.paused ?? false;
         switch (e.key) {
             case ' ':
             case 'Spacebar':
@@ -11843,7 +12119,6 @@ class InteractionController {
                 this.config.onPlayPause();
                 break;
             case '<':
-            case ',':
                 // Decrease speed (shift+, = <)
                 e.preventDefault();
                 if (!isLive) {
@@ -11851,13 +12126,26 @@ class InteractionController {
                 }
                 break;
             case '>':
-            case '.':
                 // Increase speed (shift+. = >)
                 e.preventDefault();
                 if (!isLive) {
                     this.adjustPlaybackSpeed(0.25);
                 }
                 break;
+            case ',':
+                // Previous frame when paused
+                if (this.config.onFrameStep || (!isLive && isPaused)) {
+                    e.preventDefault();
+                    this.stepFrame(-1);
+                }
+                break;
+            case '.':
+                // Next frame when paused
+                if (this.config.onFrameStep || (!isLive && isPaused)) {
+                    e.preventDefault();
+                    this.stepFrame(1);
+                }
+                break;
             // Number keys for seeking to percentage
             case '0':
             case '1':
@@ -11880,11 +12168,36 @@ class InteractionController {
     handleKeyUp(e) {
         if (this.isInputElement(e.target))
             return;
+        if (e.defaultPrevented)
+            return;
+        if (!this.shouldHandleKeyboard(e))
+            return;
         if (e.key === ' ' || e.key === 'Spacebar') {
             e.preventDefault();
             this.handleSpaceUp();
         }
     }
+    shouldHandleKeyboard(e) {
+        if (this.spaceKeyDownTime > 0)
+            return true;
+        const target = e.target;
+        if (target && this.config.container.contains(target))
+            return true;
+        const active = document.activeElement;
+        if (active && this.config.container.contains(active))
+            return true;
+        try {
+            if (this.config.container.matches(':focus-within'))
+                return true;
+            if (this.config.container.matches(':hover'))
+                return true;
+        }
+        catch { }
+        const now = Date.now();
+        if (now - this.lastInteractionTime < DEFAULT_IDLE_TIMEOUT_MS)
+            return true;
+        return false;
+    }
     handleSpaceDown() {
         if (this.spaceKeyDownTime > 0)
             return; // Already tracking
@@ -11918,6 +12231,41 @@ class InteractionController {
             }
         }
     }
+    handleDoubleClick(e) {
+        if (this.isControlElement(e.target))
+            return;
+        this.recordInteraction();
+        e.preventDefault();
+        this.config.onFullscreenToggle();
+    }
+    stepFrame(direction) {
+        const step = this.getFrameStepSeconds();
+        if (!Number.isFinite(step) || step <= 0)
+            return;
+        if (this.config.onFrameStep?.(direction, step))
+            return;
+        const video = this.config.videoElement;
+        if (!video)
+            return;
+        const target = video.currentTime + (direction * step);
+        if (!Number.isFinite(target))
+            return;
+        // Only step within already-buffered ranges to avoid network seeks
+        const buffered = video.buffered;
+        if (buffered && buffered.length > 0) {
+            for (let i = 0; i < buffered.length; i++) {
+                const start = buffered.start(i);
+                const end = buffered.end(i);
+                if (target >= start && target <= end) {
+                    try {
+                        video.currentTime = target;
+                    }
+                    catch { }
+                    return;
+                }
+            }
+        }
+    }
     // ─────────────────────────────────────────────────────────────────
     // Pointer (Mouse/Touch) Handling
     // ─────────────────────────────────────────────────────────────────
@@ -11934,6 +12282,7 @@ class InteractionController {
         const now = Date.now();
         const rect = this.config.container.getBoundingClientRect();
         const relativeX = (e.clientX - rect.left) / rect.width;
+        const isMouse = e.pointerType === 'mouse';
         // Check for double-tap
         if (now - this.lastTapTime < DOUBLE_TAP_WINDOW_MS) {
             // Clear pending single-tap
@@ -11941,19 +12290,22 @@ class InteractionController {
                 clearTimeout(this.pendingTapTimeout);
                 this.pendingTapTimeout = null;
             }
-            // Handle double-tap to skip (mobile-style)
-            if (!this.config.isLive) {
-                if (relativeX < 0.33) {
-                    // Left third - skip back
-                    this.config.onSeek(-SKIP_AMOUNT_SECONDS);
-                }
-                else if (relativeX > 0.67) {
-                    // Right third - skip forward
-                    this.config.onSeek(SKIP_AMOUNT_SECONDS);
-                }
-                else {
-                    // Center - treat as play/pause
-                    this.config.onPlayPause();
+            // Mouse double-click handled via dblclick event (fullscreen)
+            if (!isMouse) {
+                // Handle double-tap to skip (mobile-style)
+                if (!this.config.isLive) {
+                    if (relativeX < 0.33) {
+                        // Left third - skip back
+                        this.config.onSeek(-SKIP_AMOUNT_SECONDS);
+                    }
+                    else if (relativeX > 0.67) {
+                        // Right third - skip forward
+                        this.config.onSeek(SKIP_AMOUNT_SECONDS);
+                    }
+                    else {
+                        // Center - treat as play/pause
+                        this.config.onPlayPause();
+                    }
                 }
             }
             this.lastTapTime = 0;
@@ -12124,13 +12476,26 @@ class InteractionController {
             'select',
             '.fw-player-controls',
             '[data-player-controls]',
+            '.fw-controls-wrapper',
             '.fw-control-bar',
-            '.fw-player-surface',
+            '.fw-settings-menu',
+            '.fw-context-menu',
+            '.fw-stats-panel',
+            '.fw-dev-panel',
+            '.fw-error-overlay',
+            '.fw-error-popup',
+            '.fw-player-error',
         ];
         return controlSelectors.some(selector => {
             return target.matches(selector) || target.closest(selector) !== null;
         });
     }
+    getFrameStepSeconds() {
+        const step = this.config.frameStepSeconds;
+        if (Number.isFinite(step) && step > 0)
+            return step;
+        return 1 / 30;
+    }
 }
 
 /**
@@ -13049,7 +13414,7 @@ class QualityMonitor {
  * ```ts
  * const manager = new MetaTrackManager({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  * });
  *
  * manager.subscribe('1', (event) => {
@@ -13752,13 +14117,13 @@ function supportsPlaybackRate(video) {
  * 1. Browser's video.seekable ranges (most accurate for MSE-based players)
  * 2. Track firstms/lastms from MistServer metadata
  * 3. buffer_window from MistServer signaling
- * 4. Fallback (only for non-WebRTC sources)
+ * 4. No fallback (treat as live-only when no reliable data)
  *
  * @param params - Calculation parameters
  * @returns Seekable range with start and live edge
  */
 function calculateSeekableRange(params) {
-    const { isLive, video, mistStreamInfo, currentTime, duration } = params;
+    const { isLive, video, mistStreamInfo, currentTime, duration, allowMediaStreamDvr = false } = params;
     // VOD: full duration is seekable
     if (!isLive) {
         return { seekableStart: 0, liveEdge: duration };
@@ -13773,8 +14138,8 @@ function calculateSeekableRange(params) {
         }
     }
     // PRIORITY 2: Track firstms/lastms from MistServer (accurate when available)
-    // Skip for MediaStream - track data doesn't indicate seekable buffer
-    if (!isMediaStream && mistStreamInfo?.meta?.tracks) {
+    // Skip for MediaStream unless explicitly allowed (e.g., WebCodecs DVR via server)
+    if ((allowMediaStreamDvr || !isMediaStream) && mistStreamInfo?.meta?.tracks) {
         const tracks = Object.values(mistStreamInfo.meta.tracks);
         if (tracks.length > 0) {
             const firstmsValues = tracks.map(t => t.firstms).filter((v) => v !== undefined);
@@ -13795,16 +14160,7 @@ function calculateSeekableRange(params) {
             liveEdge: currentTime,
         };
     }
-    // PRIORITY 4: Fallback for non-WebRTC sources only
-    // WebRTC has no DVR buffer by default, so don't create a fake seekable window
-    // Use reference player's 60s default for other protocols
-    if (!isMediaStream && currentTime > 0) {
-        return {
-            seekableStart: Math.max(0, currentTime - DEFAULT_BUFFER_WINDOW_SEC),
-            liveEdge: currentTime,
-        };
-    }
-    // For WebRTC or unknown: no seekable range (live only)
+    // No seekable range (live only)
     return { seekableStart: currentTime, liveEdge: currentTime };
 }
 /**
@@ -13942,6 +14298,9 @@ function isLiveContent(isContentLive, mistStreamInfo, duration) {
  * Both React and Vanilla wrappers use this class internally.
  */
 // ============================================================================
+// Content Type Resolution Helpers
+// ============================================================================
+// ============================================================================
 // MistServer Source Type Mapping
 // ============================================================================
 /**
@@ -13963,6 +14322,8 @@ const MIST_SOURCE_TYPES = {
     // ===== WEBSOCKET STREAMING =====
     'ws/video/mp4': { hrn: 'MP4 WebSocket', player: 'mews', supported: true },
     'wss/video/mp4': { hrn: 'MP4 WebSocket (SSL)', player: 'mews', supported: true },
+    'ws/video/webm': { hrn: 'WebM WebSocket', player: 'mews', supported: true },
+    'wss/video/webm': { hrn: 'WebM WebSocket (SSL)', player: 'mews', supported: true },
     'ws/video/raw': { hrn: 'Raw WebSocket', player: 'webcodecs', supported: true },
     'wss/video/raw': { hrn: 'Raw WebSocket (SSL)', player: 'webcodecs', supported: true },
     'ws/video/h264': { hrn: 'Annex B WebSocket', player: 'webcodecs', supported: true },
@@ -13970,6 +14331,7 @@ const MIST_SOURCE_TYPES = {
     // ===== WEBRTC =====
     'whep': { hrn: 'WebRTC (WHEP)', player: 'native', supported: true },
     'webrtc': { hrn: 'WebRTC (WebSocket)', player: 'mist-webrtc', supported: true },
+    'mist/webrtc': { hrn: 'MistServer WebRTC', player: 'mist-webrtc', supported: true },
     // ===== AUDIO ONLY =====
     'html5/audio/aac': { hrn: 'AAC progressive', player: 'native', supported: true },
     'html5/audio/mp3': { hrn: 'MP3 progressive', player: 'native', supported: true },
@@ -14008,12 +14370,17 @@ const PROTOCOL_TO_MIME = {
     'WEBM': 'html5/video/webm',
     'WHEP': 'whep',
     'WebRTC': 'webrtc',
+    'MIST_WEBRTC': 'mist/webrtc', // MistServer native WebRTC signaling
     // WebSocket variants
     'MEWS': 'ws/video/mp4',
     'MEWS_WS': 'ws/video/mp4',
     'MEWS_WSS': 'wss/video/mp4',
+    'MEWS_WEBM': 'ws/video/webm',
+    'MEWS_WEBM_SSL': 'wss/video/webm',
     'RAW_WS': 'ws/video/raw',
     'RAW_WSS': 'wss/video/raw',
+    'H264_WS': 'ws/video/h264',
+    'H264_WSS': 'wss/video/h264',
     // Audio
     'AAC': 'html5/audio/aac',
     'MP3': 'html5/audio/mp3',
@@ -14098,7 +14465,7 @@ function buildStreamInfoFromEndpoints(endpoints, contentId) {
             try {
                 outputs = JSON.parse(primary.outputs);
             }
-            catch (e) {
+            catch {
                 console.warn('[buildStreamInfoFromEndpoints] Failed to parse outputs JSON');
                 outputs = {};
             }
@@ -14109,7 +14476,6 @@ function buildStreamInfoFromEndpoints(endpoints, contentId) {
     }
     const sources = [];
     const oKeys = Object.keys(outputs);
-    // Helper to attach MistServer sources
     const attachMistSource = (html, playerJs) => {
         if (!html && !playerJs)
             return;
@@ -14207,7 +14573,7 @@ function buildStreamInfoFromEndpoints(endpoints, contentId) {
  * @example
  * ```typescript
  * const controller = new PlayerController({
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  *   contentType: 'live',
  *   gatewayUrl: 'https://gateway.example.com/graphql',
  * });
@@ -14227,6 +14593,7 @@ class PlayerController extends TypedEventEmitter {
         super();
         this.state = 'booting';
         this.lastEmittedState = null;
+        this.suppressPlayPauseEventsUntil = 0;
         this.gatewayClient = null;
         this.streamStateClient = null;
         this.currentPlayer = null;
@@ -14237,6 +14604,10 @@ class PlayerController extends TypedEventEmitter {
         this.streamState = null;
         /** Tracks parsed from MistServer JSON response (used for direct MistServer mode) */
         this.mistTracks = null;
+        /** Gateway-seeded metadata (used as base for Mist enrichment) */
+        this.metadataSeed = null;
+        /** Merged metadata (gateway seed + Mist enrichment) */
+        this.metadata = null;
         this.cleanupFns = [];
         this.isDestroyed = false;
         this.isAttached = false;
@@ -14386,6 +14757,8 @@ class PlayerController extends TypedEventEmitter {
         this.endpoints = null;
         this.streamInfo = null;
         this.streamState = null;
+        this.metadataSeed = null;
+        this.metadata = null;
         this.videoElement = null;
         this.currentPlayer = null;
         this.lastEmittedState = null;
@@ -14420,7 +14793,115 @@ class PlayerController extends TypedEventEmitter {
     }
     /** Get content metadata (title, description, duration, etc.) */
     getMetadata() {
-        return this.endpoints?.metadata ?? null;
+        return this.metadata ?? null;
+    }
+    // ============================================================================
+    // Metadata Merge (Gateway seed + Mist enrichment)
+    // ============================================================================
+    setMetadataSeed(seed) {
+        this.metadataSeed = seed ? { ...seed } : null;
+        this.refreshMergedMetadata();
+    }
+    refreshMergedMetadata() {
+        const seed = this.metadataSeed ? { ...this.metadataSeed } : null;
+        const mist = this.streamState?.streamInfo;
+        const streamStatus = this.streamState?.status;
+        if (!seed && !mist) {
+            this.metadata = null;
+            return;
+        }
+        const merged = seed ? { ...seed } : {};
+        if (mist) {
+            merged.mist = this.sanitizeMistInfo(mist);
+            if (mist.type) {
+                merged.contentType = mist.type;
+                merged.isLive = mist.type === 'live';
+            }
+            if (streamStatus) {
+                merged.status = streamStatus;
+            }
+            if (mist.meta?.duration && (!merged.durationSeconds || merged.durationSeconds <= 0)) {
+                merged.durationSeconds = Math.round(mist.meta.duration);
+            }
+            if (mist.meta?.tracks) {
+                merged.tracks = this.buildMetadataTracks(mist.meta.tracks);
+            }
+        }
+        this.metadata = merged;
+    }
+    buildMetadataTracks(tracksObj) {
+        const tracks = [];
+        for (const [, trackData] of Object.entries(tracksObj)) {
+            const t = trackData;
+            const trackType = t.type;
+            if (trackType !== 'video' && trackType !== 'audio' && trackType !== 'meta') {
+                continue;
+            }
+            const bitrate = typeof t.bps === 'number' ? Math.round(t.bps) : undefined;
+            const fps = typeof t.fpks === 'number' ? t.fpks / 1000 : undefined;
+            tracks.push({
+                type: trackType,
+                codec: t.codec,
+                width: t.width,
+                height: t.height,
+                bitrate,
+                fps,
+                channels: t.channels,
+                sampleRate: t.rate,
+            });
+        }
+        return tracks.length ? tracks : undefined;
+    }
+    sanitizeMistInfo(info) {
+        const sanitized = {
+            error: info.error,
+            on_error: info.on_error,
+            perc: info.perc,
+            type: info.type,
+            hasVideo: info.hasVideo,
+            hasAudio: info.hasAudio,
+            unixoffset: info.unixoffset,
+            lastms: info.lastms,
+        };
+        if (info.source) {
+            sanitized.source = info.source.map((src) => ({
+                url: src.url,
+                type: src.type,
+                priority: src.priority,
+                simul_tracks: src.simul_tracks,
+                relurl: src.relurl,
+            }));
+        }
+        if (info.meta) {
+            sanitized.meta = {
+                buffer_window: info.meta.buffer_window,
+                duration: info.meta.duration,
+                mistUrl: info.meta.mistUrl,
+            };
+            if (info.meta.tracks) {
+                const tracks = {};
+                for (const [key, track] of Object.entries(info.meta.tracks)) {
+                    tracks[key] = {
+                        type: track.type,
+                        codec: track.codec,
+                        width: track.width,
+                        height: track.height,
+                        bps: track.bps,
+                        fpks: track.fpks,
+                        codecstring: track.codecstring,
+                        firstms: track.firstms,
+                        lastms: track.lastms,
+                        lang: track.lang,
+                        idx: track.idx,
+                        channels: track.channels,
+                        rate: track.rate,
+                        size: track.size,
+                    };
+                }
+                sanitized.meta.tracks = tracks;
+            }
+        }
+        return sanitized;
     }
     /** Get stream info (sources + tracks for player selection) */
     getStreamInfo() {
@@ -14443,7 +14924,8 @@ class PlayerController extends TypedEventEmitter {
     // ============================================================================
     /** Check if video is currently playing (not paused) */
     isPlaying() {
-        return this.videoElement ? !this.videoElement.paused : false;
+        const paused = this.currentPlayer?.isPaused?.() ?? this.videoElement?.paused ?? true;
+        return !paused;
     }
     /** Check if currently buffering */
     isBuffering() {
@@ -14556,6 +15038,28 @@ class PlayerController extends TypedEventEmitter {
     canAdjustPlaybackRate() {
         return this._supportsPlaybackRate;
     }
+    /** Resolve content type from config override or Gateway metadata */
+    getResolvedContentType() {
+        if (this.config.contentType) {
+            return this.config.contentType;
+        }
+        const metadata = this.getMetadata();
+        const metaType = metadata?.contentType?.toLowerCase();
+        if (metaType === 'live' || metaType === 'clip' || metaType === 'dvr' || metaType === 'vod') {
+            return metaType;
+        }
+        const mistType = this.streamState?.streamInfo?.type;
+        if (mistType === 'live' || mistType === 'vod') {
+            return mistType;
+        }
+        if (metadata?.isLive === true) {
+            return 'live';
+        }
+        if (metadata?.isLive === false) {
+            return 'vod';
+        }
+        return null;
+    }
     /** Check if source is WebRTC/MediaStream */
     isWebRTCSource() {
         return this._isWebRTC;
@@ -14568,13 +15072,28 @@ class PlayerController extends TypedEventEmitter {
     }
     /** Check if content is effectively live (live or DVR still recording) */
     isEffectivelyLive() {
-        const { contentType } = this.config;
+        const contentType = this.getResolvedContentType() ?? 'live';
         const metadata = this.getMetadata();
-        return contentType === 'live' || (contentType === 'dvr' && metadata?.dvrStatus === 'recording');
+        // Explicit VOD content types are never live
+        if (contentType === 'vod' || contentType === 'clip') {
+            return false;
+        }
+        // If Gateway metadata says it's not live, trust it
+        if (metadata?.isLive === false) {
+            return false;
+        }
+        // DVR that's finished recording is not live
+        if (contentType === 'dvr' && metadata?.dvrStatus === 'completed') {
+            return false;
+        }
+        // Default: trust contentType or duration-based detection
+        return contentType === 'live' ||
+            (contentType === 'dvr' && metadata?.dvrStatus === 'recording') ||
+            !Number.isFinite(this.getDuration());
     }
     /** Check if content is strictly live (not DVR/clip/vod) */
     isLive() {
-        return this.config.contentType === 'live';
+        return (this.getResolvedContentType() ?? 'live') === 'live';
     }
     /**
      * Check if content needs cold start (VOD-like loading).
@@ -14583,7 +15102,10 @@ class PlayerController extends TypedEventEmitter {
      * DVR-while-recording needs cold start because MistServer may not be serving the VOD yet
      */
     needsColdStart() {
-        return this.config.contentType !== 'live';
+        const contentType = this.getResolvedContentType();
+        if (!contentType)
+            return true;
+        return contentType !== 'live';
     }
     /**
      * Check if we should show idle/loading screen.
@@ -14725,12 +15247,20 @@ class PlayerController extends TypedEventEmitter {
     // ============================================================================
     /** Start playback */
     async play() {
+        if (this.currentPlayer?.play) {
+            await this.currentPlayer.play();
+            return;
+        }
         if (this.videoElement) {
             await this.videoElement.play();
         }
     }
     /** Pause playback */
     pause() {
+        if (this.currentPlayer?.pause) {
+            this.currentPlayer.pause();
+            return;
+        }
         this.videoElement?.pause();
     }
     /** Seek to time */
@@ -14780,6 +15310,24 @@ class PlayerController extends TypedEventEmitter {
         // Try player-specific implementation first (WebCodecs uses server time)
         if (this.currentPlayer?.jumpToLive) {
             this.currentPlayer.jumpToLive();
+            const el = this.videoElement;
+            if (el && !isMediaStreamSource(el)) {
+                const target = this._liveEdge;
+                if (Number.isFinite(target) && target > 0) {
+                    // Fallback: if player-specific jump doesn't move, seek to computed live edge
+                    setTimeout(() => {
+                        if (!this.videoElement)
+                            return;
+                        const current = this.getEffectiveCurrentTime();
+                        if (target - current > 1) {
+                            try {
+                                this.videoElement.currentTime = target;
+                            }
+                            catch { }
+                        }
+                    }, 200);
+                }
+            }
             this._isNearLive = true;
             this.emitSeekingState();
             return;
@@ -14888,6 +15436,19 @@ class PlayerController extends TypedEventEmitter {
         }
         return null;
     }
+    getFrameStepSecondsFromTracks() {
+        const tracks = this.streamInfo?.meta?.tracks;
+        if (!tracks || tracks.length === 0)
+            return undefined;
+        const videoTracks = tracks.filter(t => t.type === 'video' && typeof t.fpks === 'number' && t.fpks > 0);
+        if (videoTracks.length === 0)
+            return undefined;
+        const fpks = Math.max(...videoTracks.map(t => t.fpks));
+        if (!Number.isFinite(fpks) || fpks <= 0)
+            return undefined;
+        // fpks = frames per kilosecond => frame duration in seconds = 1000 / fpks
+        return 1000 / fpks;
+    }
     deriveBufferWindowMsFromTracks(tracks) {
         if (!tracks)
             return undefined;
@@ -14915,7 +15476,15 @@ class PlayerController extends TypedEventEmitter {
     }
     /** Check if paused */
     isPaused() {
-        return this.videoElement?.paused ?? true;
+        return this.currentPlayer?.isPaused?.() ?? this.videoElement?.paused ?? true;
+    }
+    /** Suppress play/pause-driven UI updates for a short window */
+    suppressPlayPauseEvents(ms = 200) {
+        this.suppressPlayPauseEventsUntil = Date.now() + ms;
+    }
+    /** Check if play/pause UI updates should be suppressed */
+    shouldSuppressVideoEvents() {
+        return Date.now() < this.suppressPlayPauseEventsUntil;
     }
     /** Check if muted */
     isMuted() {
@@ -14933,8 +15502,18 @@ class PlayerController extends TypedEventEmitter {
     }
     /** Toggle play/pause */
     togglePlay() {
-        if (this.videoElement?.paused) {
-            this.videoElement.play().catch(() => { });
+        const isPaused = this.currentPlayer?.isPaused?.() ?? this.videoElement?.paused ?? true;
+        if (isPaused) {
+            if (this.currentPlayer?.play) {
+                this.currentPlayer.play().catch(() => { });
+            }
+            else {
+                this.videoElement?.play().catch(() => { });
+            }
+            return;
+        }
+        if (this.currentPlayer?.pause) {
+            this.currentPlayer.pause();
         }
         else {
             this.videoElement?.pause();
@@ -15030,6 +15609,9 @@ class PlayerController extends TypedEventEmitter {
         this._liveThresholds = calculateLiveThresholds(sourceType, this._isWebRTC, bufferWindowMs);
         // Calculate seekable range using centralized logic (allow player overrides)
         const playerRange = this.getPlayerSeekableRange();
+        const allowMediaStreamDvr = isMediaStreamSource(el) &&
+            (bufferWindowMs !== undefined && bufferWindowMs > 0) &&
+            (sourceType !== 'whep' && sourceType !== 'webrtc');
         const { seekableStart, liveEdge } = playerRange
             ? { seekableStart: playerRange.start, liveEdge: playerRange.end }
             : calculateSeekableRange({
@@ -15038,6 +15620,7 @@ class PlayerController extends TypedEventEmitter {
                 mistStreamInfo,
                 currentTime,
                 duration,
+                allowMediaStreamDvr,
             });
         // Update can seek - pass player's canSeek if available (e.g., WebCodecs uses server commands)
         const playerCanSeek = this.currentPlayer && typeof this.currentPlayer.canSeek === 'function'
@@ -15054,9 +15637,15 @@ class PlayerController extends TypedEventEmitter {
         this._buffered = el.buffered.length > 0 ? el.buffered : null;
         // Check if values changed
         const seekableChanged = this._seekableStart !== seekableStart || this._liveEdge !== liveEdge;
-        this._canSeek !== this._canSeek; // Already updated above
         this._seekableStart = seekableStart;
         this._liveEdge = liveEdge;
+        // Update interaction controller live-only state (allow DVR shortcuts when seekable window exists)
+        const hasDvrWindow = isLive && Number.isFinite(liveEdge) && Number.isFinite(seekableStart) && liveEdge > seekableStart;
+        const isLiveOnly = isLive && !hasDvrWindow;
+        this.interactionController?.updateConfig({
+            isLive: isLiveOnly,
+            frameStepSeconds: this.getFrameStepSecondsFromTracks(),
+        });
         // Update isNearLive using hysteresis
         if (isLive) {
             const newIsNearLive = calculateIsNearLive(currentTime, liveEdge, this._liveThresholds, this._isNearLive);
@@ -15413,10 +16002,11 @@ class PlayerController extends TypedEventEmitter {
     // Private Methods
     // ============================================================================
     async resolveEndpoints() {
-        const { endpoints, gatewayUrl, mistUrl, contentType, contentId, authToken } = this.config;
+        const { endpoints, gatewayUrl, mistUrl, contentId, authToken } = this.config;
         // Priority 1: Use pre-resolved endpoints if provided
         if (endpoints?.primary) {
             this.endpoints = endpoints;
+            this.setMetadataSeed(endpoints.metadata ?? null);
             this.setState('gateway_ready', { gatewayStatus: 'ready' });
             return;
         }
@@ -15427,7 +16017,7 @@ class PlayerController extends TypedEventEmitter {
         }
         // Priority 3: Gateway resolution
         if (gatewayUrl) {
-            await this.resolveFromGateway(gatewayUrl, contentType, contentId, authToken);
+            await this.resolveFromGateway(gatewayUrl, contentId, authToken);
             return;
         }
         throw new Error('No endpoints provided and no gatewayUrl or mistUrl configured');
@@ -15445,7 +16035,13 @@ class PlayerController extends TypedEventEmitter {
             if (!response.ok) {
                 throw new Error(`MistServer HTTP ${response.status}`);
             }
-            const data = await response.json();
+            // MistServer can return JSONP: callback({...}); - strip wrapper if present
+            let text = await response.text();
+            const jsonpMatch = text.match(/^[^(]+\(([\s\S]*)\);?$/);
+            if (jsonpMatch) {
+                text = jsonpMatch[1];
+            }
+            const data = JSON.parse(text);
             if (data.error) {
                 throw new Error(data.error);
             }
@@ -15474,6 +16070,7 @@ class PlayerController extends TypedEventEmitter {
                 outputs,
             };
             this.endpoints = { primary, fallbacks: [] };
+            this.setMetadataSeed(null);
             // Parse track metadata from MistServer response
             if (data.meta?.tracks && typeof data.meta.tracks === 'object') {
                 const tracks = this.parseMistTracks(data.meta.tracks);
@@ -15494,14 +16091,25 @@ class PlayerController extends TypedEventEmitter {
      */
     mapMistTypeToProtocol(mistType) {
         // WebCodecs raw streams - check BEFORE generic ws/ catch-all
-        // MistServer rawws.js uses 'ws/video/raw', mews.js uses 'ws/video/mp4' and 'ws/video/webm'
         if (mistType === 'ws/video/raw')
             return 'RAW_WS';
         if (mistType === 'wss/video/raw')
             return 'RAW_WSS';
-        // MEWS (MP4/WebM over WebSocket) - catches remaining ws/* types
-        if (mistType.startsWith('ws/') || mistType.startsWith('wss/'))
+        // Annex B H264 over WebSocket (video-only, uses same 12-byte header as raw)
+        if (mistType === 'ws/video/h264')
+            return 'H264_WS';
+        if (mistType === 'wss/video/h264')
+            return 'H264_WSS';
+        // WebM over WebSocket - check BEFORE generic ws/ catch-all
+        if (mistType === 'ws/video/webm')
+            return 'MEWS_WEBM';
+        if (mistType === 'wss/video/webm')
+            return 'MEWS_WEBM_SSL';
+        // MEWS MP4 over WebSocket - catch remaining ws/* types (defaults to mp4)
+        if (mistType.startsWith('ws/'))
             return 'MEWS_WS';
+        if (mistType.startsWith('wss/'))
+            return 'MEWS_WSS';
         if (mistType.includes('webrtc'))
             return 'MIST_WEBRTC';
         if (mistType.includes('mpegurl') || mistType.includes('m3u8'))
@@ -15532,11 +16140,10 @@ class PlayerController extends TypedEventEmitter {
     /**
      * Resolve endpoints from Gateway GraphQL API
      */
-    async resolveFromGateway(gatewayUrl, contentType, contentId, authToken) {
+    async resolveFromGateway(gatewayUrl, contentId, authToken) {
         this.setState('gateway_loading', { gatewayStatus: 'loading' });
         this.gatewayClient = new GatewayClient({
             gatewayUrl,
-            contentType,
             contentId,
             authToken,
         });
@@ -15550,6 +16157,7 @@ class PlayerController extends TypedEventEmitter {
         this.cleanupFns.push(() => this.gatewayClient?.destroy());
         try {
             this.endpoints = await this.gatewayClient.resolve();
+            this.setMetadataSeed(this.endpoints?.metadata ?? null);
             this.setState('gateway_ready', { gatewayStatus: 'ready' });
         }
         catch (error) {
@@ -15559,10 +16167,18 @@ class PlayerController extends TypedEventEmitter {
         }
     }
     startStreamStatePolling() {
-        const { contentType, contentId, mistUrl } = this.config;
+        const { contentId, mistUrl } = this.config;
+        const contentType = this.getResolvedContentType();
         // Only poll for live-like content. DVR should only poll while recording.
-        if (contentType !== 'live' && contentType !== 'dvr')
+        // If contentType is unknown but mistUrl is provided, still poll so we can
+        // detect when a stream comes online and initialize playback.
+        if (contentType == null) {
+            if (!mistUrl)
+                return;
+        }
+        else if (contentType !== 'live' && contentType !== 'dvr') {
             return;
+        }
         if (contentType === 'dvr') {
             const dvrStatus = this.getMetadata()?.dvrStatus;
             if (dvrStatus && dvrStatus !== 'recording')
@@ -15601,6 +16217,8 @@ class PlayerController extends TypedEventEmitter {
                     this.log(`[stateChange] Updated ${mistTracks.length} tracks from MistServer`);
                 }
             }
+            // Merge Mist metadata into the unified metadata surface
+            this.refreshMergedMetadata();
             this.emit('streamStateChange', { state });
             // Auto-play when stream transitions from offline to online
             // This handles the case where user is watching IdleScreen and stream comes online
@@ -15659,6 +16277,7 @@ class PlayerController extends TypedEventEmitter {
                 outputs,
             };
             this.endpoints = { primary, fallbacks: [] };
+            this.setMetadataSeed(this.endpoints.metadata ?? null);
             // Parse track metadata from stream info
             if (streamInfo.meta?.tracks && typeof streamInfo.meta.tracks === 'object') {
                 const tracks = this.parseMistTracks(streamInfo.meta.tracks);
@@ -15775,6 +16394,7 @@ class PlayerController extends TypedEventEmitter {
             muted: muted !== false,
             controls: controls !== false,
             poster: poster,
+            debug: this.config.debug,
             onReady: (el) => {
                 // Guard against zombie callbacks after destroy
                 if (this.isDestroyed || !this.container) {
@@ -15798,7 +16418,7 @@ class PlayerController extends TypedEventEmitter {
                 this.initializeSubControllers();
                 this.emit('ready', { videoElement: el });
             },
-            onTimeUpdate: (t) => {
+            onTimeUpdate: (_t) => {
                 if (this.isDestroyed)
                     return;
                 // Defensive: keep video element attached even if some other lifecycle cleared the container.
@@ -15859,6 +16479,8 @@ class PlayerController extends TypedEventEmitter {
             this.setState('buffering');
         };
         const onPlaying = () => {
+            if (this.shouldSuppressVideoEvents())
+                return;
             this._isBuffering = false;
             this._hasPlaybackStarted = true;
             // Clear stall timer on successful playback
@@ -15878,7 +16500,11 @@ class PlayerController extends TypedEventEmitter {
             // Attempt to clear error on canplay
             this.attemptClearError();
         };
-        const onPause = () => this.setState('paused');
+        const onPause = () => {
+            if (this.shouldSuppressVideoEvents())
+                return;
+            this.setState('paused');
+        };
         const onEnded = () => this.setState('ended');
         const onError = () => {
             const message = el.error ? el.error.message || 'Playback error' : 'Playback error';
@@ -16049,10 +16675,29 @@ class PlayerController extends TypedEventEmitter {
         if (!this.container || !this.videoElement)
             return;
         const isLive = this.isEffectivelyLive();
+        const hasDvrWindow = isLive && Number.isFinite(this._liveEdge) && Number.isFinite(this._seekableStart) && this._liveEdge > this._seekableStart;
+        const isLiveOnly = isLive && !hasDvrWindow;
+        const interactionContainer = this.container.closest('[data-player-container="true"]') ?? this.container;
         this.interactionController = new InteractionController({
-            container: this.container,
+            container: interactionContainer,
             videoElement: this.videoElement,
-            isLive,
+            isLive: isLiveOnly,
+            isPaused: () => this.currentPlayer?.isPaused?.() ?? this.videoElement?.paused ?? true,
+            frameStepSeconds: this.getFrameStepSecondsFromTracks(),
+            onFrameStep: (direction, seconds) => {
+                const player = this.currentPlayer ?? this.playerManager.getCurrentPlayer();
+                const playerName = player?.capability?.shortname ?? this._currentPlayerInfo?.shortname ?? 'unknown';
+                const hasFrameStep = typeof player?.frameStep === 'function';
+                this.log(`[interaction] frameStep dir=${direction} player=${playerName} hasFrameStep=${hasFrameStep}`);
+                if (playerName === 'webcodecs') {
+                    this.suppressPlayPauseEvents(250);
+                }
+                if (hasFrameStep && player && player.frameStep) {
+                    player.frameStep(direction, seconds);
+                    return true;
+                }
+                return false;
+            },
             onPlayPause: () => this.togglePlay(),
             onSeek: (delta) => {
                 // End any speed hold before seeking
@@ -16392,7 +17037,7 @@ class SubtitleManager {
             try {
                 textTrack.addCue(cue);
             }
-            catch (e) {
+            catch {
                 // Ignore errors from invalid cue timing
             }
         }
@@ -16774,7 +17419,8 @@ function formatTimeDisplay(params) {
             }
             return `-${formatTime(Math.abs(behindSeconds))}`;
         }
-        return formatTime(currentTime);
+        // No DVR window: show LIVE instead of a misleading timestamp
+        return 'LIVE';
     }
     // VOD: show current / total
     if (Number.isFinite(duration) && duration > 0) {