feat: refactor player with state management

refactor(wip): playlist cache store
feat: added waveform component
feat: add config throttle

Author: hexadecimal233

README.md

@@ -73,5 +73,5 @@ Pull Requests: [Pull Requests](https://github.com/hexadecimal233/cloudie/pulls)
 - [ ] Scrobbling support
 - [ ] DJ Support
 - [ ] OEmbed Support 
-
+- [ ] Lyrics service
 -->

package.json

@@ -28,6 +28,7 @@
     "buffer": "^6.0.3",
     "drizzle-orm": "^0.44.6",
     "hls.js": "^1.6.13",
+    "pinia": "^3.0.4",
     "tailwindcss": "^4.1.13",
     "vue": "^3.5.13",
     "vue-final-modal": "^4.5.5",

pnpm-lock.yaml

@@ -10,10 +10,7 @@
 
           <div class="mx-4 flex items-center gap-2">
             <template v-if="!loading">
-              <img
-                :src="userInfo.avatar_url"
-                alt="user"
-                class="skeleton size-12 rounded-full object-contain ring" />
+              <img :src="userInfo.avatar_url" alt="user" class="skeleton size-12 rounded-full object-contain ring" />
               <div class="text-lg font-bold">{{ userInfo.username }}</div>
             </template>
 
@@ -83,15 +80,13 @@
             <button class="btn join-item" @click="$router.back()">
               <i-mdi-chevron-left />
             </button>
-            <input
-              type="text"
-              :placeholder="$t('cloudie.main.searchBar')"
+            <input type="text" :placeholder="$t('cloudie.main.searchBar')"
               class="input input-bordered join-item w-1/4" />
           </div>
           <div class="flex flex-col py-8">
             <span class="mb-4 text-3xl font-bold">
               <template v-if="$route.path !== '/'">
-                {{ $t(`cloudie.main.${$route.path.slice(1)}`) }}
+                {{ getPageTitle() }}
               </template>
             </span>
             <router-view v-slot="{ Component }">
@@ -111,13 +106,17 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
+import { useRoute } from "vue-router"
+import { useI18n } from "vue-i18n"
 import { BasicUserInfo, updateUserInfo, userInfo } from "@/utils/api"
 import { Toaster } from "vue-sonner"
 import { ModalsContainer } from "vue-final-modal"
 import "vue-sonner/style.css"
 import "vue-final-modal/style.css"
 import AudioPlayer from "./components/AudioPlayer.vue"
 
+const route = useRoute()
+const i18n = useI18n()
 const user = ref<BasicUserInfo>()
 const loading = ref(true)
 
@@ -126,4 +125,13 @@ onMounted(async () => {
   user.value = userInfo.value
   loading.value = false
 })
+
+function getPageTitle() {
+  const path = route.path
+  const pathSegments = path.split("/").filter(Boolean)
+
+  // Handle dynamic routes by using only the first segment (e.g., /playlist/:id)
+  const firstSegment = pathSegments[0]
+  return i18n.t(`cloudie.main.${firstSegment}`)
+}
 </script>

src/App.vue

@@ -5,6 +5,7 @@
       "searchBar": "Search (unimplemented yet)",
       "likes": "Likes",
       "playlists": "Playlists & Albums",
+      "playlist": "Playlist",
       "radio": "Radio",
       "history": "Play History",
       "downloads": "Downloads",