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

package/src/elements/EFVideo.ts

@@ -7,12 +7,14 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { TWMixin } from "../gui/TWMixin.js";
+import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.ts";
+import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.ts";
+import { makeScrubVideoInputTask } from "./EFMedia/videoTasks/makeScrubVideoInputTask.ts";
+import { makeScrubVideoSeekTask } from "./EFMedia/videoTasks/makeScrubVideoSeekTask.ts";
+import { makeScrubVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoSegmentFetchTask.ts";
+import { makeScrubVideoSegmentIdTask } from "./EFMedia/videoTasks/makeScrubVideoSegmentIdTask.ts";
+import { makeUnifiedVideoSeekTask } from "./EFMedia/videoTasks/makeUnifiedVideoSeekTask.ts";
 import { makeVideoBufferTask } from "./EFMedia/videoTasks/makeVideoBufferTask.ts";
-import { makeVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoInitSegmentFetchTask.ts";
-import { makeVideoInputTask } from "./EFMedia/videoTasks/makeVideoInputTask.ts";
-import { makeVideoSeekTask } from "./EFMedia/videoTasks/makeVideoSeekTask.ts";
-import { makeVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoSegmentFetchTask.ts";
-import { makeVideoSegmentIdTask } from "./EFMedia/videoTasks/makeVideoSegmentIdTask.ts";
 import { EFMedia } from "./EFMedia.js";
 
 // EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts
@@ -98,7 +100,7 @@ export class EFVideo extends TWMixin(EFMedia) {
    * @domAttribute "video-buffer-duration"
    */
   @property({ type: Number, attribute: "video-buffer-duration" })
-  videoBufferDurationMs = 60000; // 60 seconds
+  videoBufferDurationMs = 10000; // 10 seconds - reasonable for JIT encoding
 
   /**
    * Maximum number of concurrent video segment fetches for buffering
@@ -114,13 +116,17 @@ export class EFVideo extends TWMixin(EFMedia) {
   @property({ type: Boolean, attribute: "enable-video-buffering" })
   enableVideoBuffering = true;
 
-  // Video-specific tasks
-  videoSegmentIdTask = makeVideoSegmentIdTask(this);
-  videoInitSegmentFetchTask = makeVideoInitSegmentFetchTask(this);
-  videoSegmentFetchTask = makeVideoSegmentFetchTask(this);
-  videoInputTask = makeVideoInputTask(this);
-  videoSeekTask = makeVideoSeekTask(this);
-  videoBufferTask = makeVideoBufferTask(this);
+  // Unified video system - single smart seek task that routes to scrub or main
+  unifiedVideoSeekTask = makeUnifiedVideoSeekTask(this);
+  videoBufferTask = makeVideoBufferTask(this); // Keep for main video buffering
+
+  // Scrub video preloading system
+  scrubVideoBufferTask = makeScrubVideoBufferTask(this);
+  scrubVideoInputTask = makeScrubVideoInputTask(this);
+  scrubVideoSeekTask = makeScrubVideoSeekTask(this);
+  scrubVideoSegmentIdTask = makeScrubVideoSegmentIdTask(this);
+  scrubVideoSegmentFetchTask = makeScrubVideoSegmentFetchTask(this);
+  scrubVideoInitSegmentFetchTask = makeScrubVideoInitSegmentFetchTask(this);
 
   /**
    * Delayed loading state manager for user feedback
@@ -190,7 +196,7 @@ export class EFVideo extends TWMixin(EFMedia) {
     },
     onComplete: () => {},
     task: async ([_desiredSeekTimeMs], { signal }) => {
-      await this.videoSeekTask.taskComplete;
+      await this.unifiedVideoSeekTask.taskComplete;
       await this.paintTask.taskComplete;
       if (signal.aborted) {
         return;
@@ -244,18 +250,24 @@ export class EFVideo extends TWMixin(EFMedia) {
     },
     onComplete: () => {},
     task: async ([_seekToMs], { signal }) => {
-      await this.videoSeekTask.taskComplete;
       // Check if we're in production rendering mode vs preview mode
       const isProductionRendering = this.isInProductionRenderingMode();
 
-      const sample = this.videoSeekTask.value;
-      if (sample) {
-        const videoFrame = sample.toVideoFrame();
-        try {
-          this.displayFrame(videoFrame, _seekToMs);
-        } finally {
-          videoFrame.close();
+      // Unified video system: smart routing to scrub or main, with background upgrades
+      try {
+        await this.unifiedVideoSeekTask.taskComplete;
+        const videoSample = this.unifiedVideoSeekTask.value;
+
+        if (videoSample) {
+          const videoFrame = videoSample.toVideoFrame();
+          try {
+            this.displayFrame(videoFrame, _seekToMs);
+          } finally {
+            videoFrame.close();
+          }
         }
+      } catch (error) {
+        console.warn("Unified video pipeline error:", error);
       }
 
       // EF_FRAMEGEN-aware rendering mode detection
@@ -292,7 +304,7 @@ export class EFVideo extends TWMixin(EFMedia) {
   /**
    * Display a video frame on the canvas
    */
-  private displayFrame(frame: VideoFrame, seekToMs: number): number {
+  displayFrame(frame: VideoFrame, seekToMs: number): number {
     log("trace: displayFrame start", { seekToMs, frameFormat: frame.format });
     if (!this.canvasElement) {
       log("trace: displayFrame aborted - no canvas element");
@@ -387,11 +399,11 @@ export class EFVideo extends TWMixin(EFMedia) {
   }
 
   /**
-   * Legacy getter for fragment index task (maps to videoSegmentIdTask)
-   * Still used by EFCaptions
+   * Legacy getter for fragment index task
+   * Still used by EFCaptions - maps to unified video seek task
    */
   get fragmentIndexTask() {
-    return this.videoSegmentIdTask;
+    return this.unifiedVideoSeekTask;
   }
 
   /**

package/src/elements/TargetController.browsertest.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { afterEach, describe, expect, test } from "vitest";
 import { EFTargetable, TargetController } from "./TargetController.ts";

package/src/gui/EFConfiguration.ts

@@ -1,5 +1,5 @@
 import { createContext, provide } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 export const efConfigurationContext = createContext<EFConfiguration | null>(
@@ -25,6 +25,9 @@ export class EFConfiguration extends LitElement {
   @property({ type: String, attribute: "signing-url" })
   signingURL?: string;
 
+  @property({ type: String, attribute: "media-engine" })
+  mediaEngine?: "cloud" | "local" = "cloud";
+
   render() {
     return html`<slot></slot>`;
   }

package/src/gui/EFFilmstrip.ts

@@ -1,12 +1,12 @@
 import { consume } from "@lit/context";
 import {
+  css,
+  html,
   LitElement,
+  nothing,
   type PropertyValueMap,
   type ReactiveController,
   type TemplateResult,
-  css,
-  html,
-  nothing,
 } from "lit";
 import {
   customElement,
@@ -29,10 +29,10 @@ import { msToTimeCode } from "../msToTimeCode.js";
 import { targetTimegroupContext } from "./ContextMixin.ts";
 import type { EFPreview } from "./EFPreview.js";
 import type { EFWorkbench } from "./EFWorkbench.js";
-import { TWMixin } from "./TWMixin.js";
 import { type FocusContext, focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
+import { TWMixin } from "./TWMixin.js";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(

package/src/gui/EFFocusOverlay.ts

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { focusedElementContext } from "./focusedElementContext.js";

package/src/gui/EFPreview.ts

@@ -1,10 +1,9 @@
-import { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-
 import { provide } from "@lit/context";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
 import { ContextMixin } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin.js";
 import { focusedElementContext } from "./focusedElementContext.js";
+import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-preview")
 export class EFPreview extends ContextMixin(TWMixin(LitElement)) {

package/src/gui/EFScrubber.ts

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";

package/src/gui/EFTimeDisplay.ts

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import type { ContextMixinInterface } from "./ContextMixin.js";
 import { efContext } from "./efContext.js";

package/src/gui/EFToggleLoop.ts

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import type { ContextMixinInterface } from "./ContextMixin.js";

package/src/gui/EFTogglePlay.ts

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 
 import type { ContextMixinInterface } from "./ContextMixin.js";

package/src/gui/EFWorkbench.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { css, html, LitElement, type PropertyValueMap } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 

package/src/transcoding/types/index.ts

@@ -237,6 +237,22 @@ export interface MediaEngine {
    */
   getAudioRendition: () => AudioRendition;
 
+  /**
+   * Check if a segment is cached for a given rendition
+   */
+  isSegmentCached: (
+    segmentId: number,
+    rendition: AudioRendition | VideoRendition,
+  ) => boolean;
+
+  /**
+   * Get scrub video rendition if available, otherwise return undefined
+   * Each engine implements this based on their capabilities:
+   * - JitMediaEngine: looks for "scrub" rendition in manifest
+   * - AssetMediaEngine: returns regular video rendition (no separate scrub)
+   */
+  getScrubVideoRendition(): VideoRendition | undefined;
+
   /**
    * Calculate audio segments needed for a time range
    * Each media engine implements this based on their segment structure

package/test/__cache__/GET__api_v1_transcode_scrub_1_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__6ff5127ebeda578a679474347fbd6137/metadata.json

@@ -0,0 +1,16 @@
+{
+  "statusCode": 200,
+  "headers": {
+    "access-control-allow-headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Range",
+    "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
+    "access-control-allow-origin": "*",
+    "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
+    "cache-control": "public, max-age=3600",
+    "content-length": "645445",
+    "content-type": "video/iso.segment",
+    "x-powered-by": "Express"
+  },
+  "url": "/api/v1/transcode/scrub/1.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
+  "method": "GET",
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_scrub_init_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__f6d4793fc9ff854ee9a738917fb64a53/metadata.json

@@ -0,0 +1,16 @@
+{
+  "statusCode": 200,
+  "headers": {
+    "access-control-allow-headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization, Range",
+    "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
+    "access-control-allow-origin": "*",
+    "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
+    "cache-control": "public, max-age=3600",
+    "content-length": "754",
+    "content-type": "video/iso.segment",
+    "x-powered-by": "Express"
+  },
+  "url": "/api/v1/transcode/scrub/init.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
+  "method": "GET",
+  "range": null
+}

package/test/cache-integration-verification.browsertest.ts

@@ -0,0 +1,84 @@
+import { customElement } from "lit/decorators.js";
+import { EFMedia } from "../src/elements/EFMedia.ts";
+import { test as baseTest } from "./useMSW.js";
+
+@customElement("test-cache-integration")
+class TestCacheIntegration extends EFMedia {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-cache-integration": TestCacheIntegration;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestCacheIntegration;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement("test-cache-integration");
+    document.body.appendChild(element);
+    await use(element);
+    element.remove();
+  },
+});
+
+test("buffer cache integration stores and serves segment data", async ({
+  element,
+  expect,
+}) => {
+  // Setup element with real media source
+  element.src = "bars-n-tone2.mp4";
+  element.enableAudioBuffering = true;
+  element.audioBufferDurationMs = 3000;
+  element.maxAudioBufferFetches = 2;
+  element.desiredSeekTimeMs = 0;
+
+  // Track network requests to verify cache effectiveness
+  const originalFetch = window.fetch;
+  const networkRequests: string[] = [];
+
+  window.fetch = (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = input.toString();
+    if (url.includes("audio")) {
+      networkRequests.push(url);
+      console.debug("Network request:", url);
+    }
+    return originalFetch(input, init);
+  };
+
+  try {
+    // Allow initial buffering
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const bufferState = element.audioBufferTask.value;
+    console.log("Buffer state after initial buffering:", {
+      cachedSegmentsCount: bufferState?.cachedSegments.size || 0,
+      cachedDataCount: bufferState?.cachedSegmentData.size || 0,
+      activeRequestsCount: bufferState?.activeRequests.size || 0,
+    });
+
+    if (bufferState && bufferState.cachedSegments.size > 0) {
+      const initialNetworkRequests = networkRequests.length;
+
+      // Trigger segment fetch for potentially cached segment
+      element.desiredSeekTimeMs = 1000;
+      await new Promise((resolve) => setTimeout(resolve, 200));
+
+      // Check if cache integration is working
+      const finalNetworkRequests = networkRequests.length;
+
+      console.log("Cache integration test results:", {
+        initialNetworkRequests,
+        finalNetworkRequests,
+        cacheHit: finalNetworkRequests === initialNetworkRequests,
+        cachedSegments: Array.from(bufferState.cachedSegments),
+        cachedData: Array.from(bufferState.cachedSegmentData.keys()),
+      });
+
+      // The test verifies that segment data is being cached
+      expect(bufferState.cachedSegmentData.size).toBeGreaterThan(0);
+    }
+  } finally {
+    window.fetch = originalFetch;
+  }
+});