FEAT: evilspins v3 :: tracks info in player

2024-10-22 23:36:04 +02:00
parent bf7c68fa35
commit e1ed518ce4
22 changed files with 381 additions and 236 deletions
--- a/app.vue
+++ b/app.vue
@@ -1,3 +1,11 @@
 <template>
-    <NuxtPage />
+  <NuxtPage />
 </template>
+
+<script setup>
+// @todo : laod datas as plugin/middleware (cant load pinia in plugin/middleware) ?
+onMounted(async ()=>{
+  const dataStore = await useDataStore()
+  await dataStore.loadData()
+})
+</script>
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -26,12 +26,6 @@
  box-shadow: 0 0 0 0 black;
 }

-.button--close {
-  right: 24px;
-  padding-top: 10px;
-  position: absolute;
-}
-
 .button--screened {
  top: 74px;
 }
--- a/components/compilationObject.vue
+++ b/components/compilationObject.vue
@@ -0,0 +1,23 @@
+<template>
+  <NuxtLink :to="'/compilations/' + props.data.id" class="compilation mx-auto p-4 inline-flex">
+    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
+      <img :src="props.data.id + '/bkg.jpg'" data-atropos-offset="-8" />
+      <img :src="props.data.id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
+      <img :src="props.data.id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover" />
+      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
+    </atropos-component>
+  </NuxtLink>
+</template>
+
+<script setup>
+const props = defineProps(['data', 'template'])
+const atropos = ref(null)
+</script>
+
+<style scoped>
+.logo {
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
+  left: 14%;
+  top: 10%;
+}
+</style>
--- a/components/compilations-list.vue
+++ b/components/compilations-list.vue
@@ -0,0 +1,11 @@
+<template>
+  <section>
+    <div v-for="compilation in store.getAllCompilations" class="text-white">
+      <compilationObject :data="compilation" template="full" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const store = useDataStore()
+</script>
--- a/components/zero-a.vue
+++ b/components/zero-a.vue
@@ -1,28 +0,0 @@
-<template>
-  <div class="compilation mx-auto p-4 inline-flex">
-    <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
-      <img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
-      <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
-      <img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
-      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
-    </atropos-component>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-
-const atropos = ref(null)
-
-onMounted(() => {
-
-})
-</script>
-
-<style scoped>
-.logo {
-  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
-  left: 14%;
-  top: 10%;
-}
-</style>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: true,
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

@@ -7,6 +8,7 @@ export default defineNuxtConfig({
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
+
    },
  },

@@ -17,5 +19,6 @@ export default defineNuxtConfig({
    }
  },

-  compatibilityDate: '2024-07-10'
-})
+  compatibilityDate: '2024-07-10',
+  modules: ['@pinia/nuxt']
+})
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,10 @@
      "name": "nuxt-app",
      "hasInstallScript": true,
      "dependencies": {
+        "@pinia/nuxt": "^0.5.5",
        "atropos": "^2.0.2",
        "nuxt": "^3.12.3",
+        "pinia": "^2.2.4",
        "unhead": "^1.9.15",
        "vue": "^3.4.31",
        "vue-router": "^4.4.0"
@@ -1153,6 +1155,18 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.5.tgz",
+      "integrity": "sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==",
+      "dependencies": {
+        "@nuxt/kit": "^3.9.0",
+        "pinia": "^2.2.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      }
+    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5391,6 +5405,56 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/pinia": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/pirates": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
+    "@pinia/nuxt": "^0.5.5",
    "atropos": "^2.0.2",
    "nuxt": "^3.12.3",
+    "pinia": "^2.2.4",
    "unhead": "^1.9.15",
    "vue": "^3.4.31",
    "vue-router": "^4.4.0"
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -133,6 +133,5 @@ img {
 pre {
  white-space: pre-line;
  font-family: sans-serif;
-  @apply text-xl;
 }
-</style>
+</style>
--- a/pages/atropos.vue
+++ b/pages/atropos.vue
@@ -1,6 +0,0 @@
-<template>
-  <section>
-    <zero-a></zero-a>
-    <zero-b></zero-b>
-  </section>
-</template>
--- a/pages/compilations/[id].vue
+++ b/pages/compilations/[id].vue
@@ -0,0 +1,152 @@
+<template @keydown.esc="closePlayer()">
+  <div class="bg-black text-white w-full flex items-center flex-col">
+    <button class="text-sm md:text-5xl leading-none button button--close m-3 flex justify-center items-center z-50" @click="closePlayer()">
+    </button>
+
+    <video class="mixPlayer w-full" controls ref="mixPlayer">
+      <source :src="videoSD" type="video/mp4">
+    </video>
+    <nav class="text-esyellow w-full flex">
+      <button v-for="(track, index) in tracks" @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 2xl:block">
+              {{ track.title }}
+            </span>
+            <span class="hidden lg:block">
+              {{ store.getArtistById(track.artist).name }}
+            </span>
+      </button>
+    </nav>
+
+    <article class="text-white p-8 max-w-5xl" v-if="currentTrack">
+      <div class="flex items-center">
+        <div class="mr-4">
+          <img class="flex-grow-0" :src="'https://f4.bcbits.com/img/' + currentTrack.cover + '_8.jpg'" />
+        </div>
+        <div>
+          <h3 class="text-5xl">
+            {{ currentTrack.title }}
+          </h3>
+          <h2 class="font-bold text-6xl text-esyellow">
+            {{ store.getArtistById(currentTrack.artist).name }}
+          </h2>
+          <h4 class="text-xl text-slate-200">
+            {{ compilation.name }}
+          </h4>
+        </div>
+      </div>
+
+      <p class="block mt-10">
+        see artist page:<br>
+        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="store.getArtistById(currentTrack.artist).url">
+          {{ store.getArtistById(currentTrack.artist).name }}
+        </a><br>
+        purchase the track:<br>
+        <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentTrack.url">
+          {{ currentTrack.title }}
+        </a><br>
+        <br>
+      </p>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const store = useDataStore()
+
+const compilation = ref()
+const tracks = ref()
+const mixPlayer = ref()
+const videoSD = ref()
+const currentTrack = ref()
+
+const currentArtist = computed(()=>{
+  currentTrack
+})
+
+const { isLoaded } = storeToRefs(store)
+
+onMounted(() => {
+  loadCompilation()
+})
+
+watch(isLoaded, () => {
+  loadCompilation()
+})
+
+const watchPlayingTrack = () => {
+  setInterval(() => {
+    if (mixPlayer.value && compilation.value.id) {
+      currentTrack.value = tracks.value.find((track: { start: number; }, index: number) => {
+        const nextTrackStart = tracks.value[index + 1]?.start ?? Infinity
+        return track.start <= mixPlayer.value.currentTime && mixPlayer.value.currentTime < nextTrackStart
+      })
+    }
+  }, 1000)
+}
+
+const loadCompilation = () => {
+  if(isLoaded.value) {
+    compilation.value = store.getCompilationById(route.params.id)
+    tracks.value = store.getTracksByCompilationId(route.params.id)
+    videoSD.value = 'https://files.erudi.fr/evilspins/' + compilation.value.id + '-HD.mp4'
+    mixPlayer.value.load()
+    mixPlayer.value.play()
+    mixPlayer.value.focus()
+    watchPlayingTrack()
+  }
+}
+
+const listenTo = (start) => {
+  mixPlayer.value.currentTime = start
+  mixPlayer.value.play()
+}
+
+const closePlayer = async () => {
+  await navigateTo('/')
+}
+</script>
+
+<style lang="scss" scoped>
+body {
+  margin: 0;
+}
+
+.logo {
+  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
+}
+
+.mixPlayer {
+  background: black;
+  max-height: 70vh;
+}
+
+nav > button:first-child {
+  border-left: none;
+}
+
+.button--close {
+  position: fixed;
+  right: 2vw;
+  &:after {
+    content: "\00d7";
+  }
+}
+.button {
+  text-decoration: none;
+  box-shadow: 0 8px 0 0 black;
+  transition: all .3s;
+  border: 8px black solid;
+  line-height: 100%;
+  border-width: 2px;
+  border-radius: 100px;
+  cursor: pointer;
+  color: black;
+  background-color: #ffffff59;
+}
+</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
    <div class="w-full flex justify-center">
      <nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
        <a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
-          <img src="/youtube.svg" alt="ho no" />
+          <img src="/youtube.svg" alt="youtube channel" />
        </a>
        <a href="mailto:contact@evilspins.com">📬</a>
        <a href="/about">❓</a>
@@ -12,6 +12,9 @@
    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
      <figure class="ui">
        <img class="logo" src="/logo.svg">
+        <h1 class="text-white pt-6 text-sm md:text-md lg:text-lg text-center font-bold tracking-widest">Compilations
+          Indépendantes
+        </h1>
        <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
          ↓
        </button>
@@ -22,82 +25,10 @@
        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
          media="all and (max-width: 640px)">
      </video>
-      <div class="mix hide bg-black w-full screen overflow-scroll flex items-center flex-col">
-        <button class="button button--close m-4 flex justify-center items-center z-50" @click="closePlayer()">
-          <svg width="20px" height="30px">
-            <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
-            <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
-          </svg>
-        </button>
-        <video class="mixPlayer w-full" controls ref="mixPlayer">
-          <!-- <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">
-          <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>
-            <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentLink">
-              {{ currentArtist.url }}
-            </a><br>
-            purchace the track:<br>
-            <a target="_blank" class="underline text-orange-500 hover:text-orange-400" :href="currentLink">
-              {{ currentLink }}
-            </a><br>
-            <br>
-          </p>
-        </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 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>
+        <compilationsList />
      </div>
    </section>
  </div>
@@ -105,106 +36,21 @@
 <script setup lang="ts">
 // SEO
 useSeoMeta({
-  title: 'evilSpins, compilations indépendantes',
-  ogTitle: 'evilSpins, compilations indépendantes',
-  description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
-  ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
+  title: 'evilSpins - compilations indépendantes',
+  ogTitle: 'evilSpins - compilations indépendantes',
+  description: 'evilSpins - compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
+  ogDescription: 'evilSpins - compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
  ogImage: 'https://evilspins.com/logo.svg'
 })

-interface Compilation {
-  id: string,
-  name: string,
-  duration: number,
-}
-
-// animate player
-const mixPlayer = ref()
-const mixPlayerSourceHD = ref('')
-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
-  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('.logo'))
-  fadeOut(document.querySelector('.animation'))
-  fadeIn(document.querySelector('.mix'))
-  fadeOut(document.querySelector('.shadow'))
-  mixPlayer.value.load()
-  mixPlayer.value.play()
-  mixPlayer.value.focus()
-}
-
-const closePlayer = () => {
-  fadeIn(document.querySelector('.animation'))
-  fadeIn(document.querySelector('.button'))
-  fadeIn(document.querySelector('.logo'))
-  fadeOut(document.querySelector('.mix'))
-  fadeIn(document.querySelector('.shadow'))
-  mixPlayer.value.pause()
-  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')
-}
-const fadeIn = (elt: HTMLElement) => {
-  elt.classList.remove('hide')
-}
+const dataStore = useDataStore()

 const scrollDown = function () {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
 }
-
-// load data
-const { data: tracksData } = await useFetch('/api/tracks')
-const { data: artistsData } = await useFetch('/api/artists')
-const { data: stylesData } = await useFetch('/api/styles')
-const { data: compilationsData } = await useFetch('/api/compilations')
-
-onMounted(() => {
-  setInterval(() => {
-    if (mixPlayer.value && currentCompilationId.value) {
-      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: Compilation) => {
-        if (compilation.id === currentCompilationId.value) {
-          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: { id: any; }) => artist.id === currentTrack.artist)
-          currentTitle.value = currentTrack.title
-          currentLink.value = currentTrack.link
-          currentCover.value = currentTrack.cover
-        }
-      })
-    }
-  }, 1000)
-})
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
 body {
  margin: 0;
  overflow-x: hidden;
--- a/plugins/01.atropos.ts
+++ b/plugins/01.atropos.ts
@@ -1,9 +1,9 @@
-import { defineNuxtPlugin } from '#app';
+import { defineNuxtPlugin } from '#app'

 export default defineNuxtPlugin(() => {
  if (process.client) {
    import('atropos/element').then(({ default: AtroposComponent }) => {
-      customElements.define('atropos-component', AtroposComponent);
-    });
+      customElements.define('atropos-component', AtroposComponent)
+    })
  }
-});
+})
--- a/public/zero/sky-a.jpg
+++ b/public/zero/sky-a.jpg
--- a/public/zero/zero-a.png
+++ b/public/zero/zero-a.png
--- a/public/zero/propeller-a.png
+++ b/public/zero/propeller-a.png
--- a/public/zero/sky-b.jpg
+++ b/public/zero/sky-b.jpg
--- a/public/zero/zero-b.png
+++ b/public/zero/zero-b.png
--- a/public/zero/propeller-b.png
+++ b/public/zero/propeller-b.png
--- a/server/api/tracks.ts
+++ b/server/api/tracks.ts
@@ -7,7 +7,7 @@ export default eventHandler(() => {
      artist: 0,
      start: 0,
      bpm: 0,
-      link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
+      url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
      cover: 'a3236746052',
    },
    {
@@ -17,7 +17,7 @@ export default eventHandler(() => {
      artist: 1,
      start: 393,
      bpm: 0,
-      link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
+      url: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2',
      cover: 'a1714786533',
    },
    {
@@ -27,7 +27,7 @@ export default eventHandler(() => {
      artist: 2,
      start: 892,
      bpm: 0,
-      link: 'https://fontainesdc.bandcamp.com/track/televised-mind',
+      url: 'https://fontainesdc.bandcamp.com/track/televised-mind',
      cover: 'a3772806156'
    },
    {
@@ -37,7 +37,7 @@ export default eventHandler(() => {
      artist: 3,
      start: 1138,
      bpm: 0,
-      link: 'https://howlinbananarecords.bandcamp.com/track/in-it',
+      url: 'https://howlinbananarecords.bandcamp.com/track/in-it',
      cover: 'a1720372066',
    },
    {
@@ -47,7 +47,7 @@ export default eventHandler(() => {
      artist: 4,
      start: 1245,
      bpm: 0,
-      link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
+      url: 'https://johnnymafia.bandcamp.com/track/bad-michel-3',
      cover: 'a0984622869',
    },
    {
@@ -57,7 +57,7 @@ export default eventHandler(() => {
      artist: 5,
      start: 1394,
      bpm: 0,
-      link: 'https://newcandys.bandcamp.com/track/overall',
+      url: 'https://newcandys.bandcamp.com/track/overall',
      cover: 'a0559661270',
    },
    {
@@ -67,7 +67,7 @@ export default eventHandler(() => {
      artist: 6,
      start: 1674,
      bpm: 0,
-      link: 'https://magicshoppe.bandcamp.com/track/blowup',
+      url: 'https://magicshoppe.bandcamp.com/track/blowup',
      cover: 'a1444895293',
    },
    {
@@ -77,7 +77,7 @@ export default eventHandler(() => {
      artist: 7,
      start: 1880,
      bpm: 0,
-      link: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
+      url: 'https://radiomartiko.bandcamp.com/track/guitare-jet',
      cover: 'a1494681687',
    },
    {
@@ -87,7 +87,7 @@ export default eventHandler(() => {
      artist: 8,
      start: 2024,
      bpm: 0,
-      link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
+      url: 'https://traams.bandcamp.com/track/intercontinental-radio-waves',
      cover: 'a0046738552',
    },
    {
@@ -97,7 +97,7 @@ export default eventHandler(() => {
      artist: 9,
      start: 2211,
      bpm: 0,
-      link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
+      url: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun',
      cover: 'a4102567047',
    },
    {
@@ -107,7 +107,7 @@ export default eventHandler(() => {
      artist: 10,
      start: 2559,
      bpm: 0,
-      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
+      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2',
      cover: 'a2203158939',
    },
    {
@@ -117,7 +117,7 @@ export default eventHandler(() => {
      artist: 0,
      start: 0,
      bpm: 0,
-      link: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
+      url: 'https://arakirecords.bandcamp.com/track/ce-que-r-v-le-l-clipse',
      cover: 'a3236746052',
    },
    {
@@ -127,7 +127,7 @@ export default eventHandler(() => {
      artist: 1,
      start: 263,
      bpm: 0,
-      link: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
+      url: 'https://the-kundalini-genie.bandcamp.com/track/bleedin-gums-mushroom',
      cover: 'a1714786533',
    },
    {
@@ -137,7 +137,7 @@ export default eventHandler(() => {
      artist: 2,
      start: 554,
      bpm: 0,
-      link: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
+      url: 'https://fontainesdc.bandcamp.com/track/a-lucid-dream',
      cover: 'a3772806156',
    },
    {
@@ -147,7 +147,7 @@ export default eventHandler(() => {
      artist: 3,
      start: 781,
      bpm: 0,
-      link: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
+      url: 'https://howlinbananarecords.bandcamp.com/track/lights-off',
      cover: 'a1720372066',
    },
    {
@@ -157,7 +157,7 @@ export default eventHandler(() => {
      artist: 4,
      start: 969,
      bpm: 0,
-      link: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
+      url: 'https://johnnymafia.bandcamp.com/track/im-sentimental-2',
      cover: 'a2333676849',
    },
    {
@@ -167,7 +167,7 @@ export default eventHandler(() => {
      artist: 5,
      start: 1128,
      bpm: 0,
-      link: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
+      url: 'https://newcandys.bandcamp.com/track/thrill-or-trip',
      cover: 'a0559661270',
    },
    {
@@ -177,7 +177,7 @@ export default eventHandler(() => {
      artist: 6,
      start: 1303,
      bpm: 0,
-      link: 'https://magicshoppe.bandcamp.com/track/redhead',
+      url: 'https://magicshoppe.bandcamp.com/track/redhead',
      cover: 'a0594426943',
    },
    {
@@ -187,7 +187,7 @@ export default eventHandler(() => {
      artist: 7,
      start: 1584,
      bpm: 0,
-      link: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
+      url: 'https://open.spotify.com/track/66voQIZAJ3zD3Eju2qtNjF',
      cover: 'a1494681687',
    },
    {
@@ -197,7 +197,7 @@ export default eventHandler(() => {
      artist: 8,
      start: 1749,
      bpm: 0,
-      link: 'https://traams.bandcamp.com/track/flowers',
+      url: 'https://traams.bandcamp.com/track/flowers',
      cover: 'a3644668199',
    },
    {
@@ -207,7 +207,7 @@ export default eventHandler(() => {
      artist: 9,
      start: 1924,
      bpm: 0,
-      link: 'https://blue-orchid.bandcamp.com/track/the-shade',
+      url: 'https://blue-orchid.bandcamp.com/track/the-shade',
      cover: 'a0804204790',
    },
    {
@@ -217,7 +217,7 @@ export default eventHandler(() => {
      artist: 10,
      start: 2185,
      bpm: 0,
-      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
+      url: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies',
      cover: 'a3647322740',
    },
  ]
--- a/stores/dataStore.ts
+++ b/stores/dataStore.ts
@@ -0,0 +1,51 @@
+import type { Compilation, Artist, Track } from '~/types/types'
+
+// stores/data.ts
+import { defineStore } from 'pinia'
+
+export const useDataStore = defineStore('data', {
+  state: () => ({
+    compilations: [] as Compilation[],  // Store your compilation data here
+    artists: [] as Artist[],       // Store artist data here
+    tracks: [] as Track[],        // Store track data here
+    isLoaded: false,                   // To track if data is already loaded
+  }),
+
+  actions: {
+    async loadData() {
+      if (this.isLoaded) return  // Avoid re-fetching if already loaded
+
+      // Fetch your data once (e.g., from an API or local JSON)
+      const { data: compilations } = await useFetch('/api/compilations')
+      const { data: artists } = await useFetch('/api/artists')
+      const { data: tracks } = await useFetch('/api/tracks')
+
+      // Set the data in the store
+      this.compilations = compilations.value
+      this.artists = artists.value
+      this.tracks = tracks.value
+      this.isLoaded = true
+    }
+  },
+
+  getters: {
+    // Obtenir tous les compilations
+    getAllCompilations: (state) => state.compilations,
+    getCompilationById: (state) => {
+      return (id: string) => {
+        return state.compilations.find(compilation => compilation.id === id)
+      }
+    },
+    // Obtenir toutes les pistes d'une compilation donnée
+    getTracksByCompilationId: (state) => (compilationId: string) => {
+      return state.tracks.filter(track => track.compilation === compilationId)
+    },
+    // Filtrer les artistes selon certains critères
+    getArtistById: (state) => (id: number) => state.artists.find(artist => artist.id === id),
+
+    // Obtenir toutes les pistes d'un artiste donné
+    getTracksByArtistId: (state) => (artistId: string) => {
+      return state.tracks.filter(track => track.artistId === artistId)
+    },
+  },
+})
--- a/types/types.ts
+++ b/types/types.ts
@@ -0,0 +1,26 @@
+// types.ts
+export interface Compilation {
+  id: string
+  name: string
+  duration: number
+  tracks?: Track[]
+}
+
+export interface Artist {
+  id: number
+  name: string
+  url: string
+  style: Array<number>
+  cover: string
+}
+
+export interface Track {
+  id: string
+  compilationId: string
+  title: string
+  artistId: number
+  artist?: Artist
+  start: number
+  link: string
+  cover: string
+}