keep analysis result

src/stores/analysis.ts

@@ -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 }
+})

src/views/Home.vue

@@ -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('')
+// Sync default download path if not set
-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
+    if (newPath && !analysisStore.options.output_path) {
+      analysisStore.options.output_path = newPath
+    }
 }, { immediate: true })
 
 async function analyze() {
-  if (!url.value) return
+  if (!analysisStore.url) return
-  loading.value = true
+  analysisStore.loading = true
-  error.value = ''
+  analysisStore.error = ''
-  metadata.value = null
+  analysisStore.metadata = null
   
   try {
-    const res = await invoke('fetch_metadata', { url: url.value })
+    const res = await invoke('fetch_metadata', { url: analysisStore.url })
-    // Handle playlist vs single video
+    analysisStore.metadata = res
-    // 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()
+    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
+  // Ensure path is set
-  if (!options.value.output_path) {
+  if (!analysisStore.options.output_path) {
-      options.value.output_path = settingsStore.settings.download_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, 
+      const metaToSend = analysisStore.metadata.entries ? 
-      // but backend command signature is `start_download(app, url, options, metadata)`
+         { title: analysisStore.metadata.title, thumbnail: "", id: analysisStore.metadata.id } : 
-      
+         analysisStore.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
 
-    // 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,
+        url: analysisStore.url,
-        options: options.value,
+        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
+      // Reset state after successful download start
-      url.value = ''
+      analysisStore.reset()
-      metadata.value = null
   } 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>
+          <h2 class="text-xl font-bold text-zinc-900 dark:text-white line-clamp-2">{{ analysisStore.metadata.title }}</h2>
-          <p v-if="metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ metadata.uploader }}</p>
+          <p v-if="analysisStore.metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ analysisStore.metadata.uploader }}</p>
-          <p v-if="metadata.entries" class="text-blue-500 mt-1 font-medium">{{ metadata.entries.length }} videos in playlist</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>