First working POC

2026-01-26 22:21:54 +01:00
commit cfddc1edea
255 changed files with 77606 additions and 0 deletions
@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { downloads, type DownloadInfo } from "$lib/stores/downloads";
+
+  interface Props {
+    download: DownloadInfo;
+  }
+
+  let { download }: Props = $props();
+
+  function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+  }
+
+  function formatProgress(): string {
+    if (!download.fileSize) {
+      return formatBytes(download.bytesDownloaded);
+    }
+    return `${formatBytes(download.bytesDownloaded)} / ${formatBytes(download.fileSize)}`;
+  }
+
+  function getStatusColor(): string {
+    switch (download.status) {
+      case "downloading":
+        return "bg-blue-500";
+      case "completed":
+        return "bg-green-500";
+      case "failed":
+        return "bg-red-500";
+      case "paused":
+        return "bg-yellow-500";
+      default:
+        return "bg-gray-500";
+    }
+  }
+
+  function getStatusText(): string {
+    switch (download.status) {
+      case "pending":
+        return "Queued";
+      case "downloading":
+        return "Downloading";
+      case "completed":
+        return "Completed";
+      case "failed":
+        return download.errorMessage || "Failed";
+      case "paused":
+        return "Paused";
+      default:
+        return "Unknown";
+    }
+  }
+
+  function getSourceBorderColor(): string {
+    // Green for user downloads, blue for auto-cached
+    return download.downloadSource === 'user' ? 'border-green-500/50' : 'border-blue-500/50';
+  }
+
+  function getSourceLabel(): string {
+    return download.downloadSource === 'user' ? 'Downloaded' : 'Auto-Cached';
+  }
+
+  async function handlePause() {
+    try {
+      await downloads.pause(download.id);
+      // Refresh to update UI
+      await downloads.refresh(download.userId);
+    } catch (error) {
+      console.error("Failed to pause download:", error);
+    }
+  }
+
+  async function handleResume() {
+    try {
+      await downloads.resume(download.id);
+      // Refresh to update UI
+      await downloads.refresh(download.userId);
+    } catch (error) {
+      console.error("Failed to resume download:", error);
+    }
+  }
+
+  async function handleCancel() {
+    try {
+      await downloads.cancel(download.id);
+      // Refresh to update UI
+      await downloads.refresh(download.userId);
+    } catch (error) {
+      console.error("Failed to cancel download:", error);
+    }
+  }
+
+  async function handleDelete() {
+    try {
+      await downloads.delete(download.id);
+      // Refresh to update UI
+      await downloads.refresh(download.userId);
+    } catch (error) {
+      console.error("Failed to delete download:", error);
+    }
+  }
+</script>
+
+<div class="bg-[var(--color-surface)] rounded-lg p-4 hover:bg-[var(--color-surface-hover)] transition-colors border-l-4 {getSourceBorderColor()}">
+  <div class="flex items-center gap-4">
+    <!-- Status Indicator -->
+    <div class="w-2 h-2 rounded-full {getStatusColor()} flex-shrink-0"></div>
+
+    <!-- Media Type Icon -->
+    <div class="flex-shrink-0 text-gray-500">
+      {#if download.mediaType === "video"}
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" />
+        </svg>
+      {:else}
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
+        </svg>
+      {/if}
+    </div>
+
+    <!-- Download Info -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between mb-1">
+        <div class="min-w-0 flex-1">
+          <p class="text-white font-medium truncate">{download.itemName || download.itemId}</p>
+          {#if download.mediaType === "video" && download.seriesName}
+            <!-- Video: Show series info and episode number -->
+            <p class="text-xs text-gray-400 truncate">
+              {download.seriesName}
+              {#if download.seasonNumber !== undefined && download.episodeNumber !== undefined}
+                <span class="text-gray-500"> • S{String(download.seasonNumber).padStart(2, '0')}E{String(download.episodeNumber).padStart(2, '0')}</span>
+              {/if}
+              {#if download.qualityPreset && download.qualityPreset !== "original"}
+                <span class="ml-2 px-1.5 py-0.5 bg-gray-700 rounded text-[10px] uppercase">{download.qualityPreset}</span>
+              {/if}
+            </p>
+          {:else if download.mediaType === "video"}
+            <!-- Movie: Show quality badge -->
+            <p class="text-xs text-gray-400 truncate">
+              Movie
+              {#if download.qualityPreset && download.qualityPreset !== "original"}
+                <span class="ml-2 px-1.5 py-0.5 bg-gray-700 rounded text-[10px] uppercase">{download.qualityPreset}</span>
+              {/if}
+            </p>
+          {:else if download.artistName || download.albumName}
+            <!-- Audio: Show artist and album -->
+            <p class="text-xs text-gray-400 truncate">
+              {download.artistName}{download.artistName && download.albumName ? ' • ' : ''}{download.albumName}
+            </p>
+          {/if}
+        </div>
+        <div class="flex items-center gap-2 ml-2 flex-shrink-0">
+          <span class="text-xs text-gray-400">{getStatusText()}</span>
+          {#if download.downloadSource === 'auto'}
+            <span class="text-[10px] px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded uppercase font-semibold" title="Automatically cached">Auto</span>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Progress Bar (for active/paused downloads) -->
+      {#if download.status === "downloading" || download.status === "paused"}
+        <div class="w-full bg-gray-700 rounded-full h-2 mb-2">
+          <div
+            class="h-2 rounded-full transition-all duration-300 {getStatusColor()}"
+            style="width: {download.progress * 100}%"
+          ></div>
+        </div>
+        <div class="flex items-center justify-between text-xs text-gray-400">
+          <span>{Math.round(download.progress * 100)}%</span>
+          <span>{formatProgress()}</span>
+        </div>
+      {:else if download.status === "completed"}
+        <p class="text-xs text-gray-400">{formatBytes(download.bytesDownloaded)}</p>
+      {:else if download.status === "failed"}
+        <p class="text-xs text-red-400">{download.errorMessage || "Download failed"}</p>
+      {:else if download.status === "pending"}
+        <p class="text-xs text-gray-400">
+          {#if download.fileSize}
+            {formatBytes(download.fileSize)}
+          {:else}
+            Waiting to start...
+          {/if}
+        </p>
+      {/if}
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex items-center gap-2 flex-shrink-0">
+      {#if download.status === "downloading"}
+        <!-- Pause Button -->
+        <button
+          onclick={handlePause}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
+          title="Pause download"
+        >
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+          </svg>
+        </button>
+        <!-- Cancel Button -->
+        <button
+          onclick={handleCancel}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-red-400 transition-colors"
+          title="Cancel download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      {:else if download.status === "paused"}
+        <!-- Resume Button -->
+        <button
+          onclick={handleResume}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
+          title="Resume download"
+        >
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </button>
+        <!-- Cancel Button -->
+        <button
+          onclick={handleCancel}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-red-400 transition-colors"
+          title="Cancel download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      {:else if download.status === "pending"}
+        <!-- Cancel Button -->
+        <button
+          onclick={handleCancel}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-red-400 transition-colors"
+          title="Cancel download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      {:else if download.status === "completed"}
+        <!-- Delete Button -->
+        <button
+          onclick={handleDelete}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-red-400 transition-colors"
+          title="Delete download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+        </button>
+      {:else if download.status === "failed"}
+        <!-- Retry Button -->
+        <button
+          onclick={handleResume}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
+          title="Retry download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
+          </svg>
+        </button>
+        <!-- Delete Button -->
+        <button
+          onclick={handleDelete}
+          class="p-2 rounded-full hover:bg-white/10 text-gray-400 hover:text-red-400 transition-colors"
+          title="Delete failed download"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+        </button>
+      {/if}
+    </div>
+  </div>
+</div>