FEAT: evilspins v3 :: tracks info in player

pages/compilations/[id].vue

@@ -0,0 +1,152 @@
+<template @keydown.esc="closePlayer()">
+  <div class="bg-black text-white w-full flex items-center flex-col">
+    <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 }">
+        <span class="block">
+          {{ index + 1 }}
+        </span>
+        <span class="hidden 2xl:block">
+              {{ track.title }}
+            </span>
+            <span class="hidden lg:block">
+              {{ store.getArtistById(track.artist).name }}
+            </span>
+      </button>
+    </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>
+          <h3 class="text-5xl">
+            {{ currentTrack.title }}
+          </h3>
+          <h2 class="font-bold text-6xl text-esyellow">
+            {{ store.getArtistById(currentTrack.artist).name }}
+          </h2>
+          <h4 class="text-xl text-slate-200">
+            {{ compilation.name }}
+          </h4>
+        </div>
+      </div>
+
+      <p class="block mt-10">
+        see artist page:<br>
+        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="store.getArtistById(currentTrack.artist).url">
+          {{ store.getArtistById(currentTrack.artist).name }}
+        </a><br>
+        purchase the track:<br>
+        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentTrack.url">
+          {{ currentTrack.title }}
+        </a><br>
+        <br>
+      </p>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const store = useDataStore()
+
+const compilation = ref()
+const tracks = ref()
+const mixPlayer = ref()
+const videoSD = ref()
+const currentTrack = ref()
+
+const currentArtist = computed(()=>{
+  currentTrack
+})
+
+const { isLoaded } = storeToRefs(store)
+
+onMounted(() => {
+  loadCompilation()
+})
+
+watch(isLoaded, () => {
+  loadCompilation()
+})
+
+const watchPlayingTrack = () => {
+  setInterval(() => {
+    if (mixPlayer.value && compilation.value.id) {
+      currentTrack.value = tracks.value.find((track: { start: number; }, index: number) => {
+        const nextTrackStart = tracks.value[index + 1]?.start ?? Infinity
+        return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
+      })
+    }
+  }, 1000)
+}
+
+const loadCompilation = () => {
+  if(isLoaded.value) {
+    compilation.value = store.getCompilationById(route.params.id)
+    tracks.value = store.getTracksByCompilationId(route.params.id)
+    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-HD.mp4'
+    mixPlayer.value.load()
+    mixPlayer.value.play()
+    mixPlayer.value.focus()
+    watchPlayingTrack()
+  }
+}
+
+const listenTo = (start) => {
+  mixPlayer.value.currentTime = start
+  mixPlayer.value.play()
+}
+
+const closePlayer = async () => {
+  await navigateTo('/')
+}
+</script>
+
+<style lang="scss" scoped>
+body {
+  margin: 0;
+}
+
+.logo {
+  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
+}
+
+.mixPlayer {
+  background: black;
+  max-height: 70vh;
+}
+
+nav > button:first-child {
+  border-left: none;
+}
+
+.button--close {
+  position: fixed;
+  right: 2vw;
+  &:after {
+    content: "\00d7";
+  }
+}
+.button {
+  text-decoration: none;
+  box-shadow: 0 8px 0 0 black;
+  transition: all .3s;
+  border: 8px black solid;
+  line-height: 100%;
+  border-width: 2px;
+  border-radius: 100px;
+  cursor: pointer;
+  color: black;
+  background-color: #ffffff59;
+}
+</style>