@editframe/elements 0.18.27-beta.0 → 0.19.4-beta.0

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, type PropertyValueMap } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
@@ -12,14 +12,22 @@ import {
   deepGetElementsWithFrameTasks,
   EFTemporal,
   flushStartTimeMsCache,
+  resetTemporalCache,
   shallowGetTemporalElements,
   timegroupContext,
 } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
-import { updateAnimations } from "./updateAnimations.ts";
+import { evaluateTemporalState, updateAnimations } from "./updateAnimations.ts";
 
 const log = debug("ef:elements:EFTimegroup");
 
+// Cache for sequence mode duration calculations to avoid O(n) recalculation
+let sequenceDurationCache: WeakMap<EFTimegroup, number> = new WeakMap();
+
+export const flushSequenceDurationCache = () => {
+  sequenceDurationCache = new WeakMap();
+};
+
 export const shallowGetTimegroups = (
   element: Element,
   groups: EFTimegroup[] = [],
@@ -50,20 +58,40 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   @provide({ context: timegroupContext })
   _timeGroupContext = this;
 
-  #currentTime = 0;
+  #currentTime: number | undefined = undefined;
 
   @property({
     type: String,
     attribute: "mode",
   })
-  mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
+  set mode(value: "fit" | "fixed" | "sequence" | "contain") {
+    // Invalidate duration cache when mode changes
+    sequenceDurationCache.delete(this);
+    this._mode = value;
+  }
+
+  get mode() {
+    return this._mode;
+  }
+
+  private _mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
 
   @property({
     type: Number,
     converter: durationConverter,
     attribute: "overlap",
   })
-  overlapMs = 0;
+  set overlapMs(value: number) {
+    // Invalidate duration cache when overlap changes
+    sequenceDurationCache.delete(this);
+    this._overlapMs = value;
+  }
+
+  get overlapMs() {
+    return this._overlapMs;
+  }
+
+  private _overlapMs = 0;
 
   @property({ type: String })
   fit: "none" | "contain" | "cover" = "none";
@@ -74,25 +102,47 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #pendingSeekTime: number | undefined;
 
+  #processingPendingSeek = false;
+
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
+    time = Math.max(0, time);
+    if (!this.isRootTimegroup) {
+      return;
+    }
+    if (Number.isNaN(time)) {
+      return;
+    }
+    if (time === this.#currentTime && !this.#processingPendingSeek) {
+      return;
+    }
+    if (this.#pendingSeekTime === time) {
+      return;
+    }
+
     if (this.#seekInProgress) {
       this.#pendingSeekTime = time;
+      this.#currentTime = time;
       return;
     }
 
+    this.#currentTime = time;
+    // This will be set to false in the seekTask
     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;
+        this.#processingPendingSeek = true;
+        try {
+          this.currentTime = pendingTime;
+        } finally {
+          this.#processingPendingSeek = false;
+        }
       } else {
         this.#pendingSeekTime = undefined;
       }
@@ -100,22 +150,22 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   get currentTime() {
-    return this.#currentTime;
-  }
-
-  get currentTimeMs() {
-    return this.currentTime * 1000;
+    return this.#currentTime ?? 0;
   }
 
   set currentTimeMs(ms: number) {
     this.currentTime = ms / 1000;
   }
 
+  get currentTimeMs() {
+    return this.currentTime * 1000;
+  }
+
   /**
    * Determines if this is a root timegroup (no parent timegroups)
    */
   get isRootTimegroup(): boolean {
-    return this.closest("ef-timegroup") === this;
+    return !this.parentTimegroup;
   }
 
   /**
@@ -123,7 +173,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
    */
   #saveTimeToLocalStorage(time: number) {
     try {
-      if (this.id && this.isConnected) {
+      if (this.id && this.isConnected && !Number.isNaN(time)) {
         localStorage.setItem(this.storageKey, time.toString());
       }
     } catch (error) {
@@ -132,27 +182,46 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   render() {
-    return html`<slot></slot> `;
+    return html`<slot @slotchange=${this.#handleSlotChange}></slot> `;
   }
 
+  #handleSlotChange = () => {
+    // Invalidate caches when slot content changes
+    resetTemporalCache();
+    flushSequenceDurationCache();
+    flushStartTimeMsCache();
+
+    // Request update to trigger recalculation of dependent properties
+    this.requestUpdate();
+  };
+
   maybeLoadTimeFromLocalStorage() {
     if (this.id) {
       try {
-        return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
+        const storedValue = localStorage.getItem(this.storageKey);
+        if (storedValue === null) {
+          return undefined;
+        }
+        return Number.parseFloat(storedValue);
       } catch (error) {
         log("Failed to load time from localStorage", error);
       }
     }
-    return 0;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.id) {
-      this.waitForMediaDurations().then(() => {
-        this.currentTime = this.maybeLoadTimeFromLocalStorage();
-      });
-    }
+    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);
@@ -161,10 +230,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     if (this.shouldWrapWithWorkbench()) {
       this.wrapWithWorkbench();
     }
-
-    requestAnimationFrame(() => {
-      this.updateAnimations();
-    });
   }
 
   disconnectedCallback() {
@@ -205,6 +270,12 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       case "fixed":
         return super.durationMs;
       case "sequence": {
+        // Check cache first to avoid expensive O(n) recalculation
+        const cachedDuration = sequenceDurationCache.get(this);
+        if (cachedDuration !== undefined) {
+          return cachedDuration;
+        }
+
         let duration = 0;
         this.childTemporals.forEach((child, index) => {
           if (child instanceof EFTimegroup && child.mode === "fit") {
@@ -215,6 +286,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           }
           duration += child.durationMs;
         });
+
+        // Cache the calculated duration
+        sequenceDurationCache.set(this, duration);
         return duration;
       }
       case "contain": {
@@ -241,9 +315,34 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     await this.waitForNestedUpdates(signal);
     signal?.throwIfAborted();
     const temporals = deepGetElementsWithFrameTasks(this);
-    return temporals
-      .map((temporal) => temporal.frameTask)
-      .filter((task) => task.status < TaskStatus.COMPLETE);
+
+    // Filter to only include temporally visible elements for frame processing
+    // (but keep all elements for duration calculations)
+    // Use the target timeline time if we're in the middle of seeking
+    const timelineTimeMs =
+      (this.#pendingSeekTime ?? this.#currentTime ?? 0) * 1000;
+    const activeTemporals = temporals.filter((temporal) => {
+      // Skip timeline filtering if temporal doesn't have timeline position info
+      if (!("startTimeMs" in temporal) || !("endTimeMs" in temporal)) {
+        return true; // Keep non-temporal elements
+      }
+
+      // Only process frame tasks for elements that overlap the current timeline
+      // Use same epsilon logic as seek task for consistency
+      const epsilon = 0.001; // 1µs offset to break ties at boundaries
+      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
+      return elementStartsBeforeEnd && elementEndsAfterStart;
+    });
+
+    const frameTasks = activeTemporals.map((temporal) => temporal.frameTask);
+    frameTasks.forEach((task) => {
+      task.run();
+    });
+
+    return frameTasks.filter((task) => task.status < TaskStatus.COMPLETE);
   }
 
   async waitForNestedUpdates(signal?: AbortSignal) {
@@ -263,23 +362,29 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
-  async waitForFrameTasks(signal?: AbortSignal) {
-    const limit = 10;
-    let step = 0;
-    await this.waitForNestedUpdates(signal);
-    while (step < limit) {
-      step++;
-      let pendingTasks = await this.getPendingFrameTasks(signal);
-      signal?.throwIfAborted();
-      await Promise.all(pendingTasks.map((task) => task.taskComplete));
-      signal?.throwIfAborted();
-      await this.updateComplete;
-      signal?.throwIfAborted();
-      pendingTasks = await this.getPendingFrameTasks(signal);
-      if (pendingTasks.length === 0) {
-        break;
-      }
+  async waitForFrameTasks() {
+    const temporalElements = deepGetElementsWithFrameTasks(this);
+
+    // Filter to only include temporally visible elements for frame processing
+    const visibleElements = temporalElements.filter((element) => {
+      const temporalState = evaluateTemporalState(element);
+      return temporalState.isVisible;
+    });
+
+    await Promise.all(
+      visibleElements.map((element) => {
+        return element.frameTask.run();
+      }),
+    );
+  }
+
+  mediaDurationsPromise: Promise<void> | undefined = undefined;
+
+  async waitForMediaDurations() {
+    if (!this.mediaDurationsPromise) {
+      this.mediaDurationsPromise = this.#waitForMediaDurations();
     }
+    return this.mediaDurationsPromise;
   }
 
   /**
@@ -288,14 +393,18 @@ export class EFTimegroup extends EFTemporal(LitElement) {
    * 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;
     const mediaElements = deepGetMediaElements(this);
     // Then, we must await the fragmentIndexTask to ensure all media elements have their
     // fragment index loaded, which is where their duration is parsed from.
-    await Promise.all(mediaElements.map((m) => m.mediaEngineTask.taskComplete));
+    await Promise.all(
+      mediaElements.map((m) =>
+        m.mediaEngineTask.value ? Promise.resolve() : m.mediaEngineTask.run(),
+      ),
+    );
 
     // After waiting for durations, we must force some updates to cascade and ensure all temporal elements
     // have correct durations and start times. It is not ideal that we have to do this inside here,
@@ -305,6 +414,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     // startTimeMs parsed fresh, otherwise the startTimeMs is cached per animation frame.
     flushStartTimeMsCache();
 
+    // Flush duration cache since child durations may have changed
+    flushSequenceDurationCache();
+
     // Request an update to the currentTime of this group, ensuring that time updates will cascade
     // down to children, forcing sequence groups to arrange correctly.
     // This also makes the filmstrip update correctly.
@@ -319,22 +431,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return shallowGetTemporalElements(this);
   }
 
-  protected updated(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-  ): void {
-    super.updated(changedProperties);
-    if (
-      changedProperties.has("currentTime") ||
-      changedProperties.has("ownCurrentTimeMs")
-    ) {
-      this.updateAnimations();
-    }
-  }
-
-  private updateAnimations() {
-    updateAnimations(this);
-  }
-
   get contextProvider() {
     let parent = this.parentNode;
     while (parent) {
@@ -424,9 +520,15 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           return;
         }
 
+        // Convert from local timeline to source media timeline (accounting for sourcein/sourceout)
+        const sourceInMs =
+          mediaElement.sourceInMs || mediaElement.trimStartMs || 0;
+        const mediaSourceFromMs = mediaLocalFromMs + sourceInMs;
+        const mediaSourceToMs = mediaLocalToMs + sourceInMs;
+
         const audio = await mediaElement.fetchAudioSpanningTime(
-          mediaLocalFromMs, // ✅ Now using media element's local timeline
-          mediaLocalToMs, // ✅ Now using media element's local timeline
+          mediaSourceFromMs, // ✅ Now using source media timeline with sourcein/sourceout
+          mediaSourceToMs, // ✅ Now using source media timeline with sourcein/sourceout
           abortController.signal,
         );
         if (!audio) {
@@ -441,24 +543,32 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
         // Calculate timing for placing this audio in the output context
         const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-        const ctxEndMs = mediaElement.endTimeMs - fromMs;
-        const ctxDurationMs = ctxEndMs - ctxStartMs;
 
         // Calculate offset within the fetched audio buffer
-        // Since we now use local timeline coordinates, audio.startMs is relative to media start
-        const requestedOffsetInMedia = mediaLocalFromMs; // Already in local timeline
-        const actualOffsetInBuffer = requestedOffsetInMedia - audio.startMs; // Both in local timeline
+        // audio.startMs is now in source timeline, convert back to compare properly
+        const requestedSourceFromMs = mediaSourceFromMs;
+        const actualSourceStartMs = audio.startMs;
+        const offsetInBufferMs = requestedSourceFromMs - actualSourceStartMs;
 
         // Ensure offset is never negative (this would cause audio scheduling errors)
-        const safeOffset = Math.max(0, actualOffsetInBuffer);
+        const safeOffsetMs = Math.max(0, offsetInBufferMs);
+
+        // Calculate exact duration to play from the buffer (don't exceed what we need)
+        const requestedDurationMs = mediaSourceToMs - mediaSourceFromMs;
+        const availableAudioMs = audio.endMs - audio.startMs;
+        const actualDurationMs = Math.min(
+          requestedDurationMs,
+          availableAudioMs - safeOffsetMs,
+        );
 
-        if (safeOffset !== actualOffsetInBuffer) {
+        if (actualDurationMs <= 0) {
+          return; // Skip if no valid audio duration
         }
 
         bufferSource.start(
-          ctxStartMs / 1000,
-          safeOffset / 1000,
-          ctxDurationMs / 1000,
+          ctxStartMs / 1000, // When to start in output context (seconds)
+          safeOffsetMs / 1000, // Offset into the fetched buffer (seconds)
+          actualDurationMs / 1000, // How long to play from buffer (seconds)
         );
       }),
     );
@@ -545,39 +655,36 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
+    // autoRun: EF_INTERACTIVE,
+    autoRun: false,
     args: () => [this.ownCurrentTimeMs, this.currentTimeMs] as const,
-    task: async ([], { signal }) => {
+    task: async ([]) => {
       if (this.isRootTimegroup) {
-        await this.waitForFrameTasks(signal);
+        await this.waitForFrameTasks();
+        updateAnimations(this);
       }
     },
   });
 
   seekTask = new Task(this, {
+    autoRun: false,
     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();
-        }
+    onComplete: () => {},
+    task: async ([targetTime]) => {
+      if (!this.isRootTimegroup) {
+        return;
       }
-
-      // Run frame task and wait for completion
+      await this.waitForMediaDurations();
+      const newTime = Math.max(
+        0,
+        Math.min(targetTime ?? 0, this.durationMs / 1000),
+      );
+      this.requestUpdate("currentTime");
       await this.frameTask.run();
       this.#saveTimeToLocalStorage(newTime);
+      // This has to be set false here so any following seeks are not treated as pending
+      this.#seekInProgress = false;
+      return newTime;
     },
   });
 }