From e3c9b9f4c66222ade68c490df316fa31b4d31bc6 Mon Sep 17 00:00:00 2001 From: szbk Date: Thu, 30 Oct 2025 23:50:24 +0300 Subject: [PATCH] =?UTF-8?q?Files=20ekran=C4=B1na=20s=C3=BCr=C3=BCkleme=20?= =?UTF-8?q?=C3=B6zelli=C4=9Fi=20eklendi.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/routes/Files.svelte | 368 ++++++++++++++++++++++----------- 1 file changed, 242 insertions(+), 126 deletions(-) diff --git a/client/src/routes/Files.svelte b/client/src/routes/Files.svelte index 9e21fb5..1e015f1 100644 --- a/client/src/routes/Files.svelte +++ b/client/src/routes/Files.svelte @@ -17,6 +17,10 @@ let breadcrumbs = []; let currentFileScope = []; let pendingFolders = new Map(); + let customOrder = new Map(); + let draggingItem = null; + let dragOverItem = null; + let lastDragPath = ""; const normalizePath = (value) => { if (!value) return ""; @@ -127,6 +131,32 @@ }); } + function applyOrdering(path) { + const key = normalizePath(path); + const combined = [...visibleFolders, ...visibleFiles]; + const order = customOrder.get(key); + if (!order) { + visibleEntries = combined; + return; + } + const map = new Map(combined.map((item) => [item.name, item])); + const ordered = []; + const filteredOrder = []; + for (const name of order) { + const item = map.get(name); + if (!item) continue; + ordered.push(item); + filteredOrder.push(name); + map.delete(name); + } + for (const item of map.values()) { + ordered.push(item); + filteredOrder.push(item.name); + } + visibleEntries = ordered; + customOrder.set(key, filteredOrder); + } + function computeBreadcrumbs(path) { const segments = path ? path.split("/").filter(Boolean) : []; const crumbs = [{ label: "Home", path: "" }]; @@ -192,7 +222,7 @@ normalizePath(file.displayParentPath) === normalizePath(path) && file.displayName.toLowerCase() !== "info.js", ); - visibleEntries = [...visibleFolders, ...visibleFiles]; + applyOrdering(path); breadcrumbs = computeBreadcrumbs(path); } @@ -472,6 +502,96 @@ selectedItems = new Set(); } + function handleDragStart(entry, event) { + draggingItem = entry; + dragOverItem = null; + lastDragPath = normalizePath(currentPath); + if (event?.dataTransfer) { + try { + event.dataTransfer.setData("text/plain", entry.name); + } catch (err) { + // ignore + } + event.dataTransfer.effectAllowed = "move"; + } + } + + function handleDragOver(entry, event) { + if (!draggingItem) return; + if (normalizePath(currentPath) !== lastDragPath) return; + if (draggingItem.name === entry.name) return; + event.preventDefault(); + if (event?.dataTransfer) event.dataTransfer.dropEffect = "move"; + dragOverItem = entry; + } + + function handleDragLeave(entry) { + if (dragOverItem && dragOverItem.name === entry.name) { + dragOverItem = null; + } + } + + function handleDrop(entry, event) { + if (!draggingItem) return; + if (normalizePath(currentPath) !== lastDragPath) { + draggingItem = null; + dragOverItem = null; + return; + } + event.preventDefault(); + event.stopPropagation(); + reorderEntries(draggingItem, entry); + draggingItem = null; + dragOverItem = null; + } + + function handleDragEnd() { + draggingItem = null; + dragOverItem = null; + } + + function handleContainerDragOver(event) { + if (!draggingItem) return; + if (normalizePath(currentPath) !== lastDragPath) return; + event.preventDefault(); + } + + function handleContainerDrop(event) { + if (!draggingItem) return; + if (normalizePath(currentPath) !== lastDragPath) { + draggingItem = null; + dragOverItem = null; + return; + } + event.preventDefault(); + event.stopPropagation(); + const key = normalizePath(currentPath); + const currentOrder = + customOrder.get(key) || visibleEntries.map((item) => item.name); + const filtered = currentOrder.filter((name) => name !== draggingItem.name); + filtered.push(draggingItem.name); + customOrder.set(key, filtered); + applyOrdering(currentPath); + draggingItem = null; + dragOverItem = null; + } + + function reorderEntries(source, target) { + const key = normalizePath(currentPath); + const currentOrder = + customOrder.get(key) || visibleEntries.map((item) => item.name); + const sourceIndex = currentOrder.indexOf(source.name); + const targetIndex = currentOrder.indexOf(target.name); + if (sourceIndex === -1 || targetIndex === -1) return; + const updatedOrder = [...currentOrder]; + updatedOrder.splice(sourceIndex, 1); + const newTargetIndex = updatedOrder.indexOf(target.name); + if (newTargetIndex === -1) return; + updatedOrder.splice(newTargetIndex, 0, source.name); + customOrder.set(key, updatedOrder); + applyOrdering(currentPath); + } + function updateUrlPath( path, originalPath = currentOriginalPath, @@ -1489,7 +1609,12 @@
No media found
{:else} -
+
{#if isCreatingFolder}
@@ -1508,144 +1633,124 @@
{/if} - {#each visibleFolders as folder (folder.name)} -
handleEntryClick(folder)} - > -
- {`${folder.displayName} -
-
-
{cleanFileName(folder.displayName)}
-
- - -
- {/each} - {#each visibleFiles as f (f.name)} + {#each visibleEntries as entry (entry.name)}
handleEntryClick(f)} + class:is-selected={selectedItems.has(entry.name)} + class:is-dragging={draggingItem?.name === entry.name} + class:is-drag-over={dragOverItem?.name === entry.name} + draggable="true" + on:dragstart={(event) => handleDragStart(entry, event)} + on:dragover={(event) => handleDragOver(entry, event)} + on:dragleave={() => handleDragLeave(entry)} + on:drop={(event) => handleDrop(entry, event)} + on:dragend={handleDragEnd} + on:click={() => handleEntryClick(entry)} > - {#if f.thumbnail} - {f.name} e.target.classList.add("loaded")} - /> + {#if entry.isDirectory} +
+ {`${entry.displayName} +
+
+
{cleanFileName(entry.displayName)}
+
{:else} -
- + {#if entry.thumbnail} + {entry.name} e.target.classList.add("loaded")} + /> + {:else} +
+ +
+ {/if} +
+
{cleanFileName(entry.name)}
+
+ {#if entry.progressText} + {entry.progressText} + {:else} + {formatSize(entry.size)} + {/if} +
+
+
+ {formatDateTime(entry.added || entry.completedAt)} + | + {formatSize(entry.size)} +
+
+ {#if entry.progressText} + {entry.progressText} + | + {/if} + Tracker: + + {formatTracker(entry.tracker)} + +
+ {#if entry.mediaInfo?.video || entry.mediaInfo?.audio} +
+ {#if entry.extension} + + {#if entry.type?.startsWith("image/")} + + {:else} + + {/if} + {entry.extension.toUpperCase()} + + {/if} + {#if entry.mediaInfo?.video} + + + {formatVideoCodec(entry.mediaInfo.video)} + + {/if} + {#if entry.mediaInfo?.video && entry.mediaInfo?.audio} + | + {/if} + {#if entry.mediaInfo?.audio} + + + {formatAudioCodec(entry.mediaInfo.audio)} + + {/if} +
+ {/if} +
+
+
+ {#if entry.type?.startsWith("video/")} + {#if entry.seriesEpisode || (entry.seriesEpisodes && Object.keys(entry.seriesEpisodes).length > 0)} + + {:else if entry.movieMatch} + + {:else} + + {/if} + {:else if entry.type?.startsWith("image/")} + + {/if}
{/if} -
-
{cleanFileName(f.name)}
-
- {#if f.progressText} - {f.progressText} - {:else} - {formatSize(f.size)} - {/if} -
-
-
- {formatDateTime(f.added || f.completedAt)} - | - {formatSize(f.size)} -
-
- {#if f.progressText} - {f.progressText} - | - {/if} - Tracker: - - {formatTracker(f.tracker)} - -
- {#if f.mediaInfo?.video || f.mediaInfo?.audio} -
- {#if f.extension} - - {#if f.type?.startsWith("image/")} - - {:else} - - {/if} - {f.extension.toUpperCase()} - - {/if} - {#if f.mediaInfo?.video} - - - {formatVideoCodec(f.mediaInfo.video)} - - {/if} - {#if f.mediaInfo?.video && f.mediaInfo?.audio} - | - {/if} - {#if f.mediaInfo?.audio} - - - {formatAudioCodec(f.mediaInfo.audio)} - - {/if} -
- {/if} -
-
-
- {#if f.type?.startsWith("video/")} - {#if f.seriesEpisode || (f.seriesEpisodes && Object.keys(f.seriesEpisodes).length > 0)} - - {:else if f.movieMatch} - - {:else} - - {/if} - {:else if f.type?.startsWith("image/")} - - {/if} -