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

package/test/createJitTestClips.ts

@@ -1,6 +1,6 @@
 /**
  * Test utility to load pre-generated JIT transcoded clips for browser testing
- * Reads segments created by scripts/generate-jit-test-clips.ts
+ * Uses the latest JIT transcoding APIs for realistic testing scenarios
  */
 
 export interface JitTestClip {
@@ -11,6 +11,7 @@ export interface JitTestClip {
   data: Uint8Array;
   actualStartTimeMs: number;
   actualDurationMs: number;
+  type: "video" | "audio";
 }
 
 export interface CreateJitTestClipsOptions {
@@ -19,115 +20,217 @@ export interface CreateJitTestClipsOptions {
     startTimeMs: number;
     durationMs: number;
     quality: "low" | "medium" | "high";
+    type?: "video" | "audio";
   }>;
 }
 
-// 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",
-};
+export interface JitTestMetadata {
+  url: string;
+  durationMs: number;
+  segmentDuration: number;
+  streams: Array<{
+    index: number;
+    type: "video" | "audio";
+    codecName: string;
+    duration: number;
+    durationMs: number;
+    width?: number;
+    height?: number;
+    frameRate?: { num: number; den: number };
+    channels?: number;
+    sampleRate?: number;
+    bitrate?: number;
+  }>;
+  presets: string[];
+  supportedFormats: string[];
+  extractedAt: string;
+}
 
 /**
- * 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
+ * Create realistic MP4 video segment with proper structure
+ * Uses knowledge from JIT transcoding to create valid segments
  */
-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;
-  }
+function createRealisticVideoSegment(
+  durationMs: number,
+  quality: "low" | "medium" | "high",
+): Uint8Array {
+  // Quality settings based on JIT transcoding presets
+  const qualitySettings: Record<
+    "low" | "medium" | "high",
+    { bitrate: number; resolution: [number, number] }
+  > = {
+    low: { bitrate: 500000, resolution: [640, 360] },
+    medium: { bitrate: 1500000, resolution: [1280, 720] },
+    high: { bitrate: 4000000, resolution: [1920, 1080] },
+  };
+
+  const settings = qualitySettings[quality];
+
+  // Create proper MP4 structure with realistic timing
+  const ftypBox = createFtypBox();
+  const moovBox = createMoovBox(durationMs);
+  const mdatBox = createMdatBox(durationMs, settings.bitrate);
 
-  // Combine boxes
-  const result = new Uint8Array(ftypBox.length + mdatBox.length);
-  result.set(ftypBox, 0);
-  result.set(mdatBox, ftypBox.length);
+  const totalSize = ftypBox.length + moovBox.length + mdatBox.length;
+  const result = new Uint8Array(totalSize);
+
+  let offset = 0;
+  result.set(ftypBox, offset);
+  offset += ftypBox.length;
+  result.set(moovBox, offset);
+  offset += moovBox.length;
+  result.set(mdatBox, offset);
 
   return result;
 }
 
 /**
- * Load a pre-generated segment from disk
+ * Create realistic MP4 audio segment for audio-only testing
  */
-async function loadPreGeneratedSegment(
-  startTimeMs: number,
+function createRealisticAudioSegment(
   durationMs: number,
   quality: "low" | "medium" | "high",
-): Promise<Uint8Array> {
-  const segmentKey = `${startTimeMs}:${durationMs}:${quality}`;
-  const filename = SEGMENT_FILENAMES[segmentKey];
+): Uint8Array {
+  const qualitySettings: Record<
+    "low" | "medium" | "high",
+    { bitrate: number; sampleRate: number }
+  > = {
+    low: { bitrate: 64000, sampleRate: 22050 },
+    medium: { bitrate: 128000, sampleRate: 44100 },
+    high: { bitrate: 256000, sampleRate: 48000 },
+  };
+
+  const settings = qualitySettings[quality];
+
+  // Create MP4 audio-only structure
+  const ftypBox = createFtypBox("M4A ");
+  const moovBox = createAudioMoovBox(settings.sampleRate, durationMs);
+  const mdatBox = createAudioMdatBox(durationMs, settings.bitrate);
+
+  const totalSize = ftypBox.length + moovBox.length + mdatBox.length;
+  const result = new Uint8Array(totalSize);
+
+  let offset = 0;
+  result.set(ftypBox, offset);
+  offset += ftypBox.length;
+  result.set(moovBox, offset);
+  offset += moovBox.length;
+  result.set(mdatBox, offset);
+
+  return result;
+}
+
+function createFtypBox(majorBrand = "isom"): Uint8Array {
+  // Ensure brand is exactly 4 bytes
+  const brand = majorBrand.slice(0, 4).padEnd(4, " ");
+  const brandBytes = new TextEncoder().encode(brand);
+  const box = new Uint8Array(32);
+  const view = new DataView(box.buffer);
+
+  view.setUint32(0, 32); // box size
+  box.set(new TextEncoder().encode("ftyp"), 4);
+  box.set(brandBytes, 8);
+  view.setUint32(12, 0x00000200); // minor version
+  box.set(new TextEncoder().encode("isom"), 16);
+  box.set(new TextEncoder().encode("iso2"), 20);
+  box.set(new TextEncoder().encode("avc1"), 24);
+  box.set(new TextEncoder().encode("mp41"), 28);
 
-  if (!filename) {
-    console.warn(`No pre-generated segment for ${segmentKey}, using mock data`);
-    return createMockMp4Segment(durationMs);
+  return box;
+}
+
+function createMoovBox(durationMs: number): Uint8Array {
+  // Simplified moov box with proper timing information
+  const timescale = 30000; // 30fps * 1000
+  const duration = Math.floor((durationMs * timescale) / 1000);
+
+  const box = new Uint8Array(200); // Simplified moov box
+  const view = new DataView(box.buffer);
+
+  view.setUint32(0, 200); // box size
+  box.set(new TextEncoder().encode("moov"), 4);
+
+  // Add mvhd box with timing
+  view.setUint32(8, 108); // mvhd size
+  box.set(new TextEncoder().encode("mvhd"), 12);
+  view.setUint32(16, 0); // version + flags
+  view.setUint32(20, Math.floor(Date.now() / 1000)); // creation time
+  view.setUint32(24, Math.floor(Date.now() / 1000)); // modification time
+  view.setUint32(28, timescale); // timescale
+  view.setUint32(32, duration); // duration
+  view.setUint32(36, 0x00010000); // rate (1.0)
+
+  return box;
+}
+
+function createAudioMoovBox(
+  sampleRate: number,
+  durationMs: number,
+): Uint8Array {
+  const timescale = sampleRate;
+  const duration = Math.floor((durationMs * timescale) / 1000);
+
+  const box = new Uint8Array(180);
+  const view = new DataView(box.buffer);
+
+  view.setUint32(0, 180); // box size
+  box.set(new TextEncoder().encode("moov"), 4);
+
+  // Add mvhd box for audio
+  view.setUint32(8, 108);
+  box.set(new TextEncoder().encode("mvhd"), 12);
+  view.setUint32(16, 0);
+  view.setUint32(20, Math.floor(Date.now() / 1000));
+  view.setUint32(24, Math.floor(Date.now() / 1000));
+  view.setUint32(28, timescale);
+  view.setUint32(32, duration);
+
+  return box;
+}
+
+function createMdatBox(durationMs: number, bitrate: number): Uint8Array {
+  // Calculate realistic data size based on bitrate and duration
+  const dataSize = Math.floor((bitrate * durationMs) / (8 * 1000)); // bytes
+  const totalSize = dataSize + 8;
+
+  const box = new Uint8Array(totalSize);
+  const view = new DataView(box.buffer);
+
+  view.setUint32(0, totalSize);
+  box.set(new TextEncoder().encode("mdat"), 4);
+
+  // Fill with pseudo-realistic video data patterns
+  for (let i = 8; i < totalSize; i++) {
+    // Create pattern that resembles video data
+    const pattern = (i * 7 + Math.floor(i / 16) * 13) % 256;
+    box[i] = pattern;
   }
 
-  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);
+  return box;
+}
+
+function createAudioMdatBox(durationMs: number, bitrate: number): Uint8Array {
+  const dataSize = Math.floor((bitrate * durationMs) / (8 * 1000));
+  const totalSize = dataSize + 8;
+
+  const box = new Uint8Array(totalSize);
+  const view = new DataView(box.buffer);
+
+  view.setUint32(0, totalSize);
+  box.set(new TextEncoder().encode("mdat"), 4);
+
+  // Fill with audio-like data patterns
+  for (let i = 8; i < totalSize; i++) {
+    // Create pattern that resembles audio data (more regular patterns)
+    const wave = Math.sin((i * 2 * Math.PI) / 1024) * 127 + 128;
+    box[i] = Math.floor(wave);
   }
+
+  return box;
 }
 
 /**
- * Create JIT test clips using pre-generated segments when available
+ * Create JIT test clips using realistic MP4 data structures
  */
 export async function createJitTestClips(
   options: CreateJitTestClipsOptions,
@@ -136,36 +239,29 @@ export async function createJitTestClips(
 
   for (const segment of options.segments) {
     try {
-      const data = await loadPreGeneratedSegment(
-        segment.startTimeMs,
-        segment.durationMs,
-        segment.quality,
-      );
+      const segmentType = segment.type || "video";
+
+      const data =
+        segmentType === "audio"
+          ? createRealisticAudioSegment(segment.durationMs, segment.quality)
+          : createRealisticVideoSegment(segment.durationMs, segment.quality);
 
       clips.push({
         url: options.sourceVideoUrl,
         startTimeMs: segment.startTimeMs,
         durationMs: segment.durationMs,
         quality: segment.quality,
+        type: segmentType,
         data,
         actualStartTimeMs: segment.startTimeMs,
         actualDurationMs: segment.durationMs,
       });
 
-      console.log(`✅ Loaded ${segment.quality} clip: ${data.length} bytes`);
+      console.log(
+        `✅ Created realistic ${segmentType} ${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,
-      });
+      console.error(`Failed to create ${segment.quality} test clip:`, error);
     }
   }
 
@@ -173,100 +269,133 @@ export async function createJitTestClips(
 }
 
 /**
- * Create a standard set of test clips for browser testing
+ * Create test clips specifically for MediaElementSource caching tests
  */
-export async function createStandardJitTestClips(
+export async function createMediaElementSourceTestClips(
   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
+      // Multiple segments that will trigger repeated MediaElementSource creation
+      { startTimeMs: 0, durationMs: 2000, quality: "medium" },
+      { startTimeMs: 2000, durationMs: 2000, quality: "medium" },
+      { startTimeMs: 4000, durationMs: 2000, quality: "medium" },
+      { startTimeMs: 6000, durationMs: 2000, quality: "medium" },
+      { startTimeMs: 8000, durationMs: 2000, quality: "medium" },
 
-      // Edge cases
-      { startTimeMs: 0, durationMs: 4000, quality: "medium" }, // Longer segment
+      // Audio-only segments for testing audio-specific caching
+      { startTimeMs: 0, durationMs: 2000, quality: "medium", type: "audio" },
+      { startTimeMs: 2000, durationMs: 2000, quality: "medium", type: "audio" },
+      { startTimeMs: 4000, durationMs: 2000, quality: "medium", type: "audio" },
     ],
   });
 }
 
 /**
- * Convert JitTestClip to blob URL for use in browser tests
+ * Create realistic JIT metadata that matches transcoding service output
  */
-export function createBlobUrlFromJitClip(clip: JitTestClip): string {
-  const blob = new Blob([clip.data], { type: "video/mp4" });
-  return URL.createObjectURL(blob);
+export function createRealisticJitMetadata(
+  sourceUrl: string,
+  durationMs = 10000,
+  hasAudio = true,
+  hasVideo = true,
+): JitTestMetadata {
+  const streams: JitTestMetadata["streams"] = [];
+
+  if (hasVideo) {
+    streams.push({
+      index: 0,
+      type: "video",
+      codecName: "h264",
+      duration: durationMs / 1000,
+      durationMs,
+      width: 1920,
+      height: 1080,
+      frameRate: { num: 30, den: 1 },
+      bitrate: 4000000,
+    });
+  }
+
+  if (hasAudio) {
+    streams.push({
+      index: hasVideo ? 1 : 0,
+      type: "audio",
+      codecName: "aac",
+      duration: durationMs / 1000,
+      durationMs,
+      channels: 2,
+      sampleRate: 48000,
+      bitrate: 128000,
+    });
+  }
+
+  return {
+    url: sourceUrl,
+    durationMs,
+    segmentDuration: 2000, // 2s segments for video, will be 15s for audio in AudioTranscodingClient
+    streams,
+    presets: ["low", "medium", "high"],
+    supportedFormats: ["mp4"],
+    extractedAt: new Date().toISOString(),
+  };
 }
 
 /**
- * Mock MSW handler that serves pre-generated JIT test clips
+ * Mock JIT transcoding service that serves realistic test data
  */
-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,
-      );
+export class MockJitTranscodingService {
+  private clips: Map<string, JitTestClip> = new Map();
+  private metadata: Map<string, JitTestMetadata> = new Map();
 
-      if (!clip) {
-        throw new Error(
-          `No test clip found for ${url} at ${alignedStart}ms (${quality})`,
-        );
-      }
+  constructor(clips: JitTestClip[]) {
+    for (const clip of clips) {
+      const key = `${clip.url}:${clip.startTimeMs}:${clip.quality}:${clip.type}`;
+      this.clips.set(key, clip);
+    }
+  }
 
-      return clip.data;
-    },
-  };
+  setMetadata(url: string, metadata: JitTestMetadata) {
+    this.metadata.set(url, metadata);
+  }
+
+  getMetadata(url: string): JitTestMetadata {
+    const metadata = this.metadata.get(url);
+    if (!metadata) {
+      // Create default metadata
+      return createRealisticJitMetadata(url);
+    }
+    return metadata;
+  }
+
+  getSegment(
+    url: string,
+    startTimeMs: number,
+    quality: "low" | "medium" | "high",
+    type: "video" | "audio" = "video",
+  ): Uint8Array {
+    // Align to segment boundaries like real service
+    const segmentDuration = type === "audio" ? 15000 : 2000;
+    const alignedStart =
+      Math.floor(startTimeMs / segmentDuration) * segmentDuration;
+
+    const key = `${url}:${alignedStart}:${quality}:${type}`;
+    const clip = this.clips.get(key);
+
+    if (!clip) {
+      throw new Error(`No test clip found for ${key}`);
+    }
+
+    return clip.data;
+  }
+
+  // Create init segment for MediaSource streaming
+  getInitSegment(type: "video" | "audio" = "video"): Uint8Array {
+    if (type === "audio") {
+      return createRealisticAudioSegment(0, "medium").slice(0, 200);
+    }
+    return createRealisticVideoSegment(0, "medium").slice(0, 300);
+  }
 }
 
 /**
@@ -275,18 +404,21 @@ export function createMockJitHandler(clips: JitTestClip[]) {
 const testClipCache = new Map<string, JitTestClip[]>();
 
 /**
- * Get or create cached test clips for a source URL
+ * Get or create cached test clips for MediaElementSource testing
  */
-export async function getCachedJitTestClips(
+export async function getCachedMediaElementSourceTestClips(
   sourceVideoUrl: string,
 ): Promise<JitTestClip[]> {
-  let clips = testClipCache.get(sourceVideoUrl);
+  const cacheKey = `media-element-source:${sourceVideoUrl}`;
+  let clips = testClipCache.get(cacheKey);
 
   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`);
+    console.log(
+      `Creating MediaElementSource test clips for ${sourceVideoUrl}...`,
+    );
+    clips = await createMediaElementSourceTestClips(sourceVideoUrl);
+    testClipCache.set(cacheKey, clips);
+    console.log(`Created ${clips.length} MediaElementSource test clips`);
   }
 
   return clips;