Andrew's git / ppt-control.git /
1001b5d2b9e9ed123bbed084feddb7be2f6ed5da
   1var DEFAULT_TITLE = "ppt-control"
   2var preloaded = false;
   3var preload = [];
   4
   5var presentation = document.querySelector('#presentation'),
   6    prev = document.querySelector('#prev'),
   7    next = document.querySelector('#next'),
   8    first = document.querySelector('#first'),
   9    last = document.querySelector('#last'),
  10    black = document.querySelector('#black'),
  11    white = document.querySelector('#white'),
  12    slide_label = document.querySelector('#slide_label'),
  13    current = document.querySelector('#current'),
  14    total = document.querySelector('#total'),
  15    status_text = document.querySelector('.status_text'),
  16    presentation_text = document.querySelector('.presentation_text'),
  17    current_img = document.querySelector('#current_img'),
  18    next_img = document.querySelector('#next_img'),
  19    current_div = document.querySelector('#current_div'),
  20    next_div = document.querySelector('#next_div'),
  21    controls_container = document.querySelector('#controls_container'),
  22    controls_container_inner = document.querySelector('#controls_container_inner'),
  23    show_current = document.querySelector('#show_current'),
  24    show_next = document.querySelector('#show_next'),
  25    shortcuts = document.querySelector('#shortcuts');
  26
  27var presentations_list = {};
  28
  29
  30function getPresentationName() {
  31    if (presentation.selectedOptions.length > 0) {
  32        return presentation.selectedOptions[0].innerText;
  33    } else {
  34        return "";
  35    }
  36}
  37
  38
  39function startWebsocket() {
  40    console.log("Attempting to connect")
  41    ws = new WebSocket("ws://" + window.location.host + ":5678/");
  42    ws.onmessage = receive_message;
  43    ws.onclose = function(){
  44        ws = null;
  45        setTimeout(function(){websocket = startWebsocket()}, 1000);
  46    }
  47    if (ws.readyState !== WebSocket.OPEN) {
  48      disconnect()
  49    }
  50    return ws;
  51}
  52
  53var websocket = startWebsocket();
  54
  55prev.onclick = function (event) {
  56    if (getPresentationName()) {
  57        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'prev'}));
  58    }
  59}
  60
  61next.onclick = function (event) {
  62    if (getPresentationName()) {
  63        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'next'}));
  64    }
  65}
  66
  67first.onclick = function (event) {
  68    if (getPresentationName()) {
  69        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'first'}));
  70    }
  71}
  72
  73last.onclick = function (event) {
  74    if (getPresentationName()) {
  75        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'last'}));
  76    }
  77}
  78
  79black.onclick = function (event) {
  80    if (getPresentationName()) {
  81        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'black'}));
  82    }
  83}
  84
  85white.onclick = function (event) {
  86    if (getPresentationName()) {
  87        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'white'}));
  88    }
  89}
  90
  91current.onblur = function (event) {
  92    if (getPresentationName()) {
  93        websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'goto', value: current.value}));
  94    }
  95}
  96
  97current.addEventListener('keyup',function(e){
  98    if (e.which == 13) this.blur();
  99});
 100
 101current_img.onclick = function (event) {
 102        next.click()
 103}
 104
 105next_img.onclick = function (event) {
 106        next.click()
 107}
 108
 109
 110function sync_current() {
 111    if (show_current.checked) {
 112        current_div.style.display = "block";
 113        slide_label.style.display = "none";
 114        next_div.style.width = "25%";
 115    } else {
 116        current_div.style.display = "none";
 117        slide_label.style.display = "inline";
 118        next_div.style.width = "calc(100% - 20px)";
 119    }
 120    set_control_width();
 121    saveSettings();
 122}
 123show_current.onclick = sync_current;
 124
 125function sync_next() {
 126    if (show_next.checked) {
 127        next_div.style.display = "block";
 128        current_div.style.width = "70%";
 129    } else {
 130        next_div.style.display = "none";
 131        current_div.style.width = "calc(100% - 20px)";
 132    }
 133    set_control_width();
 134    saveSettings();
 135}
 136show_next.onclick = sync_next;
 137
 138function sync_shortcuts() {
 139  saveSettings();
 140}
 141shortcuts.onclick = sync_shortcuts;
 142
 143function set_control_width() {
 144        var width = window.innerWidth
 145        || document.documentElement.clientWidth
 146        || document.body.clientWidth;
 147    if (show_current.checked && show_next.checked && width > 800) {
 148        controls_container_inner.style.width = "70%"
 149    } else {
 150        controls_container_inner.style.width = "100%"
 151    }
 152}
 153
 154
 155document.addEventListener('keydown', function (e) {
 156        if (shortcuts.checked) {
 157                switch (e.key) {
 158                        case "Left":
 159                        case "ArrowLeft":
 160                        case "Up":
 161                        case "ArrowUp":
 162                        case "k":
 163                        case "K":
 164                                prev.click();
 165                                break;
 166                        case " ":
 167                        case "Spacebar":
 168                        case "Enter":
 169                        case "Right":
 170                        case "ArrowRight":
 171                        case "Down":
 172                        case "ArrowDown":
 173                        case "j":
 174                        case "J":
 175                                next.click();
 176                                break;
 177                        case "b":
 178                        case "B":
 179                                black.click();
 180                        case "w":
 181                        case "W":
 182                                white.click();
 183                        default:
 184                                return
 185                }
 186        }
 187});
 188
 189function refreshInterface() {
 190    var d = new Date;
 191    currentPresentationData = presentations_list[getPresentationName()];
 192    presentation_text.style.display = "block";
 193    status_text.textContent = "Slideshow running";
 194    if (show_current.checked) {
 195        switch (currentPresentationData.visible) {
 196            case 3:
 197                current_img.src = "/black.jpg";
 198                break;
 199            case 4:
 200                current_img.src = "/white.jpg";
 201                break;
 202            default:
 203                current_img.src = "/cache/" + currentPresentationData.name + "/" + currentPresentationData.slide_current + ".jpg?t=" + d.getTime();
 204                break;
 205        }
 206    }
 207    if (currentPresentationData.slide_current == currentPresentationData.slide_total + 1) { 
 208        next_img.src = "/black.jpg";
 209    } else {
 210        next_img.src = "/cache/" + currentPresentationData.name + "/" + (currentPresentationData.slide_current + 1) + ".jpg?t=" + d.getTime();
 211    }
 212    if (currentPresentationData.slide_current == 0) {
 213        current_img.src = "/black.jpg";
 214        next_img.src = "/black.jpg";
 215        status_text.textContent = "Slideshow not running";
 216    }
 217
 218    if (document.activeElement != current) {
 219        current.value = currentPresentationData.slide_current;
 220    }
 221    total.textContent = currentPresentationData.slide_total;
 222    document.title = currentPresentationData.name;
 223}
 224
 225function disconnect() {
 226  console.log("Disconnecting")
 227    document.title = DEFAULT_TITLE;
 228    current_img.src = "/black.jpg";
 229    next_img.src = "/black.jpg";
 230    status_text.textContent = "Disconnected";
 231    total.textContent = "?";
 232    current.value = "";
 233    presentation_text.style.display = "none";
 234}
 235
 236function receive_message(event) {
 237    data = JSON.parse(event.data);
 238    presentations_list[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total};
 239    if (! presentations_list[data.name].pres_open) {
 240        delete presentations_list[data.name];
 241        if (Object.keys(presentations_list).length == 0) {
 242            disconnect();
 243        } else {
 244            status_text.textContent = "Connected";
 245        }
 246    } else {
 247        
 248        var presentation_dropdown = Array.from(presentation.children);
 249
 250        var found = false;
 251        for(var i = 0; i < presentation_dropdown.length; i++) {
 252            if (presentation_dropdown[i].textContent == data.name) {
 253                if (! data.pres_open) {
 254                    presentation_dropdown[i].remove()
 255                } else {
 256                    found = true;
 257                    break;
 258                }
 259            }
 260        }
 261        if (found == false) {
 262            var dropdown_option = document.createElement("option");
 263            dropdown_option.textContent = data.name;
 264            dropdown_option.value = data.name;
 265            presentation.appendChild(dropdown_option);
 266        }
 267        refreshInterface()
 268    }
 269        
 270        if (preloaded == false && ! isNaN(total.textContent)) {
 271                image = document.getElementById("preload_img");
 272                for (let i=1; i<=Number(total.textContent); i++) {
 273                        image.src = "/cache/" + getPresentationName() + "/" + i + ".jpg";
 274                        preload.push(image);
 275                }
 276                preloaded = true;
 277        }
 278
 279};