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

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