client/src/components/MiniPlayer.svelte

@@ -1,8 +1,10 @@
 <script>
   import { musicPlayer, togglePlay, playNext, playPrevious, stopPlayback } from "../stores/musicPlayerStore.js";
-  import { API } from "../utils/api.js";
+  import { API, withToken } from "../utils/api.js";
   import { cleanFileName } from "../utils/filename.js";
 
+  let videoEl = null;
+
   function thumbnailURL(item) {
     if (!item?.thumbnail) return null;
     const token = localStorage.getItem("token");
@@ -27,6 +29,25 @@
     if (item?.tracker === "youtube" || item?.thumbnail) return "YouTube";
     return "Music";
   }
+
+  function videoStreamURL(item) {
+    if (!item?.infoHash) return null;
+    const index = item.fileIndex || 0;
+    return withToken(`${API}/stream/${item.infoHash}?index=${index}`);
+  }
+
+  $: if (videoEl && $musicPlayer.currentTrack && $musicPlayer.isPlaying) {
+    const target = $musicPlayer.currentTime || 0;
+    if (Number.isFinite(target) && Math.abs(videoEl.currentTime - target) > 0.6) {
+      videoEl.currentTime = target;
+    }
+  }
+
+  $: if (videoEl && $musicPlayer.isPlaying) {
+    videoEl.play().catch(() => undefined);
+  } else if (videoEl) {
+    videoEl.pause();
+  }
 </script>
 
 {#if $musicPlayer.currentTrack}
@@ -50,7 +71,15 @@
     </div>
 
     <div class="mini-cover">
-      {#if thumbnailURL($musicPlayer.currentTrack)}
+      {#if $musicPlayer.isPlaying && videoStreamURL($musicPlayer.currentTrack)}
+        <video
+          bind:this={videoEl}
+          src={videoStreamURL($musicPlayer.currentTrack)}
+          muted
+          playsinline
+          preload="metadata"
+        ></video>
+      {:else if thumbnailURL($musicPlayer.currentTrack)}
         <img
           src={thumbnailURL($musicPlayer.currentTrack)}
           alt={$musicPlayer.currentTrack.title}
@@ -172,6 +201,12 @@
     object-fit: cover;
   }
 
+  .mini-cover video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .mini-cover-placeholder {
     color: rgba(255, 255, 255, 0.45);
     font-size: 40px;