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

package/src/elements/EFVideo.ts

@@ -29,15 +29,15 @@ interface LoadingState {
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {
-  static get observedAttributes() {
-    const parentAttributes = EFMedia.observedAttributes || [];
-    return [
-      ...parentAttributes,
-      "video-buffer-duration",
-      "max-video-buffer-fetches",
-      "enable-video-buffering",
-    ];
-  }
+  // static get observedAttributes() {
+  //   const parentAttributes = EFMedia.observedAttributes || [];
+  //   return [
+  //     ...parentAttributes,
+  //     "video-buffer-duration",
+  //     "max-video-buffer-fetches",
+  //     "enable-video-buffering",
+  //   ];
+  // }
 
   static styles = [
     /**

package/src/elements/TargetController.ts

@@ -41,7 +41,11 @@ class TargetRegistry {
     }
   }
 
-  unregister(id: string) {
+  unregister(id: string, target: LitElement) {
+    if (this.idMap.get(id) !== target) {
+      // Avoid unregistering a target that is not the current target
+      return;
+    }
     for (const callback of this.callbacks.get(id) ?? []) {
       callback(undefined);
     }
@@ -87,7 +91,7 @@ export const EFTargetable = <T extends Constructor<LitElement>>(
       if (oldValue === newValue) return;
 
       if (oldValue) {
-        this.#registry.unregister(oldValue);
+        this.#registry.unregister(oldValue, this);
       }
       if (newValue) {
         this.#registry.register(newValue, this);

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();
+});

package/test/useAssetMSW.ts

@@ -46,4 +46,58 @@ export const assetMSWHandlers = [
       },
     });
   }),
+
+  // Asset ID API handlers - these are needed when tests set assetId properties
+  http.get("/api/v1/isobmff_files/:assetId/index", async () => {
+    const mockIndex = {
+      0: {
+        duration: 10000,
+        timescale: 1000,
+        fragments: [
+          {
+            offset: 0,
+            size: 1024,
+            timestamp: 0,
+            duration: 10000,
+          },
+        ],
+      },
+    };
+
+    return HttpResponse.json(mockIndex, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }),
+
+  http.get("/api/v1/isobmff_tracks/:assetId/:trackId", async ({ request }) => {
+    // Check if this is a range request
+    const rangeHeader = request.headers.get("range");
+
+    if (rangeHeader) {
+      // Return a mock MP4 segment with proper range headers
+      const mockData = new ArrayBuffer(1024); // 1KB mock data
+      return new HttpResponse(mockData, {
+        status: 206,
+        headers: {
+          "Content-Type": "video/mp4",
+          "Accept-Ranges": "bytes",
+          "Content-Range": rangeHeader,
+          "Content-Length": "1024",
+        },
+      });
+    }
+
+    // Return the full mock track
+    const mockData = new ArrayBuffer(1024);
+    return new HttpResponse(mockData, {
+      status: 200,
+      headers: {
+        "Content-Type": "video/mp4",
+        "Accept-Ranges": "bytes",
+        "Content-Length": "1024",
+      },
+    });
+  }),
 ];

package/test/useMSW.ts

@@ -20,25 +20,18 @@ export const test = testBase.extend<{
   worker: typeof worker;
 }>({
   worker: [
-    async ({}, use) => {
+    async ({ expect: _expect }, use) => {
       // Only start the worker once
       if (!workerStarted) {
         await worker.start({
-          onUnhandledRequest: "bypass", // Allow unhandled requests to pass through to server
-          quiet: true, // Enable logging to see what's being intercepted
+          onUnhandledRequest: "bypass", // Allow unhandled requests to pass through
         });
         workerStarted = true;
       }
 
-      // Expose the worker object on the test's context
+      // Use the worker in the test
       await use(worker);
-
-      // Remove any request handlers added in individual test cases
-      // This prevents them from affecting unrelated tests
-      worker.resetHandlers();
-    },
-    {
-      auto: true, // Critical: Auto-start MSW for all tests
     },
+    { scope: "test" },
   ],
 });