@editframe/elements 0.20.4-beta.0 → 0.23.6-beta.0

package/src/elements/EFVideo.browsertest.ts

@@ -1,5 +1,5 @@
 import { html, render } from "lit";
-import { beforeAll, beforeEach, describe, vi } from "vitest";
+import { beforeAll, beforeEach, describe, expect, vi } from "vitest";
 
 import { test as baseTest } from "../../test/useMSW.js";
 import type { EFVideo } from "./EFVideo.js";
@@ -8,7 +8,6 @@ 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
@@ -80,7 +79,7 @@ const test = baseTest.extend<{
     const container = document.createElement("div");
     render(
       html`
-      <ef-configuration api-host="http://localhost:63315">
+      <ef-configuration api-host="http://localhost:63315" signing-url="">
        <ef-preview>
          <ef-timegroup mode="sequence" id="barsNtoneTimegroup"
             class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
@@ -92,10 +91,9 @@ const test = baseTest.extend<{
       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 timegroup.waitForMediaDurations();
     await use(timegroup);
     // Cleanup: remove from DOM
     container.remove();
@@ -104,7 +102,7 @@ const test = baseTest.extend<{
     const container = document.createElement("div");
     render(
       html`
-      <ef-configuration api-host="http://localhost:63315">
+      <ef-configuration api-host="http://localhost:63315" signing-url="">
        <ef-preview>
           <ef-timegroup mode="sequence"
             class="relative h-[500px] w-[1000px] overflow-hidden bg-slate-500">
@@ -124,10 +122,9 @@ const test = baseTest.extend<{
       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 timegroup.waitForMediaDurations();
     await use(timegroup);
     // Cleanup: remove from DOM
     container.remove();
@@ -238,7 +235,7 @@ describe("EFVideo", () => {
 
       // Should not throw when video asset is missing
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
     });
   });
@@ -267,7 +264,7 @@ describe("EFVideo", () => {
         close: vi.fn(),
       } as unknown as VideoFrame;
 
-      // Simulate frame painting (this would normally happen through paintTask)
+      // Simulate frame painting (this would normally happen through paint method)
       const ctx = canvas.getContext("2d");
       if (ctx && mockFrame.codedWidth && mockFrame.codedHeight) {
         canvas.width = mockFrame.codedWidth;
@@ -355,20 +352,16 @@ describe("EFVideo", () => {
 
       // Simulate the decoder being in use
       if (decoderLockDescriptor) {
-        // We can't directly access private fields in tests, but we can test
-        // that multiple paint calls don't cause issues
-        const paintPromise1 = video.paintTask.run();
-        const paintPromise2 = video.paintTask.run();
-        const paintPromise3 = video.paintTask.run();
-
-        // All should complete without throwing
-        await expect(
-          Promise.allSettled([paintPromise1, paintPromise2, paintPromise3]),
-        ).resolves.toBeDefined();
+        // We can test that multiple paint calls don't cause issues
+        expect(() => {
+          video.paint(0);
+          video.paint(0);
+          video.paint(0);
+        }).not.toThrow();
       }
     });
 
-    test("paintTask handles missing canvas gracefully", ({ expect }) => {
+    test("paint handles missing canvas gracefully", ({ expect }) => {
       const container = document.createElement("div");
       render(html`<ef-video></ef-video>`, container);
       document.body.appendChild(container);
@@ -379,23 +372,19 @@ describe("EFVideo", () => {
       const canvas = video.canvasElement;
       canvas?.remove();
 
-      // Paint task should handle missing canvas
-      expect(() => {
-        video.paintTask.run();
-      }).not.toThrow();
+      // Paint should handle missing canvas
+      expect(() => video.paint(0)).not.toThrow();
     });
 
-    test("handles paint task with no video asset", ({ expect }) => {
+    test("handles paint with no video asset", ({ 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;
 
-      // Paint task should handle missing video asset gracefully
-      expect(() => {
-        video.paintTask.run();
-      }).not.toThrow();
+      // Paint should handle missing video asset gracefully
+      expect(() => video.paint(0)).not.toThrow();
     });
   });
 
@@ -445,12 +434,12 @@ describe("EFVideo", () => {
       // Should handle invalid seek times gracefully
       expect(() => {
         video.desiredSeekTimeMs = -1000; // Invalid negative time
-        video.paintTask.run();
+        video.paint(-1000);
       }).not.toThrow();
 
       expect(() => {
         video.desiredSeekTimeMs = Number.POSITIVE_INFINITY;
-        video.paintTask.run();
+        video.paint(Number.POSITIVE_INFINITY);
       }).not.toThrow();
     });
 
@@ -462,14 +451,14 @@ describe("EFVideo", () => {
       const video = container.querySelector("ef-video") as EFVideo;
 
       // Start some operations
-      video.paintTask.run();
+      video.paint(0);
 
       // Remove element
       video.remove();
 
       // Should not cause errors
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
     });
 
@@ -491,7 +480,7 @@ describe("EFVideo", () => {
 
       // Should handle context loss gracefully
       expect(() => {
-        video.paintTask.run();
+        video.paint(0);
       }).not.toThrow();
 
       // Restore original method
@@ -572,6 +561,54 @@ describe("EFVideo", () => {
       // The video should have loaded successfully within the timegroup
       expect(video.intrinsicDurationMs).toBeGreaterThan(0);
     });
+
+    test("works as standalone root temporal in ef-preview", async ({
+      expect,
+    }) => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4" mode="asset" id="standalone-video"></ef-video>
+          </ef-preview>
+        </ef-configuration>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const preview = container.querySelector("ef-preview") as any;
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      await preview.updateComplete;
+      await video.updateComplete;
+
+      // Wait for media to be ready
+      await video.mediaEngineTask.taskComplete;
+
+      // Video should have loaded successfully
+      expect(video.intrinsicDurationMs).toBeGreaterThan(0);
+
+      // Preview should recognize the video as its root temporal
+      expect(preview.targetTemporal).toBe(video);
+
+      // Video should have a playback controller as a root element
+      expect(video.playbackController).toBeDefined();
+
+      // Preview should be able to control playback
+      expect(preview.playing).toBe(false);
+
+      // Seek the video through the preview
+      preview.currentTimeMs = 1000;
+      await video.frameTask.taskComplete;
+
+      // Video should have seeked
+      expect(video.ownCurrentTimeMs).toBeCloseTo(1000, 0);
+
+      // Cleanup
+      container.remove();
+    });
   });
 
   describe.skip("loading indicator", () => {
@@ -837,17 +874,13 @@ describe("EFVideo", () => {
       barsNtoneTimegroup,
       expect,
     }) => {
-      barsNtoneTimegroup.currentTimeMs = 8000;
-      await barsNtoneTimegroup.seekTask.taskComplete;
+      await barsNtoneTimegroup.seek(8000);
       expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         8.066,
       );
 
-      expect(barsNtoneTimegroup.seekTask.status).toBe(TaskStatus.COMPLETE);
       // Then seek backward
-      barsNtoneTimegroup.currentTimeMs = 2000;
-      expect(barsNtoneTimegroup.seekTask.status).toBe(TaskStatus.PENDING);
-      await barsNtoneTimegroup.seekTask.taskComplete;
+      await barsNtoneTimegroup.seek(2000);
       expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         2.066,
       );
@@ -1025,9 +1058,7 @@ describe("EFVideo", () => {
       barsNtoneTimegroup,
       expect,
     }) => {
-      // await barsNtoneTimegroup.frameTask.taskComplete;
-      barsNtoneTimegroup.currentTimeMs = 7975;
-      await barsNtoneTimegroup.seekTask.taskComplete;
+      await barsNtoneTimegroup.seek(7975);
 
       expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         8.033,
@@ -1039,9 +1070,8 @@ describe("EFVideo", () => {
       barsNtoneTimegroup,
       expect,
     }) => {
-      await barsNtoneTimegroup.frameTask.taskComplete;
-      barsNtoneTimegroup.currentTimeMs = 8041.667;
       await barsNtoneTimegroup.seekTask.taskComplete;
+      await barsNtoneTimegroup.seek(8041.667);
       expect(barsNtone.unifiedVideoSeekTask.value?.timestamp).toBe(8.1);
     });
 
@@ -1085,26 +1115,22 @@ describe("EFVideo", () => {
     });
 
     test("seeks to 1000ms", async ({ timegroup, headMoov480p, expect }) => {
-      timegroup.currentTimeMs = 1000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(1000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(1);
     });
 
     test("seeks to 3000ms", async ({ timegroup, headMoov480p, expect }) => {
-      timegroup.currentTimeMs = 3000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(3000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(3);
     });
 
     test("seeks to 5000ms", async ({ timegroup, headMoov480p, expect }) => {
-      timegroup.currentTimeMs = 5000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(5000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(5);
     });
 
     test("seeks to 7500ms", async ({ timegroup, headMoov480p, expect }) => {
-      timegroup.currentTimeMs = 7500;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(7500);
 
       // JIT transcoding returns actual video frame timestamps, not idealized segment boundaries
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
@@ -1114,8 +1140,7 @@ describe("EFVideo", () => {
     });
 
     test("seeks to 8500ms", async ({ timegroup, headMoov480p, expect }) => {
-      timegroup.currentTimeMs = 8500;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(8500);
 
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         8.5,
@@ -1128,8 +1153,7 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      timegroup.currentTimeMs = 9000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(9000);
 
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(9);
     });
@@ -1139,12 +1163,10 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      timegroup.currentTime = 7;
-      await expect(timegroup.seekTask.taskComplete).resolves.toBe(7);
+      await timegroup.seek(7000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(7);
 
-      timegroup.currentTime = 2;
-      await expect(timegroup.seekTask.taskComplete).resolves.toBe(2);
+      await timegroup.seek(2000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(2);
     });
 
@@ -1157,8 +1179,7 @@ describe("EFVideo", () => {
       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 timegroup.seek(seekPoints[i]!);
         expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
           expectedTimestamps[i]!,
           1,
@@ -1175,8 +1196,7 @@ describe("EFVideo", () => {
       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 timegroup.seek(fractionalTimes[i]!);
         expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
           expectedTimestamps[i]!,
           1,
@@ -1189,22 +1209,19 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      timegroup.currentTimeMs = 0;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(0);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         0,
         1,
       );
 
-      timegroup.currentTimeMs = 1000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(1000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         1,
         1,
       );
 
-      timegroup.currentTimeMs = 4000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(4000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBeCloseTo(
         4,
         1,
@@ -1216,8 +1233,7 @@ describe("EFVideo", () => {
       headMoov480p,
       expect,
     }) => {
-      timegroup.currentTimeMs = 1000;
-      await timegroup.seekTask.taskComplete;
+      await timegroup.seek(1000);
       expect(headMoov480p.unifiedVideoSeekTask.value?.timestamp).toBe(1);
 
       // // Track frameTask executions using a spy on the run method
@@ -1391,4 +1407,76 @@ describe("EFVideo", () => {
       expect(true).toBe(true);
     });
   });
+
+  describe("loop attribute", () => {
+    test(
+      "standalone ef-video respects loop attribute",
+      { timeout: 1000 },
+      async () => {
+        const container = document.createElement("div");
+        render(
+          html`
+            <ef-video
+              loop
+              id="loop-video"
+              src="bars-n-tone.mp4"
+              sourceout="2s"
+            ></ef-video>
+          `,
+          container,
+        );
+        document.body.appendChild(container);
+
+        const video = container.querySelector("#loop-video") as EFVideo;
+        await video.updateComplete;
+
+        expect(video.loop).toBe(true);
+        expect(video.playbackController).toBeDefined();
+        expect(video.playbackController?.loop).toBe(true);
+
+        container.remove();
+      },
+    );
+
+    test(
+      "loop property is reactive after initialization",
+      { timeout: 1000 },
+      async () => {
+        const container = document.createElement("div");
+        render(
+          html`
+            <ef-video
+              id="reactive-loop-video"
+              src="bars-n-tone.mp4"
+              sourceout="2s"
+            ></ef-video>
+          `,
+          container,
+        );
+        document.body.appendChild(container);
+
+        const video = container.querySelector(
+          "#reactive-loop-video",
+        ) as EFVideo;
+        await video.updateComplete;
+
+        expect(video.loop).toBe(false);
+        expect(video.playbackController?.loop).toBe(false);
+
+        video.loop = true;
+        await video.updateComplete;
+
+        expect(video.loop).toBe(true);
+        expect(video.playbackController?.loop).toBe(true);
+
+        video.loop = false;
+        await video.updateComplete;
+
+        expect(video.loop).toBe(false);
+        expect(video.playbackController?.loop).toBe(false);
+
+        container.remove();
+      },
+    );
+  });
 });