smoother progress bar, prevent browser from interfering with escape key

dlibrary/static/dlibrary.css

@@ -135,46 +135,3 @@ 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,27 +5,33 @@ html, body {
     margin: 0;
 }
 
-.tap {
-    background: #000000;
+#controls {
     opacity: 0.8;
-    position: fixed;
     animation: 2s linear forwards fade;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
 @keyframes fade {
     to { opacity: 0; }
 }
 
-#tap-left, #tap-right {
+.tap {
+    background: #000000;
     position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#tap-left, #tap-right {
     bottom: 0px;
     width: 30vw;
     height: 100vh;
 }
 
+#tap-left svg, #tap-right svg {
+    width: min(90%, 100px);
+}
+
 #tap-left {
     left: 0px;
 }
@@ -34,9 +40,65 @@ html, body {
     right: 0px;
 }
 
-#tap-back {
-    top: 0px;
+#tap-back, #tap-restart {
     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,3 +1,5 @@
+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;
@@ -16,13 +18,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (paused) {
                     return;
                 }
-                elapsed += 100;
+                elapsed += PROGRESS_UPDATE_INTERVAL;
                 if (elapsed >= duration*1000) {
                     changePage(currentPage + 1);
                 }
                 updateBar();
             },
-            100
+            PROGRESS_UPDATE_INTERVAL,
         );
     }
 
@@ -95,16 +97,20 @@ document.addEventListener('DOMContentLoaded', () => {
         changePage(currentPage + (rtl ? -1 : 1));
     }
 
+    function restart() {
+        changePage(0);
+    }
+
     function exitToWork() {
         changeDuration(duration, true);
-        localStorage.setItem(`${WORK_ID}-currentPage`, 0);
+        if (currentPage === pages.length - 1) {
+            localStorage.removeItem(`${WORK_ID}-currentPage`);
+        }
         window.location.href = `../${INDEX}`;
     }
 
     function hideTapZones() {
-        for (const el of document.getElementsByClassName('tap')) {
-            el.style.opacity = 0;
-        }
+        document.getElementById('controls').style.opacity = 0;
     }
 
     changePage(currentPage);
@@ -113,14 +119,21 @@ document.addEventListener('DOMContentLoaded', () => {
     document.onkeydown = event => {
         hideTapZones();
 
-        switch (event.keyCode) {
-        case 32: //space
-            changeDuration(duration, !paused);
-            break;
-        case 37: //left
+        switch (event.key) {
+        case "ArrowLeft":
+            event.preventDefault();
             left();
             break;
-        case 38: //up
+        case "ArrowRight":
+            event.preventDefault();
+            right();
+            break;
+        case " ":
+            event.preventDefault();
+            changeDuration(duration, !paused);
+            break;
+        case "ArrowUp":
+            event.preventDefault();
             if (2 <= duration && duration <= 10) {
                 changeDuration(duration - 1, false);
             } else if (10 < duration && duration <= 20) {
@@ -129,10 +142,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 changeDuration(duration - 5, false);
             }
             break;
-        case 39: //right
-            right();
-            break;
-        case 40: //down
+        case "ArrowDown":
+            event.preventDefault();
             if (duration < 10) {
                 changeDuration(duration + 1, false);
             } else if (10 <= duration && duration < 20) {
@@ -141,7 +152,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 changeDuration(duration + 5, false);
             }
             break;
-        case 13: //enter
+        case "Enter":
+            event.preventDefault();
+            restart();
+            break;
+        case "Escape":
+            event.preventDefault();
             exitToWork();
             break;
         }
@@ -150,5 +166,6 @@ 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,6 +33,13 @@
       <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 %}