smoother progress bar with requestAnimationFrame

dlibrary/dlibrary.py

@@ -373,11 +373,14 @@ def collate(args):
     collation_staging_area = args.destdir / 'site' / 'images-staging'
     collation_staging_area.mkdir(parents=True)
 
+    collation_area = args.destdir / 'site' / 'images'
+    collation_area.mkdir(parents=True, exist_ok=True)
+
     for work_path in extraction_dir.iterdir():
         work_id = work_path.name
 
-        collation_dir = args.destdir / 'site' / 'images' / work_id
+        work_collation_dir = collation_area / work_id
-        if collation_dir.exists():
+        if work_collation_dir.exists():
             continue
 
         virtual = cur.execute("SELECT virtual FROM works WHERE id = ?", (work_id,)).fetchone()
@@ -389,7 +392,7 @@ def collate(args):
         pages_collated = collate_from_paths([hint_map.get(work_id, work_path)], work_staging_dir, 0, [])
         if pages_collated:
             print(f'Collated {pages_collated} pages for {work_id}')
-            work_staging_dir.rename(collation_dir)
+            work_staging_dir.rename(work_collation_dir)
         else:
             if work_staging_dir.is_dir():
                 for f in work_staging_dir.iterdir():
@@ -603,13 +606,16 @@ def manual_collate(args):
     else:
         groups = [[extraction_dir / work_id]]
 
-    collation_dir = args.destdir / 'site' / 'images' / work_id
+    collation_area = args.destdir / 'site' / 'images'
-    if collation_dir.exists():
+    collation_area.mkdir(parents=True, exist_ok=True)
-        if len(list(collation_dir.iterdir())) > 0:
+
+    work_collation_dir = collation_area / work_id
+    if work_collation_dir.exists():
+        if len(list(work_collation_dir.iterdir())) > 0:
             print(f'Collation directory already exists!')
             return
         else:
-            collation_dir.rmdir()
+            work_collation_dir.rmdir()
 
     nonexistent = [path for group in (groups + [exclusions]) for path in group if not path.exists()]
     if len(nonexistent) > 0:
@@ -637,7 +643,7 @@ def manual_collate(args):
 
     if pages_collated:
         print(f'Collated {pages_collated} pages for {work_id}')
-        work_staging_dir.rename(collation_dir)
+        work_staging_dir.rename(work_collation_dir)
     else:
         for f in work_staging_dir.iterdir():
             f.unlink()

dlibrary/static/viewer.css

@@ -8,6 +8,8 @@ html, body {
 #controls {
     opacity: 0.8;
     animation: 2s linear forwards fade;
+    position: relative;
+    z-index: 300;
 }
 
 @keyframes fade {
@@ -62,20 +64,28 @@ html, body {
     bottom: 0px;
 }
 
-#viewer-images {
+.image-container img {
-    display: none;
+    position: fixed;
-}
+    left: 0;
-
+    top: 0;
-#image-container {
     height: 100vh;
     width: 100vw;
-    background-size: contain;
+    object-fit: contain;
-    background-repeat: no-repeat;
+    object-position: 50% 50%;
-    background-position: center;
+    background-color: #111;
+}
+
+#current-image img {
+    z-index: 100;
+}
+
+#preload-images img {
+    z-index: 0;
 }
 
 #page-num, #duration {
     position: fixed;
+    z-index: 200;
     font-size: 14pt;
     top: 10px;
     font-weight: bold;
@@ -110,4 +120,5 @@ html, body {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 400;
 }

dlibrary/static/viewer.js

@@ -1,31 +1,43 @@
-const PROGRESS_UPDATE_INTERVAL = 50;
+const PRELOAD_BACKWARD = 2;
+const PRELOAD_FORWARD = 8;
 
 document.addEventListener('DOMContentLoaded', () => {
-    const pages = Array.from(document.querySelectorAll('img.viewer-image'));
+    const currentImage = document.getElementById('current-image');
+    const preloadImages = document.getElementById('preload-images');
+
     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() {
+    let elapsed = 0;
-        if (interval) {
+    let timerLastRun = null;
-            clearInterval(interval);
+    let timerAnimationRequestID = null;
+
+    function requestTimer() {
+        timerAnimationRequestID = window.requestAnimationFrame(runTimer);
     }
-        interval = setInterval(
+
-            function () {
+    function runTimer(now) {
         if (paused) {
             return;
         }
-                elapsed += PROGRESS_UPDATE_INTERVAL;
+
+        if (timerLastRun === null) {
+            elapsed = 0;
+        } else {
+            elapsed += now - timerLastRun;
+        }
+        timerLastRun = now;
+
         if (elapsed >= duration*1000) {
             changePage(currentPage + 1);
+            elapsed = 0;
         }
+
         updateBar();
-            },
+
-            PROGRESS_UPDATE_INTERVAL,
+        requestTimer();
-        );
     }
 
     const progressBar = document.getElementById('progress');
@@ -34,34 +46,54 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function stopTimer() {
-        if (interval) {
+        if (timerAnimationRequestID) {
-            clearInterval(interval);
+            window.cancelAnimationFrame(timerAnimationRequestID);
-            interval = null;
+            timerAnimationRequestID = null;
         }
+        timerLastRun = null;
         elapsed = 0;
         updateBar();
     }
 
+    function imageSrc(s) {
+        const img = new Image();
+        img.src = s;
+        return img;
+    }
+
+    function preload() {
+        if (!currentImage.getElementsByTagName('img')[0].complete) {
+            setTimeout(preload, 50);
+            return;
+        }
+
+        preloadImages.replaceChildren(...(
+            IMAGES.slice(
+                Math.max(currentPage - PRELOAD_BACKWARD, 0),
+                currentPage + PRELOAD_FORWARD + 1,
+            ).map(imageSrc)
+        ));
+    }
+
     function changePage(pageNum) {
         elapsed = 0;
+        updateBar();
 
-        const previous = pages[currentPage];
+        const previous = IMAGES[currentPage];
-        const current = pages[pageNum];
+        const current = IMAGES[pageNum];
 
         if (current == null) {
             return;
         }
 
-        previous.classList.remove('current');
-        current.classList.add('current');
-
         currentPage = pageNum;
         localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);
 
-        const display = document.getElementById('image-container');
+        currentImage.replaceChildren(imageSrc(current));
-        display.style.backgroundImage = `url("${current.src}")`;
 
         document.getElementById('current-page').innerText = (pageNum + 1).toLocaleString();
+
+        setTimeout(preload, 1);
     }
 
     const durationDisplay = document.getElementById('duration');
@@ -76,7 +108,7 @@ document.addEventListener('DOMContentLoaded', () => {
             stopTimer();
         } else {
             durationDisplay.style.textDecoration = "";
-            startTimer();
+            requestTimer();
         }
     }
 
@@ -102,7 +134,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function exitToWork() {
         changeDuration(duration, true);
-        if (currentPage === pages.length - 1) {
+        if (currentPage === IMAGES.length - 1) {
             localStorage.removeItem(`${WORK_ID}-currentPage`);
         }
         window.location.href = `../${INDEX}`;

dlibrary/templates/viewer.html

@@ -5,15 +5,15 @@
 <script>
   const WORK_ID = "{{ work['id'] }}";
   const INDEX = "{{ index() }}";
+  const IMAGES = [
+      {% for filename in images %}
+      "{{ root() }}/images/{{ work['id'] }}/{{ filename }}",
+      {% endfor %}
+  ];
 </script>
 <script src="{{ root() }}/static/viewer.js"></script>
 {% endblock %}
 {% block body %}
-<div id="viewer-images">
-  {% for filename in images %}
-  <img src="{{ root() }}/images/{{ work['id'] }}/{{ filename }}" class="viewer-image">
-  {% endfor %}
-</div>
 <div id="progress"></div>
 <div id="page-num">
   <table>
@@ -46,5 +46,6 @@
     </svg>
   </div>
 </div>
-<div id="image-container"></div>
+<div class="image-container" id="current-image"></div>
+<div class="image-container" id="preload-images"></div>
 {% endblock %}