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

package/src/elements/EFMedia.browsertest.ts

@@ -1,16 +1,37 @@
+import { css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { v4 } from "uuid";
-import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import { EFMedia } from "./EFMedia.js";
-import "../gui/EFWorkbench.js";
+import type { VideoSample } from "mediabunny";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../test/useMSW.js";
+
+import type { EFConfiguration } from "../gui/EFConfiguration.js";
 import "../gui/EFPreview.js";
+import "../gui/EFWorkbench.js";
+import { JitMediaEngine } from "./EFMedia/JitMediaEngine.js";
+import { EFMedia } from "./EFMedia.js";
 import "./EFTimegroup.js";
-import { createTestFragmentIndex } from "TEST/createTestFragmentIndex.js";
-import { useMockWorker } from "TEST/useMockWorker.js";
-import { http, HttpResponse } from "msw";
+import type { EFTimegroup } from "./EFTimegroup.js";
+import "./EFVideo.js";
+import { UrlGenerator } from "../transcoding/utils/UrlGenerator.js";
+import type { EFVideo } from "./EFVideo.js";
 
 @customElement("test-media")
-class TestMedia extends EFMedia {}
+class TestMedia extends EFMedia {
+  static styles = [
+    ...EFMedia.styles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      video {
+        width: 100%;
+        height: 100%;
+      }
+  `,
+  ];
+}
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,313 +39,717 @@ declare global {
   }
 }
 
-describe("EFMedia", () => {
-  const worker = useMockWorker();
+const test = baseTest.extend<{
+  timegroup: EFTimegroup;
+  jitVideo: EFVideo;
+  configuration: EFConfiguration;
+  urlGenerator: UrlGenerator;
+  host: EFVideo;
+}>({
+  timegroup: async ({}, use) => {
+    const timegroup = document.createElement("ef-timegroup");
+    timegroup.setAttribute("mode", "contain");
+    await use(timegroup);
+  },
+  configuration: async ({ expect }, use) => {
+    const configuration = document.createElement("ef-configuration");
+    configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
+    // Use integrated proxy server (same host/port as test runner)
+    const apiHost = `${window.location.protocol}//${window.location.host}`;
+    configuration.setAttribute("api-host", apiHost);
+    configuration.apiHost = apiHost;
+    document.body.appendChild(configuration);
+    await use(configuration);
+    // configuration.remove();
+  },
+  urlGenerator: async ({}, use) => {
+    // UrlGenerator points to integrated proxy server (same host/port as test runner)
+    const apiHost = `${window.location.protocol}//${window.location.host}`;
+    const generator = new UrlGenerator(() => apiHost);
+    await use(generator);
+  },
+  host: async ({ configuration }, use) => {
+    const host = document.createElement("ef-video");
+    configuration.appendChild(host);
+    host.src = "http://web:3000/head-moov-480p.mp4";
+    await use(host);
+  },
+  jitVideo: async ({ configuration, timegroup, host }, use) => {
+    timegroup.append(host);
+    configuration.append(timegroup);
+    await host.mediaEngineTask.run();
+    await use(host);
+  },
+});
 
-  test("should be defined", () => {
-    const element = document.createElement("test-media");
-    expect(element.tagName).toBe("TEST-MEDIA");
+describe("JIT Media Engine", () => {
+  test("initializes JitMediaEngine", async ({ jitVideo, expect }) => {
+    const mediaEngine = jitVideo.mediaEngineTask.value;
+    expect(mediaEngine).toBeInstanceOf(JitMediaEngine);
+  });
+
+  test("loads media duration", async ({ jitVideo, expect }) => {
+    expect(jitVideo.intrinsicDurationMs).toBe(10_000);
   });
 
-  describe("when rendering", () => {
-    beforeEach(() => {
-      // @ts-ignore
-      window.FRAMEGEN_BRIDGE = true;
+  describe("video seek on load", () => {
+    test("seeks to time specified on element", async ({
+      configuration,
+      expect,
+      timegroup,
+    }) => {
+      const element = document.createElement("ef-video");
+      element.src = "http://web:3000/head-moov-480p.mp4";
+      timegroup.append(element);
+      configuration.append(timegroup);
+
+      // Initialize media engine first
+      await element.mediaEngineTask.run();
+      await element.videoSegmentIdTask.run();
+
+      // Then set the time - this should trigger proper synchronization
+      timegroup.currentTimeMs = 2200;
+      element.desiredSeekTimeMs = 2200;
+
+      const sample = await element.videoSeekTask.taskComplete;
+
+      expect(sample).toBeDefined();
+      expect(sample?.timestamp).toEqual(2.2);
     });
-    afterEach(() => {
-      // @ts-ignore
-      // biome-ignore lint/performance/noDelete: <explanation>
-      delete window.FRAMEGEN_BRIDGE;
+  });
+
+  describe("video seeking", () => {
+    test("seeks to 0 seconds and loads first frame", async ({
+      timegroup,
+      jitVideo,
+      expect,
+    }) => {
+      timegroup.currentTimeMs = 0;
+      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
+      expect(frame).toBeDefined();
+      expect(frame?.timestamp).toEqual(0);
     });
-    test("fragmentIndexPath uses http:// protocol", () => {
-      const workbench = document.createElement("ef-workbench");
-      const element = document.createElement("test-media");
-      workbench.appendChild(element);
-      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.mp4";
-      expect(element.fragmentIndexPath()).toBe(
-        "https://editframe.dev/api/v1/isobmff_files/550e8400-e29b-41d4-a716-446655440000:example.mp4/index",
-      );
+
+    test("seeks to 3 seconds and loads frame", async ({
+      timegroup,
+      jitVideo,
+      expect,
+    }) => {
+      timegroup.currentTimeMs = 3_000;
+      jitVideo.desiredSeekTimeMs = 3_000;
+      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
+      expect(frame).toBeDefined();
+      expect(frame?.timestamp).toEqual(3);
     });
 
-    test("fragmentTrackPath uses http:// protocol", () => {
-      const workbench = document.createElement("ef-workbench");
-      const element = document.createElement("test-media");
-      workbench.appendChild(element);
-      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.mp4";
-      expect(element.fragmentTrackPath("1")).toBe(
-        "https://editframe.dev/api/v1/isobmff_tracks/550e8400-e29b-41d4-a716-446655440000:example.mp4/1",
-      );
+    test("seeks to 5 seconds and loads frame", async ({
+      timegroup,
+      jitVideo,
+      expect,
+    }) => {
+      timegroup.currentTimeMs = 5_000;
+      jitVideo.desiredSeekTimeMs = 5_000;
+      const frame = await (jitVideo as any).videoSeekTask.taskComplete;
+      expect(frame).toBeDefined();
+      expect(frame?.timestamp).toEqual(5);
     });
+
+    test("seeks ahead in 50ms increments", async ({
+      timegroup,
+      jitVideo,
+      expect,
+    }) => {
+      timegroup.currentTimeMs = 0;
+      let frame: VideoSample | undefined;
+      for (let i = 0; i <= 3000; i += 50) {
+        timegroup.currentTimeMs = i;
+        jitVideo.desiredSeekTimeMs = i;
+        frame = await (jitVideo as any).videoSeekTask.taskComplete;
+        expect(frame).toBeDefined();
+      }
+      expect(frame?.timestamp).toEqual(3);
+    });
+  });
+});
+
+describe("EFMedia", () => {
+  beforeEach(() => {
+    // Clean up DOM
+    while (document.body.children.length) {
+      document.body.children[0]?.remove();
+    }
   });
 
-  describe("attribute: asset-id", () => {
-    test("determines fragmentIndexPath", () => {
-      const id = v4();
+  afterEach(() => {
+    // Clean up any remaining elements
+    const elements = document.querySelectorAll("test-media");
+    for (const element of elements) {
+      element.remove();
+    }
+  });
+
+  const test = baseTest.extend<{
+    element: TestMedia;
+  }>({
+    element: async ({}, use) => {
       const element = document.createElement("test-media");
-      element.setAttribute("asset-id", id);
-      expect(element.fragmentIndexPath()).toBe(
-        `https://editframe.dev/api/v1/isobmff_files/${id}/index`,
-      );
+      document.body.appendChild(element);
+      await use(element);
+      element.remove();
+    },
+  });
+
+  test("should be defined", ({ element, expect }) => {
+    expect(element.tagName).toBe("TEST-MEDIA");
+  });
+
+  describe("mute", () => {
+    test("defaults to false", ({ element, expect }) => {
+      expect(element.mute).toBe(false);
     });
 
-    test("determines fragmentTrackPath", () => {
-      const id = v4();
-      const element = document.createElement("test-media");
-      element.setAttribute("asset-id", id);
-      expect(element.fragmentTrackPath("1")).toBe(
-        `https://editframe.dev/api/v1/isobmff_tracks/${id}/1`,
-      );
+    test("reads from js property", ({ element, expect }) => {
+      element.mute = true;
+      expect(element.mute).toBe(true);
     });
 
-    test("honors apiHost in fragmentIndexPath", () => {
-      const id = v4();
-      const element = document.createElement("test-media");
-      element.setAttribute("asset-id", id);
-      const preview = document.createElement("ef-preview");
-      preview.appendChild(element);
-      preview.apiHost = "test://";
-      document.body.appendChild(preview);
-      expect(element.fragmentIndexPath()).toBe(
-        `test:///api/v1/isobmff_files/${id}/index`,
-      );
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("mute", "true");
+      expect(element.mute).toBe(true);
     });
 
-    test("honors apiHost in fragmentTrackPath", () => {
-      const id = v4();
-      const element = document.createElement("test-media");
-      element.setAttribute("asset-id", id);
-      const preview = document.createElement("ef-preview");
-      preview.appendChild(element);
-      preview.apiHost = "test://";
-      document.body.appendChild(preview);
-      expect(element.fragmentTrackPath("1")).toBe(
-        `test:///api/v1/isobmff_tracks/${id}/1`,
-      );
+    test("handles any attribute value as true (standard boolean behavior)", ({
+      element,
+      expect,
+    }) => {
+      element.setAttribute("mute", "false");
+      expect(element.mute).toBe(true); // Standard boolean attributes: any value = true
     });
-  });
 
-  describe("calculating duration", () => {
-    test("Computes duration from track fragment index", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.mute = true;
+      await element.updateComplete; // Wait for Lit to update
+      expect(element.hasAttribute("mute")).toBe(true);
+      expect(element.getAttribute("mute")).toBe(""); // Standard boolean reflection
+
+      element.mute = false;
+      await element.updateComplete; // Wait for Lit to update
+      expect(element.hasAttribute("mute")).toBe(false); // Standard boolean reflection removes attribute
+    });
+
+    describe("audio rendering", () => {
+      // Create a separate test context for audio rendering tests that need configuration
+      const audioTest = baseTest.extend<{
+        timegroup: EFTimegroup;
+        configuration: EFConfiguration;
+      }>({
+        timegroup: async ({}, use) => {
+          const timegroup = document.createElement("ef-timegroup");
+          timegroup.setAttribute("mode", "contain");
+          await use(timegroup);
+        },
+        configuration: async ({ expect }, use) => {
+          const configuration = document.createElement("ef-configuration");
+          configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
+          // Use integrated proxy server (same host/port as test runner)
+          const apiHost = `${window.location.protocol}//${window.location.host}`;
+          configuration.setAttribute("api-host", apiHost);
+          configuration.apiHost = apiHost;
+          document.body.appendChild(configuration);
+          await use(configuration);
+          // configuration.remove();
+        },
+      });
+
+      audioTest(
+        "skips muted elements during audio rendering",
+        async ({ configuration, timegroup, expect }) => {
+          // Create a muted media element
+          const mutedElement = document.createElement("test-media");
+          mutedElement.src = "http://web:3000/head-moov-480p.mp4";
+          mutedElement.mute = true;
+          timegroup.append(mutedElement);
+
+          // Create an unmuted media element
+          const unmutedElement = document.createElement("test-media");
+          unmutedElement.src = "http://web:3000/head-moov-480p.mp4";
+          unmutedElement.mute = false;
+          timegroup.append(unmutedElement);
+
+          configuration.append(timegroup);
+
+          // Wait for media engines to initialize
+          await mutedElement.mediaEngineTask.run();
+          await unmutedElement.mediaEngineTask.run();
+
+          // Spy on fetchAudioSpanningTime to verify muted element is skipped
+          const mutedFetchSpy = vi.spyOn(
+            mutedElement,
+            "fetchAudioSpanningTime",
+          );
+          const unmutedFetchSpy = vi.spyOn(
+            unmutedElement,
+            "fetchAudioSpanningTime",
           );
-        }),
+
+          // Render a short audio segment
+          try {
+            await timegroup.renderAudio(0, 1000); // 1 second
+          } catch (error) {
+            // Audio rendering might fail in test environment, but we're testing the mute logic
+            console.log("Audio rendering failed (expected in test):", error);
+          }
+
+          // Verify muted element was skipped (no fetch calls)
+          expect(mutedFetchSpy).not.toHaveBeenCalled();
+
+          // Verify unmuted element was processed (would have fetch calls if audio succeeds)
+          // Note: In test environment, this might still be 0 due to audio context limitations
+          // but the important thing is that muted element definitely wasn't called
+          const mutedCalls = mutedFetchSpy.mock.calls.length;
+          const unmutedCalls = unmutedFetchSpy.mock.calls.length;
+
+          expect(mutedCalls).toBe(0);
+          // Unmuted element should either be called (audio works) or both fail equally
+          // The key test is that muted=0 and muted < unmuted (if audio works)
+          expect(mutedCalls).toBeLessThanOrEqual(unmutedCalls);
+
+          mutedFetchSpy.mockRestore();
+          unmutedFetchSpy.mockRestore();
+        },
       );
 
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
+      audioTest(
+        "processes unmuted elements normally",
+        async ({ configuration, timegroup, expect }) => {
+          // Create an unmuted media element
+          const element = document.createElement("test-media");
+          element.src = "http://web:3000/head-moov-480p.mp4";
+          element.mute = false;
+          timegroup.append(element);
 
-      const preview = document.createElement("ef-preview");
-      preview.appendChild(element);
-      document.body.appendChild(preview);
+          configuration.append(timegroup);
 
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
+          await element.mediaEngineTask.run();
 
-      await element.trackFragmentIndexLoader.taskComplete;
+          const fetchSpy = vi.spyOn(element, "fetchAudioSpanningTime");
 
-      expect(element.durationMs).toBe(10_000);
-    });
-    test("Computes duration from track fragment index sourcein", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
-      );
+          try {
+            await timegroup.renderAudio(0, 1000);
+          } catch (error) {
+            // Audio rendering might fail in test environment
+            console.log("Audio rendering failed (expected in test):", error);
+          }
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceInMs = 1_000;
-
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
-
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
-
-      await element.trackFragmentIndexLoader.taskComplete;
-
-      expect(element.durationMs).toBe(9_000);
-      expect(timegroup.durationMs).toBe(9_000);
-    });
-    test("Computes duration from track fragment index sourcein", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
-      );
+          // The element should not have been skipped due to mute
+          // (whether it actually gets called depends on test environment audio support)
+          expect(element.mute).toBe(false);
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceInMs = 6_000;
-
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
-
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
-
-      await element.trackFragmentIndexLoader.taskComplete;
-
-      expect(element.durationMs).toBe(4_000);
-      expect(timegroup.durationMs).toBe(4_000);
-    });
-    test("Computes duration from track fragment index sourceout", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
+          fetchSpy.mockRestore();
+        },
       );
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceOutMs = 6_000;
-
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
-
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
-
-      await element.trackFragmentIndexLoader.taskComplete;
-
-      expect(element.durationMs).toBe(6_000);
-      expect(timegroup.durationMs).toBe(6_000);
-    });
-    test("Computes duration from track fragment index sourceout", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
-      );
+      audioTest(
+        "handles dynamic mute changes",
+        async ({ configuration, timegroup, expect }) => {
+          const element = document.createElement("test-media");
+          element.src = "http://web:3000/head-moov-480p.mp4";
+          element.mute = false; // Start unmuted
+          timegroup.append(element);
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceOutMs = 5_000;
-
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
-
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
-
-      await element.trackFragmentIndexLoader.taskComplete;
-
-      expect(element.durationMs).toBe(5_000);
-      expect(timegroup.durationMs).toBe(5_000);
-    });
-    test("Computes duration from track fragment index sourceout and sourcein", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
+          configuration.append(timegroup);
+
+          await element.mediaEngineTask.run();
+
+          const fetchSpy = vi.spyOn(element, "fetchAudioSpanningTime");
+
+          // First render - unmuted
+          try {
+            await timegroup.renderAudio(0, 500);
+          } catch (error) {
+            console.log("Audio rendering failed (expected in test):", error);
+          }
+
+          const firstCallCount = fetchSpy.mock.calls.length;
+
+          // Mute the element
+          element.mute = true;
+          await element.updateComplete;
+
+          // Second render - muted (should be skipped)
+          try {
+            await timegroup.renderAudio(500, 1000);
+          } catch (error) {
+            console.log("Audio rendering failed (expected in test):", error);
+          }
+
+          const secondCallCount = fetchSpy.mock.calls.length;
+
+          // Verify no additional calls were made when muted
+          expect(secondCallCount).toBe(firstCallCount);
+
+          fetchSpy.mockRestore();
+        },
       );
+    });
+  });
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceInMs = 1_000;
-      element.sourceOutMs = 5_000;
+  describe("audio analysis", () => {
+    const audioAnalysisTest = baseTest.extend<{
+      timegroup: EFTimegroup;
+      configuration: EFConfiguration;
+    }>({
+      timegroup: async ({}, use) => {
+        const timegroup = document.createElement("ef-timegroup");
+        timegroup.setAttribute("mode", "contain");
+        await use(timegroup);
+      },
+      configuration: async ({ expect }, use) => {
+        const configuration = document.createElement("ef-configuration");
+        configuration.innerHTML = `<h1 style="font: 10px monospace">${expect.getState().currentTestName}</h1>`;
+        // Use integrated proxy server (same host/port as test runner)
+        const apiHost = `${window.location.protocol}//${window.location.host}`;
+        configuration.setAttribute("api-host", apiHost);
+        configuration.apiHost = apiHost;
+        document.body.appendChild(configuration);
+        await use(configuration);
+      },
+    });
 
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
+    audioAnalysisTest(
+      "has time domain analysis task",
+      async ({ configuration, timegroup, expect }) => {
+        const element = document.createElement("test-media");
+        element.src = "http://web:3000/head-moov-480p.mp4";
+        timegroup.append(element);
+        configuration.append(timegroup);
+
+        await element.mediaEngineTask.run();
+
+        expect(element.byteTimeDomainTask).toBeDefined();
+        expect(typeof element.byteTimeDomainTask.taskComplete).toBe("object");
+      },
+    );
+
+    audioAnalysisTest(
+      "has frequency analysis task",
+      async ({ configuration, timegroup, expect }) => {
+        const element = document.createElement("test-media");
+        element.src = "http://web:3000/head-moov-480p.mp4";
+        timegroup.append(element);
+        configuration.append(timegroup);
+
+        await element.mediaEngineTask.run();
+
+        expect(element.frequencyDataTask).toBeDefined();
+        expect(typeof element.frequencyDataTask.taskComplete).toBe("object");
+      },
+    );
+
+    audioAnalysisTest(
+      "respects FFT configuration properties",
+      async ({ configuration, timegroup, expect }) => {
+        const element = document.createElement("test-media");
+        element.src = "http://web:3000/head-moov-480p.mp4";
+        element.fftSize = 256;
+        element.fftDecay = 4;
+        element.fftGain = 2.0;
+        element.interpolateFrequencies = true;
+        timegroup.append(element);
+        configuration.append(timegroup);
+
+        await element.mediaEngineTask.run();
+
+        expect(element.fftSize).toBe(256);
+        expect(element.fftDecay).toBe(4);
+        expect(element.fftGain).toBe(2.0);
+        expect(element.interpolateFrequencies).toBe(true);
+        expect(element.shouldInterpolateFrequencies).toBe(true);
+      },
+    );
+
+    audioAnalysisTest(
+      "generates FREQ_WEIGHTS based on fftSize",
+      async ({ configuration, timegroup, expect }) => {
+        const element = document.createElement("test-media");
+        element.src = "http://web:3000/head-moov-480p.mp4";
+        element.fftSize = 128;
+        timegroup.append(element);
+        configuration.append(timegroup);
+
+        await element.mediaEngineTask.run();
+
+        const weights = element.FREQ_WEIGHTS;
+        expect(weights).toBeInstanceOf(Float32Array);
+        expect(weights.length).toBe(element.fftSize / 2); // 64 for fftSize 128
+
+        // Test frequency weighting - lower frequencies should have lower weights
+        expect(weights.length).toBeGreaterThan(0);
+        const firstWeight = weights[0];
+        const lastWeight = weights[weights.length - 1];
+        expect(firstWeight).toBeDefined();
+        expect(lastWeight).toBeDefined();
+        expect(firstWeight!).toBeLessThan(lastWeight!);
+      },
+    );
+  });
 
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
+  describe("assetId", () => {
+    test("reads from js property", ({ element, expect }) => {
+      element.assetId = "test-asset-123";
+      expect(element.assetId).toBe("test-asset-123");
+    });
 
-      await element.trackFragmentIndexLoader.taskComplete;
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("asset-id", "test-asset-123");
+      expect(element.assetId).toBe("test-asset-123");
+    });
 
-      expect(element.durationMs).toBe(4_000);
-      expect(timegroup.durationMs).toBe(4_000);
+    test("defaults to null", ({ element, expect }) => {
+      expect(element.assetId).toBe(null);
     });
 
-    test("Computes duration from track fragment index sourceout and sourcein", async () => {
-      // Mock the request for the track fragment index, responds with a 10 second duration
-      worker.use(
-        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
-          return HttpResponse.json(
-            createTestFragmentIndex({
-              audio: { duration: 10_000 },
-              video: { duration: 10_000 },
-            }),
-          );
-        }),
-      );
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.assetId = "test-asset-456";
+      await element.updateComplete;
+      expect(element.getAttribute("asset-id")).toBe("test-asset-456");
+
+      element.assetId = null;
+      await element.updateComplete;
+      expect(element.hasAttribute("asset-id")).toBe(false);
+    });
 
-      const timegroup = document.createElement("ef-timegroup");
-      timegroup.mode = "sequence";
-      const element = document.createElement("test-media");
-      element.src = "/assets/10s-bars.mp4";
-      element.sourceInMs = 9_000;
-      element.sourceOutMs = 10_000;
+    test("reads assetId from html source", async ({ expect }) => {
+      const container = document.createElement("div");
+      container.innerHTML = `<test-media asset-id="test-asset-789"></test-media>`;
+      const media = container.querySelector("test-media") as TestMedia;
+      expect(media).toBeDefined();
+      expect(media.assetId).toBe("test-asset-789");
+    });
+  });
+
+  describe("fftSize", () => {
+    test("defaults to 128", ({ element, expect }) => {
+      expect(element.fftSize).toBe(128);
+    });
+
+    test("reads from js property", ({ element, expect }) => {
+      element.fftSize = 1024;
+      expect(element.fftSize).toBe(1024);
+    });
+
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("fft-size", "1024");
+      expect(element.fftSize).toBe(1024);
+    });
+
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.fftSize = 512;
+      await element.updateComplete;
+      expect(element.getAttribute("fft-size")).toBe("512");
+    });
+  });
+
+  describe("fftDecay", () => {
+    test("defaults to 8", ({ element, expect }) => {
+      expect(element.fftDecay).toBe(8);
+    });
+
+    test("reads from js property", ({ element, expect }) => {
+      element.fftDecay = 16;
+      expect(element.fftDecay).toBe(16);
+    });
+
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("fft-decay", "16");
+      expect(element.fftDecay).toBe(16);
+    });
+
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.fftDecay = 32;
+      await element.updateComplete;
+      expect(element.getAttribute("fft-decay")).toBe("32");
+    });
+  });
+
+  describe("fftGain", () => {
+    test("defaults to 3.0", ({ element, expect }) => {
+      expect(element.fftGain).toBe(3.0);
+    });
+
+    test("reads from js property", ({ element, expect }) => {
+      element.fftGain = 0.5;
+      expect(element.fftGain).toBe(0.5);
+    });
+
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("fft-gain", "0.5");
+      expect(element.fftGain).toBe(0.5);
+    });
+
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.fftGain = 2.5;
+      await element.updateComplete;
+      expect(element.getAttribute("fft-gain")).toBe("2.5");
+    });
+  });
 
-      const preview = document.createElement("ef-preview");
-      timegroup.appendChild(element);
-      preview.appendChild(timegroup);
-      document.body.appendChild(preview);
+  describe("interpolateFrequencies", () => {
+    test("defaults to false", ({ element, expect }) => {
+      expect(element.interpolateFrequencies).toBe(false);
+    });
 
-      // Await the next tick to ensure the element has a chance to load the track fragment
-      await Promise.resolve();
+    test("reads from js property", ({ element, expect }) => {
+      element.interpolateFrequencies = true;
+      expect(element.interpolateFrequencies).toBe(true);
+    });
 
-      await element.trackFragmentIndexLoader.taskComplete;
+    test("reads from dom attribute", ({ element, expect }) => {
+      element.setAttribute("interpolate-frequencies", "true");
+      expect(element.interpolateFrequencies).toBe(true);
+    });
 
-      expect(element.durationMs).toBe(1_000);
-      expect(timegroup.durationMs).toBe(1_000);
+    test("handles any attribute value as true (standard boolean behavior)", ({
+      element,
+      expect,
+    }) => {
+      element.setAttribute("interpolate-frequencies", "false");
+      expect(element.interpolateFrequencies).toBe(true); // Standard boolean attributes: any value = true
+    });
+
+    test("reflects property changes to attribute", async ({
+      element,
+      expect,
+    }) => {
+      element.interpolateFrequencies = true;
+      await element.updateComplete;
+      expect(element.hasAttribute("interpolate-frequencies")).toBe(true);
+      expect(element.getAttribute("interpolate-frequencies")).toBe(""); // Standard boolean reflection
+
+      element.interpolateFrequencies = false;
+      await element.updateComplete;
+      expect(element.hasAttribute("interpolate-frequencies")).toBe(false); // Standard boolean reflection removes attribute
     });
   });
+
+  //   describe("mediaEngineTask", () => {
+  //     test("is defined", ({ element, expect }) => {
+  //       expect(element.mediaEngineTask).toBeDefined();
+  //     });
+
+  //     test("is a task", ({ element, expect }) => {
+  //       expect(element.mediaEngineTask).toBeInstanceOf(Task);
+  //     });
+
+  //     test("throws if assetId is set", async ({ element, expect }) => {
+  //       element.assetId = "test-asset-123";
+  //       await element.mediaEngineTask.run();
+  //       expect(element.mediaEngineTask.error).toBeInstanceOf(Error);
+  //     });
+
+  //     test("creates JitMediaEngine for http sources", async ({
+  //       elementWithJitManifest,
+  //       expect,
+  //       worker,
+  //     }) => {
+  //       await elementWithJitManifest.mediaEngineTask.run();
+  //       expect(elementWithJitManifest.mediaEngineTask.value).toBeInstanceOf(
+  //         JitMediaEngine,
+  //       );
+  //     });
+
+  //     test("creates AssetMediaEngine for local sources", async ({
+  //       elementWithAsset,
+  //       expect,
+  //     }) => {
+  //       await elementWithAsset.mediaEngineTask.run();
+  //       expect(elementWithAsset.mediaEngineTask.value).toBeInstanceOf(
+  //         AssetMediaEngine,
+  //       );
+  //     });
+  //   });
+
+  //   describe("Video Buffering Integration", () => {
+  //     test("videoBufferTask is available and configured", ({
+  //       element,
+  //       expect,
+  //     }) => {
+  //       expect(element.videoBufferTask).toBeDefined();
+  //       expect(element.videoBufferDurationMs).toBe(60000); // 60 seconds default
+  //       expect(element.maxVideoBufferFetches).toBe(2); // 2 parallel fetches default
+  //       expect(element.enableVideoBuffering).toBe(true); // enabled by default
+  //     });
+
+  //     test("buffer configuration can be customized", ({ element, expect }) => {
+  //       element.videoBufferDurationMs = 45000;
+  //       element.maxVideoBufferFetches = 3;
+  //       element.enableVideoBuffering = false;
+
+  //       expect(element.videoBufferDurationMs).toBe(45000);
+  //       expect(element.maxVideoBufferFetches).toBe(3);
+  //       expect(element.enableVideoBuffering).toBe(false);
+  //     });
+
+  //     test("buffer task starts automatically with JIT asset", async ({
+  //       elementWithJitManifest,
+  //       expect,
+  //     }) => {
+  //       const element = elementWithJitManifest;
+
+  //       // Wait for media engine to initialize
+  //       await element.mediaEngineTask.taskComplete;
+
+  //       // Buffer task should be available and have started
+  //       expect(element.videoBufferTask).toBeDefined();
+  //       // Task status should be INITIAL (0) or higher, indicating it's been created
+  //       expect(element.videoBufferTask.status).toBeGreaterThanOrEqual(0);
+  //     });
+  //   });
+  // });
+
+  // // Test to verify buffer tasks use EFMedia properties directly (no hardcoded config duplication)
+  // describe("Buffer Task Property Integration", () => {
+  //   test("audio and video buffer tasks use EFMedia properties directly", async ({
+  //     element,
+  //     expect,
+  //   }) => {
+  //     // Set custom buffer configuration on the element
+  //     element.audioBufferDurationMs = 15000;
+  //     element.maxAudioBufferFetches = 3;
+  //     element.enableAudioBuffering = false;
+
+  //     element.videoBufferDurationMs = 45000;
+  //     element.maxVideoBufferFetches = 5;
+  //     element.enableVideoBuffering = false;
+
+  //     // Verify the tasks are created without requiring hardcoded config
+  //     expect(element.audioBufferTask).toBeDefined();
+  //     expect(element.videoBufferTask).toBeDefined();
+
+  //     // The task configuration should now come directly from element properties
+  //     // This test ensures no hardcoded config duplication exists
+  //     expect(element.audioBufferDurationMs).toBe(15000);
+  //     expect(element.maxAudioBufferFetches).toBe(3);
+  //     expect(element.enableAudioBuffering).toBe(false);
+
+  //     expect(element.videoBufferDurationMs).toBe(45000);
+  //     expect(element.maxVideoBufferFetches).toBe(5);
+  //     expect(element.enableVideoBuffering).toBe(false);
+  //   });
+  // });
 });