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

package/test/EFVideo.frame-tasks.browsertest.ts

@@ -1,524 +0,0 @@
-import { TaskStatus } from "@lit/task";
-import { html, render } from "lit";
-import { assert, beforeEach, describe, expect, test } from "vitest";
-import "../src/elements/EFVideo.js";
-import "../src/elements/EFTimegroup.js";
-import type { EFTimegroup } from "../src/elements/EFTimegroup.js";
-import type { EFVideo } from "../src/elements/EFVideo.js";
-import { assetMSWHandlers } from "./useAssetMSW.js";
-import { useMSW } from "./useMSW.ts";
-
-/**
- * Test suite for robust frame task chain functionality.
- * Validates that frame tasks either succeed with pixels or fail with descriptive errors.
- */
-describe("EFVideo Frame Tasks", () => {
-  const worker = useMSW();
-
-  beforeEach(() => {
-    document.body.innerHTML = "";
-
-    // Set up centralized MSW handlers to proxy requests to test assets
-    worker.use(...assetMSWHandlers);
-  });
-
-  test("should properly track frame tasks during initial render", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-
-    // Verify task dependencies are properly set up
-    expect(video.fragmentIndexTask).toBeDefined();
-    expect(video.mediaSegmentsTask).toBeDefined();
-    expect(video.seekTask).toBeDefined();
-    expect(video.videoAssetTask).toBeDefined();
-    expect(video.paintTask).toBeDefined();
-
-    timegroup.currentTimeMs = 1000;
-    await timegroup.updateComplete;
-
-    // Check if we can successfully render when avoiding concurrency conflicts
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    try {
-      await video.paintTask.run();
-
-      // Verify frame was actually rendered OR we get proper error
-      const canvas = video.canvasRef.value;
-      assert.ok(canvas, "Canvas should exist");
-
-      const ctx = canvas.getContext("2d");
-      assert.ok(ctx, "Canvas context should exist");
-
-      // Either we have pixels OR we expect the video system is working correctly
-      // (based on seeing DECODED FRAME traces in test output)
-      expect(canvas.width).toBeGreaterThan(0);
-      expect(canvas.height).toBeGreaterThan(0);
-    } catch (error) {
-      // This is expected when decoder lock prevents concurrent access
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-
-      if (errorMessage.includes("decoder is currently in use")) {
-        // Verify error message is descriptive and actionable
-        expect(errorMessage).toContain("Frame rendering failed");
-        expect(errorMessage).toContain("decoder is currently in use");
-        expect(errorMessage).toContain("concurrency issue");
-      } else {
-        throw error;
-      }
-    }
-  });
-
-  test("should validate task dependency chain completion order", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-
-    // Track task completion order
-    const completionOrder: string[] = [];
-    const taskMap = {
-      assetIndexLoader: video.assetIndexLoader,
-      fragmentIndexTask: video.fragmentIndexTask,
-      mediaSegmentsTask: video.mediaSegmentsTask,
-      seekTask: video.seekTask,
-      videoAssetTask: video.videoAssetTask,
-      paintTask: video.paintTask,
-      frameTask: video.frameTask,
-    };
-
-    for (const [name, task] of Object.entries(taskMap)) {
-      task.taskComplete
-        .then(() => {
-          completionOrder.push(name);
-        })
-        .catch(() => {
-          // Tasks may fail due to concurrency, but still track completion
-          completionOrder.push(name);
-        });
-    }
-
-    timegroup.currentTimeMs = 1000;
-    await timegroup.updateComplete;
-
-    // Wait for tasks with error handling
-    await Promise.allSettled(
-      Object.values(taskMap).map((task) => task.taskComplete),
-    );
-
-    // Validate dependency order constraints if tasks completed
-    if (completionOrder.length >= 4) {
-      const getIndex = (taskName: string) => completionOrder.indexOf(taskName);
-
-      // Only test order relationships for tasks that actually completed
-      if (
-        getIndex("assetIndexLoader") >= 0 &&
-        getIndex("fragmentIndexTask") >= 0
-      ) {
-        expect(getIndex("assetIndexLoader")).toBeLessThan(
-          getIndex("fragmentIndexTask"),
-        );
-      }
-      if (getIndex("fragmentIndexTask") >= 0 && getIndex("seekTask") >= 0) {
-        expect(getIndex("fragmentIndexTask")).toBeLessThan(
-          getIndex("seekTask"),
-        );
-      }
-      if (getIndex("mediaSegmentsTask") >= 0 && getIndex("seekTask") >= 0) {
-        expect(getIndex("mediaSegmentsTask")).toBeLessThan(
-          getIndex("seekTask"),
-        );
-      }
-    }
-
-    // Verify prerequisite tasks at least started properly
-    expect(video.fragmentIndexTask.status).toBeGreaterThanOrEqual(
-      TaskStatus.PENDING,
-    );
-    expect(video.mediaSegmentsTask.status).toBeGreaterThanOrEqual(
-      TaskStatus.PENDING,
-    );
-    expect(video.videoAssetTask.status).toBeGreaterThanOrEqual(
-      TaskStatus.PENDING,
-    );
-  });
-
-  test("should throw descriptive errors instead of silent failures", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const video = container.querySelector("ef-video") as EFVideo;
-    await video.updateComplete;
-
-    // Wait for video asset to be available
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // Test case 1: Missing video asset should throw descriptive error
-    const originalVideoAssetTask = video.videoAssetTask;
-    Object.defineProperty(video, "videoAssetTask", {
-      get: () => ({
-        ...originalVideoAssetTask,
-        value: null,
-        taskComplete: Promise.resolve(),
-      }),
-      configurable: true,
-    });
-
-    try {
-      await video.paintTask.run();
-      // If we get here without error, that's actually OK - it means the error checking
-      // prevented the operation rather than failing silently
-      expect(true).toBe(true); // Test passes - no silent failure
-    } catch (error) {
-      // Good - we got an error instead of silent failure
-      expect(error.message).toBeDefined();
-      expect(typeof error.message).toBe("string");
-    }
-
-    // Restore original
-    Object.defineProperty(video, "videoAssetTask", {
-      get: () => originalVideoAssetTask,
-      configurable: true,
-    });
-
-    // Test case 2: Canvas context error should throw descriptive error
-    const canvas = video.canvasRef.value;
-    if (canvas) {
-      const originalGetContext = canvas.getContext;
-      canvas.getContext = () => null;
-
-      try {
-        await video.paintTask.run();
-        // If we get here, that's OK - means error was prevented
-        expect(true).toBe(true);
-      } catch (error) {
-        // Good - we got an error instead of silent failure
-        expect(error.message).toBeDefined();
-        expect(typeof error.message).toBe("string");
-      }
-
-      canvas.getContext = originalGetContext;
-    }
-  });
-
-  test("should handle concurrent paintTask execution properly", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-
-    // Test case 1: Trigger multiple paint operations simultaneously
-    const times = [500, 1000, 1500, 2000];
-    const paintPromises: Promise<any>[] = [];
-
-    for (const time of times) {
-      timegroup.currentTimeMs = time;
-      await timegroup.updateComplete;
-
-      paintPromises.push(
-        video.paintTask.run().catch((error) => {
-          return { error, time };
-        }),
-      );
-    }
-
-    const results = await Promise.allSettled(paintPromises);
-
-    let successCount = 0;
-    let failureCount = 0;
-    let totalAttempts = 0;
-
-    for (let i = 0; i < results.length; i++) {
-      const result = results[i];
-      totalAttempts++;
-
-      if (result.status === "fulfilled") {
-        if (result.value?.error) {
-          failureCount++;
-        } else {
-          successCount++;
-        }
-      } else {
-        failureCount++;
-      }
-    }
-
-    // Expect that we attempted multiple operations
-    expect(totalAttempts).toBeGreaterThan(0);
-
-    // Either we had successes OR failures - no silent undefined returns
-    expect(successCount + failureCount).toBe(totalAttempts);
-  });
-
-  test.skip("should understand why concurrent paint operations occur", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-
-    // Test case 1: Single time change (should work fine)
-    timegroup.currentTimeMs = 1000;
-    await timegroup.updateComplete;
-
-    try {
-      await timegroup.waitForFrameTasks();
-    } catch (error) {
-      // Single time change may still fail due to natural concurrency
-      expect(error.message).toContain("decoder is currently in use");
-    }
-
-    // Test case 2: Manual paintTask.run() vs natural task flow
-    timegroup.currentTimeMs = 2000;
-    await timegroup.updateComplete;
-
-    try {
-      await video.paintTask.run();
-    } catch (error) {
-      // Expected when manual paintTask.run() conflicts with natural task execution
-      expect(error.message).toContain("decoder is currently in use");
-    }
-
-    // Test case 3: Rapid time changes (simulating user scrubbing)
-    const rapidTimes = [3000, 3500, 4000, 4500];
-    for (const time of rapidTimes) {
-      timegroup.currentTimeMs = time;
-      await timegroup.updateComplete;
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    await expect(timegroup.getPendingFrameTasks()).resolves.toHaveLength(0);
-    expect(timegroup.currentTimeMs).toBe(4500);
-  });
-
-  test("should validate paint success vs task completion", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // Verify prerequisite tasks complete successfully
-    expect(video.fragmentIndexTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.mediaSegmentsTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.seekTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.videoAssetTask.status).toBe(TaskStatus.COMPLETE);
-
-    // Verify all have actual values
-    expect(video.fragmentIndexTask.value).toBeTruthy();
-    expect(video.mediaSegmentsTask.value).toBeTruthy();
-    expect(video.seekTask.value).toBeTruthy();
-    expect(video.videoAssetTask.value).toBeTruthy();
-
-    // Check canvas state
-    const canvas = video.canvasRef.value;
-    const hasCanvas = !!canvas;
-    let hasContext = false;
-
-    if (canvas) {
-      const ctx = canvas.getContext("2d");
-      hasContext = !!ctx;
-    }
-
-    expect(hasCanvas).toBe(true);
-    expect(hasContext).toBe(true);
-
-    // Set a specific time and try to paint
-    timegroup.currentTimeMs = 5000;
-    await timegroup.updateComplete;
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    try {
-      const paintResult = await video.paintTask.run();
-
-      // If paint succeeds, verify we got a meaningful result
-      if (paintResult !== undefined && paintResult !== false) {
-        expect(paintResult).toBeTruthy();
-      }
-
-      // Check if pixels were actually rendered
-      if (canvas && hasContext) {
-        expect(canvas.width).toBeGreaterThan(0);
-        expect(canvas.height).toBeGreaterThan(0);
-      }
-    } catch (error) {
-      // Expected concurrency error or other valid error
-      expect(error.message).toBeDefined();
-      expect(typeof error.message).toBe("string");
-    }
-  });
-
-  test("should diagnose exact rendering issue", async () => {
-    const container = document.createElement("div");
-    render(
-      html`<ef-workbench>
-        <ef-timegroup mode="contain" style="width: 100px; height: 100px;">
-          <ef-video
-            src="/test-assets/media/bars-n-tone2.mp4"
-            mode="asset"
-          ></ef-video>
-        </ef-timegroup>
-      </ef-workbench>`,
-      container,
-    );
-    document.body.appendChild(container);
-
-    const timegroup = container.querySelector("ef-timegroup") as EFTimegroup;
-    const video = container.querySelector("ef-video") as EFVideo;
-
-    await video.updateComplete;
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // Verify prerequisite task states
-    expect(video.fragmentIndexTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.mediaSegmentsTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.seekTask.status).toBe(TaskStatus.COMPLETE);
-    expect(video.videoAssetTask.status).toBe(TaskStatus.COMPLETE);
-
-    // Set time for rendering
-    timegroup.currentTimeMs = 1000;
-    await timegroup.updateComplete;
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    const canvas = video.canvasRef.value;
-    assert.ok(canvas, "Canvas should exist");
-
-    try {
-      await video.paintTask.run();
-
-      // Check pixel state after paint
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const hasPixelsAfter = imageData.data.some((pixel) => pixel !== 0);
-
-        if (!hasPixelsAfter) {
-          // Check if videoAsset has frames
-          const videoAsset = video.videoAssetTask.value;
-          if (videoAsset) {
-            expect(typeof videoAsset.seekToTime).toBe("function");
-
-            // Try to manually get a frame
-            try {
-              const frame = await videoAsset.seekToTime(1.0);
-              expect(frame).toBeTruthy();
-
-              if (frame) {
-                expect(frame.format).toBeDefined();
-                expect(frame.codedWidth).toBeGreaterThan(0);
-                expect(frame.codedHeight).toBeGreaterThan(0);
-
-                // Try manual drawImage
-                ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
-                const imageDataAfterManual = ctx.getImageData(
-                  0,
-                  0,
-                  canvas.width,
-                  canvas.height,
-                );
-                const hasPixelsAfterManual = imageDataAfterManual.data.some(
-                  (pixel) => pixel !== 0,
-                );
-                expect(hasPixelsAfterManual).toBe(true);
-
-                frame.close();
-              }
-            } catch (seekError) {
-              // seekToTime errors are acceptable in concurrent scenarios
-              expect(seekError.message).toContain(
-                "decoder is currently in use",
-              );
-            }
-          }
-        } else {
-          expect(hasPixelsAfter).toBe(true);
-        }
-      }
-    } catch (error) {
-      expect(error.message).toContain("decoder is currently in use");
-    }
-  });
-});