46 lines
1.3 KiB
Vue
46 lines
1.3 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 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>
|