FEAT: highlight current track

pages/compilations/[id].vue

@@ -3,14 +3,13 @@
     <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50"
       @click="closePlayer()">
     </button>
-
     <video class="mixPlayer w-full" controls ref="mixPlayer">
       <source :src="videoSD" type="video/mp4">
     </video>
-    <nav class="text-esyellow w-full flex">
-      <button v-for="(track, index) in tracks" @click="listenTo(track.start)"
-        class="border-l-wihte-400 border-l-2 flex-grow hover:bg-esyellow hover:text-black"
-        :class="{ 'border-l-0': index === 0 }">
+    <nav class="text-esyellow w-full flex" v-if="currentTrack">
+      <button v-for="(track, index) in tracks" @click="listenTo(track.start)" :index="track.id"
+        class="border-l-wihte-400 border-l-2 p-2 flex-grow hover:bg-esyellow hover:text-black"
+        :class="{ 'border-l-0': index === 0, 'bg-esyellow text-black': track.id === currentTrack.id }">
         <span class="block">
           {{ index + 1 }}
         </span>
@@ -24,17 +23,23 @@
     </nav>
 
     <article class="text-white p-8 max-w-5xl" v-if="currentTrack">
-      <div class="flex items-center">
-        <div class="mr-4">
-          <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" />
-        </div>
+      <div class="flex flex-col sm:flex-row items-center ">
+        <a :href="currentTrack.url" target="_blank" class="mr-4">
+          <atropos-component>
+            <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" />
+          </atropos-component>
+        </a>
         <div>
-          <h3 class="text-5xl">
-            {{ currentTrack.title }}
-          </h3>
-          <h2 class="font-bold text-6xl text-esyellow">
-            {{ store.getArtistById(currentTrack.artist).name }}
-          </h2>
+          <a :href="currentTrack.url" target="_blank" rel="noopener noreferrer">
+            <h3 class="text-5xl">
+              {{ currentTrack.title }}
+            </h3>
+          </a>
+          <a :href="store.getArtistById(currentTrack.artist).url" target="_blank" rel="noopener noreferrer">
+            <h2 class="font-bold text-6xl text-esyellow">
+              {{ store.getArtistById(currentTrack.artist).name }}
+            </h2>
+          </a>
           <h4 class="text-xl text-slate-200">
             {{ compilation.name }}
           </h4>