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

package/src/elements/EFMedia.browsertest.ts

@@ -1,7 +1,7 @@
 import { css } from "lit";
 import { customElement } from "lit/decorators.js";
 import type { VideoSample } from "mediabunny";
-import { describe, vi } from "vitest";
+import { afterEach, beforeEach, describe, vi } from "vitest";
 import { test as baseTest } from "../../test/useMSW.js";
 
 import type { EFConfiguration } from "../gui/EFConfiguration.js";
@@ -97,15 +97,11 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
-      // Set the time on the timegroup - this should trigger proper synchronization
+      await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 2200;
-
+      await timegroup.seekTask.taskComplete;
       const sample = await jitVideo.videoSeekTask.taskComplete;
-
-      expect(sample).toBeDefined();
-      // Based on the pattern: 0ms→0, 3000ms→2.96, 5000ms→4.96
-      // For 2200ms, we expect timestamp 2.16
-      expect(sample?.timestamp).toEqual(2.16);
+      expect(sample?.timestamp).toBeCloseTo(2.2, 1);
     });
   });
 
@@ -115,8 +111,25 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
+      // Debug: Check what segment should be loaded for 0ms
+      const mediaEngine = await (jitVideo as any).mediaEngineTask.taskComplete;
+      const videoRendition = mediaEngine?.getVideoRendition();
+      const expectedSegmentId = mediaEngine?.computeSegmentId(
+        0,
+        videoRendition,
+      );
+      console.log(`MediaEngine.computeSegmentId(0ms) = ${expectedSegmentId}`);
+
       timegroup.currentTimeMs = 0;
+      await timegroup.seekTask.taskComplete;
+
+      // Check what segment actually got loaded
+      const actualSegmentId = (jitVideo as any).videoSegmentIdTask.value;
+      console.log(`videoSegmentIdTask.value = ${actualSegmentId}`);
+
       const frame = await (jitVideo as any).videoSeekTask.taskComplete;
+      console.log(`Frame timestamp when seeking to 0ms: ${frame?.timestamp}`);
+
       expect(frame).toBeDefined();
       expect(frame?.timestamp).toEqual(0);
     });
@@ -126,11 +139,11 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
+      await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 3_000;
-      jitVideo.desiredSeekTimeMs = 3_000;
-      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
-      expect(frame).toBeDefined();
-      expect(frame?.timestamp).toEqual(2.96); // Updated: improved mediabunny processing changed frame timing
+      await timegroup.seekTask.taskComplete;
+      const frame = await jitVideo.videoSeekTask.taskComplete;
+      expect(frame?.timestamp).toBeCloseTo(3, 1);
     });
 
     test("seeks to 5 seconds and loads frame", async ({
@@ -138,11 +151,11 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
+      await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 5_000;
-      jitVideo.desiredSeekTimeMs = 5_000;
-      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
-      expect(frame).toBeDefined();
-      expect(frame?.timestamp).toEqual(4.96); // Updated: improved mediabunny processing changed frame timing
+      await timegroup.seekTask.taskComplete;
+      const frame = await jitVideo.videoSeekTask.taskComplete;
+      expect(frame?.timestamp).toBeCloseTo(5, 1);
     });
 
     test("seeks ahead in 50ms increments", async ({
@@ -150,48 +163,47 @@ describe("JIT Media Engine", () => {
       jitVideo,
       expect,
     }) => {
+      await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 0;
       let frame: VideoSample | undefined;
       for (let i = 0; i <= 3000; i += 50) {
         timegroup.currentTimeMs = i;
-        jitVideo.desiredSeekTimeMs = i;
-        frame = await (jitVideo as any).videoSeekTask.taskComplete;
+        await timegroup.seekTask.taskComplete;
+        frame = await jitVideo.videoSeekTask.taskComplete;
         expect(frame).toBeDefined();
       }
-      expect(frame?.timestamp).toEqual(0); // Updated: improved mediabunny processing changed frame timing
+      expect(frame?.timestamp).toBeCloseTo(3, 1);
     });
   });
 
   describe("boundary seeking", () => {
-    // test("segment 2 track range and segment 3 track range have no gap between them", async ({ expect, jitVideo, timegroup }) => {
-    //   // timegroup.contextProvider.currentTimeMs = 0
-    //   timegroup.currentTimeMs = 1000
-    //   jitVideo.desiredSeekTimeMs = 1000;
-    //   await jitVideo.videoSeekTask.taskComplete
-    //   const segment2 = await jitVideo.audioInputTask.taskComplete
-    //   const segment2Audio = await segment2.getFirstAudioTrack();
-    //   const start2 = await segment2Audio?.getFirstTimestamp()
-    //   const end2 = await segment2Audio?.computeDuration()
-    //   const segmentId2 = await jitVideo.audioSegmentIdTask.taskComplete
-    //   console.log({ segmentId2, start2, end2 })
-
-    //   timegroup.currentTimeMs = 2.0266666666666664 * 1000
-    //   jitVideo.desiredSeekTimeMs = 2.0266666666666664 * 1000
-    //   await jitVideo.videoSeekTask.taskComplete
-    //   const segment3 = await jitVideo.audioInputTask.taskComplete;
-    //   const segment3Audio = await segment3.getFirstAudioTrack()
-    //   const start3 = await segment3Audio?.getFirstTimestamp();
-    //   const end3 = await segment3Audio?.computeDuration();
-    //   const segmentId3 = await jitVideo.audioSegmentIdTask.taskComplete;
-    //   console.log({ segmentId3, start3, end3 })
-    //   await expect(jitVideo.videoSegmentIdTask.taskComplete).resolves.toBe(2);
-    // });
+    test.skip("segment 2 track range and segment 3 track range have no gap between them", async ({
+      expect,
+      jitVideo,
+      timegroup,
+    }) => {
+      // SKIP: audioSeekTask is not part of the audio rendering pipeline
+      await timegroup.waitForMediaDurations();
+      timegroup.currentTimeMs = 1000;
+      await timegroup.frameTask.taskComplete;
 
-    // test("Can seek audio to 4025.0000000000005ms in head-moov-480p.mp4", async ({ expect, jitVideo, timegroup }) => {
-    //   timegroup.currentTimeMs = 2026.6666666666663;
-    //   jitVideo.desiredSeekTimeMs = 2026.6666666666663;
-    //   await expect(jitVideo.audioSeekTask.taskComplete).resolves.to.not.toThrowError();
-    // });
+      timegroup.currentTimeMs = 2026.6666666666663;
+      await timegroup.frameTask.taskComplete;
+      const sample = await jitVideo.videoSeekTask.taskComplete;
+      expect(sample?.timestamp).toBeCloseTo(2, 1);
+    });
+
+    test("Can seek audio to 4025.0000000000005ms in head-moov-480p.mp4", async ({
+      expect,
+      jitVideo,
+      timegroup,
+    }) => {
+      await timegroup.waitForMediaDurations();
+      timegroup.currentTimeMs = 2026.6666666666663;
+      await expect(
+        jitVideo.audioSeekTask.taskComplete,
+      ).resolves.to.not.toThrowError();
+    });
 
     test("can seek audio to 4050ms in head-moov-480p.mp4", async ({
       expect,
@@ -213,20 +225,20 @@ describe("JIT Media Engine", () => {
 });
 
 describe("EFMedia", () => {
-  // beforeEach(() => {
-  //   // Clean up DOM
-  //   while (document.body.children.length) {
-  //     document.body.children[0]?.remove();
-  //   }
-  // });
+  beforeEach(() => {
+    // Clean up DOM
+    while (document.body.children.length) {
+      document.body.children[0]?.remove();
+    }
+  });
 
-  // afterEach(() => {
-  //   // Clean up any remaining elements
-  //   const elements = document.querySelectorAll("test-media");
-  //   for (const element of elements) {
-  //     element.remove();
-  //   }
-  // });
+  afterEach(() => {
+    // Clean up any remaining elements
+    const elements = document.querySelectorAll("test-media");
+    for (const element of elements) {
+      element.remove();
+    }
+  });
 
   const test = baseTest.extend<{
     element: TestMedia;

package/src/elements/EFTemporal.ts

@@ -236,32 +236,22 @@ export const deepGetElementsWithFrameTasks = (
 };
 
 let temporalCache: Map<Element, TemporalMixinInterface[]>;
-let modifiedElements = new WeakSet<Element>();
-
 const resetTemporalCache = () => {
   temporalCache = new Map();
-  modifiedElements = new WeakSet();
   if (typeof requestAnimationFrame !== "undefined") {
     requestAnimationFrame(resetTemporalCache);
   }
 };
 resetTemporalCache();
 
-export const clearTemporalCacheForElement = (element: Element) => {
-  temporalCache.delete(element);
-  modifiedElements.add(element);
-};
-
 export const shallowGetTemporalElements = (
   element: Element,
   temporals: TemporalMixinInterface[] = [],
 ) => {
-  // Temporarily disable caching to ensure reactivity works correctly
-  // TODO: Implement proper cache invalidation mechanism
-
-  // Clear the temporals array to ensure fresh results
-  temporals.length = 0;
-
+  const cachedResult = temporalCache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -269,7 +259,7 @@ export const shallowGetTemporalElements = (
       shallowGetTemporalElements(child, temporals);
     }
   }
-
+  temporalCache.set(element, temporals);
   return temporals;
 };
 

package/src/elements/EFTimegroup.browsertest.ts

@@ -348,12 +348,17 @@ describe("startTimeMs", () => {
 describe("setting currentTime", () => {
   test("persists in localStorage if the timegroup has an id and is in the dom", async () => {
     const timegroup = renderTimegroup(
-      html`<ef-timegroup id="root" mode="fixed" duration="10s"></ef-timegroup>`,
+      html`<ef-timegroup id="localStorage-test" mode="fixed" duration="10s"></ef-timegroup>`,
     );
+    localStorage.removeItem(timegroup.storageKey);
     document.body.appendChild(timegroup);
-    assert.isNull(localStorage.getItem(timegroup.storageKey));
-    timegroup.currentTime = 5_000;
-    assert.equal(localStorage.getItem(timegroup.storageKey), "10"); // Clamped to duration
+    await timegroup.waitForMediaDurations();
+
+    timegroup.currentTime = 5_000; // 5000 seconds, should clamp to 10s
+    await timegroup.seekTask.taskComplete;
+
+    const storedValue = localStorage.getItem(timegroup.storageKey);
+    assert.equal(storedValue, "10"); // Should store 10 (clamped from 5000 to duration)
     timegroup.remove();
   });
 

package/src/elements/EFTimegroup.ts

@@ -52,10 +52,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #currentTime = 0;
 
-  // Frame update locking mechanism (only for root timegroups)
-  private isFrameUpdateInProgress = false;
-  private queuedTimeUpdate: number | null = null;
-
   @property({
     type: String,
     attribute: "mode",
@@ -73,26 +69,34 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   fit: "none" | "contain" | "cover" = "none";
 
   #resizeObserver?: ResizeObserver;
-  #childObserver?: MutationObserver;
+
+  #seekInProgress = false;
+
+  #pendingSeekTime: number | undefined;
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
-    const newTime = Math.max(0, Math.min(time, this.durationMs / 1000));
-
-    // Only apply locking mechanism for root timegroups to prevent cascade overload
-    if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
-      // Queue the latest time update - only keep the most recent
-      this.queuedTimeUpdate = newTime;
+    if (this.#seekInProgress) {
+      this.#pendingSeekTime = time;
       return;
     }
 
-    if (this.isRootTimegroup) {
-      this.#executeTimeUpdate(newTime);
-    } else {
-      // Non-root timegroups update immediately (no cascade risk)
-      this.#currentTime = newTime;
-      this.#saveTimeToLocalStorage(newTime);
-    }
+    this.#seekInProgress = true;
+    this.#pendingSeekTime = time;
+
+    this.seekTask.run().finally(() => {
+      this.#seekInProgress = false;
+      if (
+        this.#pendingSeekTime !== undefined &&
+        this.#pendingSeekTime !== time
+      ) {
+        const pendingTime = this.#pendingSeekTime;
+        this.#pendingSeekTime = undefined;
+        this.currentTime = pendingTime;
+      } else {
+        this.#pendingSeekTime = undefined;
+      }
+    });
   }
 
   get currentTime() {
@@ -114,34 +118,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return this.closest("ef-timegroup") === this;
   }
 
-  /**
-   * Executes time update with frame locking for root timegroups
-   */
-  async #executeTimeUpdate(time: number) {
-    this.isFrameUpdateInProgress = true;
-    this.#currentTime = time;
-
-    try {
-      // Save to localStorage
-      this.#saveTimeToLocalStorage(time);
-
-      // Wait for any pending frame tasks to complete before allowing next update
-      await this.waitForFrameTasks();
-    } catch (error) {
-      console.error("⚠️ [TIME_UPDATE_ERROR] Error during frame update:", error);
-    } finally {
-      this.isFrameUpdateInProgress = false;
-
-      // Process queued update if any (ensures latest scrub position is processed)
-      if (this.queuedTimeUpdate !== null && this.queuedTimeUpdate !== time) {
-        const nextTime = this.queuedTimeUpdate;
-        this.queuedTimeUpdate = null;
-        // Schedule on next tick to avoid recursive call stack
-        setTimeout(() => this.#executeTimeUpdate(nextTime), 0);
-      }
-    }
-  }
-
   /**
    * Saves time to localStorage (extracted for reuse)
    */
@@ -186,44 +162,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.wrapWithWorkbench();
     }
 
-    // Set up observer to detect child changes that affect duration
-    this.#childObserver = new MutationObserver((mutations) => {
-      let shouldUpdate = false;
-
-      for (const mutation of mutations) {
-        if (mutation.type === "childList") {
-          // Child added/removed - this affects duration for contain/sequence modes
-          shouldUpdate = true;
-        } else if (mutation.type === "attributes") {
-          // Attribute changes that might affect duration
-          if (
-            mutation.attributeName === "duration" ||
-            mutation.attributeName === "mode"
-          ) {
-            shouldUpdate = true;
-          }
-        }
-      }
-
-      if (shouldUpdate) {
-        // Clear the temporal cache for this element to ensure childTemporals is up to date
-        import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
-          clearTemporalCacheForElement(this);
-        });
-
-        // Trigger an update to recalculate computed properties
-        this.requestUpdate();
-      }
-    });
-
-    // Observe this element for child changes
-    this.#childObserver.observe(this, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["duration", "mode"],
-    });
-
     requestAnimationFrame(() => {
       this.updateAnimations();
     });
@@ -232,7 +170,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver?.disconnect();
-    this.#childObserver?.disconnect();
   }
 
   get storageKey() {
@@ -300,24 +237,45 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
-  async getPendingFrameTasks() {
-    await this.updateComplete;
+  async getPendingFrameTasks(signal?: AbortSignal) {
+    await this.waitForNestedUpdates(signal);
+    signal?.throwIfAborted();
     const temporals = deepGetElementsWithFrameTasks(this);
     return temporals
       .map((temporal) => temporal.frameTask)
       .filter((task) => task.status < TaskStatus.COMPLETE);
   }
 
-  async waitForFrameTasks() {
+  async waitForNestedUpdates(signal?: AbortSignal) {
+    const limit = 10;
+    let steps = 0;
+    let isComplete = true;
+    while (true) {
+      steps++;
+      if (steps > limit) {
+        throw new Error("Reached update depth limit.");
+      }
+      isComplete = await this.updateComplete;
+      signal?.throwIfAborted();
+      if (isComplete) {
+        break;
+      }
+    }
+  }
+
+  async waitForFrameTasks(signal?: AbortSignal) {
     const limit = 10;
     let step = 0;
-    await this.updateComplete;
+    await this.waitForNestedUpdates(signal);
     while (step < limit) {
       step++;
-      let pendingTasks = await this.getPendingFrameTasks();
+      let pendingTasks = await this.getPendingFrameTasks(signal);
+      signal?.throwIfAborted();
       await Promise.all(pendingTasks.map((task) => task.taskComplete));
+      signal?.throwIfAborted();
       await this.updateComplete;
-      pendingTasks = await this.getPendingFrameTasks();
+      signal?.throwIfAborted();
+      pendingTasks = await this.getPendingFrameTasks(signal);
       if (pendingTasks.length === 0) {
         break;
       }
@@ -589,11 +547,37 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () => [this.ownCurrentTimeMs, this.currentTimeMs] as const,
-    task: async ([], { signal: _signal }) => {
-      let fullyUpdated = await this.updateComplete;
-      while (!fullyUpdated) {
-        fullyUpdated = await this.updateComplete;
+    task: async ([], { signal }) => {
+      if (this.isRootTimegroup) {
+        await this.waitForFrameTasks(signal);
+      }
+    },
+  });
+
+  seekTask = new Task(this, {
+    args: () => [this.#pendingSeekTime ?? this.#currentTime] as const,
+    task: async ([targetTime], { signal }) => {
+      const newTime = Math.max(0, Math.min(targetTime, this.durationMs / 1000));
+      this.#currentTime = newTime;
+      this.requestUpdate("currentTime");
+
+      // Wait for update to propagate to child elements
+      await this.updateComplete;
+      signal.throwIfAborted();
+
+      // Trigger child video seek tasks since they don't auto-run anymore
+      const videoElements = this.querySelectorAll(
+        "ef-video",
+      ) as NodeListOf<any>;
+      for (const video of videoElements) {
+        if (video.videoSeekTask) {
+          video.videoSeekTask.run();
+        }
       }
+
+      // Run frame task and wait for completion
+      await this.frameTask.run();
+      this.#saveTimeToLocalStorage(newTime);
     },
   });
 }