From 9d7d08f0dccf02efd2fb465f7710a5e108d5c991 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Tue, 30 Jan 2024 17:34:20 +0100
Subject: [PATCH] fix: add a easier-to-see indicator at playhead (close #52)

---
 src/components/Player/ProgressBar.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Player/ProgressBar.vue b/src/components/Player/ProgressBar.vue
index 49b7e55..f52437d 100644
--- a/src/components/Player/ProgressBar.vue
+++ b/src/components/Player/ProgressBar.vue
@@ -1,17 +1,15 @@
 <template>
-	<div class="pointer" @click="(event) => $store.dispatch('player/seek', event.x * player.duration / event.target.offsetWidth)">
-		<NcProgressBar size="medium" :value="player.currentTime * 100 / player.duration" />
-	</div>
+	<input class="progress"
+		:max="player.duration"
+		min="0"
+		type="range"
+		:value="player.currentTime"
+		@change="(event) => $store.dispatch('player/seek', event.target.value)">
 </template>
 
 <script>
-import { NcProgressBar } from '@nextcloud/vue'
-
 export default {
 	name: 'ProgressBar',
-	components: {
-		NcProgressBar,
-	},
 	computed: {
 		player() {
 			return this.$store.state.player
@@ -21,7 +19,11 @@ export default {
 </script>
 
 <style scoped>
-	.pointer {
-		cursor: pointer;
+	.progress {
+		height: 4px;
+		min-height: 4px;
+		position: absolute;
+		top: -2px;
+		width: 99%;
 	}
 </style>