58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<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 isCurrentBox = computed(() => {
|
|
if ('activeSide' in props.objectToPlay) {
|
|
// Vérifier si la piste courante appartient à cette box
|
|
if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
|
|
// Si c'est une compilation, on vérifie le side actif
|
|
if (props.objectToPlay.type === 'compilation') {
|
|
return playerStore.currentTrack.side === props.objectToPlay.activeSide
|
|
}
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
return false
|
|
})
|
|
|
|
const isCurrentTrack = computed(() => {
|
|
if (!('activeSide' in props.objectToPlay)) {
|
|
return playerStore.currentTrack?.id === props.objectToPlay.id
|
|
}
|
|
return false
|
|
})
|
|
|
|
const isPlaying = computed(() => {
|
|
return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
|
|
})
|
|
|
|
const isLoading = computed(() => {
|
|
return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.loading,
|
|
.play-button-changed {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|