@livepeer-frameworks/player-core 0.0.4 → 0.1.0

package/dist/player.css

@@ -252,284 +252,6 @@
     -webkit-user-select: none;
   }
 
-  /* =====================================================
-     UTILITY CLASSES - All utilities needed by components
-     ===================================================== */
-
-  /* Layout */
-  .flex { display: flex; }
-  .inline-flex { display: inline-flex; }
-  .hidden { display: none; }
-  .block { display: block; }
-  .relative { position: relative; }
-  .absolute { position: absolute; }
-  .fixed { position: fixed; }
-
-  /* Flex utilities */
-  .flex-col { flex-direction: column; }
-  .flex-row { flex-direction: row; }
-  .flex-wrap { flex-wrap: wrap; }
-  .flex-1 { flex: 1 1 0%; }
-  .flex-shrink { flex-shrink: 1; }
-  .flex-shrink-0 { flex-shrink: 0; }
-  .items-center { align-items: center; }
-  .items-start { align-items: flex-start; }
-  .items-end { align-items: flex-end; }
-  .justify-center { justify-content: center; }
-  .justify-between { justify-content: space-between; }
-  .justify-end { justify-content: flex-end; }
-
-  /* Positioning */
-  .inset-0 { inset: 0; }
-  .inset-x-0 { left: 0; right: 0; }
-  .inset-y-0 { top: 0; bottom: 0; }
-  .top-0 { top: 0; }
-  .top-2 { top: 0.5rem; }
-  .top-3 { top: 0.75rem; }
-  .right-0 { right: 0; }
-  .right-2 { right: 0.5rem; }
-  .right-3 { right: 0.75rem; }
-  .bottom-0 { bottom: 0; }
-  .bottom-2 { bottom: 0.5rem; }
-  .left-0 { left: 0; }
-  .left-2 { left: 0.5rem; }
-  .left-3 { left: 0.75rem; }
-
-  /* Z-index */
-  .z-10 { z-index: 10; }
-  .z-20 { z-index: 20; }
-  .z-30 { z-index: 30; }
-  .z-50 { z-index: 50; }
-
-  /* Sizing */
-  .w-0 { width: 0; }
-  .w-2 { width: 0.5rem; }
-  .w-2\.5 { width: 0.625rem; }
-  .w-4 { width: 1rem; }
-  .w-5 { width: 1.25rem; }
-  .w-6 { width: 1.5rem; }
-  .w-8 { width: 2rem; }
-  .w-10 { width: 2.5rem; }
-  .w-12 { width: 3rem; }
-  .w-24 { width: 6rem; }
-  .w-28 { width: 7rem; }
-  .w-48 { width: 12rem; }
-  .w-full { width: 100%; }
-  .h-1 { height: 0.25rem; }
-  .h-1\.5 { height: 0.375rem; }
-  .h-2 { height: 0.5rem; }
-  .h-2\.5 { height: 0.625rem; }
-  .h-4 { height: 1rem; }
-  .h-5 { height: 1.25rem; }
-  .h-6 { height: 1.5rem; }
-  .h-8 { height: 2rem; }
-  .h-10 { height: 2.5rem; }
-  .h-12 { height: 3rem; }
-  .h-full { height: 100%; }
-  .min-w-0 { min-width: 0; }
-  .min-w-\[280px\] { min-width: 280px; }
-  .max-w-xs { max-width: 20rem; }
-  .max-w-sm { max-width: 24rem; }
-  .max-w-md { max-width: 28rem; }
-  .max-h-32 { max-height: 8rem; }
-  .max-h-\[80\%\] { max-height: 80%; }
-  .max-w-\[320px\] { max-width: 320px; }
-
-  /* Spacing */
-  .gap-0\.5 { gap: 0.125rem; }
-  .gap-1 { gap: 0.25rem; }
-  .gap-2 { gap: 0.5rem; }
-  .gap-3 { gap: 0.75rem; }
-  .gap-4 { gap: 1rem; }
-  .space-x-1 > * + * { margin-left: 0.25rem; }
-  .space-x-2 > * + * { margin-left: 0.5rem; }
-  .space-y-1 > * + * { margin-top: 0.25rem; }
-  .p-1 { padding: 0.25rem; }
-  .p-2 { padding: 0.5rem; }
-  .p-3 { padding: 0.75rem; }
-  .p-4 { padding: 1rem; }
-  .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
-  .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
-  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
-  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-  .px-4 { padding-left: 1rem; padding-right: 1rem; }
-  .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
-  .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
-  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
-  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
-  .pr-2 { padding-right: 0.5rem; }
-  .pr-5 { padding-right: 1.25rem; }
-  .m-0 { margin: 0; }
-  .mx-auto { margin-left: auto; margin-right: auto; }
-  .mt-1 { margin-top: 0.25rem; }
-  .mt-2 { margin-top: 0.5rem; }
-  .mb-1 { margin-bottom: 0.25rem; }
-  .mb-2 { margin-bottom: 0.5rem; }
-  .-mb-1 { margin-bottom: -0.25rem; }
-  .-ml-4 { margin-left: -1rem; }
-  .ml-0\.5 { margin-left: 0.125rem; }
-
-  /* Typography */
-  .text-\[10px\] { font-size: 10px; }
-  .text-\[11px\] { font-size: 11px; }
-  .text-xs { font-size: 0.75rem; line-height: 1rem; }
-  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
-  .text-base { font-size: 1rem; line-height: 1.5rem; }
-  .text-center { text-align: center; }
-  .text-left { text-align: left; }
-  .text-right { text-align: right; }
-  .font-medium { font-weight: 500; }
-  .font-semibold { font-weight: 600; }
-  .font-bold { font-weight: 700; }
-  .font-mono { font-family: ui-monospace, monospace; }
-  .uppercase { text-transform: uppercase; }
-  .leading-none { line-height: 1; }
-  .tracking-wide { letter-spacing: 0.025em; }
-  .tracking-wider { letter-spacing: 0.05em; }
-  .whitespace-nowrap { white-space: nowrap; }
-  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-  /* Colors - Generic */
-  .text-white { color: white; }
-  .text-white\/50 { color: rgb(255 255 255 / 0.5); }
-  .text-white\/60 { color: rgb(255 255 255 / 0.6); }
-  .text-white\/70 { color: rgb(255 255 255 / 0.7); }
-  .text-white\/80 { color: rgb(255 255 255 / 0.8); }
-  .text-white\/90 { color: rgb(255 255 255 / 0.9); }
-  .bg-transparent { background-color: transparent; }
-  .bg-black { background-color: black; }
-  .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); }
-  .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
-  .bg-black\/60 { background-color: rgb(0 0 0 / 0.6); }
-  .bg-black\/70 { background-color: rgb(0 0 0 / 0.7); }
-  .bg-black\/80 { background-color: rgb(0 0 0 / 0.8); }
-  .bg-black\/90 { background-color: rgb(0 0 0 / 0.9); }
-  .bg-white { background-color: white; }
-  .bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
-  .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
-  .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
-  .bg-white\/30 { background-color: rgb(255 255 255 / 0.3); }
-  .bg-white\/50 { background-color: rgb(255 255 255 / 0.5); }
-  .border-white\/10 { border-color: rgb(255 255 255 / 0.1); }
-
-  /* Colors - Tokyo Night */
-  .bg-tn-bg-dark { background-color: hsl(var(--tn-bg-dark)); }
-  .bg-tn-bg { background-color: hsl(var(--tn-bg)); }
-  .bg-tn-bg-highlight { background-color: hsl(var(--tn-bg-highlight)); }
-  .bg-tn-bg-visual { background-color: hsl(var(--tn-bg-visual)); }
-  .text-tn-fg { color: hsl(var(--tn-fg)); }
-  .text-tn-fg-dark { color: hsl(var(--tn-fg-dark)); }
-  .text-tn-blue { color: hsl(var(--tn-blue)); }
-  .text-tn-bg-dark { color: hsl(var(--tn-bg-dark)); }
-  .text-tn-accent { color: hsl(var(--tn-bg-visual)); }
-  .bg-tn-blue { background-color: hsl(var(--tn-blue)); }
-  .bg-tn-blue\/20 { background-color: hsl(var(--tn-blue) / 0.2); }
-  .bg-tn-accent { background-color: hsl(var(--tn-bg-visual)); }
-  .border-tn-seam { border-color: hsl(var(--tn-fg-gutter) / 0.3); }
-  .bg-tn-seam { background-color: hsl(var(--tn-fg-gutter) / 0.3); }
-
-  /* Colors - Semantic */
-  .bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
-  .bg-red-600 { background-color: rgb(220 38 38); }
-  .bg-yellow-500\/10 { background-color: rgb(234 179 8 / 0.1); }
-  .text-red-400 { color: rgb(248 113 113); }
-  .text-yellow-400 { color: rgb(250 204 21); }
-
-  /* Special button colors from component */
-  .bg-\[\#414868\] { background-color: #414868; }
-  .text-\[\#a9b1d6\] { color: #a9b1d6; }
-  .bg-\[hsl\(var\(--tn-fg-dark\)\)\] { background-color: hsl(var(--tn-fg-dark)); }
-  .text-\[hsl\(var\(--tn-fg-dark\)\)\] { color: hsl(var(--tn-fg-dark)); }
-  .bg-\[hsl\(var\(--tn-accent\)\)\] { color: hsl(var(--tn-accent)); }
-  .text-\[hsl\(var\(--tn-accent\)\)\] { color: hsl(var(--tn-accent)); }
-
-  /* Borders & Rounded */
-  .border { border-width: 1px; }
-  .border-b { border-bottom-width: 1px; }
-  .border-t { border-top-width: 1px; }
-  .border-l { border-left-width: 1px; }
-  .rounded { border-radius: 0.25rem; }
-  .rounded-md { border-radius: 0.375rem; }
-  .rounded-lg { border-radius: 0.5rem; }
-  .rounded-full { border-radius: 9999px; }
-
-  /* Effects */
-  .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
-  .backdrop-blur-sm { backdrop-filter: blur(4px); }
-
-  /* Opacity */
-  .opacity-0 { opacity: 0; }
-  .opacity-40 { opacity: 0.4; }
-  .opacity-50 { opacity: 0.5; }
-  .opacity-70 { opacity: 0.7; }
-  .opacity-100 { opacity: 1; }
-
-  /* Transitions */
-  .transition {
-    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, width;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .transition-colors {
-    transition-property: color, background-color, border-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .duration-200 { transition-duration: 200ms; }
-  .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-
-  /* Interactive */
-  .cursor-pointer { cursor: pointer; }
-  .cursor-default { cursor: default; }
-  .cursor-not-allowed { cursor: not-allowed; }
-  .select-none { user-select: none; }
-  .touch-none { touch-action: none; }
-  .pointer-events-none { pointer-events: none; }
-  .pointer-events-auto { pointer-events: auto; }
-
-  /* Overflow */
-  .overflow-hidden { overflow: hidden; }
-  .overflow-auto { overflow: auto; }
-  .overflow-y-auto { overflow-y: auto; }
-
-  /* =====================================================
-     HOVER & FOCUS STATES
-     ===================================================== */
-  .hover\:text-white:hover { color: white; }
-  .hover\:bg-white\/5:hover { background-color: rgb(255 255 255 / 0.05); }
-  .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); }
-  .hover\:bg-tn-bg-highlight:hover { background-color: hsl(var(--tn-bg-highlight)); }
-  .hover\:bg-tn-bg-visual:hover { background-color: hsl(var(--tn-bg-visual)); }
-  .hover\:bg-red-600:hover { background-color: rgb(220 38 38); }
-  .focus\:bg-tn-bg-visual:focus { background-color: hsl(var(--tn-bg-visual)); }
-  .focus\:text-white:focus { color: white; }
-
-  /* Group hover states */
-  .group:hover .group-hover\:rotate-90 { transform: rotate(90deg); }
-  .group:hover .group-hover\:h-1\.5 { height: 0.375rem; }
-
-  /* =====================================================
-     RESPONSIVE - sm: breakpoint (640px)
-     ===================================================== */
-  @media (min-width: 640px) {
-    .sm\:flex { display: flex; }
-  }
-
   /* =====================================================
      VIDEO.JS CONTAINER CONSTRAINTS
      ===================================================== */
@@ -795,18 +517,6 @@
     color: white;
   }
 
-  .fw-live-badge--nodvr {
-    background: #2c2f45;
-    color: #c0c7e6;
-    cursor: default;
-  }
-
-  .fw-live-badge__nodvr {
-    font-size: 9px;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    opacity: 0.85;
-  }
 
   /* --- Volume Control --- */
   .fw-volume-group {
@@ -1134,11 +844,9 @@
 
   /* --- Speed Indicator --- */
   .fw-speed-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: hsl(var(--tn-bg-dark) / 0.6);
-    backdrop-filter: blur(4px);
+    pointer-events: none;
+    background: none;
+    backdrop-filter: none;
   }
 
   /* --- Skip Indicator --- */
@@ -1332,42 +1040,6 @@
      DEV MODE PANEL (Advanced settings sidebar)
      ===================================================== */
 
-  /* Toggle button - small icon button in corner */
-  .fw-dev-toggle {
-    position: absolute;
-    bottom: 3.5rem;
-    right: 0.5rem;
-    z-index: 40;
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border-radius: 0.375rem;
-    background: hsl(var(--tn-bg-dark));
-    border: 1px solid hsl(var(--tn-fg-gutter) / 0.5);
-    color: hsl(var(--tn-fg-dark));
-    cursor: pointer;
-    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s;
-  }
-
-  .fw-dev-toggle:hover {
-    background: hsl(var(--tn-bg-highlight));
-    border-color: hsl(var(--tn-fg-gutter));
-    color: hsl(var(--tn-fg));
-  }
-
-  .fw-dev-toggle--visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .fw-dev-toggle--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
   /* Main panel - side panel container */
   .fw-dev-panel {
     z-index: 40;

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

@@ -10,10 +10,10 @@ export type GatewayStatus = 'idle' | 'loading' | 'ready' | 'error';
 export interface GatewayClientConfig {
     /** Gateway GraphQL endpoint URL */
     gatewayUrl: string;
-    /** Content type to resolve */
-    contentType: ContentType;
     /** Content identifier (stream name) */
     contentId: string;
+    /** Optional content type (no longer required for resolution) */
+    contentType?: ContentType;
     /** Optional auth token for private streams */
     authToken?: string;
     /** Maximum retry attempts (default: 3) */
@@ -40,8 +40,7 @@ type CircuitBreakerState = 'closed' | 'open' | 'half-open';
  * ```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));

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

@@ -12,6 +12,7 @@ export interface InteractionControllerConfig {
     container: HTMLElement;
     videoElement: HTMLVideoElement;
     isLive: boolean;
+    isPaused?: () => boolean;
     onPlayPause: () => void;
     onSeek: (delta: number) => void;
     onVolumeChange: (delta: number) => void;
@@ -21,7 +22,11 @@ export interface InteractionControllerConfig {
     onLoopToggle?: () => void;
     onSpeedChange: (speed: number, isHolding: boolean) => void;
     onSeekPercent?: (percent: number) => void;
+    /** Optional: player-specific frame stepping (return true if handled) */
+    onFrameStep?: (direction: -1 | 1, seconds: number) => boolean | void;
     speedHoldValue?: number;
+    /** Frame step duration in seconds (for prev/next frame shortcuts) */
+    frameStepSeconds?: number;
     /** Idle timeout in ms (default 5000). Set to 0 to disable. */
     idleTimeout?: number;
     /** Callback fired when user becomes idle */
@@ -58,6 +63,9 @@ export declare class InteractionController {
     private boundPointerCancel;
     private boundContextMenu;
     private boundMouseMove;
+    private boundDoubleClick;
+    private boundDocumentKeyDown;
+    private boundDocumentKeyUp;
     constructor(config: InteractionControllerConfig);
     /**
      * Attach event listeners to container
@@ -85,8 +93,11 @@ export declare class InteractionController {
     updateConfig(updates: Partial<InteractionControllerConfig>): void;
     private handleKeyDown;
     private handleKeyUp;
+    private shouldHandleKeyboard;
     private handleSpaceDown;
     private handleSpaceUp;
+    private handleDoubleClick;
+    private stepFrame;
     private handlePointerDown;
     private handlePointerUp;
     private handlePointerCancel;
@@ -118,4 +129,5 @@ export declare class InteractionController {
     resumeIdleTracking(): void;
     private isInputElement;
     private isControlElement;
+    private getFrameStepSeconds;
 }

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

@@ -40,7 +40,7 @@ type ConnectionState = 'disconnected' | 'connecting' | 'connected' | 'reconnecti
  * ```ts
  * const manager = new MetaTrackManager({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  * });
  *
  * manager.subscribe('1', (event) => {

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

@@ -17,7 +17,7 @@ export interface PlayerControllerConfig {
     /** Content identifier (stream name) */
     contentId: string;
     /** Content type */
-    contentType: ContentType;
+    contentType?: ContentType;
     /** Pre-resolved endpoints (skip gateway) */
     endpoints?: ContentEndpoints;
     /** Gateway URL (for FrameWorks Gateway resolution) */
@@ -219,7 +219,7 @@ export declare function buildStreamInfoFromEndpoints(endpoints: ContentEndpoints
  * @example
  * ```typescript
  * const controller = new PlayerController({
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  *   contentType: 'live',
  *   gatewayUrl: 'https://gateway.example.com/graphql',
  * });
@@ -238,6 +238,7 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     private config;
     private state;
     private lastEmittedState;
+    private suppressPlayPauseEventsUntil;
     private gatewayClient;
     private streamStateClient;
     private playerManager;
@@ -249,6 +250,10 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     private streamState;
     /** Tracks parsed from MistServer JSON response (used for direct MistServer mode) */
     private mistTracks;
+    /** Gateway-seeded metadata (used as base for Mist enrichment) */
+    private metadataSeed;
+    /** Merged metadata (gateway seed + Mist enrichment) */
+    private metadata;
     private cleanupFns;
     private isDestroyed;
     private isAttached;
@@ -319,6 +324,10 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     getEndpoints(): ContentEndpoints | null;
     /** Get content metadata (title, description, duration, etc.) */
     getMetadata(): ContentMetadata | null;
+    private setMetadataSeed;
+    private refreshMergedMetadata;
+    private buildMetadataTracks;
+    private sanitizeMistInfo;
     /** Get stream info (sources + tracks for player selection) */
     getStreamInfo(): StreamInfo | null;
     /** Get video element (null if not ready) */
@@ -381,6 +390,8 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     hasAudioTrack(): boolean;
     /** Check if playback rate adjustment is supported */
     canAdjustPlaybackRate(): boolean;
+    /** Resolve content type from config override or Gateway metadata */
+    private getResolvedContentType;
     /** Check if source is WebRTC/MediaStream */
     isWebRTCSource(): boolean;
     /** Check if currently in fullscreen mode */
@@ -494,6 +505,7 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     private getEffectiveCurrentTime;
     private getEffectiveDuration;
     private getPlayerSeekableRange;
+    private getFrameStepSecondsFromTracks;
     private deriveBufferWindowMsFromTracks;
     /** Get current time */
     getCurrentTime(): number;
@@ -501,6 +513,10 @@ export declare class PlayerController extends TypedEventEmitter<PlayerController
     getDuration(): number;
     /** Check if paused */
     isPaused(): boolean;
+    /** Suppress play/pause-driven UI updates for a short window */
+    suppressPlayPauseEvents(ms?: number): void;
+    /** Check if play/pause UI updates should be suppressed */
+    shouldSuppressVideoEvents(): boolean;
     /** Check if muted */
     isMuted(): boolean;
     /** Skip backward by specified seconds (default 10) */

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

@@ -42,6 +42,8 @@ export interface PlayerOptions {
     height?: number;
     /** Enable dev mode - for Legacy player, uses MistServer's dev skin with source selection */
     devMode?: boolean;
+    /** Enable debug logging in player implementations */
+    debug?: boolean;
     onReady?: (element: HTMLVideoElement) => void;
     onError?: (error: string | Error) => void;
     onPlay?: () => void;
@@ -52,6 +54,12 @@ export interface PlayerOptions {
     onPlaying?: () => void;
     onCanPlay?: () => void;
     onDurationChange?: (duration: number) => void;
+    /** HLS.js configuration override (merged with defaults) */
+    hlsConfig?: Record<string, unknown>;
+    /** DASH.js configuration override (merged with defaults) */
+    dashConfig?: Record<string, unknown>;
+    /** Video.js VHS configuration override (merged with defaults) */
+    vhsConfig?: Record<string, unknown>;
 }
 export interface PlayerCapability {
     /** Player name for display */
@@ -173,6 +181,8 @@ export interface IPlayer {
     getCurrentQuality?(): string | null;
     isLive?(): boolean;
     jumpToLive?(): void;
+    /** Optional: frame step (direction -1/1, optional step seconds) */
+    frameStep?(direction: -1 | 1, seconds?: number): void;
     requestPiP?(): Promise<void>;
     /**
      * Optional: Retrieve player-specific stats (e.g., WebRTC inbound-rtp)

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

@@ -30,6 +30,8 @@ export interface SeekableRangeParams {
     mistStreamInfo?: MistStreamInfo;
     currentTime: number;
     duration: number;
+    /** Allow Mist track metadata for MediaStream sources (e.g., WebCodecs DVR) */
+    allowMediaStreamDvr?: boolean;
 }
 export interface CanSeekParams {
     video: HTMLVideoElement | null;
@@ -87,7 +89,7 @@ export declare function supportsPlaybackRate(video: HTMLVideoElement | null): bo
  * 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

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

@@ -37,7 +37,7 @@ export interface StreamStateClientEvents {
  * ```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));

package/dist/types/players/HlsJsPlayer.d.ts

@@ -29,6 +29,14 @@ export declare class HlsJsPlayerImpl extends BasePlayer {
      * Uses HLS.js liveSyncPosition when available (more accurate)
      */
     jumpToLive(): void;
+    /**
+     * Provide a seekable range override for live streams.
+     * Uses liveSyncPosition as the live edge to avoid waiting for the absolute end.
+     */
+    getSeekableRange(): {
+        start: number;
+        end: number;
+    } | null;
     /**
      * Get latency from live edge (for live streams)
      */

package/dist/types/players/MewsWsPlayer/index.d.ts

@@ -37,7 +37,7 @@ export declare class MewsWsPlayerImpl extends BasePlayer {
     private analyticsTimer;
     isMimeSupported(mimetype: string): boolean;
     isBrowserSupported(mimetype: string, source: StreamSource, streamInfo: StreamInfo): boolean | string[];
-    initialize(container: HTMLElement, source: StreamSource, options: PlayerOptions): Promise<HTMLVideoElement>;
+    initialize(container: HTMLElement, source: StreamSource, options: PlayerOptions, streamInfo?: StreamInfo): Promise<HTMLVideoElement>;
     /**
      * Handle MediaSource sourceopen event.
      * Ported from mews.js:143-148, 198-204, 885-902

package/dist/types/players/VideoJsPlayer.d.ts

@@ -21,10 +21,6 @@ export declare class VideoJsPlayerImpl extends BasePlayer {
     private getVideoJsType;
     setPlaybackRate(rate: number): void;
     getCurrentTime(): number;
-    getSeekableRange(): {
-        start: number;
-        end: number;
-    } | null;
     /**
      * Seek to time using VideoJS API (fixes backwards seeking in HLS).
      * Time should be in the corrected coordinate space (with firstms offset applied).
@@ -46,11 +42,23 @@ export declare class VideoJsPlayerImpl extends BasePlayer {
      * Check if the stream is live
      */
     isLiveStream(): boolean;
+    /**
+     * Get the calculated duration for live streams
+     */
+    getDuration(): number;
     /**
      * Jump to live edge
      * Uses VideoJS liveTracker when available, otherwise LiveDurationProxy
      */
     jumpToLive(): void;
+    /**
+     * Provide a seekable range override for live streams.
+     * Uses VideoJS liveTracker seekableEnd as the live edge when available.
+     */
+    getSeekableRange(): {
+        start: number;
+        end: number;
+    } | null;
     /**
      * Get latency from live edge (for live streams)
      */

package/dist/types/players/WebCodecsPlayer/SyncController.d.ts

@@ -158,7 +158,7 @@ export declare class SyncController {
     /**
      * Register a new track
      */
-    addTrack(trackIndex: number, track: TrackInfo): void;
+    addTrack(_trackIndex: number, _track: TrackInfo): void;
     /**
      * Remove a track
      */

package/dist/types/players/WebCodecsPlayer/index.d.ts

@@ -35,6 +35,8 @@ export declare class WebCodecsPlayerImpl extends BasePlayer {
     private debugging;
     private verboseDebugging;
     private streamType;
+    /** Payload format: 'avcc' for ws/video/raw, 'annexb' for ws/video/h264 */
+    private payloadFormat;
     private workerUidCounter;
     private workerListeners;
     private _duration;
@@ -47,6 +49,12 @@ export declare class WebCodecsPlayerImpl extends BasePlayer {
     private _framesDecoded;
     private _bytesReceived;
     private _messagesReceived;
+    private _isPaused;
+    private _suppressPlayPauseSync;
+    private _onVideoPlay?;
+    private _onVideoPause?;
+    private _pendingStepPause;
+    private _stepPauseTimeout;
     private static codecCache;
     /**
      * Get cache key for a track's codec configuration
@@ -95,8 +103,11 @@ export declare class WebCodecsPlayerImpl extends BasePlayer {
     private closePipeline;
     play(): Promise<void>;
     pause(): void;
+    private finishStepPause;
+    frameStep(direction: -1 | 1, _seconds?: number): void;
     seek(time: number): void;
     setPlaybackRate(rate: number): void;
+    isPaused(): boolean;
     isLive(): boolean;
     jumpToLive(): void;
     /**