add keyboard shortcuts, icons, preloading

diff --git a/ppt-control.js b/ppt-control.js
index 7496f1b01c21dec38053d89a7f145e918d196350..7e4c3122bb26e4f1ada13075782dea4c51e44abb 100644 (file)
--- a/ppt-control.js
+++ b/ppt-control.js
@@ -1,3 +1,5 @@
+var preloaded = false;
+
 function imageRefresh(id) {
     img = document.getElementById(id);
     var d = new Date;
@@ -17,9 +19,6 @@ function startWebsocket() {
 
 var websocket = startWebsocket();
 
-//if (window.obssstudio) {
-//}
-
 var prev = document.querySelector('#prev'),
     next = document.querySelector('#next'),
     first = document.querySelector('#first'),
@@ -30,12 +29,15 @@ var prev = document.querySelector('#prev'),
     current = document.querySelector('#current'),
     total = document.querySelector('#total'),
     users = document.querySelector('.users'),
-    prev_img = document.querySelector('#prev_img'),
+    current_img = document.querySelector('#current_img'),
     next_img = document.querySelector('#next_img'),
     current_div = document.querySelector('#current_div'),
     next_div = document.querySelector('#next_div'),
+    controls_container = document.querySelector('#controls_container'),
+    controls_container_inner = document.querySelector('#controls_container_inner'),
     show_current = document.querySelector('#show_current'),
-    show_next = document.querySelector('#show_next');
+    show_next = document.querySelector('#show_next'),
+    shortcuts = document.querySelector('#shortcuts');
 
 prev.onclick = function (event) {
     websocket.send(JSON.stringify({action: 'prev'}));
@@ -69,34 +71,89 @@ current.addEventListener('keyup',function(e){
     if (e.which == 13) this.blur();
 });
 
+current_img.onclick = function (event) {
+       next.click()
+}
+
+next_img.onclick = function (event) {
+       next.click()
+}
+
+
 function sync_current() {
-    console.log("State of current checkbox changed");
     if (show_current.checked) {
         current_div.style.display = "block";
         slide_label.style.display = "none";
         next_div.style.width = "25%";
     } else {
         current_div.style.display = "none";
-        slide_label.style.display = "block";
-        next_div.style.width = "95%";
+        slide_label.style.display = "inline";
+        next_div.style.width = "calc(100% - 20px)";
     }
+    set_control_width();
     saveSettings();
 }
 show_current.onclick = sync_current;
 
 function sync_next() {
-    console.log("State of next checkbox changed");
     if (show_next.checked) {
         next_div.style.display = "block";
         current_div.style.width = "70%";
     } else {
         next_div.style.display = "none";
-        current_div.style.width = "95%";
+        current_div.style.width = "calc(100% - 20px)";
     }
+    set_control_width();
     saveSettings();
 }
 show_next.onclick = sync_next;
 
+function set_control_width() {
+       var width = window.innerWidth
+       || document.documentElement.clientWidth
+       || document.body.clientWidth;
+    if (show_current.checked && show_next.checked && width > 800) {
+        controls_container_inner.style.width = "70%"
+    } else {
+       controls_container_inner.style.width = "100%"
+    }
+}
+
+
+document.addEventListener('keydown', function (e) {
+       if (shortcuts.checked) {
+               switch (e.key) {
+                       case "Left":
+                       case "ArrowLeft":
+                       case "Up":
+                       case "ArrowUp":
+                       case "k":
+                       case "K":
+                               prev.click();
+                               break;
+                       case " ":
+                       case "Spacebar":
+                       case "Enter":
+                       case "Right":
+                       case "ArrowRight":
+                       case "Down":
+                       case "ArrowDown":
+                       case "j":
+                       case "J":
+                               next.click();
+                               break;
+                       case "b":
+                       case "B":
+                               black.click();
+                       case "w":
+                       case "W":
+                               white.click();
+                       default:
+                               return
+               }
+       }
+});
+
 websocket.onmessage = function (event) {
     data = JSON.parse(event.data);
     switch (data.type) {
@@ -110,7 +167,8 @@ websocket.onmessage = function (event) {
                     current_img.src = "/white.jpg";
                     break;
                 default:
-                    current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
+                    //current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
+                    current_img.src = "/cache/" + data.current + ".jpg";
                     break;
             }
             if (data.current == data.total + 1) { 
@@ -125,6 +183,7 @@ websocket.onmessage = function (event) {
                current.value = data.current;
             }
             total.textContent = data.total;
+            document.title = data.name;
             break;
         case 'users':
             users.textContent = (
@@ -135,6 +194,18 @@ websocket.onmessage = function (event) {
             console.error(
                 "unsupported event", data);
     }
+       if (!preloaded) {
+               var i = 0
+               var preload = [];
+               for (let i=1; i<=Number(total.textContent); i++) {
+                       image = new Image();
+                       image.src = "/cache/" + i + ".jpg";
+                       preload.push(image);
+                       console.log("Preloaded image " + i);
+               }
+               preloaded = true;
+       }
+
 };
 
 var interval = setInterval(refresh, 5000);
@@ -142,3 +213,4 @@ var interval = setInterval(refresh, 5000);
 function refresh() {
     websocket.send(JSON.stringify({action: 'refresh'}));
 }
+