first
This commit is contained in:
Julian Freeman
208
src/views/Home.vue
Normal file
208
src/views/Home.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
// filepath: src/views/Home.vue
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { Loader2, ChevronDown } from 'lucide-vue-next'
|
||||
import { useQueueStore } from '../stores/queue'
|
||||
import { useSettingsStore } from '../stores/settings'
|
||||
|
||||
const queueStore = useQueueStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const url = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const metadata = ref<any>(null)
|
||||
|
||||
const options = ref({
|
||||
is_audio_only: false,
|
||||
quality: 'best',
|
||||
output_path: ''
|
||||
})
|
||||
|
||||
watch(() => settingsStore.settings.download_path, (newPath) => {
|
||||
if (newPath) options.value.output_path = newPath
|
||||
}, { immediate: true })
|
||||
|
||||
async function analyze() {
|
||||
if (!url.value) return
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
metadata.value = null
|
||||
|
||||
try {
|
||||
const res = await invoke('fetch_metadata', { url: url.value })
|
||||
// Handle playlist vs single video
|
||||
// For MVP, if playlist, just take the playlist info, or first entry?
|
||||
// The rust struct MetadataResult handles both.
|
||||
// Let's assume single video for simpler UI for now, or just show title.
|
||||
metadata.value = res
|
||||
// If it's a playlist, metadata might have 'entries'.
|
||||
// For now we treat it generically.
|
||||
} catch (e: any) {
|
||||
error.value = e.toString()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
if (!metadata.value) return
|
||||
|
||||
// Use settings path if options is empty
|
||||
if (!options.value.output_path) {
|
||||
options.value.output_path = settingsStore.settings.download_path
|
||||
}
|
||||
|
||||
try {
|
||||
// We need to pass metadata to backend to create history item immediately if we want,
|
||||
// but backend command signature is `start_download(app, url, options, metadata)`
|
||||
|
||||
// Prepare metadata object for the command
|
||||
// If it's a playlist, we might need to handle differently.
|
||||
// Let's assume simpler case: pass the main metadata object.
|
||||
|
||||
// Flatten metadata if it's a wrapper
|
||||
const metaToSend = metadata.value.entries ?
|
||||
{ title: metadata.value.title, thumbnail: "", id: metadata.value.id } : // Playlist
|
||||
metadata.value; // Video
|
||||
|
||||
const id = await invoke<string>('start_download', {
|
||||
url: url.value,
|
||||
options: options.value,
|
||||
metadata: metaToSend
|
||||
})
|
||||
|
||||
// Add to queue store immediately for UI
|
||||
queueStore.addTask({
|
||||
id,
|
||||
title: metaToSend.title,
|
||||
thumbnail: metaToSend.thumbnail,
|
||||
progress: 0,
|
||||
speed: 'Pending...',
|
||||
status: 'pending'
|
||||
})
|
||||
|
||||
// Reset
|
||||
url.value = ''
|
||||
metadata.value = null
|
||||
} catch (e: any) {
|
||||
error.value = "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="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="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="loading" class="animate-spin w-5 h-5" />
|
||||
<span v-else>Analyze</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="error" class="mt-3 text-red-500 text-sm">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Analysis Result -->
|
||||
<div v-if="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="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">{{ metadata.title }}</h2>
|
||||
<p v-if="metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ metadata.uploader }}</p>
|
||||
<p v-if="metadata.entries" class="text-blue-500 mt-1 font-medium">{{ 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="options.is_audio_only = !options.is_audio_only"
|
||||
class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
|
||||
:class="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="options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quality Dropdown -->
|
||||
<div class="relative">
|
||||
<select
|
||||
v-model="options.quality"
|
||||
class="w-full appearance-none 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"
|
||||
:disabled="options.is_audio_only"
|
||||
>
|
||||
<option value="best">Best Quality</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
<ChevronDown class="absolute right-4 top-3.5 w-5 h-5 text-gray-400 pointer-events-none" />
|
||||
</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>
|
||||
Reference in New Issue
Block a user