FEAT: tracks cover & track selector

pages/index.vue

@@ -33,16 +33,36 @@
           <!-- <source :src="mixPlayerSourceHD" type="video/mp4"> -->
           <source :src="mixPlayerSourceSD" type="video/mp4">
         </video>
+        <nav class="text-esyellow w-full flex">
+          <button v-for="(track, index) in currentCompilationTracks" @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 }">
+            <span class="block">
+              {{ index + 1 }}
+            </span>
+            <!-- <span class="hidden lg:block">
+              {{ track.title }}
+            </span> -->
+            <!-- {{ track.title }} {{ track.name }} -->
+          </button>
+        </nav>
         <article class="text-white p-8 max-w-5xl">
-          <h3 class="text-5xl">
-            {{ currentTitle }}
-          </h3>
-          <h2 class="font-bold text-6xl text-esyellow">
-            {{ currentArtist.name }}
-          </h2>
-          <h4 class="text-xl text-slate-200">
-            {{ currentCompilationName }}
-          </h4>
+          <div class="flex items-center">
+            <div class="mr-4">
+              <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentCover + '_8.jpg'" />
+            </div>
+            <div>
+              <h3 class="text-5xl">
+                {{ currentTitle }}
+              </h3>
+              <h2 class="font-bold text-6xl text-esyellow">
+                {{ currentArtist.name }}
+              </h2>
+              <h4 class="text-xl text-slate-200">
+                {{ currentCompilationName }}
+              </h4>
+            </div>
+          </div>
 
           <p class="block mt-10">
             see artist page:<br>
@@ -71,13 +91,13 @@
     <section class="flex justify-center">
       <div class="flex max-w-2xl">
         <zero-a @click="play('ES00A')">
-        <button class="button absolute object-center p-4 flex justify-center items-center">
-          <svg width="40px" height="30px">
-            <polygon points="0,0 0,30 30,15" />
-          </svg>
-        </button>
-      </zero-a>
-      <zero-b @click="play('ES00B')"></zero-b>
+          <button class="button absolute object-center p-4 flex justify-center items-center">
+            <svg width="40px" height="30px">
+              <polygon points="0,0 0,30 30,15" />
+            </svg>
+          </button>
+        </zero-a>
+        <zero-b @click="play('ES00B')"></zero-b>
       </div>
     </section>
   </div>
@@ -92,6 +112,11 @@ useSeoMeta({
   ogImage: 'https://evilspins.com/logo.svg'
 })
 
+interface Compilation {
+  id: string,
+  name: string,
+  duration: number,
+}
 
 // animate player
 const mixPlayer = ref()
@@ -100,10 +125,11 @@ const mixPlayerSourceSD = ref('')
 
 const currentCompilationId = ref('')
 const currentCompilationName = ref('')
+const currentCompilationTracks = ref({})
 const currentArtist = ref('')
 const currentTitle = ref('')
 const currentLink = ref('')
-
+const currentCover = ref('')
 
 const play = (id: string) => {
   document.body.style.overflow = 'hidden' // Block scrolling
@@ -131,6 +157,11 @@ const closePlayer = () => {
   document.body.style.overflow = '' // Reset scroll when closing
 }
 
+const listenTo = (timeToPlay: number) => {
+  mixPlayer.value.currentTime = timeToPlay
+  mixPlayer.value.play()
+}
+
 const fadeOut = (elt: HTMLElement) => {
   elt.classList.add('hide')
 }
@@ -151,21 +182,21 @@ const { data: compilationsData } = await useFetch('/api/compilations')
 onMounted(() => {
   setInterval(() => {
     if (mixPlayer.value && currentCompilationId.value) {
-      // console.log(mixPlayer.value.currentTime)
       const compilations = JSON.parse(JSON.stringify(compilationsData.value))
       const tracks = JSON.parse(JSON.stringify(tracksData.value))
       const artists = JSON.parse(JSON.stringify(artistsData.value))
-      compilations.map((compilation) => {
+      compilations.map((compilation: Compilation) => {
         if (compilation.id === currentCompilationId.value) {
-          currentCompilationName.value = compilations.find(compilation => compilation.id === currentCompilationId.value).name
-          const currentCompilationTracks = tracks.filter(track => track.compilation === compilation.id)
-          const currentTrack = currentCompilationTracks.find((track, index) => {
-            const nextTrackStart = currentCompilationTracks[index + 1]?.start ?? Infinity
+          currentCompilationName.value = compilations.find((compilation: { id: string; }) => compilation.id === currentCompilationId.value).name
+          currentCompilationTracks.value = tracks.filter((track: { compilation: string; }) => track.compilation === compilation.id)
+          const currentTrack = currentCompilationTracks.value.find((track: { start: number; }, index: number) => {
+            const nextTrackStart = currentCompilationTracks.value[index + 1]?.start ?? Infinity
             return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
           })
-          currentArtist.value = artists.find(artist => artist.id === currentTrack.artist)
+          currentArtist.value = artists.find((artist: { id: any; }) => artist.id === currentTrack.artist)
           currentTitle.value = currentTrack.title
           currentLink.value = currentTrack.link
+          currentCover.value = currentTrack.cover
         }
       })
     }