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