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()
 }