@editframe/elements 0.20.3-beta.0 → 0.21.0-beta.0

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

@@ -16,7 +16,7 @@ const fetchAudioSegmentData = async (
 ): Promise<Map<number, ArrayBuffer>> => {
   const audioRendition = mediaEngine.audioRendition;
   if (!audioRendition) {
-    throw new Error("No audio track available in source");
+    throw new Error("Audio rendition not available");
   }
 
   const segmentData = new Map<number, ArrayBuffer>();
@@ -62,7 +62,7 @@ export const fetchAudioSpanningTime = async (
   fromMs: number,
   toMs: number,
   signal: AbortSignal,
-): Promise<AudioSpan> => {
+): Promise<AudioSpan | undefined> => {
   // Validate inputs
   if (fromMs >= toMs || fromMs < 0) {
     throw new Error(`Invalid time range: fromMs=${fromMs}, toMs=${toMs}`);
@@ -72,12 +72,13 @@ export const fetchAudioSpanningTime = async (
   const mediaEngine = await host.mediaEngineTask.taskComplete;
   const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
 
+  // Return undefined if no audio rendition available
   if (!mediaEngine?.audioRendition) {
-    throw new Error("No audio track available in source");
+    return undefined;
   }
 
   if (!initSegment) {
-    throw new Error("Audio init segment is not available");
+    return undefined;
   }
 
   // Calculate segments needed using the media engine's method

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

@@ -35,7 +35,7 @@ export interface MediaBufferDependencies<
   ) => Promise<number | undefined>;
   prefetchSegment: (segmentId: number, rendition: T) => Promise<void>; // Just trigger prefetch, don't return data
   isSegmentCached: (segmentId: number, rendition: T) => boolean; // Check BaseMediaEngine cache
-  getRendition: () => Promise<T>;
+  getRendition: () => Promise<T | undefined>;
   logError: (message: string, error: any) => void;
 }
 
@@ -208,6 +208,10 @@ export const manageMediaBuffer = async <
   }
 
   const rendition = await deps.getRendition();
+  if (!rendition) {
+    // Cannot buffer without a rendition
+    return currentState;
+  }
   const endTimeMs = seekTimeMs + config.bufferDurationMs;
 
   const desiredSegments = await computeSegmentRangeAsync(
@@ -217,7 +221,6 @@ export const manageMediaBuffer = async <
     rendition,
     deps.computeSegmentId,
   );
-
   // Filter out segments already cached by BaseMediaEngine
   const uncachedSegments = desiredSegments.filter(
     (segmentId) => !deps.isSegmentCached(segmentId, rendition),
@@ -287,10 +290,11 @@ export const manageMediaBuffer = async <
     startNextSegment();
   }
 
-  return {
+  const result = {
     currentSeekTimeMs: seekTimeMs,
     requestedSegments: newRequestedSegments,
     activeRequests: newActiveRequests,
     requestQueue: remainingQueue, // What's left in the queue
   };
+  return result;
 };

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

@@ -40,5 +40,5 @@ export type SegmentFetchTask = Task<
  */
 export type InputTask = Task<
   readonly [ArrayBuffer, ArrayBuffer],
-  BufferedSeekingInput
+  BufferedSeekingInput | undefined
 >;

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

@@ -4,12 +4,7 @@ import type {
   MediaEngine,
   VideoRendition,
 } from "../../../transcoding/types";
-import {
-  calculateSegmentRange,
-  computeSegmentId,
-  getAudioRendition,
-  getVideoRendition,
-} from "./RenditionHelpers";
+import { calculateSegmentRange, computeSegmentId } from "./RenditionHelpers";
 
 const test = baseTest.extend<{
   mockMediaEngine: MediaEngine;
@@ -36,6 +31,8 @@ const test = baseTest.extend<{
       src: "https://example.com/media.mp4",
       videoRendition: mockVideoRendition,
       audioRendition: mockAudioRendition,
+      getVideoRendition: () => mockVideoRendition,
+      getAudioRendition: () => mockAudioRendition,
       fetchMediaSegment: vi.fn(),
     } as unknown as MediaEngine;
     await use(mockMediaEngine);
@@ -60,30 +57,38 @@ const test = baseTest.extend<{
   },
 
   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: {
-        trackId: 1,
-        src: "video-track.mp4",
-        segmentDurationMs: 1000,
-      } as VideoRendition,
-      audioRendition: null,
+      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: null,
-      audioRendition: {
-        trackId: 2,
-        src: "audio-track.mp4",
-        segmentDurationMs: 1000,
-      } as AudioRendition,
+      videoRendition: undefined,
+      audioRendition,
+      getVideoRendition: () => undefined,
+      getAudioRendition: () => audioRendition,
       fetchMediaSegment: vi.fn(),
     } as unknown as MediaEngine;
     await use(mockMediaEngine);
@@ -91,45 +96,39 @@ const test = baseTest.extend<{
 });
 
 describe("RenditionHelpers", () => {
-  describe("getAudioRendition", () => {
-    test("returns audio rendition when available", ({
-      mockMediaEngine,
+  describe("MediaEngine Rendition Access", () => {
+    test("mediaEngine.getAudioRendition() returns undefined for video-only assets", ({
+      mockMediaEngineWithoutAudio,
       expect,
     }) => {
-      const result = getAudioRendition(mockMediaEngine);
-      expect(result).toBe(mockMediaEngine.audioRendition);
-      expect(result.trackId).toBe(2);
-      expect(result.src).toBe("audio-track.mp4");
+      const result = mockMediaEngineWithoutAudio.getAudioRendition();
+      expect(result).toBeUndefined();
     });
 
-    test("throws error when audio rendition is not available", ({
-      mockMediaEngineWithoutAudio,
+    test("mediaEngine.getVideoRendition() returns undefined for audio-only assets", ({
+      mockMediaEngineWithoutVideo,
       expect,
     }) => {
-      expect(() => getAudioRendition(mockMediaEngineWithoutAudio)).toThrow(
-        "No audio track available in source",
-      );
+      const result = mockMediaEngineWithoutVideo.getVideoRendition();
+      expect(result).toBeUndefined();
     });
-  });
 
-  describe("getVideoRendition", () => {
-    test("returns video rendition when available", ({
+    test("mediaEngine.getAudioRendition() returns rendition when available", ({
       mockMediaEngine,
       expect,
     }) => {
-      const result = getVideoRendition(mockMediaEngine);
-      expect(result).toBe(mockMediaEngine.videoRendition);
-      expect(result.trackId).toBe(1);
-      expect(result.src).toBe("video-track.mp4");
+      const result = mockMediaEngine.getAudioRendition();
+      expect(result).toBeDefined();
+      expect(result?.trackId).toBe(2);
     });
 
-    test("throws error when video rendition is not available", ({
-      mockMediaEngineWithoutVideo,
+    test("mediaEngine.getVideoRendition() returns rendition when available", ({
+      mockMediaEngine,
       expect,
     }) => {
-      expect(() => getVideoRendition(mockMediaEngineWithoutVideo)).toThrow(
-        "No video track available in source",
-      );
+      const result = mockMediaEngine.getVideoRendition();
+      expect(result).toBeDefined();
+      expect(result?.trackId).toBe(1);
     });
   });
 

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

@@ -1,31 +1,8 @@
 import type {
   AudioRendition,
-  MediaEngine,
   VideoRendition,
 } from "../../../transcoding/types";
 
-/**
- * Get audio rendition from media engine, throwing if not available
- */
-export const getAudioRendition = (mediaEngine: MediaEngine): AudioRendition => {
-  const audioRendition = mediaEngine.audioRendition;
-  if (!audioRendition) {
-    throw new Error("No audio track available in source");
-  }
-  return audioRendition;
-};
-
-/**
- * Get video rendition from media engine, throwing if not available
- */
-export const getVideoRendition = (mediaEngine: MediaEngine): VideoRendition => {
-  const videoRendition = mediaEngine.videoRendition;
-  if (!videoRendition) {
-    throw new Error("No video track available in source");
-  }
-  return videoRendition;
-};
-
 /**
  * Calculate which segment contains a given timestamp
  * Returns 1-based segment ID, or undefined if segmentDurationMs is not available

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

@@ -1,6 +1,6 @@
 import { Task } from "@lit/task";
 import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE";
-import type { MediaEngine, VideoRendition } from "../../../transcoding/types";
+import type { MediaEngine } from "../../../transcoding/types";
 import type { EFMedia } from "../../EFMedia";
 import { AssetIdMediaEngine } from "../AssetIdMediaEngine";
 import { AssetMediaEngine } from "../AssetMediaEngine";
@@ -18,14 +18,6 @@ export const getLatestMediaEngine = async (
   return mediaEngine;
 };
 
-export const getVideoRendition = (mediaEngine: MediaEngine): VideoRendition => {
-  const videoRendition = mediaEngine.videoRendition;
-  if (!videoRendition) {
-    throw new Error("No video track available in source");
-  }
-  return videoRendition;
-};
-
 /**
  * Core logic for creating a MediaEngine with explicit dependencies.
  * Pure function that requires all dependencies to be provided.

package/src/elements/EFMedia/videoTasks/MainVideoInputCache.ts

@@ -0,0 +1,76 @@
+import type { BufferedSeekingInput } from "../BufferedSeekingInput";
+
+/**
+ * Cache for main video BufferedSeekingInput instances
+ * Main video segments are typically 2s long, so we can reuse the same input
+ * for multiple frames within that segment (e.g., 60 frames at 30fps)
+ */
+export class MainVideoInputCache {
+  private cache = new Map<string, BufferedSeekingInput>();
+  private maxCacheSize = 10; // Keep last 10 main inputs (covers 20 seconds at 2s/segment)
+
+  /**
+   * Create a cache key that uniquely identifies a segment
+   */
+  private getCacheKey(
+    src: string,
+    segmentId: number,
+    renditionId: string | undefined,
+  ): string {
+    return `${src}:${renditionId || "default"}:${segmentId}`;
+  }
+
+  /**
+   * Get or create BufferedSeekingInput for a main video segment
+   */
+  async getOrCreateInput(
+    src: string,
+    segmentId: number,
+    renditionId: string | undefined,
+    createInputFn: () => Promise<BufferedSeekingInput | undefined>,
+  ): Promise<BufferedSeekingInput | undefined> {
+    const cacheKey = this.getCacheKey(src, segmentId, renditionId);
+
+    // Check if we already have this segment cached
+    const cached = this.cache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    // Create new input
+    const input = await createInputFn();
+    if (!input) {
+      return undefined;
+    }
+
+    // Add to cache and maintain size limit
+    this.cache.set(cacheKey, input);
+
+    // Evict oldest entries if cache is too large (LRU-like behavior)
+    if (this.cache.size > this.maxCacheSize) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey !== undefined) {
+        this.cache.delete(oldestKey);
+      }
+    }
+
+    return input;
+  }
+
+  /**
+   * Clear the entire cache (called when video changes)
+   */
+  clear() {
+    this.cache.clear();
+  }
+
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      cacheKeys: Array.from(this.cache.keys()),
+    };
+  }
+}

package/src/elements/EFMedia/videoTasks/makeScrubVideoBufferTask.ts

@@ -1,4 +1,6 @@
 import { Task } from "@lit/task";
+
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../../../EF_RENDERING.js";
 import type { VideoRendition } from "../../../transcoding/types";
 import type { EFVideo } from "../../EFVideo";
@@ -19,8 +21,7 @@ export const makeScrubVideoBufferTask = (host: EFVideo) => {
   };
 
   return new Task(host, {
-    // Make lazy - only run when element becomes timeline-active
-    autoRun: false,
+    autoRun: EF_INTERACTIVE,
     args: () => [host.mediaEngineTask.value] as const,
     onError: (error) => {
       console.error("scrubVideoBufferTask error", error);

package/src/elements/EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.ts

@@ -1,5 +1,4 @@
 import { Task } from "@lit/task";
-import { EF_RENDERING } from "../../../EF_RENDERING";
 import type { MediaEngine } from "../../../transcoding/types";
 import type { EFVideo } from "../../EFVideo";
 import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
@@ -14,10 +13,6 @@ export const makeScrubVideoInitSegmentFetchTask = (
     },
     onComplete: (_value) => {},
     task: async ([_mediaEngine], { signal }) => {
-      if (EF_RENDERING()) {
-        return new ArrayBuffer(0);
-      }
-
       const mediaEngine = await getLatestMediaEngine(host, signal);
 
       // Get scrub rendition using the proper interface method

package/src/elements/EFMedia/videoTasks/makeScrubVideoInputTask.ts

@@ -1,5 +1,5 @@
 import { Task } from "@lit/task";
-import { EF_RENDERING } from "../../../EF_RENDERING";
+
 import { EFMedia } from "../../EFMedia";
 import type { EFVideo } from "../../EFVideo";
 import { BufferedSeekingInput } from "../BufferedSeekingInput";
@@ -8,7 +8,7 @@ import type { InputTask } from "../shared/MediaTaskUtils";
 export const makeScrubVideoInputTask = (host: EFVideo): InputTask => {
   return new Task<
     readonly [ArrayBuffer | undefined, ArrayBuffer | undefined],
-    BufferedSeekingInput
+    BufferedSeekingInput | undefined
   >(host, {
     args: () =>
       [
@@ -19,31 +19,33 @@ export const makeScrubVideoInputTask = (host: EFVideo): InputTask => {
       console.error("scrubVideoInputTask error", error);
     },
     onComplete: (_value) => {},
-    task: async () => {
-      if (EF_RENDERING()) {
-        console.info("Scrub not available in rendering mode");
-      }
-
+    task: async (_, { signal }) => {
       const initSegment =
         await host.scrubVideoInitSegmentFetchTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       const segment = await host.scrubVideoSegmentFetchTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       if (!initSegment || !segment) {
         throw new Error("Scrub init segment or segment is not available");
       }
 
       // Get startTimeOffsetMs from the scrub rendition if available
       const mediaEngine = await host.mediaEngineTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       const scrubRendition = mediaEngine.getScrubVideoRendition();
       const startTimeOffsetMs = scrubRendition?.startTimeOffsetMs;
 
-      const input = new BufferedSeekingInput(
-        await new Blob([initSegment, segment]).arrayBuffer(),
-        {
-          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-          startTimeOffsetMs,
-        },
-      );
+      const arrayBuffer = await new Blob([initSegment, segment]).arrayBuffer();
+      if (signal.aborted) return undefined;
+
+      const input = new BufferedSeekingInput(arrayBuffer, {
+        videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+        audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+        startTimeOffsetMs,
+      });
       return input;
     },
   });

package/src/elements/EFMedia/videoTasks/makeScrubVideoSeekTask.ts

@@ -94,13 +94,19 @@ export const makeScrubVideoSeekTask = (host: EFVideo): ScrubVideoSeekTask => {
           return undefined;
         }
 
+        if (signal.aborted) {
+          return undefined;
+        }
+
         // Get video track and seek to precise time within the 30s scrub segment
         const videoTrack = await scrubInput.getFirstVideoTrack();
         if (!videoTrack) {
           return undefined;
         }
 
-        signal.throwIfAborted();
+        if (signal.aborted) {
+          return undefined;
+        }
 
         const sample = (await scrubInput.seek(
           videoTrack.id,

package/src/elements/EFMedia/videoTasks/makeScrubVideoSegmentFetchTask.ts

@@ -1,5 +1,4 @@
 import { Task } from "@lit/task";
-import { EF_RENDERING } from "../../../EF_RENDERING";
 import type { MediaEngine } from "../../../transcoding/types";
 import type { EFVideo } from "../../EFVideo";
 import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
@@ -18,10 +17,6 @@ export const makeScrubVideoSegmentFetchTask = (
     },
     onComplete: (_value) => {},
     task: async (_, { signal }) => {
-      if (EF_RENDERING()) {
-        return new ArrayBuffer(0);
-      }
-
       const mediaEngine = await getLatestMediaEngine(host, signal);
       const segmentId = await host.scrubVideoSegmentIdTask.taskComplete;
       if (segmentId === undefined) {

package/src/elements/EFMedia/videoTasks/makeScrubVideoSegmentIdTask.ts

@@ -1,5 +1,4 @@
 import { Task } from "@lit/task";
-import { EF_RENDERING } from "../../../EF_RENDERING";
 import type { MediaEngine } from "../../../transcoding/types";
 import type { EFVideo } from "../../EFVideo";
 import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
@@ -14,10 +13,6 @@ export const makeScrubVideoSegmentIdTask = (
     },
     onComplete: (_value) => {},
     task: async ([, targetSeekTimeMs], { signal }) => {
-      if (EF_RENDERING()) {
-        return undefined;
-      }
-
       const mediaEngine = await getLatestMediaEngine(host, signal);
       signal.throwIfAborted(); // Abort if a new seek started