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

package/src/elements/EFTimegroup.ts

@@ -5,10 +5,12 @@ import { css, html, LitElement, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
-import type { AudioSpan } from "../transcoding/types/index.ts";
-import { durationConverter } from "./durationConverter.js";
-import { deepGetMediaElements } from "./EFMedia.js";
+import { efContext } from "../gui/efContext.js";
+import { TWMixin } from "../gui/TWMixin.js";
+import { isTracingEnabled, withSpan } from "../otel/tracingHelpers.js";
+import { deepGetMediaElements, type EFMedia } from "./EFMedia.js";
 import {
   deepGetElementsWithFrameTasks,
   EFTemporal,
@@ -17,12 +19,19 @@ import {
   shallowGetTemporalElements,
   timegroupContext,
 } from "./EFTemporal.js";
+import { parseTimeToMs } from "./parseTimeToMs.js";
+import { renderTemporalAudio } from "./renderTemporalAudio.js";
+import { EFTargetable } from "./TargetController.js";
 import { TimegroupController } from "./TimegroupController.js";
 import {
   evaluateTemporalStateForAnimation,
   updateAnimations,
 } from "./updateAnimations.ts";
 
+declare global {
+  var EF_DEV_WORKBENCH: boolean | undefined;
+}
+
 const log = debug("ef:elements:EFTimegroup");
 
 // Cache for sequence mode duration calculations to avoid O(n) recalculation
@@ -47,13 +56,24 @@ export const shallowGetTimegroups = (
 };
 
 @customElement("ef-timegroup")
-export class EFTimegroup extends EFTemporal(LitElement) {
+export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
+  static get observedAttributes(): string[] {
+    // biome-ignore lint/complexity/noThisInStatic: It's okay to use this here
+    const parentAttributes = super.observedAttributes || [];
+    return [...parentAttributes, "mode", "overlap", "currenttime", "fit"];
+  }
+
   static styles = css`
     :host {
       display: block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    ::slotted(ef-timegroup) {
+      position: absolute;
       width: 100%;
       height: 100%;
-      position: absolute;
       top: 0;
       left: 0;
     }
@@ -62,95 +82,51 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   @provide({ context: timegroupContext })
   _timeGroupContext = this;
 
-  #currentTime: number | undefined = undefined;
-
-  @property({
-    type: String,
-    attribute: "mode",
-  })
-  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";
+  @provide({ context: efContext })
+  efContext = this;
 
-  @property({
-    type: Number,
-    converter: durationConverter,
-    attribute: "overlap",
-  })
-  set overlapMs(value: number) {
-    // Invalidate duration cache when overlap changes
-    sequenceDurationCache.delete(this);
-    this._overlapMs = value;
-  }
+  mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
+  overlapMs = 0;
 
-  get overlapMs() {
-    return this._overlapMs;
+  attributeChangedCallback(
+    name: string,
+    old: string | null,
+    value: string | null,
+  ): void {
+    if (name === "mode" && value) {
+      this.mode = value as typeof this.mode;
+    }
+    if (name === "overlap" && value) {
+      this.overlapMs = parseTimeToMs(value);
+    }
+    super.attributeChangedCallback(name, old, value);
   }
 
-  private _overlapMs = 0;
-
   @property({ type: String })
   fit: "none" | "contain" | "cover" = "none";
 
   #resizeObserver?: ResizeObserver;
 
+  #currentTime: number | undefined = undefined;
   #seekInProgress = false;
-
   #pendingSeekTime: number | undefined;
-
   #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;
-      }
+    if (this.playbackController) {
+      return this.playbackController.runThrottledFrameTask();
     }
+    await this.frameTask.run();
   }
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
-    time = Math.max(0, time);
+    if (this.playbackController) {
+      this.playbackController.currentTime = time;
+      return;
+    }
+
+    time = Math.max(0, Math.min(this.durationMs / 1000, time));
     if (!this.isRootTimegroup) {
       return;
     }
@@ -193,6 +169,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   get currentTime() {
+    if (this.playbackController) {
+      return this.playbackController.currentTime;
+    }
     return this.#currentTime ?? 0;
   }
 
@@ -204,6 +183,49 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return this.currentTime * 1000;
   }
 
+  /**
+   * Seek to a specific time and wait for all frames to be ready.
+   * This is the recommended way to seek in tests and programmatic control.
+   *
+   * @param timeMs - Time in milliseconds to seek to
+   * @returns Promise that resolves when the seek is complete and all visible children are ready
+   */
+  async seek(timeMs: number): Promise<void> {
+    this.currentTimeMs = timeMs;
+    await this.seekTask.taskComplete;
+
+    // Handle localStorage when playbackController delegates seek
+    if (this.playbackController) {
+      this.saveTimeToLocalStorage(this.currentTime);
+    }
+
+    await this.frameTask.taskComplete;
+
+    // Ensure all visible elements have completed their reactive update cycles AND frame rendering
+    // waitForFrameTasks() calls frameTask.run() on children, but this may happen before child
+    // elements have processed property changes from requestUpdate(). To ensure frame data is
+    // accurate, we wait for updateComplete first, then ensure the frameTask has run with the
+    // updated properties. Elements like EFVideo provide waitForFrameReady() for this pattern.
+    const temporalElements = deepGetElementsWithFrameTasks(this);
+    const visibleElements = temporalElements.filter((element) => {
+      const animationState = evaluateTemporalStateForAnimation(element);
+      return animationState.isVisible;
+    });
+
+    await Promise.all(
+      visibleElements.map(async (element) => {
+        if (
+          "waitForFrameReady" in element &&
+          typeof element.waitForFrameReady === "function"
+        ) {
+          await (element as any).waitForFrameReady();
+        } else {
+          await element.updateComplete;
+        }
+      }),
+    );
+  }
+
   /**
    * Determines if this is a root timegroup (no parent timegroups)
    */
@@ -211,10 +233,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return !this.parentTimegroup;
   }
 
-  /**
-   * Saves time to localStorage (extracted for reuse)
-   */
-  #saveTimeToLocalStorage(time: number) {
+  saveTimeToLocalStorage(time: number) {
     try {
       if (this.id && this.isConnected && !Number.isNaN(time)) {
         localStorage.setItem(this.storageKey, time.toString());
@@ -238,7 +257,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     this.requestUpdate();
   };
 
-  maybeLoadTimeFromLocalStorage() {
+  loadTimeFromLocalStorage(): number | undefined {
     if (this.id) {
       try {
         const storedValue = localStorage.getItem(this.storageKey);
@@ -250,21 +269,25 @@ export class EFTimegroup extends EFTemporal(LitElement) {
         log("Failed to load time from localStorage", error);
       }
     }
+    return undefined;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.waitForMediaDurations().then(() => {
-      if (this.id) {
-        const maybeLoadedTime = this.maybeLoadTimeFromLocalStorage();
-        if (maybeLoadedTime !== undefined) {
-          this.currentTime = maybeLoadedTime;
+
+    if (!this.playbackController) {
+      this.waitForMediaDurations().then(() => {
+        if (this.id) {
+          const maybeLoadedTime = this.loadTimeFromLocalStorage();
+          if (maybeLoadedTime !== undefined) {
+            this.currentTime = maybeLoadedTime;
+          }
         }
-      }
-      if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) {
-        this.seekTask.run();
-      }
-    });
+        if (EF_INTERACTIVE && this.seekTask.status === TaskStatus.INITIAL) {
+          this.seekTask.run();
+        }
+      });
+    }
 
     if (this.parentTimegroup) {
       new TimegroupController(this.parentTimegroup, this);
@@ -277,7 +300,13 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #previousDurationMs = 0;
 
-  protected updated(_changedProperties: PropertyValues): void {
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("mode") || changedProperties.has("overlapMs")) {
+      sequenceDurationCache.delete(this);
+    }
+
     if (this.#previousDurationMs !== this.durationMs) {
       this.#previousDurationMs = this.durationMs;
       this.runThrottledFrameTask();
@@ -422,18 +451,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 +510,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);
+        }
+
+        // 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(),
+          ),
+        );
 
-    // 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.
+        // 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();
+        // 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();
 
-    // Flush duration cache since child durations may have changed
-    flushSequenceDurationCache();
+        // 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.
-    this.requestUpdate("currentTime");
-    // Finally, we must await updateComplete to ensure all temporal elements have their
-    // currentTime updated and all animations have run.
+        // 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;
+        await this.updateComplete;
+      },
+    );
   }
 
   get childTemporals() {
@@ -503,13 +577,31 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   /**
    * Returns true if the timegroup should be wrapped with a workbench.
    *
-   * A timegroup should be wrapped with a workbench if it is the root-most timegroup
-   * and EF_INTERACTIVE is true.
+   * A timegroup should be wrapped with a workbench if:
+   * - It's being rendered (EF_RENDERING), OR
+   * - It's in interactive mode (EF_INTERACTIVE) with the dev workbench flag set
    *
-   * If the timegroup is already wrappedin a context provider like ef-preview,
+   * If the timegroup is already wrapped in a context provider like ef-preview,
    * it should NOT be wrapped in a workbench.
    */
   shouldWrapWithWorkbench() {
+    const isRendering = EF_RENDERING?.() === true;
+
+    // During rendering, always wrap with workbench (needed by EF_FRAMEGEN)
+    if (isRendering) {
+      return (
+        this.closest("ef-timegroup") === this &&
+        this.closest("ef-preview") === null &&
+        this.closest("ef-workbench") === null &&
+        this.closest("test-context") === null
+      );
+    }
+
+    // During interactive mode, respect the dev workbench flag
+    if (!globalThis.EF_DEV_WORKBENCH) {
+      return false;
+    }
+
     return (
       EF_INTERACTIVE &&
       this.closest("ef-timegroup") === this &&
@@ -542,138 +634,22 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     );
   }
 
-  async #addAudioToContext(
-    audioContext: AudioContext | OfflineAudioContext,
-    fromMs: number,
-    toMs: number,
-  ) {
-    await this.waitForMediaDurations();
-
-    // Create AbortController for audio fetch operations
-    const abortController = new AbortController();
-
-    await Promise.all(
-      deepGetMediaElements(this).map(async (mediaElement) => {
-        // Skip muted elements entirely - no audio fetching or processing needed
-        if (mediaElement.mute) {
-          return;
-        }
-
-        const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-        const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-        const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-        if (!mediaOverlaps) {
-          return;
-        }
-
-        // Convert from root timegroup timeline to media element's local timeline
-        const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
-        const mediaLocalToMs = Math.min(
-          mediaElement.endTimeMs - mediaElement.startTimeMs,
-          toMs - mediaElement.startTimeMs,
-        );
-
-        // Skip if no valid local time range
-        if (mediaLocalFromMs >= mediaLocalToMs) {
-          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;
-
-        let audio: AudioSpan | undefined;
-        try {
-          audio = await mediaElement.fetchAudioSpanningTime(
-            mediaSourceFromMs,
-            mediaSourceToMs,
-            abortController.signal,
-          );
-        } catch (error) {
-          if (
-            error instanceof Error &&
-            error.message.includes("No audio track available")
-          ) {
-            return;
-          }
-          throw error;
-        }
-
-        if (!audio) {
-          return;
-        }
-
-        const bufferSource = audioContext.createBufferSource();
-        bufferSource.buffer = await audioContext.decodeAudioData(
-          await audio.blob.arrayBuffer(),
-        );
-        bufferSource.connect(audioContext.destination);
-
-        // Calculate timing for placing this audio in the output context
-        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-
-        // Calculate offset within the fetched audio buffer
-        // 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 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 (actualDurationMs <= 0) {
-          return; // Skip if no valid audio duration
-        }
-
-        bufferSource.start(
-          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)
-        );
-      }),
-    );
+  /**
+   * Returns media elements for playback audio rendering
+   * For standalone media, returns [this]; for timegroups, returns all descendants
+   * Used by PlaybackController for audio-driven playback
+   */
+  getMediaElements(): EFMedia[] {
+    return deepGetMediaElements(this);
   }
 
-  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`,
-      );
-    }
-
-    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);
-    const renderedBuffer = await audioContext.startRendering();
-
-    return renderedBuffer;
+  /**
+   * Render audio buffer for playback
+   * Called by PlaybackController during live playback
+   * Delegates to shared renderTemporalAudio utility for consistent behavior
+   */
+  async renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer> {
+    return renderTemporalAudio(this, fromMs, toMs);
   }
 
   /**
@@ -717,7 +693,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
     await Promise.all(loaderTasks);
 
-    efElements.map((el) => {
+    efElements.forEach((el) => {
       if ("productionSrc" in el && el.productionSrc instanceof Function) {
         el.setAttribute("src", el.productionSrc());
       }
@@ -728,10 +704,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);
+          },
+        );
       }
     },
   });
@@ -741,22 +728,41 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     args: () => [this.#pendingSeekTime ?? this.#currentTime] as const,
     onComplete: () => {},
     task: async ([targetTime]) => {
+      if (this.playbackController) {
+        await this.playbackController.seekTask.taskComplete;
+        return this.currentTime;
+      }
+
       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.#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;
     },
   });
 }