repod/src/components/Player/Controls.vue

<template>
	<fragment>
		<PauseButton v-if="!paused"
			class="pointer"
			:size="50"
			@click="() => audio.pause()" />
		<PlayButton v-if="paused"
			class="pointer"
			:size="50"
			@click="() => audio.play()" />
		<StopButton class="pointer"
			:size="30"
			@click="$store.commit('player/play', null)" />
	</fragment>
</template>

<script>
import PauseButton from 'vue-material-design-icons/Pause.vue'
import PlayButton from 'vue-material-design-icons/Play.vue'
import StopButton from 'vue-material-design-icons/Stop.vue'

export default {
	name: 'Controls',
	components: {
		PauseButton,
		PlayButton,
		StopButton,
	},
	props: {
		paused: {
			type: Boolean,
			required: true,
		},
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
	},
}
</script>

<style scoped>
	.pointer {
		cursor: pointer;
	}
</style>