From 21d4143e0177ac599a21e9c001002cdccfe177f5 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 24 Oct 2024 15:17:40 +0200
Subject: [PATCH] FEAT: highlight current track

---
 pages/compilations/[id].vue | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/pages/compilations/[id].vue b/pages/compilations/[id].vue
index 1a1c269..f9f2ce9 100644
--- a/pages/compilations/[id].vue
+++ b/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>