@editframe/elements 0.26.3-beta.0 → 0.26.4-beta.0

package/src/elements/FetchContext.browsertest.ts

@@ -1,401 +0,0 @@
-import { html, render } from "lit";
-import { describe } from "vitest";
-
-import { test as baseTest } from "../../test/useMSW.js";
-import type { EFVideo } from "./EFVideo.js";
-import "./EFVideo.js";
-import "../gui/EFWorkbench.js";
-import "../gui/EFConfiguration.js";
-
-const test = baseTest.extend({});
-
-describe("URL Token Deduplication", () => {
-  test.skip("multiple EFMedia elements with same src should share URL tokens", async ({
-    expect,
-  }) => {
-    // TODO: This test is intentionally skipped because it documents a known issue where
-    // URL token requests are not properly deduplicated across multiple EFMedia elements
-    // with the same src. Currently makes 2 token requests instead of 1.
-    // Mock fetch to track token requests
-    const originalFetch = window.fetch;
-    const tokenRequests: string[] = [];
-    const mediaRequests: string[] = [];
-
-    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
-      const url = input.toString();
-
-      if (url.includes("/api/v1/url-token") || url.includes("/@ef-sign-url")) {
-        console.log("Token request:", url, init?.body);
-        tokenRequests.push(url);
-        // Mock token response
-        return new Response(JSON.stringify({ token: "mock-token" }), {
-          status: 200,
-          headers: { "Content-Type": "application/json" },
-        });
-      }
-
-      if (url.includes("/api/v1/transcode/")) {
-        console.log("Media request:", url);
-        mediaRequests.push(url);
-        // Mock media response
-        return new Response("mock-media-data", { status: 200 });
-      }
-
-      return originalFetch(input, init);
-    };
-
-    try {
-      const container = document.createElement("div");
-      // Create 3 EFVideo elements with the same source in a shared context
-      render(
-        html`
-          <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-            <ef-workbench>
-              <ef-video src="http://example.com/test.mp4"></ef-video>
-              <ef-video src="http://example.com/test.mp4"></ef-video>
-              <ef-video src="http://example.com/test.mp4"></ef-video>
-            </ef-workbench>
-          </ef-configuration>
-        `,
-        container,
-      );
-      document.body.appendChild(container);
-
-      const videos = container.querySelectorAll(
-        "ef-video",
-      ) as NodeListOf<EFVideo>;
-      const workbench = container.querySelector("ef-workbench") as any;
-
-      await workbench.updateComplete;
-      await Promise.all(Array.from(videos).map((v) => v.updateComplete));
-
-      // Trigger manifest requests for all videos
-      await Promise.all(
-        Array.from(videos).map(async (video) => {
-          try {
-            await video.mediaEngineTask.run();
-          } catch (error) {
-            // Expected to fail since we're mocking, but should trigger token requests
-            console.log("Expected error:", error);
-          }
-        }),
-      );
-
-      console.log("Token requests:", tokenRequests);
-      console.log("Media requests:", mediaRequests);
-
-      // Should only have 1 token request since all videos share the same source
-      // This test will currently fail, demonstrating the issue
-      expect(tokenRequests.length).toBe(1);
-
-      container.remove();
-    } finally {
-      window.fetch = originalFetch;
-    }
-  });
-
-  test("multiple EFMedia elements in separate context providers should share tokens globally", async ({
-    expect,
-  }) => {
-    // This test verifies global token deduplication across separate context providers
-    const originalFetch = window.fetch;
-    const tokenRequests: { url: string; body: any; timestamp: number }[] = [];
-
-    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
-      const url = input.toString();
-
-      if (url.includes("/api/v1/url-token") || url.includes("/@ef-sign-url")) {
-        const bodyData = init?.body ? JSON.parse(init.body as string) : null;
-        const timestamp = Date.now();
-        console.log("Token request:", url, bodyData, `at ${timestamp}`);
-        tokenRequests.push({ url, body: bodyData, timestamp });
-
-        // Add small delay to make timing issues more apparent
-        await new Promise((resolve) => setTimeout(resolve, 10));
-
-        return new Response(JSON.stringify({ token: "mock-token" }), {
-          status: 200,
-          headers: { "Content-Type": "application/json" },
-        });
-      }
-
-      if (url.includes("/api/v1/transcode/")) {
-        return new Response(
-          JSON.stringify({
-            audioRenditions: [],
-            videoRenditions: [],
-            src: "test",
-            durationMs: 1000,
-          }),
-          {
-            status: 200,
-            headers: { "Content-Type": "application/json" },
-          },
-        );
-      }
-
-      return originalFetch(input, init);
-    };
-
-    try {
-      const container = document.createElement("div");
-      // Create multiple elements with the same source, added concurrently
-      container.innerHTML = `
-        <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-          <ef-workbench>
-            <ef-video src="http://example.com/test.mp4"></ef-video>
-          </ef-workbench>
-        </ef-configuration>
-        <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-          <ef-workbench>
-            <ef-video src="http://example.com/test.mp4"></ef-video>
-          </ef-workbench>
-        </ef-configuration>
-        <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-          <ef-workbench>
-            <ef-video src="http://example.com/test.mp4"></ef-video>
-          </ef-workbench>
-        </ef-configuration>
-      `;
-      document.body.appendChild(container);
-
-      const videos = container.querySelectorAll(
-        "ef-video",
-      ) as NodeListOf<EFVideo>;
-      const workbenches = container.querySelectorAll(
-        "ef-workbench",
-      ) as NodeListOf<any>;
-
-      await Promise.all(Array.from(workbenches).map((w) => w.updateComplete));
-      await Promise.all(Array.from(videos).map((v) => v.updateComplete));
-
-      // Trigger all requests simultaneously to test race conditions
-      await Promise.all(
-        Array.from(videos).map(async (video) => {
-          try {
-            await video.mediaEngineTask.run();
-          } catch (_error) {
-            // Expected due to mocking
-          }
-        }),
-      );
-
-      console.log(`Total token requests: ${tokenRequests.length}`);
-      tokenRequests.forEach((req, i) => {
-        console.log(`Request ${i + 1}:`, req.body, `timing: ${req.timestamp}`);
-      });
-
-      // Log for debugging - the real issue might be in timing/concurrency
-      console.log(
-        "Token request details:",
-        tokenRequests.map((r) => ({
-          url: r.body?.url,
-          params: r.body?.params,
-          timing: r.timestamp,
-        })),
-      );
-
-      // With global token deduplication, should only make 1 token request
-      // even across separate context providers
-      expect(tokenRequests.length).toBe(1);
-
-      container.remove();
-    } finally {
-      window.fetch = originalFetch;
-    }
-  });
-
-  test("concurrent token requests are properly deduplicated globally", async ({
-    expect,
-  }) => {
-    // This test simulates the race condition where multiple elements initialize simultaneously
-    const originalFetch = window.fetch;
-    const tokenRequests: { url: string; body: any; timestamp: number }[] = [];
-    const concurrentRequestStarts: number[] = [];
-
-    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
-      const url = input.toString();
-
-      if (url.includes("/api/v1/url-token") || url.includes("/@ef-sign-url")) {
-        const bodyData = init?.body ? JSON.parse(init.body as string) : null;
-        const timestamp = Date.now();
-        concurrentRequestStarts.push(timestamp);
-        console.log("Token request started:", url, bodyData, `at ${timestamp}`);
-
-        // Simulate network delay
-        await new Promise((resolve) => setTimeout(resolve, 50));
-
-        tokenRequests.push({ url, body: bodyData, timestamp });
-        return new Response(JSON.stringify({ token: "mock-token" }), {
-          status: 200,
-          headers: { "Content-Type": "application/json" },
-        });
-      }
-
-      if (url.includes("/api/v1/transcode/")) {
-        return new Response(
-          JSON.stringify({
-            audioRenditions: [],
-            videoRenditions: [],
-            src: "test",
-            durationMs: 1000,
-          }),
-          {
-            status: 200,
-            headers: { "Content-Type": "application/json" },
-          },
-        );
-      }
-
-      return originalFetch(input, init);
-    };
-
-    try {
-      // Create elements and trigger simultaneous token requests
-      const elements: any[] = [];
-      const containers: HTMLElement[] = [];
-
-      // Create 5 separate context providers with identical videos
-      for (let i = 0; i < 5; i++) {
-        const container = document.createElement("div");
-        container.innerHTML = `
-          <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-            <ef-workbench>
-              <ef-video src="http://example.com/concurrent-test.mp4"></ef-video>
-            </ef-workbench>
-          </ef-configuration>
-        `;
-        document.body.appendChild(container);
-        containers.push(container);
-
-        const video = container.querySelector("ef-video");
-        const workbench = container.querySelector("ef-workbench");
-        elements.push({ video, workbench });
-      }
-
-      // Wait for all elements to be ready
-      await Promise.all(
-        elements.map(async ({ video, workbench }) => {
-          await workbench.updateComplete;
-          await video.updateComplete;
-        }),
-      );
-
-      // Trigger all manifest requests simultaneously to create race condition
-      const startTime = Date.now();
-      await Promise.all(
-        elements.map(async ({ video }) => {
-          try {
-            await video.mediaEngineTask.run();
-          } catch (_error) {
-            // Expected due to mocking
-          }
-        }),
-      );
-      const endTime = Date.now();
-
-      console.log(`All requests completed in ${endTime - startTime}ms`);
-      console.log(`Concurrent starts: ${concurrentRequestStarts.length}`);
-      console.log(`Completed token requests: ${tokenRequests.length}`);
-
-      // Verify that despite 5 concurrent elements, only 1 token was actually fetched
-      expect(tokenRequests.length).toBe(1);
-
-      // Cleanup
-      containers.forEach((container) => {
-        container.remove();
-      });
-    } finally {
-      window.fetch = originalFetch;
-    }
-  });
-
-  test("ten identical videos should use single URL token (user reported issue)", async ({
-    expect,
-  }) => {
-    // This test specifically reproduces the user's reported issue:
-    // 10 identical videos creating 10 tokens instead of sharing 1 token
-    const originalFetch = window.fetch;
-    const tokenRequests: string[] = [];
-
-    window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
-      const url = input.toString();
-
-      if (url.includes("/api/v1/url-token") || url.includes("/@ef-sign-url")) {
-        console.log("Token request for:", JSON.parse(init?.body as string));
-        tokenRequests.push(url);
-        return new Response(JSON.stringify({ token: "shared-token-for-all" }), {
-          status: 200,
-          headers: { "Content-Type": "application/json" },
-        });
-      }
-
-      if (url.includes("/api/v1/transcode/")) {
-        return new Response(
-          JSON.stringify({
-            audioRenditions: [],
-            videoRenditions: [],
-            src: "test",
-            durationMs: 1000,
-          }),
-          {
-            status: 200,
-            headers: { "Content-Type": "application/json" },
-          },
-        );
-      }
-
-      return originalFetch(input, init);
-    };
-
-    try {
-      const container = document.createElement("div");
-
-      // Create exactly the scenario the user described: 10 identical videos on one page
-      const videoElements = Array.from(
-        { length: 10 },
-        (_, i) =>
-          `<ef-video src="http://example.com/user-video.mp4" id="video-${i}"></ef-video>`,
-      ).join("\n");
-
-      container.innerHTML = `
-        <ef-configuration api-host="http://localhost:3000" signing-url="/@ef-sign-url">
-          <ef-workbench>
-            ${videoElements}
-          </ef-workbench>
-        </ef-configuration>
-      `;
-      document.body.appendChild(container);
-
-      const videos = container.querySelectorAll("ef-video");
-      const workbench = container.querySelector("ef-workbench") as any;
-
-      expect(videos.length).toBe(10);
-
-      await workbench.updateComplete;
-      await Promise.all(Array.from(videos).map((v: any) => v.updateComplete));
-
-      // Trigger media engine initialization for all 10 videos
-      await Promise.all(
-        Array.from(videos).map(async (video: any) => {
-          try {
-            await video.mediaEngineTask.run();
-          } catch (_error) {
-            // Expected due to mocking
-          }
-        }),
-      );
-
-      console.log(
-        `Total token requests for 10 identical videos: ${tokenRequests.length}`,
-      );
-
-      // This should now be 1 instead of 10, proving the deduplication works
-      expect(tokenRequests.length).toBe(1);
-
-      container.remove();
-    } finally {
-      window.fetch = originalFetch;
-    }
-  });
-});

package/src/elements/FetchMixin.ts

@@ -1,38 +0,0 @@
-import type { LitElement } from "lit";
-
-export declare class FetchMixinInterface {
-  fetch: typeof fetch;
-}
-
-type Constructor<T = {}> = new (...args: any[]) => T;
-export function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {
-  class FetchElement extends superClass {
-    fetch = (url: string, init?: RequestInit): Promise<Response> => {
-      try {
-        // Look for context providers up the DOM tree
-        const workbench = this.closest("ef-workbench") as any;
-        if (workbench?.fetch) {
-          return workbench.fetch(url, init);
-        }
-
-        const preview = this.closest("ef-preview") as any;
-        if (preview?.fetch) {
-          return preview.fetch(url, init);
-        }
-
-        const configuration = this.closest("ef-configuration") as any;
-        if (configuration?.fetch) {
-          return configuration.fetch(url, init);
-        }
-
-        // Fallback to window.fetch
-        return window.fetch(url, init);
-      } catch (error) {
-        console.error("FetchMixin error", url, error);
-        throw error;
-      }
-    };
-  }
-
-  return FetchElement as Constructor<FetchMixinInterface> & T;
-}

package/src/elements/SampleBuffer.ts

@@ -1,94 +0,0 @@
-import type { AudioSample, VideoSample } from "mediabunny";
-import { roundToMilliseconds } from "./EFMedia/shared/PrecisionUtils";
-export type MediaSample = VideoSample | AudioSample;
-
-// Generic sample buffer that works with both VideoSample and AudioSample
-export class SampleBuffer {
-  private buffer: MediaSample[] = [];
-  private bufferSize: number;
-
-  constructor(bufferSize = 10) {
-    this.bufferSize = bufferSize;
-  }
-
-  push(sample: MediaSample) {
-    // Defensive copy to avoid concurrent modification during iteration
-    const currentBuffer = [...this.buffer];
-    currentBuffer.push(sample);
-
-    if (currentBuffer.length > this.bufferSize) {
-      const shifted = currentBuffer.shift();
-      if (shifted) {
-        try {
-          shifted.close();
-        } catch (_error) {
-          // Sample already closed, continue
-        }
-      }
-    }
-
-    // Update buffer atomically
-    this.buffer = currentBuffer;
-  }
-
-  clear() {
-    // Get current buffer and clear atomically
-    const toClose = this.buffer;
-    this.buffer = [];
-
-    // Close samples after clearing to avoid holding references
-    for (const sample of toClose) {
-      try {
-        sample.close();
-      } catch (_error) {
-        // Sample already closed, continue
-      }
-    }
-  }
-
-  peek(): MediaSample | undefined {
-    // Defensive read - get current buffer state
-    const currentBuffer = this.buffer;
-    return currentBuffer[0];
-  }
-
-  find(desiredSeekTimeMs: number): MediaSample | undefined {
-    const currentBuffer = [...this.buffer];
-
-    if (currentBuffer.length === 0) return undefined;
-
-    // Use consistent precision handling across the entire pipeline
-    const targetTimeMs = roundToMilliseconds(desiredSeekTimeMs);
-
-    // Find the sample that contains the target time
-    for (const sample of currentBuffer) {
-      const sampleStartMs = roundToMilliseconds((sample.timestamp || 0) * 1000);
-      const sampleDurationMs = roundToMilliseconds(
-        (sample.duration || 0) * 1000,
-      );
-      const sampleEndMs = roundToMilliseconds(sampleStartMs + sampleDurationMs);
-
-      // Check if the desired time falls within this sample's time span [start, end], inclusive of end
-      if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) {
-        return sample;
-      }
-    }
-
-    return undefined; // No sample contains the target time
-  }
-
-  get length() {
-    return this.buffer.length;
-  }
-
-  get firstTimestamp() {
-    // Defensive read - get current buffer state
-    const currentBuffer = this.buffer;
-    return currentBuffer[0]?.timestamp || 0;
-  }
-
-  getContents(): MediaSample[] {
-    // Defensive copy to avoid concurrent modification during iteration
-    return [...this.buffer];
-  }
-}