dlibrary/static/dlibrary.css

@@ -135,3 +135,46 @@ body {
     display: inline-block;
     margin-bottom: 5px;
 }
+
+/* viewer stuff */
+
+#viewer-images {
+    display: none;
+}
+
+#image-container {
+    height: 100vh;
+    width: 100vw;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#page-num, #duration {
+    position: fixed;
+    font-size: 14pt;
+    top: 10px;
+    font-weight: bold;
+    opacity: 0.75;
+    text-shadow: /* Duplicate the same shadow to make it very strong */
+        0 0 2px #222,
+        0 0 2px #222,
+        0 0 2px #222;
+}
+
+#page-num {
+    left: 10px;
+}
+
+#duration {
+    right: 10px;
+}
+
+#progress {
+    background-color: #4488ffcc;
+    height: 5px;
+    width: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+}

dlibrary/static/viewer.css

@@ -5,33 +5,27 @@ html, body {
     margin: 0;
 }
 
-#controls {
+.tap {
+    background: #000000;
     opacity: 0.8;
+    position: fixed;
     animation: 2s linear forwards fade;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 @keyframes fade {
     to { opacity: 0; }
 }
 
-.tap {
-    background: #000000;
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
 #tap-left, #tap-right {
+    position: fixed;
     bottom: 0px;
     width: 30vw;
     height: 100vh;
 }
 
-#tap-left svg, #tap-right svg {
-    width: min(90%, 100px);
-}
-
 #tap-left {
     left: 0px;
 }
@@ -40,65 +34,9 @@ html, body {
     right: 0px;
 }
 
-#tap-back, #tap-restart {
+#tap-back {
+    top: 0px;
     left: 30vw;
     width: 40vw;
     height: 20vh;
 }
-
-#tap-back svg {
-    height: min(51%, 100px);
-}
-
-#tap-restart svg {
-    height: min(90%, 175px);
-}
-
-#tap-back {
-    top: 0px;
-}
-
-#tap-restart {
-    bottom: 0px;
-}
-
-#viewer-images {
-    display: none;
-}
-
-#image-container {
-    height: 100vh;
-    width: 100vw;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-#page-num, #duration {
-    position: fixed;
-    font-size: 14pt;
-    top: 10px;
-    font-weight: bold;
-    opacity: 0.75;
-    text-shadow: /* Duplicate the same shadow to make it very strong */
-        0 0 2px #222,
-        0 0 2px #222,
-        0 0 2px #222;
-}
-
-#page-num {
-    left: 10px;
-}
-
-#duration {
-    right: 10px;
-}
-
-#progress {
-    background-color: #4488ffcc;
-    height: 5px;
-    width: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-}

dlibrary/static/viewer.js

@@ -1,5 +1,3 @@
-const PROGRESS_UPDATE_INTERVAL = 50;
-
 document.addEventListener('DOMContentLoaded', () => {
     const pages = Array.from(document.querySelectorAll('img.viewer-image'));
     let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
@@ -18,13 +16,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (paused) {
                     return;
                 }
-                elapsed += PROGRESS_UPDATE_INTERVAL;
+                elapsed += 100;
                 if (elapsed >= duration*1000) {
                     changePage(currentPage + 1);
                 }
                 updateBar();
             },
-            PROGRESS_UPDATE_INTERVAL,
+            100
         );
     }
 
@@ -97,20 +95,16 @@ document.addEventListener('DOMContentLoaded', () => {
         changePage(currentPage + (rtl ? -1 : 1));
     }
 
-    function restart() {
-        changePage(0);
-    }
-
     function exitToWork() {
         changeDuration(duration, true);
-        if (currentPage === pages.length - 1) {
+        localStorage.setItem(`${WORK_ID}-currentPage`, 0);
-            localStorage.removeItem(`${WORK_ID}-currentPage`);
-        }
         window.location.href = `../${INDEX}`;
     }
 
     function hideTapZones() {
-        document.getElementById('controls').style.opacity = 0;
+        for (const el of document.getElementsByClassName('tap')) {
+            el.style.opacity = 0;
+        }
     }
 
     changePage(currentPage);
@@ -119,21 +113,14 @@ document.addEventListener('DOMContentLoaded', () => {
     document.onkeydown = event => {
         hideTapZones();
 
-        switch (event.key) {
+        switch (event.keyCode) {
-        case "ArrowLeft":
+        case 32: //space
-            event.preventDefault();
-            left();
-            break;
-        case "ArrowRight":
-            event.preventDefault();
-            right();
-            break;
-        case " ":
-            event.preventDefault();
             changeDuration(duration, !paused);
             break;
-        case "ArrowUp":
+        case 37: //left
-            event.preventDefault();
+            left();
+            break;
+        case 38: //up
             if (2 <= duration && duration <= 10) {
                 changeDuration(duration - 1, false);
             } else if (10 < duration && duration <= 20) {
@@ -142,8 +129,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 changeDuration(duration - 5, false);
             }
             break;
-        case "ArrowDown":
+        case 39: //right
-            event.preventDefault();
+            right();
+            break;
+        case 40: //down
             if (duration < 10) {
                 changeDuration(duration + 1, false);
             } else if (10 <= duration && duration < 20) {
@@ -152,12 +141,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 changeDuration(duration + 5, false);
             }
             break;
-        case "Enter":
+        case 13: //enter
-            event.preventDefault();
-            restart();
-            break;
-        case "Escape":
-            event.preventDefault();
             exitToWork();
             break;
         }
@@ -166,6 +150,5 @@ document.addEventListener('DOMContentLoaded', () => {
     document.onclick = hideTapZones;
     document.getElementById("tap-left").onclick = left;
     document.getElementById("tap-right").onclick = right;
-    document.getElementById("tap-restart").onclick = restart;
     document.getElementById("tap-back").onclick = exitToWork;
 });

dlibrary/templates/viewer.html

@@ -33,13 +33,6 @@
       <path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
     </svg>
   </div>
-  <div id="tap-restart" class="tap">
-    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
-      <path d='M 54.16 9.55 A 55 55 0 1 1 54.16 -9.55' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
-      <path d='M 54.16 -9.55 l 9.39 -17.66' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
-      <path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
-    </svg>
-  </div>
 </div>
 <div id="image-container"></div>
 {% endblock %}