From 4ab37005cf07f07174015e21f64ae724800d97bf Mon Sep 17 00:00:00 2001
From: szbk <wisecolt@gmail.com>
Date: Sun, 30 Nov 2025 20:16:20 +0300
Subject: [PATCH] =?UTF-8?q?Youtube=20indirmeleri=20ile=20ilgili=20UI/UX=20?=
 =?UTF-8?q?g=C3=BCncellemeleri=20yap=C4=B1ld=C4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/routes/Files.svelte     |  8 ++++--
 client/src/routes/Transfers.svelte | 42 +++++++++++++++++++++++++-----
 server/server.js                   |  9 +++++++
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/client/src/routes/Files.svelte b/client/src/routes/Files.svelte
index 7771f9a..3a4897a 100644
--- a/client/src/routes/Files.svelte
+++ b/client/src/routes/Files.svelte
@@ -78,6 +78,10 @@
       : originalSegments;
 
     const isDirectory = Boolean(file.isDirectory);
+    const baseDisplayName =
+      file.displayName ||
+      displaySegments[displaySegments.length - 1] ||
+      file.name;
     return {
       ...file,
       isDirectory,
@@ -85,7 +89,7 @@
       originalSegments,
       displaySegments,
       displayPath: displaySegments.join("/"),
-      displayName: displaySegments[displaySegments.length - 1] || file.name,
+      displayName: baseDisplayName,
       displayParentPath: displaySegments.slice(0, -1).join("/"),
     };
   }
@@ -123,7 +127,7 @@
       if (file.isDirectory) {
         const displayPath = segments.join("/");
         const parentDisplayPath = segments.slice(0, -1).join("/");
-        const displayName = segments[segments.length - 1] || displayPath;
+        const displayName = file.displayName || segments[segments.length - 1] || displayPath;
         ensureDirectoryEntry(displayPath, displayName, parentDisplayPath, fullOriginalPath);
       }
 
diff --git a/client/src/routes/Transfers.svelte b/client/src/routes/Transfers.svelte
index c0ca3db..dd64071 100644
--- a/client/src/routes/Transfers.svelte
+++ b/client/src/routes/Transfers.svelte
@@ -534,6 +534,10 @@
               class="thumb"
               on:load={(e) => e.target.classList.add("loaded")}
             />
+          {:else if t.type === "youtube" && (!t.progress || t.progress <= 0)}
+            <div class="thumb placeholder loading">
+              <div class="spinner"></div>
+            </div>
           {:else}
             <div class="thumb placeholder">
               <i class="fa-regular fa-image"></i>
@@ -545,6 +549,9 @@
               <div class="torrent-title">
                 <div class="torrent-name">{t.name}</div>
                 {#if t.type === "youtube"}
+                  <div class="torrent-subtitle">
+                    Source: YouTube
+                  </div>
                   <div class="torrent-subtitle">
                     Added: {formatDate(t.added)}
                   </div>
@@ -572,15 +579,12 @@
               </div>
             </div>
 
-            <div class="torrent-hash">
-              {#if t.type === "youtube"}
-                Source: YouTube | Added:
-                {t.added ? formatDate(t.added) : "Unknown"}
-              {:else}
+            {#if t.type !== "youtube"}
+              <div class="torrent-hash">
                 Hash: {t.infoHash} | Tracker: {t.tracker ?? "Unknown"} | Added:
                 {t.added ? formatDate(t.added) : "Unknown"}
-              {/if}
-            </div>
+              </div>
+            {/if}
 
             {#if t.files && t.files.length}
               <div class="torrent-files">
@@ -815,6 +819,30 @@
     color: #666;
   }
 
+  .placeholder.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-top-color: #fdce45;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   .toggle-btn {
     background: transparent;
     border: none;
diff --git a/server/server.js b/server/server.js
index 6029d6c..0716c85 100644
--- a/server/server.js
+++ b/server/server.js
@@ -4910,9 +4910,16 @@ app.get("/api/files", requireAuth, (req, res) => {
         const tracker = dirInfo.tracker ?? null;
         const torrentName = dirInfo.name ?? null;
         const infoHash = dirInfo.infoHash ?? null;
+        const baseName = safeRel.split(/[\\/]/).pop();
+        const isRoot = !relWithinRoot;
+        const displayName =
+          isRoot && tracker === "youtube" && torrentName
+            ? torrentName
+            : baseName;
 
         result.push({
           name: safeRel,
+          displayName,
           size: 0,
           type: "inode/directory",
           isDirectory: true,
@@ -4984,9 +4991,11 @@ app.get("/api/files", requireAuth, (req, res) => {
           : null;
         const isPrimaryVideo =
           !!info.primaryVideoPath && info.primaryVideoPath === relWithinRoot;
+        const displayName = entry.name;
 
         result.push({
           name: safeRel,
+          displayName,
           size,
           type,
           url,