From ebbacf652e433ea3f7ce5b900b4b4211e484e9a0 Mon Sep 17 00:00:00 2001
From: Terry Geng <terry@terriex.com>
Date: Thu, 4 Jun 2020 12:02:59 +0800
Subject: [PATCH] fix: workaround for web interface eat up too much cpu,
 mentioned in #166

---
 static/js/custom.js  | 7 ++++---
 templates/index.html | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index 6ca98df..dbbbb7b 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -1049,9 +1049,9 @@ function updatePlayerPlayhead(playhead){
         setProgressBar(playerBar, player_playhead_position / currentPlayingItem.duration, secondsToStr(player_playhead_position));
         if (playing) {
             playhead_timer = setInterval(function () {
-                player_playhead_position += 0.1;
+                player_playhead_position += 0.3;
                 setProgressBar(playerBar, player_playhead_position / currentPlayingItem.duration, secondsToStr(player_playhead_position));
-            }, 100); // delay in milliseconds
+            }, 300); // delay in milliseconds
         }
     } else {
         if (playing) {
@@ -1092,9 +1092,10 @@ function isOverflown(element) {
 }
 
 function setProgressBar(bar, progress, text="") {
+    let prog_pos = (-1 * (1 - progress)*bar.scrollWidth).toString();
     let prog_str = (progress*100).toString();
     bar.setAttribute("aria-valuenow", prog_str);
-    bar.style.width = prog_str + "%";
+    bar.style.transform = "translateX(" + prog_pos + "px)";
     bar.textContent = text;
 }
 
diff --git a/templates/index.html b/templates/index.html
index 8d681eb..18ac0db 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -454,8 +454,8 @@
                 </div>
                 <span id="playerArtist">Artist</span>
                 <div id="playerBarBox" class="progress">
-                    <div id="playerBar" class="progress-bar" role="progressbar" aria-valuenow="50"
-                         aria-valuemin="0" aria-valuemax="100"></div>
+                    <div id="playerBar" class="progress-bar pr-2" role="progressbar" aria-valuenow="50"
+                         aria-valuemin="0" aria-valuemax="100" style="width: 100%; text-align:right; transform: translateX(-100%)"></div>
                 </div>
             </div>
         </div>
@@ -528,8 +528,8 @@
                             <span class="uploadItemTitle mr-3"></span>
                             <span class="uploadItemError text-danger"></span>
                             <div class="progress" style="margin-top: 5px; height: 10px;">
-                                <div class="uploadProgress progress-bar" role="progressbar" aria-valuenow="0"
-                                     aria-valuemin="0" aria-valuemax="100"></div>
+                                <div class="uploadProgress progress-bar pr-2" role="progressbar" aria-valuenow="0"
+                                     aria-valuemin="0" aria-valuemax="100" style="width: 100%; text-align:right; transform: translateX(-100%)"></div>
                             </div>
                         </div>
                     </div>