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

package/src/elements/EFTemporal.ts

@@ -1,11 +1,10 @@
 import { consume, createContext } from "@lit/context";
+import { Task } from "@lit/task";
 import type { LitElement, PropertyValueMap, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
-import type { EFTimegroup } from "./EFTimegroup.js";
-
-import { Task } from "@lit/task";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { durationConverter } from "./durationConverter.js";
+import type { EFTimegroup } from "./EFTimegroup.js";
 
 export const timegroupContext = createContext<EFTimegroup>(
   Symbol("timeGroupContext"),
@@ -549,7 +548,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
           }
           const previous = siblingTemorals?.[(ownIndex ?? 0) - 1];
           if (!previous) {
-            console.log("Previous temporal element not found", {
+            console.error("Previous temporal element not found", {
               ownIndex,
               siblingTemorals,
             });

package/src/elements/EFTimegroup.browsertest.ts

@@ -1,8 +1,8 @@
 import {
-  LitElement,
-  type TemplateResult,
   html,
+  LitElement,
   render as litRender,
+  type TemplateResult,
 } from "lit";
 import { assert, beforeEach, describe, test } from "vitest";
 import { EFTimegroup } from "./EFTimegroup.js";
@@ -353,7 +353,7 @@ describe("setting currentTime", () => {
     document.body.appendChild(timegroup);
     assert.isNull(localStorage.getItem(timegroup.storageKey));
     timegroup.currentTime = 5_000;
-    assert.equal(localStorage.getItem(timegroup.storageKey), "5000");
+    assert.equal(localStorage.getItem(timegroup.storageKey), "10"); // Clamped to duration
     timegroup.remove();
   });
 
@@ -392,6 +392,9 @@ describe("setting currentTime", () => {
     assert.equal(a.ownCurrentTimeMs, 2_500);
     assert.equal(b.ownCurrentTimeMs, 0);
 
+    // Wait for frame update to complete before next assignment
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
     root.currentTimeMs = 7_500;
 
     assert.equal(a.ownCurrentTimeMs, 5_000);

package/src/elements/EFTimegroup.ts

@@ -1,21 +1,21 @@
 import { provide } from "@lit/context";
 import { Task, TaskStatus } from "@lit/task";
 import debug from "debug";
-import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { css, html, LitElement, type PropertyValueMap } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
+import { durationConverter } from "./durationConverter.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import {
-  EFTemporal,
   deepGetElementsWithFrameTasks,
+  EFTemporal,
   flushStartTimeMsCache,
   shallowGetTemporalElements,
   timegroupContext,
 } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
-import { durationConverter } from "./durationConverter.js";
 import { updateAnimations } from "./updateAnimations.ts";
 
 const log = debug("ef:elements:EFTimegroup");
@@ -52,6 +52,10 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   #currentTime = 0;
 
+  // Frame update locking mechanism (only for root timegroups)
+  private isFrameUpdateInProgress = false;
+  private queuedTimeUpdate: number | null = null;
+
   @property({
     type: String,
     attribute: "mode",
@@ -72,27 +76,84 @@ export class EFTimegroup extends EFTemporal(LitElement) {
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
-    this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1000));
-    try {
-      if (this.id) {
-        if (this.isConnected) {
-          localStorage.setItem(this.storageKey, time.toString());
-        }
-      }
-    } catch (error) {
-      log("Failed to save time to localStorage", error);
+    const newTime = Math.max(0, Math.min(time, this.durationMs / 1000));
+
+    // Only apply locking mechanism for root timegroups to prevent cascade overload
+    if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
+      // Queue the latest time update - only keep the most recent
+      this.queuedTimeUpdate = newTime;
+      return;
+    }
+
+    if (this.isRootTimegroup) {
+      this.#executeTimeUpdate(newTime);
+    } else {
+      // Non-root timegroups update immediately (no cascade risk)
+      this.#currentTime = newTime;
+      this.#saveTimeToLocalStorage(newTime);
     }
   }
+
   get currentTime() {
     return this.#currentTime;
   }
+
   get currentTimeMs() {
     return this.currentTime * 1000;
   }
+
   set currentTimeMs(ms: number) {
     this.currentTime = ms / 1000;
   }
 
+  /**
+   * Determines if this is a root timegroup (no parent timegroups)
+   */
+  get isRootTimegroup(): boolean {
+    return this.closest("ef-timegroup") === this;
+  }
+
+  /**
+   * Executes time update with frame locking for root timegroups
+   */
+  async #executeTimeUpdate(time: number) {
+    this.isFrameUpdateInProgress = true;
+    this.#currentTime = time;
+
+    try {
+      // Save to localStorage
+      this.#saveTimeToLocalStorage(time);
+
+      // Wait for any pending frame tasks to complete before allowing next update
+      await this.waitForFrameTasks();
+    } catch (error) {
+      console.error("⚠️ [TIME_UPDATE_ERROR] Error during frame update:", error);
+    } finally {
+      this.isFrameUpdateInProgress = false;
+
+      // Process queued update if any (ensures latest scrub position is processed)
+      if (this.queuedTimeUpdate !== null && this.queuedTimeUpdate !== time) {
+        const nextTime = this.queuedTimeUpdate;
+        this.queuedTimeUpdate = null;
+        // Schedule on next tick to avoid recursive call stack
+        setTimeout(() => this.#executeTimeUpdate(nextTime), 0);
+      }
+    }
+  }
+
+  /**
+   * Saves time to localStorage (extracted for reuse)
+   */
+  #saveTimeToLocalStorage(time: number) {
+    try {
+      if (this.id && this.isConnected) {
+        localStorage.setItem(this.storageKey, time.toString());
+      }
+    } catch (error) {
+      log("Failed to save time to localStorage", error);
+    }
+  }
+
   render() {
     return html`<slot></slot> `;
   }
@@ -236,9 +297,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     const mediaElements = deepGetMediaElements(this);
     // Then, we must await the fragmentIndexTask to ensure all media elements have their
     // fragment index loaded, which is where their duration is parsed from.
-    await Promise.all(
-      mediaElements.map((m) => m.fragmentIndexTask.taskComplete),
-    );
+    await Promise.all(mediaElements.map((m) => m.mediaEngineTask.taskComplete));
 
     // After waiting for durations, we must force some updates to cascade and ensure all temporal elements
     // have correct durations and start times. It is not ideal that we have to do this inside here,
@@ -338,16 +397,40 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   ) {
     await this.waitForMediaDurations();
 
+    // Create AbortController for audio fetch operations
+    const abortController = new AbortController();
+
     await Promise.all(
       deepGetMediaElements(this).map(async (mediaElement) => {
+        // Skip muted elements entirely - no audio fetching or processing needed
+        if (mediaElement.mute) {
+          return;
+        }
+
         const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
         const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
         const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-        if (!mediaOverlaps || mediaElement.defaultAudioTrackId === undefined) {
+        if (!mediaOverlaps) {
           return;
         }
 
-        const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
+        // Convert from root timegroup timeline to media element's local timeline
+        const mediaLocalFromMs = Math.max(0, fromMs - mediaElement.startTimeMs);
+        const mediaLocalToMs = Math.min(
+          mediaElement.endTimeMs - mediaElement.startTimeMs,
+          toMs - mediaElement.startTimeMs,
+        );
+
+        // Skip if no valid local time range
+        if (mediaLocalFromMs >= mediaLocalToMs) {
+          return;
+        }
+
+        const audio = await mediaElement.fetchAudioSpanningTime(
+          mediaLocalFromMs, // ✅ Now using media element's local timeline
+          mediaLocalToMs, // ✅ Now using media element's local timeline
+          abortController.signal,
+        );
         if (!audio) {
           throw new Error("Failed to fetch audio");
         }
@@ -358,16 +441,25 @@ export class EFTimegroup extends EFTemporal(LitElement) {
         );
         bufferSource.connect(audioContext.destination);
 
+        // Calculate timing for placing this audio in the output context
         const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
         const ctxEndMs = mediaElement.endTimeMs - fromMs;
         const ctxDurationMs = ctxEndMs - ctxStartMs;
 
-        const offset =
-          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+        // Calculate offset within the fetched audio buffer
+        // Since we now use local timeline coordinates, audio.startMs is relative to media start
+        const requestedOffsetInMedia = mediaLocalFromMs; // Already in local timeline
+        const actualOffsetInBuffer = requestedOffsetInMedia - audio.startMs; // Both in local timeline
+
+        // Ensure offset is never negative (this would cause audio scheduling errors)
+        const safeOffset = Math.max(0, actualOffsetInBuffer);
+
+        if (safeOffset !== actualOffsetInBuffer) {
+        }
 
         bufferSource.start(
           ctxStartMs / 1000,
-          offset / 1000,
+          safeOffset / 1000,
           ctxDurationMs / 1000,
         );
       }),
@@ -375,8 +467,14 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   async renderAudio(fromMs: number, toMs: number) {
+    // Here we determine the number of samples we need to render rather than the duration.
+    // We cannot tolerate having more or fewer samples than fit exactlly into AAC frames.
     const durationMs = toMs - fromMs;
-    const contextSize = Math.round((48000 * durationMs) / 1000);
+    const duration = durationMs / 1000;
+    const exactSamples = 48000 * duration;
+    const aacFrames = exactSamples / 1024;
+    const alignedFrames = Math.round(aacFrames);
+    const contextSize = alignedFrames * 1024; // AAC-aligned sample count
 
     // Debug logging for audio duration calculations
     if (contextSize <= 0) {
@@ -400,6 +498,39 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return renderedBuffer;
   }
 
+  /**
+   * TEMPORARY TEST METHOD: Renders audio and immediately plays it back
+   * Usage: timegroup.testPlayAudio(0, 5000) // Play first 5 seconds
+   */
+  async testPlayAudio(fromMs: number, toMs: number) {
+    try {
+      // Render the audio using the existing renderAudio method
+      const renderedBuffer = await this.renderAudio(fromMs, toMs);
+
+      // Create a regular AudioContext for playback
+      const playbackContext = new AudioContext();
+
+      // Create a buffer source and connect it
+      const bufferSource = playbackContext.createBufferSource();
+      bufferSource.buffer = renderedBuffer;
+      bufferSource.connect(playbackContext.destination);
+
+      // Start playback immediately
+      bufferSource.start(0);
+
+      // Return a promise that resolves when playback ends
+      return new Promise<void>((resolve) => {
+        bufferSource.onended = () => {
+          playbackContext.close();
+          resolve();
+        };
+      });
+    } catch (error) {
+      console.error("🎵 [TEST_PLAY_AUDIO] Error:", error);
+      throw error;
+    }
+  }
+
   async loadMd5Sums() {
     const efElements = this.efElements;
     const loaderTasks: Promise<any>[] = [];

package/src/elements/EFVideo.browsertest.ts

@@ -1,28 +1,26 @@
 import { html, render } from "lit";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, vi } from "vitest";
 import { assetMSWHandlers } from "../../test/useAssetMSW.js";
-import { useMSW } from "../../test/useMSW.js";
+import { test as baseTest } from "../../test/useMSW.js";
 import type { EFVideo } from "./EFVideo.js";
 import "./EFVideo.js";
 import "../gui/EFWorkbench.js";
 import "../gui/EFPreview.js";
 import "./EFTimegroup.js";
 
-describe("EFVideo", () => {
-  const worker = useMSW();
+// Extend the base test with no additional fixtures for EFVideo tests
+const test = baseTest.extend({});
 
+describe("EFVideo", () => {
   beforeEach(() => {
     // Clean up DOM and localStorage
     while (document.body.children.length) {
       document.body.children[0]?.remove();
     }
     localStorage.clear();
-
-    // Set up centralized MSW handlers to proxy requests to test assets
-    worker.use(...assetMSWHandlers);
   });
 
-  afterEach(() => {
+  afterEach(async () => {
     // Clean up any remaining elements
     const videos = document.querySelectorAll("ef-video");
     for (const video of videos) {
@@ -31,7 +29,7 @@ describe("EFVideo", () => {
   });
 
   describe("basic rendering", () => {
-    test("should be defined and render canvas", async () => {
+    test("should be defined and render canvas", async ({ expect }) => {
       const element = document.createElement("ef-video");
       document.body.appendChild(element);
 
@@ -43,7 +41,7 @@ describe("EFVideo", () => {
       expect(element.canvasElement?.tagName).toBe("CANVAS");
     });
 
-    test("canvas has correct default properties", async () => {
+    test("canvas has correct default properties", async ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -60,7 +58,7 @@ describe("EFVideo", () => {
       expect(canvas?.height).toBeGreaterThan(0);
     });
 
-    test("canvas inherits styling correctly", async () => {
+    test("canvas inherits styling correctly", async ({ expect }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -86,7 +84,9 @@ describe("EFVideo", () => {
   });
 
   describe("video asset integration", () => {
-    test("integrates with video asset loading", async () => {
+    test("integrates with video asset loading", async ({ expect, worker }) => {
+      // Set up MSW handlers for asset loading
+      worker.use(...assetMSWHandlers);
       const container = document.createElement("div");
       render(
         html`
@@ -111,7 +111,12 @@ describe("EFVideo", () => {
       expect(video.intrinsicDurationMs).toBeGreaterThan(0);
     });
 
-    test("handles missing video asset gracefully", async () => {
+    test("handles missing video asset gracefully", async ({
+      expect,
+      worker,
+    }) => {
+      // Set up MSW handlers for asset loading
+      worker.use(...assetMSWHandlers);
       const container = document.createElement("div");
       render(
         html`
@@ -133,7 +138,9 @@ describe("EFVideo", () => {
   });
 
   describe("frame painting and canvas updates", () => {
-    test("canvas dimensions update when frame dimensions change", async () => {
+    test("canvas dimensions update when frame dimensions change", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -168,7 +175,9 @@ describe("EFVideo", () => {
       expect(canvas.height).toBe(1080);
     });
 
-    test("handles frame painting with null format gracefully", async () => {
+    test("handles frame painting with null format gracefully", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -200,7 +209,7 @@ describe("EFVideo", () => {
       }).not.toThrow();
     });
 
-    test("canvas context is available for drawing", async () => {
+    test("canvas context is available for drawing", async ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -225,7 +234,7 @@ describe("EFVideo", () => {
   });
 
   describe("decoder lock scenarios", () => {
-    test("handles concurrent paint attempts safely", async () => {
+    test("handles concurrent paint attempts safely", async ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -253,7 +262,7 @@ describe("EFVideo", () => {
       }
     });
 
-    test("paintTask handles missing canvas gracefully", () => {
+    test("paintTask handles missing canvas gracefully", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -270,7 +279,7 @@ describe("EFVideo", () => {
       }).not.toThrow();
     });
 
-    test("handles paint task with no video asset", () => {
+    test("handles paint task with no video asset", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -285,7 +294,7 @@ describe("EFVideo", () => {
   });
 
   describe("frame task integration", () => {
-    test("frameTask coordinates all required tasks", async () => {
+    test("frameTask coordinates all required tasks", async ({ expect }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -305,7 +314,7 @@ describe("EFVideo", () => {
       }).not.toThrow();
     });
 
-    test("frameTask handles missing dependencies", () => {
+    test("frameTask handles missing dependencies", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -320,7 +329,7 @@ describe("EFVideo", () => {
   });
 
   describe("error handling and edge cases", () => {
-    test("handles seek to invalid time", () => {
+    test("handles seek to invalid time", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -339,7 +348,7 @@ describe("EFVideo", () => {
       }).not.toThrow();
     });
 
-    test("handles video element removal during playback", () => {
+    test("handles video element removal during playback", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -358,7 +367,7 @@ describe("EFVideo", () => {
       }).not.toThrow();
     });
 
-    test("handles canvas context loss gracefully", async () => {
+    test("handles canvas context loss gracefully", async ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -384,8 +393,57 @@ describe("EFVideo", () => {
     });
   });
 
+  describe("assetId property", () => {
+    test("reads assetId from html source", async ({ expect }) => {
+      const container = document.createElement("div");
+      container.innerHTML = `<ef-video asset-id="test-video-asset-123"></ef-video>`;
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+
+      expect(video).toBeDefined();
+      expect(video.assetId).toBe("test-video-asset-123");
+
+      container.remove();
+    });
+
+    test("reads from js property", ({ expect }) => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      video.assetId = "test-video-456";
+      expect(video.assetId).toBe("test-video-456");
+    });
+
+    test("reflects property changes to attribute", async ({ expect }) => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+
+      video.assetId = "test-video-789";
+      await video.updateComplete;
+      expect(video.getAttribute("asset-id")).toBe("test-video-789");
+
+      video.assetId = null;
+      await video.updateComplete;
+      expect(video.hasAttribute("asset-id")).toBe(false);
+
+      container.remove();
+    });
+  });
+
   describe("integration with timegroups", () => {
-    test("integrates correctly within timegroup structure", async () => {
+    test("integrates correctly within timegroup structure", async ({
+      expect,
+      worker,
+    }) => {
+      // Set up MSW handlers for asset loading
+      worker.use(...assetMSWHandlers);
       const container = document.createElement("div");
       render(
         html`
@@ -419,8 +477,10 @@ describe("EFVideo", () => {
     });
   });
 
-  describe("scrub track integration", () => {
-    test("should initialize scrub track manager for JIT transcode mode", async () => {
+  describe.skip("scrub track integration", () => {
+    test("should initialize scrub track manager for JIT transcode mode", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -442,7 +502,9 @@ describe("EFVideo", () => {
       expect(video.scrubTrackManager).toBeDefined();
     });
 
-    test("should not initialize scrub track manager for asset mode", async () => {
+    test("should not initialize scrub track manager for asset mode", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -462,7 +524,9 @@ describe("EFVideo", () => {
       expect(video.scrubTrackManager).toBeUndefined();
     });
 
-    test("should expose scrub track performance metrics", async () => {
+    test("should expose scrub track performance metrics", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -490,7 +554,9 @@ describe("EFVideo", () => {
       }
     });
 
-    test("should return null stats when no scrub track manager exists", async () => {
+    test("should return null stats when no scrub track manager exists", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -509,7 +575,7 @@ describe("EFVideo", () => {
       expect(stats).toBeNull();
     });
 
-    test("should have canvas element available", async () => {
+    test("should have canvas element available", async ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -522,7 +588,9 @@ describe("EFVideo", () => {
       expect(canvas?.tagName).toBe("CANVAS");
     });
 
-    test("should clean up scrub track manager on disconnect", async () => {
+    test("should clean up scrub track manager on disconnect", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(
         html`
@@ -555,7 +623,9 @@ describe("EFVideo", () => {
   });
 
   describe("loading indicator", () => {
-    test("should not show loading indicator for operations completing under 250ms", async () => {
+    test("should not show loading indicator for operations completing under 250ms", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -577,7 +647,9 @@ describe("EFVideo", () => {
       expect(video.loadingState.isLoading).toBe(false);
     });
 
-    test("should show loading indicator only after 250ms for slow operations", async () => {
+    test("should show loading indicator only after 250ms for slow operations", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -605,7 +677,9 @@ describe("EFVideo", () => {
       expect(video.loadingState.isLoading).toBe(false);
     });
 
-    test("should handle multiple concurrent loading operations", async () => {
+    test("should handle multiple concurrent loading operations", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -636,7 +710,9 @@ describe("EFVideo", () => {
       expect(video.loadingState.isLoading).toBe(false);
     });
 
-    test("should not show loading for background operations", async () => {
+    test("should not show loading for background operations", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -659,7 +735,9 @@ describe("EFVideo", () => {
       video.clearDelayedLoading("bg-op");
     });
 
-    test("should properly clean up loading state on disconnect", async () => {
+    test("should properly clean up loading state on disconnect", async ({
+      expect,
+    }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);