258 lines
10 KiB
Vue
258 lines
10 KiB
Vue
// filepath: src/views/Home.vue
|
|
<script setup lang="ts">
|
|
import { watch } from 'vue'
|
|
import { invoke } from '@tauri-apps/api/core'
|
|
import { Loader2 } from 'lucide-vue-next'
|
|
import { useQueueStore } from '../stores/queue'
|
|
import { useSettingsStore } from '../stores/settings'
|
|
import { useAnalysisStore } from '../stores/analysis'
|
|
import AppSelect from '../components/ui/AppSelect.vue'
|
|
|
|
const queueStore = useQueueStore()
|
|
const settingsStore = useSettingsStore()
|
|
const analysisStore = useAnalysisStore()
|
|
|
|
const qualityOptions = [
|
|
{ label: 'Best Quality', value: 'best' },
|
|
{ label: '1080p', value: '1080' },
|
|
{ label: '720p', value: '720' },
|
|
{ label: '480p', value: '480' },
|
|
]
|
|
|
|
// Sync default download path if not set
|
|
watch(() => settingsStore.settings.download_path, (newPath) => {
|
|
if (newPath && !analysisStore.options.output_path) {
|
|
analysisStore.options.output_path = newPath
|
|
}
|
|
}, { immediate: true })
|
|
|
|
// Detect Mix URL
|
|
watch(() => analysisStore.url, (newUrl) => {
|
|
if (newUrl && newUrl.includes('v=') && newUrl.includes('list=')) {
|
|
analysisStore.isMix = true
|
|
} else {
|
|
analysisStore.isMix = false
|
|
// Reset scanMix if URL changes to non-mix
|
|
analysisStore.scanMix = false
|
|
}
|
|
})
|
|
|
|
async function analyze() {
|
|
if (!analysisStore.url) return
|
|
analysisStore.loading = true
|
|
analysisStore.error = ''
|
|
analysisStore.metadata = null
|
|
|
|
try {
|
|
let urlToScan = analysisStore.url;
|
|
let parseMix = false;
|
|
|
|
if (analysisStore.isMix) {
|
|
if (analysisStore.scanMix) {
|
|
// Keep URL as is, tell backend to limit scan
|
|
parseMix = true;
|
|
} else {
|
|
// Strip list param
|
|
try {
|
|
const u = new URL(urlToScan);
|
|
u.searchParams.delete('list');
|
|
u.searchParams.delete('index');
|
|
u.searchParams.delete('start_radio');
|
|
urlToScan = u.toString();
|
|
} catch (e) {
|
|
// Fallback regex if URL parsing fails
|
|
urlToScan = urlToScan.replace(/&list=[^&]+/, '');
|
|
}
|
|
}
|
|
}
|
|
|
|
const res = await invoke('fetch_metadata', { url: urlToScan, parseMixPlaylist: parseMix })
|
|
analysisStore.metadata = res
|
|
} catch (e: any) {
|
|
analysisStore.error = e.toString()
|
|
} finally {
|
|
analysisStore.loading = false
|
|
}
|
|
}
|
|
|
|
async function startDownload() {
|
|
if (!analysisStore.metadata) return
|
|
|
|
// Ensure path is set
|
|
if (!analysisStore.options.output_path) {
|
|
analysisStore.options.output_path = settingsStore.settings.download_path
|
|
}
|
|
|
|
try {
|
|
const metaToSend = analysisStore.metadata.entries ?
|
|
{ title: analysisStore.metadata.title, thumbnail: "", id: analysisStore.metadata.id } :
|
|
analysisStore.metadata;
|
|
|
|
// Note: We might want to pass the *cleaned* URL if it was cleaned during analyze
|
|
// But for now we pass the original URL or whatever was scanned.
|
|
// Actually, if we scanned as a single video (unchecked), we should probably download as single video.
|
|
// The user might expect the same result as analysis.
|
|
// Let's reconstruct the URL logic or just use what `analyze` used?
|
|
// Since `start_download` just takes a URL string, we should probably use the same logic.
|
|
|
|
let urlToDownload = analysisStore.url;
|
|
if (analysisStore.isMix && !analysisStore.scanMix) {
|
|
try {
|
|
const u = new URL(urlToDownload);
|
|
u.searchParams.delete('list');
|
|
u.searchParams.delete('index');
|
|
u.searchParams.delete('start_radio');
|
|
urlToDownload = u.toString();
|
|
} catch (e) {
|
|
urlToDownload = urlToDownload.replace(/&list=[^&]+/, '');
|
|
}
|
|
}
|
|
|
|
const id = await invoke<string>('start_download', {
|
|
url: urlToDownload,
|
|
options: analysisStore.options,
|
|
metadata: metaToSend
|
|
})
|
|
|
|
queueStore.addTask({
|
|
id,
|
|
title: metaToSend.title,
|
|
thumbnail: metaToSend.thumbnail,
|
|
progress: 0,
|
|
speed: 'Pending...',
|
|
status: 'pending'
|
|
})
|
|
|
|
// Reset state after successful download start
|
|
analysisStore.reset()
|
|
} catch (e: any) {
|
|
analysisStore.error = "Download failed to start: " + e.toString()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-5xl mx-auto p-8">
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl font-bold text-zinc-900 dark:text-white">New Download</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 mt-2">Paste a URL to start downloading media.</p>
|
|
</header>
|
|
|
|
<!-- Input Section -->
|
|
<div class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 mb-8">
|
|
<div class="flex gap-4">
|
|
<input
|
|
v-model="analysisStore.url"
|
|
type="text"
|
|
placeholder="https://youtube.com/watch?v=..."
|
|
class="flex-1 bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
|
@keyup.enter="analyze"
|
|
/>
|
|
<button
|
|
@click="analyze"
|
|
:disabled="analysisStore.loading"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-medium transition-colors disabled:opacity-50 flex items-center gap-2 shrink-0"
|
|
>
|
|
<Loader2 v-if="analysisStore.loading" class="animate-spin w-5 h-5" />
|
|
<span v-else>Analyze</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mix Toggle -->
|
|
<div v-if="analysisStore.isMix" class="mt-4 flex items-center gap-3">
|
|
<button
|
|
@click="analysisStore.scanMix = !analysisStore.scanMix"
|
|
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out flex-shrink-0"
|
|
:class="analysisStore.scanMix ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
|
>
|
|
<span
|
|
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
|
:class="analysisStore.scanMix ? 'translate-x-6' : 'translate-x-0'"
|
|
/>
|
|
</button>
|
|
<span class="text-sm font-medium text-zinc-700 dark:text-gray-300">Scan Playlist (Max 20)</span>
|
|
</div>
|
|
|
|
<p v-if="analysisStore.error" class="mt-3 text-red-500 text-sm">{{ analysisStore.error }}</p>
|
|
</div>
|
|
|
|
<!-- Analysis Result -->
|
|
<div v-if="analysisStore.metadata" class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden mb-8">
|
|
<div class="p-6 flex flex-col md:flex-row gap-6">
|
|
<!-- Thumbnail -->
|
|
<img :src="analysisStore.metadata.thumbnail || '/placeholder.png'" class="w-full md:w-64 aspect-video object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
|
|
|
<!-- Details -->
|
|
<div class="flex-1">
|
|
<h2 class="text-xl font-bold text-zinc-900 dark:text-white line-clamp-2">{{ analysisStore.metadata.title }}</h2>
|
|
<p v-if="analysisStore.metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ analysisStore.metadata.uploader }}</p>
|
|
<p v-if="analysisStore.metadata.entries" class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} videos in playlist</p>
|
|
|
|
<!-- Options -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
|
|
<!-- Audio Only Toggle -->
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
|
|
<span class="font-medium text-sm">Audio Only</span>
|
|
<button
|
|
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
|
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
|
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
|
>
|
|
<span
|
|
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
|
|
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Quality Dropdown -->
|
|
<div class="relative">
|
|
<AppSelect
|
|
v-model="analysisStore.options.quality"
|
|
:options="qualityOptions"
|
|
:disabled="analysisStore.options.is_audio_only"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 py-4 bg-gray-50 dark:bg-zinc-800/50 border-t border-gray-200 dark:border-zinc-800 flex justify-end">
|
|
<button
|
|
@click="startDownload"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-colors shadow-lg shadow-blue-600/20"
|
|
>
|
|
Download Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Downloads -->
|
|
<div v-if="queueStore.tasks.length > 0">
|
|
<h3 class="text-lg font-bold mb-4">Active Downloads</h3>
|
|
<div class="space-y-3">
|
|
<!-- Reversed to show newest first -->
|
|
<div v-for="task in queueStore.tasks.slice().reverse()" :key="task.id" class="bg-white dark:bg-zinc-900 p-4 rounded-xl border border-gray-200 dark:border-zinc-800 flex items-center gap-4">
|
|
<img :src="task.thumbnail || '/placeholder.png'" class="w-16 h-16 object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex justify-between mb-1">
|
|
<h4 class="font-medium truncate pr-4">{{ task.title }}</h4>
|
|
<span class="text-xs font-mono text-gray-500 whitespace-nowrap">
|
|
{{ task.status === 'finished' ? 'Completed' : (task.status === 'error' ? 'Failed' : task.speed) }}
|
|
</span>
|
|
</div>
|
|
<div class="h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full transition-all duration-300"
|
|
:style="{ width: `${task.progress}%` }"
|
|
:class="task.status === 'error' ? 'bg-red-500' : (task.status === 'finished' ? 'bg-green-500' : 'bg-blue-600')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|