@editframe/elements 0.18.22-beta.0 → 0.18.26-beta.0

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

@@ -28,13 +28,13 @@ type VideoBufferTask = Task<readonly [number], VideoBufferState>;
 export const makeVideoBufferTask = (host: EFVideo): VideoBufferTask => {
   let currentState: VideoBufferState = {
     currentSeekTimeMs: 0,
+    requestedSegments: new Set(),
     activeRequests: new Set(),
-    cachedSegments: new Set(),
     requestQueue: [],
   };
 
   return new Task(host, {
-    autoRun: EF_INTERACTIVE, // Start buffering automatically when media is ready
+    autoRun: EF_INTERACTIVE && !EF_RENDERING(), // Start buffering only in interactive mode, not rendering
     args: () => [host.desiredSeekTimeMs] as const,
     onError: (error) => {
       console.error("videoBufferTask error", error);
@@ -43,11 +43,16 @@ export const makeVideoBufferTask = (host: EFVideo): VideoBufferTask => {
       currentState = value;
     },
     task: async ([seekTimeMs], { signal }) => {
+      // Skip buffering entirely in rendering mode
+      if (EF_RENDERING()) {
+        return currentState; // Return existing state without any buffering activity
+      }
+
       // Use EFMedia properties directly - no hardcoded duplication!
       const currentConfig: VideoBufferConfig = {
         bufferDurationMs: host.videoBufferDurationMs,
         maxParallelFetches: host.maxVideoBufferFetches,
-        enableBuffering: host.enableVideoBuffering && !EF_RENDERING,
+        enableBuffering: host.enableVideoBuffering,
       };
 
       return manageMediaBuffer<VideoRendition>(
@@ -62,9 +67,18 @@ export const makeVideoBufferTask = (host: EFVideo): VideoBufferTask => {
             const mediaEngine = await getLatestMediaEngine(host, signal);
             return mediaEngine.computeSegmentId(timeMs, rendition);
           },
-          fetchSegment: async (segmentId, rendition) => {
+          prefetchSegment: async (segmentId, rendition) => {
+            // Trigger prefetch through BaseMediaEngine - let it handle caching
             const mediaEngine = await getLatestMediaEngine(host, signal);
-            return mediaEngine.fetchMediaSegment(segmentId, rendition);
+            await mediaEngine.fetchMediaSegment(segmentId, rendition);
+            // Don't return data - just ensure it's cached in BaseMediaEngine
+          },
+          isSegmentCached: (segmentId, rendition) => {
+            // Check if segment is already cached in BaseMediaEngine
+            const mediaEngine = host.mediaEngineTask.value;
+            if (!mediaEngine) return false;
+
+            return mediaEngine.isSegmentCached(segmentId, rendition);
           },
           getRendition: async () => {
             // Get real video rendition from media engine

package/src/elements/EFMedia.browsertest.ts

@@ -13,6 +13,7 @@ import "./EFTimegroup.js";
 import type { EFTimegroup } from "./EFTimegroup.js";
 import "./EFVideo.js";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
+import { AssetMediaEngine } from "./EFMedia/AssetMediaEngine.js";
 import type { EFVideo } from "./EFVideo.js";
 
 @customElement("test-media")
@@ -100,7 +101,7 @@ describe("JIT Media Engine", () => {
       await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 2200;
       await timegroup.seekTask.taskComplete;
-      const sample = await jitVideo.videoSeekTask.taskComplete;
+      const sample = await jitVideo.unifiedVideoSeekTask.taskComplete;
       expect(sample?.timestamp).toBeCloseTo(2.2, 1);
     });
   });
@@ -124,10 +125,10 @@ describe("JIT Media Engine", () => {
       await timegroup.seekTask.taskComplete;
 
       // Check what segment actually got loaded
-      const actualSegmentId = (jitVideo as any).videoSegmentIdTask.value;
+      const actualSegmentId = (jitVideo as any).unifiedVideoSeekTask.value;
       console.log(`videoSegmentIdTask.value = ${actualSegmentId}`);
 
-      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
+      const frame = await (jitVideo as any).unifiedVideoSeekTask.taskComplete;
       console.log(`Frame timestamp when seeking to 0ms: ${frame?.timestamp}`);
 
       expect(frame).toBeDefined();
@@ -142,7 +143,7 @@ describe("JIT Media Engine", () => {
       await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 3_000;
       await timegroup.seekTask.taskComplete;
-      const frame = await jitVideo.videoSeekTask.taskComplete;
+      const frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
       expect(frame?.timestamp).toBeCloseTo(3, 1);
     });
 
@@ -154,25 +155,30 @@ describe("JIT Media Engine", () => {
       await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 5_000;
       await timegroup.seekTask.taskComplete;
-      const frame = await jitVideo.videoSeekTask.taskComplete;
+      const frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
       expect(frame?.timestamp).toBeCloseTo(5, 1);
     });
 
-    test("seeks ahead in 50ms increments", async ({
+    test("seeks ahead in increments", async ({
       timegroup,
       jitVideo,
       expect,
     }) => {
       await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 0;
+
+      // Test seeking in larger increments to avoid CI timeouts
+      // while still validating incremental seeking works
+      const testPoints = [0, 500, 1000, 1500, 2000, 2500, 3000];
       let frame: VideoSample | undefined;
-      for (let i = 0; i <= 3000; i += 50) {
-        timegroup.currentTimeMs = i;
+
+      for (const timeMs of testPoints) {
+        timegroup.currentTimeMs = timeMs;
         await timegroup.seekTask.taskComplete;
-        frame = await jitVideo.videoSeekTask.taskComplete;
+        frame = await jitVideo.unifiedVideoSeekTask.taskComplete;
         expect(frame).toBeDefined();
+        expect(frame?.timestamp).toBeCloseTo(timeMs / 1000, 1);
       }
-      expect(frame?.timestamp).toBeCloseTo(3, 1);
     });
   });
 
@@ -189,7 +195,7 @@ describe("JIT Media Engine", () => {
 
       timegroup.currentTimeMs = 2026.6666666666663;
       await timegroup.frameTask.taskComplete;
-      const sample = await jitVideo.videoSeekTask.taskComplete;
+      const sample = await jitVideo.unifiedVideoSeekTask.taskComplete;
       expect(sample?.timestamp).toBeCloseTo(2, 1);
     });
 
@@ -224,6 +230,63 @@ describe("JIT Media Engine", () => {
   });
 });
 
+describe("Media Engine Selection", () => {
+  const remoteSrc = "http://web:3000/head-moov-480p.mp4";
+  const localSrc = "10s-bars.mp4";
+
+  test("defaults to JitMediaEngine for remote URLs without a configuration element", async ({
+    expect,
+  }) => {
+    const video = document.createElement("ef-video");
+    video.src = remoteSrc;
+    document.body.appendChild(video);
+    await video.mediaEngineTask.run();
+    expect(video.mediaEngineTask.value).toBeInstanceOf(JitMediaEngine);
+    video.remove();
+  });
+
+  test("uses JitMediaEngine for remote URLs when wrapped in a default configuration", async ({
+    configuration,
+    expect,
+  }) => {
+    const video = document.createElement("ef-video");
+    video.src = remoteSrc;
+    configuration.appendChild(video); // Fixture `configuration` is already on the page.
+    await video.mediaEngineTask.run();
+    expect(video.mediaEngineTask.value).toBeInstanceOf(JitMediaEngine);
+    video.remove();
+  });
+
+  test("uses JitMediaEngine for remote URLs when configured with media-engine='cloud'", async ({
+    configuration,
+    expect,
+  }) => {
+    configuration.setAttribute("media-engine", "cloud");
+    const video = document.createElement("ef-video");
+    video.src = remoteSrc;
+    configuration.appendChild(video);
+    await video.mediaEngineTask.run();
+    expect(video.mediaEngineTask.value).toBeInstanceOf(JitMediaEngine);
+    video.remove();
+  });
+
+  // Note: media-engine='local' with remote URLs is not supported
+  // AssetMediaEngine is designed for local files and track fragment indexes only
+
+  test("always uses AssetMediaEngine for local src paths", async ({
+    configuration,
+    expect,
+  }) => {
+    configuration.setAttribute("media-engine", "cloud"); // Explicitly set to cloud
+    const video = document.createElement("ef-video");
+    video.src = localSrc;
+    configuration.appendChild(video);
+    await video.mediaEngineTask.run();
+    expect(video.mediaEngineTask.value).toBeInstanceOf(AssetMediaEngine);
+    video.remove();
+  });
+});
+
 describe("EFMedia", () => {
   beforeEach(() => {
     // Clean up DOM

package/src/elements/EFMedia.ts

@@ -86,7 +86,7 @@ export class EFMedia extends EFTargetable(
    * @domAttribute "audio-buffer-duration"
    */
   @property({ type: Number, attribute: "audio-buffer-duration" })
-  audioBufferDurationMs = 30000; // 30 seconds
+  audioBufferDurationMs = 10000; // 10 seconds - reasonable for JIT encoding
 
   /**
    * Maximum number of concurrent audio segment fetches for buffering
@@ -258,26 +258,4 @@ export class EFMedia extends EFTargetable(
   ): Promise<AudioSpan> {
     return fetchAudioSpanningTime(this, fromMs, toMs, signal);
   }
-
-  /**
-   * Check if an audio segment is cached in the unified buffer system
-   * Now uses the same caching approach as video for consistency
-   */
-  getCachedAudioSegment(segmentId: number): boolean {
-    return this.audioBufferTask.value?.cachedSegments.has(segmentId) ?? false;
-  }
-
-  /**
-   * Get cached audio segments from the unified buffer system
-   * Now uses the same caching approach as video for consistency
-   */
-  getCachedAudioSegments(segmentIds: number[]): Set<number> {
-    const bufferState = this.audioBufferTask.value;
-    if (!bufferState) {
-      return new Set();
-    }
-    return new Set(
-      segmentIds.filter((id) => bufferState.cachedSegments.has(id)),
-    );
-  }
 }