Lokale Dateien implementiert

webpage/src/components/FileListItem.svelte

@@ -1,16 +1,53 @@
 <script lang="ts">
-    import type { BuzzerFile } from "../lib/types";
-    import { FileAudioIcon } from "phosphor-svelte";
-    export let file: BuzzerFile;
+  import type { BuzzerFile } from "../lib/types";
+  import { FileAudioIcon } from "phosphor-svelte";
+  import { isFetchingRemote, transferStats, transferDetails, buzzerAudioFiles } from "../lib/store";
+  import { SETTINGS } from "../lib/settings";
+
+  export let file: BuzzerFile;
+
+  // Status-Berechnung für die Queue
+  $: selectedFiles = $buzzerAudioFiles.filter(f => f.selected);
+  $: currentIndex = selectedFiles.findIndex(f => f.name === $transferStats.currentFileName);
+  $: myIndex = selectedFiles.findIndex(f => f.name === file.name);
+
+  $: state = (() => {
+    if (!file.selected || !$isFetchingRemote) return 'default';
+    if (file.name === $transferStats.currentFileName) return 'active';
+    if (myIndex < currentIndex) return 'done';
+    if (myIndex > currentIndex) return 'pending';
+    return 'default';
+  })();
+
+  function toggleSelection() {
+    if ($isFetchingRemote) return; // Blockiert Änderungen während des Transfers
+    file.selected = !file.selected;
+    buzzerAudioFiles.update(files => files); // Triggert die Reaktivität im Svelte-Store
+  }
 </script>
-<div>
+
+<div class="relative overflow-hidden">
+  
+  {#if state === 'active'}
+    <div 
+      class="absolute top-0 left-0 h-full bg-indigo-100 z-0"
+      style="width: {$transferDetails.filePercent}%; transition: {$transferDetails.filePercent === 0 ? 'none' : `width ${SETTINGS.ui.transferUpdateIntervalMs}ms linear`};"
+    ></div>
+  {/if}
+
   <button
-    class="w-full text-left flex-1 px-3 py-1 flex items-center cursor-pointer border-l-4 transition-colors border-b border-b-border-card
-           {file.selected ? 'border-l-blue-600 bg-blue-50 hover:bg-blue-100' : 'border-l-transparent hover:bg-slate-100 hover:border-l-blue-200'} "
-           on:click={() => {file.selected = !file.selected;}}
-           >
+    class="relative z-10 w-full text-left flex-1 px-3 py-1 flex items-center border-l-4 transition-colors border-b border-b-border-card
+           {file.selected ? 'border-l-blue-600' : 'border-l-transparent'}
+           {file.selected && state !== 'active' ? 'bg-blue-50' : ''}
+           {!$isFetchingRemote && file.selected ? 'hover:bg-blue-100 cursor-pointer' : ''}
+           {!$isFetchingRemote && !file.selected ? 'hover:bg-slate-100 hover:border-l-blue-200 cursor-pointer' : ''}
+           {$isFetchingRemote ? 'cursor-default' : ''}
+           {state === 'pending' ? 'grayscale opacity-80' : ''}"
+    on:click={toggleSelection}
+    disabled={$isFetchingRemote}
+  >
     <FileAudioIcon class="text-blue-600 mr-3 w-5 h-5" />
-     <div class="flex flex-col">
+    <div class="flex flex-col">
       <span class="font-light">
         {file.name || "Unbekannte Datei"}
         {#if file.metaTags?.t}
@@ -23,7 +60,7 @@
             {parseFloat((file.size/1024).toFixed(1))}&thinsp;kB
         </span>
         <span>
-            {#if file.metaTags.a}<span class="text-text-muted"> | Author:</span>&thinsp;{file.metaTags.a}{/if}
+            {#if file.metaTags?.a}<span class="text-text-muted"> | Author:</span>&thinsp;{file.metaTags.a}{/if}
         </span>
       </div>
     </div>
@@ -31,5 +68,4 @@
 </div>
 
 <style>
-
 </style>