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

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

@@ -1,9 +1,12 @@
 import { Task } from "@lit/task";
 import type { VideoSample } from "mediabunny";
-import { EF_RENDERING } from "../../../EF_RENDERING";
+import { withSpan } from "../../../otel/tracingHelpers.js";
 import type { VideoRendition } from "../../../transcoding/types";
+import { EFMedia } from "../../EFMedia.js";
 import type { EFVideo } from "../../EFVideo";
+import { BufferedSeekingInput } from "../BufferedSeekingInput.js";
 import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+import { MainVideoInputCache } from "./MainVideoInputCache";
 import { ScrubInputCache } from "./ScrubInputCache";
 
 type UnifiedVideoSeekTask = Task<readonly [number], VideoSample | undefined>;
@@ -11,6 +14,9 @@ type UnifiedVideoSeekTask = Task<readonly [number], VideoSample | undefined>;
 // Shared cache for scrub inputs
 const scrubInputCache = new ScrubInputCache();
 
+// Shared cache for main video inputs
+const mainVideoInputCache = new MainVideoInputCache();
+
 export const makeUnifiedVideoSeekTask = (
   host: EFVideo,
 ): UnifiedVideoSeekTask => {
@@ -23,17 +29,7 @@ export const makeUnifiedVideoSeekTask = (
     onComplete: (_value) => {},
     task: async ([desiredSeekTimeMs], { signal }) => {
       const mediaEngine = await getLatestMediaEngine(host, signal);
-      if (!mediaEngine) return undefined;
-
-      // In rendering mode, skip all the scrub logic and go straight to main
-      if (EF_RENDERING()) {
-        return await getMainVideoSample(
-          host,
-          mediaEngine,
-          desiredSeekTimeMs,
-          signal,
-        );
-      }
+      if (!mediaEngine || signal.aborted) return undefined;
 
       // FIRST: Check if main quality content is already cached
       const mainRendition = mediaEngine.videoRendition;
@@ -46,13 +42,18 @@ export const makeUnifiedVideoSeekTask = (
           mainSegmentId !== undefined &&
           mediaEngine.isSegmentCached(mainSegmentId, mainRendition)
         ) {
-          // Main content is cached! Use it directly.
-          return await getMainVideoSample(
+          const result = await getMainVideoSample(
             host,
             mediaEngine,
             desiredSeekTimeMs,
             signal,
           );
+
+          if (signal.aborted) {
+            return undefined;
+          }
+
+          return result;
         }
       }
 
@@ -62,7 +63,12 @@ export const makeUnifiedVideoSeekTask = (
         desiredSeekTimeMs,
         signal,
       );
+
       if (scrubSample || signal.aborted) {
+        if (signal.aborted) {
+          return undefined;
+        }
+
         // If scrub succeeded, start background main quality upgrade (non-blocking)
         if (scrubSample) {
           startMainQualityUpgrade(
@@ -79,12 +85,18 @@ export const makeUnifiedVideoSeekTask = (
       }
 
       // THIRD: Neither are cached, fetch main video path as final fallback
-      return await getMainVideoSample(
+      const result = await getMainVideoSample(
         host,
         mediaEngine,
         desiredSeekTimeMs,
         signal,
       );
+
+      if (signal.aborted) {
+        return undefined;
+      }
+
+      return result;
     },
   });
 };
@@ -97,82 +109,124 @@ async function tryGetScrubSample(
   desiredSeekTimeMs: number,
   signal: AbortSignal,
 ): Promise<VideoSample | undefined> {
-  try {
-    // Get scrub rendition
-    let scrubRendition: VideoRendition | undefined;
-
-    // Check if media engine has a getScrubVideoRendition method (AssetMediaEngine, etc.)
-    if (typeof mediaEngine.getScrubVideoRendition === "function") {
-      scrubRendition = mediaEngine.getScrubVideoRendition();
-    } else if ("data" in mediaEngine && mediaEngine.data?.videoRenditions) {
-      // Fallback to data structure for other engines
-      scrubRendition = mediaEngine.data.videoRenditions.find(
-        (r: any) => r.id === "scrub",
-      );
-    }
+  return withSpan(
+    "video.tryGetScrubSample",
+    {
+      desiredSeekTimeMs,
+      src: mediaEngine.src || "unknown",
+    },
+    undefined,
+    async (span) => {
+      try {
+        // Get scrub rendition
+        let scrubRendition: VideoRendition | undefined;
+
+        // Check if media engine has a getScrubVideoRendition method (AssetMediaEngine, etc.)
+        if (typeof mediaEngine.getScrubVideoRendition === "function") {
+          scrubRendition = mediaEngine.getScrubVideoRendition();
+        } else if ("data" in mediaEngine && mediaEngine.data?.videoRenditions) {
+          // Fallback to data structure for other engines
+          scrubRendition = mediaEngine.data.videoRenditions.find(
+            (r: any) => r.id === "scrub",
+          );
+        }
 
-    if (!scrubRendition) return undefined;
+        if (!scrubRendition) {
+          span.setAttribute("result", "no-scrub-rendition");
+          return undefined;
+        }
 
-    const scrubRenditionWithSrc = {
-      ...scrubRendition,
-      src: mediaEngine.src,
-    };
+        const scrubRenditionWithSrc = {
+          ...scrubRendition,
+          src: mediaEngine.src,
+        };
 
-    // Check if scrub segment is cached
-    const segmentId = mediaEngine.computeSegmentId(
-      desiredSeekTimeMs,
-      scrubRenditionWithSrc,
-    );
-    if (segmentId === undefined) return undefined;
-
-    const isCached = mediaEngine.isSegmentCached(
-      segmentId,
-      scrubRenditionWithSrc,
-    );
-    if (!isCached) return undefined; // Not cached - let main video handle it
-
-    // Get cached scrub input and seek within it
-    const scrubInput = await scrubInputCache.getOrCreateInput(
-      segmentId,
-      async () => {
-        const [initSegment, mediaSegment] = await Promise.all([
-          mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal),
-          mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc),
-        ]);
-
-        if (!initSegment || !mediaSegment || signal.aborted) return undefined;
-
-        const { BufferedSeekingInput } = await import(
-          "../BufferedSeekingInput.js"
+        // Check if scrub segment is cached
+        const segmentId = mediaEngine.computeSegmentId(
+          desiredSeekTimeMs,
+          scrubRenditionWithSrc,
         );
-        const { EFMedia } = await import("../../EFMedia.js");
-
-        return new BufferedSeekingInput(
-          await new Blob([initSegment, mediaSegment]).arrayBuffer(),
-          {
-            videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-            audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-            startTimeOffsetMs: scrubRendition.startTimeOffsetMs,
+        if (segmentId === undefined) {
+          span.setAttribute("result", "no-segment-id");
+          return undefined;
+        }
+
+        const isCached = mediaEngine.isSegmentCached(
+          segmentId,
+          scrubRenditionWithSrc,
+        );
+        span.setAttribute("isCached", isCached);
+        if (!isCached) {
+          span.setAttribute("result", "not-cached");
+          return undefined; // Not cached - let main video handle it
+        }
+
+        // Get cached scrub input and seek within it
+        const scrubInput = await scrubInputCache.getOrCreateInput(
+          segmentId,
+          async () => {
+            const [initSegment, mediaSegment] = await Promise.all([
+              mediaEngine.fetchInitSegment(scrubRenditionWithSrc, signal),
+              mediaEngine.fetchMediaSegment(segmentId, scrubRenditionWithSrc),
+            ]);
+
+            if (!initSegment || !mediaSegment || signal.aborted)
+              return undefined;
+
+            const { BufferedSeekingInput } = await import(
+              "../BufferedSeekingInput.js"
+            );
+            const { EFMedia } = await import("../../EFMedia.js");
+
+            return new BufferedSeekingInput(
+              await new Blob([initSegment, mediaSegment]).arrayBuffer(),
+              {
+                videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+                audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+                startTimeOffsetMs: scrubRendition.startTimeOffsetMs,
+              },
+            );
           },
         );
-      },
-    );
 
-    if (!scrubInput) return undefined;
+        if (!scrubInput) {
+          span.setAttribute("result", "no-scrub-input");
+          return undefined;
+        }
 
-    const videoTrack = await scrubInput.getFirstVideoTrack();
-    if (!videoTrack) return undefined;
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted-after-scrub-input");
+          return undefined;
+        }
 
-    const sample = (await scrubInput.seek(
-      videoTrack.id,
-      desiredSeekTimeMs,
-    )) as unknown as VideoSample | undefined;
+        const videoTrack = await scrubInput.getFirstVideoTrack();
+        if (!videoTrack) {
+          span.setAttribute("result", "no-video-track");
+          return undefined;
+        }
 
-    return sample;
-  } catch (_error) {
-    if (signal.aborted) return undefined;
-    return undefined; // Scrub failed - let main video handle it
-  }
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted-after-scrub-track");
+          return undefined;
+        }
+
+        const sample = (await scrubInput.seek(
+          videoTrack.id,
+          desiredSeekTimeMs,
+        )) as unknown as VideoSample | undefined;
+
+        span.setAttribute("result", sample ? "success" : "no-sample");
+        return sample;
+      } catch (_error) {
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted");
+          return undefined;
+        }
+        span.setAttribute("result", "error");
+        return undefined; // Scrub failed - let main video handle it
+      }
+    },
+  );
 }
 
 /**
@@ -184,58 +238,101 @@ async function getMainVideoSample(
   desiredSeekTimeMs: number,
   signal: AbortSignal,
 ): Promise<VideoSample | undefined> {
-  try {
-    // Use existing main video task chain
-    const segmentId = mediaEngine.computeSegmentId(
+  return withSpan(
+    "video.getMainVideoSample",
+    {
       desiredSeekTimeMs,
-      mediaEngine.getVideoRendition(),
-    );
-    if (segmentId === undefined) return undefined;
-
-    // Fetch main video segment
-    const [initSegment, mediaSegment] = await Promise.all([
-      mediaEngine.fetchInitSegment(mediaEngine.getVideoRendition(), signal),
-      mediaEngine.fetchMediaSegment(
-        segmentId,
-        mediaEngine.getVideoRendition(),
-        signal,
-      ),
-    ]);
-
-    if (!initSegment || !mediaSegment) return undefined;
-    signal.throwIfAborted();
+      src: mediaEngine.src || "unknown",
+    },
+    undefined,
+    async (span) => {
+      try {
+        // Use existing main video task chain
+        const videoRendition = mediaEngine.getVideoRendition();
+        if (!videoRendition) {
+          throw new Error(
+            "Video rendition unavailable after checking videoRendition exists",
+          );
+        }
 
-    // Create main video input
-    const { BufferedSeekingInput } = await import("../BufferedSeekingInput.js");
-    const { EFMedia } = await import("../../EFMedia.js");
+        const segmentId = mediaEngine.computeSegmentId(
+          desiredSeekTimeMs,
+          videoRendition,
+        );
+        if (segmentId === undefined) {
+          span.setAttribute("result", "no-segment-id");
+          return undefined;
+        }
 
-    const videoRendition = mediaEngine.videoRendition;
-    const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
+        span.setAttribute("segmentId", segmentId);
+
+        // Get cached main video input or create new one
+        const mainInput = await mainVideoInputCache.getOrCreateInput(
+          mediaEngine.src,
+          segmentId,
+          videoRendition.id,
+          async () => {
+            // Fetch main video segment (will be cached at mediaEngine level)
+            const [initSegment, mediaSegment] = await Promise.all([
+              mediaEngine.fetchInitSegment(videoRendition, signal),
+              mediaEngine.fetchMediaSegment(segmentId, videoRendition, signal),
+            ]);
+
+            if (!initSegment || !mediaSegment) {
+              return undefined;
+            }
+            signal.throwIfAborted();
+
+            const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
+
+            return new BufferedSeekingInput(
+              await new Blob([initSegment, mediaSegment]).arrayBuffer(),
+              {
+                videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+                audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+                startTimeOffsetMs,
+              },
+            );
+          },
+        );
 
-    const mainInput = new BufferedSeekingInput(
-      await new Blob([initSegment, mediaSegment]).arrayBuffer(),
-      {
-        videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
-        audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
-        startTimeOffsetMs,
-      },
-    );
+        if (!mainInput) {
+          span.setAttribute("result", "no-segments");
+          return undefined;
+        }
 
-    const videoTrack = await mainInput.getFirstVideoTrack();
-    if (!videoTrack) return undefined;
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted-after-input");
+          return undefined;
+        }
 
-    signal.throwIfAborted();
+        const videoTrack = await mainInput.getFirstVideoTrack();
+        if (!videoTrack) {
+          span.setAttribute("result", "no-video-track");
+          return undefined;
+        }
 
-    const sample = (await mainInput.seek(
-      videoTrack.id,
-      desiredSeekTimeMs,
-    )) as unknown as VideoSample | undefined;
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted-after-track");
+          return undefined;
+        }
 
-    return sample;
-  } catch (error) {
-    if (signal.aborted) return undefined;
-    throw error;
-  }
+        const sample = (await mainInput.seek(
+          videoTrack.id,
+          desiredSeekTimeMs,
+        )) as unknown as VideoSample | undefined;
+
+        span.setAttribute("result", sample ? "success" : "no-sample");
+        return sample;
+      } catch (error) {
+        if (signal.aborted) {
+          span.setAttribute("result", "aborted");
+          return undefined;
+        }
+        throw error;
+      }
+    },
+  );
 }
 
 /**

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

@@ -9,10 +9,7 @@ import {
   type MediaBufferState,
   manageMediaBuffer,
 } from "../shared/BufferUtils";
-import {
-  getLatestMediaEngine,
-  getVideoRendition,
-} from "../tasks/makeMediaEngineTask";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
 
 /**
  * Configuration for video buffering - extends the generic interface
@@ -90,7 +87,7 @@ export const makeVideoBufferTask = (host: EFVideo): VideoBufferTask => {
           getRendition: async () => {
             // Get real video rendition from media engine
             const mediaEngine = await getLatestMediaEngine(host, signal);
-            return getVideoRendition(mediaEngine);
+            return mediaEngine.getVideoRendition();
           },
           logError: console.error,
         },

package/src/elements/EFMedia.ts

@@ -1,6 +1,7 @@
 import { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { withSpan } from "../otel/tracingHelpers.js";
 import type { AudioSpan } from "../transcoding/types/index.ts";
 import { UrlGenerator } from "../transcoding/utils/UrlGenerator.ts";
 import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.ts";
@@ -283,12 +284,27 @@ export class EFMedia extends EFTargetable(
   /**
    * Main integration method for EFTimegroup audio playback
    * Now powered by clean, testable utility functions
+   * Returns undefined if no audio rendition is available
    */
   async fetchAudioSpanningTime(
     fromMs: number,
     toMs: number,
     signal: AbortSignal = new AbortController().signal,
-  ): Promise<AudioSpan> {
-    return fetchAudioSpanningTime(this, fromMs, toMs, signal);
+  ): Promise<AudioSpan | undefined> {
+    return withSpan(
+      "media.fetchAudioSpanningTime",
+      {
+        elementId: this.id || "unknown",
+        tagName: this.tagName.toLowerCase(),
+        fromMs,
+        toMs,
+        durationMs: toMs - fromMs,
+        src: this.src || "none",
+      },
+      undefined,
+      async () => {
+        return fetchAudioSpanningTime(this, fromMs, toMs, signal);
+      },
+    );
   }
 }

package/src/elements/EFThumbnailStrip.media-engine.browsertest.ts

@@ -132,7 +132,8 @@ describe("MediaEngine Thumbnail Extraction", () => {
       // Get segment duration to ensure timestamps are in same segment
       const videoRendition =
         mediaEngine.getScrubVideoRendition() || mediaEngine.getVideoRendition();
-      const segmentDurationMs = videoRendition.segmentDurationMs || 2000;
+      expect(videoRendition).toBeDefined();
+      const segmentDurationMs = videoRendition!.segmentDurationMs || 2000;
 
       // Pick timestamps within the first segment - avoid edge cases near boundaries
       const timestamps = [

package/src/elements/EFTimegroup.browsertest.ts

@@ -616,23 +616,25 @@ describe("Dynamic content updates", () => {
       const frameTaskB = timegroup.querySelector("test-frame-task-b")!;
       const frameTaskC = timegroup.querySelector("test-frame-task-c")!;
 
-      // following the initial update, the first frame tasks have run once.
+      // Following the initial update, frame tasks may run during initialization
       await timegroup.updateComplete;
 
-      assert.equal(frameTaskA.frameTaskCount, 1);
+      // frameTaskB should never run (not visible at time 0ms in sequence)
       assert.equal(frameTaskB.frameTaskCount, 0);
-      assert.equal(frameTaskC.frameTaskCount, 1);
 
       // Then we run them manually.
       await timegroup.frameTask.run();
 
       // At timeline time 0ms:
-      // - frameTaskA (0-1000ms) should run
-      // - frameTaskB (1000-2000ms) should NOT run
-      // - frameTaskC (0-1000ms) should run (inherits root positioning)
-      assert.equal(frameTaskA.frameTaskCount, 2);
+      // - frameTaskA (0-1000ms) should have run (visible)
+      // - frameTaskB (1000-2000ms) should NOT run (not visible at time 0)
+      // - frameTaskC (0-1000ms) should have run (inherits root positioning, visible)
+
+      // Verify visible tasks have run at least once
+      assert.ok(frameTaskA.frameTaskCount > 0, "frameTaskA should have run");
+      assert.ok(frameTaskC.frameTaskCount > 0, "frameTaskC should have run");
+      // Verify non-visible task has never run
       assert.equal(frameTaskB.frameTaskCount, 0); // Not visible at time 0
-      assert.equal(frameTaskC.frameTaskCount, 2); // Nested in B but inherits root positioning
     });
   });