feat: enhance download functionality and improve UI components

Author: hexadecimal233

src/assets/i18n/en.json

@@ -26,7 +26,8 @@
       "artist": "Artist",
       "addedTime": "Added Time",
       "origFileName": "Original File Name",
-      "status": "Status"
+      "status": "Status",
+      "tag": "Applying Metadata"
     },
     "trackList": {
       "downloadSelected": "Download Selected",
@@ -41,7 +42,8 @@
       "geoRestrict": "Geo",
       "premium": "Premium",
       "source": "1 Source | {count} Sources",
-      "noGenre": "No Genre"
+      "noGenre": "No Genre",
+      "freeDL": "Free DLs"
     },
     "playlists": {
       "playlist": "Playlist",

src/assets/i18n/zh-CN.json

@@ -26,7 +26,8 @@
       "artist": "艺术家",
       "addedTime": "添加时间",
       "origFileName": "原文件名",
-      "status": "状态"
+      "status": "状态",
+      "tag": "添加音频元数据"
     },
     "trackList": {
       "downloadSelected": "下载选中",
@@ -41,7 +42,8 @@
       "geoRestrict": "地区限制",
       "premium": "会员专属",
       "source": "{count} 轨",
-      "noGenre": "无流派"
+      "noGenre": "无流派",
+      "freeDL": "免费下载"
     },
     "playlists": {
       "playlist": "歌单",

src/assets/i18n/zh-TW.json

@@ -41,7 +41,8 @@
       "geoRestrict": "地區限制",
       "premium": "會員專屬",
       "source": "{count} 軌",
-      "noGenre": "無流派"
+      "noGenre": "無流派",
+      "freeDL": "免費下載"
     },
     "playlists": {
       "playlist": "歌單",
@@ -59,7 +60,8 @@
       "deleteLocalFiles": "刪除本地檔案",
       "keepLocalFiles": "保留本地檔案",
       "cancel": "取消",
-      "close": "關閉"
+      "close": "關閉",
+      "tag": "添加元數據"
     },
     "common": {
       "loading": "載入中...",

src/components/PlaylistList.vue

@@ -16,13 +16,13 @@
         @click="open(item)"
         :title="item.playlist?.title ?? item.system_playlist!.title"
         class="bg-base-200 rounded-box flex flex-col gap-1 overflow-hidden outline transition-all hover:-translate-y-1 hover:cursor-pointer hover:opacity-70">
-        <div class="bg-base-300 relative w-full aspect-square">
+        <div class="bg-base-300 relative aspect-square w-full">
           <img
             v-if="getImageUrl(item).value"
             :src="getImageUrl(item).value"
             alt="cover"
             class="h-full w-full object-cover" />
-          <div v-else class="skeleton rounded-none h-full w-full absolute inset-0"></div>
+          <div v-else class="skeleton absolute inset-0 h-full w-full rounded-none"></div>
         </div>
         <div class="flex flex-col p-3">
           <div class="text-base-content truncate font-bold">
@@ -52,12 +52,9 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { replaceImageUrl } from "../utils/utils"
-import { toast } from "vue-sonner"
-import { PlaylistLike, Track } from "@/utils/types"
-import { i18n } from "@/systems/i18n"
+import { PlaylistLike } from "@/utils/types"
 import TracklistModal from "./modals/TracklistModal.vue"
 import { useModal } from "vue-final-modal"
-import { fetchPlaylistUpdates, getPlaylist, savePlaylist } from "@/systems/cache"
 
 const props = defineProps<{
   items: PlaylistLike[]
@@ -66,36 +63,17 @@ const props = defineProps<{
 
 // TODO: 可视化加载
 async function open(likeResp: PlaylistLike) {
-  let playlistId = likeResp.playlist ? likeResp.playlist.id : likeResp.system_playlist.id
-
-  try {
-    let currentPlaylist = await getPlaylist(playlistId)
-    if (!currentPlaylist) {
-      currentPlaylist = await fetchPlaylistUpdates(likeResp)
-    }
-
-    const { open, close } = useModal({
-      component: TracklistModal,
-      attrs: {
-        tracks: currentPlaylist!.tracks as Track[],
-        currentResponse: likeResp,
-        shouldAutoUpdate: !currentPlaylist,
-        onClose() {
-          close()
-        },
+  const { open, close } = useModal({
+    component: TracklistModal,
+    attrs: {
+      currentResp: likeResp,
+      onClose() {
+        close()
       },
-    })
-
-    open()
+    },
+  })
 
-    savePlaylist(currentPlaylist)
-  } catch (err: any) {
-    console.error("PlaylistList open error:", err)
-    toast.error(i18n.global.t("cloudie.toasts.playlistOpenFailed"), {
-      description: err.message,
-    })
-    return
-  }
+  open()
 }
 
 function getImageUrl(item: PlaylistLike) {
@@ -109,7 +87,7 @@ function getImageUrl(item: PlaylistLike) {
 
     if (!artworkUrl) return ""
 
-    return replaceImageUrl(artworkUrl, 200)
+    return replaceImageUrl(artworkUrl)
   })
 }
 </script>

src/components/TrackList.vue

@@ -118,13 +118,15 @@
                   })
                 }}
               </div>
-              <!-- 未知：MONETIZE-->
             </div>
           </td>
 
           <td>
-            <div class="flex">
-              <button class="btn btn-ghost btn-sm" @click="download(item)">
+            <div class="flex justify-center">
+              <div
+                v-if="getDownloadTask(item).value?.downloadingState"
+                class="loading loading-spinner loading-md"></div>
+              <button v-else class="btn btn-ghost btn-sm" @click="download(item)">
                 <i-mdi-download />
               </button>
               <a class="btn btn-ghost btn-sm" :href="item.permalink_url" target="_blank">
@@ -154,18 +156,37 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, useTemplateRef } from "vue"
-import { formatMillis, getArtist, getCoverUrl } from "../utils/utils"
-import { addDownloadTask } from "../systems/download/download"
+import { formatMillis, getArtist, getCoverUrl } from "@/utils/utils"
+import { addDownloadTask, downloadTasks } from "@/systems/download/download"
 import { LikedPlaylist, PlaylistLike, Track } from "@/utils/types"
 import { useInfiniteScroll } from "@vueuse/core"
 
-// 音乐显示
-
 const selectedIds = ref<number[]>([])
 const freeFilter = ref(false)
 const searchQuery = ref("")
 const selectedGenres = ref<(string | null)[]>([]) // TODO: 获取tag_list
-const scrollContainer = useTemplateRef<HTMLDivElement>("scrollContainer")
+const scrollContainer = useTemplateRef<HTMLDivElement>("scrollContainer") // TODO: fix virtual scroll
+
+const props = defineProps<{
+  tracks: Track[]
+  playlistResponse?: PlaylistLike
+  scrollCallbacks?: { canLoadMore: () => boolean; onTrigger: () => void }
+}>()
+
+onMounted(() => {
+  if (props.scrollCallbacks) {
+    useInfiniteScroll(scrollContainer.value, props.scrollCallbacks.onTrigger, {
+      distance: 10,
+      canLoadMore: props.scrollCallbacks?.canLoadMore,
+    })
+  }
+})
+
+function getDownloadTask(item: Track) {
+  return computed(() => {
+    return downloadTasks.value.find((t) => t.task.trackId === item.id)
+  })
+}
 
 const filteredItems = computed(() => {
   let items = props.tracks
@@ -276,21 +297,6 @@ function isPossibleFreeDownload(track: Track) {
 
   return isFreeDownload
 }
-
-const props = defineProps<{
-  tracks: Track[]
-  playlistResponse?: PlaylistLike
-  scrollCallbacks?: { canLoadMore: () => boolean; onTrigger: () => void }
-}>()
-
-onMounted(() => {
-  if (props.scrollCallbacks) {
-    useInfiniteScroll(scrollContainer.value, props.scrollCallbacks.onTrigger, {
-      distance: 10,
-      canLoadMore: props.scrollCallbacks?.canLoadMore,
-    })
-  }
-})
 </script>
 
 <style scoped>

src/components/modals/TracklistModal.vue

@@ -3,12 +3,23 @@
     class="flex items-center justify-center"
     overlay-transition="vfm-fade"
     content-transition="vfm-fade"
-    content-class="max-w-screen modal-box opacity-100">
-    <div v-if="currentResponse" class="text-xl">
-      {{ currentResponse.playlist?.title || currentResponse.system_playlist?.title }}
+    content-class="max-w-screen modal-box opacity-100 ">
+    <div v-if="currentResp" class="text-xl">
+      {{ currentResp.playlist?.title || currentResp.system_playlist?.title }}
     </div>
     <div>
-      <TrackList :tracks="tracks" :playlist-response="currentResponse" />
+      <TrackList :tracks="tracks" :playlist-response="currentResp">
+        <template #bottom>
+          <template v-if="loading">
+            <div class="loading loading-spinner loading-lg"></div>
+            <span class="ml-2">{{ $t("cloudie.common.loading") }}</span>
+          </template>
+
+          <template v-else>
+            <span class="ml-2">{{ $t("cloudie.common.noMore") }}</span>
+          </template>
+        </template>
+      </TrackList>
     </div>
     <div class="modal-action">
       <button class="btn" @click="emit('close')">{{ $t("cloudie.toasts.close") }}</button>
@@ -22,30 +33,55 @@ import TrackList from "../TrackList.vue"
 import { Playlist, PlaylistLike, SystemPlaylist, Track } from "@/utils/types"
 import { onMounted, ref } from "vue"
 import { fetchPlaylistUpdates } from "@/systems/cache"
+import { getPlaylist } from "@/systems/cache"
+import { toast } from "vue-sonner"
+import { i18n } from "@/systems/i18n"
+import { savePlaylist } from "@/systems/cache"
 
 const props = defineProps<{
-  tracks: Track[]
-  currentResponse: PlaylistLike
-  shouldAutoUpdate: boolean
+  currentResp: PlaylistLike
 }>()
 
-const playlistRef = ref(props.currentResponse)
-
-onMounted(() => {
-  if (props.shouldAutoUpdate) {
-    // Reactively update playtlist meta
-    fetchPlaylistUpdates(
-      props.currentResponse,
-      (props.currentResponse.playlist ?? props.currentResponse.system_playlist).tracks!.map(
-        (t) => t.id,
-      ),
-    ).then((playlist) => {
-      if (playlistRef.value.system_playlist) {
-        playlistRef.value.system_playlist = playlist as SystemPlaylist
-      } else {
-        playlistRef.value.playlist = playlist as Playlist
-      }
+const playlistRef = ref(props.currentResp)
+const loading = ref(true)
+const tracks = ref<Track[]>([])
+
+onMounted(async () => {
+  let playlistId = props.currentResp.playlist
+    ? props.currentResp.playlist.id
+    : props.currentResp.system_playlist.id
+
+  try {
+    let currentPlaylist = await getPlaylist(playlistId)
+    const newCreatedPlaylist = !currentPlaylist
+    if (newCreatedPlaylist) {
+      currentPlaylist = await fetchPlaylistUpdates(props.currentResp)
+    }
+
+    tracks.value = currentPlaylist!.tracks as Track[]
+    loading.value = false
+
+    await savePlaylist(currentPlaylist)
+
+    if (!newCreatedPlaylist) {
+      // Reactively update playtlist meta
+      fetchPlaylistUpdates(
+        props.currentResp,
+        (props.currentResp.playlist ?? props.currentResp.system_playlist).tracks!.map((t) => t.id), // FIXME: Undefinded???
+      ).then((playlist) => {
+        if (playlistRef.value.system_playlist) {
+          playlistRef.value.system_playlist = playlist as SystemPlaylist
+        } else {
+          playlistRef.value.playlist = playlist as Playlist
+        }
+      })
+    }
+  } catch (err: any) {
+    console.error("PlaylistList open error:", err)
+    toast.error(i18n.global.t("cloudie.toasts.playlistOpenFailed"), {
+      description: err.message,
     })
+    return
   }
 })
 

src/systems/download/download.ts

@@ -4,7 +4,7 @@
 
 import { ref } from "vue"
 import { config } from "@/systems/config"
-import { getArtist, getCoverUrl } from "@/utils/utils"
+import { getArtist, getCoverUrl, replaceImageUrl } from "@/utils/utils"
 import { db } from "@/systems/db"
 import * as schema from "@/systems/db/schema"
 import { desc, DrizzleQueryError, eq, inArray } from "drizzle-orm"
@@ -75,7 +75,7 @@ export class DownloadTask {
 
 class DownloadStat {
   progress: number = 0 // from 0 to 1
-  name: "pending" | "getinfo" | "downloading" = "pending"
+  name: "pending" | "getinfo" | "downloading" | "tag" = "pending"
 }
 
 class DownloadDetail {
@@ -219,27 +219,28 @@ async function runTask(task: DownloadTask) {
       task.downloadingState!.progress = progress
     })
 
-    task.setPath(response.path)
-    task.setOrigFileName(response.origFileName)
+    await task.setPath(response.path)
+    await task.setOrigFileName(response.origFileName)
 
     try {
+      task.downloadingState.name = "tag"
       await invoke("add_tags", {
         filePath: task.task.path,
         title: task.details.title,
         album: task.details.playlistName,
         artist: task.details.artist,
-        coverUrl: config.value.addCover ? task.details.coverUrl : undefined,
+        coverUrl: config.value.addCover ? replaceImageUrl(task.details.coverUrl, "1080x1080") : undefined,
       })
     } catch (error) {
       console.error(`Error adding tags to ${task.task.path}，Ignoring tags...`, error)
     }
 
-    task.setStatus("completed")
+    await task.setStatus("completed")
     task.downloadingState = undefined
     console.debug(task.task.status, task)
   } catch (err) {
     console.error("Download failed: ", err)
-    task.setStatus("failed")
+    await task.setStatus("failed")
     task.failedReason = err as string
     task.downloadingState = undefined
   }