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

FEAT: tracks cover & track selector

Browse Source
This commit is contained in:
valere
2024-10-17 23:55:28 +02:00
parent bae620259c
commit bf7c68fa35
3 changed files with 121 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/index.vue
View File

@@ -33,16 +33,36 @@
<!-- <source :src="mixPlayerSourceHD" type="video/mp4"> -->
<source :src="mixPlayerSourceSD" type="video/mp4">
</video>
<nav class="text-esyellow w-full flex">
<button v-for="(track, index) in currentCompilationTracks" @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 lg:block">
{{ track.title }}
</span> -->
<!-- {{ track.title }} {{ track.name }} -->
</button>
</nav>
<article class="text-white p-8 max-w-5xl">
<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>
<div class="flex items-center">
<div class="mr-4">
<img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentCover + '_8.jpg'" />
</div>
<div>
<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>
</div>
</div>
<p class="block mt-10">
see artist page:<br>
@@ -71,13 +91,13 @@
<section class="flex justify-center">
<div class="flex max-w-2xl">
<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>
<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>
</div>
</section>
</div>
@@ -92,6 +112,11 @@ useSeoMeta({
ogImage: 'https://evilspins.com/logo.svg'
})
interface Compilation {
id: string,
name: string,
duration: number,
}
// animate player
const mixPlayer = ref()
@@ -100,10 +125,11 @@ const mixPlayerSourceSD = ref('')
const currentCompilationId = ref('')
const currentCompilationName = ref('')
const currentCompilationTracks = ref({})
const currentArtist = ref('')
const currentTitle = ref('')
const currentLink = ref('')
const currentCover = ref('')
const play = (id: string) => {
document.body.style.overflow = 'hidden' // Block scrolling
@@ -131,6 +157,11 @@ const closePlayer = () => {
document.body.style.overflow = '' // Reset scroll when closing
}
const listenTo = (timeToPlay: number) => {
mixPlayer.value.currentTime = timeToPlay
mixPlayer.value.play()
}
const fadeOut = (elt: HTMLElement) => {
elt.classList.add('hide')
}
@@ -151,21 +182,21 @@ 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) => {
compilations.map((compilation: 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
currentCompilationName.value = compilations.find((compilation: { id: string; }) => compilation.id === currentCompilationId.value).name
currentCompilationTracks.value = tracks.filter((track: { compilation: string; }) => track.compilation === compilation.id)
const currentTrack = currentCompilationTracks.value.find((track: { start: number; }, index: number) => {
const nextTrackStart = currentCompilationTracks.value[index + 1]?.start ?? Infinity
return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
})
currentArtist.value = artists.find(artist => artist.id === currentTrack.artist)
currentArtist.value = artists.find((artist: { id: any; }) => artist.id === currentTrack.artist)
currentTitle.value = currentTrack.title
currentLink.value = currentTrack.link
currentCover.value = currentTrack.cover
}
})
}

33
server/api/artists.ts
View File

@@ -4,67 +4,78 @@ export default eventHandler(() => {
id: 0,
name: "L'efondras",
url: "https://leffondras.bandcamp.com/music",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0024705317"
},
{
id: 1,
name: "The kundalini genie",
url: "https://the-kundalini-genie.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0012045550"
},
{
id: 2,
name: "Fontaines D.C.",
url: "https://fontainesdc.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0027327090"
},
{
id: 3,
name: "Fontanarosa",
url: "https://fontanarosa.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0035380235",
},
{
id: 4,
name: "Johnny mafia",
url: "https://johnnymafia.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0035009392",
},
{
id: 5,
name: "New candys",
url: "https://newcandys.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0033518637",
},
{
id: 6,
name: "Magic shoppe",
url: "https://magicshoppe.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0030748374"
},
{
id: 7,
name: "Les jaguars",
url: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0016551336",
},
{
id: 8,
name: "TRAAMS",
url: "https://traams.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0028348410",
},
{
id: 9,
name: "Blue orchid",
url: "https://blue-orchid.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "0034796193",
},
{
id: 10,
name: "I love UFO",
url: "https://bruitblanc.bandcamp.com",
style: [0, 1, 2]
style: [0, 1, 2],
cover: "a2203158939",
}
]
})

66
server/api/tracks.ts
View File

@@ -7,7 +7,8 @@ export default eventHandler(() => {
artist: 0,
start: 0,
bpm: 0,
link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
cover: 'a3236746052',
},
{
id: 2,
@@ -16,7 +17,8 @@ export default eventHandler(() => {
artist: 1,
start: 393,
bpm: 0,
link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
cover: 'a1714786533',
},
{
id: 3,
@@ -25,7 +27,8 @@ export default eventHandler(() => {
artist: 2,
start: 892,
bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
link: 'https://fontainesdc.bandcamp.com/track/televised-mind',
cover: 'a3772806156'
},
{
id: 4,
@@ -34,7 +37,8 @@ export default eventHandler(() => {
artist: 3,
start: 1138,
bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
link: 'https://howlinbananarecords.bandcamp.com/track/in-it',
cover: 'a1720372066',
},
{
id: 5,
@@ -43,7 +47,8 @@ export default eventHandler(() => {
artist: 4,
start: 1245,
bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
cover: 'a0984622869',
},
{
id: 6,
@@ -52,7 +57,8 @@ export default eventHandler(() => {
artist: 5,
start: 1394,
bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall'
link: 'https://newcandys.bandcamp.com/track/overall',
cover: 'a0559661270',
},
{
id: 7,
@@ -61,7 +67,8 @@ export default eventHandler(() => {
artist: 6,
start: 1674,
bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup'
link: 'https://magicshoppe.bandcamp.com/track/blowup',
cover: 'a1444895293',
},
{
id: 8,
@@ -70,7 +77,8 @@ export default eventHandler(() => {
artist: 7,
start: 1880,
bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
cover: 'a1494681687',
},
{
id: 9,
@@ -79,7 +87,8 @@ export default eventHandler(() => {
artist: 8,
start: 2024,
bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
cover: 'a0046738552',
},
{
id: 10,
@@ -88,7 +97,8 @@ export default eventHandler(() => {
artist: 9,
start: 2211,
bpm: 0,
link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
cover: 'a4102567047',
},
{
id: 11,
@@ -97,7 +107,8 @@ export default eventHandler(() => {
artist: 10,
start: 2559,
bpm: 0,
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
cover: 'a2203158939',
},
{
id: 21,
@@ -106,7 +117,8 @@ export default eventHandler(() => {
artist: 0,
start: 0,
bpm: 0,
link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
link: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
cover: 'a3236746052',
},
{
id: 22,
@@ -115,7 +127,8 @@ export default eventHandler(() => {
artist: 1,
start: 263,
bpm: 0,
link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
link: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
cover: 'a1714786533',
},
{
id: 23,
@@ -124,7 +137,8 @@ export default eventHandler(() => {
artist: 2,
start: 554,
bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
link: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
cover: 'a3772806156',
},
{
id: 24,
@@ -133,7 +147,8 @@ export default eventHandler(() => {
artist: 3,
start: 781,
bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
link: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
cover: 'a1720372066',
},
{
id: 25,
@@ -142,7 +157,8 @@ export default eventHandler(() => {
artist: 4,
start: 969,
bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
link: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
cover: 'a2333676849',
},
{
id: 26,
@@ -151,7 +167,8 @@ export default eventHandler(() => {
artist: 5,
start: 1128,
bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall'
link: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
cover: 'a0559661270',
},
{
id: 27,
@@ -160,7 +177,8 @@ export default eventHandler(() => {
artist: 6,
start: 1303,
bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
link: 'https://magicshoppe.bandcamp.com/track/redhead',
cover: 'a0594426943',
},
{
id: 28,
@@ -169,7 +187,8 @@ export default eventHandler(() => {
artist: 7,
start: 1584,
bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup'
link: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
cover: 'a1494681687',
},
{
id: 29,
@@ -178,7 +197,8 @@ export default eventHandler(() => {
artist: 8,
start: 1749,
bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
link: 'https://traams.bandcamp.com/track/flowers',
cover: 'a3644668199',
},
{
id: 30,
@@ -187,7 +207,8 @@ export default eventHandler(() => {
artist: 9,
start: 1924,
bpm: 0,
link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
link: 'https://blue-orchid.bandcamp.com/track/the-shade',
cover: 'a0804204790',
},
{
id: 31,
@@ -196,7 +217,8 @@ export default eventHandler(() => {
artist: 10,
start: 2185,
bpm: 0,
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies'
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
cover: 'a3647322740',
},
]
})