From 6131eea9ecd11f314709241a7ed0e7adfde4345c Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Fri, 26 Jun 2026 20:50:44 +0200
Subject: [PATCH] polish(web): warm next track via fetch to shrink media-tile
 gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removing the second <audio> element fixed most of the OS media-tile flicker,
but skips now load the next track fresh → a brief gap where Windows shows the
generic site entry. Prefetch the next track's first ~4MB with fetch() (not a
media element, so no Chromium session flip) to warm the HTTP cache + TLS
connection; the src-swap then starts faster and the gap shrinks. Abortable on
queue change.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/player/player.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/player/player.js b/src/player/player.js
index 3dcee40..351ca56 100644
--- a/src/player/player.js
+++ b/src/player/player.js
@@ -276,10 +276,13 @@ function _setAudioSession() {
   try { if(navigator.audioSession) navigator.audioSession.type = 'playback'; } catch {}
 }
 
-// ─── PRELOAD — shadow Audio element actually buffers the next track ──────────
+// ─── PRELOAD — warm the next track via fetch (NO second <audio> element) ─────
+// A second media element makes Chromium flip the OS media session on skip (tile flicker).
+// So we prefetch the next track's first chunk with fetch() to warm the HTTP cache + TLS
+// connection — the main element's src-swap then starts faster → smaller gap → less tile flash.
 let _preUrl   = '';
 let _preId    = '';
-let _preAudio = null;
+let _preAbort = null;
 
 function _nextIdx() {
   if(S.repeat === 'one') return S.qIdx;
@@ -293,11 +296,17 @@ function _preloadNext() {
   const ni = _nextIdx();
   if(ni < 0) return;
   const next = S.queue[ni];
-  if(!next) return;
-  // (b) EXPERIMENT — no separate preload <audio> element. Navidrome's player keeps a single
-  // element only; a second buffering media element appears to make Chromium flip the OS media
-  // session on skip (Windows tile flicker). We rely on the main element's preload="auto" + the
-  // browser HTTP cache instead, and just warm the next cover art. Easy to revert if it doesn't help.
+  if(!next || _preId === next.id) return;
+  _preId  = next.id;
+  _preUrl = streamUrl(next.id);
+  // Warm the cache/connection with the first few MB (enough to start playback instantly).
+  try {
+    _preAbort?.abort();
+    _preAbort = new AbortController();
+    fetch(_preUrl, { signal: _preAbort.signal, headers: { Range: 'bytes=0-4194303' } })
+      .then(r => r.arrayBuffer())   // drain so the bytes land in the HTTP cache
+      .catch(() => {});
+  } catch {}
   if(next.coverArt) {
     [256, 512, 1024].forEach(size => {
       const img = new Image();
@@ -308,7 +317,8 @@ function _preloadNext() {
 
 function _clearPreload() {
   _preId = ''; _preUrl = '';
-  if(_preAudio) { _preAudio.src = ''; _preAudio = null; }
+  try { _preAbort?.abort(); } catch {}
+  _preAbort = null;
 }
 
 // ─── PLAY HISTORY (for prev-in-shuffle) ──────────────────────────────────────