@editframe/elements 0.18.8-beta.0 → 0.18.20-beta.0

package/dist/gui/ContextMixin.js

@@ -24,14 +24,22 @@ function ContextMixin(superClass) {
 				init.headers ||= {};
 				Object.assign(init.headers, { "Content-Type": "application/json" });
 				if (this.signingURL) {
-					if (!this.#URLTokens[url]) this.#URLTokens[url] = fetch(this.signingURL, {
+					const now = Date.now();
+					const { cacheKey, signingPayload } = this.#getTokenCacheKey(url);
+					const tokenExpiration = this.#URLTokenExpirations[cacheKey] || 0;
+					if (!this.#URLTokens[cacheKey] || now >= tokenExpiration) this.#URLTokens[cacheKey] = fetch(this.signingURL, {
 						method: "POST",
-						body: JSON.stringify({ url })
+						body: JSON.stringify(signingPayload)
 					}).then(async (response) => {
-						if (response.ok) return (await response.json()).token;
+						if (response.ok) {
+							const tokenData = await response.json();
+							const token = tokenData.token;
+							this.#URLTokenExpirations[cacheKey] = this.#parseTokenExpiration(token);
+							return token;
+						}
 						throw new Error(`Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`);
 					});
-					const urlToken = await this.#URLTokens[url];
+					const urlToken = await this.#URLTokens[cacheKey];
 					Object.assign(init.headers, { authorization: `Bearer ${urlToken}` });
 				} else init.credentials = "include";
 				return fetch(url, init);
@@ -51,7 +59,76 @@ function ContextMixin(superClass) {
 		set apiHost(value) {
 			this.#apiHost = value;
 		}
+		get durationMs() {
+			return this.targetTimegroup?.durationMs ?? 0;
+		}
+		get endTimeMs() {
+			return this.targetTimegroup?.endTimeMs ?? 0;
+		}
 		#URLTokens = {};
+		#URLTokenExpirations = {};
+		/**
+		* Generate a cache key for URL token based on signing strategy
+		*
+		* Uses unified prefix + parameter matching approach:
+		* - For transcode URLs: signs base "/api/v1/transcode" + params like {url: "source.mp4"}
+		* - For regular URLs: signs full URL with empty params {}
+		* - All validation uses prefix matching + exhaustive parameter matching
+		* - Multiple transcode segments with same source share one token (reduces round-trips)
+		*/
+		#getTokenCacheKey(url) {
+			try {
+				const urlObj = new URL(url);
+				if (urlObj.pathname.includes("/api/v1/transcode/")) {
+					const urlParam = urlObj.searchParams.get("url");
+					if (urlParam) {
+						const basePath = `${urlObj.origin}/api/v1/transcode`;
+						const cacheKey = `${basePath}?url=${urlParam}`;
+						return {
+							cacheKey,
+							signingPayload: {
+								url: basePath,
+								params: { url: urlParam }
+							}
+						};
+					}
+				}
+				return {
+					cacheKey: url,
+					signingPayload: { url }
+				};
+			} catch {
+				return {
+					cacheKey: url,
+					signingPayload: { url }
+				};
+			}
+		}
+		/**
+		* Parse JWT token to extract safe expiration time (with buffer)
+		* @param token JWT token string
+		* @returns Safe expiration timestamp in milliseconds (actual expiry minus buffer), or 0 if parsing fails
+		*/
+		#parseTokenExpiration(token) {
+			try {
+				const parts = token.split(".");
+				if (parts.length !== 3) return 0;
+				const payload = parts[1];
+				if (!payload) return 0;
+				const decoded = atob(payload.replace(/-/g, "+").replace(/_/g, "/"));
+				const parsed = JSON.parse(decoded);
+				const exp = parsed.exp;
+				const iat = parsed.iat;
+				if (!exp) return 0;
+				const lifetimeSeconds = iat ? exp - iat : 3600;
+				const tenPercentBufferMs = lifetimeSeconds * .1 * 1e3;
+				const fiveMinutesMs = 5 * 60 * 1e3;
+				const bufferMs = Math.min(fiveMinutesMs, tenPercentBufferMs);
+				return exp * 1e3 - bufferMs;
+			} catch {
+				return 0;
+			}
+		}
 		#signingURL;
 		/**
 		* A URL that will be used to generated signed tokens for accessing media files from the
@@ -66,10 +143,20 @@ function ContextMixin(superClass) {
 		#FPS = 30;
 		#MS_PER_FRAME = 1e3 / this.#FPS;
 		#timegroupObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false;
 			for (const mutation of mutations) if (mutation.type === "childList") {
 				const newTimegroup = this.querySelector("ef-timegroup");
-				if (newTimegroup !== this.targetTimegroup) this.targetTimegroup = newTimegroup;
+				if (newTimegroup !== this.targetTimegroup) {
+					this.targetTimegroup = newTimegroup;
+					shouldUpdate = true;
+				}
+			} else if (mutation.type === "attributes") {
+				if (mutation.attributeName === "duration" || mutation.attributeName === "mode" || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			}
+			if (shouldUpdate) queueMicrotask(() => {
+				this.requestUpdate();
+				if (this.targetTimegroup) this.targetTimegroup.requestUpdate();
+			});
 		});
 		connectedCallback() {
 			super.connectedCallback();
@@ -85,6 +172,8 @@ function ContextMixin(superClass) {
 			super.disconnectedCallback();
 			this.#timegroupObserver.disconnect();
 			this.stopPlayback();
+			this.#URLTokens = {};
+			this.#URLTokenExpirations = {};
 		}
 		update(changedProperties) {
 			if (changedProperties.has("playing")) if (this.playing) this.startPlayback();
@@ -194,6 +283,8 @@ function ContextMixin(superClass) {
 	})], ContextElement.prototype, "apiHost", null);
 	_decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", void 0);
 	_decorate([provide({ context: targetTimegroupContext }), state()], ContextElement.prototype, "targetTimegroup", void 0);
+	_decorate([state()], ContextElement.prototype, "durationMs", null);
+	_decorate([state()], ContextElement.prototype, "endTimeMs", null);
 	_decorate([provide({ context: fetchContext })], ContextElement.prototype, "fetch", void 0);
 	_decorate([property({
 		type: String,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.18.8-beta.0",
+  "version": "0.18.20-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.18.8-beta.0",
+    "@editframe/assets": "0.18.20-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFMedia/AssetIdMediaEngine.ts

@@ -27,7 +27,16 @@ export class AssetIdMediaEngine
     private apiHost: string,
   ) {
     // Pass assetId as src to parent constructor for compatibility
-    super(host, assetId, data);
+    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

package/src/elements/EFMedia/AssetMediaEngine.ts

@@ -16,28 +16,32 @@ import {
 } from "./shared/PrecisionUtils";
 
 export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
+  public src: string;
+  protected data: Record<number, TrackFragmentIndex> = {};
+  durationMs = 0;
+
+  constructor(host: EFMedia, src: string) {
+    super(host);
+    this.src = src;
+  }
+
   static async fetch(host: EFMedia, urlGenerator: UrlGenerator, src: string) {
+    const engine = new AssetMediaEngine(host, src);
     const url = urlGenerator.generateTrackFragmentIndexUrl(src);
-    const response = await host.fetch(url);
-    const data = (await response.json()) as Record<number, TrackFragmentIndex>;
-    if (src.startsWith("/")) {
-      src = src.slice(1);
-    }
-    return new AssetMediaEngine(host, src, data);
-  }
-  durationMs: number;
+    const data = await engine.fetchManifest(url);
+    engine.data = data as Record<number, TrackFragmentIndex>;
 
-  constructor(
-    public host: EFMedia,
-    public src: string,
-    protected data: Record<number, TrackFragmentIndex>,
-  ) {
-    super();
-    const longestFragment = Object.values(data).reduce(
+    // Calculate duration from the data
+    const longestFragment = Object.values(engine.data).reduce(
       (max, fragment) => Math.max(max, fragment.duration / fragment.timescale),
       0,
     );
-    this.durationMs = longestFragment * 1000;
+    engine.durationMs = longestFragment * 1000;
+
+    if (src.startsWith("/")) {
+      engine.src = src.slice(1);
+    }
+    return engine;
   }
 
   get audioTrackIndex() {
@@ -113,15 +117,15 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
       throw new Error("Init segment not found");
     }
 
-    // Use shared caching mechanism with Range headers - same optimization as JitMediaEngine
+    // Use unified fetch method with Range headers
     const headers = {
       Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}`,
     };
 
-    return this.fetchMediaCacheWithHeaders(url, headers, signal);
+    return this.fetchMediaWithHeaders(url, headers, signal);
   }
 
-  async fetchMediaSegmentImpl(
+  async fetchMediaSegment(
     segmentId: number,
     rendition: { trackId: number | undefined; src: string },
     signal?: AbortSignal,
@@ -138,12 +142,12 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
       throw new Error("Media segment not found");
     }
 
-    // Use shared caching mechanism with Range headers - same optimization as JitMediaEngine
+    // Use unified fetch method with Range headers
     const headers = {
       Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}`,
     };
 
-    return this.fetchMediaCacheWithHeaders(url, headers, signal);
+    return this.fetchMediaWithHeaders(url, headers, signal);
   }
 
   /**

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

@@ -0,0 +1,311 @@
+import { describe, vi } from "vitest";
+import { test as baseTest } from "../../../test/useMSW.js";
+
+import type { EFMedia } from "../EFMedia.js";
+import { BaseMediaEngine, mediaCache } from "./BaseMediaEngine.js";
+
+const test = baseTest.extend<{}>({});
+
+// Test implementation of BaseMediaEngine for testing
+class TestMediaEngine extends BaseMediaEngine {
+  fetchMediaSegment = vi.fn();
+  public host: EFMedia;
+
+  constructor(host: EFMedia) {
+    super(host);
+    this.host = host;
+  }
+
+  get videoRendition() {
+    return {
+      trackId: 1,
+      src: "test-video.mp4",
+      segmentDurationMs: 2000,
+    };
+  }
+
+  get audioRendition() {
+    return {
+      trackId: 2,
+      src: "test-audio.mp4",
+      segmentDurationMs: 1000,
+    };
+  }
+}
+
+describe("BaseMediaEngine deduplication", () => {
+  test("should fetch segment successfully", async ({ expect }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    engine.fetchMediaSegment.mockResolvedValue(new ArrayBuffer(1024));
+
+    const rendition = { trackId: 1, src: "test.mp4" };
+    const result = await engine.fetchMediaSegment(1, rendition);
+
+    expect(result).toEqual(new ArrayBuffer(1024));
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledTimes(1);
+  });
+
+  test("should deduplicate concurrent requests for same segment", async ({
+    expect,
+  }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const mockSegmentData = new ArrayBuffer(1024);
+    engine.fetchMediaSegment.mockResolvedValue(mockSegmentData);
+
+    const rendition = { trackId: 1, src: "test.mp4" };
+
+    // Make two concurrent requests for the same segment
+    const [result1, result2] = await Promise.all([
+      engine.fetchMediaSegmentWithDeduplication(1, rendition),
+      engine.fetchMediaSegmentWithDeduplication(1, rendition),
+    ]);
+
+    // Both should return the same result
+    expect(result1).toBe(mockSegmentData);
+    expect(result2).toBe(mockSegmentData);
+
+    // But fetchMediaSegment should only be called once due to deduplication
+    expect(engine.fetchMediaSegment).toHaveBeenCalledTimes(1);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition);
+  });
+
+  test("should handle different segments as separate requests", async ({
+    expect,
+  }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const mockSegmentData = new ArrayBuffer(1024);
+    engine.fetchMediaSegment.mockResolvedValue(mockSegmentData);
+
+    const rendition = { trackId: 1, src: "test.mp4" };
+
+    // Make concurrent requests for different segments
+    const [result1, result2] = await Promise.all([
+      engine.fetchMediaSegmentWithDeduplication(1, rendition),
+      engine.fetchMediaSegmentWithDeduplication(2, rendition),
+    ]);
+
+    expect(result1).toBe(mockSegmentData);
+    expect(result2).toBe(mockSegmentData);
+
+    // Should call fetchMediaSegment twice for different segments
+    expect(engine.fetchMediaSegment).toHaveBeenCalledTimes(2);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(2, rendition);
+  });
+
+  test("should handle different renditions as separate requests", async ({
+    expect,
+  }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const mockSegmentData = new ArrayBuffer(1024);
+    engine.fetchMediaSegment.mockResolvedValue(mockSegmentData);
+
+    const rendition1 = { trackId: 1, src: "test1.mp4" };
+    const rendition2 = { trackId: 2, src: "test2.mp4" };
+
+    // Make concurrent requests for same segment but different renditions
+    const [result1, result2] = await Promise.all([
+      engine.fetchMediaSegmentWithDeduplication(1, rendition1),
+      engine.fetchMediaSegmentWithDeduplication(1, rendition2),
+    ]);
+
+    expect(result1).toBe(mockSegmentData);
+    expect(result2).toBe(mockSegmentData);
+
+    // Should call fetchMediaSegment twice for different renditions
+    expect(engine.fetchMediaSegment).toHaveBeenCalledTimes(2);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition1);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition2);
+  });
+
+  test("should propagate errors correctly", async ({ expect }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const error = new Error("Fetch failed");
+    engine.fetchMediaSegment.mockRejectedValue(error);
+
+    const rendition = { trackId: 1, src: "test.mp4" };
+
+    await expect(
+      engine.fetchMediaSegmentWithDeduplication(1, rendition),
+    ).rejects.toThrow("Fetch failed");
+    expect(engine.fetchMediaSegment).toHaveBeenCalledWith(1, rendition);
+  });
+
+  test("should retry failed requests after error", async ({ expect }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const rendition = { trackId: 1, src: "test.mp4" };
+    const error = new Error("First attempt failed");
+    const mockSegmentData = new ArrayBuffer(1024);
+
+    // First request fails
+    engine.fetchMediaSegment.mockRejectedValueOnce(error);
+    await expect(
+      engine.fetchMediaSegmentWithDeduplication(1, rendition),
+    ).rejects.toThrow("First attempt failed");
+
+    // Second request should succeed (not deduplicated since first failed)
+    engine.fetchMediaSegment.mockResolvedValue(mockSegmentData);
+    const result = await engine.fetchMediaSegmentWithDeduplication(
+      1,
+      rendition,
+    );
+
+    expect(result).toBe(mockSegmentData);
+    expect(engine.fetchMediaSegment).toHaveBeenCalledTimes(2);
+  });
+
+  test("should track pending requests correctly", async ({ expect }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const mockSegmentData = new ArrayBuffer(1024);
+    engine.fetchMediaSegment.mockResolvedValue(mockSegmentData);
+
+    const rendition = { trackId: 1, src: "test.mp4" };
+
+    // Start a request but don't await it
+    const promise = engine.fetchMediaSegmentWithDeduplication(1, rendition);
+
+    // Should detect that segment is being fetched
+    expect(engine.isSegmentBeingFetched(1, rendition)).toBe(true);
+    expect(engine.getActiveSegmentRequestCount()).toBe(1);
+
+    // Different segment should not be detected as being fetched
+    expect(engine.isSegmentBeingFetched(2, rendition)).toBe(false);
+
+    await promise.then(() => {
+      // After completion, should no longer be detected as being fetched
+      expect(engine.isSegmentBeingFetched(1, rendition)).toBe(false);
+      expect(engine.getActiveSegmentRequestCount()).toBe(0);
+    });
+  });
+
+  test("should cancel all requests correctly", async ({ expect }) => {
+    const host = document.createElement("ef-video") as EFMedia;
+    const engine = new TestMediaEngine(host);
+    const rendition = { trackId: 1, src: "test.mp4" };
+
+    // Start a request
+    engine.fetchMediaSegmentWithDeduplication(1, rendition);
+    expect(engine.getActiveSegmentRequestCount()).toBe(1);
+
+    // Cancel all requests
+    engine.cancelAllSegmentRequests();
+    expect(engine.getActiveSegmentRequestCount()).toBe(0);
+  });
+});
+
+describe("BaseMediaEngine caching", () => {
+  test("should use shared media cache", async ({ expect }) => {
+    // Test that the cache is shared across instances
+    expect(mediaCache).toBe(mediaCache);
+  });
+
+  test("should have cache size limit", async ({ expect }) => {
+    // Test that the cache has the expected size limit
+    expect(mediaCache.maxSize).toBe(100 * 1024 * 1024);
+  });
+});
+
+describe("BaseMediaEngine abort signal handling", () => {
+  test("should handle abort signals independently in BaseMediaEngine", async ({
+    expect,
+  }) => {
+    // Create a test host that actually has a fetch method
+    const host = {
+      fetch: vi
+        .fn()
+        .mockImplementation(
+          () =>
+            new Promise((resolve) =>
+              setTimeout(
+                () => resolve({ arrayBuffer: () => new ArrayBuffer(1024) }),
+                100,
+              ),
+            ),
+        ),
+    } as any;
+
+    const engine = new TestMediaEngine(host);
+
+    // Create two abort controllers
+    const controller1 = new AbortController();
+    const controller2 = new AbortController();
+
+    // Start two requests with different abort signals to the same URL
+    const promise1 = engine.fetchMedia("test-url", controller1.signal);
+    const promise2 = engine.fetchMedia("test-url", controller2.signal);
+
+    // Abort only the first request
+    controller1.abort();
+
+    // First request should fail with AbortError
+    await expect(promise1).rejects.toThrow("Aborted");
+
+    // Second request should still succeed
+    const result2 = await promise2;
+    expect(result2).toBeInstanceOf(ArrayBuffer);
+    expect(result2.byteLength).toBe(1024);
+
+    // The network request should only be made once due to deduplication
+    // This validates our fix: deduplication works but signals are independent
+    expect(host.fetch).toHaveBeenCalledTimes(1);
+  });
+
+  test("should handle immediate abort in BaseMediaEngine", async ({
+    expect,
+  }) => {
+    const host = {
+      fetch: vi
+        .fn()
+        .mockResolvedValue({ arrayBuffer: () => new ArrayBuffer(1024) }),
+    } as any;
+
+    const engine = new TestMediaEngine(host);
+
+    // Create an already aborted signal
+    const controller = new AbortController();
+    controller.abort();
+
+    // Request should fail immediately with AbortError
+    await expect(
+      engine.fetchMedia("test-url", controller.signal),
+    ).rejects.toThrow("Aborted");
+
+    // No network request should be made since abort happens in wrapper method
+    expect(host.fetch).not.toHaveBeenCalled();
+  });
+
+  test("should maintain deduplication while respecting individual abort signals", async ({
+    expect,
+  }) => {
+    const host = {
+      fetch: vi
+        .fn()
+        .mockResolvedValue({ arrayBuffer: () => new ArrayBuffer(1024) }),
+    } as any;
+
+    const engine = new TestMediaEngine(host);
+
+    // Clear any existing cache to ensure clean test
+    mediaCache.clear();
+
+    // Make two requests without signals
+    const promise1 = engine.fetchMedia("test-url");
+    const promise2 = engine.fetchMedia("test-url");
+
+    // Both should succeed
+    const [result1, result2] = await Promise.all([promise1, promise2]);
+    expect(result1).toBeInstanceOf(ArrayBuffer);
+    expect(result2).toBeInstanceOf(ArrayBuffer);
+
+    // Should deduplicate to one network request
+    expect(host.fetch).toHaveBeenCalledTimes(1);
+  });
+});