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

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,40 @@ 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.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 +299,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>) {