jellytau/src/lib/components/downloads/DownloadItem.svelte

<script lang="ts">
  import { downloads, type DownloadInfo } from "$lib/stores/downloads";
  import { createLogger } from "$lib/utils/logger";

  const log = createLogger("DownloadItem");

  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) {
      log.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) {
      log.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) {
      log.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) {
      log.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>