@editframe/elements 0.18.19-beta.0 → 0.18.21-beta.0

package/dist/getRenderInfo.d.ts

@@ -18,9 +18,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     }>;
 }, "strip", z.ZodTypeAny, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;
@@ -28,9 +28,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     };
 }, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -2,9 +2,14 @@ import { LitElement } from 'lit';
 declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
+declare const TestContextElement_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
+declare class TestContextElement extends TestContextElement_base {
+    render(): import('lit-html').TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "test-context": TestContext;
+        "test-context-reactivity": TestContextElement;
     }
 }
 export {};

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.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) 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.19-beta.0",
+  "version": "0.18.21-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.18.19-beta.0",
+    "@editframe/assets": "0.18.21-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/gui/ContextMixin.browsertest.ts

@@ -1,6 +1,6 @@
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import { ContextMixin } from "./ContextMixin.js";
 
@@ -10,9 +10,17 @@ import "../elements/EFTimegroup.js";
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}
 
+@customElement("test-context-reactivity")
+class TestContextElement extends ContextMixin(LitElement) {
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     "test-context": TestContext;
+    "test-context-reactivity": TestContextElement;
   }
 }
 
@@ -21,6 +29,482 @@ describe("ContextMixin", () => {
     expect(ContextMixin).toBeDefined();
   });
 
+  describe("Token age checking", () => {
+    let element: TestContext & { fetch: typeof fetch };
+    let mockFetch: any;
+    let originalFetch: any;
+
+    // Helper to create a JWT token with specific expiration time
+    const createJWTToken = (
+      expirationMs: number,
+      issuedAtMs?: number,
+    ): string => {
+      const iat = issuedAtMs
+        ? Math.floor(issuedAtMs / 1000)
+        : Math.floor(Date.now() / 1000);
+      const header = btoa(JSON.stringify({ typ: "JWT", alg: "HS256" }));
+      const payload = btoa(
+        JSON.stringify({
+          type: "url",
+          url: "test-url",
+          exp: Math.floor(expirationMs / 1000), // JWT exp is in seconds
+          iat: iat,
+        }),
+      );
+      const signature = "mock-signature";
+      return `${header}.${payload}.${signature}`;
+    };
+
+    beforeEach(() => {
+      originalFetch = window.fetch;
+      mockFetch = vi.fn();
+      window.fetch = mockFetch;
+
+      element = document.createElement("test-context") as TestContext & {
+        fetch: typeof fetch;
+      };
+      element.signingURL = "https://test.com/api/v1/url-token";
+      document.body.appendChild(element);
+
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      if (element.parentNode) {
+        document.body.removeChild(element);
+      }
+      window.fetch = originalFetch;
+      vi.useRealTimers();
+    });
+
+    test("should fetch new token when none exists", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000; // 1 hour from now
+      const token = createJWTToken(futureTime);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({ url: "https://example.com/media.mp4" }),
+        },
+      );
+
+      expect(mockFetch).toHaveBeenCalledWith("https://example.com/media.mp4", {
+        headers: {
+          "Content-Type": "application/json",
+          authorization: `Bearer ${token}`,
+        },
+      });
+    }, 1000);
+
+    test("should reuse cached token when fresh", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000; // 1 hour from now
+      const token = createJWTToken(futureTime);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success1"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      // Advance time by 30 minutes (token still valid for 30 more minutes)
+      vi.advanceTimersByTime(30 * 60 * 1000);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success2"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      // Should only call signing URL once
+      expect(mockFetch).toHaveBeenCalledTimes(3); // 1 signing + 2 media requests
+    }, 1000);
+
+    test("should fetch new token when cached token is expired", async () => {
+      const now = Date.now();
+      const issuedAt = now;
+      const expiresAt = now + 30 * 60 * 1000; // 30 minutes from now
+
+      // For a 30-minute token: 10% = 3 minutes buffer (smaller than 5 minutes)
+      // Token will be considered expired at 27 minutes
+      const token1 = createJWTToken(expiresAt, issuedAt);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token1 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success1"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      // Advance time by 28 minutes (past the 27-minute buffer threshold)
+      vi.advanceTimersByTime(28 * 60 * 1000);
+
+      const newExpiry = Date.now() + 60 * 60 * 1000; // 1 hour from current time
+      const token2 = createJWTToken(newExpiry);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token2 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success2"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      // Should call signing URL twice
+      expect(mockFetch).toHaveBeenCalledTimes(4); // 2 signing + 2 media requests
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({ url: "https://example.com/media.mp4" }),
+        },
+      );
+
+      expect(mockFetch).toHaveBeenCalledWith("https://example.com/media.mp4", {
+        headers: {
+          "Content-Type": "application/json",
+          authorization: `Bearer ${token2}`,
+        },
+      });
+    }, 1000);
+
+    test("should handle different URLs with separate token expiry", async () => {
+      const url1 = "https://example.com/media1.mp4";
+      const url2 = "https://example.com/media2.mp4";
+
+      const startTime = Date.now();
+
+      // URL1 gets a 30-minute token (10% buffer = 3 min, so expires at 27 min)
+      const url1IssuedAt = startTime;
+      const url1ExpiresAt = startTime + 30 * 60 * 1000; // 30 minutes
+      const token1 = createJWTToken(url1ExpiresAt, url1IssuedAt);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token1 }),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success1"),
+      });
+
+      await element.fetch(url1);
+
+      // Advance time by 15 minutes
+      vi.advanceTimersByTime(15 * 60 * 1000);
+
+      // URL2 gets a 60-minute token (5 min buffer is smaller than 10% = 6 min, so expires at 55 min)
+      const url2IssuedAt = Date.now();
+      const url2ExpiresAt = url2IssuedAt + 60 * 60 * 1000; // 60 minutes from current time
+      const token2 = createJWTToken(url2ExpiresAt, url2IssuedAt);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token2 }),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success2"),
+      });
+
+      await element.fetch(url2);
+
+      // Advance time by another 15 minutes (total 30 min from start)
+      // URL1 token: 30 min from start, past its 27-min threshold → expired
+      // URL2 token: 15 min from its creation, well within its 55-min threshold → still valid
+      vi.advanceTimersByTime(15 * 60 * 1000);
+
+      // Request URL1 again (should get new token - expired)
+      const url1NewExpiry = Date.now() + 60 * 60 * 1000;
+      const token3 = createJWTToken(url1NewExpiry);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token3 }),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success3"),
+      });
+
+      await element.fetch(url1);
+
+      // Request URL2 again (should reuse token - still valid)
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success4"),
+      });
+
+      await element.fetch(url2);
+
+      expect(mockFetch).toHaveBeenCalledTimes(7); // 3 signing + 4 media requests (URL2 reused token)
+    }, 1000);
+
+    test("should clear token cache on component disconnect", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000; // 1 hour from now
+      const token1 = createJWTToken(futureTime);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token1 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      if (element.parentNode) {
+        document.body.removeChild(element);
+      }
+
+      // Create new element and add back to DOM
+      element = document.createElement("test-context") as TestContext & {
+        fetch: typeof fetch;
+      };
+      element.signingURL = "https://test.com/api/v1/url-token";
+      document.body.appendChild(element);
+
+      const token2 = createJWTToken(futureTime);
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token2 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success2"),
+      });
+
+      await element.fetch("https://example.com/media.mp4");
+
+      expect(mockFetch).toHaveBeenCalledTimes(4); // 2 signing + 2 media requests
+    }, 1000);
+
+    test("should use single token for multiple transcode segments with same source URL", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000;
+      const token = createJWTToken(futureTime);
+
+      const sourceUrl = "https://example.com/source-video.mp4";
+      const segment1 = `https://editframe.dev/api/v1/transcode/video-1080p/1.mp4?url=${encodeURIComponent(sourceUrl)}`;
+      const segment2 = `https://editframe.dev/api/v1/transcode/video-1080p/2.mp4?url=${encodeURIComponent(sourceUrl)}`;
+      const segment3 = `https://editframe.dev/api/v1/transcode/audio-44100/1.m4a?url=${encodeURIComponent(sourceUrl)}`;
+
+      // Should only sign once for the base URL + params combination
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token }),
+      });
+
+      // Mock all segment requests
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+
+      // Fetch multiple segments
+      await element.fetch(segment1);
+      await element.fetch(segment2);
+      await element.fetch(segment3);
+
+      // Should only call signing URL once + 3 segment requests
+      expect(mockFetch).toHaveBeenCalledTimes(4);
+
+      // Verify the signing request used base URL + params format
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            url: "https://editframe.dev/api/v1/transcode",
+            params: { url: sourceUrl },
+          }),
+        },
+      );
+
+      // All segment requests should use the same token
+      expect(mockFetch).toHaveBeenCalledWith(segment1, {
+        headers: {
+          "Content-Type": "application/json",
+          authorization: `Bearer ${token}`,
+        },
+      });
+      expect(mockFetch).toHaveBeenCalledWith(segment2, {
+        headers: {
+          "Content-Type": "application/json",
+          authorization: `Bearer ${token}`,
+        },
+      });
+      expect(mockFetch).toHaveBeenCalledWith(segment3, {
+        headers: {
+          "Content-Type": "application/json",
+          authorization: `Bearer ${token}`,
+        },
+      });
+    }, 1000);
+
+    test("should use different tokens for transcode segments with different source URLs", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000;
+      const token1 = createJWTToken(futureTime);
+      const token2 = createJWTToken(futureTime);
+
+      const sourceUrl1 = "https://example.com/video1.mp4";
+      const sourceUrl2 = "https://example.com/video2.mp4";
+
+      const segment1A = `https://editframe.dev/api/v1/transcode/video-1080p/1.mp4?url=${encodeURIComponent(sourceUrl1)}`;
+      const segment1B = `https://editframe.dev/api/v1/transcode/video-1080p/2.mp4?url=${encodeURIComponent(sourceUrl1)}`;
+      const segment2A = `https://editframe.dev/api/v1/transcode/video-720p/1.mp4?url=${encodeURIComponent(sourceUrl2)}`;
+
+      // First source URL token request
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token1 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+
+      // Fetch segments for first source
+      await element.fetch(segment1A);
+      await element.fetch(segment1B);
+
+      // Second source URL token request
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token2 }),
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+      });
+
+      // Fetch segment for second source
+      await element.fetch(segment2A);
+
+      // Should call signing URL twice + 3 segment requests
+      expect(mockFetch).toHaveBeenCalledTimes(5);
+
+      // Verify separate signing requests
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            url: "https://editframe.dev/api/v1/transcode",
+            params: { url: sourceUrl1 },
+          }),
+        },
+      );
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            url: "https://editframe.dev/api/v1/transcode",
+            params: { url: sourceUrl2 },
+          }),
+        },
+      );
+    }, 1000);
+
+    test("should still sign individual URLs for non-transcode endpoints", async () => {
+      const futureTime = Date.now() + 60 * 60 * 1000;
+      const token1 = createJWTToken(futureTime);
+      const token2 = createJWTToken(futureTime);
+
+      const regularUrl1 = "https://example.com/api/v1/media/123";
+      const regularUrl2 = "https://example.com/api/v1/assets/456";
+
+      // First URL signing
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token1 }),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success1"),
+      });
+
+      // Second URL signing
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ token: token2 }),
+      });
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        text: () => Promise.resolve("success2"),
+      });
+
+      await element.fetch(regularUrl1);
+      await element.fetch(regularUrl2);
+
+      expect(mockFetch).toHaveBeenCalledTimes(4); // 2 signing + 2 requests
+
+      // Should sign each URL individually (existing behavior)
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({ url: regularUrl1 }),
+        },
+      );
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://test.com/api/v1/url-token",
+        {
+          method: "POST",
+          body: JSON.stringify({ url: regularUrl2 }),
+        },
+      );
+    }, 1000);
+  });
+
   describe("Playback", () => {
     test("should start playback", () => {
       const element = document.createElement("test-context");
@@ -73,4 +557,87 @@ describe("ContextMixin", () => {
     const event = await timeupdatePromise;
     expect(event.detail.currentTimeMs).toBe(1000);
   });
+
+  describe("Reactivity", () => {
+    test("should update durationMs when child tree changes", async () => {
+      const element = document.createElement("test-context-reactivity");
+      document.body.appendChild(element);
+
+      // Wait for initial render
+      await element.updateComplete;
+
+      // Create a timegroup with initial duration
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "contain";
+
+      const child = document.createElement("ef-timegroup");
+      child.mode = "fixed";
+      child.duration = "5s";
+      timegroup.appendChild(child);
+
+      element.appendChild(timegroup);
+
+      // Wait for updates
+      await element.updateComplete;
+      await timegroup.updateComplete;
+
+      // Initially, the timegroup should have 5s duration
+      expect(element.targetTimegroup?.durationMs).toBe(5000);
+
+      // Now change the child duration
+      child.duration = "10s";
+
+      // Wait for updates
+      await element.updateComplete;
+      await timegroup.updateComplete;
+
+      // The targetTimegroup should now have 10s duration
+      expect(element.targetTimegroup?.durationMs).toBe(10000);
+
+      document.body.removeChild(element);
+    });
+
+    test("should update when media elements are added/removed", async () => {
+      const element = document.createElement("test-context-reactivity");
+      document.body.appendChild(element);
+
+      await element.updateComplete;
+
+      // Create initial timegroup with 5s duration
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "contain";
+
+      const child = document.createElement("ef-timegroup");
+      child.mode = "fixed";
+      child.duration = "5s";
+      timegroup.appendChild(child);
+
+      element.appendChild(timegroup);
+
+      await element.updateComplete;
+      await timegroup.updateComplete;
+
+      // Initially duration should be 5s
+      expect(element.targetTimegroup?.durationMs).toBe(5000);
+
+      // Add a new child with longer duration
+      const newChild = document.createElement("ef-timegroup");
+      newChild.mode = "fixed";
+      newChild.duration = "15s";
+      timegroup.appendChild(newChild);
+
+      // Wait for updates
+      await element.updateComplete;
+      await timegroup.updateComplete;
+      await newChild.updateComplete;
+
+      // Wait for next animation frame to ensure temporal cache is cleared
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      // Duration should now be 15s (the max of all children)
+      expect(element.targetTimegroup?.durationMs).toBe(15000);
+
+      document.body.removeChild(element);
+    });
+  });
 });

package/src/gui/ContextMixin.ts

@@ -71,6 +71,17 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     targetTimegroup: EFTimegroup | null = null;
 
+    // Add reactive properties that depend on the targetTimegroup
+    @state()
+    get durationMs(): number {
+      return this.targetTimegroup?.durationMs ?? 0;
+    }
+
+    @state()
+    get endTimeMs(): number {
+      return this.targetTimegroup?.endTimeMs ?? 0;
+    }
+
     @provide({ context: fetchContext })
     fetch = async (url: string, init: RequestInit = {}) => {
       init.headers ||= {};
@@ -79,13 +90,23 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       });
 
       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;
+
+        // Check if we need to fetch a new token (no token exists or token is expired)
+        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;
+              const tokenData = await response.json();
+              const token = tokenData.token;
+              // Parse and store the token's actual expiration time
+              this.#URLTokenExpirations[cacheKey] =
+                this.#parseTokenExpiration(token);
+              return token;
             }
             throw new Error(
               `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
@@ -93,7 +114,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           });
         }
 
-        const urlToken = await this.#URLTokens[url];
+        const urlToken = await this.#URLTokens[cacheKey];
 
         Object.assign(init.headers, {
           authorization: `Bearer ${urlToken}`,
@@ -106,6 +127,89 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     };
 
     #URLTokens: Record<string, Promise<string>> = {};
+    #URLTokenExpirations: Record<string, number> = {};
+
+    /**
+     * 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: string): {
+      cacheKey: string;
+      signingPayload: { url: string; params?: Record<string, string> };
+    } {
+      try {
+        const urlObj = new URL(url);
+
+        // Check if this is a transcode URL pattern
+        if (urlObj.pathname.includes("/api/v1/transcode/")) {
+          const urlParam = urlObj.searchParams.get("url");
+          if (urlParam) {
+            // For transcode URLs, sign the base path + url parameter
+            const basePath = `${urlObj.origin}/api/v1/transcode`;
+            const cacheKey = `${basePath}?url=${urlParam}`;
+            return {
+              cacheKey,
+              signingPayload: { url: basePath, params: { url: urlParam } },
+            };
+          }
+        }
+
+        // For non-transcode URLs, use full URL (existing behavior)
+        return {
+          cacheKey: url,
+          signingPayload: { url },
+        };
+      } catch {
+        // If URL parsing fails, fall back to full URL
+        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: string): number {
+      try {
+        // JWT has 3 parts separated by dots: header.payload.signature
+        const parts = token.split(".");
+        if (parts.length !== 3) return 0;
+
+        // Decode the payload (second part)
+        const payload = parts[1];
+        if (!payload) return 0;
+
+        const decoded = atob(payload.replace(/-/g, "+").replace(/_/g, "/"));
+        const parsed = JSON.parse(decoded);
+
+        // Extract timestamps (in seconds)
+        const exp = parsed.exp;
+        const iat = parsed.iat;
+        if (!exp) return 0;
+
+        // Calculate token lifetime and buffer
+        const lifetimeSeconds = iat ? exp - iat : 3600; // Default to 1 hour if no iat
+        const tenPercentBufferMs = lifetimeSeconds * 0.1 * 1000; // 10% of lifetime in ms
+        const fiveMinutesMs = 5 * 60 * 1000; // 5 minutes in ms
+
+        // Use whichever buffer is smaller (more conservative)
+        const bufferMs = Math.min(fiveMinutesMs, tenPercentBufferMs);
+
+        // Return expiration time minus buffer
+        return exp * 1000 - bufferMs;
+      } catch {
+        return 0;
+      }
+    }
 
     #signingURL?: string;
     /**
@@ -138,14 +242,47 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     #MS_PER_FRAME = 1000 / 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;
+            shouldUpdate = true;
+          } else if (
+            mutation.target instanceof Element &&
+            (mutation.target.tagName === "EF-TIMEGROUP" ||
+              mutation.target.closest("ef-timegroup"))
+          ) {
+            // Handle childList changes within existing timegroups
+            shouldUpdate = true;
+          }
+        } else if (mutation.type === "attributes") {
+          // Watch for attribute changes that might affect duration
+          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) {
+        // Trigger an update to ensure reactive properties recalculate
+        // Use a microtask to ensure DOM updates are complete
+        queueMicrotask(() => {
+          this.requestUpdate();
+          // Also ensure the targetTimegroup updates its computed properties
+          if (this.targetTimegroup) {
+            this.targetTimegroup.requestUpdate();
+          }
+        });
+      }
     });
 
     connectedCallback(): void {
@@ -169,6 +306,9 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       super.disconnectedCallback();
       this.#timegroupObserver.disconnect();
       this.stopPlayback();
+      // Clear token cache on disconnect to prevent stale tokens
+      this.#URLTokens = {};
+      this.#URLTokenExpirations = {};
     }
 
     update(changedProperties: Map<string | number | symbol, unknown>) {