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
+27 -11
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) {
case 'ontime': {
// destructure known data from ontime // destructure known data from ontime
// see https://docs.getontime.no/api/osc-and-ws/ // see https://docs.getontime.no/api/osc-and-ws/
const { timer, playback } = payload; const { timer, playback } = payload;
const timerElement = document.getElementById('timer'); updateTimerElement(playback, timer);
if (playback == 'stop') { break;
timerElement.innerText = '--:--:--'; }
} else { case 'ontime-timer': {
const millis = Math.abs(timer.current); const { current, playback } = payload;
const isNegative = timer.current < 0; updateTimerElement(playback, current);
timerElement.innerText = `${isNegative ? '-' : ''}${leftPad(millis / mth)}:${leftPad( break;
(millis % mth) / mtm,
)}:${leftPad((millis % mtm) / mts)}`;
} }
} }
}; };