fix: add a easier-to-see indicator at playhead (close #52)

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)">
+	<input class="progress"
-		<NcProgressBar size="medium" :value="player.currentTime * 100 / player.duration" />
+		:max="player.duration"
-	</div>
+		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 {
+	.progress {
-		cursor: pointer;
+		height: 4px;
+		min-height: 4px;
+		position: absolute;
+		top: -2px;
+		width: 99%;
 	}
 </style>