Update track progress bars with css transitions

front/src/components/Queue.vue

@@ -57,7 +57,7 @@
                       :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
                       @click="touchProgress">
                       <div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
-                      <div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
+                      <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
                     </div>
                   </div>
                   <div class="progress-area" v-else>

front/src/components/audio/Player.vue

@@ -7,7 +7,7 @@
       <div
         :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
         <div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
-        <div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
+        <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
       </div>
       <div class="controls-row">
 

front/src/store/player.js

@@ -88,7 +88,7 @@ export default {
       return time.parse(Math.round(state.currentTime))
     },
     progress: state => {
-      return Math.round((state.currentTime / state.duration * 100) * 10) / 10
+      return state.currentTime / state.duration
     }
   },
   actions: {

front/src/style/components/_player.scss

@@ -75,7 +75,9 @@
   .ui.progress:not([data-percent]):not(.indeterminate)
     .bar.position:not(.buffer) {
     background: var(--vibrant-color);
-    min-width: 0;
+    width: 100%;
+    transition: transform 1.1s linear 0s;
+    transform-origin: left center 0px;
   }
 
   .track-controls {

front/src/style/components/_queue.scss

@@ -174,6 +174,9 @@
   .ui.progress:not([data-percent]):not(.indeterminate)
     .bar.position:not(.buffer) {
     background: var(--vibrant-color);
+    width: 100%;
+    transition: transform 1.1s linear 0s;
+    transform-origin: left center 0px;
   }
 
   .indicating.progress .bar {