<template>
	<div @click="(event) => $store.dispatch('player/seek', event.x * player.duration / event.target.offsetWidth)">
		<NcProgressBar class="bar" :value="player.currentTime * 100 / player.duration" />
	</div>
</template>

<script>
import { NcProgressBar } from '@nextcloud/vue'

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

<style scoped>
	div {
		cursor: pointer;
	}

	.bar {
		height: 10px;
	}
</style>
