From 6282d8335178e4955b3d808e7fdb13bb268daed7 Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Fri, 24 Oct 2025 21:50:21 +0300
Subject: [PATCH] Progress percentage is now visible on the files screen.

---
 client/src/routes/Files.svelte | 63 ++++++++++++++++++++++++++++------
 client/src/styles/main.css     | 12 +++----
 server/server.js               | 19 +++++++---
 3 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/client/src/routes/Files.svelte b/client/src/routes/Files.svelte
index ac310ba..9000aab 100644
--- a/client/src/routes/Files.svelte
+++ b/client/src/routes/Files.svelte
@@ -223,10 +223,9 @@
     }
   }
 
-  onMount(() => {
-    loadFiles();
+  onMount(async () => {
+    await loadFiles(); // önce dosyaları getir
 
-    // 🔄 WebSocket ile anlık dosya güncellemelerini dinle
     const token = localStorage.getItem("token");
     const wsUrl = `${API.replace("http", "ws")}?token=${token}`;
     const ws = new WebSocket(wsUrl);
@@ -234,16 +233,37 @@
     ws.onmessage = async (event) => {
       try {
         const msg = JSON.parse(event.data);
+
         if (msg.type === "fileUpdate") {
-          console.log("📸 Yeni thumbnail bildirimi alındı:", msg.path);
-          await loadFiles(); // 🔄 anında dosya listesini yenile
+          console.log("📸 Yeni thumbnail bildirimi:", msg.path);
+          await loadFiles();
+        }
+
+        if (msg.type === "progress" && msg.torrents) {
+          for (const t of msg.torrents) {
+            const savePath = t.savePath || "";
+            const folderId = savePath.split("/").pop();
+
+            files = files.map((f) => {
+              const fileFolder = f.name.split("/")[0];
+              if (fileFolder === folderId) {
+                return t.progress < 1
+                  ? {
+                      ...f,
+                      progressText: `${Math.floor(t.progress * 100)}%`
+                    }
+                  : { ...f, progressText: null };
+              }
+              return f;
+            });
+          }
+          files = [...files];
         }
       } catch (err) {
         console.warn("WebSocket mesajı çözümlenemedi:", err);
       }
     };
 
-    // ✅ Tek event handler içinde hem Esc hem ok tuşlarını kontrol et
     function handleKey(e) {
       if (e.key === "Escape") {
         if (showModal) closeModal();
@@ -255,9 +275,7 @@
     }
 
     window.addEventListener("keydown", handleKey);
-    return () => {
-      window.removeEventListener("keydown", handleKey);
-    };
+    return () => window.removeEventListener("keydown", handleKey);
   });
 </script>
 
@@ -289,7 +307,13 @@
           {/if}
           <div class="info">
             <div class="name">{cleanFileName(f.name)}</div>
-            <div class="size">{formatSize(f.size)}</div>
+            <div class="size">
+              {#if f.progressText}
+                <span class="progress-text">{f.progressText}</span>
+              {:else}
+                {formatSize(f.size)}
+              {/if}
+            </div>
           </div>
           <div class="media-type-icon">
             {#if f.type?.startsWith("video/")}
@@ -600,6 +624,25 @@
     opacity: 1;
   }
 
+  .progress-text {
+    color: #666; /* gri */
+    font-weight: 600;
+    font-size: 12px;
+    animation: pulse 1.2s infinite ease-in-out;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.7;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.7;
+    }
+  }
+
   /* 🗑️ ikonu hover efekti */
   .delete-overlay i {
     background: rgba(255, 255, 255, 0.2);
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
index ccd7983..f886a17 100644
--- a/client/src/styles/main.css
+++ b/client/src/styles/main.css
@@ -453,16 +453,16 @@ body,
 /* 🌫️ Thumbnail fade-in + blur efekti */
 /* 🌫️ Fade-in thumbnail efekti — sadece img'ler için geçerli */
 img.thumb {
-  opacity: 0;
-  filter: blur(10px) brightness(0.9);
-  transform: scale(1.03);
-  transition: opacity 0.6s ease, filter 1s ease, transform 0.6s ease;
+  opacity: 1;
+  filter: none;
+  transform: none;
+  transition: none;
 }
 
 img.thumb.loaded {
   opacity: 1;
-  filter: blur(0) brightness(1);
-  transform: scale(1);
+  filter: none;
+  transform: none;
 }
 
 /* 🪄 Placeholder her zaman görünür */
diff --git a/server/server.js b/server/server.js
index 33586bb..1cc1b73 100644
--- a/server/server.js
+++ b/server/server.js
@@ -54,8 +54,9 @@ function snapshot() {
         downloadSpeed: torrent.downloadSpeed,
         uploadSpeed: torrent.uploadSpeed,
         numPeers: torrent.numPeers,
-        tracker: torrent.announce?.[0] || null, // 🆕 ilk tracker
-        added, // 🆕 eklenme zamanı
+        tracker: torrent.announce?.[0] || null,
+        added,
+        savePath, // 🆕 BURASI!
         files: torrent.files.map((f, i) => ({
           index: i,
           name: f.name,
@@ -155,6 +156,11 @@ app.post("/api/transfer", requireAuth, upload.single("torrent"), (req, res) => {
           length: f.length
         }))
       });
+      const data = JSON.stringify({
+        type: "progress",
+        torrents: snapshot()
+      });
+      wss.clients.forEach((c) => c.readyState === 1 && c.send(data));
     });
 
     // --- İndirme tamamlandığında thumbnail oluştur ---
@@ -526,10 +532,13 @@ wss.on("connection", (ws) => {
   ws.send(JSON.stringify({ type: "progress", torrents: snapshot() }));
 });
 
+// --- ⏱️ Her 2 saniyede bir aktif torrent durumu yayınla ---
 setInterval(() => {
-  const data = JSON.stringify({ type: "progress", torrents: snapshot() });
-  wss.clients.forEach((c) => c.readyState === 1 && c.send(data));
-}, 1000);
+  if (torrents.size > 0) {
+    const data = JSON.stringify({ type: "progress", torrents: snapshot() });
+    wss.clients.forEach((c) => c.readyState === 1 && c.send(data));
+  }
+}, 2000);
 
 client.on("error", (err) => {
   if (!String(err).includes("uTP"))