fix: resolve progressbar issues

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>

front/src/components/Queue.vue

@@ -346,39 +346,16 @@ if (!isWebGLSupported) {
             </button>
           </div>
           <div class="progress-wrapper">
-            <div
-              v-if="currentTrack && !errored"
-              class="progress-area"
-            >
+            <div class="progress-area">
               <div
                 ref="progressBar"
-                :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
+                :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio && !errored}, 'progress']"
                 @click="touchProgress"
               >
                 <div
                   class="buffer bar"
                   :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
                 />
-                <div
-                  class="position bar"
-                  :style="{
-                    animationDuration: duration + 's',
-                    animationPlayState: isPlaying
-                      ? 'running'
-                      : 'paused'
-                  }"
-                />
-              </div>
-            </div>
-            <div
-              v-else
-              class="progress-area"
-            >
-              <div
-                ref="progress"
-                :class="['ui', 'small', 'vibrant', 'progress']"
-              >
-                <div class="buffer bar" />
                 <div class="position bar" />
               </div>
             </div>

front/src/components/audio/Player.vue

@@ -146,9 +146,7 @@ const hideArtist = () => {
           class="buffer bar"
           :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
         />
-        <div
-          class="position bar"
-        />
+        <div class="position bar" />
         <div
           class="seek bar"
           :style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }"

front/src/style/components/_player.scss

@@ -48,7 +48,6 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: translateX(calc(var(--fw-track-progress) - 100%));
     transform-origin: top left;
     will-change: transform;
     position: absolute;
@@ -59,6 +58,10 @@
       transition: opacity .2s ease;
       mix-blend-mode: overlay;
     }
+
+    &.position {
+      transform: translate3d(calc(var(--fw-track-progress) - 100%), 0, 0);
+    }
   }
   .ui.progress:hover .bar.seek {
     opacity: 0.4;

front/src/style/components/_queue.scss

@@ -160,10 +160,14 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: translateX(calc(var(--fw-track-progress) - 100%));
     transform-origin: top left;
     will-change: transform;
+    
+    &.position {
+      transform: translate3d(calc(var(--fw-track-progress) - 100%), 0, 0);
+    }
   }
+
   .ui.progress .buffer.bar {
     position: absolute;
     background-color: rgba(255, 255, 255, 0.15);
@@ -189,6 +193,10 @@
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
+    
+    &:not(.buffer) {
+      background: transparent !important;
+    }
   }
   .ui.progress {
     margin: 0.5rem 0;