From ac940cc27783e3415f0112e39b4f35f2e546924a Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Fri, 3 Mar 2023 09:52:03 +0100
Subject: [PATCH] fix: resolve progressbar issues

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
---
 front/src/components/Queue.vue          | 27 ++-----------------------
 front/src/components/audio/Player.vue   |  4 +---
 front/src/style/components/_player.scss |  5 ++++-
 front/src/style/components/_queue.scss  | 10 ++++++++-
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 118797e0f..5ce0ce27a 100644
--- a/front/src/components/Queue.vue
+++ b/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>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index b2dac87cf..2bd5755a8 100644
--- a/front/src/components/audio/Player.vue
+++ b/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}%)` }"
diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss
index e2323cd6a..8e8af4065 100644
--- a/front/src/style/components/_player.scss
+++ b/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;
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index c5ecc00da..abd7eaef5 100644
--- a/front/src/style/components/_queue.scss
+++ b/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;