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

47
pages/index.vue
View File

@@ -33,7 +33,25 @@
<!-- <source :src="mixPlayerSourceHD" type="video/mp4"> --> <!-- <source :src="mixPlayerSourceHD" type="video/mp4"> -->
<source :src="mixPlayerSourceSD" type="video/mp4"> <source :src="mixPlayerSourceSD" type="video/mp4">
</video> </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"> <article class="text-white p-8 max-w-5xl">
<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"> <h3 class="text-5xl">
{{ currentTitle }} {{ currentTitle }}
</h3> </h3>
@@ -43,6 +61,8 @@
<h4 class="text-xl text-slate-200"> <h4 class="text-xl text-slate-200">
{{ currentCompilationName }} {{ currentCompilationName }}
</h4> </h4>
</div>
</div>
<p class="block mt-10"> <p class="block mt-10">
see artist page:<br> see artist page:<br>
@@ -92,6 +112,11 @@ useSeoMeta({
ogImage: 'https://evilspins.com/logo.svg' ogImage: 'https://evilspins.com/logo.svg'
}) })
interface Compilation {
id: string,
name: string,
duration: number,
}
// animate player // animate player
const mixPlayer = ref() const mixPlayer = ref()
@@ -100,10 +125,11 @@ const mixPlayerSourceSD = ref('')
const currentCompilationId = ref('') const currentCompilationId = ref('')
const currentCompilationName = ref('') const currentCompilationName = ref('')
const currentCompilationTracks = ref({})
const currentArtist = ref('') const currentArtist = ref('')
const currentTitle = ref('') const currentTitle = ref('')
const currentLink = ref('') const currentLink = ref('')
const currentCover = ref('')
const play = (id: string) => { const play = (id: string) => {
document.body.style.overflow = 'hidden' // Block scrolling document.body.style.overflow = 'hidden' // Block scrolling
@@ -131,6 +157,11 @@ const closePlayer = () => {
document.body.style.overflow = '' // Reset scroll when closing document.body.style.overflow = '' // Reset scroll when closing
} }
const listenTo = (timeToPlay: number) => {
mixPlayer.value.currentTime = timeToPlay
mixPlayer.value.play()
}
const fadeOut = (elt: HTMLElement) => { const fadeOut = (elt: HTMLElement) => {
elt.classList.add('hide') elt.classList.add('hide')
} }
@@ -151,21 +182,21 @@ const { data: compilationsData } = await useFetch('/api/compilations')
onMounted(() => { onMounted(() => {
setInterval(() => { setInterval(() => {
if (mixPlayer.value && currentCompilationId.value) { if (mixPlayer.value && currentCompilationId.value) {
// console.log(mixPlayer.value.currentTime)
const compilations = JSON.parse(JSON.stringify(compilationsData.value)) const compilations = JSON.parse(JSON.stringify(compilationsData.value))
const tracks = JSON.parse(JSON.stringify(tracksData.value)) const tracks = JSON.parse(JSON.stringify(tracksData.value))
const artists = JSON.parse(JSON.stringify(artistsData.value)) const artists = JSON.parse(JSON.stringify(artistsData.value))
compilations.map((compilation) => { compilations.map((compilation: Compilation) => {
if (compilation.id === currentCompilationId.value) { if (compilation.id === currentCompilationId.value) {
currentCompilationName.value = compilations.find(compilation => compilation.id === currentCompilationId.value).name currentCompilationName.value = compilations.find((compilation: { id: string; }) => compilation.id === currentCompilationId.value).name
const currentCompilationTracks = tracks.filter(track => track.compilation === compilation.id) currentCompilationTracks.value = tracks.filter((track: { compilation: string; }) => track.compilation === compilation.id)
const currentTrack = currentCompilationTracks.find((track, index) => { const currentTrack = currentCompilationTracks.value.find((track: { start: number; }, index: number) => {
const nextTrackStart = currentCompilationTracks[index + 1]?.start ?? Infinity const nextTrackStart = currentCompilationTracks.value[index + 1]?.start ?? Infinity
return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart 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 currentTitle.value = currentTrack.title
currentLink.value = currentTrack.link currentLink.value = currentTrack.link
currentCover.value = currentTrack.cover
} }
}) })
} }

33
server/api/artists.ts
View File

@@ -4,67 +4,78 @@ export default eventHandler(() => {
id: 0, id: 0,
name: "L'efondras", name: "L'efondras",
url: "https://leffondras.bandcamp.com/music", url: "https://leffondras.bandcamp.com/music",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0024705317"
}, },
{ {
id: 1, id: 1,
name: "The kundalini genie", name: "The kundalini genie",
url: "https://the-kundalini-genie.bandcamp.com", url: "https://the-kundalini-genie.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0012045550"
}, },
{ {
id: 2, id: 2,
name: "Fontaines D.C.", name: "Fontaines D.C.",
url: "https://fontainesdc.bandcamp.com", url: "https://fontainesdc.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0027327090"
}, },
{ {
id: 3, id: 3,
name: "Fontanarosa", name: "Fontanarosa",
url: "https://fontanarosa.bandcamp.com", url: "https://fontanarosa.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0035380235",
}, },
{ {
id: 4, id: 4,
name: "Johnny mafia", name: "Johnny mafia",
url: "https://johnnymafia.bandcamp.com", url: "https://johnnymafia.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0035009392",
}, },
{ {
id: 5, id: 5,
name: "New candys", name: "New candys",
url: "https://newcandys.bandcamp.com", url: "https://newcandys.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0033518637",
}, },
{ {
id: 6, id: 6,
name: "Magic shoppe", name: "Magic shoppe",
url: "https://magicshoppe.bandcamp.com", url: "https://magicshoppe.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0030748374"
}, },
{ {
id: 7, id: 7,
name: "Les jaguars", name: "Les jaguars",
url: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois", url: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0016551336",
}, },
{ {
id: 8, id: 8,
name: "TRAAMS", name: "TRAAMS",
url: "https://traams.bandcamp.com", url: "https://traams.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0028348410",
}, },
{ {
id: 9, id: 9,
name: "Blue orchid", name: "Blue orchid",
url: "https://blue-orchid.bandcamp.com", url: "https://blue-orchid.bandcamp.com",
style: [0, 1, 2] style: [0, 1, 2],
cover: "0034796193",
}, },
{ {
id: 10, id: 10,
name: "I love UFO", name: "I love UFO",
url: "https://bruitblanc.bandcamp.com", 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, artist: 0,
start: 0, start: 0,
bpm: 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, id: 2,
@@ -16,7 +17,8 @@ export default eventHandler(() => {
artist: 1, artist: 1,
start: 393, 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',
cover: 'a1714786533',
}, },
{ {
id: 3, id: 3,
@@ -25,7 +27,8 @@ export default eventHandler(() => {
artist: 2, artist: 2,
start: 892, start: 892,
bpm: 0, bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind' link: 'https://fontainesdc.bandcamp.com/track/televised-mind',
cover: 'a3772806156'
}, },
{ {
id: 4, id: 4,
@@ -34,7 +37,8 @@ export default eventHandler(() => {
artist: 3, artist: 3,
start: 1138, start: 1138,
bpm: 0, bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it' link: 'https://howlinbananarecords.bandcamp.com/track/in-it',
cover: 'a1720372066',
}, },
{ {
id: 5, id: 5,
@@ -43,7 +47,8 @@ export default eventHandler(() => {
artist: 4, artist: 4,
start: 1245, start: 1245,
bpm: 0, bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3' link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
cover: 'a0984622869',
}, },
{ {
id: 6, id: 6,
@@ -52,7 +57,8 @@ export default eventHandler(() => {
artist: 5, artist: 5,
start: 1394, start: 1394,
bpm: 0, bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall' link: 'https://newcandys.bandcamp.com/track/overall',
cover: 'a0559661270',
}, },
{ {
id: 7, id: 7,
@@ -61,7 +67,8 @@ export default eventHandler(() => {
artist: 6, artist: 6,
start: 1674, start: 1674,
bpm: 0, bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup' link: 'https://magicshoppe.bandcamp.com/track/blowup',
cover: 'a1444895293',
}, },
{ {
id: 8, id: 8,
@@ -70,7 +77,8 @@ export default eventHandler(() => {
artist: 7, artist: 7,
start: 1880, start: 1880,
bpm: 0, bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet' link: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
cover: 'a1494681687',
}, },
{ {
id: 9, id: 9,
@@ -79,7 +87,8 @@ export default eventHandler(() => {
artist: 8, artist: 8,
start: 2024, start: 2024,
bpm: 0, bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves' link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
cover: 'a0046738552',
}, },
{ {
id: 10, id: 10,
@@ -88,7 +97,8 @@ export default eventHandler(() => {
artist: 9, artist: 9,
start: 2211, 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',
cover: 'a4102567047',
}, },
{ {
id: 11, id: 11,
@@ -97,7 +107,8 @@ export default eventHandler(() => {
artist: 10, artist: 10,
start: 2559, 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',
cover: 'a2203158939',
}, },
{ {
id: 21, id: 21,
@@ -106,7 +117,8 @@ export default eventHandler(() => {
artist: 0, artist: 0,
start: 0, start: 0,
bpm: 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, id: 22,
@@ -115,7 +127,8 @@ export default eventHandler(() => {
artist: 1, artist: 1,
start: 263, start: 263,
bpm: 0, 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, id: 23,
@@ -124,7 +137,8 @@ export default eventHandler(() => {
artist: 2, artist: 2,
start: 554, start: 554,
bpm: 0, bpm: 0,
link: 'https://fontainesdc.bandcamp.com/track/televised-mind' link: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
cover: 'a3772806156',
}, },
{ {
id: 24, id: 24,
@@ -133,7 +147,8 @@ export default eventHandler(() => {
artist: 3, artist: 3,
start: 781, start: 781,
bpm: 0, bpm: 0,
link: 'https://howlinbananarecords.bandcamp.com/track/in-it' link: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
cover: 'a1720372066',
}, },
{ {
id: 25, id: 25,
@@ -142,7 +157,8 @@ export default eventHandler(() => {
artist: 4, artist: 4,
start: 969, start: 969,
bpm: 0, bpm: 0,
link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3' link: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
cover: 'a2333676849',
}, },
{ {
id: 26, id: 26,
@@ -151,7 +167,8 @@ export default eventHandler(() => {
artist: 5, artist: 5,
start: 1128, start: 1128,
bpm: 0, bpm: 0,
link: 'https://newcandys.bandcamp.com/track/overall' link: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
cover: 'a0559661270',
}, },
{ {
id: 27, id: 27,
@@ -160,7 +177,8 @@ export default eventHandler(() => {
artist: 6, artist: 6,
start: 1303, start: 1303,
bpm: 0, bpm: 0,
link: 'https://radiomartiko.bandcamp.com/track/guitare-jet' link: 'https://magicshoppe.bandcamp.com/track/redhead',
cover: 'a0594426943',
}, },
{ {
id: 28, id: 28,
@@ -169,7 +187,8 @@ export default eventHandler(() => {
artist: 7, artist: 7,
start: 1584, start: 1584,
bpm: 0, bpm: 0,
link: 'https://magicshoppe.bandcamp.com/track/blowup' link: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
cover: 'a1494681687',
}, },
{ {
id: 29, id: 29,
@@ -178,7 +197,8 @@ export default eventHandler(() => {
artist: 8, artist: 8,
start: 1749, start: 1749,
bpm: 0, bpm: 0,
link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves' link: 'https://traams.bandcamp.com/track/flowers',
cover: 'a3644668199',
}, },
{ {
id: 30, id: 30,
@@ -187,7 +207,8 @@ export default eventHandler(() => {
artist: 9, artist: 9,
start: 1924, start: 1924,
bpm: 0, 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, id: 31,
@@ -196,7 +217,8 @@ export default eventHandler(() => {
artist: 10, artist: 10,
start: 2185, start: 2185,
bpm: 0, bpm: 0,
link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies' link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
cover: 'a3647322740',
}, },
] ]
}) })