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