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

package/test/createJitTestClips.ts

@@ -0,0 +1,293 @@
+/**
+ * Test utility to load pre-generated JIT transcoded clips for browser testing
+ * Reads segments created by scripts/generate-jit-test-clips.ts
+ */
+
+export interface JitTestClip {
+  url: string;
+  startTimeMs: number;
+  durationMs: number;
+  quality: "low" | "medium" | "high";
+  data: Uint8Array;
+  actualStartTimeMs: number;
+  actualDurationMs: number;
+}
+
+export interface CreateJitTestClipsOptions {
+  sourceVideoUrl: string;
+  segments: Array<{
+    startTimeMs: number;
+    durationMs: number;
+    quality: "low" | "medium" | "high";
+  }>;
+}
+
+// Map segments to their pre-generated filenames
+const SEGMENT_FILENAMES: Record<string, string> = {
+  "0:2000:low": "segment-0ms-2s-low.mp4",
+  "0:2000:medium": "segment-0ms-2s-medium.mp4",
+  "0:2000:high": "segment-0ms-2s-high.mp4",
+  "2000:2000:medium": "segment-2000ms-2s-medium.mp4",
+  "4000:2000:medium": "segment-4000ms-2s-medium.mp4",
+  "0:4000:medium": "segment-0ms-4s-medium.mp4",
+  "6000:1000:low": "segment-6000ms-1s-low.mp4",
+};
+
+/**
+ * Create a minimal MP4 file for testing when pre-generated files aren't available
+ * This creates a very basic MP4 structure that can be used for testing
+ */
+function createMockMp4Segment(durationMs = 2000): Uint8Array {
+  // Minimal MP4 structure: ftyp box + mdat box with dummy data
+  const ftypBox = new Uint8Array([
+    0x00,
+    0x00,
+    0x00,
+    0x20, // box size (32 bytes)
+    0x66,
+    0x74,
+    0x79,
+    0x70, // 'ftyp'
+    0x69,
+    0x73,
+    0x6f,
+    0x6d, // major brand 'isom'
+    0x00,
+    0x00,
+    0x02,
+    0x00, // minor version
+    0x69,
+    0x73,
+    0x6f,
+    0x6d, // compatible brand 'isom'
+    0x69,
+    0x73,
+    0x6f,
+    0x32, // compatible brand 'iso2'
+    0x61,
+    0x76,
+    0x63,
+    0x31, // compatible brand 'avc1'
+    0x6d,
+    0x70,
+    0x34,
+    0x31, // compatible brand 'mp41'
+  ]);
+
+  // Simple mdat box with dummy data based on duration
+  const dataSize = Math.max(1000, durationMs / 10); // Rough size calculation
+  const mdatSize = dataSize + 8; // header size
+  const mdatBox = new Uint8Array(mdatSize);
+
+  // mdat header
+  const view = new DataView(mdatBox.buffer);
+  view.setUint32(0, mdatSize); // box size
+  mdatBox.set([0x6d, 0x64, 0x61, 0x74], 4); // 'mdat'
+
+  // Fill with pseudo-random data based on duration
+  for (let i = 8; i < mdatSize; i++) {
+    mdatBox[i] = (i * durationMs) % 256;
+  }
+
+  // Combine boxes
+  const result = new Uint8Array(ftypBox.length + mdatBox.length);
+  result.set(ftypBox, 0);
+  result.set(mdatBox, ftypBox.length);
+
+  return result;
+}
+
+/**
+ * Load a pre-generated segment from disk
+ */
+async function loadPreGeneratedSegment(
+  startTimeMs: number,
+  durationMs: number,
+  quality: "low" | "medium" | "high",
+): Promise<Uint8Array> {
+  const segmentKey = `${startTimeMs}:${durationMs}:${quality}`;
+  const filename = SEGMENT_FILENAMES[segmentKey];
+
+  if (!filename) {
+    console.warn(`No pre-generated segment for ${segmentKey}, using mock data`);
+    return createMockMp4Segment(durationMs);
+  }
+
+  try {
+    // In browser environment, we'll need to fetch from a served location
+    // For now, use mock data as fallback
+    console.warn(
+      `Cannot load ${filename} in browser environment, using mock data`,
+    );
+    return createMockMp4Segment(durationMs);
+  } catch (error) {
+    console.warn(`Failed to load ${filename}, using mock data:`, error);
+    return createMockMp4Segment(durationMs);
+  }
+}
+
+/**
+ * Create JIT test clips using pre-generated segments when available
+ */
+export async function createJitTestClips(
+  options: CreateJitTestClipsOptions,
+): Promise<JitTestClip[]> {
+  const clips: JitTestClip[] = [];
+
+  for (const segment of options.segments) {
+    try {
+      const data = await loadPreGeneratedSegment(
+        segment.startTimeMs,
+        segment.durationMs,
+        segment.quality,
+      );
+
+      clips.push({
+        url: options.sourceVideoUrl,
+        startTimeMs: segment.startTimeMs,
+        durationMs: segment.durationMs,
+        quality: segment.quality,
+        data,
+        actualStartTimeMs: segment.startTimeMs,
+        actualDurationMs: segment.durationMs,
+      });
+
+      console.log(`✅ Loaded ${segment.quality} clip: ${data.length} bytes`);
+    } catch (error) {
+      console.error(`Failed to load ${segment.quality} test clip:`, error);
+      // Create mock fallback
+      const mockData = createMockMp4Segment(segment.durationMs);
+      clips.push({
+        url: options.sourceVideoUrl,
+        startTimeMs: segment.startTimeMs,
+        durationMs: segment.durationMs,
+        quality: segment.quality,
+        data: mockData,
+        actualStartTimeMs: segment.startTimeMs,
+        actualDurationMs: segment.durationMs,
+      });
+    }
+  }
+
+  return clips;
+}
+
+/**
+ * Create a standard set of test clips for browser testing
+ */
+export async function createStandardJitTestClips(
+  sourceVideoUrl: string,
+): Promise<JitTestClip[]> {
+  return createJitTestClips({
+    sourceVideoUrl,
+    segments: [
+      // Short clips for quick testing - these match our pre-generated segments
+      { startTimeMs: 0, durationMs: 2000, quality: "medium" }, // First 2 seconds
+      { startTimeMs: 0, durationMs: 2000, quality: "low" }, // Same segment, different quality
+      { startTimeMs: 0, durationMs: 2000, quality: "high" }, // Same segment, high quality
+
+      // Sequential segments for testing playback
+      { startTimeMs: 2000, durationMs: 2000, quality: "medium" }, // Next 2 seconds
+      { startTimeMs: 4000, durationMs: 2000, quality: "medium" }, // Next 2 seconds
+
+      // Edge cases
+      { startTimeMs: 0, durationMs: 4000, quality: "medium" }, // Longer segment
+    ],
+  });
+}
+
+/**
+ * Convert JitTestClip to blob URL for use in browser tests
+ */
+export function createBlobUrlFromJitClip(clip: JitTestClip): string {
+  const blob = new Blob([clip.data], { type: "video/mp4" });
+  return URL.createObjectURL(blob);
+}
+
+/**
+ * Mock MSW handler that serves pre-generated JIT test clips
+ */
+export function createMockJitHandler(clips: JitTestClip[]) {
+  return {
+    clips,
+
+    // Mock metadata endpoint
+    getMetadata: (url: string) => ({
+      url,
+      durationMs: 10000, // 10 second test video
+      streams: [
+        {
+          index: 0,
+          type: "video" as const,
+          codecName: "h264",
+          duration: 10,
+          durationMs: 10000,
+          width: 1920,
+          height: 1080,
+          frameRate: { num: 30, den: 1 },
+        },
+        {
+          index: 1,
+          type: "audio" as const,
+          codecName: "aac",
+          duration: 10,
+          durationMs: 10000,
+          channels: 2,
+          sampleRate: 48000,
+        },
+      ],
+      presets: ["low", "medium", "high"],
+      segmentDuration: 2000,
+      supportedFormats: ["mp4"],
+      extractedAt: new Date().toISOString(),
+    }),
+
+    // Mock segment endpoint - returns pre-generated clip data
+    getSegment: (
+      url: string,
+      startTimeMs: number,
+      quality: "low" | "medium" | "high",
+    ) => {
+      // Align to 2s boundaries like the real service
+      const alignedStart = Math.floor(startTimeMs / 2000) * 2000;
+
+      const clip = clips.find(
+        (c) =>
+          c.url === url &&
+          c.startTimeMs === alignedStart &&
+          c.quality === quality,
+      );
+
+      if (!clip) {
+        throw new Error(
+          `No test clip found for ${url} at ${alignedStart}ms (${quality})`,
+        );
+      }
+
+      return clip.data;
+    },
+  };
+}
+
+/**
+ * Cache for test clips to avoid regenerating them multiple times
+ */
+const testClipCache = new Map<string, JitTestClip[]>();
+
+/**
+ * Get or create cached test clips for a source URL
+ */
+export async function getCachedJitTestClips(
+  sourceVideoUrl: string,
+): Promise<JitTestClip[]> {
+  let clips = testClipCache.get(sourceVideoUrl);
+
+  if (!clips) {
+    console.log(`Loading JIT test clips for ${sourceVideoUrl}...`);
+    clips = await createStandardJitTestClips(sourceVideoUrl);
+    testClipCache.set(sourceVideoUrl, clips);
+    console.log(`Loaded ${clips.length} test clips`);
+  }
+
+  return clips;
+}

package/test/useAssetMSW.ts

@@ -0,0 +1,49 @@
+/**
+ * Asset-specific MSW handlers for testing
+ * Provides pre-configured handlers for asset fragment indexes and track data
+ */
+
+import { http, HttpResponse } from "msw";
+
+/**
+ * Asset MSW handlers that redirect requests to real test assets
+ * Use with MSW worker.use() to proxy asset requests to /test-assets/asset-mode/
+ */
+export const assetMSWHandlers = [
+  // Fragment index handler - rewrite to test asset
+  http.get("/@ef-track-fragment-index/*", async () => {
+    const response = await fetch("/asset-mode/index.json");
+    const data = await response.json();
+    return HttpResponse.json(data);
+  }),
+
+  // Track data handler - rewrite to test asset with proper range support
+  http.get("/@ef-track/*", async ({ request }) => {
+    const url = new URL(request.url);
+    const trackId = url.searchParams.get("trackId");
+    if (!trackId) {
+      return new HttpResponse(null, { status: 400 });
+    }
+
+    const rangeHeader = request.headers.get("range");
+    const response = await fetch(`/asset-mode/track-${trackId}.mp4`, {
+      headers: {
+        ...(rangeHeader && {
+          range: rangeHeader,
+        }),
+      },
+    });
+
+    const contentRangeHeader = response.headers.get("Content-Range");
+    return new HttpResponse(await response.arrayBuffer(), {
+      status: response.status,
+      headers: {
+        "Content-Type": "video/mp4",
+        "Accept-Ranges": "bytes",
+        ...(contentRangeHeader && {
+          "Content-Range": contentRangeHeader,
+        }),
+      },
+    });
+  }),
+];

package/test/useMSW.ts

@@ -0,0 +1,31 @@
+/**
+ * MSW server setup utility for testing
+ * Provides a properly configured MSW worker with lifecycle management for browser tests
+ */
+
+import { setupWorker } from "msw/browser";
+import { afterAll, afterEach, beforeAll } from "vitest";
+
+/**
+ * Set up MSW worker for browser testing with proper lifecycle
+ */
+export function useMSW() {
+  const worker = setupWorker();
+
+  beforeAll(async () => {
+    await worker.start({
+      onUnhandledRequest: "bypass", // Don't warn about unhandled requests
+      quiet: true, // Disable logging of matched requests
+    });
+  });
+
+  afterEach(() => {
+    worker.resetHandlers();
+  });
+
+  afterAll(() => {
+    worker.stop();
+  });
+
+  return worker;
+}