32 lines
845 B
Vue
32 lines
845 B
Vue
<template>
|
|
<button tabindex="-1" class="play-button" :class="{ loading: isLoading }" :disabled="isLoading">
|
|
<template v-if="props.isLoading">
|
|
<img src="/loader.svg" alt="Chargement" class="size-16" />
|
|
</template>
|
|
<template v-else>
|
|
{{ props.isPlaying ? 'I I' : '▶' }}
|
|
</template>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
isLoading?: boolean;
|
|
isPlaying?: boolean;
|
|
}>(), {
|
|
isLoading: false,
|
|
isPlaying: false
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.play-button {
|
|
@apply pointer-events-none rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-100 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold;
|
|
}
|
|
|
|
.loading,
|
|
.play-button-changed {
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|