From e03c0cdbbae79c5ebdaa2309992e3c2b1f7b2ec6 Mon Sep 17 00:00:00 2001
From: midzelis <min123@gmail.com>
Date: Wed, 8 Apr 2026 06:41:01 +0000
Subject: [PATCH] fix(web): cancel video preview fetch when bind:this is
 cleared early
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In Svelte 5.53.9, `bind:this` is now cleared earlier in the unmount
sequence ("better bind:this cleanup timing"). The video thumbnail's
$effect was relying on the old order to read the bound `player` element
and clear its `src` to abort the in-flight `/api/assets/{id}/video/playback`
range request — but the bind is now `undefined` by the time the effect
runs, so the cleanup is silently skipped. The detached <video> keeps
its src, and Firefox does not abort an in-flight media fetch when the
element is detached/GC'd. Long-lived 206 range requests then saturate
Firefox's 6-connection HTTP/1.1 per-host limit and freeze the timeline
(see #27585).

Capture the player reference inside the effect and tear down via the
effect cleanup return — Svelte runs the prior cleanup (with the captured
ref) before `bind:this` is cleared. Use the canonical
`pause() / removeAttribute('src') / load()` sequence which actually aborts
the fetch in Firefox, even on a detached element.

Fixes #27585

Change-Id: I4d9fba859955f5c54f603c345e61d4206a6a6964
---
 .../assets/thumbnail/video-thumbnail.svelte      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index 76956fbb26..db5ecdefa7 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -36,14 +36,18 @@
 
   $effect(() => {
     if (!enablePlayback) {
-      // Reset remaining time when playback is disabled.
       remainingSeconds = durationInSeconds;
-
-      if (player) {
-        // Cancel video buffering.
-        player.src = '';
-      }
+      return;
     }
+    if (!player) {
+      return;
+    }
+    const video = player;
+    return () => {
+      video.pause();
+      video.removeAttribute('src');
+      video.load();
+    };
   });
   const onMouseEnter = () => {
     if (playbackOnIconHover) {