<template>
	<div @click="(event) => audio.currentTime = event.x * duration / event.target.offsetWidth">
		<NcProgressBar size="medium" :value="currentTime * 100 / duration" />
	</div>
</template>

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

export default {
	name: 'ProgressBar',
	components: {
		NcProgressBar,
	},
	props: {
		currentTime: {
			type: Number,
			required: true,
		},
		duration: {
			type: Number,
			required: true,
		},
	},
	computed: {
		audio() {
			return document.getElementById('audio-player')
		},
	},
}
</script>

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