From eaf24e4deeb5326e0361051929421360a507e4cc Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sun, 29 Oct 2023 19:11:50 +0100
Subject: [PATCH] fix progress bar

---
 frontend/src/components/fancyView.vue  |  3 ++-
 frontend/src/components/player.vue     |  3 ++-
 frontend/src/components/sliderView.vue | 24 +++++++++++++++++-------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/fancyView.vue b/frontend/src/components/fancyView.vue
index 7d68fd1..608de2e 100644
--- a/frontend/src/components/fancyView.vue
+++ b/frontend/src/components/fancyView.vue
@@ -8,7 +8,8 @@
                 <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
                 <div>{{ durationBeautified }}</div>
             </div>
-            <sliderView :active="audioLoaded" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"></sliderView>
+            <sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"
+                name="fancy"></sliderView>
         </div>
     </div>
 </template>
diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue
index 9e1461a..eb7515b 100644
--- a/frontend/src/components/player.vue
+++ b/frontend/src/components/player.vue
@@ -32,7 +32,8 @@
                 <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
                 <div>{{ durationBeautified }}</div>
             </div>
-            <sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"></sliderView>
+            <sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"
+                name="player"></sliderView>
         </div>
         <FancyView v-if="isShowingFancyView" :song="playingSong" @control="instruction => { control( instruction ) }" :isPlaying="isPlaying"
             :shuffle="isShuffleEnabled" :repeatMode="repeatMode" :durationBeautified="durationBeautified" 
diff --git a/frontend/src/components/sliderView.vue b/frontend/src/components/sliderView.vue
index f344db4..3136795 100644
--- a/frontend/src/components/sliderView.vue
+++ b/frontend/src/components/sliderView.vue
@@ -1,6 +1,7 @@
 <template>
     <div style="width: 100%; height: 100%;">
-        <progress id="progress-slider" :value="sliderProgress" max="1000" @mousedown="( e ) => { setPos( e ) }" :class="active ? '' : 'slider-inactive'"></progress>
+        <progress :id="'progress-slider-' + name" class="progress-slider" :value="sliderProgress" max="1000" @mousedown="( e ) => { setPos( e ) }" 
+            :class="active ? '' : 'slider-inactive'"></progress>
         <div v-if="active" id="slider-knob" @mousedown="( e ) => { startMove( e ) }"
             :style="'left: ' + ( parseInt( originalPos ) + parseInt( sliderPos ) ) + 'px;'">
             <div id="slider-knob-style"></div>
@@ -13,7 +14,7 @@
 </template>
 
 <style scoped>
-    #progress-slider {
+    .progress-slider {
         width: 100%;
         margin: 0;
         position: absolute;
@@ -24,7 +25,7 @@
         background-color: #baf4c9;
     }
 
-    #progress-slider::-webkit-progress-value {
+    .progress-slider::-webkit-progress-value {
         background-color: #baf4c9;
     }
 
@@ -85,6 +86,10 @@ export default {
         active: {
             type: Boolean,
             default: true,
+        },
+        name: {
+            type: String,
+            default: '1',
         }
     },
     data () {
@@ -99,7 +104,7 @@ export default {
     methods: {
         handleDrag( e ) {
             if ( this.isDragging ) {
-                if ( 0 < this.originalPos + e.screenX - this.offset && this.originalPos + e.screenX - this.offset < document.getElementById( 'progress-slider' ).clientWidth - 5 ) {
+                if ( 0 < this.originalPos + e.screenX - this.offset && this.originalPos + e.screenX - this.offset < document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) {
                     this.sliderPos = e.screenX - this.offset;
                     this.calcProgressPos();
                 }
@@ -126,19 +131,24 @@ export default {
             }
         },
         calcProgressPos() {
-            this.sliderProgress = Math.ceil( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) * 1000 );
+            this.sliderProgress = Math.ceil( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * 1000 );
         },
         calcPlaybackPos() {
-            this.$emit( 'pos', Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) * this.duration ) );
+            this.$emit( 'pos', Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * this.duration ) );
         }
     },
     watch: {
         position() {
             if ( !this.isDragging ) {
                 this.sliderProgress = Math.ceil( this.position / this.duration * 1000 + 2 );
-                this.originalPos = Math.ceil( this.position / this.duration * ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) );
+                this.originalPos = Math.ceil( this.position / this.duration * ( document.getElementById( 'progress-slider-' + this.name ).scrollWidth - 5 ) );
             }
         }
+    },
+    created() {
+        setTimeout( () => {
+            console.log( document.getElementById( 'progress-slider-' + this.name ).scrollWidth );
+        }, 1000 );
     }
 }
 </script>
\ No newline at end of file