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

package/src/elements/EFVideo.browsertest.ts

@@ -0,0 +1,680 @@
+import { html, render } from "lit";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { assetMSWHandlers } from "../../test/useAssetMSW.js";
+import { useMSW } 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();
+
+  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(() => {
+    // Clean up any remaining elements
+    const videos = document.querySelectorAll("ef-video");
+    for (const video of videos) {
+      video.remove();
+    }
+  });
+
+  describe("basic rendering", () => {
+    test("should be defined and render canvas", async () => {
+      const element = document.createElement("ef-video");
+      document.body.appendChild(element);
+
+      // Wait for element to render
+      await element.updateComplete;
+
+      expect(element.tagName).toBe("EF-VIDEO");
+      expect(element.canvasElement).toBeDefined();
+      expect(element.canvasElement?.tagName).toBe("CANVAS");
+    });
+
+    test("canvas has correct default properties", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement;
+
+      expect(canvas).toBeDefined();
+      expect(canvas?.width).toBeGreaterThan(0);
+      expect(canvas?.height).toBeGreaterThan(0);
+    });
+
+    test("canvas inherits styling correctly", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-video style="width: 640px; height: 360px;"></ef-video>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement;
+
+      expect(canvas).toBeDefined();
+      // Canvas should inherit the styling
+      const computedStyle = window.getComputedStyle(canvas!);
+      expect(computedStyle.width).toBe("640px");
+      expect(computedStyle.height).toBe("360px");
+    });
+  });
+
+  describe("video asset integration", () => {
+    test("integrates with video asset loading", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="/test-assets/media/bars-n-tone2.mp4" mode="asset"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+
+      // Wait for fragment index to load
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      expect(video.src).toBe("/test-assets/media/bars-n-tone2.mp4");
+
+      // The video should have loaded successfully and have a duration > 0
+      // We don't test for specific duration since real assets may vary
+      expect(video.intrinsicDurationMs).toBeGreaterThan(0);
+    });
+
+    test("handles missing video asset gracefully", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="/nonexistent.mp4"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Should not throw when video asset is missing
+      expect(() => {
+        video.paintTask.run();
+      }).not.toThrow();
+    });
+  });
+
+  describe("frame painting and canvas updates", () => {
+    test("canvas dimensions update when frame dimensions change", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement!;
+
+      // Mock a video frame with specific dimensions
+      const mockFrame = {
+        codedWidth: 1920,
+        codedHeight: 1080,
+        format: "RGBA",
+        timestamp: 0,
+        close: vi.fn(),
+      } as unknown as VideoFrame;
+
+      // Simulate frame painting (this would normally happen through paintTask)
+      const ctx = canvas.getContext("2d");
+      if (ctx && mockFrame.codedWidth && mockFrame.codedHeight) {
+        canvas.width = mockFrame.codedWidth;
+        canvas.height = mockFrame.codedHeight;
+        // Mock drawing the frame
+        ctx.fillStyle = "red";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+
+      expect(canvas.width).toBe(1920);
+      expect(canvas.height).toBe(1080);
+    });
+
+    test("handles frame painting with null format gracefully", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement!;
+
+      // Mock a frame with null format (edge case)
+      const mockFrame = {
+        codedWidth: 640,
+        codedHeight: 480,
+        format: null,
+        timestamp: 0,
+        close: vi.fn(),
+      } as unknown as VideoFrame;
+
+      const ctx = canvas.getContext("2d");
+
+      // Should handle null format gracefully
+      expect(() => {
+        if (ctx && mockFrame.format === null) {
+          console.warn("Frame format is null", mockFrame);
+          return;
+        }
+      }).not.toThrow();
+    });
+
+    test("canvas context is available for drawing", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement!;
+      const ctx = canvas.getContext("2d");
+
+      expect(ctx).toBeDefined();
+      expect(ctx).toBeInstanceOf(CanvasRenderingContext2D);
+
+      // Test that we can draw on the canvas
+      expect(() => {
+        ctx!.fillStyle = "blue";
+        ctx!.fillRect(0, 0, 100, 100);
+      }).not.toThrow();
+    });
+  });
+
+  describe("decoder lock scenarios", () => {
+    test("handles concurrent paint attempts safely", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Access the private decoder lock through reflection for testing
+      const decoderLockDescriptor = Object.getOwnPropertyDescriptor(
+        Object.getPrototypeOf(video),
+        "#decoderLock",
+      );
+
+      // 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();
+      }
+    });
+
+    test("paintTask handles missing canvas gracefully", () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Remove canvas to test edge case
+      const canvas = video.canvasElement;
+      canvas?.remove();
+
+      // Paint task should handle missing canvas
+      expect(() => {
+        video.paintTask.run();
+      }).not.toThrow();
+    });
+
+    test("handles paint task with no video asset", () => {
+      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();
+    });
+  });
+
+  describe("frame task integration", () => {
+    test("frameTask coordinates all required tasks", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="/test-video.mp4"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // frameTask should complete without errors even when other tasks fail
+      expect(() => {
+        video.frameTask.run();
+      }).not.toThrow();
+    });
+
+    test("frameTask handles missing dependencies", () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Should handle missing dependencies gracefully
+      expect(() => {
+        video.frameTask.run();
+      }).not.toThrow();
+    });
+  });
+
+  describe("error handling and edge cases", () => {
+    test("handles seek to invalid time", () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Should handle invalid seek times gracefully
+      expect(() => {
+        video.desiredSeekTimeMs = -1000; // Invalid negative time
+        video.paintTask.run();
+      }).not.toThrow();
+
+      expect(() => {
+        video.desiredSeekTimeMs = Number.POSITIVE_INFINITY;
+        video.paintTask.run();
+      }).not.toThrow();
+    });
+
+    test("handles video element removal during playback", () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Start some operations
+      video.paintTask.run();
+
+      // Remove element
+      video.remove();
+
+      // Should not cause errors
+      expect(() => {
+        video.paintTask.run();
+      }).not.toThrow();
+    });
+
+    test("handles canvas context loss gracefully", async () => {
+      const container = document.createElement("div");
+      render(html`<ef-video></ef-video>`, container);
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+
+      // Wait for element to render
+      await video.updateComplete;
+
+      const canvas = video.canvasElement!;
+
+      // Simulate context loss by making getContext return null
+      const originalGetContext = canvas.getContext;
+      canvas.getContext = vi.fn().mockReturnValue(null);
+
+      // Should handle context loss gracefully
+      expect(() => {
+        video.paintTask.run();
+      }).not.toThrow();
+
+      // Restore original method
+      canvas.getContext = originalGetContext;
+    });
+  });
+
+  describe("integration with timegroups", () => {
+    test("integrates correctly within timegroup structure", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-timegroup mode="sequence">
+            <ef-video src="/test-assets/media/bars-n-tone2.mp4" mode="asset"></ef-video>
+          </ef-timegroup>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      const timegroup = container.querySelector("ef-timegroup");
+      await video.updateComplete;
+
+      // Wait for fragment index to load with longer timeout
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      expect(timegroup).toBeDefined();
+
+      // The video should have loaded successfully within the timegroup
+      // We test that it has a valid duration instead of a specific value
+      // Allow for race conditions in test environment
+      if (video.intrinsicDurationMs === 0) {
+        // If not loaded yet, wait a bit more
+        await new Promise((resolve) => setTimeout(resolve, 300));
+      }
+      expect(video.intrinsicDurationMs).toBeGreaterThan(0);
+    });
+  });
+
+  describe("scrub track integration", () => {
+    test("should initialize scrub track manager for JIT transcode mode", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="http://example.com/video.mp4"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+
+      // Give the async initialization time to complete
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // For JIT transcode mode, scrub track manager should be initialized
+      expect(video.scrubTrackManager).toBeDefined();
+    });
+
+    test("should not initialize scrub track manager for asset mode", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="/@ef-abc123/video.mp4" mode="asset"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // For asset mode, scrub track manager should not be initialized
+      expect(video.scrubTrackManager).toBeUndefined();
+    });
+
+    test("should expose scrub track performance metrics", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="http://example.com/video.mp4"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const stats = video.getScrubTrackStats();
+
+      if (video.scrubTrackManager) {
+        expect(stats).not.toBeNull();
+        expect(typeof stats?.hits).toBe("number");
+        expect(typeof stats?.misses).toBe("number");
+        expect(typeof stats?.hitRate).toBe("number");
+      } else {
+        expect(stats).toBeNull();
+      }
+    });
+
+    test("should return null stats when no scrub track manager exists", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="/@ef-abc123/video.mp4" mode="asset"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+
+      const stats = video.getScrubTrackStats();
+      expect(stats).toBeNull();
+    });
+
+    test("should have canvas element available", async () => {
+      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;
+
+      const canvas = video.canvasElement;
+      expect(canvas).toBeDefined();
+      expect(canvas?.tagName).toBe("CANVAS");
+    });
+
+    test("should clean up scrub track manager on disconnect", async () => {
+      const container = document.createElement("div");
+      render(
+        html`
+        <ef-preview>
+          <ef-video src="http://example.com/video.mp4"></ef-video>
+        </ef-preview>
+      `,
+        container,
+      );
+      document.body.appendChild(container);
+
+      const video = container.querySelector("ef-video") as EFVideo;
+      await video.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const hadScrubManager = !!video.scrubTrackManager;
+
+      // Simulate disconnect
+      video.remove();
+
+      // If there was a scrub manager, it should have been cleaned up
+      // We can't directly test the cleanup call, but we can verify the element is disconnected
+      expect(video.isConnected).toBe(false);
+
+      // The scrub manager should still exist but be cleaned up internally
+      if (hadScrubManager) {
+        expect(video.scrubTrackManager).toBeDefined();
+      }
+    });
+  });
+
+  describe("loading indicator", () => {
+    test("should not show loading indicator for operations completing under 250ms", async () => {
+      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;
+
+      // Start a fast operation
+      video.startDelayedLoading("test-fast", "Fast operation");
+
+      // Clear it quickly (under 250ms)
+      setTimeout(() => {
+        video.clearDelayedLoading("test-fast");
+      }, 100);
+
+      // Wait past the delay threshold
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      expect(video.loadingState.isLoading).toBe(false);
+    });
+
+    test("should show loading indicator only after 250ms for slow operations", async () => {
+      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;
+
+      // Start a slow operation
+      video.startDelayedLoading("test-slow", "Slow operation");
+
+      // Should not be loading immediately
+      expect(video.loadingState.isLoading).toBe(false);
+
+      // Wait past the delay threshold
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Should now be loading
+      expect(video.loadingState.isLoading).toBe(true);
+      expect(video.loadingState.message).toBe("Slow operation");
+
+      // Clear the loading
+      video.clearDelayedLoading("test-slow");
+
+      // Should stop loading
+      expect(video.loadingState.isLoading).toBe(false);
+    });
+
+    test("should handle multiple concurrent loading operations", async () => {
+      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;
+
+      // Start multiple operations
+      video.startDelayedLoading("op1", "Operation 1");
+      video.startDelayedLoading("op2", "Operation 2");
+
+      // Wait past delay threshold
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Should be loading
+      expect(video.loadingState.isLoading).toBe(true);
+
+      // Clear one operation
+      video.clearDelayedLoading("op1");
+
+      // Should still be loading (op2 still active)
+      expect(video.loadingState.isLoading).toBe(true);
+
+      // Clear second operation
+      video.clearDelayedLoading("op2");
+
+      // Should stop loading
+      expect(video.loadingState.isLoading).toBe(false);
+    });
+
+    test("should not show loading for background operations", async () => {
+      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;
+
+      // Start a background operation
+      video.startDelayedLoading("bg-op", "Background operation", {
+        background: true,
+      });
+
+      // Wait past delay threshold
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Should not show loading UI for background operations
+      expect(video.loadingState.isLoading).toBe(false);
+
+      // Clear the operation
+      video.clearDelayedLoading("bg-op");
+    });
+
+    test("should properly clean up loading state on disconnect", async () => {
+      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;
+
+      // Start an operation
+      video.startDelayedLoading("cleanup-test", "Test operation");
+
+      // Disconnect the element
+      video.remove();
+
+      // Loading should be cleared
+      expect(video.loadingState.isLoading).toBe(false);
+    });
+  });
+});