FEAT: refactor code

pages/compilations/[id].vue

@@ -17,7 +17,7 @@
           {{ track.title }}
         </span>
         <span class="hidden lg:block">
-          {{ store.getArtistById(track.artist).name }}
+          {{ getArtistName(track.artist) }}
         </span>
       </button>
     </nav>
@@ -35,9 +35,9 @@
               {{ currentTrack.title }}
             </h3>
           </a>
-          <a :href="store.getArtistById(currentTrack.artist).url" target="_blank" rel="noopener noreferrer">
+          <a v-if="currentArtist" :href="currentArtist.url" target="_blank" rel="noopener noreferrer">
             <h2 class="font-bold text-6xl text-esyellow">
-              {{ store.getArtistById(currentTrack.artist).name }}
+              {{ currentArtist.name }}
             </h2>
           </a>
           <h4 class="text-xl text-slate-200">
@@ -48,9 +48,9 @@
 
       <p class="block mt-10">
         see artist page:<br>
-        <a target="_blank" class="underline text-orange-500 hover:text-orange-400"
-          :href="store.getArtistById(currentTrack.artist).url">
-          {{ store.getArtistById(currentTrack.artist).name }}
+        <a v-if="currentArtist" target="_blank" class="underline text-orange-500 hover:text-orange-400"
+          :href="currentArtist.url">
+          {{ currentArtist.name }}
         </a><br>
         purchase the track:<br>
         <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentTrack.url">
@@ -71,19 +71,21 @@ const tracks = ref()
 const mixPlayer = ref()
 const videoSD = ref()
 const currentTrack = ref()
-
-const currentArtist = computed(() => {
-  currentTrack
-})
-
 const { isLoaded } = storeToRefs(store)
+const currentArtist = computed(() => {
+  return store.getArtistById(currentTrack.value.artist)
+})
+const getArtistName = (id: number) => {
+  return store.getArtistById(id)?.name
+}
+
+// LOAD DATAs
 
 onMounted(() => {
-  loadCompilation()
+  loadCompilation() // if user arrive directly on compilation page
 })
-
 watch(isLoaded, () => {
-  loadCompilation()
+  loadCompilation() // if the user came from another page
 })
 
 const watchPlayingTrack = () => {
@@ -99,9 +101,9 @@ const watchPlayingTrack = () => {
 
 const loadCompilation = () => {
   if (isLoaded.value) {
-    compilation.value = store.getCompilationById(route.params.id)
-    tracks.value = store.getTracksByCompilationId(route.params.id)
-    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-HD.mp4'
+    compilation.value = store.getCompilationById(route.params.id as string)
+    tracks.value = store.getTracksByCompilationId(route.params.id as string)
+    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-SD.mp4'
     mixPlayer.value.load()
     mixPlayer.value.play()
     mixPlayer.value.focus()
@@ -109,7 +111,7 @@ const loadCompilation = () => {
   }
 }
 
-const listenTo = (start) => {
+const listenTo = (start: number) => {
   mixPlayer.value.currentTime = start
   mixPlayer.value.play()
 }

pages/index.vue

@@ -9,7 +9,7 @@
         <a href="/about">❓</a>
       </nav>
     </div>
-    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
+    <section class="splash-screen flex items-center flex-col">
       <figure class="ui">
         <img class="logo" src="/logo.svg">
         <h1 class="text-white pt-6 text-sm md:text-md lg:text-lg text-center font-bold tracking-widest">Compilations

server/api/compilations.ts

@@ -3,12 +3,14 @@ export default eventHandler(() => {
     {
       id: 'ES00A',
       name: 'zero',
-      duration: 2794
+      duration: 2794,
+      description: '...',
     },
     {
       id: 'ES00B',
       name: 'zero b-sides',
-      duration: 2470
+      duration: 2470,
+      description: '...',
     }
   ]
 })

types/types.ts

@@ -4,6 +4,7 @@ export interface Compilation {
   name: string
   duration: number
   tracks?: Track[]
+  description: string
 }
 
 export interface Artist {