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

package/src/elements/EFMedia/services/MediaSourceService.ts

@@ -1,102 +0,0 @@
-import {
-  MediaSourceManager,
-  type MediaSourceManagerOptions,
-} from "../../../services/MediaSourceManager.js";
-
-export interface MediaSourceServiceOptions {
-  onError?: (error: Error) => void;
-  onReady?: () => void;
-  onUpdateEnd?: () => void;
-  timeout?: number;
-}
-
-/**
- * Service for managing MediaSource lifecycle and audio element creation
- * Extracted from EFMedia to improve separation of concerns and testability
- */
-export class MediaSourceService {
-  private mediaSourceManager: MediaSourceManager | null = null;
-  private options: MediaSourceServiceOptions;
-
-  constructor(options: MediaSourceServiceOptions = {}) {
-    this.options = options;
-  }
-
-  /**
-   * Initialize MediaSource if not already initialized
-   */
-  async ensureInitialized(): Promise<void> {
-    if (this.mediaSourceManager?.isReady()) {
-      return;
-    }
-
-    await this.initialize();
-  }
-
-  /**
-   * Initialize fresh MediaSource
-   */
-  async initialize(): Promise<void> {
-    // Clean up existing instance
-    this.cleanup();
-
-    // Create new MediaSourceManager
-    const managerOptions: MediaSourceManagerOptions = {
-      onError: this.options.onError,
-      onReady: this.options.onReady,
-      onUpdateEnd: this.options.onUpdateEnd,
-      timeout: this.options.timeout,
-    };
-
-    this.mediaSourceManager = new MediaSourceManager(managerOptions);
-    await this.mediaSourceManager.initialize();
-  }
-
-  /**
-   * Get audio element for MediaElementSource creation
-   */
-  getAudioElement(): HTMLAudioElement | null {
-    return this.mediaSourceManager?.getAudioElement() || null;
-  }
-
-  /**
-   * Feed audio segments to MediaSource
-   */
-  async feedSegment(segmentBuffer: ArrayBuffer): Promise<void> {
-    await this.ensureInitialized();
-    if (this.mediaSourceManager) {
-      await this.mediaSourceManager.feedSegment(segmentBuffer);
-    }
-  }
-
-  /**
-   * Check if MediaSource is ready
-   */
-  isReady(): boolean {
-    return this.mediaSourceManager?.isReady() ?? false;
-  }
-
-  /**
-   * Get buffered time ranges
-   */
-  getBuffered(): TimeRanges | null {
-    return this.mediaSourceManager?.getBuffered() || null;
-  }
-
-  /**
-   * Set audio element current time
-   */
-  setCurrentTime(timeMs: number): void {
-    this.mediaSourceManager?.setCurrentTime(timeMs);
-  }
-
-  /**
-   * Clean up MediaSource resources
-   */
-  cleanup(): void {
-    if (this.mediaSourceManager) {
-      this.mediaSourceManager.cleanup();
-      this.mediaSourceManager = null;
-    }
-  }
-}

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

@@ -1,263 +0,0 @@
-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
-    });
-  });
-});

package/src/gui/services/ElementConnectionManager.ts

@@ -1,224 +0,0 @@
-/**
- * Manages dynamic connection/disconnection of media elements to AudioContext
- * Extracted from ContextMixin to improve separation of concerns and testability
- */
-export class ElementConnectionManager {
-  private connectedMediaSources = new Map<
-    any,
-    { mediaElementSource: MediaElementAudioSourceNode; connected: boolean }
-  >();
-  private lookaheadMs: number;
-
-  constructor(lookaheadMs = 3000) {
-    this.lookaheadMs = lookaheadMs;
-  }
-
-  /**
-   * Update connected media elements based on current playhead position
-   * Connects upcoming elements and disconnects past elements
-   */
-  async updateConnectedElements(
-    audioContext: AudioContext,
-    timegroup: any, // EFTimegroup type
-    currentMs: number,
-  ): Promise<void> {
-    if (!audioContext || audioContext.state === "closed") return;
-
-    const allMediaElements = Array.from(
-      timegroup.querySelectorAll("ef-audio, ef-video"),
-    ) as any[];
-    const lookaheadMs = currentMs + this.lookaheadMs;
-
-    // Find elements that should be connected (active now or active soon)
-    const elementsToConnect = this.getElementsToConnect(
-      allMediaElements,
-      currentMs,
-      lookaheadMs,
-    );
-
-    // Connect new elements
-    await this.connectNewElements(audioContext, elementsToConnect);
-
-    // Update connection states for active elements
-    await this.updateElementStates(currentMs);
-
-    // Clean up old elements
-    this.cleanupOldElements(currentMs);
-  }
-
-  /**
-   * Find elements that should be connected based on timeline position
-   */
-  private getElementsToConnect(
-    allElements: any[],
-    currentMs: number,
-    lookaheadMs: number,
-  ): any[] {
-    return allElements.filter((mediaElement) => {
-      const startTime = mediaElement.startTimeMs;
-      const endTime = mediaElement.endTimeMs;
-
-      // Connect if:
-      // 1. Currently active: currentMs is within [startTime, endTime]
-      // 2. Starting soon: startTime is within lookahead window
-      const isCurrentlyActive = currentMs >= startTime && currentMs < endTime;
-      const isStartingSoon = startTime > currentMs && startTime <= lookaheadMs;
-
-      return isCurrentlyActive || isStartingSoon;
-    });
-  }
-
-  /**
-   * Connect new elements that aren't already connected
-   */
-  private async connectNewElements(
-    audioContext: AudioContext,
-    elementsToConnect: any[],
-  ): Promise<void> {
-    for (const mediaElement of elementsToConnect) {
-      if (!this.connectedMediaSources.has(mediaElement)) {
-        const mediaElementSource =
-          await mediaElement.getMediaElementSource(audioContext);
-
-        this.connectedMediaSources.set(mediaElement, {
-          mediaElementSource,
-          connected: false, // Will be activated when element becomes active
-        });
-      }
-    }
-  }
-
-  /**
-   * Update connection states for all managed elements
-   */
-  private async updateElementStates(currentMs: number): Promise<void> {
-    for (const [
-      mediaElement,
-      sourceInfo,
-    ] of this.connectedMediaSources.entries()) {
-      const startTime = mediaElement.startTimeMs;
-      const endTime = mediaElement.endTimeMs;
-      const isCurrentlyActive = currentMs >= startTime && currentMs < endTime;
-
-      if (isCurrentlyActive && !sourceInfo.connected) {
-        await this.activateElement(mediaElement, sourceInfo);
-      } else if (!isCurrentlyActive && sourceInfo.connected) {
-        await this.deactivateElement(mediaElement, sourceInfo);
-      }
-    }
-  }
-
-  /**
-   * Activate an element (connect to destination and start playback)
-   */
-  private async activateElement(
-    mediaElement: any,
-    sourceInfo: {
-      mediaElementSource: MediaElementAudioSourceNode;
-      connected: boolean;
-    },
-  ): Promise<void> {
-    sourceInfo.mediaElementSource.connect(
-      sourceInfo.mediaElementSource.context.destination,
-    );
-    sourceInfo.connected = true;
-
-    // Set correct timing
-    if (mediaElement.audioElement) {
-      const mediaTimeMs = mediaElement.currentSourceTimeMs;
-      mediaElement.audioElement.currentTime = mediaTimeMs / 1000;
-      await mediaElement.audioElement.play();
-    }
-  }
-
-  /**
-   * Deactivate an element (disconnect but keep prepared)
-   */
-  private async deactivateElement(
-    mediaElement: any,
-    sourceInfo: {
-      mediaElementSource: MediaElementAudioSourceNode;
-      connected: boolean;
-    },
-  ): Promise<void> {
-    sourceInfo.mediaElementSource.disconnect();
-    sourceInfo.connected = false;
-
-    if (mediaElement.audioElement) {
-      mediaElement.audioElement.pause();
-    }
-  }
-
-  /**
-   * Clean up elements that are far in the past
-   */
-  private cleanupOldElements(currentMs: number): void {
-    const cleanupThresholdMs = currentMs - this.lookaheadMs;
-
-    for (const [
-      mediaElement,
-      sourceInfo,
-    ] of this.connectedMediaSources.entries()) {
-      const endTime = mediaElement.endTimeMs;
-
-      if (endTime < cleanupThresholdMs) {
-        if (sourceInfo.connected) {
-          sourceInfo.mediaElementSource.disconnect();
-        }
-        this.connectedMediaSources.delete(mediaElement);
-      }
-    }
-  }
-
-  /**
-   * Clear all connected media sources (for cleanup)
-   */
-  clearAll(): void {
-    for (const [, sourceInfo] of this.connectedMediaSources.entries()) {
-      try {
-        if (sourceInfo.connected) {
-          sourceInfo.mediaElementSource.disconnect();
-        }
-      } catch (_error) {
-        // Ignore cleanup errors
-      }
-    }
-    this.connectedMediaSources.clear();
-  }
-
-  /**
-   * Get connection status for testing/debugging
-   */
-  getConnectionInfo(): { total: number; connected: number; prepared: number } {
-    let connected = 0;
-    let prepared = 0;
-
-    for (const [, sourceInfo] of this.connectedMediaSources.entries()) {
-      if (sourceInfo.connected) {
-        connected++;
-      } else {
-        prepared++;
-      }
-    }
-
-    return {
-      total: this.connectedMediaSources.size,
-      connected,
-      prepared,
-    };
-  }
-
-  /**
-   * Set lookahead time
-   */
-  setLookaheadMs(lookaheadMs: number): void {
-    this.lookaheadMs = lookaheadMs;
-  }
-
-  /**
-   * Get current lookahead time
-   */
-  getLookaheadMs(): number {
-    return this.lookaheadMs;
-  }
-}