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

package/src/elements/EFMedia.ts

@@ -1,21 +1,25 @@
+import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { MP4File } from "@editframe/assets/MP4File.js";
 import { Task } from "@lit/task";
 import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import debug from "debug";
-import { LitElement, type PropertyValueMap, css } from "lit";
+import { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
 import type * as MP4Box from "mp4box";
-
-import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
-
-import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
-import { MP4File } from "@editframe/assets/MP4File.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { JitTranscodingClient } from "../JitTranscodingClient.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFTargetable } from "./TargetController.ts";
 import { updateAnimations } from "./updateAnimations.ts";
 
+// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts
+declare global {
+  var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+}
+
 const log = debug("ef:elements:EFMedia");
 
 const freqWeightsCache = new Map<number, Float32Array>();
@@ -84,312 +88,310 @@ export class EFMedia extends EFTargetable(
   @property({ type: Number })
   currentTimeMs = 0;
 
-  #assetId: string | null = null;
+  /**
+   * Media loading mode - determines how content is loaded and processed
+   * - "asset": Use existing asset-based loading (assetId or fragment-based URLs)
+   * - "jit-transcode": Use JIT transcoding for remote URLs
+   * - "auto": Automatically detect based on URL patterns (default)
+   */
+  private _mode: "asset" | "jit-transcode" | "auto" = "auto";
 
   /**
-   * The unique identifier for the media asset.
-   * This property can be set programmatically or via the "asset-id" attribute.
-   * @domAttribute "asset-id"
+   * Get the mode, prioritizing attribute values over property values
    */
-  @property({ type: String, attribute: "asset-id", reflect: true })
-  set assetId(value: string | null) {
-    this.#assetId = value;
+  get mode(): "asset" | "jit-transcode" | "auto" {
+    const attr = this.getAttribute("mode") as
+      | ("asset" | "jit-transcode" | "auto")
+      | null;
+    return attr || this._mode || "auto";
   }
 
-  get assetId() {
-    return this.#assetId || this.getAttribute("asset-id");
+  set mode(value: "asset" | "jit-transcode" | "auto") {
+    const oldValue = this.mode;
+    this._mode = value;
+    this.setAttribute("mode", value);
+    this.requestUpdate("mode", oldValue);
   }
 
-  fragmentIndexPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Initialize mode from attribute if present
+    const modeAttr = this.getAttribute("mode") as
+      | ("asset" | "jit-transcode" | "auto")
+      | null;
+    if (modeAttr && modeAttr !== this._mode) {
+      this._mode = modeAttr;
+      this.requestUpdate("mode");
     }
-    return `/@ef-track-fragment-index/${this.src ?? ""}`;
-  }
 
-  fragmentTrackPath(trackId: string) {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
+    // Manually sync attributes to properties for better control
+    const prefetchSegmentsAttr = this.getAttribute("prefetch-segments");
+    if (prefetchSegmentsAttr !== null) {
+      this.prefetchSegments = Number.parseInt(prefetchSegmentsAttr, 10) || 3;
     }
-    // trackId is only specified as a query  in the @ef-track url shape
-    // this is because that system doesn't have a full url matching system.
-    // This is an annoying incosistency that should be fixed.
-    return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
-  }
 
-  public trackFragmentIndexLoader = new Task(this, {
-    args: () => [this.fragmentIndexPath(), this.fetch] as const,
-    task: async ([fragmentIndexPath, fetch], { signal }) => {
-      try {
-        const response = await fetch(fragmentIndexPath, { signal });
+    const cacheSizeAttr = this.getAttribute("cache-size");
+    if (cacheSizeAttr !== null) {
+      this.cacheSize = Number.parseInt(cacheSizeAttr, 10) || 20;
+    }
 
-        return (await response.json()) as Record<number, TrackFragmentIndex>;
-      } catch (error) {
-        log("Failed to load track fragment index", error);
-        return undefined;
-      }
-    },
-    onComplete: () => {
-      this.requestUpdate("intrinsicDurationMs");
-      this.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("durationMs");
-    },
-  });
+    const enablePrefetchAttr = this.getAttribute("enable-prefetch");
+    if (enablePrefetchAttr !== null) {
+      this.enablePrefetch = enablePrefetchAttr === "true";
+    }
+  }
 
-  public initSegmentsLoader = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [this.trackFragmentIndexLoader.value, this.src, this.fetch] as const,
-    task: async ([fragmentIndex, _src, fetch], { signal }) => {
-      if (!fragmentIndex) {
-        return;
-      }
-      return await Promise.all(
-        Object.entries(fragmentIndex).map(async ([trackId, track]) => {
-          const start = track.initSegment.offset;
-          const end = track.initSegment.offset + track.initSegment.size;
-          const response = await fetch(this.fragmentTrackPath(trackId), {
-            signal,
-            headers: { Range: `bytes=${start}-${end - 1}` },
-          });
-          const buffer =
-            (await response.arrayBuffer()) as MP4Box.MP4ArrayBuffer;
-          buffer.fileStart = 0;
-          const mp4File = new MP4File();
-          mp4File.appendBuffer(buffer, true);
-          mp4File.flush();
-          await mp4File.readyPromise;
+  /**
+   * Configuration for JIT transcoding performance optimizations
+   */
+  @property({ type: Number, attribute: "prefetch-segments" })
+  prefetchSegments = 3;
 
-          return { trackId, buffer, mp4File };
-        }),
-      );
-    },
-  });
+  @property({ type: Number, attribute: "cache-size" })
+  cacheSize = 20;
 
-  get defaultVideoTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "video",
-    )?.track;
-  }
+  @property({ type: Boolean, attribute: "enable-prefetch" })
+  enablePrefetch = true;
 
-  get defaultAudioTrackId() {
-    return Object.values(this.trackFragmentIndexLoader.value ?? {}).find(
-      (track) => track.type === "audio",
-    )?.track;
-  }
+  /**
+   * Loading states for JIT transcoding
+   */
+  @state()
+  jitLoadingState: "idle" | "metadata" | "segments" | "error" = "idle";
 
-  seekTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () =>
-      [
-        this.desiredSeekTimeMs,
-        this.trackFragmentIndexLoader.value,
-        this.initSegmentsLoader.value,
-      ] as const,
-    task: async (
-      [seekToMs, fragmentIndex, initSegments],
-      { signal: _signal },
-    ) => {
-      if (fragmentIndex === undefined) {
-        return;
-      }
-      if (initSegments === undefined) {
-        return;
-      }
+  @state()
+  jitErrorMessage: string | null = null;
 
-      const result: Record<
-        string,
-        {
-          segment: TrackSegment;
-          track: MP4Box.TrackInfo;
-          nextSegment?: TrackSegment;
-        }
-      > = {};
+  @state()
+  jitCacheStats: { size: number; hitRate: number; efficiency: number } | null =
+    null;
 
-      for (const index of Object.values(fragmentIndex)) {
-        const track = initSegments
-          .find((segment) => segment.trackId === String(index.track))
-          ?.mp4File.getInfo().tracks[0];
+  /**
+   * Detected loading mode based on URL patterns and manual override
+   */
+  get effectiveMode(): "asset" | "jit-transcode" {
+    // First check for explicit manual overrides
+    const actualMode = this.mode;
 
-        if (!track) {
-          throw new Error("Could not finding matching track");
-        }
+    if (actualMode === "asset" || actualMode === "jit-transcode") {
+      return actualMode;
+    }
 
-        const segment = index.segments.toReversed().find((segment) => {
-          return (segment.dts / track.timescale) * 1000 <= seekToMs;
-        });
+    // Auto-detection logic only runs when mode is "auto" or not set
+    if (this.assetId) {
+      return "asset"; // Always use asset mode if assetId is specified
+    }
 
-        const nextSegment = index.segments.find((segment) => {
-          return (segment.dts / track.timescale) * 1000 > seekToMs;
-        });
+    if (!this.src) {
+      return "asset"; // Default to asset mode if no src
+    }
 
-        if (!segment) {
-          return;
-        }
+    if (JitTranscodingClient.isJitTranscodeEligible(this.src)) {
+      return "jit-transcode";
+    }
 
-        result[index.track] = { segment, track, nextSegment };
-      }
+    return "asset"; // Default to asset mode for everything else
+  }
 
-      return result;
+  jitClientTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("jitClientTask error", error);
+    },
+    args: () =>
+      [
+        this.apiHost,
+        this.cacheSize,
+        this.enablePrefetch,
+        this.prefetchSegments,
+      ] as const,
+    task: ([apiHost, cacheSize, enablePrefetch, prefetchSegments]) => {
+      const baseUrl =
+        apiHost && apiHost !== "https://editframe.dev"
+          ? apiHost
+          : "http://localhost:3000";
+
+      return new JitTranscodingClient({
+        baseUrl,
+        segmentCacheSize: cacheSize,
+        enableNetworkAdaptation: enablePrefetch,
+        enablePrefetch: enablePrefetch,
+        prefetchSegments: prefetchSegments,
+      });
     },
   });
 
-  fetchSeekTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    argsEqual: deepArrayEquals,
-    args: () =>
-      [this.initSegmentsLoader.value, this.seekTask.value, this.fetch] as const,
-    task: async ([initSegments, seekResult, fetch], { signal }) => {
-      if (!initSegments) {
-        return;
+  /**
+   * JIT transcoding metadata loader
+   * Loads video metadata for JIT transcoded content
+   */
+  jitMetadataLoader = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("jitMetadataLoader error", error);
+    },
+    args: () => [this.src, this.jitClientTask.value] as const,
+    task: async ([src, _jitClient], { signal: _signal }) => {
+      if (this.effectiveMode !== "jit-transcode") {
+        return null;
       }
-      if (!seekResult) {
-        return;
+      await this.jitClientTask.taskComplete;
+      const jitClient = this.jitClientTask.value;
+      if (!src || !jitClient) {
+        return null;
       }
 
-      const files: Record<string, File> = {};
-
-      for (const [trackId, { segment, track, nextSegment }] of Object.entries(
-        seekResult,
-      )) {
-        const start = segment.offset;
-        const end = segment.offset + segment.size;
-
-        const response = await fetch(this.fragmentTrackPath(trackId), {
-          signal,
-          headers: { Range: `bytes=${start}-${end - 1}` },
-        });
-
-        if (nextSegment) {
-          const nextStart = nextSegment.offset;
-          const nextEnd = nextSegment.offset + nextSegment.size;
-          fetch(this.fragmentTrackPath(trackId), {
-            signal,
-            headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` },
-          })
-            .then(() => {
-              log("Prefetched next segment");
-            })
-            .catch((error) => {
-              log("Failed to prefetch next segment", error);
-            });
-        }
-
-        const initSegment = Object.values(initSegments).find(
-          (initSegment) => initSegment.trackId === String(track.id),
-        );
-        if (!initSegment) {
-          throw new Error("Could not find matching init segment");
-        }
-        const initBuffer = initSegment.buffer;
+      try {
+        this.jitLoadingState = "metadata";
+        this.jitErrorMessage = null;
 
-        const mediaBuffer =
-          (await response.arrayBuffer()) as unknown as MP4Box.MP4ArrayBuffer;
+        const metadata = await jitClient.loadVideoMetadata(src);
 
-        files[trackId] = new File([initBuffer, mediaBuffer], "video.mp4", {
-          type: "video/mp4",
-        });
+        this.jitLoadingState = "idle";
+        return metadata;
+      } catch (error) {
+        this.jitLoadingState = "error";
+        this.jitErrorMessage =
+          error instanceof Error
+            ? error.message
+            : "Failed to load video metadata";
+        log("Failed to load JIT metadata:", error);
+        return null;
       }
-
-      return files;
     },
-  });
-
-  videoAssetTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.fetchSeekTask.value] as const,
-    task: async ([files], { signal: _signal }) => {
-      if (!files) {
-        return;
-      }
-      if (!this.defaultVideoTrackId) {
-        return;
-      }
-      const videoFile = files[this.defaultVideoTrackId];
-      if (!videoFile) {
-        return;
-      }
-      // TODO: Extract to general cleanup function
-      for (const frame of this.videoAssetTask.value?.decodedFrames || []) {
-        frame.close();
+    onComplete: () => {
+      if (this.jitLoadingState === "metadata") {
+        this.jitLoadingState = "idle";
       }
-      this.videoAssetTask.value?.videoDecoder?.close();
-      return await VideoAsset.createFromReadableStream(
-        "video.mp4",
-        videoFile.stream(),
-        videoFile,
-      );
+      this.requestUpdate("intrinsicDurationMs");
+      this.requestUpdate("ownCurrentTimeMs");
+      this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
+      this.rootTimegroup?.requestUpdate("durationMs");
     },
   });
 
-  @state()
-  desiredSeekTimeMs = 0;
+  #assetId: string | null = null;
 
-  protected async executeSeek(seekToMs: number) {
-    this.desiredSeekTimeMs = seekToMs;
+  /**
+   * The unique identifier for the media asset.
+   * This property can be set programmatically or via the "asset-id" attribute.
+   * @domAttribute "asset-id"
+   */
+  @property({ type: String, attribute: "asset-id", reflect: true })
+  set assetId(value: string | null) {
+    this.#assetId = value;
   }
 
-  protected updated(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-  ): void {
-    if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.currentSourceTimeMs);
+  get assetId() {
+    return this.#assetId || this.getAttribute("asset-id");
+  }
+
+  fragmentIndexPath() {
+    if (this.assetId) {
+      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
     }
-    // TODO: this is copied straight from EFTimegroup.ts
-    // and should be refactored to be shared/reduce bad duplication of
-    // critical logic.
-    if (
-      changedProperties.has("currentTime") ||
-      changedProperties.has("ownCurrentTimeMs")
-    ) {
-      updateAnimations(this);
+    const src = this.src ?? "";
+    if (!src) {
+      // Return a safe path that will fail gracefully in tests - allows tasks to run without null errors
+      return "/@ef-track-fragment-index/no-src-available";
+    }
+    // Normalize path to avoid double slashes and handle @ef- prefixed paths
+    const normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
+    // If src is an @ef- style path, it's likely already a path fragment, not a full URL
+    if (normalizedSrc.startsWith("@ef-")) {
+      // For @ef- paths, we may need different handling - they might be asset IDs
+      return `/@ef-track-fragment-index/${normalizedSrc}`;
     }
+    return `/@ef-track-fragment-index/${normalizedSrc}`;
   }
 
-  get hasOwnDuration() {
-    return true;
+  fragmentTrackPath(trackId: string) {
+    if (this.assetId) {
+      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
+    }
+    // trackId is only specified as a query  in the @ef-track url shape
+    // this is because that system doesn't have a full url matching system.
+    // This is an annoying incosistency that should be fixed.
+    const src = this.src ?? "";
+    if (!src) {
+      // Return a safe path that will fail gracefully in tests - allows tasks to run without null errors
+      return `/@ef-track/no-src-available?trackId=${trackId}`;
+    }
+    // Normalize path to avoid double slashes and handle @ef- prefixed paths
+    const normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
+    // If src is an @ef- style path, it's likely already a path fragment, not a full URL
+    if (normalizedSrc.startsWith("@ef-")) {
+      return `/@ef-track/${normalizedSrc}?trackId=${trackId}`;
+    }
+    return `/@ef-track/${normalizedSrc}?trackId=${trackId}`;
   }
 
-  get intrinsicDurationMs() {
-    if (!this.trackFragmentIndexLoader.value) {
-      return 0;
-    }
+  get mediaDurationTask() {
+    return this.fragmentIndexTask;
+  }
 
-    const durations = Object.values(this.trackFragmentIndexLoader.value).map(
-      (track) => {
-        return (track.duration / track.timescale) * 1000;
-      },
+  get defaultVideoTrackId() {
+    const fragmentIndex = this.fragmentIndexTask.value as Record<
+      number,
+      TrackFragmentIndex
+    > | null;
+    return Object.values(fragmentIndex ?? {}).find(
+      (track) => track.type === "video",
+    )?.track;
+  }
+
+  get defaultAudioTrackId() {
+    const fragmentIndex = this.fragmentIndexTask.value as Record<
+      number,
+      TrackFragmentIndex
+    > | null;
+    return Object.values(fragmentIndex ?? {}).find(
+      (track) => track.type === "audio",
+    )?.track;
+  }
+
+  get intrinsicDurationMs() {
+    const fragmentIndex = this.fragmentIndexTask.value as Record<
+      number,
+      TrackFragmentIndex
+    > | null;
+    if (!fragmentIndex) return 0;
+
+    const durations = Object.values(fragmentIndex).map(
+      (track) => (track.duration / track.timescale) * 1000,
     );
-    if (durations.length === 0) {
-      return 0;
-    }
+    if (durations.length === 0) return 0;
     return Math.max(...durations);
   }
 
-  #audioContext = new OfflineAudioContext(2, 48000 / 30, 48000);
+  #audioContext = (() => {
+    try {
+      return new OfflineAudioContext(2, 48000 / 30, 48000);
+    } catch (error) {
+      throw new Error(
+        `[EFMedia.audioBufferTask] Failed to create OfflineAudioContext(2, ${48000 / 30}, 48000): ${error instanceof Error ? error.message : String(error)}. This is the class field audioContext for audio buffer task processing.`,
+      );
+    }
+  })();
 
   audioBufferTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.fetchSeekTask.value, this.seekTask.value] as const,
+    onError: (error) => {
+      console.error("audioBufferTask error", error);
+    },
+    args: () => [this.mediaSegmentsTask.value, this.seekTask.value] as const,
     task: async ([files, segments], { signal: _signal }) => {
-      if (!files) {
-        return;
-      }
-      if (!segments) {
-        return;
-      }
-      if (!this.defaultAudioTrackId) {
-        return;
-      }
+      if (!files || !segments) return;
+
+      if (!this.defaultAudioTrackId) return;
+
       const segment = segments[this.defaultAudioTrackId];
-      if (!segment) {
-        return;
-      }
+      if (!segment) return;
+
       const audioFile = files[this.defaultAudioTrackId];
-      if (!audioFile) {
-        return;
-      }
+      if (!audioFile) return;
+
       return {
         buffer: await this.#audioContext.decodeAudioData(
           await audioFile.arrayBuffer(),
@@ -400,6 +402,8 @@ export class EFMedia extends EFTargetable(
   });
 
   async fetchAudioSpanningTime(fromMs: number, toMs: number) {
+    // Clamp toMs to the duration of the media
+    toMs = Math.min(toMs, this.durationMs);
     // Adjust range for track's own time
     if (this.sourceInMs) {
       fromMs -=
@@ -412,49 +416,253 @@ export class EFMedia extends EFTargetable(
     fromMs -= this.startTimeMs - (this.trimStartMs ?? 0);
     toMs -= this.startTimeMs - (this.trimStartMs ?? 0);
 
-    await this.trackFragmentIndexLoader.taskComplete;
+    await this.fragmentIndexTask.taskComplete;
+
+    const fragmentIndex = this.fragmentIndexTask.value as Record<
+      number,
+      TrackFragmentIndex
+    > | null;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {
-      log("No audio track found");
-      return;
+      return undefined;
     }
 
-    const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
+    const audioTrackIndex = fragmentIndex?.[audioTrackId];
     if (!audioTrackIndex) {
-      log("No audio track found");
-      return;
+      return undefined;
     }
 
-    const start = audioTrackIndex.initSegment.offset;
-    const end =
-      audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
-    const audioInitFragmentRequest = this.fetch(
-      this.fragmentTrackPath(String(audioTrackId)),
-      {
-        headers: { Range: `bytes=${start}-${end - 1}` },
-      },
-    );
+    // Branch based on effective mode: JIT vs Asset
+    if (this.effectiveMode === "jit-transcode" && this.src) {
+      // JIT mode: fetch segments and extract audio directly
+      const jitClient = this.jitClientTask.value;
+      if (!jitClient) {
+        return undefined;
+      }
+
+      try {
+        // Calculate which JIT segments we need
+        const segmentDuration = 2000; // 2s segments
+        const startSegmentIndex = Math.floor(fromMs / segmentDuration);
+        // Clamp to the last segment index, otherwise this will fetch audio past the end of the media, which is a 500 error in our server
+        const maxSegmentIndex =
+          Math.floor(this.durationMs / segmentDuration) - 1;
+        const endSegmentIndex = Math.min(
+          Math.floor(toMs / segmentDuration),
+          maxSegmentIndex,
+        );
+
+        // Fetch all needed JIT segments (they contain both video and audio)
+        const quality = await jitClient.getAdaptiveQuality();
+        const segmentPromises: Promise<{
+          buffer: ArrayBuffer;
+          startMs: number;
+          endMs: number;
+        }>[] = [];
+
+        for (let i = startSegmentIndex; i <= endSegmentIndex; i++) {
+          const segmentStartMs = i * segmentDuration;
+          const segmentEndMs = (i + 1) * segmentDuration;
+
+          segmentPromises.push(
+            jitClient
+              .fetchSegment(this.src, segmentStartMs, quality)
+              .then((buffer) => ({
+                buffer,
+                startMs: segmentStartMs,
+                endMs: segmentEndMs,
+              })),
+          );
+        }
+
+        const segments = await Promise.all(segmentPromises);
+
+        // Decode each segment individually to extract audio
+        const audioBuffers: {
+          buffer: AudioBuffer;
+          startMs: number;
+          endMs: number;
+        }[] = [];
+
+        for (const segment of segments) {
+          try {
+            // Use a temporary audio context to decode audio from the video file
+            let tempContext: OfflineAudioContext;
+            try {
+              tempContext = new OfflineAudioContext(2, 48000, 48000);
+            } catch (error) {
+              throw new Error(
+                `[EFMedia.fetchAudioSpanningTime JIT] Failed to create temp OfflineAudioContext(2, 48000, 48000) for segment ${segment.startMs}-${segment.endMs}ms: ${error instanceof Error ? error.message : String(error)}. This is for decoding audio from JIT video segments.`,
+              );
+            }
+            // Clone the ArrayBuffer to avoid detaching issues when reusing cached segments
+            const clonedBuffer = segment.buffer.slice(0);
+            const audioBuffer = await tempContext.decodeAudioData(clonedBuffer);
+            audioBuffers.push({
+              buffer: audioBuffer,
+              startMs: segment.startMs,
+              endMs: segment.endMs,
+            });
+          } catch (error) {
+            log(
+              `Failed to decode audio from segment ${segment.startMs}-${segment.endMs}ms:`,
+              error,
+            );
+            throw error;
+          }
+        }
+
+        if (audioBuffers.length === 0) {
+          return undefined;
+        }
+
+        // Calculate total duration and samples needed
+        const firstAudioBuffer = audioBuffers[0];
+        const lastAudioBuffer = audioBuffers[audioBuffers.length - 1];
+
+        if (!firstAudioBuffer || !lastAudioBuffer) {
+          return undefined;
+        }
+
+        const sampleRate = firstAudioBuffer.buffer.sampleRate;
+        const numberOfChannels = firstAudioBuffer.buffer.numberOfChannels;
+
+        // Calculate the exact time range we need
+        const actualStartMs = Math.max(fromMs, firstAudioBuffer.startMs);
+        const actualEndMs = Math.min(toMs, lastAudioBuffer.endMs);
+        const totalDurationMs = actualEndMs - actualStartMs;
+        const totalSamples = Math.floor((totalDurationMs / 1000) * sampleRate);
+        if (totalSamples <= 0) {
+          return undefined;
+        }
+
+        // Create a new audio context for the final buffer
+        let finalContext: OfflineAudioContext;
+        try {
+          finalContext = new OfflineAudioContext(
+            numberOfChannels,
+            totalSamples,
+            sampleRate,
+          );
+        } catch (error) {
+          throw new Error(
+            `[EFMedia.fetchAudioSpanningTime final] Failed to create final OfflineAudioContext(${numberOfChannels}, ${totalSamples}, ${sampleRate}) for time range ${actualStartMs}-${actualEndMs}ms: ${error instanceof Error ? error.message : String(error)}. This is for creating the final concatenated audio buffer.`,
+          );
+        }
+        const finalBuffer = finalContext.createBuffer(
+          numberOfChannels,
+          totalSamples,
+          sampleRate,
+        );
+
+        // Copy audio data from each decoded segment to the final buffer
+        let outputOffset = 0;
+
+        for (const {
+          buffer: audioBuffer,
+          startMs: segmentStartMs,
+          endMs: segmentEndMs,
+        } of audioBuffers) {
+          // Calculate which part of this segment we need
+          const segmentNeedStart = Math.max(actualStartMs, segmentStartMs);
+          const segmentNeedEnd = Math.min(actualEndMs, segmentEndMs);
+
+          if (segmentNeedStart >= segmentNeedEnd) {
+            continue; // Skip segments outside our range
+          }
+
+          // Calculate sample offsets within this segment
+          const segmentStartSample = Math.floor(
+            ((segmentNeedStart - segmentStartMs) / 1000) * sampleRate,
+          );
+          const segmentDurationSamples = Math.floor(
+            ((segmentNeedEnd - segmentNeedStart) / 1000) * sampleRate,
+          );
+
+          // Ensure we don't exceed buffer boundaries
+          const actualSamples = Math.min(
+            segmentDurationSamples,
+            audioBuffer.length - segmentStartSample,
+            totalSamples - outputOffset,
+          );
+
+          if (actualSamples <= 0) {
+            continue;
+          }
+
+          // Copy each channel
+          for (let channel = 0; channel < numberOfChannels; channel++) {
+            const sourceData = audioBuffer.getChannelData(channel);
+            const targetData = finalBuffer.getChannelData(channel);
+
+            for (let i = 0; i < actualSamples; i++) {
+              const sourceIndex = segmentStartSample + i;
+              const targetIndex = outputOffset + i;
+
+              if (
+                sourceIndex < sourceData.length &&
+                targetIndex < targetData.length
+              ) {
+                const sample = sourceData[sourceIndex];
+                if (sample !== undefined) {
+                  targetData[targetIndex] = sample;
+                }
+              }
+            }
+          }
+
+          outputOffset += actualSamples;
+        }
+
+        // Encode the final buffer back to a blob
+        // We'll create a simple WAV file since that's more reliable than trying to create MP4
+        const wavBlob = this.encodeWAVBuffer(finalBuffer);
 
-    const fragments = Object.values(audioTrackIndex.segments).filter(
-      (segment) => {
-        const segmentStartsBeforeEnd =
-          segment.dts <= (toMs * audioTrackIndex.timescale) / 1000;
-        const segmentEndsAfterStart =
-          segment.dts + segment.duration >=
-          (fromMs * audioTrackIndex.timescale) / 1000;
-        return segmentStartsBeforeEnd && segmentEndsAfterStart;
+        const result = {
+          blob: wavBlob,
+          startMs: actualStartMs - (this.trimStartMs ?? 0),
+          endMs: actualEndMs - (this.trimEndMs ?? 0),
+        };
+
+        return result;
+      } catch (error) {
+        log(
+          "Failed to extract and concatenate audio from JIT video segments:",
+          error,
+        );
+        return undefined;
+      }
+    }
+
+    // Asset mode: use original fragmented MP4 approach
+    const start = audioTrackIndex.initSegment.offset;
+    const end =
+      audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
+    const audioInitFragmentRequest = this.fetch(
+      this.fragmentTrackPath(String(audioTrackId)),
+      {
+        headers: { Range: `bytes=${start}-${end - 1}` },
       },
     );
 
+    const fragments = Object.values(
+      audioTrackIndex.segments as TrackSegment[],
+    ).filter((segment: TrackSegment) => {
+      const segmentStartsBeforeEnd =
+        segment.dts <= (toMs * audioTrackIndex.timescale) / 1000;
+      const segmentEndsAfterStart =
+        segment.dts + segment.duration >=
+        (fromMs * audioTrackIndex.timescale) / 1000;
+      return segmentStartsBeforeEnd && segmentEndsAfterStart;
+    });
+
     const firstFragment = fragments[0];
     if (!firstFragment) {
-      log("No audio fragments found");
-      return;
+      return undefined;
     }
     const lastFragment = fragments[fragments.length - 1];
     if (!lastFragment) {
-      log("No audio fragments found");
-      return;
+      return undefined;
     }
     const fragmentStart = firstFragment.offset;
     const fragmentEnd = lastFragment.offset + lastFragment.size;
@@ -488,6 +696,77 @@ export class EFMedia extends EFTargetable(
     };
   }
 
+  /**
+   * Encode an AudioBuffer to a WAV blob
+   */
+  private encodeWAVBuffer(audioBuffer: AudioBuffer): Blob {
+    const numberOfChannels = audioBuffer.numberOfChannels;
+    const sampleRate = audioBuffer.sampleRate;
+    const length = audioBuffer.length;
+
+    // Calculate buffer sizes
+    const bytesPerSample = 2; // 16-bit
+    const blockAlign = numberOfChannels * bytesPerSample;
+    const byteRate = sampleRate * blockAlign;
+    const dataSize = length * blockAlign;
+    const fileSize = 36 + dataSize;
+
+    // Create WAV file buffer
+    const buffer = new ArrayBuffer(44 + dataSize);
+    const view = new DataView(buffer);
+
+    // Write WAV header
+    let offset = 0;
+
+    // RIFF chunk descriptor
+    view.setUint32(offset, 0x52494646, false); // "RIFF"
+    offset += 4;
+    view.setUint32(offset, fileSize, true); // File size
+    offset += 4;
+    view.setUint32(offset, 0x57415645, false); // "WAVE"
+    offset += 4;
+
+    // fmt sub-chunk
+    view.setUint32(offset, 0x666d7420, false); // "fmt "
+    offset += 4;
+    view.setUint32(offset, 16, true); // Subchunk1Size (16 for PCM)
+    offset += 4;
+    view.setUint16(offset, 1, true); // AudioFormat (1 for PCM)
+    offset += 2;
+    view.setUint16(offset, numberOfChannels, true); // NumChannels
+    offset += 2;
+    view.setUint32(offset, sampleRate, true); // SampleRate
+    offset += 4;
+    view.setUint32(offset, byteRate, true); // ByteRate
+    offset += 4;
+    view.setUint16(offset, blockAlign, true); // BlockAlign
+    offset += 2;
+    view.setUint16(offset, 16, true); // BitsPerSample
+    offset += 2;
+
+    // data sub-chunk
+    view.setUint32(offset, 0x64617461, false); // "data"
+    offset += 4;
+    view.setUint32(offset, dataSize, true); // Subchunk2Size
+    offset += 4;
+
+    // Write audio data
+    for (let i = 0; i < length; i++) {
+      for (let channel = 0; channel < numberOfChannels; channel++) {
+        const sample = audioBuffer.getChannelData(channel)[i] || 0;
+        // Convert float (-1 to 1) to 16-bit PCM
+        const pcmSample = Math.max(
+          -32768,
+          Math.min(32767, Math.floor(sample * 32767)),
+        );
+        view.setInt16(offset, pcmSample, true);
+        offset += 2;
+      }
+    }
+
+    return new Blob([buffer], { type: "audio/wav" });
+  }
+
   set fftSize(value: number) {
     const oldValue = this.fftSize;
     this.setAttribute("fft-size", String(value));
@@ -530,7 +809,7 @@ export class EFMedia extends EFTargetable(
   // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
   get FREQ_WEIGHTS() {
     if (freqWeightsCache.has(this.fftSize)) {
-      // biome-ignore lint/style/noNonNullAssertion: Will exist due to prior has check
+      // biome-ignore lint/style/noNonNullAssertion: We know the value is set due to the guard above
       return freqWeightsCache.get(this.fftSize)!;
     }
 
@@ -553,6 +832,9 @@ export class EFMedia extends EFTargetable(
 
   byteTimeDomainTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("byteTimeDomainTask error", error);
+    },
     args: () =>
       [
         this.audioBufferTask.status,
@@ -565,7 +847,7 @@ export class EFMedia extends EFTargetable(
     task: async () => {
       await this.audioBufferTask.taskComplete;
       if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs <= 0) return null;
+      if (this.currentSourceTimeMs < 0) return null;
 
       const currentTimeMs = this.currentSourceTimeMs;
       const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
@@ -588,11 +870,14 @@ export class EFMedia extends EFTargetable(
           const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
           if (cachedFrame) return cachedFrame;
 
-          const audioContext = new OfflineAudioContext(
-            2,
-            48000 * (1 / 30),
-            48000,
-          );
+          let audioContext: OfflineAudioContext;
+          try {
+            audioContext = new OfflineAudioContext(2, 48000 * (1 / 30), 48000);
+          } catch (error) {
+            throw new Error(
+              `[EFMedia.byteTimeDomainTask] Failed to create OfflineAudioContext(2, ${48000 * (1 / 30)}, 48000) for frame ${frameIndex} at time ${startTime}s: ${error instanceof Error ? error.message : String(error)}. This is for audio time domain analysis.`,
+            );
+          }
 
           const source = audioContext.createBufferSource();
           source.buffer = audioBuffer;
@@ -679,6 +964,9 @@ export class EFMedia extends EFTargetable(
 
   frequencyDataTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("frequencyDataTask error", error);
+    },
     args: () =>
       [
         this.audioBufferTask.status,
@@ -691,7 +979,7 @@ export class EFMedia extends EFTargetable(
     task: async () => {
       await this.audioBufferTask.taskComplete;
       if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs <= 0) return null;
+      if (this.currentSourceTimeMs < 0) return null;
 
       const currentTimeMs = this.currentSourceTimeMs;
       const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
@@ -720,11 +1008,17 @@ export class EFMedia extends EFTargetable(
             return cachedFrame;
           }
 
-          const audioContext = new OfflineAudioContext(
-            2,
-            48000 * (1 / 30),
-            48000,
-          );
+          // Running 48000 * (1 / 30) = 1600 broke something terrible, it came out as 0,
+          // I'm assuming weird floating point nonsense to do with running on rosetta
+          const SIZE = 48000 / 30;
+          let audioContext: OfflineAudioContext;
+          try {
+            audioContext = new OfflineAudioContext(2, SIZE, 48000);
+          } catch (error) {
+            throw new Error(
+              `[EFMedia.frequencyDataTask] Failed to create OfflineAudioContext(2, ${SIZE}, 48000) for frame ${i} at time ${startTime}s: ${error instanceof Error ? error.message : String(error)}. This is for audio frequency analysis.`,
+            );
+          }
           const analyser = audioContext.createAnalyser();
           analyser.fftSize = this.fftSize;
           analyser.minDecibels = -90;
@@ -773,8 +1067,7 @@ export class EFMedia extends EFTargetable(
 
         framesData.forEach((frame, frameIndex) => {
           const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-          weightedSum += frame[i]! * decayWeight;
+          weightedSum += (frame[i] ?? 0) * decayWeight;
           weightSum += decayWeight;
         });
 
@@ -783,8 +1076,7 @@ export class EFMedia extends EFTargetable(
 
       // Apply frequency weights using instance FREQ_WEIGHTS
       smoothedData.forEach((value, i) => {
-        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-        const freqWeight = this.FREQ_WEIGHTS[i]!;
+        const freqWeight = this.FREQ_WEIGHTS[i] ?? 0;
         smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
       });
 
@@ -811,9 +1103,753 @@ export class EFMedia extends EFTargetable(
   get fftGain() {
     return Number.parseFloat(this.getAttribute("fft-gain") ?? "3.0");
   }
+
+  // Add helper methods for the new architecture
+  private synthesizeFragmentIndex(
+    jitMetadata: any,
+  ): Record<number, TrackFragmentIndex> {
+    const segmentDuration = jitMetadata.segmentDuration || 2000;
+    const numSegments = Math.ceil(jitMetadata.durationMs / segmentDuration);
+    const fragmentIndex: Record<number, TrackFragmentIndex> = {};
+
+    // Create video track fragment index
+    const videoStream = jitMetadata.streams.find(
+      (s: any) => s.type === "video",
+    );
+    if (videoStream) {
+      const segments: TrackSegment[] = [];
+      for (let i = 0; i < numSegments; i++) {
+        const startMs = i * segmentDuration;
+        const endMs = Math.min(
+          startMs + segmentDuration,
+          jitMetadata.durationMs,
+        );
+        segments.push({
+          dts: Math.floor(startMs * 90), // Convert to video timescale
+          cts: Math.floor(startMs * 90),
+          duration: Math.floor((endMs - startMs) * 90),
+          offset: 0, // Not used for JIT segments
+          size: 0, // Not used for JIT segments
+        });
+      }
+
+      fragmentIndex[videoStream.index] = {
+        track: videoStream.index,
+        type: "video",
+        timescale: 90000, // Standard video timescale
+        duration: Math.floor(jitMetadata.durationMs * 90),
+        width: videoStream.width || 1920,
+        height: videoStream.height || 1080,
+        sample_count: numSegments * 50, // Estimate ~50 frames per 2s segment
+        codec: videoStream.codecName || "h264",
+        segments,
+        initSegment: { offset: 0, size: 0 }, // Not used for JIT
+      };
+    }
+
+    // Create audio track fragment index
+    const audioStream = jitMetadata.streams.find(
+      (s: any) => s.type === "audio",
+    );
+    if (audioStream) {
+      const segments: TrackSegment[] = [];
+      const audioTimescale = audioStream.sampleRate || 48000;
+      for (let i = 0; i < numSegments; i++) {
+        const startMs = i * segmentDuration;
+        const endMs = Math.min(
+          startMs + segmentDuration,
+          jitMetadata.durationMs,
+        );
+        segments.push({
+          dts: Math.floor((startMs * audioTimescale) / 1000),
+          cts: Math.floor((startMs * audioTimescale) / 1000),
+          duration: Math.floor(((endMs - startMs) * audioTimescale) / 1000),
+          offset: 0, // Not used for JIT segments
+          size: 0, // Not used for JIT segments
+        });
+      }
+
+      fragmentIndex[audioStream.index] = {
+        track: audioStream.index,
+        type: "audio",
+        timescale: audioTimescale,
+        duration: Math.floor((jitMetadata.durationMs * audioTimescale) / 1000),
+        channel_count: audioStream.channels || 2,
+        sample_rate: audioStream.sampleRate || 48000,
+        sample_size: 16, // Standard sample size
+        sample_count: Math.floor(
+          (jitMetadata.durationMs * (audioStream.sampleRate || 48000)) / 1000,
+        ),
+        codec: audioStream.codecName || "aac",
+        segments,
+        initSegment: { offset: 0, size: 0 }, // Not used for JIT
+      };
+    }
+
+    return fragmentIndex;
+  }
+
+  private calculateAssetSegmentKeys(
+    fragmentIndex: Record<number, TrackFragmentIndex>,
+    seekMs: number,
+  ) {
+    const segmentKeys: Record<
+      string,
+      { startTimeMs: number; trackId: string }
+    > = {};
+
+    for (const [trackId, index] of Object.entries(fragmentIndex)) {
+      const segment = index.segments.toReversed().find((segment) => {
+        const segmentStartMs = (segment.dts / index.timescale) * 1000;
+        return segmentStartMs <= seekMs;
+      });
+
+      if (segment) {
+        const startTimeMs = (segment.dts / index.timescale) * 1000;
+        segmentKeys[trackId] = { startTimeMs, trackId };
+      }
+    }
+
+    return segmentKeys;
+  }
+
+  private calculateJitSegmentKeys(metadata: any, seekMs: number) {
+    const segmentKeys: Record<
+      string,
+      { startTimeMs: number; trackId: string }
+    > = {};
+    const segmentDuration = metadata.segmentDuration || 2000;
+
+    for (const stream of metadata.streams) {
+      const segmentIndex = Math.floor(seekMs / segmentDuration);
+      const startTimeMs = segmentIndex * segmentDuration;
+      segmentKeys[stream.index] = {
+        startTimeMs,
+        trackId: String(stream.index),
+      };
+    }
+
+    return segmentKeys;
+  }
+
+  private calculateAssetSeekResult(
+    fragmentIndex: Record<number, TrackFragmentIndex>,
+    initSegments: any[],
+    seekMs: number,
+  ) {
+    const result: Record<
+      string,
+      {
+        segment: TrackSegment;
+        track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
+      }
+    > = {};
+
+    for (const index of Object.values(fragmentIndex)) {
+      const initTrack = initSegments
+        .find((segment) => segment.trackId === String(index.track))
+        ?.mp4File.getInfo().tracks[0];
+
+      if (!initTrack) continue;
+
+      const segment = index.segments.toReversed().find((segment) => {
+        const segmentStartMs = (segment.dts / initTrack.timescale) * 1000;
+        return segmentStartMs <= seekMs;
+      });
+
+      const nextSegment = index.segments.find((segment) => {
+        return (segment.dts / initTrack.timescale) * 1000 > seekMs;
+      });
+
+      if (segment) {
+        result[index.track] = { segment, track: initTrack, nextSegment };
+      }
+    }
+
+    return result;
+  }
+
+  private calculateJitSeekResult(
+    fragmentIndex: Record<number, TrackFragmentIndex>,
+    seekMs: number,
+  ) {
+    const result: Record<
+      string,
+      {
+        segment: TrackSegment;
+        track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
+      }
+    > = {};
+
+    for (const index of Object.values(fragmentIndex)) {
+      const track = this.createTrackInfo(index);
+
+      const segment = index.segments.toReversed().find((segment) => {
+        const segmentStartMs = (segment.dts / track.timescale) * 1000;
+        return segmentStartMs <= seekMs;
+      });
+
+      const nextSegment = index.segments.find((segment) => {
+        return (segment.dts / track.timescale) * 1000 > seekMs;
+      });
+
+      if (segment) {
+        result[index.track] = { segment, track, nextSegment };
+      }
+    }
+
+    return result;
+  }
+
+  private createTrackInfo(index: TrackFragmentIndex): MP4Box.TrackInfo {
+    return {
+      id: index.track,
+      name: index.type,
+      type: index.type,
+      timescale: index.timescale,
+      duration: index.duration,
+      bitrate: index.type === "video" ? 1000000 : 128000,
+      created: new Date(),
+      modified: new Date(),
+      movie_duration: index.duration,
+      movie_timescale: index.timescale,
+      layer: 0,
+      alternate_group: 0,
+      volume: index.type === "audio" ? 1.0 : 0,
+      track_width: index.type === "video" ? (index as any).width || 0 : 0,
+      track_height: index.type === "video" ? (index as any).height || 0 : 0,
+      samples_duration: index.duration,
+      codec: (index as any).codec || "unknown",
+      language: "und",
+      nb_samples: (index as any).sample_count || 0,
+    } as MP4Box.TrackInfo;
+  }
+
+  protected updated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+  ): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("ownCurrentTimeMs")) {
+      this.executeSeek(this.currentSourceTimeMs);
+    }
+    if (
+      changedProperties.has("currentTime") ||
+      changedProperties.has("ownCurrentTimeMs")
+    ) {
+      updateAnimations(this);
+    }
+  }
+
+  get hasOwnDuration() {
+    return true;
+  }
+
+  // Update videoAssetTask to use new convergent tasks
+  videoAssetTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("videoAssetTask error", error);
+    },
+    args: () => [this.effectiveMode, this.mediaSegmentsTask.value] as const,
+    task: async ([mode, files], { signal: _signal }) => {
+      if (!files) return;
+
+      const fragmentIndex = this.fragmentIndexTask.value as Record<
+        number,
+        TrackFragmentIndex
+      > | null;
+      const computedVideoTrackId = Object.values(fragmentIndex ?? {}).find(
+        (track) => track.type === "video",
+      )?.track;
+
+      if (computedVideoTrackId === undefined) return;
+
+      const videoFile = files[computedVideoTrackId];
+      if (!videoFile) return;
+
+      // Cleanup existing asset
+      const existingAsset = this.videoAssetTask.value;
+      if (existingAsset) {
+        for (const frame of existingAsset?.decodedFrames || []) {
+          frame.close();
+        }
+        const maybeDecoder = existingAsset?.videoDecoder;
+        if (maybeDecoder?.state !== "closed") {
+          maybeDecoder.close();
+        }
+      }
+
+      // Single branching point for creation method
+      if (mode === "jit-transcode") {
+        return await VideoAsset.createFromCompleteMP4(
+          `jit-segment-${computedVideoTrackId}`,
+          videoFile,
+        );
+      }
+
+      return await VideoAsset.createFromReadableStream(
+        "video.mp4",
+        videoFile.stream(),
+        videoFile,
+      );
+    },
+  });
+
+  @state()
+  private _desiredSeekTimeMs = -1; // Initialize to -1 so that setting to 0 triggers a change
+
+  get desiredSeekTimeMs() {
+    return this._desiredSeekTimeMs;
+  }
+
+  set desiredSeekTimeMs(value: number) {
+    if (this._desiredSeekTimeMs !== value) {
+      this._desiredSeekTimeMs = value;
+    }
+  }
+
+  protected async executeSeek(seekToMs: number) {
+    this.desiredSeekTimeMs = seekToMs;
+  }
+
+  // DIVERGENT TASKS - Mode-Specific
+
+  // Asset Mode Tasks
+  assetIndexLoader = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("assetIndexLoader error", error);
+    },
+    args: () =>
+      [
+        this.effectiveMode === "asset" ? this.fragmentIndexPath() : null,
+        this.fetch,
+      ] as const,
+    task: async ([path, fetch], { signal }) => {
+      if (!path) return null;
+      try {
+        const response = await fetch(path, { signal });
+        return (await response.json()) as Record<number, TrackFragmentIndex>;
+      } catch (error) {
+        console.error("Failed to load asset fragment index", error);
+        return null;
+      }
+    },
+    onComplete: () => {
+      this.requestUpdate("intrinsicDurationMs");
+      this.requestUpdate("ownCurrentTimeMs");
+      this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
+      this.rootTimegroup?.requestUpdate("durationMs");
+    },
+  });
+
+  // Asset segment keys calculation - separate from loading
+  assetSegmentKeysTask = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("assetSegmentKeysTask error", error);
+    },
+    args: () =>
+      [
+        this.effectiveMode === "asset" ? this.assetIndexLoader.value : null,
+        this.desiredSeekTimeMs,
+      ] as const,
+    task: async ([fragmentIndex, seekMs]) => {
+      if (this.effectiveMode === "asset") {
+        await this.assetIndexLoader.taskComplete;
+        fragmentIndex = this.assetIndexLoader.value;
+      }
+      if (!fragmentIndex || seekMs == null) return null;
+      return this.calculateAssetSegmentKeys(fragmentIndex, seekMs);
+    },
+  });
+
+  // Asset init segments loader - separate from media segments
+  assetInitSegmentsTask = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("assetInitSegmentsTask error", error);
+    },
+    args: () =>
+      [
+        this.effectiveMode === "asset" ? this.assetIndexLoader.value : null,
+        this.fetch,
+      ] as const,
+    task: async ([fragmentIndex, fetch], { signal }) => {
+      if (this.effectiveMode === "asset") {
+        await this.assetIndexLoader.taskComplete;
+        fragmentIndex = this.assetIndexLoader.value;
+      }
+      if (!fragmentIndex) return null;
+
+      return await Promise.all(
+        Object.entries(fragmentIndex).map(async ([trackId, track]) => {
+          const start = track.initSegment.offset;
+          const end = track.initSegment.offset + track.initSegment.size;
+          const response = await fetch(this.fragmentTrackPath(trackId), {
+            signal,
+            headers: { Range: `bytes=${start}-${end - 1}` },
+          });
+          const buffer =
+            (await response.arrayBuffer()) as MP4Box.MP4ArrayBuffer;
+          buffer.fileStart = 0;
+          const mp4File = new MP4File();
+          mp4File.appendBuffer(buffer, true);
+          mp4File.flush();
+          await mp4File.readyPromise;
+          return { trackId, buffer, mp4File };
+        }),
+      );
+    },
+  });
+
+  // Asset media segments loader - now focused only on media segments
+  assetSegmentLoader = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("assetSegmentLoader error", error);
+    },
+    argsEqual: deepArrayEquals,
+    args: () =>
+      [
+        this.assetIndexLoader.value,
+        this.assetSegmentKeysTask.value,
+        this.assetInitSegmentsTask.value,
+        this.fetch,
+      ] as const,
+    task: async (
+      [fragmentIndex, segmentKeys, initSegments, fetch],
+      { signal },
+    ) => {
+      if (this.effectiveMode === "asset") {
+        await this.assetIndexLoader.taskComplete;
+        fragmentIndex = this.assetIndexLoader.value;
+        await this.assetSegmentKeysTask.taskComplete;
+        segmentKeys = this.assetSegmentKeysTask.value;
+        await this.assetInitSegmentsTask.taskComplete;
+        initSegments = this.assetInitSegmentsTask.value;
+      }
+
+      if (!fragmentIndex || !segmentKeys || !initSegments) return null;
+
+      // Access current seek time directly for calculations that need it
+      const seekMs = this.desiredSeekTimeMs;
+      if (seekMs == null) return null;
+
+      const files: Record<string, File> = {};
+
+      // Calculate and fetch media segments
+      const seekResult = this.calculateAssetSeekResult(
+        fragmentIndex,
+        initSegments,
+        seekMs,
+      );
+      if (!seekResult) return null;
+
+      for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+        seekResult,
+      )) {
+        const start = segment.offset;
+        const end = segment.offset + segment.size;
+
+        const response = await fetch(this.fragmentTrackPath(trackId), {
+          signal,
+          headers: { Range: `bytes=${start}-${end - 1}` },
+        });
+
+        // Prefetch next segment
+        if (nextSegment) {
+          const nextStart = nextSegment.offset;
+          const nextEnd = nextSegment.offset + nextSegment.size;
+          fetch(this.fragmentTrackPath(trackId), {
+            signal,
+            headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` },
+          }).catch(() => {}); // Fire and forget
+        }
+
+        const initSegment = initSegments.find(
+          (seg) => seg.trackId === String(track.id),
+        );
+        if (!initSegment) continue;
+
+        const mediaBuffer = await response.arrayBuffer();
+        files[trackId] = new File(
+          [initSegment.buffer, mediaBuffer],
+          "video.mp4",
+          {
+            type: "video/mp4",
+          },
+        );
+      }
+
+      return files;
+    },
+  });
+
+  // JIT segment keys calculation - separate from loading
+  jitSegmentKeysTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("jitSegmentKeysTask error", error);
+    },
+    args: () =>
+      [
+        this.effectiveMode === "jit-transcode"
+          ? this.jitMetadataLoader.value
+          : null,
+        this.desiredSeekTimeMs,
+      ] as const,
+    task: ([metadata, seekMs]) => {
+      if (!metadata || seekMs == null) return null;
+      return this.calculateJitSegmentKeys(metadata, seekMs);
+    },
+  });
+
+  // JIT segments loader - now focused only on segment loading
+  jitSegmentLoader = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("jitSegmentLoader error", error);
+    },
+    argsEqual: deepArrayEquals,
+    args: () =>
+      [
+        this.src,
+        this.jitSegmentKeysTask.value,
+        this.jitMetadataLoader.value,
+      ] as const,
+    task: async ([src, segmentKeys, metadata], { signal: _signal }) => {
+      await this.jitSegmentKeysTask.taskComplete;
+      await this.jitMetadataLoader.taskComplete;
+
+      if (!src || !segmentKeys || !metadata || !this.jitClientTask.value)
+        return null;
+
+      // Access current seek time directly for calculations that need it
+      const seekMs = this.desiredSeekTimeMs;
+      if (seekMs == null) return null;
+
+      try {
+        this.jitLoadingState = "segments";
+        this.jitErrorMessage = null;
+
+        const files: Record<string, File> = {};
+        const quality = await this.jitClientTask.value.getAdaptiveQuality();
+
+        // Calculate which segments we need based on synthetic fragment index
+        const fragmentIndex = this.synthesizeFragmentIndex(metadata);
+        const seekResult = this.calculateJitSeekResult(fragmentIndex, seekMs);
+
+        for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+          seekResult,
+        )) {
+          const startTimeMs = (segment.dts / track.timescale) * 1000;
+
+          // Fetch current segment
+          const segmentBuffer = await this.jitClientTask.value.fetchSegment(
+            src,
+            startTimeMs,
+            quality,
+          );
+          files[trackId] = new File([segmentBuffer], "segment.mp4", {
+            type: "video/mp4",
+          });
+
+          // Prefetch next segment
+          if (nextSegment && this.enablePrefetch) {
+            const nextStartTimeMs = (nextSegment.dts / track.timescale) * 1000;
+            this.jitClientTask.value
+              .fetchSegment(src, nextStartTimeMs, quality)
+              .catch(() => {}); // Fire and forget
+          }
+        }
+
+        this.jitCacheStats = this.jitClientTask.value.getCacheStats();
+        this.jitLoadingState = "idle";
+        return files;
+      } catch (error) {
+        this.jitLoadingState = "error";
+        this.jitErrorMessage =
+          error instanceof Error
+            ? error.message
+            : "Failed to load video segments";
+        throw error;
+      }
+    },
+  });
+
+  // CONVERGENT TASKS - Mode-Agnostic
+
+  // Convergent fragment index from either asset or JIT metadata
+  fragmentIndexTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("fragmentIndexTask error", error);
+    },
+    args: () =>
+      [this.assetIndexLoader.value, this.jitMetadataLoader.value] as const,
+    task: async ([assetIndex, jitMetadata]) => {
+      await this.assetIndexLoader.taskComplete;
+      await this.jitMetadataLoader.taskComplete;
+      if (assetIndex) return assetIndex;
+      if (jitMetadata) return this.synthesizeFragmentIndex(jitMetadata);
+      return null;
+    },
+  });
+
+  // Convergent media segments from either asset or JIT loaders
+  mediaSegmentsTask = new Task(this, {
+    autoRun: EF_INTERACTIVE,
+    onError: (error) => {
+      console.error("mediaSegmentsTask error", error);
+    },
+    args: () =>
+      [this.assetSegmentLoader.value, this.jitSegmentLoader.value] as const,
+    task: async ([_assetFiles, _jitFiles], { signal }) => {
+      log("🔍 SIGNAL: mediaSegmentsTask starting", {
+        signalAborted: signal.aborted,
+      });
+
+      await this.assetSegmentLoader.taskComplete;
+      if (signal.aborted) {
+        log(
+          "🔍 SIGNAL: mediaSegmentsTask aborted after assetSegmentLoader.taskComplete",
+        );
+        return null;
+      }
+
+      await this.jitSegmentLoader.taskComplete;
+      if (signal.aborted) {
+        log(
+          "🔍 SIGNAL: mediaSegmentsTask aborted after jitSegmentLoader.taskComplete",
+        );
+        return null;
+      }
+
+      // Get fresh values
+      const assetFiles = this.assetSegmentLoader.value;
+      const jitFiles = this.jitSegmentLoader.value;
+
+      log("🔍 SIGNAL: mediaSegmentsTask using fresh values", {
+        hasAssetFiles: !!assetFiles,
+        hasJitFiles: !!jitFiles,
+        signalAborted: signal.aborted,
+      });
+
+      const result = assetFiles || jitFiles || null;
+      log("🔍 SIGNAL: mediaSegmentsTask resolved", {
+        hasResult: !!result,
+        signalAborted: signal.aborted,
+      });
+      return result;
+    },
+  });
+
+  // Replace seekTask with unified task
+  seekTask = new Task(this, {
+    autoRun: EF_INTERACTIVE, // Always run since this is critical for frame rendering
+    onError: (error) => {
+      console.error("seekTask error", error);
+    },
+    args: () =>
+      [
+        this.fragmentIndexTask.value,
+        this.mediaSegmentsTask.value,
+        this.desiredSeekTimeMs,
+      ] as const,
+    task: async ([_fragmentIndex, _files, seekMs], { signal }) => {
+      log("🔍 SIGNAL: seekTask starting", {
+        seekMs,
+        signalAborted: signal.aborted,
+      });
+
+      await this.fragmentIndexTask.taskComplete;
+      if (signal.aborted) {
+        log("🔍 SIGNAL: seekTask aborted after fragmentIndexTask.taskComplete");
+        return null;
+      }
+
+      await this.mediaSegmentsTask.taskComplete;
+      if (signal.aborted) {
+        log("🔍 SIGNAL: seekTask aborted after mediaSegmentsTask.taskComplete");
+        return null;
+      }
+
+      // Get fresh values after awaiting
+      const fragmentIndex = this.fragmentIndexTask.value;
+      const files = this.mediaSegmentsTask.value;
+
+      log("🔍 SIGNAL: seekTask using fresh values", {
+        hasFragmentIndex: !!fragmentIndex,
+        hasFiles: !!files,
+        seekMs,
+        signalAborted: signal.aborted,
+      });
+
+      const typedFragmentIndex = fragmentIndex as Record<
+        number,
+        TrackFragmentIndex
+      > | null;
+      if (!typedFragmentIndex || !files) {
+        log("🔍 SIGNAL: seekTask calculation aborted - missing required data");
+        return null;
+      }
+
+      // Calculate seek metadata that downstream tasks need
+      const result: Record<
+        string,
+        {
+          segment: TrackSegment;
+          track: MP4Box.TrackInfo;
+          nextSegment?: TrackSegment;
+        }
+      > = {};
+
+      for (const index of Object.values(typedFragmentIndex)) {
+        // Create track info (synthetic for JIT, real for asset)
+        const track = this.createTrackInfo(index);
+        log("trace: processing track", {
+          trackId: index.track,
+          type: index.type,
+        });
+
+        const segment = index.segments
+          .toReversed()
+          .find((segment: TrackSegment) => {
+            const segmentStartMs = (segment.dts / track.timescale) * 1000;
+            return segmentStartMs <= seekMs;
+          });
+
+        const nextSegment = index.segments.find((segment: TrackSegment) => {
+          const segmentStartMs = (segment.dts / track.timescale) * 1000;
+          return segmentStartMs > seekMs;
+        });
+
+        if (segment) {
+          result[index.track] = { segment, track, nextSegment };
+          log("trace: found segment for track", {
+            trackId: index.track,
+            segmentDts: segment.dts,
+            hasNextSegment: !!nextSegment,
+          });
+        }
+      }
+
+      log("🔍 SIGNAL: seekTask calculation complete", {
+        trackCount: Object.keys(result).length,
+        signalAborted: signal.aborted,
+      });
+      return result;
+    },
+  });
 }
 
-function processFFTData(fftData: Uint8Array, zeroThresholdPercent = 0.1) {
+function processFFTData(
+  fftData: Uint8Array,
+  zeroThresholdPercent = 0.1,
+): Uint8Array {
   // Step 1: Determine the threshold for zeros
   const totalBins = fftData.length;
   const zeroThresholdCount = Math.floor(totalBins * zeroThresholdPercent);
@@ -823,8 +1859,7 @@ function processFFTData(fftData: Uint8Array, zeroThresholdPercent = 0.1) {
   let cutoffIndex = totalBins; // Default to the end of the array
 
   for (let i = totalBins - 1; i >= 0; i--) {
-    // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-    if (fftData[i]! < 10) {
+    if (fftData[i] ?? 0 < 10) {
       zeroCount++;
     } else {
       // If we encounter a non-zero value, we can stop
@@ -850,14 +1885,13 @@ function processFFTData(fftData: Uint8Array, zeroThresholdPercent = 0.1) {
     const attenuationProgress =
       (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
     const attenuationFactor = Math.max(0, 1 - attenuationProgress);
-    // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-    resampledData[i] = Math.floor(resampledData[i]! * attenuationFactor);
+    resampledData[i] = Math.floor((resampledData[i] ?? 0) * attenuationFactor);
   }
 
   return resampledData;
 }
 
-function interpolateData(data: Uint8Array, targetSize: number) {
+function interpolateData(data: Uint8Array, targetSize: number): Uint8Array {
   const resampled = new Uint8Array(targetSize);
   const dataLength = data.length;
 
@@ -869,13 +1903,11 @@ function interpolateData(data: Uint8Array, targetSize: number) {
 
     // Handle edge cases
     if (index >= dataLength - 1) {
-      // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-      resampled[i] = data[dataLength - 1]!; // Last value
+      resampled[i] = data[dataLength - 1] ?? 0; // Last value
     } else {
       // Linear interpolation
       resampled[i] = Math.round(
-        // biome-ignore lint/style/noNonNullAssertion: Manual bounds check
-        data[index]! * (1 - fraction) + data[index + 1]! * fraction,
+        (data[index] ?? 0) * (1 - fraction) + (data[index + 1] ?? 0) * fraction,
       );
     }
   }