<template>
	<input
		v-if="duration"
		class="progress"
		:max="duration"
		min="0"
		type="range"
		:value="currentTime"
		@change="
			(event) => seek(parseInt((event.target as HTMLInputElement).value))
		" />
</template>

<script lang="ts">
import { mapActions, mapState } from 'pinia'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'ProgressBar',
	computed: {
		...mapState(usePlayer, ['duration', 'currentTime']),
	},
	methods: {
		...mapActions(usePlayer, ['seek']),
	},
}
</script>

<style scoped>
.progress {
	height: 4px;
	min-height: 4px;
	position: absolute;
	top: -2px;
	width: 99%;
}
</style>
