julian/stream-capture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keep analysis result

Browse Source
This commit is contained in:
Julian Freeman
2025-12-02 09:47:08 -04:00
parent 61e29dae1d
commit 826459746c
2 changed files with 70 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/stores/analysis.ts Normal file
View File

@@ -0,0 +1,28 @@
// filepath: src/stores/analysis.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useAnalysisStore = defineStore('analysis', () => {
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: ''
})
function reset() {
url.value = ''
loading.value = false
error.value = ''
metadata.value = null
// We keep options as is, or reset them?
// Usually keeping user preference for "Audio Only" is nice,
// but let's just reset the content-related stuff.
}
return { url, loading, error, metadata, options, reset }
})

113
src/views/Home.vue
View File

@@ -1,86 +1,58 @@
// filepath: src/views/Home.vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import { 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'
import { useAnalysisStore } from '../stores/analysis'
const queueStore = useQueueStore()
const settingsStore = useSettingsStore()
const analysisStore = useAnalysisStore()
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: ''
})
// Sync default download path if not set
watch(() => settingsStore.settings.download_path, (newPath) => {
if (newPath) options.value.output_path = newPath
if (newPath && !analysisStore.options.output_path) {
analysisStore.options.output_path = newPath
}
}, { immediate: true })
async function analyze() {
if (!url.value) return
loading.value = true
error.value = ''
metadata.value = null
if (!analysisStore.url) return
analysisStore.loading = true
analysisStore.error = ''
analysisStore.metadata = 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.
const res = await invoke('fetch_metadata', { url: analysisStore.url })
analysisStore.metadata = res
} catch (e: any) {
error.value = e.toString()
analysisStore.error = e.toString()
} finally {
loading.value = false
analysisStore.loading = false
}
}
async function startDownload() {
if (!metadata.value) return
if (!analysisStore.metadata) return
// Use settings path if options is empty
if (!options.value.output_path) {
options.value.output_path = settingsStore.settings.download_path
// Ensure path is set
if (!analysisStore.options.output_path) {
analysisStore.options.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 metaToSend = analysisStore.metadata.entries ?
{ title: analysisStore.metadata.title, thumbnail: "", id: analysisStore.metadata.id } :
analysisStore.metadata;
// Output template
// IMPORTANT: history item should store the directory, not the full template path
// The downloader handles the template appending internally.
// We need to pass the directory path to the command, which is what options.value.output_path holds.
// The downloader.rs logic appends the filename template.
const id = await invoke<string>('start_download', {
url: url.value,
options: options.value,
url: analysisStore.url,
options: analysisStore.options,
metadata: metaToSend
})
// Add to queue store immediately for UI
queueStore.addTask({
id,
title: metaToSend.title,
@@ -90,11 +62,10 @@ async function startDownload() {
status: 'pending'
})
// Reset
url.value = ''
metadata.value = null
// Reset state after successful download start
analysisStore.reset()
} catch (e: any) {
error.value = "Download failed to start: " + e.toString()
analysisStore.error = "Download failed to start: " + e.toString()
}
}
</script>
@@ -110,7 +81,7 @@ async function startDownload() {
<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"
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"
@@ -118,27 +89,27 @@ async function startDownload() {
/>
<button
@click="analyze"
:disabled="loading"
: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="loading" class="animate-spin w-5 h-5" />
<Loader2 v-if="analysisStore.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>
<p v-if="analysisStore.error" class="mt-3 text-red-500 text-sm">{{ analysisStore.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 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="metadata.thumbnail || '/placeholder.png'" class="w-full md:w-64 aspect-video object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
<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">{{ 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>
<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">
@@ -146,13 +117,13 @@ async function startDownload() {
<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"
@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="options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
: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="options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
:class="analysisStore.options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
/>
</button>
</div>
@@ -160,9 +131,9 @@ async function startDownload() {
<!-- Quality Dropdown -->
<div class="relative">
<select
v-model="options.quality"
v-model="analysisStore.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"
:disabled="analysisStore.options.is_audio_only"
>
<option value="best">Best Quality</option>
<option value="1080">1080p</option>
@@ -212,4 +183,4 @@ async function startDownload() {
</div>
</div>
</template>
</template>