FEAT: player with tracks name

pages/index.vue

@@ -1,47 +1,73 @@
 <template>
-  <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
-    <figure class="ui">
-      <!-- <ul>
-          <li>
-            <a href="mailto:contact@evilspins.com">contact</a>
-            <a href="/newsletter">newsletter</a>
-            <a href="/infos">?</a>
-          </li>
-        </ul> -->
-      <img class="logo" src="/logo.svg">
-      <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
-        ↓
-      </button>
-    </figure>
-    <div class="shadow screen" />
-    <video class="animation screen" loop autoplay muted ref="animation">
-      <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
-      <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
-        media="all and (max-width: 640px)">
-    </video>
-    <div class="mix screen hide">
-      <video class="mixPlayer screen" controls ref="mixPlayer">
-        <source :src="mixPlayerSourceHD" type="video/mp4">
-        <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
+  <div class="bg-black">
+    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer">
+      <figure class="ui">
+        <!-- <ul>
+            <li>
+              <a href="mailto:contact@evilspins.com">contact</a>
+              <a href="/newsletter">newsletter</a>
+              <a href="/infos">?</a>
+            </li>
+          </ul> -->
+        <img class="logo" src="/logo.svg">
+        <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
+          ↓
+        </button>
+      </figure>
+      <div class="shadow screen" />
+      <video class="animation screen" loop autoplay muted ref="animation">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
+        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
+          media="all and (max-width: 640px)">
       </video>
-      <button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()">
-        <svg width="20px" height="30px">
-          <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
-          <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
-        </svg>
-      </button>
-    </div>
-  </section>
-  <section class="flex bg-black">
-    <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>
-  </section>
+      <div class="mix hide bg-black w-full screen">
+        <button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()">
+          <svg width="20px" height="30px">
+            <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
+            <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
+          </svg>
+        </button>
+        <video class="mixPlayer w-full" controls ref="mixPlayer">
+          <source :src="mixPlayerSourceHD" type="video/mp4">
+          <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
+        </video>
+        <article class="text-white p-8">
+          <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>
+          <a :href="currentLink" class="block mt-10">
+            {{ currentLink }}
+          </a>
+        </article>
+        <section class=" bg-black">
+          <zero-a @click="play('ES00A')" class="w-40">
+            <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')" class="w-40"></zero-b>
+        </section>
+      </div>
+    </section>
+    <section class="flex bg-black">
+      <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>
+    </section>
+  </div>
 </template>
 <script setup lang="ts">
 // SEO
@@ -56,12 +82,21 @@ useSeoMeta({
 
 // animate player
 const mixPlayer = ref()
-const mixPlayerSourceHD = ref()
-const mixPlayerSourceSD = ref()
+const mixPlayerSourceHD = ref('')
+const mixPlayerSourceSD = ref('')
+
+const currentCompilationId = ref('')
+const currentCompilationName = ref('')
+const currentArtist = ref('')
+const currentTitle = ref('')
+const currentLink = ref('')
+
 
 const play = (id: string) => {
-  mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/'+id+'-HD.mp4'
-  mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/'+id+'-SD.mp4'
+  document.body.style.overflow = 'hidden' // Block scrolling
+  currentCompilationId.value = id
+  mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-HD.mp4'
+  mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/' + currentCompilationId.value + '-SD.mp4'
 
   fadeOut(document.querySelector('.button'))
   fadeOut(document.querySelector('.logo'))
@@ -80,6 +115,7 @@ const closePlayer = () => {
   fadeOut(document.querySelector('.mix'))
   fadeIn(document.querySelector('.shadow'))
   mixPlayer.value.pause()
+  document.body.style.overflow = '' // Reset scroll when closing
 }
 
 const fadeOut = (elt: HTMLElement) => {
@@ -89,17 +125,39 @@ const fadeIn = (elt: HTMLElement) => {
   elt.classList.remove('hide')
 }
 
-const scrollDown = function() {
-  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth'})
+const scrollDown = function () {
+  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
 }
 
 // load data
-const { data: artists } = await useFetch('/api/artists')
-const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true })
-const { data: compilations } = await useFetch('/api/compilations')
-console.log(compilations.value)
-console.log(styles.value)
-console.log(statusStyles.value)
+const { data: tracksData } = await useFetch('/api/tracks')
+const { data: artistsData } = await useFetch('/api/artists')
+const { data: stylesData } = await useFetch('/api/styles')
+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) => {
+        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
+            return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
+          })
+          currentArtist.value = artists.find(artist => artist.id === currentTrack.artist)
+          currentTitle.value = currentTrack.title
+          currentLink.value = currentTrack.link
+        }
+      })
+    }
+  }, 1000)
+})
 </script>
 
 <style lang="scss">