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

package/src/elements/EFMedia/videoTasks/makeVideoInputTask.browsertest.ts

@@ -0,0 +1,55 @@
+import { TaskStatus } from "@lit/task";
+import { customElement } from "lit/decorators.js";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../../../test/useMSW.js";
+import { EFVideo } from "../../EFVideo";
+import { makeVideoInputTask } from "./makeVideoInputTask";
+
+@customElement("test-media-video-input")
+class TestMediaVideoInput extends EFVideo {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-video-input": TestMediaVideoInput;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaVideoInput;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement("test-media-video-input");
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeVideoInputTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll("test-media-video-input");
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeVideoInputTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+    expect(task.value).toBeUndefined();
+    expect(task.error).toBeUndefined();
+  });
+
+  test("task integrates with element properties", ({ element, expect }) => {
+    const task = makeVideoInputTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

package/src/elements/EFMedia/videoTasks/makeVideoInputTask.ts

@@ -0,0 +1,45 @@
+import { Task } from "@lit/task";
+
+import { EFMedia } from "../../EFMedia";
+import type { EFVideo } from "../../EFVideo";
+import { BufferedSeekingInput } from "../BufferedSeekingInput";
+import type { InputTask } from "../shared/MediaTaskUtils";
+
+export const makeVideoInputTask = (host: EFVideo): InputTask => {
+  return new Task<
+    readonly [ArrayBuffer | undefined, ArrayBuffer | undefined],
+    BufferedSeekingInput
+  >(host, {
+    args: () =>
+      [
+        host.videoInitSegmentFetchTask.value,
+        host.videoSegmentFetchTask.value,
+      ] as const,
+    onError: (error) => {
+      console.error("videoInputTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async () => {
+      const initSegment = await host.videoInitSegmentFetchTask.taskComplete;
+      const segment = await host.videoSegmentFetchTask.taskComplete;
+      if (!initSegment || !segment) {
+        throw new Error("Init segment or segment is not available");
+      }
+
+      // Get startTimeOffsetMs from the video rendition if available
+      const mediaEngine = await host.mediaEngineTask.taskComplete;
+      const videoRendition = mediaEngine?.videoRendition;
+      const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
+
+      const input = new BufferedSeekingInput(
+        await new Blob([initSegment, segment]).arrayBuffer(),
+        {
+          videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+          audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+          startTimeOffsetMs,
+        },
+      );
+      return input;
+    },
+  });
+};

package/src/elements/EFMedia/videoTasks/makeVideoSeekTask.ts

@@ -0,0 +1,68 @@
+import { Task } from "@lit/task";
+
+import type { VideoSample } from "mediabunny";
+import { IgnorableError } from "../../EFMedia";
+import type { EFVideo } from "../../EFVideo";
+import type { BufferedSeekingInput } from "../BufferedSeekingInput";
+
+type VideoSeekTask = Task<
+  readonly [number, BufferedSeekingInput | undefined],
+  VideoSample | undefined
+>;
+export const makeVideoSeekTask = (host: EFVideo): VideoSeekTask => {
+  return new Task(host, {
+    args: () => [host.desiredSeekTimeMs, host.videoInputTask.value] as const,
+    onError: (error) => {
+      if (error instanceof IgnorableError) {
+        console.info("videoSeekTask aborted");
+      }
+      console.error("videoSeekTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async (
+      [targetSeekTimeMs],
+      { signal },
+    ): Promise<VideoSample | undefined> => {
+      // CRITICAL FIX: Use the targetSeekTimeMs from args, not host.desiredSeekTimeMs
+      // This ensures we use the same seek time that the segment loading tasks used
+
+      await host.mediaEngineTask.taskComplete;
+      signal.throwIfAborted(); // Abort if a new seek started
+      await host.videoSegmentIdTask.taskComplete;
+      signal.throwIfAborted(); // Abort if a new seek started
+      await host.videoSegmentFetchTask.taskComplete;
+      signal.throwIfAborted(); // Abort if a new seek started
+      await host.videoInitSegmentFetchTask.taskComplete;
+      signal.throwIfAborted(); // Abort if a new seek started
+
+      const videoInput = await host.videoInputTask.taskComplete;
+      signal.throwIfAborted(); // Abort if a new seek started
+      if (!videoInput) {
+        throw new Error("Video input is not available");
+      }
+      const videoTrack = await videoInput.getFirstVideoTrack();
+      if (!videoTrack) {
+        throw new Error("Video track is not available");
+      }
+      signal.throwIfAborted(); // Abort if a new seek started
+
+      const sample = (await videoInput.seek(
+        videoTrack.id,
+        targetSeekTimeMs, // Use the captured value, not host.desiredSeekTimeMs
+      )) as unknown as VideoSample | undefined;
+
+      signal.throwIfAborted(); // Abort if a new seek started
+      // If seek returned undefined, it was aborted - don't throw
+      if (sample === undefined && signal.aborted) {
+        return undefined;
+      }
+
+      // If we got undefined but weren't aborted, that's an actual error
+      if (sample === undefined) {
+        throw new Error("Video seek failed to find sample");
+      }
+
+      return sample;
+    },
+  });
+};

package/src/elements/EFMedia/videoTasks/makeVideoSegmentFetchTask.browsertest.ts

@@ -0,0 +1,57 @@
+import { TaskStatus } from "@lit/task";
+import { customElement } from "lit/decorators.js";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../../../test/useMSW.js";
+import { EFVideo } from "../../EFVideo";
+import { makeVideoSegmentFetchTask } from "./makeVideoSegmentFetchTask";
+
+@customElement("test-media-video-segment-fetch")
+class TestMediaVideoSegmentFetch extends EFVideo {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-video-segment-fetch": TestMediaVideoSegmentFetch;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaVideoSegmentFetch;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement("test-media-video-segment-fetch");
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeVideoSegmentFetchTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll(
+      "test-media-video-segment-fetch",
+    );
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeVideoSegmentFetchTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+    expect(task.value).toBeUndefined();
+    expect(task.error).toBeUndefined();
+  });
+
+  test("task integrates with element properties", ({ element, expect }) => {
+    const task = makeVideoSegmentFetchTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

package/src/elements/EFMedia/videoTasks/makeVideoSegmentFetchTask.ts

@@ -0,0 +1,43 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFVideo } from "../../EFVideo";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeVideoSegmentFetchTask = (
+  host: EFVideo,
+): Task<
+  readonly [MediaEngine | undefined, number | undefined],
+  ArrayBuffer
+> => {
+  return new Task(host, {
+    args: () =>
+      [host.mediaEngineTask.value, host.videoSegmentIdTask.value] as const,
+    onError: (error) => {
+      console.error("videoSegmentFetchTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async (_, { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      const segmentId = await host.videoSegmentIdTask.taskComplete;
+      if (segmentId === undefined) {
+        // Provide more context in the error to help with debugging
+        const rendition = mediaEngine.videoRendition;
+        const debugInfo = {
+          hasRendition: !!rendition,
+          segmentDurationMs: rendition?.segmentDurationMs,
+          segmentDurationsMs: rendition?.segmentDurationsMs?.length || 0,
+          desiredSeekTimeMs: host.desiredSeekTimeMs,
+          intrinsicDurationMs: host.intrinsicDurationMs,
+        };
+        throw new Error(
+          `Segment ID is not available for video. Debug info: ${JSON.stringify(debugInfo)}`,
+        );
+      }
+      return mediaEngine.fetchMediaSegment(
+        segmentId,
+        mediaEngine.getVideoRendition(),
+        signal,
+      );
+    },
+  });
+};

package/src/elements/EFMedia/videoTasks/makeVideoSegmentIdTask.browsertest.ts

@@ -0,0 +1,56 @@
+import { TaskStatus } from "@lit/task";
+import { customElement } from "lit/decorators.js";
+import { afterEach, beforeEach, describe, vi } from "vitest";
+import { test as baseTest } from "../../../../test/useMSW.js";
+import { EFVideo } from "../../EFVideo";
+import { makeVideoSegmentIdTask } from "./makeVideoSegmentIdTask";
+
+@customElement("test-media-video-segment")
+class TestMediaVideoSegment extends EFVideo {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-video-segment": TestMediaVideoSegment;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaVideoSegment;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement("test-media-video-segment");
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeVideoSegmentIdTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll("test-media-video-segment");
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeVideoSegmentIdTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+    expect(task.value).toBeUndefined();
+    expect(task.error).toBeUndefined();
+  });
+
+  test("task integrates with element properties", ({ element, expect }) => {
+    element.desiredSeekTimeMs = 7500;
+
+    const task = makeVideoSegmentIdTask(element);
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

package/src/elements/EFMedia/videoTasks/makeVideoSegmentIdTask.ts

@@ -0,0 +1,24 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFVideo } from "../../EFVideo";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeVideoSegmentIdTask = (
+  host: EFVideo,
+): Task<readonly [MediaEngine | undefined, number], number | undefined> => {
+  return new Task(host, {
+    args: () => [host.mediaEngineTask.value, host.desiredSeekTimeMs] as const,
+    onError: (error) => {
+      console.error("videoSegmentIdTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async ([, targetSeekTimeMs], { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      signal.throwIfAborted(); // Abort if a new seek started
+      return mediaEngine.computeSegmentId(
+        targetSeekTimeMs, // Use captured value, not host.desiredSeekTimeMs
+        mediaEngine.getVideoRendition(),
+      );
+    },
+  });
+};