diff --git a/client/src/routes/Transfers.svelte b/client/src/routes/Transfers.svelte index bba3173..22a9a6b 100644 --- a/client/src/routes/Transfers.svelte +++ b/client/src/routes/Transfers.svelte @@ -60,12 +60,12 @@ ws?.send(JSON.stringify({ type: "select", infoHash: hash, index })); } -async function removeTorrent(hash) { - if (!confirm("Bu transferi silmek istediğine emin misin?")) return; - await apiFetch(`/api/torrents/${hash}`, { method: "DELETE" }); - torrents = torrents.filter(t => t.infoHash !== hash); - await list(); -} + async function removeTorrent(hash) { + if (!confirm("Bu transferi silmek istediğine emin misin?")) return; + await apiFetch(`/api/torrents/${hash}`, { method: "DELETE" }); + torrents = torrents.filter((t) => t.infoHash !== hash); + await list(); + } function streamURL(hash, index = 0) { const token = localStorage.getItem("token"); @@ -264,7 +264,12 @@ async function removeTorrent(hash) { {#each torrents as t (t.infoHash)}
openModal(t)}> {#if t.thumbnail} - thumb + thumb e.target.classList.add("loaded")} + /> {:else}
@@ -629,4 +634,4 @@ async function removeTorrent(hash) { font-size: 10px; } } - \ No newline at end of file + diff --git a/client/src/styles/main.css b/client/src/styles/main.css index a5d2710..ccd7983 100644 --- a/client/src/styles/main.css +++ b/client/src/styles/main.css @@ -450,6 +450,50 @@ body, font-weight: 600; } +/* 🌫️ 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; +} + +img.thumb.loaded { + opacity: 1; + filter: blur(0) brightness(1); + transform: scale(1); +} + +/* 🪄 Placeholder her zaman görünür */ +.thumb.placeholder { + opacity: 1 !important; + filter: none !important; + transform: none !important; + background: linear-gradient(100deg, #f0f0f0 20%, #e2e2e2 50%, #f0f0f0 80%); + background-size: 200% 100%; + animation: shimmer 1.4s infinite; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; +} + +.thumb.placeholder i { + font-size: 28px; + color: #777; + opacity: 0.9; +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + /* ======================================================= 📱 RESPONSIVE ======================================================= */ diff --git a/server/server.js b/server/server.js index f537ad1..33586bb 100644 --- a/server/server.js +++ b/server/server.js @@ -173,7 +173,14 @@ app.post("/api/transfer", requireAuth, upload.single("torrent"), (req, res) => { exec(cmd, (err) => { if (err) console.warn(`⚠️ Video thumbnail oluşturulamadı: ${err.message}`); - else console.log(`🎞️ Video thumbnail oluşturuldu: ${thumbnailPath}`); + else { + console.log(`🎞️ Video thumbnail oluşturuldu: ${thumbnailPath}`); + const data = JSON.stringify({ + type: "fileUpdate", + path: path.relative(DOWNLOAD_DIR, entry.savePath) + }); + wss.clients.forEach((c) => c.readyState === 1 && c.send(data)); + } }); // --- 2️⃣ Resimler için thumbnail oluştur ---