@editframe/elements 0.18.8-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>) {

package/test/__cache__/GET__api_v1_transcode_audio_1_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__32da3954ba60c96ad732020c65a08ebc/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "32957",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/1.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.247Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_audio_2_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__b0b2b07efcf607de8ee0f650328c32f7/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "32502",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/2.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.247Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_audio_3_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__a75c2252b542e0c152c780e9a8d7b154/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "32196",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/3.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.271Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_audio_4_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__a64ff1cfb1b52cae14df4b5dfa1e222b/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "32570",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/4.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.247Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_audio_5_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__91e8a522f950809b9f09f4173113b4b0/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "32922",
     "content-type": "video/iso.segment",
-    "date": "Mon, 04 Aug 2025 18:16:50 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "5",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/5.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-04T18:16:50.399Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_audio_init_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__e66d2c831d951e74ad0aeaa6489795d0/metadata.json

@@ -8,14 +8,9 @@
     "cache-control": "public, max-age=3600",
     "content-length": "728",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/audio/init.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.205Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_1_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__26197f6f7c46cacb0a71134131c3f775/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "827216",
+    "content-length": "2057283",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/1.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.256Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_2_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__4cb6774cd3650ccf59c8f8dc6678c0b9/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "905893",
+    "content-length": "2185975",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "1",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/2.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.697Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_3_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__0b3b2b1c8933f7fcf8a9ecaa88d58b41/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "856088",
+    "content-length": "2120135",
     "content-type": "video/iso.segment",
-    "date": "Mon, 04 Aug 2025 18:16:50 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "8",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/3.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-04T18:16:50.395Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_4_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__a6fb05a22b18d850f7f2950bbcdbdeed/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "911925",
+    "content-length": "2221511",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/4.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.247Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_5_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__a50058c7c3602e90879fe3428ed891f4/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "829743",
+    "content-length": "2037521",
     "content-type": "video/iso.segment",
-    "date": "Tue, 05 Aug 2025 06:16:17 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "16",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/5.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-05T06:16:17.550Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_high_init_m4s_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__0798c479b44aaeef850609a430f6e613/metadata.json

@@ -6,16 +6,11 @@
     "access-control-allow-origin": "*",
     "access-control-expose-headers": "Content-Length, Content-Range, X-Cache, X-Actual-Start-Time, X-Actual-Duration, X-Transcode-Time-Ms, X-Total-Server-Time-Ms",
     "cache-control": "public, max-age=3600",
-    "content-length": "782",
+    "content-length": "775",
     "content-type": "video/iso.segment",
-    "date": "Fri, 08 Aug 2025 03:57:07 GMT",
-    "x-cache": "HIT",
-    "x-powered-by": "Express",
-    "x-total-server-time-ms": "0",
-    "x-transcode-time-ms": "0"
+    "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/high/init.m4s?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-08T03:57:07.214Z"
-}
+  "range": null
+}

package/test/__cache__/GET__api_v1_transcode_manifest_json_url_http_3A_2F_2Fweb_3A3000_2Fhead_moov_480p_mp4__3be92a0437de726b431ed5af2369158a/metadata.json

@@ -8,12 +8,10 @@
     "cache-control": "public, max-age=300",
     "content-length": "2045",
     "content-type": "application/json; charset=utf-8",
-    "date": "Thu, 07 Aug 2025 20:55:37 GMT",
     "etag": "W/\"81b-wi6z588RhWTgs57jivyDs3lEkkA\"",
     "x-powered-by": "Express"
   },
   "url": "/api/v1/transcode/manifest.json?url=http%3A%2F%2Fweb%3A3000%2Fhead-moov-480p.mp4",
   "method": "GET",
-  "range": null,
-  "timestamp": "2025-08-07T20:55:37.385Z"
-}
+  "range": null
+}

package/test/recordReplayProxyPlugin.js

@@ -9,6 +9,9 @@ const CACHE_DIR = join(__dirname, "__cache__");
 const TARGET_HOST = "host.docker.internal";
 const TARGET_PORT = 3000;
 
+// Check if we should run in cache-only mode (for CI/prepare-release)
+const CACHE_ONLY_MODE = process.env.EF_CACHE_ONLY === "true";
+
 /**
  * Vite plugin that adds record-and-replay proxy middleware
  * This proxy intercepts requests to /api/v1/transcode/*, caches responses to disk,
@@ -20,7 +23,7 @@ export function recordReplayProxyPlugin() {
 
     configureServer(server) {
       console.log(
-        "[Proxy Plugin] Configuring record-replay proxy middleware...",
+        `[Proxy Plugin] Configuring record-replay proxy middleware... ${CACHE_ONLY_MODE ? "(CACHE-ONLY MODE)" : ""}`,
       );
 
       // Initialize cache directory
@@ -33,6 +36,11 @@ export function recordReplayProxyPlugin() {
 
       console.log("[Proxy Plugin] Proxy middleware configured");
       console.log(`[Proxy Plugin] Cache directory: ${CACHE_DIR}`);
+      if (CACHE_ONLY_MODE) {
+        console.log(
+          "[Proxy Plugin] ⚠️  Running in CACHE-ONLY mode - no remote fetching",
+        );
+      }
     },
   };
 
@@ -107,6 +115,7 @@ export function recordReplayProxyPlugin() {
       const headers = { ...normalized.headers };
       delete headers.date;
       delete headers["x-total-server-time-ms"];
+      delete headers["x-transcode-time-ms"]; // This varies between requests
       delete headers["x-cache"]; // This can vary between HIT/MISS
       normalized.headers = headers;
     }
@@ -117,30 +126,6 @@ export function recordReplayProxyPlugin() {
     return normalized;
   }
 
-  // Check if cache should be updated by comparing normalized metadata
-  async function shouldUpdateCache(cacheDir, newMetadata) {
-    try {
-      const metadataFile = join(cacheDir, "metadata.json");
-      if (!existsSync(metadataFile)) {
-        return true; // No existing cache, should update
-      }
-
-      const existingMetadata = JSON.parse(
-        await readFile(metadataFile, "utf-8"),
-      );
-      const normalizedExisting = normalizeMetadata(existingMetadata);
-      const normalizedNew = normalizeMetadata(newMetadata);
-
-      // Compare normalized metadata to decide if update is needed
-      return (
-        JSON.stringify(normalizedExisting) !== JSON.stringify(normalizedNew)
-      );
-    } catch (error) {
-      console.warn(`[Proxy] Failed to check cache metadata: ${error.message}`);
-      return true; // Default to updating on error
-    }
-  }
-
   // Save response to cache
   async function cacheResponse(
     cacheDir,
@@ -163,14 +148,15 @@ export function recordReplayProxyPlugin() {
         timestamp: new Date().toISOString(),
       };
 
-      // Only update cache if metadata has meaningfully changed
-      if (!(await shouldUpdateCache(cacheDir, metadata))) {
-        console.log("[Proxy] ✓ Cache up to date, skipping write");
-        return;
-      }
+      // Always write the response to cache - binary content can change even if headers don't
+      // Write normalized metadata to disk (without dynamic fields)
+      const normalizedMetadata = normalizeMetadata(metadata);
 
       const metadataFile = join(cacheDir, "metadata.json");
-      await writeFile(metadataFile, JSON.stringify(metadata, null, 2));
+      await writeFile(
+        metadataFile,
+        JSON.stringify(normalizedMetadata, null, 2),
+      );
 
       const dataFile = join(cacheDir, "data.bin");
       await writeFile(dataFile, body); // Write raw binary data
@@ -209,6 +195,35 @@ export function recordReplayProxyPlugin() {
     const cacheKey = getCacheKey(req.method, fullPath, req.headers);
     const cacheDir = join(CACHE_DIR, cacheKey);
 
+    // In cache-only mode, try to serve from cache first
+    if (CACHE_ONLY_MODE) {
+      if (existsSync(cacheDir)) {
+        try {
+          const metadataFile = join(cacheDir, "metadata.json");
+          if (existsSync(metadataFile)) {
+            console.log(
+              `[Proxy] ✓ CACHE-ONLY: Serving from cache: ${cacheKey}`,
+            );
+            await serveCachedResponse(res, cacheDir, req);
+            return;
+          }
+        } catch (cacheError) {
+          console.error(`[Proxy] Failed to read cache: ${cacheError.message}`);
+        }
+      }
+
+      console.log(`[Proxy] ✗ CACHE-ONLY: No cache available for ${cacheKey}`);
+      res.writeHead(404, { "Content-Type": "application/json" });
+      res.end(
+        JSON.stringify({
+          error: "Cache-only mode enabled but no cache found",
+          cacheKey,
+          suggestion: "Run tests locally first to populate cache",
+        }),
+      );
+      return;
+    }
+
     try {
       // Collect request body
       const requestChunks = [];

package/test/setup.ts

@@ -0,0 +1,16 @@
+/**
+ * Global test setup for all browser tests
+ * This runs before every test to ensure clean state
+ */
+
+import { beforeEach } from "vitest";
+import {
+  globalRequestDeduplicator,
+  mediaCache,
+} from "../src/elements/EFMedia/BaseMediaEngine.js";
+
+// Clear global caches before each test to ensure isolation
+beforeEach(() => {
+  globalRequestDeduplicator.clear();
+  mediaCache.clear();
+});