smoother progress bar with requestAnimationFrame

dlibrary/static/viewer.css

@@ -120,4 +120,5 @@ html, body {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 400;
 }

dlibrary/static/viewer.js

@@ -1,4 +1,3 @@
-const PROGRESS_UPDATE_INTERVAL = 50;
 const PRELOAD_BACKWARD = 2;
 const PRELOAD_FORWARD = 8;
 
@@ -8,28 +7,37 @@ document.addEventListener('DOMContentLoaded', () => {
 
     let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
     let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
-    let paused = true;
-    let interval;
-    let elapsed = 0;
     let rtl = (localStorage.getItem(`${WORK_ID}-rtl`) !== "false");
+    let paused = true;
 
-    function startTimer() {
-        if (interval) {
-            clearInterval(interval);
+    let elapsed = 0;
+    let timerLastRun = null;
+    let timerAnimationRequestID = null;
+
+    function requestTimer() {
+        timerAnimationRequestID = window.requestAnimationFrame(runTimer);
+    }
+
+    function runTimer(now) {
+        if (paused) {
+            return;
         }
-        interval = setInterval(
-            function () {
-                if (paused) {
-                    return;
-                }
-                elapsed += PROGRESS_UPDATE_INTERVAL;
-                if (elapsed >= duration*1000) {
-                    changePage(currentPage + 1);
-                }
-                updateBar();
-            },
-            PROGRESS_UPDATE_INTERVAL,
-        );
+
+        if (timerLastRun === null) {
+            elapsed = 0;
+        } else {
+            elapsed += now - timerLastRun;
+        }
+        timerLastRun = now;
+
+        if (elapsed >= duration*1000) {
+            changePage(currentPage + 1);
+            elapsed = 0;
+        }
+
+        updateBar();
+
+        requestTimer();
     }
 
     const progressBar = document.getElementById('progress');
@@ -38,10 +46,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function stopTimer() {
-        if (interval) {
-            clearInterval(interval);
-            interval = null;
+        if (timerAnimationRequestID) {
+            window.cancelAnimationFrame(timerAnimationRequestID);
+            timerAnimationRequestID = null;
         }
+        timerLastRun = null;
         elapsed = 0;
         updateBar();
     }
@@ -68,6 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function changePage(pageNum) {
         elapsed = 0;
+        updateBar();
 
         const previous = IMAGES[currentPage];
         const current = IMAGES[pageNum];
@@ -98,7 +108,7 @@ document.addEventListener('DOMContentLoaded', () => {
             stopTimer();
         } else {
             durationDisplay.style.textDecoration = "";
-            startTimer();
+            requestTimer();
         }
     }