evilspins/pages/compilations/[id].vue

<template @keydown.esc="closePlayer()">
  <div class="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" v-if="currentTrack">
      <button v-for="(track, index) in tracks" @click="listenTo(track.start)" :index="track.id"
        class="border-l-wihte-400 border-l-1 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 lg:text-3xl font-bold">
          {{ index + 1 }}
        </span>
        <span class="hidden 2xl:block hover:text-black" :class="{'text-white': track.id !== currentTrack.id, 'text-black': track.id === currentTrack.id }">
          {{ track.title }}
        </span>
        <span class="hidden lg:block font-bold">
          {{ getArtistName(track.artist) }}
        </span>
      </button>
    </nav>

    <article class="text-white p-8 max-w-5xl" v-if="currentTrack">
      <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>
          <a :href="currentTrack.url" target="_blank" rel="noopener noreferrer">
            <h3 class="text-5xl">
              {{ currentTrack.title }}
            </h3>
          </a>
          <a v-if="currentArtist" :href="currentArtist.url" target="_blank" rel="noopener noreferrer">
            <h2 class="font-bold text-6xl text-esyellow">
              {{ currentArtist.name }}
            </h2>
          </a>
          <h4 class="text-xl text-slate-200">
            {{ compilation.name }}
          </h4>
        </div>
      </div>

      <p class="block mt-10">
        see artist page:<br>
        <a v-if="currentArtist" target="_blank" class="underline text-orange-500 hover:text-orange-400"
          :href="currentArtist.url">
          {{ currentArtist.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 { isLoaded } = storeToRefs(store)
const currentArtist = computed(() => {
  return store.getArtistById(currentTrack.value.artist)
})
const getArtistName = (id: number) => {
  return store.getArtistById(id)?.name
}

// LOAD DATAs

onMounted(() => {
  loadCompilation() // if user arrive directly on compilation page
})
watch(isLoaded, () => {
  loadCompilation() // if the user came from another page
})

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 as string)
    tracks.value = store.getTracksByCompilationId(route.params.id as string)
    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-SD.mp4'
    mixPlayer.value.load()
    mixPlayer.value.play()
    mixPlayer.value.focus()
    watchPlayingTrack()
  }
}

const listenTo = (start: number) => {
  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));
}

a:hover {
  text-decoration: underline;
}

.mixPlayer {
  background: black;
  max-height: 70vh;
}

nav>button:first-child {
  border-left: none;
}
nav>button[index="11"] {
  display: none;
}

.button--close {
  position: fixed;
  right: 2vw;

  &:after {
    content: "\00d7";
  }
}

.border-l-1 {
  border-left: grey solid 1px;
}
</style>