@editframe/elements 0.17.6-beta.0 → 0.18.3-beta.0

package/src/services/MediaSourceManager.ts

@@ -0,0 +1,333 @@
+export interface MediaSourceManagerOptions {
+  onError?: (error: Error) => void;
+  onReady?: () => void;
+  onUpdateEnd?: () => void;
+  timeout?: number;
+}
+
+/**
+ * Manages MediaSource for audio streaming
+ */
+export class MediaSourceManager {
+  private mediaSource: MediaSource | null = null;
+  private audioElement: HTMLAudioElement | null = null;
+  private sourceBuffer: SourceBuffer | null = null;
+  private mediaSourceReady = false;
+  private pendingSegments: ArrayBuffer[] = [];
+  private options: MediaSourceManagerOptions;
+
+  constructor(options: MediaSourceManagerOptions = {}) {
+    this.options = {
+      timeout: 10000,
+      ...options,
+    };
+  }
+
+  /**
+   * Initialize MediaSource for audio streaming
+   */
+  async initialize(): Promise<void> {
+    this.cleanup(true);
+
+    this.mediaSource = new MediaSource();
+    this.audioElement = document.createElement("audio");
+
+    // Add error event listeners to the audio element
+    this.audioElement.addEventListener("error", (event) => {
+      const error = this.audioElement?.error;
+      console.error("🎵 [AUDIO_ELEMENT_ERROR] Audio element error:", {
+        code: error?.code,
+        message: error?.message,
+        event,
+      });
+
+      if (this.options.onError) {
+        this.options.onError(
+          new Error(`Audio element error: ${error?.message}`),
+        );
+      }
+    });
+
+    this.audioElement.src = URL.createObjectURL(this.mediaSource);
+
+    return new Promise((resolve, reject) => {
+      this.mediaSource?.addEventListener("sourceopen", () => {
+        try {
+          const sourceBuffer = this.createSourceBuffer();
+          if (!sourceBuffer) {
+            throw new Error(
+              "Failed to create SourceBuffer with any supported codec",
+            );
+          }
+
+          this.sourceBuffer = sourceBuffer;
+          this.setupSourceBufferListeners();
+
+          this.mediaSourceReady = true;
+
+          if (this.options.onReady) {
+            this.options.onReady();
+          }
+
+          resolve();
+        } catch (error) {
+          console.error(
+            "🎵 [MEDIA_SOURCE_ERROR] Failed to create SourceBuffer:",
+            error,
+          );
+          reject(error);
+        }
+      });
+
+      this.mediaSource?.addEventListener("error", (error) => {
+        console.error("🎵 [MEDIA_SOURCE_ERROR] MediaSource error:", error);
+        reject(error);
+      });
+
+      // Add timeout for MediaSource opening
+      setTimeout(() => {
+        if (!this.mediaSourceReady) {
+          const timeoutError = new Error(
+            "MediaSource failed to open within timeout",
+          );
+          console.error(
+            "🎵 [MEDIA_SOURCE_TIMEOUT] MediaSource initialization timeout",
+          );
+          reject(timeoutError);
+        }
+      }, 4000);
+    });
+  }
+
+  /**
+   * Create SourceBuffer with codec fallback
+   */
+  private createSourceBuffer(): SourceBuffer | undefined {
+    const codecOptions = [
+      'audio/mp4; codecs="mp4a.40.2"', // AAC-LC (most common)
+      'audio/mp4; codecs="mp4a.40.5"', // AAC-HE
+      "audio/mp4", // Generic MP4 audio
+    ];
+
+    let sourceBuffer: SourceBuffer | undefined;
+    let lastError: Error | undefined;
+
+    for (const codec of codecOptions) {
+      try {
+        if (MediaSource.isTypeSupported(codec)) {
+          sourceBuffer = this.mediaSource?.addSourceBuffer(codec);
+          break;
+        }
+      } catch (error) {
+        console.error(
+          `🎵 [CODEC_ERROR] Failed to create SourceBuffer with ${codec}:`,
+          error,
+        );
+        lastError = error as Error;
+      }
+    }
+
+    if (!sourceBuffer && lastError) {
+      throw new Error(
+        `Failed to create SourceBuffer with any supported codec. Last error: ${lastError.message}`,
+      );
+    }
+
+    return sourceBuffer;
+  }
+
+  /**
+   * Setup SourceBuffer event listeners
+   */
+  private setupSourceBufferListeners(): void {
+    if (!this.sourceBuffer) return;
+
+    this.sourceBuffer.addEventListener("updateend", () => {
+      this.processPendingSegments();
+
+      if (this.options.onUpdateEnd) {
+        this.options.onUpdateEnd();
+      }
+    });
+
+    this.sourceBuffer.addEventListener("error", (event) => {
+      console.error(
+        "🎵 [SOURCE_BUFFER_EVENT_ERROR] SourceBuffer error event:",
+        event,
+      );
+
+      if (this.options.onError) {
+        this.options.onError(new Error("SourceBuffer error"));
+      }
+    });
+  }
+
+  /**
+   * Feed audio segments directly to MediaSource SourceBuffer
+   */
+  async feedSegment(segmentBuffer: ArrayBuffer): Promise<void> {
+    if (!this.mediaSourceReady || !this.sourceBuffer) {
+      this.pendingSegments.push(segmentBuffer);
+      return;
+    }
+
+    if (this.sourceBuffer.updating) {
+      this.pendingSegments.push(segmentBuffer);
+      return;
+    }
+
+    // Check for HTMLMediaElement errors before appending
+    if (this.audioElement?.error) {
+      const error = this.audioElement.error;
+      console.error(
+        "🎵 [MEDIA_ELEMENT_ERROR] HTMLMediaElement error detected:",
+        {
+          code: error.code,
+          message: error.message,
+          MEDIA_ERR_ABORTED: error.code === MediaError.MEDIA_ERR_ABORTED,
+          MEDIA_ERR_NETWORK: error.code === MediaError.MEDIA_ERR_NETWORK,
+          MEDIA_ERR_DECODE: error.code === MediaError.MEDIA_ERR_DECODE,
+          MEDIA_ERR_SRC_NOT_SUPPORTED:
+            error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
+        },
+      );
+
+      // Reset the audio element to try to recover
+      this.audioElement.load();
+      return;
+    }
+
+    try {
+      this.sourceBuffer.appendBuffer(segmentBuffer);
+    } catch (error) {
+      console.error(
+        "🎵 [SOURCE_BUFFER_ERROR] Failed to append segment:",
+        error,
+      );
+      this.logDebugInfo();
+      this.pendingSegments.push(segmentBuffer);
+    }
+  }
+
+  /**
+   * Process any queued segments when SourceBuffer becomes available
+   */
+  private processPendingSegments(): void {
+    if (
+      !this.sourceBuffer ||
+      this.sourceBuffer.updating ||
+      this.pendingSegments.length === 0
+    ) {
+      return;
+    }
+
+    const nextSegment = this.pendingSegments.shift();
+    if (nextSegment) {
+      this.feedSegment(nextSegment);
+    }
+  }
+
+  /**
+   * Log debug information for troubleshooting
+   */
+  private logDebugInfo(): void {
+    console.error("🎵 [SOURCE_BUFFER_DEBUG] SourceBuffer state:", {
+      updating: this.sourceBuffer?.updating,
+      buffered: this.sourceBuffer?.buffered
+        ? Array.from(
+            { length: this.sourceBuffer.buffered.length },
+            (_, i) =>
+              `${this.sourceBuffer?.buffered.start(i)}-${this.sourceBuffer?.buffered.end(i)}`,
+          )
+        : [],
+      mode: this.sourceBuffer?.mode,
+      timestampOffset: this.sourceBuffer?.timestampOffset,
+    });
+
+    console.error("🎵 [MEDIA_SOURCE_DEBUG] MediaSource state:", {
+      readyState: this.mediaSource?.readyState,
+      sourceBuffers: this.mediaSource?.sourceBuffers.length,
+      duration: this.mediaSource?.duration,
+    });
+
+    console.error("🎵 [AUDIO_ELEMENT_DEBUG] Audio element state:", {
+      readyState: this.audioElement?.readyState,
+      networkState: this.audioElement?.networkState,
+      error: this.audioElement?.error?.code,
+      src: `${this.audioElement?.src.substring(0, 50)}...`,
+    });
+  }
+
+  /**
+   * Set audio element current time
+   */
+  setCurrentTime(timeMs: number): void {
+    if (this.audioElement) {
+      this.audioElement.currentTime = timeMs / 1000;
+    }
+  }
+
+  /**
+   * Get the audio element for MediaElementSource
+   */
+  getAudioElement(): HTMLAudioElement | null {
+    return this.audioElement;
+  }
+
+  /**
+   * Check if MediaSource is ready
+   */
+  isReady(): boolean {
+    return this.mediaSourceReady;
+  }
+
+  /**
+   * Get buffered time ranges
+   */
+  getBuffered(): TimeRanges | null {
+    return this.sourceBuffer?.buffered || null;
+  }
+
+  /**
+   * Clean up MediaSource resources
+   */
+  cleanup(_preserveCache = false): void {
+    // Clean up existing MediaSource
+    if (
+      this.sourceBuffer &&
+      this.mediaSource &&
+      this.mediaSource.readyState === "open"
+    ) {
+      try {
+        this.mediaSource.removeSourceBuffer(this.sourceBuffer);
+      } catch (error) {
+        console.warn("🎵 [CLEANUP_ERROR] Error removing SourceBuffer:", error);
+      }
+    }
+
+    if (this.mediaSource) {
+      try {
+        if (this.mediaSource.readyState === "open") {
+          this.mediaSource.endOfStream();
+        }
+      } catch (error) {
+        console.warn("🎵 [CLEANUP_ERROR] Error ending MediaSource:", error);
+      }
+    }
+
+    if (this.audioElement) {
+      try {
+        URL.revokeObjectURL(this.audioElement.src);
+      } catch (error) {
+        console.warn("🎵 [CLEANUP_ERROR] Error revoking URL:", error);
+      }
+    }
+
+    // Reset state
+    this.mediaSource = null;
+    this.audioElement = null;
+    this.sourceBuffer = null;
+    this.mediaSourceReady = false;
+    this.pendingSegments = [];
+  }
+}

package/src/transcoding/cache/CacheManager.ts

@@ -0,0 +1,208 @@
+/**
+ * Cache manager for handling multiple cache types with LRU eviction and statistics
+ */
+
+import type {
+  CacheStats,
+  ManifestResponse,
+  VideoMetadata,
+} from "../types/index.js";
+
+export class CacheManager {
+  private segmentCache = new Map<string, ArrayBuffer>();
+  private metadataCache = new Map<string, VideoMetadata>();
+  private manifestCache = new Map<string, ManifestResponse>();
+  private initSegmentCache = new Map<string, ArrayBuffer>();
+  private cacheAccessOrder: string[] = [];
+
+  // Cache performance tracking
+  private cacheHits = 0;
+  private cacheMisses = 0;
+  private totalRequests = 0;
+
+  constructor(private maxSize: number) {}
+
+  /**
+   * Cache a segment with LRU eviction
+   */
+  cacheSegment(cacheKey: string, buffer: ArrayBuffer): void {
+    // Implement LRU eviction
+    if (this.segmentCache.size >= this.maxSize) {
+      const firstKey = this.segmentCache.keys().next().value;
+      if (firstKey) {
+        this.segmentCache.delete(firstKey);
+        // Remove from access order tracking
+        const index = this.cacheAccessOrder.indexOf(firstKey);
+        if (index > -1) {
+          this.cacheAccessOrder.splice(index, 1);
+        }
+      }
+    }
+
+    this.segmentCache.set(cacheKey, buffer);
+
+    // Track access order for LRU analytics
+    const existingIndex = this.cacheAccessOrder.indexOf(cacheKey);
+    if (existingIndex > -1) {
+      this.cacheAccessOrder.splice(existingIndex, 1);
+    }
+    this.cacheAccessOrder.push(cacheKey);
+  }
+
+  /**
+   * Get a segment from cache
+   */
+  getSegment(cacheKey: string): ArrayBuffer | undefined {
+    const cached = this.segmentCache.get(cacheKey);
+    if (cached) {
+      this.cacheHits++;
+      // Update access order for LRU
+      const index = this.cacheAccessOrder.indexOf(cacheKey);
+      if (index > -1) {
+        this.cacheAccessOrder.splice(index, 1);
+        this.cacheAccessOrder.push(cacheKey);
+      }
+      return cached;
+    }
+    this.cacheMisses++;
+    return undefined;
+  }
+
+  /**
+   * Check if a segment exists in cache
+   */
+  hasSegment(cacheKey: string): boolean {
+    return this.segmentCache.has(cacheKey);
+  }
+
+  /**
+   * Cache metadata
+   */
+  cacheMetadata(url: string, metadata: VideoMetadata): void {
+    this.metadataCache.set(url, metadata);
+  }
+
+  /**
+   * Get metadata from cache
+   */
+  getMetadata(url: string): VideoMetadata | undefined {
+    const cached = this.metadataCache.get(url);
+    if (cached) {
+      this.cacheHits++;
+      return cached;
+    }
+    this.cacheMisses++;
+    return undefined;
+  }
+
+  /**
+   * Cache manifest
+   */
+  cacheManifest(url: string, manifest: ManifestResponse): void {
+    this.manifestCache.set(url, manifest);
+  }
+
+  /**
+   * Get manifest from cache
+   */
+  getManifest(url: string): ManifestResponse | undefined {
+    const cached = this.manifestCache.get(url);
+    if (cached) {
+      this.cacheHits++;
+      return cached;
+    }
+    this.cacheMisses++;
+    return undefined;
+  }
+
+  /**
+   * Cache init segment
+   */
+  cacheInitSegment(cacheKey: string, buffer: ArrayBuffer): void {
+    this.initSegmentCache.set(cacheKey, buffer);
+  }
+
+  /**
+   * Get init segment from cache
+   */
+  getInitSegment(cacheKey: string): ArrayBuffer | undefined {
+    const cached = this.initSegmentCache.get(cacheKey);
+    if (cached) {
+      this.cacheHits++;
+      return cached;
+    }
+    this.cacheMisses++;
+    return undefined;
+  }
+
+  /**
+   * Get comprehensive cache statistics
+   */
+  getCacheStats(): CacheStats {
+    this.totalRequests = this.cacheHits + this.cacheMisses;
+    const hitRate =
+      this.totalRequests > 0 ? this.cacheHits / this.totalRequests : 0;
+    const efficiency =
+      this.segmentCache.size > 0 ? this.cacheHits / this.segmentCache.size : 0;
+
+    return {
+      size: this.segmentCache.size,
+      maxSize: this.maxSize,
+      hitRate: hitRate,
+      efficiency: efficiency,
+      totalRequests: this.totalRequests,
+      recentKeys: this.cacheAccessOrder.slice(-5), // Last 5 accessed keys
+    };
+  }
+
+  /**
+   * Clear all caches
+   */
+  clearAll(): void {
+    this.segmentCache.clear();
+    this.metadataCache.clear();
+    this.manifestCache.clear();
+    this.initSegmentCache.clear();
+    this.cacheAccessOrder = [];
+    this.cacheHits = 0;
+    this.cacheMisses = 0;
+    this.totalRequests = 0;
+  }
+
+  /**
+   * Get cache sizes for each cache type
+   */
+  getCacheSizes(): {
+    segments: number;
+    metadata: number;
+    manifests: number;
+    initSegments: number;
+  } {
+    return {
+      segments: this.segmentCache.size,
+      metadata: this.metadataCache.size,
+      manifests: this.manifestCache.size,
+      initSegments: this.initSegmentCache.size,
+    };
+  }
+
+  /**
+   * Clear specific cache type
+   */
+  clearSegmentCache(): void {
+    this.segmentCache.clear();
+    this.cacheAccessOrder = [];
+  }
+
+  clearMetadataCache(): void {
+    this.metadataCache.clear();
+  }
+
+  clearManifestCache(): void {
+    this.manifestCache.clear();
+  }
+
+  clearInitSegmentCache(): void {
+    this.initSegmentCache.clear();
+  }
+}

package/src/transcoding/cache/RequestDeduplicator.test.ts

@@ -0,0 +1,170 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { RequestDeduplicator } from "./RequestDeduplicator.js";
+
+describe("RequestDeduplicator", () => {
+  let deduplicator: RequestDeduplicator;
+
+  beforeEach(() => {
+    deduplicator = new RequestDeduplicator();
+  });
+
+  describe("executeRequest", () => {
+    it("should execute request and return result for new key", async () => {
+      const mockFactory = vi.fn().mockResolvedValue("result");
+
+      const result = await deduplicator.executeRequest("key1", mockFactory);
+
+      expect(result).toBe("result");
+      expect(mockFactory).toHaveBeenCalledTimes(1);
+    });
+
+    it("should return same promise for concurrent requests with same key", async () => {
+      const mockFactory = vi.fn().mockResolvedValue("result");
+
+      const [result1, result2] = await Promise.all([
+        deduplicator.executeRequest("key1", mockFactory),
+        deduplicator.executeRequest("key1", mockFactory),
+      ]);
+
+      expect(result1).toBe("result");
+      expect(result2).toBe("result");
+      expect(mockFactory).toHaveBeenCalledTimes(1); // Should only be called once
+    });
+
+    it("should allow separate requests for different keys", async () => {
+      const mockFactory1 = vi.fn().mockResolvedValue("result1");
+      const mockFactory2 = vi.fn().mockResolvedValue("result2");
+
+      const [result1, result2] = await Promise.all([
+        deduplicator.executeRequest("key1", mockFactory1),
+        deduplicator.executeRequest("key2", mockFactory2),
+      ]);
+
+      expect(result1).toBe("result1");
+      expect(result2).toBe("result2");
+      expect(mockFactory1).toHaveBeenCalledTimes(1);
+      expect(mockFactory2).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle request failures and clean up", async () => {
+      const error = new Error("Request failed");
+      const mockFactory = vi.fn().mockRejectedValue(error);
+
+      await expect(
+        deduplicator.executeRequest("key1", mockFactory),
+      ).rejects.toThrow("Request failed");
+
+      // Should allow new request with same key after failure
+      const mockFactory2 = vi.fn().mockResolvedValue("success");
+      const result = await deduplicator.executeRequest("key1", mockFactory2);
+
+      expect(result).toBe("success");
+      expect(mockFactory).toHaveBeenCalledTimes(1);
+      expect(mockFactory2).toHaveBeenCalledTimes(1);
+    });
+
+    it("should clean up pending requests after success", async () => {
+      const mockFactory = vi.fn().mockResolvedValue("result");
+
+      await deduplicator.executeRequest("key1", mockFactory);
+
+      expect(deduplicator.isPending("key1")).toBe(false);
+      expect(deduplicator.getPendingCount()).toBe(0);
+    });
+  });
+
+  describe("isPending", () => {
+    it("should return true for pending requests", async () => {
+      const mockFactory = vi.fn().mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve("result"), 100);
+          }),
+      );
+
+      const promise = deduplicator.executeRequest("key1", mockFactory);
+
+      expect(deduplicator.isPending("key1")).toBe(true);
+
+      await promise;
+
+      expect(deduplicator.isPending("key1")).toBe(false);
+    });
+
+    it("should return false for non-existent keys", () => {
+      expect(deduplicator.isPending("nonexistent")).toBe(false);
+    });
+  });
+
+  describe("getPendingCount", () => {
+    it("should return 0 initially", () => {
+      expect(deduplicator.getPendingCount()).toBe(0);
+    });
+
+    it("should track pending request count", async () => {
+      const mockFactory = vi.fn().mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve("result"), 100);
+          }),
+      );
+
+      const promise1 = deduplicator.executeRequest("key1", mockFactory);
+      const promise2 = deduplicator.executeRequest("key2", mockFactory);
+
+      expect(deduplicator.getPendingCount()).toBe(2);
+
+      await Promise.all([promise1, promise2]);
+
+      expect(deduplicator.getPendingCount()).toBe(0);
+    });
+  });
+
+  describe("getPendingKeys", () => {
+    it("should return empty array initially", () => {
+      expect(deduplicator.getPendingKeys()).toEqual([]);
+    });
+
+    it("should return pending keys", async () => {
+      const mockFactory = vi.fn().mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve("result"), 100);
+          }),
+      );
+
+      const promise1 = deduplicator.executeRequest("key1", mockFactory);
+      const promise2 = deduplicator.executeRequest("key2", mockFactory);
+
+      const pendingKeys = deduplicator.getPendingKeys();
+      expect(pendingKeys).toHaveLength(2);
+      expect(pendingKeys).toContain("key1");
+      expect(pendingKeys).toContain("key2");
+
+      await Promise.all([promise1, promise2]);
+
+      expect(deduplicator.getPendingKeys()).toEqual([]);
+    });
+  });
+
+  describe("clear", () => {
+    it("should clear all pending requests", async () => {
+      const mockFactory = vi.fn().mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            setTimeout(() => resolve("result"), 100);
+          }),
+      );
+
+      deduplicator.executeRequest("key1", mockFactory);
+      deduplicator.executeRequest("key2", mockFactory);
+
+      expect(deduplicator.getPendingCount()).toBe(2);
+
+      deduplicator.clear();
+
+      expect(deduplicator.getPendingCount()).toBe(0);
+      expect(deduplicator.getPendingKeys()).toEqual([]);
+    });
+  });
+});