First working POC
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import { downloads, videoDownloads } from "$lib/stores/downloads";
|
||||
import { auth } from "$lib/stores/auth";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { QUALITY_PRESETS, type QualityPreset } from "$lib/api/quality-presets";
|
||||
|
||||
interface Props {
|
||||
seasonId: string;
|
||||
seriesName: string;
|
||||
seasonName: string;
|
||||
seasonNumber: number;
|
||||
episodeCount: number;
|
||||
className?: string;
|
||||
size?: "sm" | "md" | "lg";
|
||||
}
|
||||
|
||||
let { seasonId, seriesName, seasonName, seasonNumber, episodeCount, className = "", size = "md" }: Props = $props();
|
||||
|
||||
let isProcessing = $state(false);
|
||||
let showQualityPicker = $state(false);
|
||||
|
||||
// Count downloads for this season
|
||||
const seasonDownloads = $derived(
|
||||
$videoDownloads.filter((d) =>
|
||||
d.seriesName === seriesName &&
|
||||
d.seasonName === seasonName
|
||||
)
|
||||
);
|
||||
|
||||
const completedCount = $derived(
|
||||
seasonDownloads.filter((d) => d.status === "completed").length
|
||||
);
|
||||
|
||||
const inProgressCount = $derived(
|
||||
seasonDownloads.filter((d) => d.status === "downloading" || d.status === "pending").length
|
||||
);
|
||||
|
||||
const hasDownloads = $derived(completedCount > 0 || inProgressCount > 0);
|
||||
const allDownloaded = $derived(completedCount >= episodeCount);
|
||||
|
||||
async function startSeasonDownload(quality: QualityPreset) {
|
||||
showQualityPicker = false;
|
||||
if (isProcessing) return;
|
||||
|
||||
isProcessing = true;
|
||||
try {
|
||||
const userId = $auth.user?.id;
|
||||
if (!userId) {
|
||||
console.error("No user ID found");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("📺 Starting season download for:", seasonName, "quality:", quality);
|
||||
|
||||
// Get target directory
|
||||
const targetDir = await invoke<string>("storage_get_path");
|
||||
const basePath = `${targetDir}/videos`;
|
||||
|
||||
// Queue all episodes in this season
|
||||
const downloadIds = await downloads.downloadSeason(
|
||||
seasonId,
|
||||
seriesName,
|
||||
seasonName,
|
||||
seasonNumber,
|
||||
userId,
|
||||
basePath,
|
||||
quality
|
||||
);
|
||||
|
||||
console.log(`✅ Queued ${downloadIds.length} episodes for download`);
|
||||
|
||||
// Pin the season item
|
||||
await downloads.pinItem(seasonId);
|
||||
} catch (error) {
|
||||
console.error("Failed to start season download:", error);
|
||||
} finally {
|
||||
isProcessing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
if (isProcessing) return;
|
||||
showQualityPicker = true;
|
||||
}
|
||||
|
||||
function getButtonText(): string {
|
||||
if (allDownloaded) {
|
||||
return size === "sm" ? "✓" : "Downloaded";
|
||||
}
|
||||
if (inProgressCount > 0) {
|
||||
return size === "sm" ? `${inProgressCount}` : `Downloading (${inProgressCount})`;
|
||||
}
|
||||
if (completedCount > 0) {
|
||||
return size === "sm" ? `${completedCount}/${episodeCount}` : `Download (${completedCount}/${episodeCount})`;
|
||||
}
|
||||
return size === "sm" ? "⬇" : "Download Season";
|
||||
}
|
||||
|
||||
function getButtonColor(): string {
|
||||
if (allDownloaded) {
|
||||
return "bg-green-600 hover:bg-green-700";
|
||||
}
|
||||
if (inProgressCount > 0) {
|
||||
return "bg-blue-600 hover:bg-blue-700";
|
||||
}
|
||||
return "bg-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin-hover)]";
|
||||
}
|
||||
|
||||
const sizeClasses = $derived(
|
||||
size === "sm" ? "px-2 py-1 text-xs" :
|
||||
size === "lg" ? "px-6 py-3 text-base" :
|
||||
"px-4 py-2 text-sm"
|
||||
);
|
||||
|
||||
const iconSize = $derived(
|
||||
size === "sm" ? "w-3 h-3" :
|
||||
size === "lg" ? "w-6 h-6" :
|
||||
"w-4 h-4"
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="relative {className}">
|
||||
<button
|
||||
onclick={handleClick}
|
||||
disabled={isProcessing || allDownloaded}
|
||||
class="flex items-center gap-2 rounded-lg text-white font-medium transition-colors {sizeClasses} {getButtonColor()} {isProcessing || allDownloaded ? 'opacity-70 cursor-not-allowed' : ''}"
|
||||
>
|
||||
{#if inProgressCount > 0}
|
||||
<!-- Spinner -->
|
||||
<svg class="{iconSize} animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
{:else if allDownloaded}
|
||||
<!-- Checkmark -->
|
||||
<svg class="{iconSize}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{:else}
|
||||
<!-- Download icon -->
|
||||
<svg class="{iconSize}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4m-9 7h10" />
|
||||
</svg>
|
||||
{/if}
|
||||
{#if size !== "sm"}
|
||||
<span>{getButtonText()}</span>
|
||||
{:else}
|
||||
<span>{getButtonText()}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Quality picker dropdown -->
|
||||
{#if showQualityPicker}
|
||||
<div class="absolute z-50 mt-2 left-0 w-48 bg-[var(--color-surface)] rounded-lg shadow-xl border border-gray-700 overflow-hidden">
|
||||
<div class="p-3 border-b border-gray-700">
|
||||
<div class="text-sm font-medium text-white">Download Quality</div>
|
||||
<div class="text-xs text-gray-400 mt-1">{episodeCount} episodes</div>
|
||||
</div>
|
||||
{#each Object.entries(QUALITY_PRESETS) as [key, preset]}
|
||||
<button
|
||||
onclick={() => startSeasonDownload(key as QualityPreset)}
|
||||
class="w-full px-4 py-3 text-left hover:bg-gray-700 transition-colors flex justify-between items-center"
|
||||
>
|
||||
<span class="text-sm text-white">{preset.label}</span>
|
||||
{#if preset.videoBitrate}
|
||||
<span class="text-xs text-gray-500">{Math.round(preset.videoBitrate / 1_000_000)}Mbps</span>
|
||||
{:else}
|
||||
<span class="text-xs text-gray-500">Direct</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
<button
|
||||
onclick={() => showQualityPicker = false}
|
||||
class="w-full px-4 py-3 text-left text-sm text-gray-400 hover:bg-gray-700 border-t border-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Click outside to close -->
|
||||
{#if showQualityPicker}
|
||||
<button
|
||||
class="fixed inset-0 z-40"
|
||||
onclick={() => showQualityPicker = false}
|
||||
aria-label="Close quality picker"
|
||||
></button>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user