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

FEAT: player with tracks name

Browse Source
This commit is contained in:
valere
2024-09-08 22:43:10 +02:00
parent 0c0074ccc1
commit 14953fbcc1
5 changed files with 180 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
pages/index.vue
View File

@@ -1,47 +1,73 @@
<template> <template>
<section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()"> <div class="bg-black">
<figure class="ui"> <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer">
<!-- <ul> <figure class="ui">
<li> <!-- <ul>
<a href="mailto:contact@evilspins.com">contact</a> <li>
<a href="/newsletter">newsletter</a> <a href="mailto:contact@evilspins.com">contact</a>
<a href="/infos">?</a> <a href="/newsletter">newsletter</a>
</li> <a href="/infos">?</a>
</ul> --> </li>
<img class="logo" src="/logo.svg"> </ul> -->
<button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()"> <img class="logo" src="/logo.svg">
↓ <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
</button> ↓
</figure> </button>
<div class="shadow screen" /> </figure>
<video class="animation screen" loop autoplay muted ref="animation"> <div class="shadow screen" />
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm"> <video class="animation screen" loop autoplay muted ref="animation">
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm" <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
media="all and (max-width: 640px)"> <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
</video> media="all and (max-width: 640px)">
<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)">
</video> </video>
<button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()"> <div class="mix hide bg-black w-full screen">
<svg width="20px" height="30px"> <button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()">
<line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" /> <svg width="20px" height="30px">
<line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" /> <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
</svg> <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
</button> </svg>
</div> </button>
</section> <video class="mixPlayer w-full" controls ref="mixPlayer">
<section class="flex bg-black"> <source :src="mixPlayerSourceHD" type="video/mp4">
<zero-a @click="play('ES00A')"> <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
<button class="button absolute object-center p-4 flex justify-center items-center"> </video>
<svg width="40px" height="30px"> <article class="text-white p-8">
<polygon points="0,0 0,30 30,15" /> <h3 class="text-5xl">
</svg> {{ currentTitle }}
</button> </h3>
</zero-a> <h2 class="font-bold text-6xl text-esyellow">
<zero-b @click="play('ES00B')"></zero-b> {{ currentArtist.name }}
</section> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
// SEO // SEO
@@ -56,12 +82,21 @@ useSeoMeta({
// animate player // animate player
const mixPlayer = ref() const mixPlayer = ref()
const mixPlayerSourceHD = ref() const mixPlayerSourceHD = ref('')
const mixPlayerSourceSD = ref() const mixPlayerSourceSD = ref('')
const currentCompilationId = ref('')
const currentCompilationName = ref('')
const currentArtist = ref('')
const currentTitle = ref('')
const currentLink = ref('')
const play = (id: string) => { const play = (id: string) => {
mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/'+id+'-HD.mp4' document.body.style.overflow = 'hidden' // Block scrolling
mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/'+id+'-SD.mp4' 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('.button'))
fadeOut(document.querySelector('.logo')) fadeOut(document.querySelector('.logo'))
@@ -80,6 +115,7 @@ const closePlayer = () => {
fadeOut(document.querySelector('.mix')) fadeOut(document.querySelector('.mix'))
fadeIn(document.querySelector('.shadow')) fadeIn(document.querySelector('.shadow'))
mixPlayer.value.pause() mixPlayer.value.pause()
document.body.style.overflow = '' // Reset scroll when closing
} }
const fadeOut = (elt: HTMLElement) => { const fadeOut = (elt: HTMLElement) => {
@@ -89,17 +125,39 @@ const fadeIn = (elt: HTMLElement) => {
elt.classList.remove('hide') elt.classList.remove('hide')
} }
const scrollDown = function() { const scrollDown = function () {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth'}) window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
} }
// load data // load data
const { data: artists } = await useFetch('/api/artists') const { data: tracksData } = await useFetch('/api/tracks')
const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true }) const { data: artistsData } = await useFetch('/api/artists')
const { data: compilations } = await useFetch('/api/compilations') const { data: stylesData } = await useFetch('/api/styles')
console.log(compilations.value) const { data: compilationsData } = await useFetch('/api/compilations')
console.log(styles.value)
console.log(statusStyles.value) 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> </script>
<style lang="scss"> <style lang="scss">

8
server/api/artists.ts
View File

@@ -38,14 +38,14 @@ export default eventHandler(() => {
}, },
{ {
id: 6, id: 6,
name: "Magic shoppe", name: "Les jaguars",
link: "https://magicshoppe.bandcamp.com", link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
style: [0, 1, 2] style: [0, 1, 2]
}, },
{ {
id: 7, id: 7,
name: "Les jaguars", name: "Magic shoppe",
link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois", link: "https://magicshoppe.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2]
}, },
{ {

8
server/api/compilations.ts
View File

@@ -2,11 +2,13 @@ export default eventHandler(() => {
return [ return [
{ {
id: 'ES00A', id: 'ES00A',
name: 'Zero' name: 'zero',
duration: 2794
}, },
{ {
id: 'ES00B', id: 'ES00B',
name: 'Zero B-Side' name: 'zero b-sides',
duration: 2470
} }
] ]
}) })

108
server/api/tracks.ts
View File

@@ -6,7 +6,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'The grinding wheel', title: 'The grinding wheel',
artist: 0, artist: 0,
duration: 392, start: 0,
bpm: 0, bpm: 0,
link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel' link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
}, },
@@ -16,7 +16,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'Bleach', title: 'Bleach',
artist: 1, artist: 1,
duration: 500, start: 393,
bpm: 0, bpm: 0,
link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2' link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
}, },
@@ -26,7 +26,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'Televised mind', title: 'Televised mind',
artist: 2, artist: 2,
duration: 0, start: 892,
bpm: 0, bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind' link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
}, },
@@ -36,7 +36,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'In it', title: 'In it',
artist: 3, artist: 3,
duration: 0, start: 1138,
bpm: 0, bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it' link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
}, },
@@ -46,7 +46,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'Bad michel', title: 'Bad michel',
artist: 4, artist: 4,
duration: 0, start: 1245,
bpm: 0, bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3' link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
}, },
@@ -56,7 +56,7 @@ export default eventHandler(() => {
compilation: 'ES00A', compilation: 'ES00A',
title: 'Overall', title: 'Overall',
artist: 5, artist: 5,
duration: 0, start: 1394,
bpm: 0, bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall' link: 'https://newcandys.bandcamp.com/track/overall'
}, },
@@ -65,8 +65,8 @@ export default eventHandler(() => {
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00A',
title: 'Guitar jet', title: 'Guitar jet',
artist: 5, artist: 6,
duration: 0, start: 1674,
bpm: 0, bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet' link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
}, },
@@ -75,8 +75,8 @@ export default eventHandler(() => {
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00A',
title: 'Blowup', title: 'Blowup',
artist: 5, artist: 7,
duration: 0, start: 1880,
bpm: 0, bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup' link: 'https://magicshoppe.bandcamp.com/track/blowup'
}, },
@@ -85,8 +85,8 @@ export default eventHandler(() => {
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00A',
title: 'Intercontinental radio waves', title: 'Intercontinental radio waves',
artist: 5, artist: 8,
duration: 0, start: 2024,
bpm: 0, bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves' link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
}, },
@@ -95,8 +95,8 @@ export default eventHandler(() => {
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00A',
title: 'Here comes the sun', title: 'Here comes the sun',
artist: 5, artist: 9,
duration: 0, start: 2211,
bpm: 0, bpm: 0,
link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun' link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
}, },
@@ -105,120 +105,120 @@ export default eventHandler(() => {
number: 11, number: 11,
compilation: 'ES00A', compilation: 'ES00A',
title: 'Like in the movies', title: 'Like in the movies',
artist: 5, artist: 10,
duration: 0, start: 2559,
bpm: 0, bpm: 0,
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2' link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
}, },
{ {
id: 0, id: 0,
number: 1, number: 1,
compilation: 'ES00A', compilation: 'ES00B',
title: 'The grinding wheel', title: 'Ce que révèle l\'éclipse',
artist: 0, artist: 0,
duration: 392, start: 0,
bpm: 0, bpm: 0,
link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel' link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
}, },
{ {
id: 1, id: 1,
number: 2, number: 2,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Bleach', title: 'Bleedin\' Gums Mushrool',
artist: 1, artist: 1,
duration: 500, start: 263,
bpm: 0, bpm: 0,
link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2' link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
}, },
{ {
id: 2, id: 2,
number: 3, number: 3,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Televised mind', title: 'A lucid dream',
artist: 2, artist: 2,
duration: 0, start: 554,
bpm: 0, bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind' link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
}, },
{ {
id: 3, id: 3,
number: 4, number: 4,
compilation: 'ES00A', compilation: 'ES00B',
title: 'In it', title: 'Lights off',
artist: 3, artist: 3,
duration: 0, start: 781,
bpm: 0, bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it' link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
}, },
{ {
id: 4, id: 4,
number: 5, number: 5,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Bad michel', title: 'I\'m sentimental',
artist: 4, artist: 4,
duration: 0, start: 969,
bpm: 0, bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3' link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
}, },
{ {
id: 5, id: 5,
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Overall', title: 'Thrill or trip',
artist: 5, artist: 5,
duration: 0, start: 1128,
bpm: 0, bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall' link: 'https://newcandys.bandcamp.com/track/overall'
}, },
{ {
id: 6, id: 6,
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Guitar jet', title: 'Redhead',
artist: 5, artist: 6,
duration: 0, start: 1303,
bpm: 0, bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet' link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
}, },
{ {
id: 7, id: 7,
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Blowup', title: 'Supersonic twist',
artist: 5, artist: 7,
duration: 0, start: 1584,
bpm: 0, bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup' link: 'https://magicshoppe.bandcamp.com/track/blowup'
}, },
{ {
id: 8, id: 8,
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Intercontinental radio waves', title: 'Flowers',
artist: 5, artist: 8,
duration: 0, start: 1749,
bpm: 0, bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves' link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
}, },
{ {
id: 9, id: 9,
number: 6, number: 6,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Here comes the sun', title: 'The shade',
artist: 5, artist: 9,
duration: 0, start: 1924,
bpm: 0, bpm: 0,
link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun' link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
}, },
{ {
id: 10, id: 10,
number: 11, number: 11,
compilation: 'ES00A', compilation: 'ES00B',
title: 'Like in the movies', title: 'Like in the movies',
artist: 5, artist: 10,
duration: 0, start: 2185,
bpm: 0, bpm: 0,
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2' link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies'
}, },
] ]
}) })

6
tailwind.config.js
View File

@@ -9,7 +9,11 @@ module.exports = {
"./error.vue", "./error.vue",
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
esyellow: '#fdec50ff',
},
},
}, },
plugins: [], plugins: [],
} }