30 lines
794 B
Vue
30 lines
794 B
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">
|
|
const props = withDefaults(defineProps<{
|
|
isLoading?: boolean;
|
|
isPlaying?: boolean;
|
|
}>(), {
|
|
isLoading: false,
|
|
isPlaying: false
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.loading,
|
|
.play-button-changed {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|