<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>