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

package/src/elements/EFMedia.ts

@@ -1,14 +1,22 @@
-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 { css, LitElement, type PropertyValueMap } from "lit";
 import { property, state } from "lit/decorators.js";
-import type * as MP4Box from "mp4box";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { JitTranscodingClient } from "../JitTranscodingClient.js";
+
+import type { AudioSpan } from "../transcoding/types/index.ts";
+import { UrlGenerator } from "../transcoding/utils/UrlGenerator.ts";
+// Audio task imports
+import { makeAudioBufferTask } from "./EFMedia/audioTasks/makeAudioBufferTask.ts";
+import { makeAudioFrequencyAnalysisTask } from "./EFMedia/audioTasks/makeAudioFrequencyAnalysisTask.ts";
+import { makeAudioInitSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioInitSegmentFetchTask.ts";
+import { makeAudioInputTask } from "./EFMedia/audioTasks/makeAudioInputTask.ts";
+import { makeAudioSeekTask } from "./EFMedia/audioTasks/makeAudioSeekTask.ts";
+import { makeAudioSegmentFetchTask } from "./EFMedia/audioTasks/makeAudioSegmentFetchTask.ts";
+import { makeAudioSegmentIdTask } from "./EFMedia/audioTasks/makeAudioSegmentIdTask.ts";
+import { makeAudioTimeDomainAnalysisTask } from "./EFMedia/audioTasks/makeAudioTimeDomainAnalysisTask.ts";
+import { AudioElementFactory } from "./EFMedia/services/AudioElementFactory.js";
+// Import extracted services and utilities
+import { MediaSourceService } from "./EFMedia/services/MediaSourceService.js";
+// Common task imports
+import { makeMediaEngineTask } from "./EFMedia/tasks/makeMediaEngineTask.ts";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
@@ -20,41 +28,9 @@ declare global {
   var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
 }
 
-const log = debug("ef:elements:EFMedia");
-
 const freqWeightsCache = new Map<number, Float32Array>();
 
-class LRUCache<K, V> {
-  private cache = new Map<K, V>();
-  private readonly maxSize: number;
-
-  constructor(maxSize: number) {
-    this.maxSize = maxSize;
-  }
-
-  get(key: K): V | undefined {
-    const value = this.cache.get(key);
-    if (value) {
-      // Refresh position by removing and re-adding
-      this.cache.delete(key);
-      this.cache.set(key, value);
-    }
-    return value;
-  }
-
-  set(key: K, value: V): void {
-    if (this.cache.has(key)) {
-      this.cache.delete(key);
-    } else if (this.cache.size >= this.maxSize) {
-      // Remove oldest entry (first item in map)
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, value);
-  }
-}
+export class IgnorableError extends Error {}
 
 export const deepGetMediaElements = (
   element: Element,
@@ -75,6 +51,37 @@ export class EFMedia extends EFTargetable(
     assetType: "isobmff_files",
   }),
 ) {
+  // Sample buffer size configuration
+  static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
+  static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
+
+  static get observedAttributes() {
+    // biome-ignore lint/complexity/noThisInStatic: We need to access super
+    const parentAttributes = super.observedAttributes || [];
+    return [
+      ...parentAttributes,
+      "mute",
+      "fft-size",
+      "fft-decay",
+      "fft-gain",
+      "interpolate-frequencies",
+      "asset-id",
+      "audio-buffer-duration",
+      "max-audio-buffer-fetches",
+      "enable-audio-buffering",
+    ];
+  }
+
+  // Services for media source and audio element management
+  private mediaSourceService = new MediaSourceService({
+    onError: (error) => {
+      console.error("🎵 [EFMedia] MediaSourceService error:", error);
+    },
+    onReady: () => {},
+  });
+
+  private audioElementFactory = new AudioElementFactory();
+
   static styles = [
     css`
       :host {
@@ -89,722 +96,68 @@ export class EFMedia extends EFTargetable(
   currentTimeMs = 0;
 
   /**
-   * 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)
+   * Duration in milliseconds for audio buffering ahead of current time
+   * @domAttribute "audio-buffer-duration"
    */
-  private _mode: "asset" | "jit-transcode" | "auto" = "auto";
+  @property({ type: Number, attribute: "audio-buffer-duration" })
+  audioBufferDurationMs = 30000; // 30 seconds
 
   /**
-   * Get the mode, prioritizing attribute values over property values
+   * Maximum number of concurrent audio segment fetches for buffering
+   * @domAttribute "max-audio-buffer-fetches"
    */
-  get mode(): "asset" | "jit-transcode" | "auto" {
-    const attr = this.getAttribute("mode") as
-      | ("asset" | "jit-transcode" | "auto")
-      | null;
-    return attr || this._mode || "auto";
-  }
-
-  set mode(value: "asset" | "jit-transcode" | "auto") {
-    const oldValue = this.mode;
-    this._mode = value;
-    this.setAttribute("mode", value);
-    this.requestUpdate("mode", oldValue);
-  }
-
-  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");
-    }
-
-    // Manually sync attributes to properties for better control
-    const prefetchSegmentsAttr = this.getAttribute("prefetch-segments");
-    if (prefetchSegmentsAttr !== null) {
-      this.prefetchSegments = Number.parseInt(prefetchSegmentsAttr, 10) || 3;
-    }
-
-    const cacheSizeAttr = this.getAttribute("cache-size");
-    if (cacheSizeAttr !== null) {
-      this.cacheSize = Number.parseInt(cacheSizeAttr, 10) || 20;
-    }
-
-    const enablePrefetchAttr = this.getAttribute("enable-prefetch");
-    if (enablePrefetchAttr !== null) {
-      this.enablePrefetch = enablePrefetchAttr === "true";
-    }
-  }
+  @property({ type: Number, attribute: "max-audio-buffer-fetches" })
+  maxAudioBufferFetches = 2;
 
   /**
-   * Configuration for JIT transcoding performance optimizations
+   * Enable/disable audio buffering system
+   * @domAttribute "enable-audio-buffering"
    */
-  @property({ type: Number, attribute: "prefetch-segments" })
-  prefetchSegments = 3;
-
-  @property({ type: Number, attribute: "cache-size" })
-  cacheSize = 20;
-
-  @property({ type: Boolean, attribute: "enable-prefetch" })
-  enablePrefetch = true;
+  @property({ type: Boolean, attribute: "enable-audio-buffering" })
+  enableAudioBuffering = true;
 
   /**
-   * Loading states for JIT transcoding
+   * Mute/unmute the media element
+   * @domAttribute "mute"
    */
-  @state()
-  jitLoadingState: "idle" | "metadata" | "segments" | "error" = "idle";
-
-  @state()
-  jitErrorMessage: string | null = null;
-
-  @state()
-  jitCacheStats: { size: number; hitRate: number; efficiency: number } | null =
-    null;
+  @property({
+    type: Boolean,
+    attribute: "mute",
+    reflect: true,
+  })
+  mute = false;
 
   /**
-   * Detected loading mode based on URL patterns and manual override
+   * FFT size for frequency analysis
+   * @domAttribute "fft-size"
    */
-  get effectiveMode(): "asset" | "jit-transcode" {
-    // First check for explicit manual overrides
-    const actualMode = this.mode;
-
-    if (actualMode === "asset" || actualMode === "jit-transcode") {
-      return actualMode;
-    }
-
-    // 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
-    }
-
-    if (!this.src) {
-      return "asset"; // Default to asset mode if no src
-    }
-
-    if (JitTranscodingClient.isJitTranscodeEligible(this.src)) {
-      return "jit-transcode";
-    }
-
-    return "asset"; // Default to asset mode for everything else
-  }
-
-  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,
-      });
-    },
-  });
+  @property({ type: Number, attribute: "fft-size", reflect: true })
+  fftSize = 128;
 
   /**
-   * JIT transcoding metadata loader
-   * Loads video metadata for JIT transcoded content
+   * FFT decay rate for frequency analysis
+   * @domAttribute "fft-decay"
    */
-  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;
-      }
-      await this.jitClientTask.taskComplete;
-      const jitClient = this.jitClientTask.value;
-      if (!src || !jitClient) {
-        return null;
-      }
-
-      try {
-        this.jitLoadingState = "metadata";
-        this.jitErrorMessage = null;
-
-        const metadata = await jitClient.loadVideoMetadata(src);
-
-        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;
-      }
-    },
-    onComplete: () => {
-      if (this.jitLoadingState === "metadata") {
-        this.jitLoadingState = "idle";
-      }
-      this.requestUpdate("intrinsicDurationMs");
-      this.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
-      this.rootTimegroup?.requestUpdate("durationMs");
-    },
-  });
-
-  #assetId: string | null = null;
+  @property({ type: Number, attribute: "fft-decay", reflect: true })
+  fftDecay = 8;
 
   /**
-   * The unique identifier for the media asset.
-   * This property can be set programmatically or via the "asset-id" attribute.
-   * @domAttribute "asset-id"
+   * FFT gain for frequency analysis
+   * @domAttribute "fft-gain"
    */
-  @property({ type: String, attribute: "asset-id", reflect: true })
-  set assetId(value: string | null) {
-    this.#assetId = value;
-  }
-
-  get assetId() {
-    return this.#assetId || this.getAttribute("asset-id");
-  }
-
-  fragmentIndexPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
-    }
-    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}`;
-  }
-
-  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 mediaDurationTask() {
-    return this.fragmentIndexTask;
-  }
-
-  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;
-    return Math.max(...durations);
-  }
-
-  #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,
-    onError: (error) => {
-      console.error("audioBufferTask error", error);
-    },
-    args: () => [this.mediaSegmentsTask.value, this.seekTask.value] as const,
-    task: async ([files, segments], { signal: _signal }) => {
-      if (!files || !segments) return;
-
-      if (!this.defaultAudioTrackId) return;
-
-      const segment = segments[this.defaultAudioTrackId];
-      if (!segment) return;
-
-      const audioFile = files[this.defaultAudioTrackId];
-      if (!audioFile) return;
-
-      return {
-        buffer: await this.#audioContext.decodeAudioData(
-          await audioFile.arrayBuffer(),
-        ),
-        startOffsetMs: (segment.segment.cts / segment.track.timescale) * 1000,
-      };
-    },
-  });
-
-  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 -=
-        this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceInMs ?? 0);
-    }
-    if (this.sourceOutMs) {
-      toMs -=
-        this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceOutMs ?? 0);
-    }
-    fromMs -= this.startTimeMs - (this.trimStartMs ?? 0);
-    toMs -= this.startTimeMs - (this.trimStartMs ?? 0);
-
-    await this.fragmentIndexTask.taskComplete;
-
-    const fragmentIndex = this.fragmentIndexTask.value as Record<
-      number,
-      TrackFragmentIndex
-    > | null;
-    const audioTrackId = this.defaultAudioTrackId;
-    if (!audioTrackId) {
-      return undefined;
-    }
-
-    const audioTrackIndex = fragmentIndex?.[audioTrackId];
-    if (!audioTrackIndex) {
-      return undefined;
-    }
-
-    // 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 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) {
-      return undefined;
-    }
-    const lastFragment = fragments[fragments.length - 1];
-    if (!lastFragment) {
-      return undefined;
-    }
-    const fragmentStart = firstFragment.offset;
-    const fragmentEnd = lastFragment.offset + lastFragment.size;
-
-    const audioFragmentRequest = this.fetch(
-      this.fragmentTrackPath(String(audioTrackId)),
-      {
-        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd - 1}` },
-      },
-    );
-
-    const initResponse = await audioInitFragmentRequest;
-    const dataResponse = await audioFragmentRequest;
-
-    const initBuffer = await initResponse.arrayBuffer();
-    const dataBuffer = await dataResponse.arrayBuffer();
-
-    const audioBlob = new Blob([initBuffer, dataBuffer], {
-      type: "audio/mp4",
-    });
-
-    return {
-      blob: audioBlob,
-      startMs:
-        (firstFragment.dts / audioTrackIndex.timescale) * 1000 -
-        (this.trimStartMs ?? 0),
-      endMs:
-        (lastFragment.dts / audioTrackIndex.timescale) * 1000 +
-        (lastFragment.duration / audioTrackIndex.timescale) * 1000 -
-        (this.trimEndMs ?? 0),
-    };
-  }
+  @property({ type: Number, attribute: "fft-gain", reflect: true })
+  fftGain = 3.0;
 
   /**
-   * Encode an AudioBuffer to a WAV blob
+   * Enable/disable frequency interpolation
+   * @domAttribute "interpolate-frequencies"
    */
-  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));
-    this.requestUpdate("fft-size", oldValue);
-  }
-
-  set fftDecay(value: number) {
-    const oldValue = this.fftDecay;
-    this.setAttribute("fft-decay", String(value));
-    this.requestUpdate("fft-decay", oldValue);
-  }
-
-  get fftSize() {
-    return Number.parseInt(this.getAttribute("fft-size") ?? "128", 10);
-  }
-
-  get fftDecay() {
-    return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
-  }
-
-  set interpolateFrequencies(value: boolean) {
-    const oldValue = this.interpolateFrequencies;
-    this.setAttribute("interpolate-frequencies", String(value));
-    this.requestUpdate("interpolate-frequencies", oldValue);
-  }
-
-  get interpolateFrequencies() {
-    return this.getAttribute("interpolate-frequencies") !== "false";
-  }
-
-  get shouldInterpolateFrequencies() {
-    if (this.hasAttribute("interpolate-frequencies")) {
-      return this.getAttribute("interpolate-frequencies") !== "false";
-    }
-    return false;
-  }
-
-  private static readonly DECAY_WEIGHT = 0.7;
+  @property({
+    type: Boolean,
+    attribute: "interpolate-frequencies",
+    reflect: true,
+  })
+  interpolateFrequencies = false;
 
   // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
   get FREQ_WEIGHTS() {
@@ -828,503 +181,39 @@ export class EFMedia extends EFTargetable(
     return weights;
   }
 
-  #byteTimeDomainCache = new LRUCache<string, Uint8Array>(100);
-
-  byteTimeDomainTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    onError: (error) => {
-      console.error("byteTimeDomainTask error", error);
-    },
-    args: () =>
-      [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies,
-      ] as const,
-    task: async () => {
-      await this.audioBufferTask.taskComplete;
-      if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs < 0) return null;
-
-      const currentTimeMs = this.currentSourceTimeMs;
-      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
-      const audioBuffer = this.audioBufferTask.value.buffer;
-
-      const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
-      const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
-      if (cachedData) return cachedData;
-
-      // Process multiple frames with decay, similar to the reference code
-      const framesData = await Promise.all(
-        Array.from({ length: this.fftDecay }, async (_, frameIndex) => {
-          const frameOffset = frameIndex * (1000 / 30);
-          const startTime = Math.max(
-            0,
-            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
-          );
-
-          const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
-          const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
-          if (cachedFrame) return cachedFrame;
-
-          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;
-
-          // Create analyzer for PCM data
-          const analyser = audioContext.createAnalyser();
-          analyser.fftSize = this.fftSize; // Ensure enough samples
-          analyser.minDecibels = -90;
-          analyser.maxDecibels = -20;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = this.fftGain; // Amplify the signal
-
-          source.connect(gainNode);
-          gainNode.connect(analyser);
-          analyser.connect(audioContext.destination);
-
-          source.start(0, startTime, 1 / 30);
-
-          const dataLength = analyser.fftSize / 2;
-          try {
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(dataLength);
-            analyser.getByteTimeDomainData(frameData);
-
-            // const points = frameData;
-            // Calculate RMS and midpoint values
-            const points = new Uint8Array(dataLength);
-            for (let i = 0; i < dataLength; i++) {
-              const pointSamples = frameData.slice(
-                i * (frameData.length / dataLength),
-                (i + 1) * (frameData.length / dataLength),
-              );
-
-              // Calculate RMS while preserving sign
-              const rms = Math.sqrt(
-                pointSamples.reduce((sum, sample) => {
-                  const normalized = (sample - 128) / 128;
-                  return sum + normalized * normalized;
-                }, 0) / pointSamples.length,
-              );
-
-              // Get average sign of the samples to determine direction
-              const avgSign = Math.sign(
-                pointSamples.reduce((sum, sample) => sum + (sample - 128), 0),
-              );
-
-              // Convert RMS back to byte range, preserving direction
-              points[i] = Math.min(255, Math.round(128 + avgSign * rms * 128));
-            }
-
-            this.#byteTimeDomainCache.set(cacheKey, points);
-            return points;
-          } finally {
-            source.disconnect();
-            analyser.disconnect();
-          }
-        }),
-      );
-
-      // Combine frames with decay weighting
-      const frameLength = framesData[0]?.length ?? 0;
-      const smoothedData = new Uint8Array(frameLength);
-
-      for (let i = 0; i < frameLength; i++) {
-        let weightedSum = 0;
-        let weightSum = 0;
-
-        framesData.forEach((frame, frameIndex) => {
-          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          weightedSum += (frame[i] ?? 0) * decayWeight;
-          weightSum += decayWeight;
-        });
-
-        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-      }
-
-      this.#byteTimeDomainCache.set(smoothedKey, smoothedData);
-      return smoothedData;
-    },
-  });
-
-  #frequencyDataCache = new LRUCache<string, Uint8Array>(100);
-
-  frequencyDataTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    onError: (error) => {
-      console.error("frequencyDataTask error", error);
-    },
-    args: () =>
-      [
-        this.audioBufferTask.status,
-        this.currentSourceTimeMs,
-        this.fftSize,
-        this.fftDecay,
-        this.fftGain,
-        this.shouldInterpolateFrequencies,
-      ] as const,
-    task: async () => {
-      await this.audioBufferTask.taskComplete;
-      if (!this.audioBufferTask.value) return null;
-      if (this.currentSourceTimeMs < 0) return null;
-
-      const currentTimeMs = this.currentSourceTimeMs;
-      const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
-      const audioBuffer = this.audioBufferTask.value.buffer;
-      const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
-
-      const cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
-      if (cachedSmoothedData) {
-        return cachedSmoothedData;
-      }
-
-      const framesData = await Promise.all(
-        Array.from({ length: this.fftDecay }, async (_, i) => {
-          const frameOffset = i * (1000 / 30);
-          const startTime = Math.max(
-            0,
-            (currentTimeMs - frameOffset - startOffsetMs) / 1000,
-          );
-
-          // Cache key for this specific frame
-          const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
-
-          // Check cache for this specific frame
-          const cachedFrame = this.#frequencyDataCache.get(cacheKey);
-          if (cachedFrame) {
-            return cachedFrame;
-          }
-
-          // 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;
-          analyser.maxDecibels = -10;
-
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = this.fftGain;
-
-          const filter = audioContext.createBiquadFilter();
-          filter.type = "bandpass";
-          filter.frequency.value = 15000;
-          filter.Q.value = 0.05;
-
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer = audioBuffer;
-
-          audioBufferSource.connect(filter);
-          filter.connect(gainNode);
-          gainNode.connect(analyser);
-          analyser.connect(audioContext.destination);
-
-          audioBufferSource.start(0, startTime, 1 / 30);
-
-          try {
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(this.fftSize / 2);
-            analyser.getByteFrequencyData(frameData);
-
-            // Cache this frame's analysis
-            this.#frequencyDataCache.set(cacheKey, frameData);
-            return frameData;
-          } finally {
-            audioBufferSource.disconnect();
-            analyser.disconnect();
-          }
-        }),
-      );
-
-      const frameLength = framesData[0]?.length ?? 0;
-
-      // Combine frames with decay
-      const smoothedData = new Uint8Array(frameLength);
-      for (let i = 0; i < frameLength; i++) {
-        let weightedSum = 0;
-        let weightSum = 0;
-
-        framesData.forEach((frame, frameIndex) => {
-          const decayWeight = EFMedia.DECAY_WEIGHT ** frameIndex;
-          weightedSum += (frame[i] ?? 0) * decayWeight;
-          weightSum += decayWeight;
-        });
-
-        smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
-      }
-
-      // Apply frequency weights using instance FREQ_WEIGHTS
-      smoothedData.forEach((value, i) => {
-        const freqWeight = this.FREQ_WEIGHTS[i] ?? 0;
-        smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
-      });
-
-      // Only return the lower half of the frequency data
-      // The top half is zeroed out, which makes for aesthetically unpleasing waveforms
-      const slicedData = smoothedData.slice(
-        0,
-        Math.floor(smoothedData.length / 2),
-      );
-      const processedData = this.shouldInterpolateFrequencies
-        ? processFFTData(slicedData)
-        : slicedData;
-      this.#frequencyDataCache.set(smoothedKey, processedData);
-      return processedData;
-    },
-  });
-
-  set fftGain(value: number) {
-    const oldValue = this.fftGain;
-    this.setAttribute("fft-gain", String(value));
-    this.requestUpdate("fft-gain", oldValue);
-  }
-
-  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;
+  // Helper getter for backwards compatibility
+  get shouldInterpolateFrequencies() {
+    return this.interpolateFrequencies;
   }
 
-  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;
+  get urlGenerator() {
+    return new UrlGenerator(() => this.apiHost ?? "");
   }
 
-  private calculateJitSeekResult(
-    fragmentIndex: Record<number, TrackFragmentIndex>,
-    seekMs: number,
-  ) {
-    const result: Record<
-      string,
-      {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-      }
-    > = {};
+  mediaEngineTask = makeMediaEngineTask(this);
 
-    for (const index of Object.values(fragmentIndex)) {
-      const track = this.createTrackInfo(index);
+  audioSegmentIdTask = makeAudioSegmentIdTask(this);
+  audioInitSegmentFetchTask = makeAudioInitSegmentFetchTask(this);
+  audioSegmentFetchTask = makeAudioSegmentFetchTask(this);
+  audioInputTask = makeAudioInputTask(this);
+  audioSeekTask = makeAudioSeekTask(this);
 
-      const segment = index.segments.toReversed().find((segment) => {
-        const segmentStartMs = (segment.dts / track.timescale) * 1000;
-        return segmentStartMs <= seekMs;
-      });
+  audioBufferTask = makeAudioBufferTask(this);
 
-      const nextSegment = index.segments.find((segment) => {
-        return (segment.dts / track.timescale) * 1000 > seekMs;
-      });
+  // Audio analysis tasks for frequency and time domain analysis
+  byteTimeDomainTask = makeAudioTimeDomainAnalysisTask(this);
+  frequencyDataTask = makeAudioFrequencyAnalysisTask(this);
 
-      if (segment) {
-        result[index.track] = { segment, track, nextSegment };
-      }
-    }
-
-    return result;
-  }
+  /**
+   * 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 })
+  assetId: string | null = null;
 
-  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;
+  get intrinsicDurationMs() {
+    return this.mediaEngineTask.value?.durationMs ?? 0;
   }
 
   protected updated(
@@ -1346,59 +235,8 @@ export class EFMedia extends EFTargetable(
     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
+  private _desiredSeekTimeMs = 0; // Initialize to 0 for proper segment loading
 
   get desiredSeekTimeMs() {
     return this._desiredSeekTimeMs;
@@ -1414,503 +252,75 @@ export class EFMedia extends EFTargetable(
     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,
-): Uint8Array {
-  // Step 1: Determine the threshold for zeros
-  const totalBins = fftData.length;
-  const zeroThresholdCount = Math.floor(totalBins * zeroThresholdPercent);
-
-  // Step 2: Interrogate the FFT output to find the cutoff point
-  let zeroCount = 0;
-  let cutoffIndex = totalBins; // Default to the end of the array
+  /**
+   * Main integration method for EFTimegroup audio playback
+   * Now powered by clean, testable utility functions
+   */
+  async fetchAudioSpanningTime(
+    fromMs: number,
+    toMs: number,
+    signal: AbortSignal = new AbortController().signal,
+  ): Promise<AudioSpan> {
+    // Reset MediaSourceManager for fresh playback session
+    await this.mediaSourceService.initialize();
+
+    // Use the clean, testable utility function
+    const { fetchAudioSpanningTime: fetchAudioSpan } = await import(
+      "./EFMedia/shared/AudioSpanUtils.ts"
+    );
 
-  for (let i = totalBins - 1; i >= 0; i--) {
-    if (fftData[i] ?? 0 < 10) {
-      zeroCount++;
-    } else {
-      // If we encounter a non-zero value, we can stop
-      if (zeroCount >= zeroThresholdCount) {
-        cutoffIndex = i + 1; // Include this index
-        break;
-      }
-    }
+    return fetchAudioSpan(this, fromMs, toMs, signal);
   }
 
-  if (cutoffIndex < zeroThresholdCount) {
-    return fftData;
+  /**
+   * Get the HTML audio element for ContextMixin integration
+   */
+  get audioElement(): HTMLAudioElement | null {
+    return this.mediaSourceService.getAudioElement();
   }
 
-  // Step 3: Resample the "good" portion of the data
-  const goodData = fftData.slice(0, cutoffIndex);
-  const resampledData = interpolateData(goodData, fftData.length);
+  /**
+   * Check if an audio segment is cached in the unified buffer system
+   * Now uses the same caching approach as video for consistency
+   */
+  getCachedAudioSegment(segmentId: number): boolean {
+    return this.audioBufferTask.value?.cachedSegments.has(segmentId) ?? false;
+  }
 
-  // Step 4: Attenuate the top 10% of interpolated samples
-  const attenuationStartIndex = Math.floor(totalBins * 0.9);
-  for (let i = attenuationStartIndex; i < totalBins; i++) {
-    // Calculate attenuation factor that goes from 1 to 0 over the top 10%
-    const attenuationProgress =
-      (i - attenuationStartIndex) / (totalBins - attenuationStartIndex) + 0.2;
-    const attenuationFactor = Math.max(0, 1 - attenuationProgress);
-    resampledData[i] = Math.floor((resampledData[i] ?? 0) * attenuationFactor);
+  /**
+   * Get cached audio segments from the unified buffer system
+   * Now uses the same caching approach as video for consistency
+   */
+  getCachedAudioSegments(segmentIds: number[]): Set<number> {
+    const bufferState = this.audioBufferTask.value;
+    if (!bufferState) {
+      return new Set();
+    }
+    return new Set(
+      segmentIds.filter((id) => bufferState.cachedSegments.has(id)),
+    );
   }
 
-  return resampledData;
-}
+  /**
+   * Get MediaElementAudioSourceNode for ContextMixin integration
+   * Uses AudioElementFactory for proper caching and lifecycle management
+   */
+  async getMediaElementSource(
+    audioContext: AudioContext,
+  ): Promise<MediaElementAudioSourceNode> {
+    return this.audioElementFactory.createMediaElementSource(
+      audioContext,
+      this.mediaSourceService,
+    );
+  }
 
-function interpolateData(data: Uint8Array, targetSize: number): Uint8Array {
-  const resampled = new Uint8Array(targetSize);
-  const dataLength = data.length;
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
 
-  for (let i = 0; i < targetSize; i++) {
-    // Calculate the corresponding index in the original data
-    const ratio = (i / (targetSize - 1)) * (dataLength - 1);
-    const index = Math.floor(ratio);
-    const fraction = ratio - index;
+    // Clean up MediaSource service
+    this.mediaSourceService.cleanup();
 
-    // Handle edge cases
-    if (index >= dataLength - 1) {
-      resampled[i] = data[dataLength - 1] ?? 0; // Last value
-    } else {
-      // Linear interpolation
-      resampled[i] = Math.round(
-        (data[index] ?? 0) * (1 - fraction) + (data[index + 1] ?? 0) * fraction,
-      );
-    }
+    // Clear audio element factory cache
+    this.audioElementFactory.clearCache();
   }
-
-  return resampled;
 }