-var DEFAULT_TITLE = "ppt-control"
+const DEFAULT_TITLE = "ppt-control";
+const LABEL_STOPPED = "Slideshow stopped";
+const LABEL_RUNNING = "Slideshow running";
+const LABEL_DISCONNECTED = "Disconnected";
+const LABEL_FINAL_PREFIX = "Final slide ‐ ";
+const LABEL_END_PREFIX = "End of slideshow ‐ ";
var preloaded = false;
var preload = [];
var presentation = document.querySelector('#presentation'),
+ startBtn = document.querySelector('.start'),
+ stopBtn = document.querySelector('.stop'),
prev = document.querySelector('#prev'),
next = document.querySelector('#next'),
first = document.querySelector('#first'),
show_next = document.querySelector('#show_next'),
shortcuts = document.querySelector('#shortcuts');
-var presentations_list = {};
+var presentationData = {};
+var presentationOptions = {};
function getPresentationName() {
}
}
+startBtn.onclick = function (event) {
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'start'}));
+ }
+}
+
+stopBtn.onclick = function (event) {
+ if (getPresentationName()) {
+ websocket.send(JSON.stringify({presentation: getPresentationName(), action: 'stop'}));
+ }
+}
+
current.addEventListener('keyup',function(e){
if (e.which == 13) this.blur();
});
+
+presentation.addEventListener('change',function(event){
+ refreshInterface();
+});
+
current_img.onclick = function (event) {
next.click()
}
next.click()
}
+window.addEventListener('resize', function(event) {set_control_width()}, true);
+
function sync_current() {
if (show_current.checked) {
case "b":
case "B":
black.click();
+ break;
case "w":
case "W":
white.click();
function refreshInterface() {
var d = new Date;
- currentPresentationData = presentations_list[getPresentationName()];
- presentation_text.style.display = "block";
- status_text.textContent = "Slideshow running";
- if (show_current.checked) {
- switch (currentPresentationData.visible) {
- case 3:
- current_img.src = "/black.jpg";
- break;
- case 4:
- current_img.src = "/white.jpg";
- break;
- default:
- current_img.src = "/cache/" + currentPresentationData.name + "/" + currentPresentationData.slide_current + ".jpg?t=" + d.getTime();
- break;
+ if (Object.keys(presentationData).length > 0) {
+ currentPresentationData = presentationData[getPresentationName()];
+ presentation_text.style.display = "block";
+ status_text.innerHTML = LABEL_RUNNING;
+ startBtn.style.display = "none";
+ stopBtn.style.display = "block";
+ if (show_current.checked) {
+ switch (currentPresentationData.visible) {
+ case 3:
+ current_img.src = "/black.jpg";
+ break;
+ case 4:
+ current_img.src = "/white.jpg";
+ break;
+ default:
+ current_img.src = "/cache/" + currentPresentationData.name + "/" + currentPresentationData.slide_current + ".jpg?t=" + d.getTime();
+ break;
+ }
+ }
+ if (currentPresentationData.slide_current == currentPresentationData.slide_total) {
+ status_text.innerHTML = LABEL_FINAL_PREFIX + LABEL_RUNNING;
+ }
+ if (currentPresentationData.slide_current == currentPresentationData.slide_total + 1) {
+ status_text.innerHTML = LABEL_END_PREFIX + LABEL_RUNNING;
+ next_img.src = "/black.jpg";
+ } else {
+ next_img.src = "/cache/" + currentPresentationData.name + "/" + (currentPresentationData.slide_current + 1) + ".jpg?t=" + d.getTime();
+ }
+ if (currentPresentationData.slide_current == 0) {
+ current_img.src = "/black.jpg";
+ next_img.src = "/black.jpg";
+ status_text.innerHTML = LABEL_STOPPED;
+ startBtn.style.display = "block";
+ stopBtn.style.display = "none";
}
- }
- if (currentPresentationData.slide_current == currentPresentationData.slide_total + 1) {
- next_img.src = "/black.jpg";
- } else {
- next_img.src = "/cache/" + currentPresentationData.name + "/" + (currentPresentationData.slide_current + 1) + ".jpg?t=" + d.getTime();
- }
- if (currentPresentationData.slide_current == 0) {
- current_img.src = "/black.jpg";
- next_img.src = "/black.jpg";
- status_text.textContent = "Slideshow not running";
- }
- if (document.activeElement != current) {
- current.value = currentPresentationData.slide_current;
+ if (document.activeElement != current) {
+ current.value = currentPresentationData.slide_current;
+ }
+ total.textContent = currentPresentationData.slide_total;
+ document.title = currentPresentationData.name;
+ } else {
+ disconnect()
}
- total.textContent = currentPresentationData.slide_total;
- document.title = currentPresentationData.name;
}
function disconnect() {
- console.log("Disconnecting")
+ console.log("Disconnecting")
document.title = DEFAULT_TITLE;
current_img.src = "/black.jpg";
next_img.src = "/black.jpg";
- status_text.textContent = "Disconnected";
+ status_text.innerHTML = LABEL_DISCONNECTED;
total.textContent = "?";
current.value = "";
presentation_text.style.display = "none";
+ startBtn.style.display = "none";
+ stopBtn.style.display = "none";
}
function receive_message(event) {
data = JSON.parse(event.data);
- presentations_list[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total};
- if (! presentations_list[data.name].pres_open) {
- delete presentations_list[data.name];
- if (Object.keys(presentations_list).length == 0) {
- disconnect();
- } else {
- status_text.textContent = "Connected";
- }
+ if (Object.keys(presentationData).includes(data.name)) {
+ // Existing presentation
+ presentationData[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total, "option": presentationData[data.name].option};
} else {
+ console.log("Adding new presentation " + data.name);
+ var dropdownOption = document.createElement("option");
+ dropdownOption.textContent = data.name;
+ dropdownOption.value = data.name;
+ presentationData[data.name] = {"name": data.name, "pres_open": data.pres_open, "slideshow": data.slideshow, "visible": data.visible, "slide_current": data.slide_current, "slide_total": data.slide_total, "option": dropdownOption};
+ presentation.appendChild(dropdownOption);
+ }
+ if (! presentationData[data.name].pres_open) {
+ presentation.removeChild(presentationData[data.name].option);
+ delete presentationData[data.name]
+ disconnect()
- var presentation_dropdown = Array.from(presentation.children);
-
- var found = false;
- for(var i = 0; i < presentation_dropdown.length; i++) {
- if (presentation_dropdown[i].textContent == data.name) {
- if (! data.pres_open) {
- presentation_dropdown[i].remove()
- } else {
- found = true;
- break;
- }
- }
- }
- if (found == false) {
- var dropdown_option = document.createElement("option");
- dropdown_option.textContent = data.name;
- dropdown_option.value = data.name;
- presentation.appendChild(dropdown_option);
- }
- refreshInterface()
+ //console.log("Deleting presentation data from list");
+ //delete presentationData[data.name];
+ //presentationOptions[data.name].remove()
}
+ refreshInterface()
if (preloaded == false && ! isNaN(total.textContent)) {
image = document.getElementById("preload_img");