@editframe/elements 0.20.4-beta.0 → 0.21.0-beta.0

package/src/elements/EFTimegroup.ts

@@ -6,6 +6,7 @@ import { customElement, property } from "lit/decorators.js";
 
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { isTracingEnabled, withSpan } from "../otel/tracingHelpers.js";
 import type { AudioSpan } from "../transcoding/types/index.ts";
 import { durationConverter } from "./durationConverter.js";
 import { deepGetMediaElements } from "./EFMedia.js";
@@ -422,18 +423,47 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   async waitForFrameTasks() {
-    const temporalElements = deepGetElementsWithFrameTasks(this);
+    const result = await withSpan(
+      "timegroup.waitForFrameTasks",
+      {
+        timegroupId: this.id || "unknown",
+        mode: this.mode,
+      },
+      undefined,
+      async (span) => {
+        const innerStart = performance.now();
+
+        const temporalElements = deepGetElementsWithFrameTasks(this);
+        if (isTracingEnabled()) {
+          span.setAttribute("temporalElementsCount", temporalElements.length);
+        }
 
-    // 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 animationState = evaluateTemporalStateForAnimation(element);
-      return animationState.isVisible;
-    });
+        // 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 animationState = evaluateTemporalStateForAnimation(element);
+          return animationState.isVisible;
+        });
+        if (isTracingEnabled()) {
+          span.setAttribute("visibleElementsCount", visibleElements.length);
+        }
 
-    await Promise.all(
-      visibleElements.map((element) => element.frameTask.run()),
+        const promiseStart = performance.now();
+
+        await Promise.all(
+          visibleElements.map((element) => element.frameTask.run()),
+        );
+        const promiseEnd = performance.now();
+
+        const innerEnd = performance.now();
+        if (isTracingEnabled()) {
+          span.setAttribute("actualInnerMs", innerEnd - innerStart);
+          span.setAttribute("promiseAwaitMs", promiseEnd - promiseStart);
+        }
+      },
     );
+
+    return result;
   }
 
   mediaDurationsPromise: Promise<void> | undefined = undefined;
@@ -452,37 +482,53 @@ 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);
-    // 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.value ? Promise.resolve() : m.mediaEngineTask.run(),
-      ),
-    );
+    return withSpan(
+      "timegroup.waitForMediaDurations",
+      {
+        timegroupId: this.id || "unknown",
+        mode: this.mode,
+      },
+      undefined,
+      async (span) => {
+        // We must await updateComplete to ensure all media elements inside this are connected
+        // and will match deepGetMediaElements
+        await this.updateComplete;
+        const mediaElements = deepGetMediaElements(this);
+        if (isTracingEnabled()) {
+          span.setAttribute("mediaElementsCount", mediaElements.length);
+        }
 
-    // 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.
+        // 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.value
+              ? Promise.resolve()
+              : m.mediaEngineTask.run(),
+          ),
+        );
 
-    // 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();
+        // 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.
 
-    // Flush duration cache since child durations may have changed
-    flushSequenceDurationCache();
+        // 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.
+        // Flush duration cache since child durations may have changed
+        flushSequenceDurationCache();
 
-    await this.updateComplete;
+        // 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() {
@@ -645,35 +691,52 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   async renderAudio(fromMs: number, toMs: number) {
-    // Here we determine the number of samples we need to render rather than the duration.
-    // We cannot tolerate having more or fewer samples than fit exactlly into AAC frames.
-    const durationMs = toMs - fromMs;
-    const duration = durationMs / 1000;
-    const exactSamples = 48000 * duration;
-    const aacFrames = exactSamples / 1024;
-    const alignedFrames = Math.round(aacFrames);
-    const contextSize = alignedFrames * 1024; // AAC-aligned sample count
-
-    // Debug logging for audio duration calculations
-    if (contextSize <= 0) {
-      throw new Error(
-        `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,
-      );
-    }
+    return withSpan(
+      "timegroup.renderAudio",
+      {
+        timegroupId: this.id || "unknown",
+        fromMs,
+        toMs,
+        durationMs: toMs - fromMs,
+      },
+      undefined,
+      async (span) => {
+        // Here we determine the number of samples we need to render rather than the duration.
+        // We cannot tolerate having more or fewer samples than fit exactlly into AAC frames.
+        const durationMs = toMs - fromMs;
+        const duration = durationMs / 1000;
+        const exactSamples = 48000 * duration;
+        const aacFrames = exactSamples / 1024;
+        const alignedFrames = Math.round(aacFrames);
+        const contextSize = alignedFrames * 1024; // AAC-aligned sample count
+
+        if (isTracingEnabled()) {
+          span.setAttribute("contextSize", contextSize);
+          span.setAttribute("alignedFrames", alignedFrames);
+        }
 
-    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).`,
-      );
-    }
+        // Debug logging for audio duration calculations
+        if (contextSize <= 0) {
+          throw new Error(
+            `Duration must be greater than 0 when rendering audio. ${contextSize}ms`,
+          );
+        }
 
-    await this.#addAudioToContext(audioContext, fromMs, toMs);
-    const renderedBuffer = await audioContext.startRendering();
+        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).`,
+          );
+        }
 
-    return renderedBuffer;
+        await this.#addAudioToContext(audioContext, fromMs, toMs);
+        const renderedBuffer = await audioContext.startRendering();
+
+        return renderedBuffer;
+      },
+    );
   }
 
   /**
@@ -728,10 +791,21 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     // autoRun: EF_INTERACTIVE,
     autoRun: false,
     args: () => [this.ownCurrentTimeMs, this.currentTimeMs] as const,
-    task: async ([]) => {
+    task: async ([ownCurrentTimeMs, currentTimeMs]) => {
       if (this.isRootTimegroup) {
-        await this.waitForFrameTasks();
-        updateAnimations(this);
+        await withSpan(
+          "timegroup.frameTask",
+          {
+            timegroupId: this.id || "unknown",
+            ownCurrentTimeMs,
+            currentTimeMs,
+          },
+          undefined,
+          async () => {
+            await this.waitForFrameTasks();
+            updateAnimations(this);
+          },
+        );
       }
     },
   });
@@ -744,19 +818,33 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       if (!this.isRootTimegroup) {
         return;
       }
-      await this.waitForMediaDurations();
-      const newTime = Math.max(
-        0,
-        Math.min(targetTime ?? 0, this.durationMs / 1000),
+      return withSpan(
+        "timegroup.seekTask",
+        {
+          timegroupId: this.id || "unknown",
+          targetTime: targetTime ?? 0,
+          durationMs: this.durationMs,
+        },
+        undefined,
+        async (span) => {
+          await this.waitForMediaDurations();
+          const newTime = Math.max(
+            0,
+            Math.min(targetTime ?? 0, this.durationMs / 1000),
+          );
+          if (isTracingEnabled()) {
+            span.setAttribute("newTime", newTime);
+          }
+          // Apply the clamped time back to currentTime
+          this.#currentTime = newTime;
+          this.requestUpdate("currentTime");
+          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;
+        },
       );
-      // Apply the clamped time back to currentTime
-      this.#currentTime = newTime;
-      this.requestUpdate("currentTime");
-      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;
     },
   });
 }

package/src/elements/EFVideo.browsertest.ts

@@ -238,7 +238,7 @@ describe("EFVideo", () => {
 
       // Should not throw when video asset is missing
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
     });
   });
@@ -267,7 +267,7 @@ describe("EFVideo", () => {
         close: vi.fn(),
       } as unknown as VideoFrame;
 
-      // Simulate frame painting (this would normally happen through paintTask)
+      // Simulate frame painting (this would normally happen through paint method)
       const ctx = canvas.getContext("2d");
       if (ctx && mockFrame.codedWidth && mockFrame.codedHeight) {
         canvas.width = mockFrame.codedWidth;
@@ -355,20 +355,16 @@ describe("EFVideo", () => {
 
       // Simulate the decoder being in use
       if (decoderLockDescriptor) {
-        // We can't directly access private fields in tests, but we can test
-        // that multiple paint calls don't cause issues
-        const paintPromise1 = video.paintTask.run();
-        const paintPromise2 = video.paintTask.run();
-        const paintPromise3 = video.paintTask.run();
-
-        // All should complete without throwing
-        await expect(
-          Promise.allSettled([paintPromise1, paintPromise2, paintPromise3]),
-        ).resolves.toBeDefined();
+        // We can test that multiple paint calls don't cause issues
+        expect(() => {
+          video.paint(0);
+          video.paint(0);
+          video.paint(0);
+        }).not.toThrow();
       }
     });
 
-    test("paintTask handles missing canvas gracefully", ({ expect }) => {
+    test("paint handles missing canvas gracefully", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -379,23 +375,19 @@ describe("EFVideo", () => {
       const canvas = video.canvasElement;
       canvas?.remove();
 
-      // Paint task should handle missing canvas
-      expect(() => {
-        video.paintTask.run();
-      }).not.toThrow();
+      // Paint should handle missing canvas
+      expect(() => video.paint(0)).not.toThrow();
     });
 
-    test("handles paint task with no video asset", ({ expect }) => {
+    test("handles paint with no video asset", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
 
       const video = container.querySelector("ef-video") as EFVideo;
 
-      // Paint task should handle missing video asset gracefully
-      expect(() => {
-        video.paintTask.run();
-      }).not.toThrow();
+      // Paint should handle missing video asset gracefully
+      expect(() => video.paint(0)).not.toThrow();
     });
   });
 
@@ -445,12 +437,12 @@ describe("EFVideo", () => {
       // Should handle invalid seek times gracefully
       expect(() => {
         video.desiredSeekTimeMs = -1000; // Invalid negative time
-        video.paintTask.run();
+        video.paint(-1000);
       }).not.toThrow();
 
       expect(() => {
         video.desiredSeekTimeMs = Number.POSITIVE_INFINITY;
-        video.paintTask.run();
+        video.paint(Number.POSITIVE_INFINITY);
       }).not.toThrow();
     });
 
@@ -462,14 +454,14 @@ describe("EFVideo", () => {
       const video = container.querySelector("ef-video") as EFVideo;
 
       // Start some operations
-      video.paintTask.run();
+      video.paint(0);
 
       // Remove element
       video.remove();
 
       // Should not cause errors
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
     });
 
@@ -491,7 +483,7 @@ describe("EFVideo", () => {
 
       // Should handle context loss gracefully
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
 
       // Restore original method