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

package/src/elements/EFAudio.ts

@@ -2,38 +2,82 @@ import { Task } from "@lit/task";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { TWMixin } from "../gui/TWMixin.js";
 import { EFMedia } from "./EFMedia.js";
 
 @customElement("ef-audio")
-export class EFAudio extends EFMedia {
+export class EFAudio extends TWMixin(EFMedia) {
+  static get observedAttributes() {
+    // biome-ignore lint/complexity/noThisInStatic: We need to access super
+    const parentAttributes = super.observedAttributes || [];
+    return [...parentAttributes];
+  }
+
+  attributeChangedCallback(
+    name: string,
+    old: string | null,
+    value: string | null,
+  ) {
+    super.attributeChangedCallback(name, old, value);
+
+    // Explicitly handle asset-id attribute to property conversion
+    // EFVideo works without this fix, but EFAudio requires it due to some fundamental difference
+    if (name === "asset-id") {
+      this.assetId = value;
+    }
+  }
+
   audioElementRef = createRef<HTMLAudioElement>();
 
   render() {
     return html`<audio ${ref(this.audioElementRef)}></audio>`;
   }
 
-  get audioElement() {
-    return this.audioElementRef.value;
-  }
-
   frameTask = new Task(this, {
     args: () =>
       [
-        this.trackFragmentIndexLoader.status,
-        this.initSegmentsLoader.status,
-        this.seekTask.status,
-        this.fetchSeekTask.status,
-        this.videoAssetTask.status,
+        this.audioBufferTask.status,
+        this.audioSeekTask.status,
+        this.audioSegmentFetchTask.status,
+        this.mediaEngineTask.status,
       ] as const,
     task: async () => {
-      await this.trackFragmentIndexLoader.taskComplete;
-      await this.initSegmentsLoader.taskComplete;
-      await this.seekTask.taskComplete;
-      await this.fetchSeekTask.taskComplete;
-      await this.videoAssetTask.taskComplete;
+      await this.mediaEngineTask.taskComplete;
+      await this.audioSegmentFetchTask.taskComplete;
+      await this.audioSeekTask.taskComplete;
+      await this.audioBufferTask.taskComplete;
       this.rootTimegroup?.requestUpdate();
     },
   });
+
+  // Getter properties for backward compatibility with tests
+  /**
+   * Legacy getter for fragment index task (maps to audioSegmentIdTask)
+   */
+  get fragmentIndexTask() {
+    return this.audioSegmentIdTask;
+  }
+
+  /**
+   * Legacy getter for media segments task (maps to audioSegmentFetchTask)
+   */
+  get mediaSegmentsTask() {
+    return this.audioSegmentFetchTask;
+  }
+
+  /**
+   * Legacy getter for seek task (maps to audioSeekTask)
+   */
+  get seekTask() {
+    return this.audioSeekTask;
+  }
+
+  /**
+   * Legacy getter for audio asset task (maps to audioBufferTask)
+   */
+  get videoAssetTask() {
+    return this.audioBufferTask;
+  }
 }
 
 declare global {

package/src/elements/EFCaptions.browsertest.ts

@@ -12,7 +12,6 @@ describe("EFCaptions", () => {
     });
     afterEach(() => {
       // @ts-ignore
-      // biome-ignore lint/performance/noDelete: <explanation>
       delete window.FRAMEGEN_BRIDGE;
     });
     test("captionsPath uses http:// protocol", () => {

package/src/elements/EFImage.browsertest.ts

@@ -11,7 +11,6 @@ describe("EFImage", () => {
     });
     afterEach(() => {
       // @ts-ignore
-      // biome-ignore lint/performance/noDelete: <explanation>
       delete window.FRAMEGEN_BRIDGE;
     });
     test("assetPath uses http:// protocol", () => {
@@ -77,4 +76,46 @@ describe("EFImage", () => {
       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

@@ -21,7 +21,7 @@ export class EFImage extends EFTemporal(
         align-items: center;
         justify-content: center;
       }
-      canvas {
+      canvas, img {
         all: inherit;
       }
     `,
@@ -41,13 +41,24 @@ export class EFImage extends EFTemporal(
   }
 
   render() {
-    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
+    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}`;
   }
 
@@ -59,12 +70,21 @@ export class EFImage extends EFTemporal(
     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) => {
+
+      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");

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

@@ -0,0 +1,222 @@
+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.trackId).toBe(1);
+      expect(audioRendition.src).toBe(mockAssetId);
+    });
+
+    it("should return correct video rendition", () => {
+      const videoRendition = engine.videoRendition;
+      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

@@ -0,0 +1,70 @@
+import type { TrackFragmentIndex } from "@editframe/assets";
+import type { InitSegmentPaths, MediaEngine } 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, data);
+  }
+
+  // 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}`;
+  }
+}