From 1bad4f7256bc2dd0b4f1f7b726620fc20253a919 Mon Sep 17 00:00:00 2001
From: wisecolt <wisecolt@gmail.com>
Date: Mon, 19 Jan 2026 17:37:06 +0300
Subject: [PATCH] =?UTF-8?q?feat(ui):=20mini=20oynat=C4=B1c=C4=B1ya=20video?=
 =?UTF-8?q?=20=C3=B6nizlemesi=20ekle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Parça çalınırken video akışı mevcutsa küçük resim yerine video öğesi gösterilir. Video konumu, oynatma zamanı ile senkronize edilir.
---
 client/src/components/MiniPlayer.svelte | 39 +++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/client/src/components/MiniPlayer.svelte b/client/src/components/MiniPlayer.svelte
index 5868160..7a0168b 100644
--- a/client/src/components/MiniPlayer.svelte
+++ b/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;