7496f1b01c21dec38053d89a7f145e918d196350
   1function imageRefresh(id) {
   2    img = document.getElementById(id);
   3    var d = new Date;
   4    var http = img.src;
   5    if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; } 
   6    img.src = http + '?t=' + d.getTime();
   7}
   8
   9function startWebsocket() {
  10    ws = new WebSocket("ws://" + window.location.host + ":5678/");
  11    ws.onclose = function(){
  12        //websocket = null;
  13        setTimeout(function(){startWebsocket()}, 10000);
  14    }
  15    return ws;
  16}
  17
  18var websocket = startWebsocket();
  19
  20//if (window.obssstudio) {
  21//}
  22
  23var prev = document.querySelector('#prev'),
  24    next = document.querySelector('#next'),
  25    first = document.querySelector('#first'),
  26    last = document.querySelector('#last'),
  27    black = document.querySelector('#black'),
  28    white = document.querySelector('#white'),
  29    slide_label = document.querySelector('#slide_label'),
  30    current = document.querySelector('#current'),
  31    total = document.querySelector('#total'),
  32    users = document.querySelector('.users'),
  33    prev_img = document.querySelector('#prev_img'),
  34    next_img = document.querySelector('#next_img'),
  35    current_div = document.querySelector('#current_div'),
  36    next_div = document.querySelector('#next_div'),
  37    show_current = document.querySelector('#show_current'),
  38    show_next = document.querySelector('#show_next');
  39
  40prev.onclick = function (event) {
  41    websocket.send(JSON.stringify({action: 'prev'}));
  42}
  43
  44next.onclick = function (event) {
  45    websocket.send(JSON.stringify({action: 'next'}));
  46}
  47
  48first.onclick = function (event) {
  49    websocket.send(JSON.stringify({action: 'first'}));
  50}
  51
  52last.onclick = function (event) {
  53    websocket.send(JSON.stringify({action: 'last'}));
  54}
  55
  56black.onclick = function (event) {
  57    websocket.send(JSON.stringify({action: 'black'}));
  58}
  59
  60white.onclick = function (event) {
  61    websocket.send(JSON.stringify({action: 'white'}));
  62}
  63
  64current.onblur = function (event) {
  65    websocket.send(JSON.stringify({action: 'goto', value: current.value}));
  66}
  67
  68current.addEventListener('keyup',function(e){
  69    if (e.which == 13) this.blur();
  70});
  71
  72function sync_current() {
  73    console.log("State of current checkbox changed");
  74    if (show_current.checked) {
  75        current_div.style.display = "block";
  76        slide_label.style.display = "none";
  77        next_div.style.width = "25%";
  78    } else {
  79        current_div.style.display = "none";
  80        slide_label.style.display = "block";
  81        next_div.style.width = "95%";
  82    }
  83    saveSettings();
  84}
  85show_current.onclick = sync_current;
  86
  87function sync_next() {
  88    console.log("State of next checkbox changed");
  89    if (show_next.checked) {
  90        next_div.style.display = "block";
  91        current_div.style.width = "70%";
  92    } else {
  93        next_div.style.display = "none";
  94        current_div.style.width = "95%";
  95    }
  96    saveSettings();
  97}
  98show_next.onclick = sync_next;
  99
 100websocket.onmessage = function (event) {
 101    data = JSON.parse(event.data);
 102    switch (data.type) {
 103        case 'state':
 104            var d = new Date;
 105            switch (data.visible) {
 106                case 3:
 107                    current_img.src = "/black.jpg";
 108                    break;
 109                case 4:
 110                    current_img.src = "/white.jpg";
 111                    break;
 112                default:
 113                    current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
 114                    break;
 115            }
 116            if (data.current == data.total + 1) { 
 117                //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
 118                next_img.src = "/cache/" + (data.total + 1) + ".jpg";
 119            } else {
 120                //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
 121                next_img.src = "/cache/" + (data.current + 1) + ".jpg";
 122            }
 123
 124                        if (document.activeElement != current) {
 125                current.value = data.current;
 126            }
 127            total.textContent = data.total;
 128            break;
 129        case 'users':
 130            users.textContent = (
 131                data.count.toString() + " client" +
 132                (data.count == 1 ? "" : "s"));
 133            break;
 134        default:
 135            console.error(
 136                "unsupported event", data);
 137    }
 138};
 139
 140var interval = setInterval(refresh, 5000);
 141
 142function refresh() {
 143    websocket.send(JSON.stringify({action: 'refresh'}));
 144}