evilSpins v1

app/components/PlayButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <button
+    class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
+    :class="{ loading: isLoading }"
+    :disabled="isLoading"
+  >
+    <template v-if="isLoading">
+      <img src="/loader.svg" alt="Chargement" class="size-16" />
+    </template>
+    <template v-else>
+      {{ isPlaying ? 'I I' : '▶' }}
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { usePlayerStore } from '~/store/player'
+import type { Box, Track } from '~/../types/types'
+
+const playerStore = usePlayerStore()
+const props = defineProps<{ objectToPlay: Box | Track }>()
+
+const isPlaying = computed(() => {
+  if (!playerStore.currentTrack) return false
+  return (
+    playerStore.isPlaying &&
+    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
+      playerStore.currentTrack?.id === props.objectToPlay.id)
+  )
+})
+
+const isLoading = computed(() => {
+  if (!playerStore.currentTrack || !playerStore.isLoading) return false
+  return (
+    playerStore.currentTrack.boxId === props.objectToPlay.id ||
+    playerStore.currentTrack.id === props.objectToPlay.id
+  )
+})
+</script>
+
+<style>
+.loading {
+  opacity: 1 !important;
+}
+</style>