Webplayer: Time Played Interpolation, Improvements (#1200)

* add mission date of 2.2 release (#1160) * update to next version number * fixed date for 2.2 release * go back for commit to master * Set Own Repo * Revert "Set Own Repo" This reverts commit 6d504e5. * Interpolate played time to improve UX feeling (something is happening/playing) * Solved problems of parallel put and get request of player.php Co-authored-by: s-martin <[email protected]>
MiczFlor · Feb 21, 2021 · 15885e7 · 15885e7
1 parent 4421698
commit 15885e7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/htdocs/inc.loadControls.php b/htdocs/inc.loadControls.php
@@ -95,6 +95,7 @@ function play() {
     }
 
     function pause() {
+        clearInterval(JUKEBOX.interval);
         executePlayerCommand('pause', () => {
             $('#play').css('display', 'inline-block');
             $('#pause').css('display', 'none');

diff --git a/htdocs/js/jukebox.js b/htdocs/js/jukebox.js
@@ -24,11 +24,29 @@ function init() {
 }
 
 function loadStatusRepeat() {
+    clearTimeout(JUKEBOX.timeout);
+    clearInterval(JUKEBOX.interval);
     loadStatus(() => {
-        setTimeout(loadStatusRepeat, 5000);
+        var counter = 0,
+        interval  = setInterval(function () {
+            interpolateTime();
+            if (++counter == 5) {
+                clearInterval(interval);
+            }
+        },1000)
+        JUKEBOX.interval = interval;
+        JUKEBOX.timeout = setTimeout(loadStatusRepeat, 5000);
     });
 }
 
+function interpolateTime()
+{
+    if (JUKEBOX.playerInfo.state == "play" && JUKEBOX.playerInfo.elapsed < JUKEBOX.playlistInfo.albumLength){
+        ++JUKEBOX.playerInfo.elapsed;
+    }
+    notify(JUKEBOX.timeListener, JUKEBOX.playerInfo.time);
+}
+
 
 function loadStatus(completion) {
     $.ajax({
@@ -194,6 +212,7 @@ function playSingleFile(file) {
 
 function executePlayerCommand(command, completion, value) {
     hideApiError();
+    clearTimeout(JUKEBOX.timeout);
     $.ajax({
         url: 'api/player.php',
         method: 'PUT',
@@ -204,8 +223,10 @@ function executePlayerCommand(command, completion, value) {
              completion(data);
          }
      }).error(error => {
-         $("#api-alert").html(`An error occorured: ${error.responseText}`);
+         $("#api-alert").html(`An error occured: ${error.responseText}`);
          showApiError();
+     }).complete(data => {
+        loadStatusRepeat();
      });
 }