43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<button tabindex="-1"
|
|
class="play-button pointer-events-none 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 { usePlatineStore } from '~/store/platine'
|
|
import type { Box, Track } from '~/../types/types'
|
|
|
|
const platineStore = usePlatineStore()
|
|
const props = defineProps<{ objectToPlay: Box | Track }>()
|
|
|
|
const isCurrentTrack = computed(() => {
|
|
if (!('activeSide' in props.objectToPlay)) {
|
|
return platineStore.currentTrack?.id === props.objectToPlay.id
|
|
}
|
|
return false
|
|
})
|
|
|
|
const isPlaying = computed(() => {
|
|
return platineStore.isPlaying && isCurrentTrack.value
|
|
})
|
|
|
|
const isLoading = computed(() => {
|
|
return platineStore.isLoadingTrack && isCurrentTrack.value
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.loading,
|
|
.play-button-changed {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|