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

package/src/elements/EFMedia/BufferedSeekingInput.ts

@@ -8,6 +8,7 @@ import {
   MP4,
   VideoSampleSink,
 } from "mediabunny";
+import { withSpan } from "../../otel/tracingHelpers.js";
 import { type MediaSample, SampleBuffer } from "../SampleBuffer";
 import { roundToMilliseconds } from "./shared/PrecisionUtils";
 
@@ -177,26 +178,39 @@ export class BufferedSeekingInput {
   }
 
   async seek(trackId: number, timeMs: number) {
-    // Apply timeline offset to map user timeline to media timeline
-    const mediaTimeMs = timeMs + this.startTimeOffsetMs;
-
-    // Round using consistent precision handling
-    const roundedMediaTimeMs = roundToMilliseconds(mediaTimeMs);
-
-    // Serialize seek operations per track (but don't block iterator creation)
-    const existingSeek = this.trackSeekPromises.get(trackId);
-    if (existingSeek) {
-      await existingSeek;
-    }
+    return withSpan(
+      "bufferedInput.seek",
+      {
+        trackId,
+        timeMs,
+        startTimeOffsetMs: this.startTimeOffsetMs,
+      },
+      undefined,
+      async (span) => {
+        // Apply timeline offset to map user timeline to media timeline
+        const mediaTimeMs = timeMs + this.startTimeOffsetMs;
+
+        // Round using consistent precision handling
+        const roundedMediaTimeMs = roundToMilliseconds(mediaTimeMs);
+        span.setAttribute("roundedMediaTimeMs", roundedMediaTimeMs);
+
+        // Serialize seek operations per track (but don't block iterator creation)
+        const existingSeek = this.trackSeekPromises.get(trackId);
+        if (existingSeek) {
+          span.setAttribute("waitedForExistingSeek", true);
+          await existingSeek;
+        }
 
-    const seekPromise = this.seekSafe(trackId, roundedMediaTimeMs);
-    this.trackSeekPromises.set(trackId, seekPromise);
+        const seekPromise = this.seekSafe(trackId, roundedMediaTimeMs);
+        this.trackSeekPromises.set(trackId, seekPromise);
 
-    try {
-      return await seekPromise;
-    } finally {
-      this.trackSeekPromises.delete(trackId);
-    }
+        try {
+          return await seekPromise;
+        } finally {
+          this.trackSeekPromises.delete(trackId);
+        }
+      },
+    );
   }
 
   private async resetIterator(track: InputTrack) {
@@ -224,90 +238,193 @@ export class BufferedSeekingInput {
   #seekLock?: PromiseWithResolvers<void>;
 
   private async seekSafe(trackId: number, timeMs: number) {
-    if (this.#seekLock) {
-      await this.#seekLock.promise;
-    }
-    const seekLock = Promise.withResolvers<void>();
-    this.#seekLock = seekLock;
-
-    try {
-      const track = await this.getTrack(trackId);
-      const trackBuffer = this.getTrackBuffer(track);
-
-      const roundedTimeMs = roundToMilliseconds(timeMs);
-      const firstTimestampMs = roundToMilliseconds(
-        (await track.getFirstTimestamp()) * 1000,
-      );
-
-      if (roundedTimeMs < firstTimestampMs) {
-        console.error("Seeking outside bounds of input", {
-          roundedTimeMs,
-          firstTimestampMs,
-        });
-        throw new NoSample(
-          `Seeking outside bounds of input ${roundedTimeMs} < ${firstTimestampMs}`,
-        );
-      }
-
-      // Check if we need to reset iterator for seeks outside current buffer range
-      const bufferContents = trackBuffer.getContents();
-      if (bufferContents.length > 0) {
-        const bufferStartMs = roundToMilliseconds(
-          trackBuffer.firstTimestamp * 1000,
-        );
-
-        if (roundedTimeMs < bufferStartMs) {
-          await this.resetIterator(track);
-        }
-      }
-
-      const alreadyInBuffer = trackBuffer.find(timeMs);
-      if (alreadyInBuffer) return alreadyInBuffer;
-
-      const iterator = this.getTrackIterator(track);
-      while (true) {
-        const { done, value: decodedSample } = await iterator.next();
-
-        if (decodedSample) {
-          trackBuffer.push(decodedSample);
-        }
-        const foundSample = trackBuffer.find(roundedTimeMs);
-        if (foundSample) {
-          return foundSample;
-        }
-        if (done) {
-          break;
+    return withSpan(
+      "bufferedInput.seekSafe",
+      {
+        trackId,
+        timeMs,
+      },
+      undefined,
+      async (span) => {
+        if (this.#seekLock) {
+          span.setAttribute("waitedForSeekLock", true);
+          await this.#seekLock.promise;
         }
-      }
-
-      // Check if we're seeking to the exact end of the track (legitimate use case)
-      const finalBufferContents = trackBuffer.getContents();
-      if (finalBufferContents.length > 0) {
-        const lastSample = finalBufferContents[finalBufferContents.length - 1];
-        const lastSampleEndMs = roundToMilliseconds(
-          ((lastSample?.timestamp || 0) + (lastSample?.duration || 0)) * 1000,
-        );
-
-        // Only return last sample if seeking to exactly the track duration
-        // (end of video) AND we have the final segment loaded
-        const trackDurationMs = (await track.computeDuration()) * 1000;
-        const isSeekingToTrackEnd =
-          roundToMilliseconds(timeMs) === roundToMilliseconds(trackDurationMs);
-        const isAtEndOfTrack = roundToMilliseconds(timeMs) >= lastSampleEndMs;
-
-        if (isSeekingToTrackEnd && isAtEndOfTrack) {
-          return lastSample;
+        const seekLock = Promise.withResolvers<void>();
+        this.#seekLock = seekLock;
+
+        try {
+          const track = await this.getTrack(trackId);
+          span.setAttribute("trackType", track.type);
+
+          const trackBuffer = this.getTrackBuffer(track);
+
+          const roundedTimeMs = roundToMilliseconds(timeMs);
+          const firstTimestampMs = roundToMilliseconds(
+            (await track.getFirstTimestamp()) * 1000,
+          );
+          span.setAttribute("firstTimestampMs", firstTimestampMs);
+
+          if (roundedTimeMs < firstTimestampMs) {
+            console.error("Seeking outside bounds of input", {
+              roundedTimeMs,
+              firstTimestampMs,
+            });
+            throw new NoSample(
+              `Seeking outside bounds of input ${roundedTimeMs} < ${firstTimestampMs}`,
+            );
+          }
+
+          // Check if we need to reset iterator for seeks outside current buffer range
+          const bufferContents = trackBuffer.getContents();
+          span.setAttribute("bufferContentsLength", bufferContents.length);
+
+          if (bufferContents.length > 0) {
+            const bufferStartMs = roundToMilliseconds(
+              trackBuffer.firstTimestamp * 1000,
+            );
+            span.setAttribute("bufferStartMs", bufferStartMs);
+
+            if (roundedTimeMs < bufferStartMs) {
+              span.setAttribute("resetIterator", true);
+              await this.resetIterator(track);
+            }
+          }
+
+          const alreadyInBuffer = trackBuffer.find(timeMs);
+          if (alreadyInBuffer) {
+            span.setAttribute("foundInBuffer", true);
+            span.setAttribute("bufferSize", trackBuffer.length);
+            const contents = trackBuffer.getContents();
+            if (contents.length > 0) {
+              span.setAttribute(
+                "bufferTimestamps",
+                contents
+                  .map((s) => Math.round((s.timestamp || 0) * 1000))
+                  .slice(0, 10)
+                  .join(","),
+              );
+            }
+            return alreadyInBuffer;
+          }
+
+          // Buffer miss - record buffer state
+          span.setAttribute("foundInBuffer", false);
+          span.setAttribute("bufferSize", trackBuffer.length);
+          span.setAttribute("requestedTimeMs", Math.round(timeMs));
+
+          const contents = trackBuffer.getContents();
+          if (contents.length > 0) {
+            const firstSample = contents[0];
+            const lastSample = contents[contents.length - 1];
+            if (firstSample && lastSample) {
+              const bufferStartMs = Math.round(
+                (firstSample.timestamp || 0) * 1000,
+              );
+              const bufferEndMs = Math.round(
+                ((lastSample.timestamp || 0) + (lastSample.duration || 0)) *
+                  1000,
+              );
+              span.setAttribute("bufferStartMs", bufferStartMs);
+              span.setAttribute("bufferEndMs", bufferEndMs);
+              span.setAttribute(
+                "bufferRangeMs",
+                `${bufferStartMs}-${bufferEndMs}`,
+              );
+            }
+          }
+
+          const iterator = this.getTrackIterator(track);
+          let iterationCount = 0;
+          const decodeStart = performance.now();
+
+          while (true) {
+            iterationCount++;
+            const iterStart = performance.now();
+            const { done, value: decodedSample } = await iterator.next();
+            const iterEnd = performance.now();
+
+            // Record individual iteration timing for first 5 iterations
+            if (iterationCount <= 5) {
+              span.setAttribute(
+                `iter${iterationCount}Ms`,
+                Math.round((iterEnd - iterStart) * 100) / 100,
+              );
+            }
+
+            if (decodedSample) {
+              trackBuffer.push(decodedSample);
+              if (iterationCount <= 5) {
+                span.setAttribute(
+                  `iter${iterationCount}Timestamp`,
+                  Math.round((decodedSample.timestamp || 0) * 1000),
+                );
+              }
+            }
+
+            const foundSample = trackBuffer.find(roundedTimeMs);
+            if (foundSample) {
+              const decodeEnd = performance.now();
+              span.setAttribute("iterationCount", iterationCount);
+              span.setAttribute(
+                "decodeMs",
+                Math.round((decodeEnd - decodeStart) * 100) / 100,
+              );
+              span.setAttribute(
+                "avgIterMs",
+                Math.round(((decodeEnd - decodeStart) / iterationCount) * 100) /
+                  100,
+              );
+              span.setAttribute("foundSample", true);
+              span.setAttribute(
+                "foundTimestamp",
+                Math.round((foundSample.timestamp || 0) * 1000),
+              );
+              return foundSample;
+            }
+            if (done) {
+              break;
+            }
+          }
+
+          span.setAttribute("iterationCount", iterationCount);
+          span.setAttribute("reachedEnd", true);
+
+          // Check if we're seeking to the exact end of the track (legitimate use case)
+          const finalBufferContents = trackBuffer.getContents();
+          if (finalBufferContents.length > 0) {
+            const lastSample =
+              finalBufferContents[finalBufferContents.length - 1];
+            const lastSampleEndMs = roundToMilliseconds(
+              ((lastSample?.timestamp || 0) + (lastSample?.duration || 0)) *
+                1000,
+            );
+
+            // Only return last sample if seeking to exactly the track duration
+            // (end of video) AND we have the final segment loaded
+            const trackDurationMs = (await track.computeDuration()) * 1000;
+            const isSeekingToTrackEnd =
+              roundToMilliseconds(timeMs) ===
+              roundToMilliseconds(trackDurationMs);
+            const isAtEndOfTrack =
+              roundToMilliseconds(timeMs) >= lastSampleEndMs;
+
+            if (isSeekingToTrackEnd && isAtEndOfTrack) {
+              span.setAttribute("returnedLastSample", true);
+              return lastSample;
+            }
+          }
+
+          // For all other cases (seeking within track but outside buffer range), throw error
+          // The caller should ensure the correct segment is loaded before seeking
+          throw new NoSample(
+            `Sample not found for time ${timeMs} in ${track.type} track ${trackId}`,
+          );
+        } finally {
+          this.#seekLock = undefined;
+          seekLock.resolve();
         }
-      }
-
-      // For all other cases (seeking within track but outside buffer range), throw error
-      // The caller should ensure the correct segment is loaded before seeking
-      throw new NoSample(
-        `Sample not found for time ${timeMs} in ${track.type} track ${trackId}`,
-      );
-    } finally {
-      this.#seekLock = undefined;
-      seekLock.resolve();
-    }
+      },
+    );
   }
 }

package/src/elements/EFMedia/JitMediaEngine.browsertest.ts

@@ -55,10 +55,13 @@ const test = baseTest.extend<{
     const apiHost = `${window.location.protocol}//${window.location.host}`;
     configuration.setAttribute("api-host", apiHost);
     configuration.apiHost = apiHost;
+    configuration.signingURL = ""; // Disable URL signing for tests
     const host = document.createElement("ef-video");
     configuration.appendChild(host);
     host.src = "http://web:3000/head-moov-480p.mp4";
+    document.body.appendChild(configuration);
     await use(host);
+    configuration.remove();
   },
   urlGenerator: async ({}, use: any) => {
     // UrlGenerator points to integrated proxy server (same host/port as test runner)

package/src/elements/EFMedia/audioTasks/makeAudioInputTask.ts

@@ -19,6 +19,8 @@ export const makeAudioInputTask = (host: EFMedia): InputTask => {
     onComplete: (_value) => {},
     task: async (_, { signal }) => {
       const mediaEngine = await host.mediaEngineTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       const audioRendition = mediaEngine?.audioRendition;
 
       // Return undefined if no audio rendition available (video-only asset)
@@ -27,9 +29,10 @@ export const makeAudioInputTask = (host: EFMedia): InputTask => {
       }
 
       const initSegment = await host.audioInitSegmentFetchTask.taskComplete;
-      signal.throwIfAborted();
+      if (signal.aborted) return undefined;
+
       const segment = await host.audioSegmentFetchTask.taskComplete;
-      signal.throwIfAborted();
+      if (signal.aborted) return undefined;
 
       if (!initSegment || !segment) {
         return undefined;
@@ -38,7 +41,8 @@ export const makeAudioInputTask = (host: EFMedia): InputTask => {
       const startTimeOffsetMs = audioRendition.startTimeOffsetMs;
 
       const arrayBuffer = await new Blob([initSegment, segment]).arrayBuffer();
-      signal.throwIfAborted();
+      if (signal.aborted) return undefined;
+
       return new BufferedSeekingInput(arrayBuffer, {
         videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
         audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,

package/src/elements/EFMedia/audioTasks/makeAudioSeekTask.chunkboundary.regression.browsertest.ts

@@ -145,7 +145,7 @@ describe("Audio Seek Task - Chunk Boundary Regression Test", () => {
 
     // Now trigger the localStorage restoration that happens in waitForMediaDurations().then()
     // This will load currentTime = 4.0 from localStorage, jumping from 0ms to 4000ms
-    const loadedTime = timegroup.maybeLoadTimeFromLocalStorage();
+    const loadedTime = timegroup.loadTimeFromLocalStorage();
     if (loadedTime !== undefined) {
       timegroup.currentTime = loadedTime;
     }

package/src/elements/EFMedia/videoTasks/MainVideoInputCache.ts

@@ -0,0 +1,76 @@
+import type { BufferedSeekingInput } from "../BufferedSeekingInput";
+
+/**
+ * Cache for main video BufferedSeekingInput instances
+ * Main video segments are typically 2s long, so we can reuse the same input
+ * for multiple frames within that segment (e.g., 60 frames at 30fps)
+ */
+export class MainVideoInputCache {
+  private cache = new Map<string, BufferedSeekingInput>();
+  private maxCacheSize = 10; // Keep last 10 main inputs (covers 20 seconds at 2s/segment)
+
+  /**
+   * Create a cache key that uniquely identifies a segment
+   */
+  private getCacheKey(
+    src: string,
+    segmentId: number,
+    renditionId: string | undefined,
+  ): string {
+    return `${src}:${renditionId || "default"}:${segmentId}`;
+  }
+
+  /**
+   * Get or create BufferedSeekingInput for a main video segment
+   */
+  async getOrCreateInput(
+    src: string,
+    segmentId: number,
+    renditionId: string | undefined,
+    createInputFn: () => Promise<BufferedSeekingInput | undefined>,
+  ): Promise<BufferedSeekingInput | undefined> {
+    const cacheKey = this.getCacheKey(src, segmentId, renditionId);
+
+    // Check if we already have this segment cached
+    const cached = this.cache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    // Create new input
+    const input = await createInputFn();
+    if (!input) {
+      return undefined;
+    }
+
+    // Add to cache and maintain size limit
+    this.cache.set(cacheKey, input);
+
+    // Evict oldest entries if cache is too large (LRU-like behavior)
+    if (this.cache.size > this.maxCacheSize) {
+      const oldestKey = this.cache.keys().next().value;
+      if (oldestKey !== undefined) {
+        this.cache.delete(oldestKey);
+      }
+    }
+
+    return input;
+  }
+
+  /**
+   * Clear the entire cache (called when video changes)
+   */
+  clear() {
+    this.cache.clear();
+  }
+
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      cacheKeys: Array.from(this.cache.keys()),
+    };
+  }
+}

package/src/elements/EFMedia/videoTasks/makeScrubVideoInputTask.ts

@@ -8,7 +8,7 @@ import type { InputTask } from "../shared/MediaTaskUtils";
 export const makeScrubVideoInputTask = (host: EFVideo): InputTask => {
   return new Task<
     readonly [ArrayBuffer | undefined, ArrayBuffer | undefined],
-    BufferedSeekingInput
+    BufferedSeekingInput | undefined
   >(host, {
     args: () =>
       [
@@ -19,27 +19,33 @@ export const makeScrubVideoInputTask = (host: EFVideo): InputTask => {
       console.error("scrubVideoInputTask error", error);
     },
     onComplete: (_value) => {},
-    task: async () => {
+    task: async (_, { signal }) => {
       const initSegment =
         await host.scrubVideoInitSegmentFetchTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       const segment = await host.scrubVideoSegmentFetchTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       if (!initSegment || !segment) {
         throw new Error("Scrub init segment or segment is not available");
       }
 
       // Get startTimeOffsetMs from the scrub rendition if available
       const mediaEngine = await host.mediaEngineTask.taskComplete;
+      if (signal.aborted) return undefined;
+
       const scrubRendition = mediaEngine.getScrubVideoRendition();
       const startTimeOffsetMs = scrubRendition?.startTimeOffsetMs;
 
-      const input = new BufferedSeekingInput(
-        await new Blob([initSegment, segment]).arrayBuffer(),
-        {
-          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-          startTimeOffsetMs,
-        },
-      );
+      const arrayBuffer = await new Blob([initSegment, segment]).arrayBuffer();
+      if (signal.aborted) return undefined;
+
+      const input = new BufferedSeekingInput(arrayBuffer, {
+        videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+        audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+        startTimeOffsetMs,
+      });
       return input;
     },
   });

package/src/elements/EFMedia/videoTasks/makeScrubVideoSeekTask.ts

@@ -94,13 +94,19 @@ export const makeScrubVideoSeekTask = (host: EFVideo): ScrubVideoSeekTask => {
           return undefined;
         }
 
+        if (signal.aborted) {
+          return undefined;
+        }
+
         // Get video track and seek to precise time within the 30s scrub segment
         const videoTrack = await scrubInput.getFirstVideoTrack();
         if (!videoTrack) {
           return undefined;
         }
 
-        signal.throwIfAborted();
+        if (signal.aborted) {
+          return undefined;
+        }
 
         const sample = (await scrubInput.seek(
           videoTrack.id,