@editframe/elements 0.18.27-beta.0 → 0.19.2-beta.0

package/src/elements/EFVideo.browsertest.ts

@@ -8,6 +8,7 @@ import "../gui/EFWorkbench.js";
 import "../gui/EFPreview.js";
 import "./EFTimegroup.js";
 
+import { TaskStatus } from "@lit/task";
 import type { EFTimegroup } from "./EFTimegroup.js";
 
 // Helper to wait for task completion but ignore abort errors
@@ -30,6 +31,10 @@ beforeAll(async () => {
   });
 });
 
+beforeEach(() => {
+  localStorage.clear();
+});
+
 // Extend the base test with fixtures following EFMedia.browsertest.ts pattern
 const test = baseTest.extend<{
   timegroup: EFTimegroup;
@@ -49,6 +54,7 @@ const test = baseTest.extend<{
     const apiHost = "http://localhost:63315";
     configuration.setAttribute("api-host", apiHost);
     configuration.apiHost = apiHost;
+    configuration.signingURL = ""; // Disable URL signing for tests
     document.body.appendChild(configuration);
     await use(configuration);
   },
@@ -68,18 +74,26 @@ const test = baseTest.extend<{
     use(video);
   },
   barsNtoneTimegroup: async ({}, use) => {
+    // Clear localStorage to prevent test contamination
+    localStorage.removeItem("ef-timegroup-barsNtoneTimegroup");
+
     const container = document.createElement("div");
     render(
       html`
       <ef-configuration api-host="http://localhost:63315">
-        <ef-timegroup mode="sequence"
-          class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
-        <ef-video src="bars-n-tone.mp4"></ef-video>
+       <ef-preview>
+         <ef-timegroup mode="sequence" id="barsNtoneTimegroup"
+            class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
+            <ef-video src="bars-n-tone.mp4" id="barsNtoneVideo"></ef-video>
+          </ef-timegroup>
+        </ef-preview>
       </ef-configuration>
     `,
       container,
     );
     document.body.appendChild(container);
+    const configuration = container.querySelector("ef-configuration") as any;
+    configuration.signingURL = ""; // Disable URL signing for tests
     const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
     await timegroup.updateComplete;
     await use(timegroup);
@@ -91,23 +105,27 @@ const test = baseTest.extend<{
     render(
       html`
       <ef-configuration api-host="http://localhost:63315">
-        <ef-timegroup mode="sequence"
-          class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
-          
-          <ef-timegroup mode="contain" class="absolute w-full h-full">
-            <ef-video src="bars-n-tone.mp4" class="size-full object-fit absolute top-0 left-0"></ef-video>
-          </ef-timegroup>
-          
-          <ef-timegroup mode="contain" class="absolute w-full h-full">
-            <ef-video src="bars-n-tone.mp4" class="size-full object-fit absolute top-0 left-0"></ef-video>
+       <ef-preview>
+          <ef-timegroup mode="sequence"
+            class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
+            
+            <ef-timegroup mode="contain" class="absolute w-full h-full">
+              <ef-video src="bars-n-tone.mp4" class="size-full object-fit absolute top-0 left-0"></ef-video>
+            </ef-timegroup>
+            
+            <ef-timegroup mode="contain" class="absolute w-full h-full">
+              <ef-video src="bars-n-tone.mp4" class="size-full object-fit absolute top-0 left-0"></ef-video>
+            </ef-timegroup>
+            
           </ef-timegroup>
-          
-        </ef-timegroup>
+        </ef-preview>
       </ef-configuration>
     `,
       container,
     );
     document.body.appendChild(container);
+    const configuration = container.querySelector("ef-configuration") as any;
+    configuration.signingURL = ""; // Disable URL signing for tests
     const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
     await timegroup.updateComplete;
     await use(timegroup);
@@ -814,27 +832,24 @@ describe("EFVideo", () => {
       );
     });
 
-    test("seeks backwards from 8000ms to 2000ms", async ({
+    test("seeks backward from 8000ms to 2000ms", async ({
       barsNtone,
       barsNtoneTimegroup,
+      expect,
     }) => {
-      await waitForTaskIgnoringAborts(
-        barsNtone.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(barsNtone.audioSeekTask.taskComplete);
-      // First seek forward
       barsNtoneTimegroup.currentTimeMs = 8000;
-      await barsNtone.updateComplete;
-      await waitForTaskIgnoringAborts(
-        barsNtone.unifiedVideoSeekTask.taskComplete,
+      await barsNtoneTimegroup.seekTask.taskComplete;
+      expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
+        8.066,
       );
 
+      expect(barsNtoneTimegroup.seekTask.status).toBe(TaskStatus.COMPLETE);
       // Then seek backward
       barsNtoneTimegroup.currentTimeMs = 2000;
-      await barsNtone.updateComplete;
-      await waitForTaskIgnoringAborts(barsNtone.audioSeekTask.taskComplete);
-      await waitForTaskIgnoringAborts(
-        barsNtone.unifiedVideoSeekTask.taskComplete,
+      expect(barsNtoneTimegroup.seekTask.status).toBe(TaskStatus.PENDING);
+      await barsNtoneTimegroup.seekTask.taskComplete;
+      expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
+        2.066,
       );
     });
 
@@ -842,9 +857,6 @@ describe("EFVideo", () => {
       barsNtone,
       barsNtoneTimegroup,
     }) => {
-      await waitForTaskIgnoringAborts(
-        barsNtone.unifiedVideoSeekTask.taskComplete,
-      );
       await waitForTaskIgnoringAborts(barsNtone.audioSeekTask.taskComplete);
 
       // Use seek points that are within the actual media duration
@@ -1013,24 +1025,10 @@ describe("EFVideo", () => {
       barsNtoneTimegroup,
       expect,
     }) => {
-      await barsNtoneTimegroup.frameTask.taskComplete;
+      // await barsNtoneTimegroup.frameTask.taskComplete;
       barsNtoneTimegroup.currentTimeMs = 7975;
-      await barsNtoneTimegroup.waitForNestedUpdates();
-      console.log(
-        "barsNtoneTimegroup.currentTime",
-        barsNtoneTimegroup.currentTime,
-      );
-      console.log("barsNtone.ownCurrentTimeMs", barsNtone.ownCurrentTimeMs);
-      console.log(
-        "barsNtone.currentSourceTimeMs",
-        barsNtone.currentSourceTimeMs,
-      );
-      console.log("barsNtone.desiredSeekTimeMs", barsNtone.desiredSeekTimeMs);
-      console.log(
-        "barsNtone.unifiedVideoSeekResult",
-        barsNtone.unifiedVideoSeekTask.value,
-      );
-      await barsNtoneTimegroup.frameTask.taskComplete;
+      await barsNtoneTimegroup.seekTask.taskComplete;
+
       expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         8.033,
       );
@@ -1087,47 +1085,24 @@ describe("EFVideo", () => {
     });
 
     test("seeks to 1000ms", async ({ timegroup, headMoov480p, expect }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
-
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(1);
     });
 
     test("seeks to 3000ms", async ({ timegroup, headMoov480p, expect }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 3000;
       await timegroup.seekTask.taskComplete;
-
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(3);
     });
 
     test("seeks to 5000ms", async ({ timegroup, headMoov480p, expect }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 5000;
       await timegroup.seekTask.taskComplete;
-
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(5);
     });
 
     test("seeks to 7500ms", async ({ timegroup, headMoov480p, expect }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 7500;
       await timegroup.seekTask.taskComplete;
 
@@ -1139,11 +1114,6 @@ describe("EFVideo", () => {
     });
 
     test("seeks to 8500ms", async ({ timegroup, headMoov480p, expect }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 8500;
       await timegroup.seekTask.taskComplete;
 
@@ -1158,11 +1128,6 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       timegroup.currentTimeMs = 9000;
       await timegroup.seekTask.taskComplete;
 
@@ -1174,32 +1139,13 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
+      timegroup.currentTime = 7;
+      await expect(timegroup.seekTask.taskComplete).resolves.toBe(7);
+      expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(7);
 
-      // First seek forward
-      timegroup.currentTimeMs = 7000;
-      await timegroup.seekTask.taskComplete;
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
-        7,
-        1,
-      );
-
-      // Then seek backward
-      timegroup.currentTimeMs = 2000;
-      await timegroup.seekTask.taskComplete;
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
-        2,
-        1,
-      );
+      timegroup.currentTime = 2;
+      await expect(timegroup.seekTask.taskComplete).resolves.toBe(2);
+      expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(2);
     });
 
     test("seeks to multiple points in sequence", async ({
@@ -1207,20 +1153,12 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       const seekPoints = [1000, 3000, 5000, 2000, 6000, 0];
       const expectedTimestamps = [1, 3, 5, 2, 6, 0];
 
       for (let i = 0; i < seekPoints.length; i++) {
         timegroup.currentTimeMs = seekPoints[i]!;
         await timegroup.seekTask.taskComplete;
-        await waitForTaskIgnoringAborts(
-          headMoov480p.unifiedVideoSeekTask.taskComplete,
-        );
         expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
           expectedTimestamps[i]!,
           1,
@@ -1233,24 +1171,16 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
-      await waitForTaskIgnoringAborts(headMoov480p.audioSeekTask.taskComplete);
-
       const fractionalTimes = [1234.567, 3456.789, 5678.901];
       const expectedTimestamps = [1.234567, 3.456789, 5.678901];
 
       for (let i = 0; i < fractionalTimes.length; i++) {
         timegroup.currentTimeMs = fractionalTimes[i]!;
         await timegroup.seekTask.taskComplete;
-        await waitForTaskIgnoringAborts(
-          headMoov480p.unifiedVideoSeekTask.taskComplete,
-        );
         expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
           expectedTimestamps[i]!,
           1,
-        ); // Reduced precision for JIT
+        );
       }
     });
 
@@ -1259,10 +1189,8 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
+      timegroup.currentTimeMs = 0;
       await timegroup.seekTask.taskComplete;
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         0,
         1,
@@ -1270,9 +1198,6 @@ describe("EFVideo", () => {
 
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         1,
         1,
@@ -1280,9 +1205,6 @@ describe("EFVideo", () => {
 
       timegroup.currentTimeMs = 4000;
       await timegroup.seekTask.taskComplete;
-      await waitForTaskIgnoringAborts(
-        headMoov480p.unifiedVideoSeekTask.taskComplete,
-      );
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         4,
         1,
@@ -1294,7 +1216,6 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      await timegroup.waitForMediaDurations();
       timegroup.currentTimeMs = 1000;
       await timegroup.seekTask.taskComplete;
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(1);

package/src/elements/EFVideo.ts

@@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.ts";
 import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.ts";
@@ -155,6 +154,15 @@ export class EFVideo extends TWMixin(EFMedia) {
     );
   }
 
+  protected updated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+  ): void {
+    super.updated(changedProperties);
+
+    // No need to clear canvas - displayFrame() overwrites it completely
+    // and clearing creates blank frame gaps during transitions
+  }
+
   render() {
     return html`
       <canvas ${ref(this.canvasRef)}></canvas>
@@ -189,27 +197,20 @@ export class EFVideo extends TWMixin(EFMedia) {
   }
 
   frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
+    autoRun: false,
     args: () => [this.desiredSeekTimeMs] as const,
     onError: (error) => {
       console.error("frameTask error", error);
     },
     onComplete: () => {},
-    task: async ([_desiredSeekTimeMs], { signal }) => {
+    task: async ([_desiredSeekTimeMs]) => {
+      this.unifiedVideoSeekTask.run();
       await this.unifiedVideoSeekTask.taskComplete;
+      this.paintTask.run();
       await this.paintTask.taskComplete;
-      if (signal.aborted) {
-        return;
-      }
     },
   });
 
-  protected updated(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
-  ): void {
-    super.updated(changedProperties);
-  }
-
   /**
    * Start a delayed loading operation for testing
    */
@@ -244,6 +245,7 @@ export class EFVideo extends TWMixin(EFMedia) {
   }
 
   paintTask = new Task(this, {
+    autoRun: false,
     args: () => [this.desiredSeekTimeMs] as const,
     onError: (error) => {
       console.error("paintTask error", error);
@@ -301,6 +303,18 @@ export class EFVideo extends TWMixin(EFMedia) {
     },
   });
 
+  /**
+   * Clear the canvas when element becomes inactive
+   */
+  clearCanvas(): void {
+    if (!this.canvasElement) return;
+
+    const ctx = this.canvasElement.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+    }
+  }
+
   /**
    * Display a video frame on the canvas
    */
@@ -342,7 +356,6 @@ export class EFVideo extends TWMixin(EFMedia) {
       );
     }
 
-    log("trace: drawing frame to canvas", frame.timestamp / 1000);
     ctx.drawImage(
       frame,
       0,

package/src/elements/EFWaveform.ts

@@ -3,7 +3,6 @@ import { Task } from "@lit/task";
 import { css, html, LitElement, type PropertyValueMap } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, type Ref, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
@@ -38,7 +37,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   private mutationObserver?: MutationObserver;
 
   render() {
-    return html`<canvas ${ref(this.canvasRef)}></canvas><div class="text-5xl inline-block bg-red-500">`;
+    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
 
   @property({
@@ -465,7 +464,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
+    autoRun: false,
     args: () => {
       return [
         this.targetElement,