41 lines
666 B
Vue
41 lines
666 B
Vue
<template>
|
|
<div class="controls">
|
|
<PauseIcon v-if="!player.paused"
|
|
class="pointer"
|
|
:size="50"
|
|
@click="$store.dispatch('player/pause')" />
|
|
<PlayIcon v-if="player.paused"
|
|
class="pointer"
|
|
:size="50"
|
|
@click="$store.dispatch('player/play')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PauseIcon from 'vue-material-design-icons/Pause.vue'
|
|
import PlayIcon from 'vue-material-design-icons/Play.vue'
|
|
|
|
export default {
|
|
name: 'Controls',
|
|
components: {
|
|
PauseIcon,
|
|
PlayIcon,
|
|
},
|
|
computed: {
|
|
player() {
|
|
return this.$store.state.player
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.controls {
|
|
display: flex;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|