368 lines
16 KiB
Vue
368 lines
16 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<any>('fetch_metadata', { url: urlToScan, parseMixPlaylist: parseMix })
|
|
|
|
// Initialize selected state for playlist entries
|
|
if (res.entries) {
|
|
res.entries = res.entries.map((e: any) => ({ ...e, selected: true }))
|
|
}
|
|
|
|
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 {
|
|
if (analysisStore.metadata.entries) {
|
|
// Playlist Download
|
|
const selectedEntries = analysisStore.metadata.entries.filter((e: any) => e.selected)
|
|
|
|
if (selectedEntries.length === 0) {
|
|
analysisStore.error = "Please select at least one video to download."
|
|
return
|
|
}
|
|
|
|
for (const entry of selectedEntries) {
|
|
const videoUrl = `https://www.youtube.com/watch?v=${entry.id}`
|
|
const id = await invoke<string>('start_download', {
|
|
url: videoUrl,
|
|
options: analysisStore.options,
|
|
metadata: entry // Pass the individual video metadata
|
|
})
|
|
|
|
queueStore.addTask({
|
|
id,
|
|
title: entry.title,
|
|
thumbnail: entry.thumbnail,
|
|
progress: 0,
|
|
speed: 'Pending...',
|
|
status: 'pending'
|
|
})
|
|
}
|
|
} else {
|
|
// Single Video Download
|
|
let urlToDownload = analysisStore.url;
|
|
// Clean URL if it was a mix but we didn't scan it as one
|
|
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: analysisStore.metadata
|
|
})
|
|
|
|
queueStore.addTask({
|
|
id,
|
|
title: analysisStore.metadata.title,
|
|
thumbnail: analysisStore.metadata.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">
|
|
|
|
<!-- Playlist Header / Global Controls -->
|
|
<div v-if="analysisStore.metadata.entries" class="p-6 border-b border-gray-200 dark:border-zinc-800">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-zinc-900 dark:text-white">{{ analysisStore.metadata.title }}</h2>
|
|
<p class="text-blue-500 mt-1 font-medium">{{ analysisStore.metadata.entries.length }} videos found</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Options Bar -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-4 bg-gray-50 dark:bg-zinc-800/50 p-4 rounded-xl">
|
|
|
|
<!-- Left: Selection Controls -->
|
|
<div class="flex items-center gap-2 w-full md:w-auto">
|
|
<button @click="analysisStore.setAllEntries(true)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">All</button>
|
|
<button @click="analysisStore.setAllEntries(false)" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">None</button>
|
|
<button @click="analysisStore.invertSelection()" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-600 text-zinc-700 dark:text-gray-200 border border-gray-200 dark:border-zinc-600 transition-colors shadow-sm">Invert</button>
|
|
</div>
|
|
|
|
<!-- Right: Settings -->
|
|
<div class="flex items-center gap-6 w-full md:w-auto justify-end">
|
|
<!-- Audio Only Toggle -->
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Audio Only</span>
|
|
<button
|
|
@click="analysisStore.options.is_audio_only = !analysisStore.options.is_audio_only"
|
|
class="w-10 h-5 rounded-full relative transition-colors duration-200 ease-in-out shrink-0"
|
|
:class="analysisStore.options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
|
|
>
|
|
<span
|
|
class="absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform duration-200"
|
|
:class="analysisStore.options.is_audio_only ? 'translate-x-5' : 'translate-x-0'"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Quality Dropdown -->
|
|
<div class="flex items-center gap-3">
|
|
<span class="font-medium text-sm text-zinc-700 dark:text-gray-300">Quality</span>
|
|
<div class="w-44">
|
|
<AppSelect
|
|
v-model="analysisStore.options.quality"
|
|
:options="qualityOptions"
|
|
:disabled="analysisStore.options.is_audio_only"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video List (Playlist Mode) -->
|
|
<div v-if="analysisStore.metadata.entries" class="max-h-[500px] overflow-y-auto p-2 space-y-2 bg-gray-50/50 dark:bg-black/20">
|
|
<div
|
|
v-for="entry in analysisStore.metadata.entries"
|
|
:key="entry.id"
|
|
class="flex items-center gap-4 p-3 rounded-xl hover:bg-white dark:hover:bg-zinc-800 transition-colors border border-transparent hover:border-gray-200 dark:hover:border-zinc-700 group"
|
|
:class="entry.selected ? 'opacity-100' : 'opacity-60 grayscale'"
|
|
>
|
|
<!-- Checkbox -->
|
|
<button
|
|
@click="entry.selected = !entry.selected"
|
|
class="w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-colors shrink-0"
|
|
:class="entry.selected ? 'bg-blue-600 border-blue-600 text-white' : 'border-gray-300 dark:border-zinc-600 hover:border-blue-400'"
|
|
>
|
|
<svg v-if="entry.selected" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Thumb -->
|
|
<img :src="entry.thumbnail || '/placeholder.png'" class="w-24 h-14 object-cover rounded-lg bg-gray-200 dark:bg-zinc-700 shrink-0" />
|
|
|
|
<!-- Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="font-medium text-zinc-900 dark:text-white truncate text-sm" :title="entry.title">{{ entry.title }}</h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
|
{{ entry.duration ? Math.floor(entry.duration / 60) + ':' + String(Math.floor(entry.duration % 60)).padStart(2, '0') : '' }}
|
|
<span v-if="entry.uploader" class="mx-1">•</span> {{ entry.uploader }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Single Video Layout -->
|
|
<div v-else 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>
|
|
|
|
<!-- 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 {{ analysisStore.metadata.entries ? `(${analysisStore.metadata.entries.filter((e: any) => e.selected).length})` : '' }}
|
|
</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>
|