71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<div class="zone-music">
|
|
<div class="pretty p-switch p-fill">
|
|
<div>
|
|
<label for="use-music" :class="{ disabled: withMusic }"
|
|
>concentré</label
|
|
>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
name="use-music"
|
|
id="use-music"
|
|
:checked="withMusic"
|
|
@change="setWithMusic(!withMusic)"
|
|
/>
|
|
<div class="state p-success">
|
|
<label for="use-music" :class="{ disabled: !withMusic }">détente</label>
|
|
</div>
|
|
</div>
|
|
<ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from '@vue/composition-api'
|
|
import { useMusic } from '@/hooks/useMusic'
|
|
|
|
export default defineComponent({
|
|
name: 'ZoneMusic',
|
|
components: {
|
|
ChilledMusic: () => import('@/components/ChilledMusic.vue')
|
|
},
|
|
props: {
|
|
play: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
setup(_, { emit }) {
|
|
const { withMusic, setWithMusic } = useMusic()
|
|
|
|
const play = () => {
|
|
emit('play')
|
|
}
|
|
|
|
const pause = () => {
|
|
emit('pause')
|
|
}
|
|
|
|
return { withMusic, setWithMusic, play, pause }
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/variables';
|
|
|
|
.pretty {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
label {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.disabled {
|
|
color: darken($color, 60);
|
|
}
|
|
</style>
|