@editframe/elements 0.26.2-beta.0 → 0.26.4-beta.0

package/src/elements/EFMedia/shared/RenditionHelpers.browsertest.ts

@@ -1,246 +0,0 @@
-import { test as baseTest, describe, vi } from "vitest";
-import type {
-  AudioRendition,
-  MediaEngine,
-  VideoRendition,
-} from "../../../transcoding/types";
-import { calculateSegmentRange, computeSegmentId } from "./RenditionHelpers";
-
-const test = baseTest.extend<{
-  mockMediaEngine: MediaEngine;
-  mockVideoRendition: VideoRendition;
-  mockAudioRendition: AudioRendition;
-  mockMediaEngineWithoutAudio: MediaEngine;
-  mockMediaEngineWithoutVideo: MediaEngine;
-}>({
-  mockMediaEngine: async ({}, use) => {
-    const mockVideoRendition = {
-      trackId: 1,
-      src: "video-track.mp4",
-      segmentDurationMs: 1000,
-    } as VideoRendition;
-
-    const mockAudioRendition = {
-      trackId: 2,
-      src: "audio-track.mp4",
-      segmentDurationMs: 1000,
-    } as AudioRendition;
-
-    const mockMediaEngine = {
-      durationMs: 10000,
-      src: "https://example.com/media.mp4",
-      videoRendition: mockVideoRendition,
-      audioRendition: mockAudioRendition,
-      getVideoRendition: () => mockVideoRendition,
-      getAudioRendition: () => mockAudioRendition,
-      fetchMediaSegment: vi.fn(),
-    } as unknown as MediaEngine;
-    await use(mockMediaEngine);
-  },
-
-  mockVideoRendition: async ({}, use) => {
-    const mockVideoRendition = {
-      trackId: 1,
-      src: "video-track.mp4",
-      segmentDurationMs: 1000,
-    } as VideoRendition;
-    await use(mockVideoRendition);
-  },
-
-  mockAudioRendition: async ({}, use) => {
-    const mockAudioRendition = {
-      trackId: 2,
-      src: "audio-track.mp4",
-      segmentDurationMs: 1000,
-    } as AudioRendition;
-    await use(mockAudioRendition);
-  },
-
-  mockMediaEngineWithoutAudio: async ({}, use) => {
-    const videoRendition = {
-      trackId: 1,
-      src: "video-track.mp4",
-      segmentDurationMs: 1000,
-    } as VideoRendition;
-
-    const mockMediaEngine = {
-      durationMs: 10000,
-      src: "https://example.com/media.mp4",
-      videoRendition,
-      audioRendition: undefined,
-      getVideoRendition: () => videoRendition,
-      getAudioRendition: () => undefined,
-      fetchMediaSegment: vi.fn(),
-    } as unknown as MediaEngine;
-    await use(mockMediaEngine);
-  },
-
-  mockMediaEngineWithoutVideo: async ({}, use) => {
-    const audioRendition = {
-      trackId: 2,
-      src: "audio-track.mp4",
-      segmentDurationMs: 1000,
-    } as AudioRendition;
-
-    const mockMediaEngine = {
-      durationMs: 10000,
-      src: "https://example.com/media.mp4",
-      videoRendition: undefined,
-      audioRendition,
-      getVideoRendition: () => undefined,
-      getAudioRendition: () => audioRendition,
-      fetchMediaSegment: vi.fn(),
-    } as unknown as MediaEngine;
-    await use(mockMediaEngine);
-  },
-});
-
-describe("RenditionHelpers", () => {
-  describe("MediaEngine Rendition Access", () => {
-    test("mediaEngine.getAudioRendition() returns undefined for video-only assets", ({
-      mockMediaEngineWithoutAudio,
-      expect,
-    }) => {
-      const result = mockMediaEngineWithoutAudio.getAudioRendition();
-      expect(result).toBeUndefined();
-    });
-
-    test("mediaEngine.getVideoRendition() returns undefined for audio-only assets", ({
-      mockMediaEngineWithoutVideo,
-      expect,
-    }) => {
-      const result = mockMediaEngineWithoutVideo.getVideoRendition();
-      expect(result).toBeUndefined();
-    });
-
-    test("mediaEngine.getAudioRendition() returns rendition when available", ({
-      mockMediaEngine,
-      expect,
-    }) => {
-      const result = mockMediaEngine.getAudioRendition();
-      expect(result).toBeDefined();
-      expect(result?.trackId).toBe(2);
-    });
-
-    test("mediaEngine.getVideoRendition() returns rendition when available", ({
-      mockMediaEngine,
-      expect,
-    }) => {
-      const result = mockMediaEngine.getVideoRendition();
-      expect(result).toBeDefined();
-      expect(result?.trackId).toBe(1);
-    });
-  });
-
-  describe("computeSegmentId", () => {
-    test("calculates segment ID correctly for audio rendition", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      // Test various time points
-      expect(computeSegmentId(0, mockAudioRendition)).toBe(1); // First segment
-      expect(computeSegmentId(500, mockAudioRendition)).toBe(1); // Still first segment
-      expect(computeSegmentId(999, mockAudioRendition)).toBe(1); // Still first segment
-      expect(computeSegmentId(1000, mockAudioRendition)).toBe(2); // Second segment
-      expect(computeSegmentId(1500, mockAudioRendition)).toBe(2); // Still second segment
-      expect(computeSegmentId(2000, mockAudioRendition)).toBe(3); // Third segment
-    });
-
-    test("calculates segment ID correctly for video rendition", ({
-      mockVideoRendition,
-      expect,
-    }) => {
-      // Test various time points
-      expect(computeSegmentId(0, mockVideoRendition)).toBe(1); // First segment
-      expect(computeSegmentId(999, mockVideoRendition)).toBe(1); // Still first segment
-      expect(computeSegmentId(1000, mockVideoRendition)).toBe(2); // Second segment
-      expect(computeSegmentId(2500, mockVideoRendition)).toBe(3); // Third segment
-    });
-
-    test("returns undefined when segmentDurationMs is not available", ({
-      expect,
-    }) => {
-      const renditionWithoutDuration = {
-        trackId: 1,
-        src: "test.mp4",
-        segmentDurationMs: undefined,
-      } as AudioRendition;
-
-      expect(computeSegmentId(1000, renditionWithoutDuration)).toBeUndefined();
-    });
-
-    test("handles edge case of negative time", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      expect(computeSegmentId(-100, mockAudioRendition)).toBe(1); // Should clamp to segment 1
-    });
-  });
-
-  describe("calculateSegmentRange", () => {
-    test("calculates segment range for single segment", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(100, 800, mockAudioRendition);
-      expect(result).toEqual([1]);
-    });
-
-    test("calculates segment range spanning multiple segments", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(500, 2500, mockAudioRendition);
-      expect(result).toEqual([1, 2, 3]);
-    });
-
-    test("calculates segment range for exact segment boundaries", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(1000, 2000, mockAudioRendition);
-      expect(result).toEqual([2, 3]);
-    });
-
-    test("handles single time point (start equals end)", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(1500, 1500, mockAudioRendition);
-      expect(result).toEqual([2]);
-    });
-
-    test("returns empty array when segmentDurationMs is not available", ({
-      expect,
-    }) => {
-      const renditionWithoutDuration = {
-        trackId: 1,
-        src: "test.mp4",
-        segmentDurationMs: undefined,
-      } as AudioRendition;
-
-      const result = calculateSegmentRange(
-        1000,
-        2000,
-        renditionWithoutDuration,
-      );
-      expect(result).toEqual([]);
-    });
-
-    test("works with video renditions too", ({
-      mockVideoRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(1500, 3500, mockVideoRendition);
-      expect(result).toEqual([2, 3, 4]);
-    });
-
-    test("handles edge case where start time is negative", ({
-      mockAudioRendition,
-      expect,
-    }) => {
-      const result = calculateSegmentRange(-500, 1500, mockAudioRendition);
-      expect(result).toEqual([1, 2]);
-    });
-  });
-});

package/src/elements/EFMedia/shared/RenditionHelpers.ts

@@ -1,56 +0,0 @@
-import type {
-  AudioRendition,
-  VideoRendition,
-} from "../../../transcoding/types";
-
-/**
- * Calculate which segment contains a given timestamp
- * Returns 1-based segment ID, or undefined if segmentDurationMs is not available
- */
-export const computeSegmentId = (
-  timeMs: number,
-  rendition: AudioRendition | VideoRendition,
-): number | undefined => {
-  if (!rendition.segmentDurationMs) {
-    return undefined;
-  }
-
-  // Handle negative time by clamping to 0
-  const adjustedTimeMs = Math.max(0, timeMs);
-  const segmentIndex = Math.floor(adjustedTimeMs / rendition.segmentDurationMs);
-  return segmentIndex + 1; // Convert to 1-based segment ID
-};
-
-/**
- * Calculate range of segment IDs that overlap with a time range
- * Returns array of 1-based segment IDs, or empty array if segmentDurationMs is not available
- */
-export const calculateSegmentRange = (
-  startTimeMs: number,
-  endTimeMs: number,
-  rendition: AudioRendition | VideoRendition,
-): number[] => {
-  if (!rendition.segmentDurationMs) {
-    return [];
-  }
-
-  // Handle edge case where start equals end
-  if (startTimeMs === endTimeMs) {
-    const segmentId = computeSegmentId(startTimeMs, rendition);
-    return segmentId ? [segmentId] : [];
-  }
-
-  const startSegmentId = computeSegmentId(startTimeMs, rendition);
-  const endSegmentId = computeSegmentId(endTimeMs, rendition);
-
-  if (startSegmentId === undefined || endSegmentId === undefined) {
-    return [];
-  }
-
-  const segments: number[] = [];
-  for (let segmentId = startSegmentId; segmentId <= endSegmentId; segmentId++) {
-    segments.push(segmentId);
-  }
-
-  return segments;
-};

package/src/elements/EFMedia/shared/ThumbnailExtractor.ts

@@ -1,227 +0,0 @@
-import { ALL_FORMATS, BlobSource, CanvasSink, Input } from "mediabunny";
-import type {
-  ThumbnailResult,
-  VideoRendition,
-} from "../../../transcoding/types/index.js";
-import type { BaseMediaEngine } from "../BaseMediaEngine.js";
-import { globalInputCache } from "./GlobalInputCache.js";
-
-/**
- * Shared thumbnail extraction logic for all MediaEngine implementations
- * Eliminates code duplication and provides consistent behavior
- */
-export class ThumbnailExtractor {
-  constructor(private mediaEngine: BaseMediaEngine) {}
-
-  /**
-   * Extract thumbnails at multiple timestamps efficiently using segment batching
-   */
-  async extractThumbnails(
-    timestamps: number[],
-    rendition: VideoRendition,
-    durationMs: number,
-  ): Promise<(ThumbnailResult | null)[]> {
-    if (timestamps.length === 0) {
-      return [];
-    }
-
-    // Validate and filter timestamps within bounds
-    const validTimestamps = timestamps.filter(
-      (timeMs) => timeMs >= 0 && timeMs <= durationMs,
-    );
-
-    if (validTimestamps.length === 0) {
-      console.warn(
-        `ThumbnailExtractor: All timestamps out of bounds (0-${durationMs}ms)`,
-      );
-      return timestamps.map(() => null);
-    }
-
-    // Group timestamps by segment for batch processing
-    const segmentGroups = this.groupTimestampsBySegment(
-      validTimestamps,
-      rendition,
-    );
-
-    // Extract batched by segment using CanvasSink
-    const results = new Map<number, ThumbnailResult | null>();
-
-    for (const [segmentId, segmentTimestamps] of segmentGroups) {
-      try {
-        const segmentResults = await this.extractSegmentThumbnails(
-          segmentId,
-          segmentTimestamps,
-          rendition,
-        );
-
-        for (const [timestamp, thumbnail] of segmentResults) {
-          results.set(timestamp, thumbnail);
-        }
-      } catch (error) {
-        console.warn(
-          `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,
-          error,
-        );
-        // Mark all timestamps in this segment as failed
-        for (const timestamp of segmentTimestamps) {
-          results.set(timestamp, null);
-        }
-      }
-    }
-
-    // Return in original order, null for any that failed or were out of bounds
-    return timestamps.map((t) => {
-      // If timestamp was out of bounds, return null
-      if (t < 0 || t > durationMs) {
-        return null;
-      }
-      return results.get(t) || null;
-    });
-  }
-
-  /**
-   * Group timestamps by segment ID for efficient batch processing
-   */
-  private groupTimestampsBySegment(
-    timestamps: number[],
-    rendition: VideoRendition,
-  ): Map<number, number[]> {
-    const segmentGroups = new Map<number, number[]>();
-
-    for (const timeMs of timestamps) {
-      try {
-        const segmentId = this.mediaEngine.computeSegmentId(timeMs, rendition);
-        if (segmentId !== undefined) {
-          if (!segmentGroups.has(segmentId)) {
-            segmentGroups.set(segmentId, []);
-          }
-          const segmentGroup = segmentGroups.get(segmentId) ?? [];
-          if (!segmentGroup) {
-            segmentGroups.set(segmentId, []);
-          }
-          segmentGroup.push(timeMs);
-        }
-      } catch (error) {
-        console.warn(
-          `ThumbnailExtractor: Could not compute segment for timestamp ${timeMs}:`,
-          error,
-        );
-      }
-    }
-
-    return segmentGroups;
-  }
-
-  /**
-   * Extract thumbnails for a specific segment using CanvasSink
-   */
-  private async extractSegmentThumbnails(
-    segmentId: number,
-    timestamps: number[],
-    rendition: VideoRendition,
-  ): Promise<Map<number, ThumbnailResult | null>> {
-    const results = new Map<number, ThumbnailResult | null>();
-
-    try {
-      // Get segment data through existing media engine methods (uses caches)
-      const abortController = new AbortController();
-      const [initSegment, mediaSegment] = await Promise.all([
-        this.mediaEngine.fetchInitSegment(rendition, abortController.signal),
-        this.mediaEngine.fetchMediaSegment(segmentId, rendition),
-      ]);
-
-      // Create Input for this segment using global shared cache
-      const segmentBlob = new Blob([initSegment, mediaSegment]);
-
-      let input = globalInputCache.get(rendition.src, segmentId, rendition.id);
-      if (!input) {
-        input = new Input({
-          formats: ALL_FORMATS,
-          source: new BlobSource(segmentBlob),
-        });
-        globalInputCache.set(rendition.src, segmentId, input, rendition.id);
-      }
-
-      // Set up CanvasSink for batched extraction
-      const videoTrack = await input.getPrimaryVideoTrack();
-      if (!videoTrack) {
-        // No video track - return nulls for all timestamps
-        for (const timestamp of timestamps) {
-          results.set(timestamp, null);
-        }
-        return results;
-      }
-
-      const sink = new CanvasSink(videoTrack);
-
-      // Convert global timestamps to segment-relative (in seconds for mediabunny)
-      const relativeTimestamps = this.convertToSegmentRelativeTimestamps(
-        timestamps,
-        segmentId,
-        rendition,
-      );
-
-      // Batch extract all thumbnails for this segment
-      const timestampResults = [];
-      for await (const result of sink.canvasesAtTimestamps(
-        relativeTimestamps,
-      )) {
-        timestampResults.push(result);
-      }
-
-      // Map results back to original timestamps
-      for (let i = 0; i < timestamps.length; i++) {
-        const globalTimestamp = timestamps[i];
-        if (globalTimestamp === undefined) {
-          continue;
-        }
-
-        const result = timestampResults[i];
-
-        if (result?.canvas) {
-          const canvas = result.canvas;
-          if (
-            canvas instanceof HTMLCanvasElement ||
-            canvas instanceof OffscreenCanvas
-          ) {
-            results.set(globalTimestamp, {
-              timestamp: globalTimestamp,
-              thumbnail: canvas,
-            });
-          } else {
-            results.set(globalTimestamp, null);
-          }
-        } else {
-          results.set(globalTimestamp, null);
-        }
-      }
-    } catch (error) {
-      console.error(
-        `ThumbnailExtractor: Failed to extract thumbnails for segment ${segmentId}:`,
-        error,
-      );
-      // Return nulls for all timestamps on error
-      for (const timestamp of timestamps) {
-        results.set(timestamp, null);
-      }
-    }
-
-    return results;
-  }
-
-  /**
-   * Convert global timestamps to segment-relative timestamps for mediabunny
-   * This is where the main difference between JIT and Asset engines lies
-   */
-  private convertToSegmentRelativeTimestamps(
-    globalTimestamps: number[],
-    segmentId: number,
-    rendition: VideoRendition,
-  ): number[] {
-    return this.mediaEngine.convertToSegmentRelativeTimestamps(
-      globalTimestamps,
-      segmentId,
-      rendition,
-    );
-  }
-}

package/src/elements/EFMedia/tasks/makeMediaEngineTask.browsertest.ts

@@ -1,167 +0,0 @@
-import { customElement } from "lit/decorators.js";
-import { describe } from "vitest";
-
-import { test as baseTest } from "../../../../test/useMSW.js";
-import { EFMedia } from "../../EFMedia.js";
-import { createMediaEngine } from "./makeMediaEngineTask";
-
-@customElement("test-media-engine")
-class TestMediaEngine extends EFMedia {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-media-engine": TestMediaEngine;
-  }
-}
-
-const testWithElement = baseTest.extend<{
-  element: TestMediaEngine;
-  configuration: HTMLElement;
-}>({
-  element: async ({}, use) => {
-    const element = document.createElement("test-media-engine");
-
-    // Set up element with required properties via attributes
-    const apiHost = `${window.location.protocol}//${window.location.host}`;
-    element.setAttribute("api-host", apiHost);
-
-    document.body.appendChild(element);
-    await use(element);
-    element.remove();
-  },
-  configuration: async ({}, use) => {
-    const config = document.createElement("ef-configuration") as any;
-    document.body.appendChild(config);
-    await use(config);
-    config.remove();
-  },
-});
-
-describe("makeMediaEngineTask", () => {
-  describe("createMediaEngine - Engine Selection Logic", () => {
-    testWithElement(
-      "should throw error for empty src when no assetId",
-      async ({ element, expect }) => {
-        element.setAttribute("src", "");
-        element.removeAttribute("asset-id");
-
-        await expect(createMediaEngine(element)).rejects.toThrow(
-          "Unsupported media source",
-        );
-      },
-    );
-
-    testWithElement(
-      "should throw error for whitespace-only src when no assetId",
-      async ({ element, expect }) => {
-        element.setAttribute("src", "   ");
-        element.removeAttribute("asset-id");
-
-        await expect(createMediaEngine(element)).rejects.toThrow(
-          "Unsupported media source",
-        );
-      },
-    );
-
-    testWithElement(
-      "should throw error for null src when no assetId",
-      async ({ element, expect }) => {
-        element.removeAttribute("src");
-        element.removeAttribute("asset-id");
-
-        await expect(createMediaEngine(element)).rejects.toThrow(
-          "Unsupported media source",
-        );
-      },
-    );
-
-    testWithElement(
-      "should throw error when assetId is provided but apiHost is missing",
-      async ({ element, expect }) => {
-        element.setAttribute("asset-id", "test-asset-123");
-        element.setAttribute("api-host", ""); // Explicitly set empty api-host
-        await element.updateComplete; // Wait for Lit to process attributes
-
-        // The test might hit "Unsupported media source" instead due to src being empty
-        // Both errors indicate improper setup, so accept either
-        await expect(createMediaEngine(element)).rejects.toThrow(
-          /(API host is required for AssetID mode|Unsupported media source)/,
-        );
-      },
-    );
-
-    testWithElement(
-      "should choose AssetMediaEngine for local file paths",
-      async ({ element, expect }) => {
-        element.setAttribute("src", "bars-n-tone.mp4"); // Local test asset
-        element.removeAttribute("asset-id");
-
-        const result = await createMediaEngine(element);
-
-        // Should successfully create AssetMediaEngine (doesn't throw)
-        expect(result).toBeDefined();
-        expect(result.constructor.name).toBe("AssetMediaEngine");
-      },
-    );
-
-    testWithElement(
-      "should choose JitMediaEngine for remote URLs with cloud configuration",
-      async ({ element, configuration, expect }) => {
-        // Set up configuration for JIT mode
-        configuration.setAttribute("media-engine", "cloud");
-        (configuration as any).mediaEngine = "cloud"; // Set property for engine selection
-        document.body.appendChild(configuration);
-        configuration.appendChild(element);
-
-        element.setAttribute("src", "http://web:3000/head-moov-480p.mp4");
-        element.removeAttribute("asset-id");
-
-        const result = await createMediaEngine(element);
-
-        // Should successfully create JitMediaEngine
-        expect(result).toBeDefined();
-        expect(result.constructor.name).toBe("JitMediaEngine");
-      },
-    );
-
-    testWithElement(
-      "should default to JitMediaEngine for remote URLs without configuration",
-      async ({ element, expect }) => {
-        // No configuration element = defaults to JitMediaEngine
-        element.setAttribute("src", "http://web:3000/head-moov-480p.mp4");
-        element.removeAttribute("asset-id");
-
-        const result = await createMediaEngine(element);
-
-        expect(result).toBeDefined();
-        expect(result.constructor.name).toBe("JitMediaEngine");
-      },
-    );
-
-    testWithElement(
-      "should ignore empty assetId and use src for engine selection",
-      async ({ element, expect }) => {
-        element.setAttribute("asset-id", ""); // Empty assetId should be ignored
-        element.setAttribute("src", "bars-n-tone.mp4");
-
-        const result = await createMediaEngine(element);
-
-        expect(result).toBeDefined();
-        expect(result.constructor.name).toBe("AssetMediaEngine");
-      },
-    );
-
-    testWithElement(
-      "should ignore whitespace-only assetId and use src for engine selection",
-      async ({ element, expect }) => {
-        element.setAttribute("asset-id", "   "); // Whitespace-only assetId should be ignored
-        element.setAttribute("src", "bars-n-tone.mp4");
-
-        const result = await createMediaEngine(element);
-
-        expect(result).toBeDefined();
-        expect(result.constructor.name).toBe("AssetMediaEngine");
-      },
-    );
-  });
-});