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

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

@@ -0,0 +1,79 @@
+import { Task } from "@lit/task";
+
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE";
+import { EF_RENDERING } from "../../../EF_RENDERING";
+import type { VideoRendition } from "../../../transcoding/types";
+import type { EFVideo } from "../../EFVideo";
+import {
+  type MediaBufferConfig,
+  type MediaBufferState,
+  manageMediaBuffer,
+} from "../shared/BufferUtils";
+import {
+  getLatestMediaEngine,
+  getVideoRendition,
+} from "../tasks/makeMediaEngineTask";
+
+/**
+ * Configuration for video buffering - extends the generic interface
+ */
+export interface VideoBufferConfig extends MediaBufferConfig {}
+
+/**
+ * State of the video buffer - uses the generic interface
+ */
+export interface VideoBufferState extends MediaBufferState {}
+
+type VideoBufferTask = Task<readonly [number], VideoBufferState>;
+export const makeVideoBufferTask = (host: EFVideo): VideoBufferTask => {
+  let currentState: VideoBufferState = {
+    currentSeekTimeMs: 0,
+    activeRequests: new Set(),
+    cachedSegments: new Set(),
+    requestQueue: [],
+  };
+
+  return new Task(host, {
+    autoRun: EF_INTERACTIVE, // Start buffering automatically when media is ready
+    args: () => [host.desiredSeekTimeMs] as const,
+    onError: (error) => {
+      console.error("videoBufferTask error", error);
+    },
+    onComplete: (value) => {
+      currentState = value;
+    },
+    task: async ([seekTimeMs], { signal }) => {
+      // Use EFMedia properties directly - no hardcoded duplication!
+      const currentConfig: VideoBufferConfig = {
+        bufferDurationMs: host.videoBufferDurationMs,
+        maxParallelFetches: host.maxVideoBufferFetches,
+        enableBuffering: host.enableVideoBuffering && !EF_RENDERING,
+      };
+
+      return manageMediaBuffer<VideoRendition>(
+        seekTimeMs,
+        currentConfig,
+        currentState,
+        (host as any).intrinsicDurationMs || 10000,
+        signal,
+        {
+          computeSegmentId: async (timeMs, rendition) => {
+            // Use media engine's computeSegmentId
+            const mediaEngine = await getLatestMediaEngine(host, signal);
+            return mediaEngine.computeSegmentId(timeMs, rendition);
+          },
+          fetchSegment: async (segmentId, rendition) => {
+            const mediaEngine = await getLatestMediaEngine(host, signal);
+            return mediaEngine.fetchMediaSegment(segmentId, rendition);
+          },
+          getRendition: async () => {
+            // Get real video rendition from media engine
+            const mediaEngine = await getLatestMediaEngine(host, signal);
+            return getVideoRendition(mediaEngine);
+          },
+          logError: console.error,
+        },
+      );
+    },
+  });
+};

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

@@ -0,0 +1,59 @@
+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 { makeVideoInitSegmentFetchTask } from "./makeVideoInitSegmentFetchTask";
+
+@customElement("test-media-video-init-segment-fetch")
+class TestMediaVideoInitSegmentFetch extends EFVideo {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media-video-init-segment-fetch": TestMediaVideoInitSegmentFetch;
+  }
+}
+
+const test = baseTest.extend<{
+  element: TestMediaVideoInitSegmentFetch;
+}>({
+  element: async ({}, use) => {
+    const element = document.createElement(
+      "test-media-video-init-segment-fetch",
+    );
+    await use(element);
+    element.remove();
+  },
+});
+
+describe("makeVideoInitSegmentFetchTask", () => {
+  beforeEach(() => {
+    // MSW setup is now handled by test fixtures
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll(
+      "test-media-video-init-segment-fetch",
+    );
+    for (const element of elements) {
+      element.remove();
+    }
+    vi.restoreAllMocks();
+  });
+
+  test("creates task with correct initial state", ({ element, expect }) => {
+    const task = makeVideoInitSegmentFetchTask(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 = makeVideoInitSegmentFetchTask(element);
+
+    expect(task).toBeDefined();
+    expect(task.status).toBe(TaskStatus.INITIAL);
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Task } from "@lit/task";
+import type { MediaEngine } from "../../../transcoding/types";
+import type { EFVideo } from "../../EFVideo";
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask";
+
+export const makeVideoInitSegmentFetchTask = (
+  host: EFVideo,
+): Task<readonly [MediaEngine | undefined], ArrayBuffer> => {
+  return new Task(host, {
+    args: () => [host.mediaEngineTask.value] as const,
+    onError: (error) => {
+      console.error("videoInitSegmentFetchTask error", error);
+    },
+    onComplete: (_value) => {},
+    task: async ([_mediaEngine], { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      return mediaEngine.fetchInitSegment(
+        mediaEngine.getVideoRendition(),
+        signal,
+      );
+    },
+  });
+};

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,44 @@
+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 (_): Promise<VideoSample | undefined> => {
+      await host.mediaEngineTask.taskComplete;
+      await host.videoSegmentIdTask.taskComplete;
+      await host.videoSegmentFetchTask.taskComplete;
+      await host.videoInitSegmentFetchTask.taskComplete;
+
+      const videoInput = await host.videoInputTask.taskComplete;
+      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");
+      }
+      const sample = (await videoInput.seek(
+        videoTrack.id,
+        host.desiredSeekTimeMs,
+      )) as unknown as VideoSample;
+
+      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,32 @@
+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) {
+        throw new Error("Segment ID is not available");
+      }
+      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,23 @@
+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 (_, { signal }) => {
+      const mediaEngine = await getLatestMediaEngine(host, signal);
+      return mediaEngine.computeSegmentId(
+        host.desiredSeekTimeMs,
+        mediaEngine.getVideoRendition(),
+      );
+    },
+  });
+};