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

package/src/elements/EFImage.browsertest.ts

@@ -1,120 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import "./EFImage.js";
-import "../gui/EFPreview.js";
-import { v4 } from "uuid";
-
-describe("EFImage", () => {
-  describe("when rendering", () => {
-    beforeEach(() => {
-      // @ts-expect-error
-      window.FRAMEGEN_BRIDGE = true;
-    });
-    afterEach(() => {
-      delete window.FRAMEGEN_BRIDGE;
-    });
-    test("assetPath uses http:// protocol", () => {
-      const workbench = document.createElement("ef-workbench");
-      const element = document.createElement("ef-image");
-      workbench.appendChild(element);
-      element.assetId = "550e8400-e29b-41d4-a716-446655440000";
-      expect(element.assetPath()).toBe(
-        "https://editframe.dev/api/v1/image_files/550e8400-e29b-41d4-a716-446655440000",
-      );
-    });
-  });
-
-  describe("attribute: asset-id", () => {
-    test("determines assetPath", () => {
-      const id = v4();
-      const image = document.createElement("ef-image");
-      image.setAttribute("asset-id", id);
-      expect(image.assetPath()).toBe(
-        `https://editframe.dev/api/v1/image_files/${id}`,
-      );
-    });
-
-    test("honors apiHost", () => {
-      const id = v4();
-      const image = document.createElement("ef-image");
-      const preview = document.createElement("ef-preview");
-      image.setAttribute("asset-id", id);
-      preview.appendChild(image);
-      preview.apiHost = "test://";
-      document.body.appendChild(preview);
-      expect(image.assetPath()).toBe(`test:///api/v1/image_files/${id}`);
-    });
-  });
-
-  describe("hasOwnDuration", () => {
-    test("is false by default", () => {
-      const image = document.createElement("ef-image");
-      expect(image.hasOwnDuration).toBe(false);
-    });
-
-    test("is true when duration is set", () => {
-      const image = document.createElement("ef-image");
-      image.setAttribute("duration", "1s");
-      expect(image.hasOwnDuration).toBe(true);
-    });
-  });
-
-  describe("durationMs", () => {
-    test("Can be set on element directly", () => {
-      const image = document.createElement("ef-image");
-      image.src =
-        "https://editframe.dev/api/v1/image_files/550e8400-e29b-41d4-a716-446655440000";
-      image.duration = "1s";
-      expect(image.durationMs).toBe(1000);
-    });
-
-    test("Can be set through setAttribute", () => {
-      const image = document.createElement("ef-image");
-      image.src =
-        "https://editframe.dev/api/v1/image_files/550e8400-e29b-41d4-a716-446655440000";
-      image.setAttribute("duration", "1s");
-      expect(image.durationMs).toBe(1000);
-    });
-  });
-
-  describe("direct URL support", () => {
-    test("assetPath returns https URLs unchanged", () => {
-      const image = document.createElement("ef-image");
-      image.src = "https://example.com/image.jpg";
-      expect(image.assetPath()).toBe("https://example.com/image.jpg");
-    });
-
-    test("assetPath returns http URLs unchanged", () => {
-      const image = document.createElement("ef-image");
-      image.src = "http://example.com/image.jpg";
-      expect(image.assetPath()).toBe("http://example.com/image.jpg");
-    });
-
-    test("assetPath preserves local file behavior", () => {
-      const image = document.createElement("ef-image");
-      image.src = "local-image.jpg";
-      expect(image.assetPath()).toBe("/@ef-image/local-image.jpg");
-    });
-
-    test("assetPath preserves asset-id priority over direct URL", () => {
-      const image = document.createElement("ef-image");
-      const preview = document.createElement("ef-preview");
-      preview.appendChild(image);
-      preview.apiHost = "https://api.test.com";
-      image.src = "https://example.com/image.jpg";
-      image.assetId = "test-asset-id";
-      expect(image.assetPath()).toBe(
-        "https://api.test.com/api/v1/image_files/test-asset-id",
-      );
-    });
-
-    test("handles CORS fallback for direct URLs", () => {
-      const image = document.createElement("ef-image");
-      image.src =
-        "https://storage.googleapis.com/editframe-assets-7ac794b/1080-cat.jpeg";
-      expect(image.assetPath()).toBe(
-        "https://storage.googleapis.com/editframe-assets-7ac794b/1080-cat.jpeg",
-      );
-      // Note: CORS fallback behavior is tested in the fetchImage task logic
-    });
-  });
-});

package/src/elements/EFImage.ts

@@ -1,113 +0,0 @@
-import { Task } from "@lit/task";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
-import { FetchMixin } from "./FetchMixin.js";
-
-@customElement("ef-image")
-export class EFImage extends EFTemporal(
-  EFSourceMixin(FetchMixin(LitElement), {
-    assetType: "image_files",
-  }),
-) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      canvas, img {
-        position: static;
-        all: initial;
-        width: 100%;
-        height: 100%;
-      }
-    `,
-  ];
-
-  imageRef = createRef<HTMLImageElement>();
-  canvasRef = createRef<HTMLCanvasElement>();
-
-  #assetId: string | null = null;
-  @property({ type: String, attribute: "asset-id", reflect: true })
-  set assetId(value: string | null) {
-    this.#assetId = value;
-  }
-
-  get assetId() {
-    return this.#assetId ?? this.getAttribute("asset-id");
-  }
-
-  render() {
-    const assetPath = this.assetPath();
-    const isDirectUrl = this.isDirectUrl(assetPath);
-    return isDirectUrl
-      ? html`<img ${ref(this.imageRef)} src=${assetPath} />`
-      : html`<canvas ${ref(this.canvasRef)}></canvas>`;
-  }
-
-  private isDirectUrl(src: string): boolean {
-    return src.startsWith("http://") || src.startsWith("https://");
-  }
-
-  assetPath() {
-    if (this.assetId) {
-      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;
-    }
-    if (this.isDirectUrl(this.src)) {
-      return this.src;
-    }
-    return `/@ef-image/${this.src}`;
-  }
-
-  get hasOwnDuration() {
-    return this.hasExplicitDuration;
-  }
-
-  fetchImage = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.assetPath(), this.fetch] as const,
-    task: async ([assetPath, fetch], { signal }) => {
-      // For direct URLs, skip task - src is set directly in render
-      if (this.isDirectUrl(assetPath)) {
-        return;
-      }
-
-      // For asset-id and local files, use canvas as before
-      const response = await fetch(assetPath, { signal });
-      const image = new Image();
-      image.src = URL.createObjectURL(await response.blob());
-
-      await new Promise((resolve, reject) => {
-        image.onload = resolve;
-        image.onerror = reject;
-      });
-
-      if (!this.canvasRef.value) throw new Error("Canvas not ready");
-      const ctx = this.canvasRef.value.getContext("2d");
-      if (!ctx) throw new Error("Canvas 2d context not ready");
-      this.canvasRef.value.width = image.width;
-      this.canvasRef.value.height = image.height;
-      ctx.drawImage(image, 0, 0);
-    },
-  });
-
-  frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.fetchImage.status] as const,
-    task: async () => {
-      await this.fetchImage.taskComplete;
-    },
-  });
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-image": EFImage;
-  }
-}

package/src/elements/EFMedia/AssetIdMediaEngine.test.ts

@@ -1,224 +0,0 @@
-import type { TrackFragmentIndex } from "@editframe/assets";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { UrlGenerator } from "../../transcoding/utils/UrlGenerator";
-import type { EFMedia } from "../EFMedia";
-import { AssetIdMediaEngine } from "./AssetIdMediaEngine";
-
-describe("AssetIdMediaEngine", () => {
-  const mockApiHost = "https://api.example.com";
-  const mockAssetId = "test-asset-123";
-  const mockUrlGenerator = new UrlGenerator(() => "https://api.example.com");
-
-  const mockTrackFragmentData: Record<number, TrackFragmentIndex> = {
-    1: {
-      track: 1,
-      type: "audio",
-      duration: 15000,
-      timescale: 1000,
-      channel_count: 2,
-      sample_rate: 44100,
-      sample_size: 16,
-      sample_count: 1000,
-      codec: "mp4a.40.2",
-      initSegment: {
-        offset: 0,
-        size: 1024,
-      },
-      segments: [
-        {
-          cts: 0,
-          dts: 0,
-          duration: 1000,
-          offset: 1024,
-          size: 2048,
-        },
-        {
-          cts: 1000,
-          dts: 1000,
-          duration: 1000,
-          offset: 3072,
-          size: 2048,
-        },
-      ],
-    },
-    2: {
-      track: 2,
-      type: "video",
-      duration: 15000,
-      timescale: 1000,
-      width: 1920,
-      height: 1080,
-      sample_count: 1500,
-      codec: "avc1.640029",
-      initSegment: {
-        offset: 0,
-        size: 2048,
-      },
-      segments: [
-        {
-          cts: 0,
-          dts: 0,
-          duration: 1000,
-          offset: 7168,
-          size: 4096,
-        },
-        {
-          cts: 1000,
-          dts: 1000,
-          duration: 1000,
-          offset: 11264,
-          size: 4096,
-        },
-      ],
-    },
-  };
-
-  let engine: AssetIdMediaEngine;
-  let host: EFMedia;
-
-  beforeEach(() => {
-    // Create a mock host instead of instantiating EFMedia directly
-    host = {
-      fetch: vi.fn().mockResolvedValue({
-        json: vi.fn().mockResolvedValue(mockTrackFragmentData),
-      }),
-    } as any;
-    engine = new AssetIdMediaEngine(
-      host,
-      mockAssetId,
-      mockTrackFragmentData,
-      mockApiHost,
-    );
-  });
-
-  describe("constructor", () => {
-    it("should initialize with correct duration", () => {
-      expect(engine.durationMs).toBe(15000);
-    });
-
-    it("should set assetId correctly", () => {
-      expect(engine.assetId).toBe(mockAssetId);
-    });
-
-    it("should expose assetId as src for MediaEngine interface compatibility", () => {
-      expect(engine.src).toBe(mockAssetId);
-    });
-  });
-
-  describe("track access", () => {
-    it("should find audio track", () => {
-      const audioTrack = engine.audioTrackIndex;
-      expect(audioTrack).toBeDefined();
-      expect(audioTrack?.type).toBe("audio");
-      expect(audioTrack?.track).toBe(1);
-    });
-
-    it("should find video track", () => {
-      const videoTrack = engine.videoTrackIndex;
-      expect(videoTrack).toBeDefined();
-      expect(videoTrack?.type).toBe("video");
-      expect(videoTrack?.track).toBe(2);
-    });
-
-    it("should return correct audio rendition", () => {
-      const audioRendition = engine.audioRendition;
-      expect(audioRendition).toBeDefined();
-      expect(audioRendition!.trackId).toBe(1);
-      expect(audioRendition!.src).toBe(mockAssetId);
-    });
-
-    it("should return correct video rendition", () => {
-      const videoRendition = engine.videoRendition;
-      expect(videoRendition).toBeDefined();
-      expect(videoRendition!.trackId).toBe(2);
-      expect(videoRendition!.src).toBe(mockAssetId);
-    });
-  });
-
-  describe("URL generation", () => {
-    it("should generate correct init segment URLs", () => {
-      const url = engine.buildInitSegmentUrl(1);
-      expect(url).toBe(`${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/1`);
-    });
-
-    it("should generate correct media segment URLs", () => {
-      const url = engine.buildMediaSegmentUrl(1, 0);
-      expect(url).toBe(`${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/1`);
-    });
-
-    it("should return correct templates", () => {
-      const templates = engine.templates;
-      expect(templates.initSegment).toBe(
-        `${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/{trackId}`,
-      );
-      expect(templates.mediaSegment).toBe(
-        `${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/{trackId}`,
-      );
-    });
-
-    it("should return correct init segment paths", () => {
-      const paths = engine.initSegmentPaths;
-      expect(paths.audio?.path).toBe(
-        `${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/1`,
-      );
-      expect(paths.video?.path).toBe(
-        `${mockApiHost}/api/v1/isobmff_tracks/${mockAssetId}/2`,
-      );
-    });
-  });
-
-  describe("segment calculations", () => {
-    it("should calculate audio segment ranges correctly", () => {
-      const ranges = engine.calculateAudioSegmentRange(
-        500,
-        1500,
-        { trackId: 1, src: mockAssetId },
-        15000,
-      );
-      expect(ranges).toHaveLength(2);
-      expect(ranges[0]?.segmentId).toBe(0);
-      expect(ranges[1]?.segmentId).toBe(1);
-    });
-
-    it("should compute segment ID correctly", () => {
-      const segmentId = engine.computeSegmentId(500, {
-        trackId: 1,
-        src: mockAssetId,
-      });
-      expect(segmentId).toBe(0);
-
-      const segmentId2 = engine.computeSegmentId(1500, {
-        trackId: 1,
-        src: mockAssetId,
-      });
-      expect(segmentId2).toBe(1);
-    });
-  });
-
-  describe("static fetch method", () => {
-    it("should create engine from API response", async () => {
-      // Mock the host's fetch method
-      const mockFetch = vi.fn().mockResolvedValue({
-        json: vi.fn().mockResolvedValue(mockTrackFragmentData),
-      });
-
-      const mockHost = {
-        fetch: mockFetch,
-      } as any;
-
-      const fetchedEngine = await AssetIdMediaEngine.fetchByAssetId(
-        mockHost,
-        mockUrlGenerator,
-        mockAssetId,
-        mockApiHost,
-      );
-
-      expect(mockFetch).toHaveBeenCalledWith(
-        `${mockApiHost}/api/v1/isobmff_files/${mockAssetId}/index`,
-      );
-      expect(fetchedEngine.assetId).toBe(mockAssetId);
-      expect(fetchedEngine.durationMs).toBe(15000);
-      expect(fetchedEngine.audioTrackIndex?.track).toBe(1);
-    });
-  });
-});

package/src/elements/EFMedia/AssetIdMediaEngine.ts

@@ -1,110 +0,0 @@
-import type { TrackFragmentIndex } from "@editframe/assets";
-import type {
-  InitSegmentPaths,
-  MediaEngine,
-  VideoRendition,
-} from "../../transcoding/types";
-import type { UrlGenerator } from "../../transcoding/utils/UrlGenerator";
-import type { EFMedia } from "../EFMedia";
-import { AssetMediaEngine } from "./AssetMediaEngine";
-
-export class AssetIdMediaEngine
-  extends AssetMediaEngine
-  implements MediaEngine
-{
-  static async fetchByAssetId(
-    host: EFMedia,
-    _urlGenerator: UrlGenerator,
-    assetId: string,
-    apiHost: string,
-  ) {
-    const url = `${apiHost}/api/v1/isobmff_files/${assetId}/index`;
-    const response = await host.fetch(url);
-    const data = (await response.json()) as Record<number, TrackFragmentIndex>;
-    return new AssetIdMediaEngine(host, assetId, data, apiHost);
-  }
-
-  constructor(
-    host: EFMedia,
-    public assetId: string,
-    data: Record<number, TrackFragmentIndex>,
-    private apiHost: string,
-  ) {
-    // Pass assetId as src to parent constructor for compatibility
-    super(host, assetId);
-    // Initialize data after parent constructor
-    this.data = data;
-
-    // Calculate duration from the data
-    const longestFragment = Object.values(this.data).reduce(
-      (max, fragment) => Math.max(max, fragment.duration / fragment.timescale),
-      0,
-    );
-    this.durationMs = longestFragment * 1000;
-  }
-
-  // Override URL-building methods to use API endpoints instead of file paths
-  get initSegmentPaths() {
-    const paths: InitSegmentPaths = {};
-
-    if (this.audioTrackIndex !== undefined) {
-      paths.audio = {
-        path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${this.audioTrackIndex.track}`,
-        pos: this.audioTrackIndex.initSegment.offset,
-        size: this.audioTrackIndex.initSegment.size,
-      };
-    }
-
-    if (this.videoTrackIndex !== undefined) {
-      paths.video = {
-        path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${this.videoTrackIndex.track}`,
-        pos: this.videoTrackIndex.initSegment.offset,
-        size: this.videoTrackIndex.initSegment.size,
-      };
-    }
-
-    return paths;
-  }
-
-  get templates() {
-    return {
-      initSegment: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/{trackId}`,
-      mediaSegment: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/{trackId}`,
-    };
-  }
-
-  buildInitSegmentUrl(trackId: number) {
-    return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
-  }
-
-  buildMediaSegmentUrl(trackId: number, _segmentId: number) {
-    return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
-  }
-
-  convertToSegmentRelativeTimestamps(
-    globalTimestamps: number[],
-    segmentId: number,
-    rendition: VideoRendition,
-  ): number[] {
-    if (!rendition.trackId) {
-      throw new Error(
-        "[convertToSegmentRelativeTimestamps] Track ID is required for asset metadata",
-      );
-    }
-    // For AssetMediaEngine, we need to calculate the actual segment start time
-    // using the precise segment boundaries from the track fragment index
-    const trackData = this.data[rendition.trackId];
-    if (!trackData) {
-      throw new Error("Track not found");
-    }
-    const segment = trackData.segments?.[segmentId];
-    if (!segment) {
-      throw new Error("Segment not found");
-    }
-    const segmentStartMs = (segment.cts / trackData.timescale) * 1000;
-
-    return globalTimestamps.map(
-      (globalMs) => (globalMs - segmentStartMs) / 1000,
-    );
-  }
-}

package/src/elements/EFMedia/AssetMediaEngine.browsertest.ts

@@ -1,140 +0,0 @@
-import { describe } from "vitest";
-import { test as baseTest } from "../../../test/useMSW.js";
-
-import { UrlGenerator } from "../../transcoding/utils/UrlGenerator";
-import "../EFVideo.js";
-import type { EFVideo } from "../EFVideo.js";
-import { AssetMediaEngine } from "./AssetMediaEngine";
-
-const test = baseTest.extend<{
-  urlGenerator: UrlGenerator;
-  mediaEngine: AssetMediaEngine;
-  host: EFVideo;
-}>({
-  host: async ({}, use: any) => {
-    const configuration = document.createElement("ef-configuration");
-    const apiHost = `${window.location.protocol}//${window.location.host}`;
-    configuration.setAttribute("api-host", apiHost);
-    configuration.apiHost = apiHost;
-
-    const host = document.createElement("ef-video");
-    configuration.appendChild(host);
-    host.src = "bars-n-tone.mp4";
-    await use(host as EFVideo);
-  },
-
-  urlGenerator: async ({}, use: any) => {
-    const apiHost = `${window.location.protocol}//${window.location.host}`;
-    const generator = new UrlGenerator(() => apiHost);
-    await use(generator);
-  },
-
-  mediaEngine: async ({ urlGenerator, host }, use: any) => {
-    const engine = await AssetMediaEngine.fetch(host, urlGenerator, host.src);
-    await use(engine);
-  },
-});
-
-describe("AssetMediaEngine", () => {
-  test("provides duration from fragment index data", async ({
-    mediaEngine,
-    expect,
-  }) => {
-    expect(mediaEngine.durationMs).toBeCloseTo(10031, 0); // Updated: improved mediabunny processing changed duration
-  });
-
-  test("provides source URL from constructor", async ({
-    mediaEngine,
-    host,
-    expect,
-  }) => {
-    expect(mediaEngine.src).toBe(host.src);
-  });
-
-  test("returns audio rendition with correct properties", ({
-    mediaEngine,
-    host,
-    expect,
-  }) => {
-    const audioRendition = mediaEngine.audioRendition;
-    expect(audioRendition).toBeDefined();
-    expect(audioRendition!.trackId).toBe(2);
-    expect(audioRendition!.src).toBe(host.src);
-  });
-
-  test("returns video rendition with correct properties", ({
-    mediaEngine,
-    host,
-    expect,
-  }) => {
-    const videoRendition = mediaEngine.videoRendition;
-    expect(videoRendition).toBeDefined();
-    expect(videoRendition!.trackId).toBe(1);
-    expect(videoRendition!.src).toBe(host.src);
-    expect(videoRendition!.startTimeOffsetMs).toBeCloseTo(66.6, 0);
-  });
-
-  test("provides templates for asset endpoints", ({ mediaEngine, expect }) => {
-    expect(mediaEngine.templates).toEqual({
-      initSegment: "/@ef-track/{src}?trackId={trackId}",
-      mediaSegment: "/@ef-track/{src}?trackId={trackId}",
-    });
-  });
-
-  test("builds init and media segment URLs", ({
-    mediaEngine,
-    host,
-    expect,
-  }) => {
-    expect(mediaEngine.buildInitSegmentUrl(2)).toBe(
-      `/@ef-track/${host.src}?trackId=2`,
-    );
-    expect(mediaEngine.buildMediaSegmentUrl(2, 5)).toBe(
-      `/@ef-track/${host.src}?trackId=2&segmentId=5`,
-    );
-  });
-
-  test("computes segment ID for audio (0-based)", ({ mediaEngine, expect }) => {
-    const audio = mediaEngine.audioRendition;
-    expect(mediaEngine.computeSegmentId(500, audio as any)).toBe(0);
-    expect(mediaEngine.computeSegmentId(1500, audio as any)).toBe(0);
-  });
-
-  describe("bars n tone segment id computation", () => {
-    test("computes 0ms is 0", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(0, videoRendition!)).toBe(0);
-    });
-
-    test("computes 2000 is 1", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(2000, videoRendition!)).toBe(1);
-    });
-
-    test("computes 4000 is 2", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(4000, videoRendition!)).toBe(2);
-    });
-
-    test("computes 6000 is 3", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(6000, videoRendition!)).toBe(3);
-    });
-
-    test("computes 8000 is 4", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(8000, videoRendition!)).toBe(4);
-    });
-
-    test("computes 7975 is  3", ({ expect, mediaEngine }) => {
-      const videoRendition = mediaEngine.getVideoRendition();
-      expect(videoRendition).toBeDefined();
-      expect(mediaEngine.computeSegmentId(7975, videoRendition!)).toBe(3);
-    });
-  });
-});