dlibrary/dlibrary.py

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

dlibrary/static/viewer.css

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

dlibrary/static/viewer.js

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