repod/src/components/Player/Controls.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>