42 lines
790 B
Vue
42 lines
790 B
Vue
|
<template>
|
||
|
|
<fragment>
|
||
|
|
<PauseButton v-if="!paused"
|
||
|
|
class="pointer"
|
||
|
|
:size="50"
|
||
|
|
@click="() => audio.pause()" />
|
||
|
|
<PlayButton v-if="paused"
|
||
|
|
class="pointer"
|
||
|
|
:size="50"
|
||
|
|
@click="() => audio.play()" />
|
||
|
|
<StopButton class="pointer"
|
||
|
|
:size="30"
|
||
|
|
@click="$store.commit('player/play', null)" />
|
||
|
|
</fragment>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import PauseButton from 'vue-material-design-icons/Pause.vue'
|
||
|
|
import PlayButton from 'vue-material-design-icons/Play.vue'
|
||
|
|
import StopButton from 'vue-material-design-icons/Stop.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Controls',
|
||
|
|
components: {
|
||
|
|
PauseButton,
|
||
|
|
PlayButton,
|
||
|
|
StopButton,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
paused: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
audio() {
|
||
|
|
return document.getElementById('audio-player')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|