@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.0

package/src/elements/EFTemporal.browsertest.ts

@@ -47,7 +47,6 @@ describe("sourcein and sourceout", () => {
       const element = document.createElement("ten-seconds");
       element.sourceInMs = 5_000;
       element.sourceOutMs = 1_000;
-      console.log(element.sourceInMs, element.sourceOutMs, element.durationMs);
       expect(element.durationMs).toBe(0);
     });
   });

package/src/elements/EFTemporal.ts

@@ -292,6 +292,10 @@ const resetStartTimeMsCache = () => {
 };
 resetStartTimeMsCache();
 
+export const flushStartTimeMsCache = () => {
+  startTimeMsCache = new WeakMap();
+};
+
 export const EFTemporal = <T extends Constructor<LitElement>>(
   superClass: T,
 ) => {
@@ -536,12 +540,19 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
           const ownIndex = siblingTemorals?.indexOf(
             this as InstanceType<Constructor<TemporalMixinInterface> & T>,
           );
+          if (ownIndex === -1) {
+            return 0;
+          }
           if (ownIndex === 0) {
             startTimeMsCache.set(this, parentTimegroup.startTimeMs);
             return parentTimegroup.startTimeMs;
           }
           const previous = siblingTemorals?.[(ownIndex ?? 0) - 1];
           if (!previous) {
+            console.log("Previous temporal element not found", {
+              ownIndex,
+              siblingTemorals,
+            });
             throw new Error("Previous temporal element not found");
           }
           startTimeMsCache.set(

package/src/elements/EFTimegroup.ts

@@ -1,5 +1,5 @@
 import { provide } from "@lit/context";
-import { Task } from "@lit/task";
+import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -9,6 +9,8 @@ import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import {
   EFTemporal,
+  deepGetElementsWithFrameTasks,
+  flushStartTimeMsCache,
   shallowGetTemporalElements,
   timegroupContext,
 } from "./EFTemporal.js";
@@ -110,7 +112,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     super.connectedCallback();
     if (this.id) {
       this.waitForMediaDurations().then(() => {
-        this.#currentTime = this.maybeLoadTimeFromLocalStorage();
+        this.currentTime = this.maybeLoadTimeFromLocalStorage();
       });
     }
 
@@ -197,6 +199,30 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
+  async getPendingFrameTasks() {
+    await this.updateComplete;
+    const temporals = deepGetElementsWithFrameTasks(this);
+    return temporals
+      .map((temporal) => temporal.frameTask)
+      .filter((task) => task.status < TaskStatus.COMPLETE);
+  }
+
+  async waitForFrameTasks() {
+    const limit = 10;
+    let step = 0;
+    await this.updateComplete;
+    while (step < limit) {
+      step++;
+      let pendingTasks = await this.getPendingFrameTasks();
+      await Promise.all(pendingTasks.map((task) => task.taskComplete));
+      await this.updateComplete;
+      pendingTasks = await this.getPendingFrameTasks();
+      if (pendingTasks.length === 0) {
+        break;
+      }
+    }
+  }
+
   /**
    * Wait for all media elements to load their initial segments.
    * Ideally we would only need the extracted index json data, but
@@ -204,10 +230,32 @@ export class EFTimegroup extends EFTemporal(LitElement) {
    * in calculations and it was not clear why.
    */
   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);
-    return await Promise.all(
-      mediaElements.map((m) => m.trackFragmentIndexLoader.taskComplete),
+    // 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.fragmentIndexTask.taskComplete),
     );
+
+    // 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,
+    // but it is the best current way to ensure that all temporal elements have correct durations and start times.
+
+    // Next, we must flush the startTimeMs cache to ensure all media elements have their
+    // startTimeMs parsed fresh, otherwise the startTimeMs is cached per animation frame.
+    flushStartTimeMsCache();
+
+    // 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.
+    this.requestUpdate("currentTime");
+    // Finally, we must await updateComplete to ensure all temporal elements have their
+    // currentTime updated and all animations have run.
+
+    await this.updateComplete;
   }
 
   get childTemporals() {
@@ -328,13 +376,28 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   async renderAudio(fromMs: number, toMs: number) {
     const durationMs = toMs - fromMs;
-    const audioContext = new OfflineAudioContext(
-      2,
-      Math.round((48000 * durationMs) / 1000),
-      48000,
-    );
+    const contextSize = Math.round((48000 * durationMs) / 1000);
+
+    // Debug logging for audio duration calculations
+    if (contextSize <= 0) {
+      throw new Error(
+        `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,
+      );
+    }
+
+    let audioContext: OfflineAudioContext;
+    try {
+      audioContext = new OfflineAudioContext(2, contextSize, 48000);
+    } catch (error) {
+      throw new Error(
+        `[EFTimegroup.renderAudio] Failed to create OfflineAudioContext(2, ${contextSize}, 48000) for renderAudio(${fromMs}, ${toMs}) with contextSize=${contextSize}: ${error instanceof Error ? error.message : String(error)}. This typically happens when audio parameters are invalid (e.g., contextSize <= 0).`,
+      );
+    }
+
     await this.#addAudioToContext(audioContext, fromMs, toMs);
-    return await audioContext.startRendering();
+    const renderedBuffer = await audioContext.startRendering();
+
+    return renderedBuffer;
   }
 
   async loadMd5Sums() {