valere/evilspins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: highlight current track

Browse Source
This commit is contained in:
valere
2024-10-24 15:17:40 +02:00
parent 5f747e57b4
commit 21d4143e01
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/compilations/[id].vue
View File

@@ -3,14 +3,13 @@
<button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50" <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50"
@click="closePlayer()"> @click="closePlayer()">
</button> </button>
<video class="mixPlayer w-full" controls ref="mixPlayer"> <video class="mixPlayer w-full" controls ref="mixPlayer">
<source :src="videoSD" type="video/mp4"> <source :src="videoSD" type="video/mp4">
</video> </video>
<nav class="text-esyellow w-full flex"> <nav class="text-esyellow w-full flex" v-if="currentTrack">
<button v-for="(track, index) in tracks" @click="listenTo(track.start)" <button v-for="(track, index) in tracks" @click="listenTo(track.start)" :index="track.id"
class="border-l-wihte-400 border-l-2 flex-grow hover:bg-esyellow hover:text-black" class="border-l-wihte-400 border-l-2 p-2 flex-grow hover:bg-esyellow hover:text-black"
:class="{ 'border-l-0': index === 0 }"> :class="{ 'border-l-0': index === 0, 'bg-esyellow text-black': track.id === currentTrack.id }">
<span class="block"> <span class="block">
{{ index + 1 }} {{ index + 1 }}
</span> </span>
@@ -24,17 +23,23 @@
</nav> </nav>
<article class="text-white p-8 max-w-5xl" v-if="currentTrack"> <article class="text-white p-8 max-w-5xl" v-if="currentTrack">
<div class="flex items-center"> <div class="flex flex-col sm:flex-row items-center ">
<div class="mr-4"> <a :href="currentTrack.url" target="_blank" class="mr-4">
<img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" /> <atropos-component>
</div> <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" />
</atropos-component>
</a>
<div> <div>
<h3 class="text-5xl"> <a :href="currentTrack.url" target="_blank" rel="noopener noreferrer">
{{ currentTrack.title }} <h3 class="text-5xl">
</h3> {{ currentTrack.title }}
<h2 class="font-bold text-6xl text-esyellow"> </h3>
{{ store.getArtistById(currentTrack.artist).name }} </a>
</h2> <a :href="store.getArtistById(currentTrack.artist).url" target="_blank" rel="noopener noreferrer">
<h2 class="font-bold text-6xl text-esyellow">
{{ store.getArtistById(currentTrack.artist).name }}
</h2>
</a>
<h4 class="text-xl text-slate-200"> <h4 class="text-xl text-slate-200">
{{ compilation.name }} {{ compilation.name }}
</h4> </h4>