From bf7c68fa355dbaa13705c6910f68f0e3d032a35d Mon Sep 17 00:00:00 2001 From: valere Date: Thu, 17 Oct 2024 23:55:28 +0200 Subject: [PATCH] FEAT: tracks cover & track selector --- pages/index.vue | 79 ++++++++++++++++++++++++++++++------------- server/api/artists.ts | 33 ++++++++++++------ server/api/tracks.ts | 66 ++++++++++++++++++++++++------------ 3 files changed, 121 insertions(+), 57 deletions(-) diff --git a/pages/index.vue b/pages/index.vue index ad795f7..5e95382 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -33,16 +33,36 @@ +
-

- {{ currentTitle }} -

-

- {{ currentArtist.name }} -

-

- {{ currentCompilationName }} -

+
+
+ +
+
+

+ {{ currentTitle }} +

+

+ {{ currentArtist.name }} +

+

+ {{ currentCompilationName }} +

+
+

see artist page:
@@ -71,13 +91,13 @@

- - - + + +
@@ -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 } }) } diff --git a/server/api/artists.ts b/server/api/artists.ts index 14414f4..ad810c4 100644 --- a/server/api/artists.ts +++ b/server/api/artists.ts @@ -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", } ] }) diff --git a/server/api/tracks.ts b/server/api/tracks.ts index f9ec523..9069eec 100644 --- a/server/api/tracks.ts +++ b/server/api/tracks.ts @@ -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', }, ] })