38 lines
729 B
Vue
38 lines
729 B
Vue
<template>
|
|
<div class="controls">
|
|
<PauseIcon v-if="!paused" class="pointer" :size="50" @click="pause" />
|
|
<PlayIcon v-if="paused" class="pointer" :size="50" @click="play" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapActions, mapState } from 'pinia'
|
|
import PauseIcon from 'vue-material-design-icons/Pause.vue'
|
|
import PlayIcon from 'vue-material-design-icons/Play.vue'
|
|
import { usePlayer } from '../../store/player.ts'
|
|
|
|
export default {
|
|
name: 'Controls',
|
|
components: {
|
|
PauseIcon,
|
|
PlayIcon,
|
|
},
|
|
computed: {
|
|
...mapState(usePlayer, ['paused']),
|
|
},
|
|
methods: {
|
|
...mapActions(usePlayer, ['play', 'pause']),
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.controls {
|
|
display: flex;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|