Andrew's git / ppt-control.git /
7e4c3122bb26e4f1ada13075782dea4c51e44abb
   1var preloaded = false;
   2
   3function imageRefresh(id) {
   4    img = document.getElementById(id);
   5    var d = new Date;
   6    var http = img.src;
   7    if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; } 
   8    img.src = http + '?t=' + d.getTime();
   9}
  10
  11function startWebsocket() {
  12    ws = new WebSocket("ws://" + window.location.host + ":5678/");
  13    ws.onclose = function(){
  14        //websocket = null;
  15        setTimeout(function(){startWebsocket()}, 10000);
  16    }
  17    return ws;
  18}
  19
  20var websocket = startWebsocket();
  21
  22var prev = document.querySelector('#prev'),
  23    next = document.querySelector('#next'),
  24    first = document.querySelector('#first'),
  25    last = document.querySelector('#last'),
  26    black = document.querySelector('#black'),
  27    white = document.querySelector('#white'),
  28    slide_label = document.querySelector('#slide_label'),
  29    current = document.querySelector('#current'),
  30    total = document.querySelector('#total'),
  31    users = document.querySelector('.users'),
  32    current_img = document.querySelector('#current_img'),
  33    next_img = document.querySelector('#next_img'),
  34    current_div = document.querySelector('#current_div'),
  35    next_div = document.querySelector('#next_div'),
  36    controls_container = document.querySelector('#controls_container'),
  37    controls_container_inner = document.querySelector('#controls_container_inner'),
  38    show_current = document.querySelector('#show_current'),
  39    show_next = document.querySelector('#show_next'),
  40    shortcuts = document.querySelector('#shortcuts');
  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 set_control_width() {
 112        var width = window.innerWidth
 113        || document.documentElement.clientWidth
 114        || document.body.clientWidth;
 115    if (show_current.checked && show_next.checked && width > 800) {
 116        controls_container_inner.style.width = "70%"
 117    } else {
 118        controls_container_inner.style.width = "100%"
 119    }
 120}
 121
 122
 123document.addEventListener('keydown', function (e) {
 124        if (shortcuts.checked) {
 125                switch (e.key) {
 126                        case "Left":
 127                        case "ArrowLeft":
 128                        case "Up":
 129                        case "ArrowUp":
 130                        case "k":
 131                        case "K":
 132                                prev.click();
 133                                break;
 134                        case " ":
 135                        case "Spacebar":
 136                        case "Enter":
 137                        case "Right":
 138                        case "ArrowRight":
 139                        case "Down":
 140                        case "ArrowDown":
 141                        case "j":
 142                        case "J":
 143                                next.click();
 144                                break;
 145                        case "b":
 146                        case "B":
 147                                black.click();
 148                        case "w":
 149                        case "W":
 150                                white.click();
 151                        default:
 152                                return
 153                }
 154        }
 155});
 156
 157websocket.onmessage = function (event) {
 158    data = JSON.parse(event.data);
 159    switch (data.type) {
 160        case 'state':
 161            var d = new Date;
 162            switch (data.visible) {
 163                case 3:
 164                    current_img.src = "/black.jpg";
 165                    break;
 166                case 4:
 167                    current_img.src = "/white.jpg";
 168                    break;
 169                default:
 170                    //current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
 171                    current_img.src = "/cache/" + data.current + ".jpg";
 172                    break;
 173            }
 174            if (data.current == data.total + 1) { 
 175                //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
 176                next_img.src = "/cache/" + (data.total + 1) + ".jpg";
 177            } else {
 178                //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
 179                next_img.src = "/cache/" + (data.current + 1) + ".jpg";
 180            }
 181
 182                        if (document.activeElement != current) {
 183                current.value = data.current;
 184            }
 185            total.textContent = data.total;
 186            document.title = data.name;
 187            break;
 188        case 'users':
 189            users.textContent = (
 190                data.count.toString() + " client" +
 191                (data.count == 1 ? "" : "s"));
 192            break;
 193        default:
 194            console.error(
 195                "unsupported event", data);
 196    }
 197        if (!preloaded) {
 198                var i = 0
 199                var preload = [];
 200                for (let i=1; i<=Number(total.textContent); i++) {
 201                        image = new Image();
 202                        image.src = "/cache/" + i + ".jpg";
 203                        preload.push(image);
 204                        console.log("Preloaded image " + i);
 205                }
 206                preloaded = true;
 207        }
 208
 209};
 210
 211var interval = setInterval(refresh, 5000);
 212
 213function refresh() {
 214    websocket.send(JSON.stringify({action: 'refresh'}));
 215}
 216