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

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);
   }
 
   /**
@@ -156,11 +160,21 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
     _durationMs: number,
   ): SegmentTimeRange[] {
     if (fromMs >= toMs || !rendition.trackId) {
+      console.warn(
+        `calculateAudioSegmentRange: invalid fromMs ${fromMs} toMs ${toMs} rendition ${JSON.stringify(
+          rendition,
+        )}`,
+      );
       return [];
     }
 
     const track = this.data[rendition.trackId];
     if (!track) {
+      console.warn(
+        `calculateAudioSegmentRange: track not found for rendition ${JSON.stringify(
+          rendition,
+        )}`,
+      );
       return [];
     }
 
@@ -186,6 +200,16 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
         });
       }
     }
+    if (segmentRanges.length === 0) {
+      console.warn(
+        `calculateAudioSegmentRange: no segments found for fromMs ${fromMs} toMs ${toMs} rendition ${JSON.stringify(
+          {
+            rendition,
+            track,
+          },
+        )}`,
+      );
+    }
 
     return segmentRanges;
   }

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

package/src/elements/EFMedia/BaseMediaEngine.ts

@@ -7,16 +7,19 @@ import type {
 import { SizeAwareLRUCache } from "../../utils/LRUCache.js";
 import type { EFMedia } from "../EFMedia.js";
 
-// 100MB cache limit
-const mediaCache = new SizeAwareLRUCache<string>(100 * 1024 * 1024);
+// Global instances shared across all media engines
+export const mediaCache = new SizeAwareLRUCache<string>(100 * 1024 * 1024); // 100MB cache limit
+export const globalRequestDeduplicator = new RequestDeduplicator();
 
 export abstract class BaseMediaEngine {
-  // Request deduplicator for in-flight segment fetches
-  private requestDeduplicator = new RequestDeduplicator();
+  protected host: EFMedia;
+
+  constructor(host: EFMedia) {
+    this.host = host;
+  }
 
   abstract get videoRendition(): VideoRendition | undefined;
   abstract get audioRendition(): AudioRendition | undefined;
-  abstract get host(): EFMedia;
 
   getVideoRendition(): VideoRendition {
     if (!this.videoRendition) {
@@ -42,27 +45,179 @@ export abstract class BaseMediaEngine {
     return `${rendition.src}-${rendition.id}-${segmentId}-${rendition.trackId}`;
   }
 
+  /**
+   * Unified fetch method with caching and global deduplication
+   * All requests (media, manifest, init segments) go through this method
+   */
+  protected async fetchWithCache(
+    url: string,
+    options: {
+      responseType: "arrayBuffer" | "json";
+      headers?: Record<string, string>;
+      signal?: AbortSignal;
+    },
+  ): Promise<any> {
+    const { responseType, headers, signal } = options;
+
+    // Create cache key that includes URL and headers for proper isolation
+    // Note: We don't include signal in cache key as it would prevent proper deduplication
+    const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+
+    // Check cache first
+    const cached = mediaCache.get(cacheKey);
+    if (cached) {
+      // If we have a cached promise, we need to handle the caller's abort signal
+      // without affecting the underlying request that other instances might be using
+      if (signal) {
+        return this.handleAbortForCachedRequest(cached, signal);
+      }
+      return cached;
+    }
+
+    // Use global deduplicator to prevent concurrent requests for the same resource
+    // Note: We do NOT pass the signal to the deduplicator - each caller manages their own abort
+    const promise = globalRequestDeduplicator.executeRequest(
+      cacheKey,
+      async () => {
+        try {
+          // Make the fetch request WITHOUT the signal - let each caller handle their own abort
+          // This prevents one instance's abort from affecting other instances using the shared cache
+          const response = await this.host.fetch(url, { headers });
+
+          if (responseType === "json") {
+            return response.json();
+          }
+          return response.arrayBuffer();
+        } catch (error) {
+          // If the request was aborted, don't cache the error
+          if (error instanceof DOMException && error.name === "AbortError") {
+            // Remove from cache so other requests can retry
+            mediaCache.delete(cacheKey);
+          }
+          throw error;
+        }
+      },
+    );
+
+    // Cache the promise (not the result) to handle concurrent requests
+    mediaCache.set(cacheKey, promise);
+
+    // Handle the case where the promise might be aborted
+    promise.catch((error) => {
+      // If the request was aborted, remove it from cache to prevent corrupted data
+      if (error instanceof DOMException && error.name === "AbortError") {
+        mediaCache.delete(cacheKey);
+      }
+    });
+
+    // If the caller has a signal, handle abort logic without affecting the underlying request
+    if (signal) {
+      return this.handleAbortForCachedRequest(promise, signal);
+    }
+
+    return promise;
+  }
+
+  /**
+   * Handles abort logic for a cached request without affecting the underlying fetch
+   * This allows multiple instances to share the same cached request while each
+   * manages their own abort behavior
+   */
+  private handleAbortForCachedRequest<T>(
+    promise: Promise<T>,
+    signal: AbortSignal,
+  ): Promise<T> {
+    // If signal is already aborted, reject immediately
+    if (signal.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+
+    // Return a promise that respects the caller's abort signal
+    // but doesn't affect the underlying cached request
+    return Promise.race([
+      promise,
+      new Promise<never>((_, reject) => {
+        signal.addEventListener("abort", () => {
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+      }),
+    ]);
+  }
+
+  // Public wrapper methods that delegate to fetchWithCache
+  async fetchMedia(url: string, signal?: AbortSignal): Promise<ArrayBuffer> {
+    // Check abort signal immediately before any processing
+    if (signal?.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    return this.fetchWithCache(url, { responseType: "arrayBuffer", signal });
+  }
+
+  async fetchManifest(url: string, signal?: AbortSignal): Promise<any> {
+    // Check abort signal immediately before any processing
+    if (signal?.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    return this.fetchWithCache(url, { responseType: "json", signal });
+  }
+
+  async fetchMediaWithHeaders(
+    url: string,
+    headers: Record<string, string>,
+    signal?: AbortSignal,
+  ): Promise<ArrayBuffer> {
+    // Check abort signal immediately before any processing
+    if (signal?.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    return this.fetchWithCache(url, {
+      responseType: "arrayBuffer",
+      headers,
+      signal,
+    });
+  }
+
+  // Legacy methods for backward compatibility
+  async fetchMediaCache(
+    url: string,
+    signal?: AbortSignal,
+  ): Promise<ArrayBuffer> {
+    return this.fetchMedia(url, signal);
+  }
+
+  async fetchManifestCache(url: string, signal?: AbortSignal): Promise<any> {
+    return this.fetchManifest(url, signal);
+  }
+
+  async fetchMediaCacheWithHeaders(
+    url: string,
+    headers: Record<string, string>,
+    signal?: AbortSignal,
+  ): Promise<ArrayBuffer> {
+    return this.fetchMediaWithHeaders(url, headers, signal);
+  }
+
   /**
    * Abstract method for actual segment fetching - implemented by subclasses
    */
-  abstract fetchMediaSegmentImpl(
+  abstract fetchMediaSegment(
     segmentId: number,
     rendition: { trackId: number | undefined; src: string },
   ): Promise<ArrayBuffer>;
 
   /**
    * Fetch media segment with built-in deduplication
-   * Eliminates the need for separate coordinators - cleaner architecture
+   * Now uses global deduplication for all requests
    */
-  async fetchMediaSegment(
+  async fetchMediaSegmentWithDeduplication(
     segmentId: number,
     rendition: { trackId: number | undefined; src: string },
     _signal?: AbortSignal,
   ): Promise<ArrayBuffer> {
     const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
 
-    return this.requestDeduplicator.executeRequest(cacheKey, async () => {
-      return this.fetchMediaSegmentImpl(segmentId, rendition);
+    return globalRequestDeduplicator.executeRequest(cacheKey, async () => {
+      return this.fetchMediaSegment(segmentId, rendition);
     });
   }
 
@@ -74,59 +229,21 @@ export abstract class BaseMediaEngine {
     rendition: { src: string; trackId: number | undefined },
   ): boolean {
     const cacheKey = this.getSegmentCacheKey(segmentId, rendition);
-    return this.requestDeduplicator.isPending(cacheKey);
+    return globalRequestDeduplicator.isPending(cacheKey);
   }
 
   /**
    * Get count of active segment requests (for debugging/monitoring)
    */
   getActiveSegmentRequestCount(): number {
-    return this.requestDeduplicator.getPendingCount();
+    return globalRequestDeduplicator.getPendingCount();
   }
 
   /**
    * Cancel all active segment requests (for cleanup)
    */
   cancelAllSegmentRequests(): void {
-    this.requestDeduplicator.clear();
-  }
-
-  async fetchMediaCache(mediaUrl: string) {
-    const cached = mediaCache.get(mediaUrl);
-    if (cached) {
-      return cached;
-    }
-    const promise = this.host
-      .fetch(mediaUrl)
-      .then((response) => response.arrayBuffer());
-    mediaCache.set(mediaUrl, promise);
-    return promise;
-  }
-
-  /**
-   * Enhanced caching method that supports custom headers (e.g., Range requests)
-   * Cache key includes both URL and headers for proper cache isolation
-   */
-  async fetchMediaCacheWithHeaders(
-    mediaUrl: string,
-    headers?: Record<string, string>,
-    signal?: AbortSignal,
-  ) {
-    // Create a cache key that includes both URL and headers
-    const cacheKey = headers
-      ? `${mediaUrl}:${JSON.stringify(headers)}`
-      : mediaUrl;
-
-    const cached = mediaCache.get(cacheKey);
-    if (cached) {
-      return cached;
-    }
-
-    const promise = this.host
-      .fetch(mediaUrl, { headers, signal })
-      .then((response) => response.arrayBuffer());
-    mediaCache.set(cacheKey, promise);
-    return promise;
+    globalRequestDeduplicator.clear();
   }
 
   /**