@livepeer-frameworks/player-core 0.0.3

package/src/players/MewsWsPlayer/types.ts

@@ -0,0 +1,106 @@
+/**
+ * MEWS WebSocket Player Types
+ */
+
+export interface MewsMessage {
+  type: string;
+  data?: any;
+}
+
+export interface CodecDataMessage extends MewsMessage {
+  type: 'codec_data';
+  data: {
+    codecs: string[];
+  };
+}
+
+export interface OnTimeMessage extends MewsMessage {
+  type: 'on_time';
+  data: {
+    current: number;      // Current playback position (ms)
+    end?: number;         // End of buffered range (ms)
+    begin?: number;       // Beginning of buffered range (ms)
+    play_rate_curr?: 'auto' | number;  // Current server playback rate
+    jitter?: number;      // Server-estimated jitter (ms)
+    tracks?: string[];    // Currently active track IDs
+  };
+}
+
+export interface TracksMessage extends MewsMessage {
+  type: 'tracks';
+  data: {
+    codecs: string[];
+    current?: number;  // Switch point timestamp (ms)
+  };
+}
+
+export interface OnStopMessage extends MewsMessage {
+  type: 'on_stop';
+}
+
+export interface SeekAckMessage extends MewsMessage {
+  type: 'seek';
+}
+
+export interface SetSpeedAckMessage extends MewsMessage {
+  type: 'set_speed';
+  data?: {
+    play_rate_curr?: 'auto' | number;
+  };
+}
+
+export interface PauseMessage extends MewsMessage {
+  type: 'pause';
+}
+
+export interface MewsCommand {
+  type: 'request_codec_data' | 'play' | 'hold' | 'seek' | 'set_speed' | 'tracks';
+  [key: string]: any;
+}
+
+export interface RequestCodecDataCommand extends MewsCommand {
+  type: 'request_codec_data';
+  supported_codecs: string[];
+}
+
+export interface SeekCommand extends MewsCommand {
+  type: 'seek';
+  seek_time: number;
+}
+
+export interface SetSpeedCommand extends MewsCommand {
+  type: 'set_speed';
+  play_rate: number | 'auto';
+}
+
+export interface TracksCommand extends MewsCommand {
+  type: 'tracks';
+  video?: string;
+  subtitle?: string; // Track index or 'none'
+}
+
+/**
+ * Callback for WebSocket message listeners.
+ * Listeners are registered per message type and receive parsed MewsMessage objects.
+ */
+export type MewsMessageListener = (msg: MewsMessage) => void;
+
+export interface WebSocketManagerOptions {
+  url: string;
+  maxReconnectAttempts?: number;
+  onMessage: (data: ArrayBuffer | string) => void;
+  onOpen: () => void;
+  onClose: () => void;
+  onError: (message: string) => void;
+}
+
+export interface SourceBufferManagerOptions {
+  mediaSource: MediaSource;
+  videoElement: HTMLVideoElement;
+  onError: (message: string) => void;
+}
+
+export interface AnalyticsConfig {
+  enabled: boolean;
+  endpoint: string | null;
+}

package/src/players/MistPlayer.ts

@@ -0,0 +1,188 @@
+import { BasePlayer } from '../core/PlayerInterface';
+import type { StreamSource, StreamInfo, PlayerOptions, PlayerCapability } from '../core/PlayerInterface';
+
+/**
+ * MistPlayerImpl - Legacy fallback player
+ *
+ * Simple passthrough to MistServer's native player.js embed.
+ * No codec preferences or fancy params - just let MistServer handle everything.
+ * This is the final fallback when other players fail.
+ */
+export class MistPlayerImpl extends BasePlayer {
+  readonly capability: PlayerCapability = {
+    name: "Legacy",
+    shortname: "mist-legacy",
+    priority: 99, // Final fallback - lowest priority
+    // Single special type - PlayerManager adds this as ONE option
+    mimes: ["mist/legacy"]
+  };
+
+  private container: HTMLElement | null = null;
+  private mistDiv: HTMLDivElement | null = null;
+  private proxyVideo: HTMLVideoElement | null = null;
+  private previousContainerOverflow: string | null = null;
+  private destroyed = false;
+
+  isMimeSupported(mimetype: string): boolean {
+    // Only match our special type - PlayerManager handles adding us once
+    return mimetype === "mist/legacy";
+  }
+
+  isBrowserSupported(mimetype: string, _source: StreamSource, _streamInfo: StreamInfo): boolean | string[] {
+    // Only compatible with our special type
+    if (mimetype !== "mist/legacy") return false;
+    return ['video', 'audio'];
+  }
+
+  async initialize(container: HTMLElement, source: StreamSource, options: PlayerOptions): Promise<HTMLVideoElement> {
+    this.destroyed = false;
+    this.container = container;
+    container.classList.add('fw-player-container');
+
+    // Generate unique ID for this embed
+    const streamName = source.streamName || 'stream';
+    const uniqueId = `${streamName.replace(/[^a-zA-Z0-9]/g, '_')}_${Math.random().toString(36).slice(2, 10)}`;
+
+    // Create the mistvideo div
+    this.mistDiv = document.createElement('div');
+    this.mistDiv.className = 'mistvideo fw-player-container';
+    this.mistDiv.id = uniqueId;
+    this.mistDiv.style.width = '100%';
+    this.mistDiv.style.height = '100%';
+    this.mistDiv.style.overflow = 'hidden'; // Prevent legacy player overflow
+    // Also on container, but restore on destroy (don't clobber consumer styles permanently)
+    this.previousContainerOverflow = container.style.overflow ?? '';
+    container.style.overflow = 'hidden';
+    container.appendChild(this.mistDiv);
+
+    // Derive player.js URL from source URL
+    const playerJsUrl = this.getPlayerJsUrl(source);
+
+    // Load and call mistPlay - simple passthrough, no extra params
+    await this.loadAndPlay(streamName, uniqueId, playerJsUrl, options);
+
+    // Find the video element MistServer created (for compatibility)
+    const video = this.findVideoElement() || this.createProxyVideo(container);
+    this.videoElement = video;
+    this.setupVideoEventListeners(video, options);
+
+    return video;
+  }
+
+  private getPlayerJsUrl(source: StreamSource): string {
+    // Try to derive player.js URL from source
+    if (source.mistPlayerUrl) return source.mistPlayerUrl;
+
+    try {
+      const url = new URL(source.url);
+      // Use same protocol, different path
+      return `${url.protocol}//${url.host}/player.js`;
+    } catch {
+      // Fallback: relative path
+      return '/player.js';
+    }
+  }
+
+  private async loadAndPlay(streamName: string, targetId: string, playerJsUrl: string, options: PlayerOptions): Promise<void> {
+    const play = () => {
+      if (this.destroyed) return;
+      if ((window as any).mistPlay) {
+        // Let MistServer handle source selection - no forcePriority
+        const mistOptions: any = {
+          target: document.getElementById(targetId),
+          fillSpace: true,
+          // MistServer's player.js has its own UI - always enable controls
+          controls: true,
+          // Use dev skin when devMode is enabled - shows MistServer's source selection UI
+          skin: options.devMode ? 'dev' : 'default',
+          // Only pass basic playback options
+          ...(options.autoplay !== undefined && { autoplay: options.autoplay }),
+          ...(options.muted !== undefined && { muted: options.muted }),
+          ...(options.poster && { poster: options.poster }),
+        };
+
+        console.debug('[Legacy] mistPlay options:', mistOptions);
+        (window as any).mistPlay(streamName, mistOptions);
+      }
+    };
+
+    if (!(window as any).mistplayers) {
+      // Load player.js
+      await new Promise<void>((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = playerJsUrl;
+        script.onload = () => {
+          play();
+          resolve();
+        };
+        script.onerror = () => reject(new Error(`Failed to load MistServer player from ${playerJsUrl}`));
+        document.head.appendChild(script);
+      });
+    } else {
+      play();
+    }
+  }
+
+  private findVideoElement(): HTMLVideoElement | null {
+    if (!this.mistDiv) return null;
+    return this.mistDiv.querySelector('video');
+  }
+
+  private createProxyVideo(container: HTMLElement): HTMLVideoElement {
+    const video = document.createElement('video');
+    video.style.display = 'none';
+    container.appendChild(video);
+    this.proxyVideo = video;
+    return video;
+  }
+
+  async destroy(): Promise<void> {
+    this.destroyed = true;
+
+    // Try to unload via MistServer API
+    if (this.mistDiv) {
+      try {
+        const ref = (this.mistDiv as any).MistVideoObject?.reference;
+        if (ref && typeof ref.unload === 'function') {
+          ref.unload();
+        }
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+      try {
+        this.mistDiv.remove();
+      } catch {
+        // Fallback for older DOM implementations
+        try {
+          this.mistDiv.parentNode?.removeChild(this.mistDiv);
+        } catch {}
+      }
+      this.mistDiv = null;
+    }
+
+    if (this.proxyVideo) {
+      try {
+        this.proxyVideo.remove();
+      } catch {
+        try {
+          this.proxyVideo.parentNode?.removeChild(this.proxyVideo);
+        } catch {}
+      }
+      this.proxyVideo = null;
+    }
+
+    if (this.container) {
+      // Restore container overflow if we changed it.
+      try {
+        if (this.previousContainerOverflow !== null) {
+          this.container.style.overflow = this.previousContainerOverflow;
+        }
+      } catch {}
+    }
+
+    this.videoElement = null;
+    this.container = null;
+    this.previousContainerOverflow = null;
+    this.listeners.clear();
+  }
+}