@editframe/elements 0.17.6-beta.0 → 0.18.3-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,97 @@
+import type { AudioSample, VideoSample } from "mediabunny";
+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;
+
+    // Round to microsecond precision to handle floating point issues
+    // without introducing timing aliasing problems
+    const roundToMicroseconds = (timeMs: number) =>
+      Math.round(timeMs * 1000) / 1000;
+    const targetTimeMs = roundToMicroseconds(desiredSeekTimeMs);
+
+    // Find the sample that contains the target time
+    for (const sample of currentBuffer) {
+      const sampleStartMs = roundToMicroseconds((sample.timestamp || 0) * 1000);
+      const sampleDurationMs = roundToMicroseconds(
+        (sample.duration || 0) * 1000,
+      );
+      const sampleEndMs = sampleStartMs + sampleDurationMs;
+
+      // Check if the desired time falls within this sample's time span [start, 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,
@@ -12,6 +11,8 @@ import { fetchContext } from "./fetchContext.js";
 import { type FocusContext, focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
+import { ElementConnectionManager } from "./services/ElementConnectionManager.js";
+import { PlaybackController } from "./services/PlaybackController.js";
 
 export const targetTimegroupContext = createContext<EFTimegroup | null>(
   "target-timegroup",
@@ -135,9 +136,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     currentTimeMs = 0;
 
-    #FPS = 30;
-    #MS_PER_FRAME = 1000 / this.#FPS;
-
     #timegroupObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
@@ -210,116 +208,37 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       this.playing = false;
     }
 
-    #playbackAudioContext: AudioContext | null = null;
-    #playbackAnimationFrameRequest: number | null = null;
-    #AUDIO_PLAYBACK_SLICE_MS = 1000;
-
-    #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
-      const rawTimeMs =
-        startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1000;
-      const nextTimeMs =
-        Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
-      if (nextTimeMs !== this.currentTimeMs) {
-        this.currentTimeMs = nextTimeMs;
-      }
-      this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
-        this.#syncPlayheadToAudioContext(target, startMs);
-      });
-    }
+    // Services for clean playback management
+    // Keep connection manager for potential future use
+    // @ts-ignore - Keeping for future use
+    private _elementConnectionManager = new ElementConnectionManager(3000);
+    private playbackController = new PlaybackController({
+      fps: 30,
+      onTimeUpdate: (timeMs: number) => {
+        this.currentTimeMs = timeMs;
+      },
+      onPlayStateChange: (playing: boolean) => {
+        this.playing = playing;
+      },
+      onError: (error: Error) => {
+        console.error("🎵 [PLAYBACK_ERROR]:", error);
+      },
+    });
 
     private async stopPlayback() {
-      if (this.#playbackAudioContext) {
-        if (this.#playbackAudioContext.state !== "closed") {
-          await this.#playbackAudioContext.close();
-        }
-      }
-      if (this.#playbackAnimationFrameRequest) {
-        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-      }
-      this.#playbackAudioContext = null;
+      await this.playbackController.stopPlayback();
     }
 
     private async startPlayback() {
-      await this.stopPlayback();
       const timegroup = this.targetTimegroup;
       if (!timegroup) {
         return;
       }
 
-      await timegroup.waitForMediaDurations();
-
-      let currentMs = timegroup.currentTimeMs;
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
-
-      if (fromMs >= toMs) {
-        this.pause();
-        return;
-      }
-
-      let bufferCount = 0;
-      this.#playbackAudioContext = new AudioContext({
-        latencyHint: "playback",
-      });
-
-      if (this.#playbackAnimationFrameRequest) {
-        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-      }
-      this.#syncPlayheadToAudioContext(timegroup, currentMs);
-      const playbackContext = this.#playbackAudioContext;
-      if (playbackContext.state === "suspended") {
-        console.warn(
-          "AudioContext is suspended, media playback will not work until user has interacted with page.",
-        );
-        this.playing = false;
-        return;
-      }
-      await playbackContext.suspend();
-
-      const fillBuffer = async () => {
-        if (bufferCount > 1) {
-          return;
-        }
-        const canFillBuffer = await queueBufferSource();
-        if (canFillBuffer) {
-          fillBuffer();
-        }
-      };
-
-      const queueBufferSource = async () => {
-        if (currentMs >= toMs) {
-          return false;
-        }
-        const startMs = currentMs;
-        const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
-        currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
-        const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-        bufferCount++;
-        const source = playbackContext.createBufferSource();
-        source.buffer = audioBuffer;
-        source.connect(playbackContext.destination);
-        source.start((startMs - fromMs) / 1000);
-        source.onended = () => {
-          bufferCount--;
-          if (endMs >= toMs) {
-            this.pause();
-            if (this.loop) {
-              this.updateComplete.then(() => {
-                this.currentTimeMs = 0;
-                this.updateComplete.then(() => {
-                  this.play();
-                });
-              });
-            }
-          } else {
-            fillBuffer();
-          }
-        };
-        return true;
-      };
-
-      await fillBuffer();
-      await playbackContext.resume();
+      await this.playbackController.startPlayback(
+        timegroup,
+        timegroup.currentTimeMs,
+      );
     }
   }
 

package/src/gui/services/ElementConnectionManager.browsertest.ts

@@ -0,0 +1,263 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { ElementConnectionManager } from "./ElementConnectionManager.js";
+
+describe("ElementConnectionManager", () => {
+  let manager: ElementConnectionManager;
+  let audioContext: AudioContext;
+  let mockTimegroup: any;
+  let mockMediaElements: any[];
+
+  beforeEach(() => {
+    manager = new ElementConnectionManager(3000);
+    audioContext = new AudioContext();
+
+    // Create mock media elements
+    mockMediaElements = [
+      {
+        src: "audio1.mp3",
+        startTimeMs: 1000,
+        endTimeMs: 3000,
+        currentSourceTimeMs: 0,
+        audioElement: { currentTime: 0, play: vi.fn(), pause: vi.fn() },
+        getMediaElementSource: vi.fn(),
+      },
+      {
+        src: "audio2.mp3",
+        startTimeMs: 2500,
+        endTimeMs: 5000,
+        currentSourceTimeMs: 0,
+        audioElement: { currentTime: 0, play: vi.fn(), pause: vi.fn() },
+        getMediaElementSource: vi.fn(),
+      },
+      {
+        src: "audio3.mp3",
+        startTimeMs: 6000,
+        endTimeMs: 8000,
+        currentSourceTimeMs: 0,
+        audioElement: { currentTime: 0, play: vi.fn(), pause: vi.fn() },
+        getMediaElementSource: vi.fn(),
+      },
+    ];
+
+    // Mock timegroup
+    mockTimegroup = {
+      querySelectorAll: vi.fn().mockReturnValue(mockMediaElements),
+    };
+
+    // Mock MediaElementAudioSourceNode for each element
+    mockMediaElements.forEach((element, _index) => {
+      const mockSource = {
+        connect: vi.fn(),
+        disconnect: vi.fn(),
+        context: audioContext,
+      } as any;
+      element.getMediaElementSource.mockResolvedValue(mockSource);
+    });
+  });
+
+  afterEach(async () => {
+    manager.clearAll();
+    if (audioContext.state !== "closed") {
+      await audioContext.close();
+    }
+    vi.clearAllMocks();
+  });
+
+  describe("Constructor and Configuration", () => {
+    test("should initialize with default lookahead", () => {
+      const defaultManager = new ElementConnectionManager();
+      expect(defaultManager.getLookaheadMs()).toBe(3000);
+    });
+
+    test("should initialize with custom lookahead", () => {
+      const customManager = new ElementConnectionManager(5000);
+      expect(customManager.getLookaheadMs()).toBe(5000);
+    });
+
+    test("should allow updating lookahead", () => {
+      manager.setLookaheadMs(4000);
+      expect(manager.getLookaheadMs()).toBe(4000);
+    });
+  });
+
+  describe("Element Connection Logic", () => {
+    test("should prepare elements that are starting soon", async () => {
+      // At time 0ms with 3s lookahead, both audio1 (1000ms) and audio2 (2500ms) should be prepared
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 0);
+
+      const info = manager.getConnectionInfo();
+      expect(info.total).toBe(2); // Both audio1 and audio2 within 3s lookahead
+      expect(info.prepared).toBe(2);
+      expect(info.connected).toBe(0);
+
+      // Verify both elements were prepared
+      expect(mockMediaElements[0].getMediaElementSource).toHaveBeenCalledWith(
+        audioContext,
+      );
+      expect(mockMediaElements[1].getMediaElementSource).toHaveBeenCalledWith(
+        audioContext,
+      );
+    });
+
+    test("should activate elements when they become current", async () => {
+      // First prepare the element
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 500);
+
+      // Then activate when it becomes current
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 1500);
+
+      const info = manager.getConnectionInfo();
+      expect(info.connected).toBe(1);
+      expect(mockMediaElements[0].audioElement.play).toHaveBeenCalled();
+    });
+
+    test("should handle multiple active elements simultaneously", async () => {
+      // At time 2750ms, both audio1 (1000-3000) and audio2 (2500-5000) should be active
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2750);
+
+      const info = manager.getConnectionInfo();
+      expect(info.connected).toBe(2);
+
+      expect(mockMediaElements[0].audioElement.play).toHaveBeenCalled();
+      expect(mockMediaElements[1].audioElement.play).toHaveBeenCalled();
+    });
+
+    test("should deactivate elements when they end", async () => {
+      // Activate audio1
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2000);
+      expect(manager.getConnectionInfo().connected).toBe(1);
+
+      // Move past audio1's end time
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 3500);
+
+      const info = manager.getConnectionInfo();
+      // audio1 should be deactivated but still prepared, audio2 should be active
+      expect(info.connected).toBe(1); // Only audio2 active
+      expect(mockMediaElements[0].audioElement.pause).toHaveBeenCalled();
+    });
+
+    test("should cleanup old elements outside cleanup threshold", async () => {
+      // Activate and then move far past
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2000);
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 10000); // 7 seconds later
+
+      const info = manager.getConnectionInfo();
+      // All old elements should be cleaned up, only audio3 might be prepared if in lookahead
+      expect(info.total).toBeLessThan(mockMediaElements.length);
+    });
+  });
+
+  describe("Error Handling", () => {
+    test("should propagate getMediaElementSource errors", async () => {
+      // Mock both elements within lookahead to fail
+      mockMediaElements[0].getMediaElementSource.mockRejectedValue(
+        new Error("Connection failed"),
+      );
+      mockMediaElements[1].getMediaElementSource.mockRejectedValue(
+        new Error("Connection failed"),
+      );
+
+      // Should throw the built-in error
+      await expect(
+        manager.updateConnectedElements(audioContext, mockTimegroup, 500),
+      ).rejects.toThrow("Connection failed");
+    });
+
+    test("should propagate activation errors", async () => {
+      mockMediaElements[0].audioElement.play.mockRejectedValue(
+        new Error("Play failed"),
+      );
+
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 500);
+
+      // Should throw the built-in error when activating
+      await expect(
+        manager.updateConnectedElements(audioContext, mockTimegroup, 1500),
+      ).rejects.toThrow("Play failed");
+    });
+
+    test("should handle closed AudioContext gracefully", async () => {
+      await audioContext.close();
+
+      await expect(
+        manager.updateConnectedElements(audioContext, mockTimegroup, 1500),
+      ).resolves.not.toThrow();
+
+      expect(manager.getConnectionInfo().total).toBe(0);
+    });
+  });
+
+  describe("Cleanup and Lifecycle", () => {
+    test("should clear all connections", async () => {
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2000);
+      expect(manager.getConnectionInfo().total).toBeGreaterThan(0);
+
+      manager.clearAll();
+      expect(manager.getConnectionInfo().total).toBe(0);
+    });
+
+    test("should disconnect connected elements during clearAll", async () => {
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2000);
+
+      const mockSource = await mockMediaElements[0].getMediaElementSource();
+
+      manager.clearAll();
+
+      expect(mockSource.disconnect).toHaveBeenCalled();
+    });
+
+    test("should handle clearAll with no elements gracefully", () => {
+      expect(() => manager.clearAll()).not.toThrow();
+    });
+  });
+
+  describe("Connection Info and Debugging", () => {
+    test("should provide accurate connection info", async () => {
+      const initialInfo = manager.getConnectionInfo();
+      expect(initialInfo).toEqual({ total: 0, connected: 0, prepared: 0 });
+
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 500);
+      const preparedInfo = manager.getConnectionInfo();
+      expect(preparedInfo.prepared).toBeGreaterThan(0);
+
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 1500);
+      const activeInfo = manager.getConnectionInfo();
+      expect(activeInfo.connected).toBeGreaterThan(0);
+    });
+
+    test("should track connected vs prepared states accurately", async () => {
+      // Prepare multiple elements
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 0);
+
+      // Activate one
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 2750);
+
+      const info = manager.getConnectionInfo();
+      expect(info.total).toBe(info.connected + info.prepared);
+      expect(info.connected).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Lookahead Behavior", () => {
+    test("should respect lookahead window for preparation", async () => {
+      manager.setLookaheadMs(1000); // 1 second lookahead
+
+      // At time 0, only elements starting within 1 second should be prepared
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 0);
+
+      const info = manager.getConnectionInfo();
+      expect(info.total).toBe(1); // Only audio1 at 1000ms
+    });
+
+    test("should adjust preparation based on lookahead changes", async () => {
+      manager.setLookaheadMs(500); // Very short lookahead
+
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 0);
+      expect(manager.getConnectionInfo().total).toBe(0); // No elements within 500ms
+
+      manager.setLookaheadMs(2000); // Longer lookahead
+      await manager.updateConnectedElements(audioContext, mockTimegroup, 0);
+      expect(manager.getConnectionInfo().total).toBe(1); // audio1 now within range
+    });
+  });
+});