<template>
	<div class="controls">
		<PauseButton v-if="!player.paused"
			class="pointer"
			:size="50"
			@click="$store.dispatch('player/pause')" />
		<PlayButton v-if="player.paused"
			class="pointer"
			:size="50"
			@click="$store.dispatch('player/play')" />
	</div>
</template>

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

export default {
	name: 'Controls',
	components: {
		PauseButton,
		PlayButton,
	},
	computed: {
		player() {
			return this.$store.state.player
		},
	},
}
</script>

<style scoped>
	.controls {
		display: flex;
	}

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