+function imageRefresh(id) {
+ img = document.getElementById(id);
+ var d = new Date;
+ var http = img.src;
+ if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; }
+ img.src = http + '?t=' + d.getTime();
+}
+
+function startWebsocket() {
+ ws = new WebSocket("ws://" + window.location.host + ":5678/");
+ ws.onclose = function(){
+ //websocket = null;
+ setTimeout(function(){startWebsocket()}, 10000);
+ }
+ return ws;
+}
+
+var websocket = startWebsocket();
+
+//if (window.obssstudio) {
+//}
+
+var prev = document.querySelector('#prev'),
+ next = document.querySelector('#next'),
+ first = document.querySelector('#first'),
+ last = document.querySelector('#last'),
+ black = document.querySelector('#black'),
+ white = document.querySelector('#white'),
+ slide_label = document.querySelector('#slide_label'),
+ current = document.querySelector('#current'),
+ total = document.querySelector('#total'),
+ users = document.querySelector('.users'),
+ prev_img = document.querySelector('#prev_img'),
+ next_img = document.querySelector('#next_img'),
+ current_div = document.querySelector('#current_div'),
+ next_div = document.querySelector('#next_div'),
+ show_current = document.querySelector('#show_current'),
+ show_next = document.querySelector('#show_next');
+
+prev.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'prev'}));
+}
+
+next.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'next'}));
+}
+
+first.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'first'}));
+}
+
+last.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'last'}));
+}
+
+black.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'black'}));
+}
+
+white.onclick = function (event) {
+ websocket.send(JSON.stringify({action: 'white'}));
+}
+
+current.onblur = function (event) {
+ websocket.send(JSON.stringify({action: 'goto', value: current.value}));
+}
+
+current.addEventListener('keyup',function(e){
+ if (e.which == 13) this.blur();
+});
+
+function sync_current() {
+ console.log("State of current checkbox changed");
+ if (show_current.checked) {
+ current_div.style.display = "block";
+ slide_label.style.display = "none";
+ next_div.style.width = "25%";
+ } else {
+ current_div.style.display = "none";
+ slide_label.style.display = "block";
+ next_div.style.width = "95%";
+ }
+ saveSettings();
+}
+show_current.onclick = sync_current;
+
+function sync_next() {
+ console.log("State of next checkbox changed");
+ if (show_next.checked) {
+ next_div.style.display = "block";
+ current_div.style.width = "70%";
+ } else {
+ next_div.style.display = "none";
+ current_div.style.width = "95%";
+ }
+ saveSettings();
+}
+show_next.onclick = sync_next;
+
+websocket.onmessage = function (event) {
+ data = JSON.parse(event.data);
+ switch (data.type) {
+ case 'state':
+ var d = new Date;
+ switch (data.visible) {
+ case 3:
+ current_img.src = "/black.jpg";
+ break;
+ case 4:
+ current_img.src = "/white.jpg";
+ break;
+ default:
+ current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
+ break;
+ }
+ if (data.current == data.total + 1) {
+ //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
+ next_img.src = "/cache/" + (data.total + 1) + ".jpg";
+ } else {
+ //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
+ next_img.src = "/cache/" + (data.current + 1) + ".jpg";
+ }
+
+ if (document.activeElement != current) {
+ current.value = data.current;
+ }
+ total.textContent = data.total;
+ break;
+ case 'users':
+ users.textContent = (
+ data.count.toString() + " client" +
+ (data.count == 1 ? "" : "s"));
+ break;
+ default:
+ console.error(
+ "unsupported event", data);
+ }
+};
+
+var interval = setInterval(refresh, 5000);
+
+function refresh() {
+ websocket.send(JSON.stringify({action: 'refresh'}));
+}
