Downloader improvement and fixes

src/App.vue

@@ -23,8 +23,10 @@ import { appWindow } from '@tauri-apps/api/window'
 import { invoke } from '@tauri-apps/api/tauri'
 import { ModalsContainer } from 'vue-final-modal'
 import { useGlobalState } from './composables/global-state'
+import { useDownloader } from '@/composables/downloader.js'
 
 const { themeMode, setThemeMode } = useGlobalState()
+const { downloadNext } = useDownloader()
 
 const loading = ref(true)
 const init = ref(false)
@@ -41,6 +43,7 @@ onMounted(async () => {
   init.value = await invoke('get_init')
   loading.value = false
   darkModeHandle()
+  downloadNext()
 })
 
 const darkModeHandle = async () => {

src/components/library/DownloadViewer.vue

@@ -4,7 +4,7 @@
     @close="checkAndClose"
     content-class="w-full h-[80vh] max-w-screen-md"
     body-class="flex flex-col h-full min-h-0 justify-between gap-6"
-    :title="downloadedCount === totalCount ? 'Downloaded' : 'Downloading'"
+    :title="isFinished ? 'Downloaded' : 'Downloading'"
   >
     <div class="flex flex-col items-center justify-center gap-1">
       <div class="w-full bg-brave-95 h-1 rounded">
@@ -29,7 +29,7 @@
 
     <template #footer>
       <div class="flex-none flex justify-center">
-        <button v-if="finishable" class="button button-primary px-8 py-2 rounded-full" @click="checkAndClose">Finish</button>
+        <button v-if="isFinished" class="button button-primary px-8 py-2 rounded-full" @click="checkAndClose">Finish</button>
         <button v-else class="button button-normal px-8 py-2 rounded-full" @click="handleStop">Stop</button>
       </div>
     </template>
@@ -59,11 +59,15 @@ const progressWidth = computed(() => {
     return '100%'
   }
 
+  if (downloadProgress.value > 1.0) {
+    return '100%'
+  }
+
   return `${downloadProgress.value * 100}%`
 })
 
-const finishable = computed(() => {
-  return downloadedCount.value === totalCount.value
+const isFinished = computed(() => {
+  return downloadedCount.value >= totalCount.value
 })
 
 const handleStop = () => {
@@ -72,7 +76,7 @@ const handleStop = () => {
 }
 
 const checkAndClose = () => {
-  if (finishable.value) {
+  if (isFinished.value) {
     startOver()
     emit('close')
   } else {

src/components/library/track-list/TrackItem.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="flex w-full group hover:bg-brave-98 hover:shadow hover:shadow-brave-95/50
-    border border-transparent hover:border-brave-95 transition rounded cursor-default
-    dark:hover:bg-brave-5 dark:hover:border-brave-20 dark:hover:shadow-brave-30/50"
+    border hover:border-brave-95 transition rounded cursor-default
+    dark:hover:bg-brave-10 dark:hover:border-brave-20 dark:hover:shadow-brave-30/50"
     :class="{
-      'border-brave-95 bg-brave-99 dark:border-brave-20 dark:bg-brave-5': isPlaying
+      'border-brave-95 bg-brave-99 dark:border-brave-20 dark:bg-brave-5': isPlaying,
+      'border-transparent': !isPlaying
       }"
   >
     <!-- Track number -->
     <div
       v-if="isShowTrackNumber"
-      class="flex-none w-[5%] flex items-center justify-end p-1 pr-2 text-xs text-brave-30/70 dark:text-brave-95 font-bold"
+      class="flex-none w-[5%] flex items-center justify-end p-1 pr-2 text-xs text-brave-30/70 dark:text-brave-99 font-bold"
     >
       <div v-if="track && track.track_number">{{ track.track_number }}</div>
       <div v-else>--</div>
@@ -24,9 +25,9 @@
         </div>
 
         <div class="gap-2 line-clamp-1">
-          <span class="text-sm text-brave-20 group-hover:text-brave-15 transition dark:text-brave-90 dark:group-hover:text-brave-90">{{ track.album_name }}</span>
-          <span class="text-brave-80 h-full mx-1 flex-none dark:text-white/50">|</span>
-          <span class="text-sm text-brave-20 group-hover:text-brave-15 transition dark:text-brave-90 dark:group-hover:text-brave-90">{{ track.artist_name }}</span>
+          <span class="text-sm text-brave-30 transition dark:text-brave-90">{{ track.album_name }}</span>
+          <span class="text-brave-30 h-full mx-1 flex-none dark:text-brave-90">|</span>
+          <span class="text-sm text-brave-30 transition dark:text-brave-90">{{ track.artist_name }}</span>
         </div>
       </div>
     </div>
@@ -48,11 +49,11 @@
     <!-- Action buttons -->
     <div class="flex-none w-[15%] h-full flex justify-end items-center p-1">
       <div v-if="track" class="flex justify-end items-center gap-1">
-        <button v-if="isPlaying && status ==='playing'" @click.prevent="pause" class="track-button"><Pause /></button>
-        <button v-else-if="isPlaying && status === 'stopped'" @click.prevent="playTrack(track)" class="track-button"><Replay /></button>
-        <button v-else v-on="isPlaying ? {click: resume} : {click: () => playTrack(track)}" class="track-button"><Play /></button>
-        <button class="track-button" @click.prevent="searchLyrics(track)"><TextSearch /></button>
-        <button class="track-button" @click.prevent="editLyrics(track)"><PlaylistEdit /></button>
+        <button v-if="isPlaying && status ==='playing'" @click="pause" class="track-button"><Pause /></button>
+        <button v-else-if="isPlaying && status === 'stopped'" @click="playTrack(track)" class="track-button"><Replay /></button>
+        <button v-else @click="isPlaying ? resume() : playTrack(track)" class="track-button"><Play /></button>
+        <button class="track-button" @click="searchLyrics(track)"><TextSearch /></button>
+        <button class="track-button" @click="editLyrics(track)"><PlaylistEdit /></button>
       </div>
     </div>
   </div>

src/composables/downloader.js

@@ -1,11 +1,12 @@
 import { computed, ref } from 'vue'
 import { invoke } from '@tauri-apps/api/tauri'
 
+const delay = (time) => new Promise((resolve, reject) => setTimeout(resolve, time))
+
 const downloadQueue = ref([])
 const downloadedItems = ref([])
 const currentItem = ref(null)
 const log = ref([])
-const queueResolved = ref(false)
 const successCount = ref(0)
 const failureCount = ref(0)
 const isDownloading = ref(false)
@@ -25,9 +26,18 @@ const addLog = (logObj) => {
 const downloadLyrics = async (track) => {
   try {
     const result = await invoke('download_lyrics', { trackId: track.id })
+
+    if (!isDownloading.value) {
+      return
+    }
+
     addLog({ status: 'success', title: track.title, artistName: track.artist_name, message: result })
     successCount.value++
   } catch (error) {
+    if (!isDownloading.value) {
+      return
+    }
+
     addLog({ status: 'failure', title: track.title, artistName: track.artist_name, message: error })
     failureCount.value++
   }
@@ -37,18 +47,26 @@ const downloadLyrics = async (track) => {
 }
 
 const downloadNext = async () => {
-  while (downloadQueue.value.length > 0) {
+  while (true) {
+    if (downloadQueue.value.length === 0) {
+      await delay(1000)
+      continue
+    }
+
     const trackId = downloadQueue.value.shift()
     const track = await invoke('get_track', { trackId: trackId })
     currentItem.value = track
     await downloadLyrics(track)
   }
-  queueResolved.value = true
 }
 
 const downloadProgress = computed(() => {
   if (!downloadQueue.value) {
-    return 100.0
+    return 0.0
+  }
+
+  if (downloadedCount.value >= totalCount.value) {
+    return 1.0
   }
 
   return downloadedCount.value / totalCount.value
@@ -64,17 +82,9 @@ const addToQueue = (trackIds) => {
   totalCount.value += trackIds.length
 
   console.log(`Added ${totalCount.value} tracks to download queue`)
-
-  // Defer the call to downloadNext using setTimeout
-  if (!currentItem.value) {
-    setTimeout(() => {
-      downloadNext()
-    }, 0)
-  }
 }
 
 const startOver = () => {
-  queueResolved.value = false
   downloadedItems.value = []
   log.value = []
   successCount.value = 0
@@ -85,7 +95,6 @@ const startOver = () => {
 
 const stopDownloading = () => {
   downloadQueue.value = []
-  queueResolved.value = false
   downloadedItems.value = []
   log.value = []
   successCount.value = 0
@@ -104,9 +113,10 @@ export function useDownloader() {
     failureCount,
     totalCount,
     downloadedCount,
+    log,
     addToQueue,
     startOver,
     stopDownloading,
-    log
+    downloadNext,
   }
 }

src/style.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply bg-brave-95;
+  @apply bg-brave-95 cursor-default;
 }
 
 .titlebar {
@@ -213,7 +213,7 @@ body {
 }
 
 .codemirror-custom .cm-editor {
-  @apply outline-none h-full;
+  @apply outline-none h-full cursor-text;
 }
 
 .codemirror-custom .cm-cursor {