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

package/src/elements/MediaController.ts

@@ -1,5 +1,4 @@
 import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { JitTranscodingClient } from "../JitTranscodingClient.ts";
 
 export class MediaController implements ReactiveController {
   #src: string | null = null;
@@ -29,10 +28,6 @@ export class MediaController implements ReactiveController {
       return "asset";
     }
 
-    if (JitTranscodingClient.isJitTranscodeEligible(this.host.src)) {
-      return "jit-transcode";
-    }
-
     return "asset";
   }
 
@@ -84,7 +79,6 @@ export class MediaController implements ReactiveController {
 
   handleUpdate(changes: Map<string, { oldValue: any; newValue: any }>) {
     if (changes.has("src") || changes.has("assetId") || changes.has("mode")) {
-      console.log("SRC/ASSETID/MODE changed");
     }
   }
 
@@ -98,11 +92,7 @@ export class MediaController implements ReactiveController {
     this.assetId = this.host.assetId;
   }
 
-  hostDisconnected() {
-    console.log("hostDisconnected");
-  }
+  hostDisconnected() {}
 
-  updated() {
-    console.log("updated");
-  }
+  updated() {}
 }

package/src/elements/SampleBuffer.ts

@@ -0,0 +1,95 @@
+import type { AudioSample, VideoSample } from "mediabunny";
+import { roundToMilliseconds } from "./EFMedia/shared/PrecisionUtils";
+export type MediaSample = VideoSample | AudioSample;
+
+// Generic sample buffer that works with both VideoSample and AudioSample
+export class SampleBuffer {
+  private buffer: MediaSample[] = [];
+  private bufferSize: number;
+
+  constructor(bufferSize = 10) {
+    this.bufferSize = bufferSize;
+  }
+
+  push(sample: MediaSample) {
+    // Defensive copy to avoid concurrent modification during iteration
+    const currentBuffer = [...this.buffer];
+    currentBuffer.push(sample);
+
+    if (currentBuffer.length > this.bufferSize) {
+      const shifted = currentBuffer.shift();
+      if (shifted) {
+        try {
+          shifted.close();
+        } catch (_error) {
+          // Sample already closed, continue
+        }
+      }
+    }
+
+    // Update buffer atomically
+    this.buffer = currentBuffer;
+  }
+
+  clear() {
+    // Get current buffer and clear atomically
+    const toClose = this.buffer;
+    this.buffer = [];
+
+    // Close samples after clearing to avoid holding references
+    for (const sample of toClose) {
+      try {
+        sample.close();
+      } catch (_error) {
+        // Sample already closed, continue
+      }
+    }
+  }
+
+  peek(): MediaSample | undefined {
+    // Defensive read - get current buffer state
+    const currentBuffer = this.buffer;
+    return currentBuffer[0];
+  }
+
+  find(desiredSeekTimeMs: number): MediaSample | undefined {
+    // Take snapshot to avoid concurrent modification during iteration
+    const currentBuffer = [...this.buffer];
+
+    if (currentBuffer.length === 0) return undefined;
+
+    // Use consistent precision handling across the entire pipeline
+    const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);
+
+    // Find the sample that contains the target time
+    for (const sample of currentBuffer) {
+      const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1000);
+      const sampleDurationMs = roundToMilliseconds(
+        (sample.duration || 0) * 1000,
+      );
+      const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
+
+      // Check if the desired time falls within this sample's time span [start, end], inclusive of end
+      if (targetTimeMs >= sampleStartMs && targetTimeMs <= sampleEndMs) {
+        return sample;
+      }
+    }
+
+    return undefined; // No sample contains the target time
+  }
+
+  get length() {
+    return this.buffer.length;
+  }
+
+  get firstTimestamp() {
+    // Defensive read - get current buffer state
+    const currentBuffer = this.buffer;
+    return currentBuffer[0]?.timestamp || 0;
+  }
+
+  getContents(): MediaSample[] {
+    // Defensive copy to avoid concurrent modification during iteration
+    return [...this.buffer];
+  }
+}

package/src/gui/ContextMixin.ts

@@ -1,7 +1,6 @@
 import { consume, createContext, provide } from "@lit/context";
 import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
-
 import type { EFTimegroup } from "../elements/EFTimegroup.js";
 import {
   type EFConfiguration,
@@ -161,9 +160,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         attributes: true,
       });
 
-      // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
-      // timed correctly. So we use requestAnimationFrame as a stop-gap.
-      // requestAnimationFrame(this.setStageScale);
       if (this.playing) {
         this.startPlayback();
       }
@@ -212,7 +208,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
 
     #playbackAudioContext: AudioContext | null = null;
     #playbackAnimationFrameRequest: number | null = null;
-    #AUDIO_PLAYBACK_SLICE_MS = 1000;
+    #AUDIO_PLAYBACK_SLICE_MS = ((47 * 1024) / 48000) * 1000; // AAC-aligned: ~1002.67ms
 
     #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
       const rawTimeMs =
@@ -237,6 +233,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         cancelAnimationFrame(this.#playbackAnimationFrameRequest);
       }
       this.#playbackAudioContext = null;
+      this.#playbackAnimationFrameRequest = null;
     }
 
     private async startPlayback() {
@@ -277,7 +274,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       await playbackContext.suspend();
 
       const fillBuffer = async () => {
-        if (bufferCount > 1) {
+        if (bufferCount > 2) {
           return;
         }
         const canFillBuffer = await queueBufferSource();

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([]);
+    });
+  });
+});

package/src/transcoding/cache/RequestDeduplicator.ts

@@ -0,0 +1,65 @@
+/**
+ * Request deduplication utility
+ * Manages pending requests to prevent concurrent duplicate requests
+ */
+
+export class RequestDeduplicator {
+  private pendingRequests = new Map<string, Promise<any>>();
+
+  /**
+   * Execute a request with deduplication
+   * If a request with the same key is already pending, return the existing promise
+   * Otherwise, execute the request factory and track the promise
+   */
+  async executeRequest<T>(
+    key: string,
+    requestFactory: () => Promise<T>,
+  ): Promise<T> {
+    // Check if there's already a pending request for this key
+    const existingRequest = this.pendingRequests.get(key);
+    if (existingRequest) {
+      return existingRequest;
+    }
+
+    // Create and track the new request
+    const requestPromise = requestFactory();
+    this.pendingRequests.set(key, requestPromise);
+
+    try {
+      const result = await requestPromise;
+      this.pendingRequests.delete(key);
+      return result;
+    } catch (error) {
+      this.pendingRequests.delete(key);
+      throw error;
+    }
+  }
+
+  /**
+   * Clear all pending requests (used in cache clearing)
+   */
+  clear(): void {
+    this.pendingRequests.clear();
+  }
+
+  /**
+   * Get number of pending requests
+   */
+  getPendingCount(): number {
+    return this.pendingRequests.size;
+  }
+
+  /**
+   * Check if a request is pending
+   */
+  isPending(key: string): boolean {
+    return this.pendingRequests.has(key);
+  }
+
+  /**
+   * Get all pending request keys
+   */
+  getPendingKeys(): string[] {
+    return Array.from(this.pendingRequests.keys());
+  }
+}