FEAT: player with tracks name

2024-09-08 22:43:10 +02:00
parent 0c0074ccc1
commit 14953fbcc1
5 changed files with 180 additions and 116 deletions
--- a/pages/index.vue
+++ b/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">
--- a/server/api/artists.ts
+++ b/server/api/artists.ts
@@ -38,14 +38,14 @@ export default eventHandler(() => {
    },
    {
      id: 6,
-      name: "Magic shoppe",
-      link: "https://magicshoppe.bandcamp.com",
+      name: "Les jaguars",
+      link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
      style: [0, 1, 2]
    },
    {
      id: 7,
-      name: "Les jaguars",
-      link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
+      name: "Magic shoppe",
+      link: "https://magicshoppe.bandcamp.com",
      style: [0, 1, 2]
    },
    {
--- a/server/api/compilations.ts
+++ b/server/api/compilations.ts
@@ -2,11 +2,13 @@ export default eventHandler(() => {
  return [
    {
      id: 'ES00A',
-      name: 'Zero'
+      name: 'zero',
+      duration: 2794
    },
    {
      id: 'ES00B',
-      name: 'Zero B-Side'
+      name: 'zero b-sides',
+      duration: 2470
    }
  ]
-})
+})
--- a/server/api/tracks.ts
+++ b/server/api/tracks.ts
@@ -6,7 +6,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'The grinding wheel',
      artist: 0,
-      duration: 392,
+      start: 0,
      bpm: 0,
      link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
    },
@@ -16,7 +16,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'Bleach',
      artist: 1,
-      duration: 500,
+      start: 393,
      bpm: 0,
      link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
    },
@@ -26,7 +26,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'Televised mind',
      artist: 2,
-      duration: 0,
+      start: 892,
      bpm: 0,
      link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
    },
@@ -36,7 +36,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'In it',
      artist: 3,
-      duration: 0,
+      start: 1138,
      bpm: 0,
      link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
    },
@@ -46,7 +46,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'Bad michel',
      artist: 4,
-      duration: 0,
+      start: 1245,
      bpm: 0,
      link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
    },
@@ -56,7 +56,7 @@ export default eventHandler(() => {
      compilation: 'ES00A',
      title: 'Overall',
      artist: 5,
-      duration: 0,
+      start: 1394,
      bpm: 0,
      link: 'https://newcandys.bandcamp.com/track/overall'
    },
@@ -65,8 +65,8 @@ export default eventHandler(() => {
      number: 6,
      compilation: 'ES00A',
      title: 'Guitar jet',
-      artist: 5,
-      duration: 0,
+      artist: 6,
+      start: 1674,
      bpm: 0,
      link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
    },
@@ -75,8 +75,8 @@ export default eventHandler(() => {
      number: 6,
      compilation: 'ES00A',
      title: 'Blowup',
-      artist: 5,
-      duration: 0,
+      artist: 7,
+      start: 1880,
      bpm: 0,
      link: 'https://magicshoppe.bandcamp.com/track/blowup'
    },
@@ -85,8 +85,8 @@ export default eventHandler(() => {
      number: 6,
      compilation: 'ES00A',
      title: 'Intercontinental radio waves',
-      artist: 5,
-      duration: 0,
+      artist: 8,
+      start: 2024,
      bpm: 0,
      link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
    },
@@ -95,8 +95,8 @@ export default eventHandler(() => {
      number: 6,
      compilation: 'ES00A',
      title: 'Here comes the sun',
-      artist: 5,
-      duration: 0,
+      artist: 9,
+      start: 2211,
      bpm: 0,
      link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
    },
@@ -105,120 +105,120 @@ export default eventHandler(() => {
      number: 11,
      compilation: 'ES00A',
      title: 'Like in the movies',
-      artist: 5,
-      duration: 0,
+      artist: 10,
+      start: 2559,
      bpm: 0,
      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
    },
    {
      id: 0,
      number: 1,
-      compilation: 'ES00A',
-      title: 'The grinding wheel',
+      compilation: 'ES00B',
+      title: 'Ce que révèle l\'éclipse',
      artist: 0,
-      duration: 392,
+      start: 0,
      bpm: 0,
      link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
    },
    {
      id: 1,
      number: 2,
-      compilation: 'ES00A',
-      title: 'Bleach',
+      compilation: 'ES00B',
+      title: 'Bleedin\' Gums Mushrool',
      artist: 1,
-      duration: 500,
+      start: 263,
      bpm: 0,
      link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
    },
    {
      id: 2,
      number: 3,
-      compilation: 'ES00A',
-      title: 'Televised mind',
+      compilation: 'ES00B',
+      title: 'A lucid dream',
      artist: 2,
-      duration: 0,
+      start: 554,
      bpm: 0,
      link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
    },
    {
      id: 3,
      number: 4,
-      compilation: 'ES00A',
-      title: 'In it',
+      compilation: 'ES00B',
+      title: 'Lights off',
      artist: 3,
-      duration: 0,
+      start: 781,
      bpm: 0,
      link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
    },
    {
      id: 4,
      number: 5,
-      compilation: 'ES00A',
-      title: 'Bad michel',
+      compilation: 'ES00B',
+      title: 'I\'m sentimental',
      artist: 4,
-      duration: 0,
+      start: 969,
      bpm: 0,
      link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
    },
    {
      id: 5,
      number: 6,
-      compilation: 'ES00A',
-      title: 'Overall',
+      compilation: 'ES00B',
+      title: 'Thrill or trip',
      artist: 5,
-      duration: 0,
+      start: 1128,
      bpm: 0,
      link: 'https://newcandys.bandcamp.com/track/overall'
    },
    {
      id: 6,
      number: 6,
-      compilation: 'ES00A',
-      title: 'Guitar jet',
-      artist: 5,
-      duration: 0,
+      compilation: 'ES00B',
+      title: 'Redhead',
+      artist: 6,
+      start: 1303,
      bpm: 0,
      link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
    },
    {
      id: 7,
      number: 6,
-      compilation: 'ES00A',
-      title: 'Blowup',
-      artist: 5,
-      duration: 0,
+      compilation: 'ES00B',
+      title: 'Supersonic twist',
+      artist: 7,
+      start: 1584,
      bpm: 0,
      link: 'https://magicshoppe.bandcamp.com/track/blowup'
    },
    {
      id: 8,
      number: 6,
-      compilation: 'ES00A',
-      title: 'Intercontinental radio waves',
-      artist: 5,
-      duration: 0,
+      compilation: 'ES00B',
+      title: 'Flowers',
+      artist: 8,
+      start: 1749,
      bpm: 0,
      link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
    },
    {
      id: 9,
      number: 6,
-      compilation: 'ES00A',
-      title: 'Here comes the sun',
-      artist: 5,
-      duration: 0,
+      compilation: 'ES00B',
+      title: 'The shade',
+      artist: 9,
+      start: 1924,
      bpm: 0,
      link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
    },
    {
      id: 10,
      number: 11,
-      compilation: 'ES00A',
+      compilation: 'ES00B',
      title: 'Like in the movies',
-      artist: 5,
-      duration: 0,
+      artist: 10,
+      start: 2185,
      bpm: 0,
-      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
+      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies'
    },
  ]
 })
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,11 @@ module.exports = {
    "./error.vue",
  ],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        esyellow: '#fdec50ff',
+      },
+    },
  },
  plugins: [],
 }