partial ws update for demo (#813)

* partial ws update

* extract more of the timer formatting
This commit is contained in:
Alex Christoffer Rasmussen
2024-03-18 12:01:36 +01:00
committed by GitHub
parent 4148a3835b
commit 3fdb1bd1c8
+30 -14
View File
@@ -12,6 +12,23 @@ const leftPad = (number) => {
return Math.floor(number).toString().padStart(2, '0'); return Math.floor(number).toString().padStart(2, '0');
}; };
const formatTimer = (number) => {
const millis = Math.abs(number);
const isNegative = number < 0;
return `${isNegative ? '-' : ''}${leftPad(millis / mth)}:${leftPad((millis % mth) / mtm)}:${leftPad(
(millis % mtm) / mts,
)}`;
};
function updateTimerElement(playback, timerValue) {
const timerElement = document.getElementById('timer');
if (playback === 'stop') {
timerElement.innerText = '--:--:--';
} else {
timerElement.innerText = formatTimer(timerValue);
}
}
let reconnectTimeout; let reconnectTimeout;
const reconnectInterval = 1000; const reconnectInterval = 1000;
let reconnectAttempts = 0; let reconnectAttempts = 0;
@@ -22,7 +39,7 @@ const connectSocket = () => {
websocket.onopen = () => { websocket.onopen = () => {
clearTimeout(reconnectTimeout); clearTimeout(reconnectTimeout);
reconnectAttempts = 0; reconnectAttempts = 0;
console.info('WebSocket connected'); console.warn('WebSocket connected');
}; };
websocket.onclose = () => { websocket.onclose = () => {
@@ -46,19 +63,18 @@ const connectSocket = () => {
const { type, payload } = data; const { type, payload } = data;
// we only need to read message type of ontime // we only need to read message type of ontime
if (type === 'ontime') { switch (type) {
// destructure known data from ontime case 'ontime': {
// see https://docs.getontime.no/api/osc-and-ws/ // destructure known data from ontime
const { timer, playback } = payload; // see https://docs.getontime.no/api/osc-and-ws/
const timerElement = document.getElementById('timer'); const { timer, playback } = payload;
if (playback == 'stop') { updateTimerElement(playback, timer);
timerElement.innerText = '--:--:--'; break;
} else { }
const millis = Math.abs(timer.current); case 'ontime-timer': {
const isNegative = timer.current < 0; const { current, playback } = payload;
timerElement.innerText = `${isNegative ? '-' : ''}${leftPad(millis / mth)}:${leftPad( updateTimerElement(playback, current);
(millis % mth) / mtm, break;
)}:${leftPad((millis % mtm) / mts)}`;
} }
} }
}; };