@editframe/elements 0.19.2-beta.0 → 0.20.0-beta.0

package/src/elements/EFTimegroup.browsertest.ts

@@ -420,13 +420,57 @@ describe("setting currentTime", () => {
     await timegroup.waitForMediaDurations();
 
     timegroup.currentTime = 5_000; // 5000 seconds, should clamp to 10s
-    await timegroup.seekTask.taskComplete;
+    await timegroup.seekTask.run();
 
     const storedValue = localStorage.getItem(timegroup.storageKey);
     assert.equal(storedValue, "10"); // Should store 10 (clamped from 5000 to duration)
     timegroup.remove();
   });
 
+  test("root timegroup remains visible when currentTime equals duration exactly", async () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup id="end-time-test" mode="fixed" duration="10s"></ef-timegroup>`,
+    );
+    await timegroup.waitForMediaDurations();
+
+    // Set currentTime to exactly the duration
+    timegroup.currentTime = 10; // 10 seconds
+    await timegroup.seekTask.taskComplete;
+    await timegroup.frameTask.taskComplete;
+
+    // The root timegroup should still be visible at the exact end time
+    assert.notEqual(
+      timegroup.style.display,
+      "none",
+      "Root timegroup should be visible at exact end time",
+    );
+  });
+
+  test("root timegroup becomes hidden only after currentTime exceeds duration", async () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup id="beyond-end-test" mode="fixed" duration="10s"></ef-timegroup>`,
+    );
+    await timegroup.waitForMediaDurations();
+
+    // Set currentTime beyond the duration (should be clamped to duration)
+    timegroup.currentTime = 15; // 15 seconds, should clamp to 10s
+    await timegroup.seekTask.taskComplete;
+    await timegroup.frameTask.taskComplete;
+
+    // Even when clamped, it should still be visible at the end
+    assert.notEqual(
+      timegroup.style.display,
+      "none",
+      "Root timegroup should be visible even when time is clamped to duration",
+    );
+    // Verify that the time was actually clamped
+    assert.equal(
+      timegroup.currentTime,
+      10,
+      "Time should be clamped to duration",
+    );
+  });
+
   test("does not persist in localStorage if the timegroup has no id", async () => {
     const timegroup = renderTimegroup(
       html`<ef-timegroup mode="fixed" duration="10s"></ef-timegroup>`,
@@ -572,19 +616,23 @@ describe("Dynamic content updates", () => {
       const frameTaskB = timegroup.querySelector("test-frame-task-b")!;
       const frameTaskC = timegroup.querySelector("test-frame-task-c")!;
 
-      assert.equal(frameTaskA.frameTaskCount, 0);
+      // following the initial update, the first frame tasks have run once.
+      await timegroup.updateComplete;
+
+      assert.equal(frameTaskA.frameTaskCount, 1);
       assert.equal(frameTaskB.frameTaskCount, 0);
-      assert.equal(frameTaskC.frameTaskCount, 0);
+      assert.equal(frameTaskC.frameTaskCount, 1);
 
+      // Then we run them manually.
       await timegroup.frameTask.run();
 
       // At timeline time 0ms:
       // - frameTaskA (0-1000ms) should run
       // - frameTaskB (1000-2000ms) should NOT run
       // - frameTaskC (0-1000ms) should run (inherits root positioning)
-      assert.equal(frameTaskA.frameTaskCount, 1);
+      assert.equal(frameTaskA.frameTaskCount, 2);
       assert.equal(frameTaskB.frameTaskCount, 0); // Not visible at time 0
-      assert.equal(frameTaskC.frameTaskCount, 1); // Nested in B but inherits root positioning
+      assert.equal(frameTaskC.frameTaskCount, 2); // Nested in B but inherits root positioning
     });
   });
 
@@ -599,9 +647,10 @@ describe("Dynamic content updates", () => {
       );
       const nonRootTimegroup = timegroup.querySelector("ef-timegroup")!;
       const frameTaskA = timegroup.querySelector("test-frame-task-a")!;
-      assert.equal(frameTaskA.frameTaskCount, 0);
+      await timegroup.updateComplete;
+      assert.equal(frameTaskA.frameTaskCount, 1);
       await nonRootTimegroup.seekTask.run();
-      assert.equal(frameTaskA.frameTaskCount, 0);
+      assert.equal(frameTaskA.frameTaskCount, 1);
     });
 
     test("waits for media durations", async () => {

package/src/elements/EFTimegroup.ts

@@ -1,7 +1,7 @@
 import { provide } from "@lit/context";
 import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
@@ -17,7 +17,10 @@ import {
   timegroupContext,
 } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
-import { evaluateTemporalState, updateAnimations } from "./updateAnimations.ts";
+import {
+  evaluateTemporalStateForAnimation,
+  updateAnimations,
+} from "./updateAnimations.ts";
 
 const log = debug("ef:elements:EFTimegroup");
 
@@ -104,8 +107,49 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #processingPendingSeek = false;
 
+  #frameTaskInProgress = false;
+
+  #pendingFrameTaskRun = false;
+
+  #processingPendingFrameTask = false;
+
+  /**
+   * Throttles frameTask execution to ensure only one runs at a time while preserving the last request
+   */
+  private async runThrottledFrameTask(): Promise<void> {
+    if (this.#frameTaskInProgress) {
+      this.#pendingFrameTaskRun = true;
+      // Wait for the current frame task to complete
+      while (this.#frameTaskInProgress) {
+        await this.frameTask.taskComplete;
+      }
+      return;
+    }
+
+    this.#frameTaskInProgress = true;
+
+    try {
+      await this.frameTask.run();
+    } finally {
+      this.#frameTaskInProgress = false;
+
+      if (this.#pendingFrameTaskRun && !this.#processingPendingFrameTask) {
+        this.#pendingFrameTaskRun = false;
+        this.#processingPendingFrameTask = true;
+        try {
+          await this.runThrottledFrameTask();
+        } finally {
+          this.#processingPendingFrameTask = false;
+        }
+      } else {
+        this.#pendingFrameTaskRun = false;
+      }
+    }
+  }
+
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
+    time = Math.max(0, time);
     if (!this.isRootTimegroup) {
       return;
     }
@@ -120,15 +164,12 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
 
     if (this.#seekInProgress) {
-      console.trace("pending seek to", time);
       this.#pendingSeekTime = time;
       this.#currentTime = time;
       return;
     }
-    console.trace("seeking to", time);
 
     this.#currentTime = time;
-    // This will be set to false in the seekTask
     this.#seekInProgress = true;
 
     this.seekTask.run().finally(() => {
@@ -212,14 +253,17 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.id) {
-      this.waitForMediaDurations().then(() => {
+    this.waitForMediaDurations().then(() => {
+      if (this.id) {
         const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
         if (maybeLoadedTime !== undefined) {
           this.currentTime = maybeLoadedTime;
         }
-      });
-    }
+      }
+      if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) {
+        this.seekTask.run();
+      }
+    });
 
     if (this.parentTimegroup) {
       new TimegroupController(this.parentTimegroup, this);
@@ -230,6 +274,15 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
+  #previousDurationMs = 0;
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (this.#previousDurationMs !== this.durationMs) {
+      this.#previousDurationMs = this.durationMs;
+      this.runThrottledFrameTask();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver?.disconnect();
@@ -331,7 +384,14 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       const startTimeMs = (temporal as any).startTimeMs as number;
       const endTimeMs = (temporal as any).endTimeMs as number;
       const elementStartsBeforeEnd = startTimeMs <= timelineTimeMs + epsilon;
-      const elementEndsAfterStart = endTimeMs > timelineTimeMs; // Exclusive end for clean transitions
+      // Root timegroups should remain visible at exact end time, but other elements use exclusive end for clean transitions
+      const isRootTimegroup =
+        temporal.tagName.toLowerCase() === "ef-timegroup" &&
+        !(temporal as any).parentTimegroup;
+      const useInclusiveEnd = isRootTimegroup;
+      const elementEndsAfterStart = useInclusiveEnd
+        ? endTimeMs >= timelineTimeMs
+        : endTimeMs > timelineTimeMs;
       return elementStartsBeforeEnd && elementEndsAfterStart;
     });
 
@@ -364,25 +424,33 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     const temporalElements = deepGetElementsWithFrameTasks(this);
 
     // Filter to only include temporally visible elements for frame processing
+    // Use animation-friendly visibility to prevent animation jumps at exact boundaries
     const visibleElements = temporalElements.filter((element) => {
-      const temporalState = evaluateTemporalState(element);
-      return temporalState.isVisible;
+      const animationState = evaluateTemporalStateForAnimation(element);
+      return animationState.isVisible;
     });
 
     await Promise.all(
-      visibleElements.map((element) => {
-        return element.frameTask.run();
-      }),
+      visibleElements.map((element) => element.frameTask.run()),
     );
   }
 
+  mediaDurationsPromise: Promise<void> | undefined = undefined;
+
+  async waitForMediaDurations() {
+    if (!this.mediaDurationsPromise) {
+      this.mediaDurationsPromise = this.#waitForMediaDurations();
+    }
+    return this.mediaDurationsPromise;
+  }
+
   /**
    * Wait for all media elements to load their initial segments.
    * Ideally we would only need the extracted index json data, but
    * that caused issues with constructing audio data. We had negative durations
    * in calculations and it was not clear why.
    */
-  async waitForMediaDurations() {
+  async #waitForMediaDurations() {
     // We must await updateComplete to ensure all media elements inside this are connected
     // and will match deepGetMediaElements
     await this.updateComplete;
@@ -668,9 +736,11 @@ export class EFTimegroup extends EFTemporal(LitElement) {
         0,
         Math.min(targetTime ?? 0, this.durationMs / 1000),
       );
+      // Apply the clamped time back to currentTime
+      this.#currentTime = newTime;
       this.requestUpdate("currentTime");
-      await this.frameTask.run();
-      this.#saveTimeToLocalStorage(newTime);
+      await this.runThrottledFrameTask();
+      this.#saveTimeToLocalStorage(this.#currentTime);
       // This has to be set false here so any following seeks are not treated as pending
       this.#seekInProgress = false;
       return newTime;