Andrew's git - ppt-control.git/blob - ppt_control/static/ppt-control.js

   1var DEFAULT_TITLE = "ppt-control"
   2var preloaded = false;
   3var preload = [];
   4
   5function imageRefresh(id) {
   6    img = document.getElementById(id);
   7    var d = new Date;
   8    var http = img.src;
   9    if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; } 
  10    img.src = http + '?t=' + d.getTime();
  11}
  12
  13function startWebsocket() {
  14    ws = new WebSocket("ws://" + window.location.host + ":5678/");
  15    ws.onclose = function(){
  16        //websocket = null;
  17        setTimeout(function(){startWebsocket()}, 10000);
  18    }
  19    return ws;
  20}
  21
  22var websocket = startWebsocket();
  23
  24var prev = document.querySelector('#prev'),
  25    next = document.querySelector('#next'),
  26    first = document.querySelector('#first'),
  27    last = document.querySelector('#last'),
  28    black = document.querySelector('#black'),
  29    white = document.querySelector('#white'),
  30    slide_label = document.querySelector('#slide_label'),
  31    current = document.querySelector('#current'),
  32    total = document.querySelector('#total'),
  33    users = document.querySelector('.users'),
  34    current_img = document.querySelector('#current_img'),
  35    next_img = document.querySelector('#next_img'),
  36    current_div = document.querySelector('#current_div'),
  37    next_div = document.querySelector('#next_div'),
  38    controls_container = document.querySelector('#controls_container'),
  39    controls_container_inner = document.querySelector('#controls_container_inner'),
  40    show_current = document.querySelector('#show_current'),
  41    show_next = document.querySelector('#show_next'),
  42    shortcuts = document.querySelector('#shortcuts');
  43
  44prev.onclick = function (event) {
  45    websocket.send(JSON.stringify({action: 'prev'}));
  46}
  47
  48next.onclick = function (event) {
  49    websocket.send(JSON.stringify({action: 'next'}));
  50}
  51
  52first.onclick = function (event) {
  53    websocket.send(JSON.stringify({action: 'first'}));
  54}
  55
  56last.onclick = function (event) {
  57    websocket.send(JSON.stringify({action: 'last'}));
  58}
  59
  60black.onclick = function (event) {
  61    websocket.send(JSON.stringify({action: 'black'}));
  62}
  63
  64white.onclick = function (event) {
  65    websocket.send(JSON.stringify({action: 'white'}));
  66}
  67
  68current.onblur = function (event) {
  69    websocket.send(JSON.stringify({action: 'goto', value: current.value}));
  70}
  71
  72current.addEventListener('keyup',function(e){
  73    if (e.which == 13) this.blur();
  74});
  75
  76current_img.onclick = function (event) {
  77        next.click()
  78}
  79
  80next_img.onclick = function (event) {
  81        next.click()
  82}
  83
  84
  85function sync_current() {
  86    if (show_current.checked) {
  87        current_div.style.display = "block";
  88        slide_label.style.display = "none";
  89        next_div.style.width = "25%";
  90    } else {
  91        current_div.style.display = "none";
  92        slide_label.style.display = "inline";
  93        next_div.style.width = "calc(100% - 20px)";
  94    }
  95    set_control_width();
  96    saveSettings();
  97}
  98show_current.onclick = sync_current;
  99
 100function sync_next() {
 101    if (show_next.checked) {
 102        next_div.style.display = "block";
 103        current_div.style.width = "70%";
 104    } else {
 105        next_div.style.display = "none";
 106        current_div.style.width = "calc(100% - 20px)";
 107    }
 108    set_control_width();
 109    saveSettings();
 110}
 111show_next.onclick = sync_next;
 112
 113function sync_shortcuts() {
 114  saveSettings();
 115}
 116shortcuts.onclick = sync_shortcuts;
 117
 118function set_control_width() {
 119        var width = window.innerWidth
 120        || document.documentElement.clientWidth
 121        || document.body.clientWidth;
 122    if (show_current.checked && show_next.checked && width > 800) {
 123        controls_container_inner.style.width = "70%"
 124    } else {
 125        controls_container_inner.style.width = "100%"
 126    }
 127}
 128
 129
 130document.addEventListener('keydown', function (e) {
 131        if (shortcuts.checked) {
 132                switch (e.key) {
 133                        case "Left":
 134                        case "ArrowLeft":
 135                        case "Up":
 136                        case "ArrowUp":
 137                        case "k":
 138                        case "K":
 139                                prev.click();
 140                                break;
 141                        case " ":
 142                        case "Spacebar":
 143                        case "Enter":
 144                        case "Right":
 145                        case "ArrowRight":
 146                        case "Down":
 147                        case "ArrowDown":
 148                        case "j":
 149                        case "J":
 150                                next.click();
 151                                break;
 152                        case "b":
 153                        case "B":
 154                                black.click();
 155                        case "w":
 156                        case "W":
 157                                white.click();
 158                        default:
 159                                return
 160                }
 161        }
 162});
 163
 164function sleep(ms) {
 165      return new Promise(resolve => setTimeout(resolve, ms));
 166}
 167
 168function disconnect() {
 169        document.title = DEFAULT_TITLE;
 170    current_img.src = "/black.jpg";
 171    next_img.src = "/black.jpg";
 172    users.textContent = "Connection to PowerPoint failed";
 173}
 174
 175websocket.onmessage = function (event) {
 176        console.log("Received data");
 177    data = JSON.parse(event.data);
 178    switch (data.type) {
 179        case 'state':
 180            if (data.connected == "0" || data.connected == 0) {
 181                                console.log("Disconnected");
 182                disconnect();
 183                break;
 184            }
 185            var d = new Date;
 186            switch (data.visible) {
 187                case 3:
 188                    current_img.src = "/black.jpg";
 189                    break;
 190                case 4:
 191                    current_img.src = "/white.jpg";
 192                    break;
 193                default:
 194                    //current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
 195                    current_img.src = "/cache/" + data.current + ".jpg";
 196                    break;
 197            }
 198            if (data.current == data.total + 1) { 
 199                //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
 200                next_img.src = "/cache/" + (data.total + 1) + ".jpg";
 201            } else {
 202                //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
 203                next_img.src = "/cache/" + (data.current + 1) + ".jpg";
 204            }
 205
 206                        if (document.activeElement != current) {
 207                current.value = data.current;
 208            }
 209            total.textContent = data.total;
 210            document.title = data.name;
 211            break;
 212        case 'users':
 213            users.textContent = (
 214                data.count.toString() + " client" +
 215                (data.count == 1 ? "" : "s"));
 216            break;
 217        default:
 218            console.error(
 219                "unsupported event", data);
 220    }
 221        if (preloaded == false && ! isNaN(total.textContent)) {
 222                image = document.getElementById("preload_img");
 223                for (let i=1; i<=Number(total.textContent); i++) {
 224                        image.src = "/cache/" + i + ".jpg";
 225                        preload.push(image);
 226                console.log("Preloaded " + total.textContent);
 227                        //sleep(0.5)
 228                }
 229                preloaded = true;
 230        }
 231
 232};
 233
 234var interval = setInterval(refresh, 1000);
 235
 236function refresh() {
 237        console.log("Refreshing")
 238    websocket.send(JSON.stringify({action: 'refresh'}));
 239}
 240