diff --git a/apps/server/src/external/demo/app.js b/apps/server/src/external/demo/app.js index 64858ba4f..019e8f4d3 100644 --- a/apps/server/src/external/demo/app.js +++ b/apps/server/src/external/demo/app.js @@ -12,6 +12,23 @@ const leftPad = (number) => { 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; const reconnectInterval = 1000; let reconnectAttempts = 0; @@ -22,7 +39,7 @@ const connectSocket = () => { websocket.onopen = () => { clearTimeout(reconnectTimeout); reconnectAttempts = 0; - console.info('WebSocket connected'); + console.warn('WebSocket connected'); }; websocket.onclose = () => { @@ -46,19 +63,18 @@ const connectSocket = () => { const { type, payload } = data; // we only need to read message type of ontime - if (type === 'ontime') { - // destructure known data from ontime - // see https://docs.getontime.no/api/osc-and-ws/ - const { timer, playback } = payload; - const timerElement = document.getElementById('timer'); - if (playback == 'stop') { - timerElement.innerText = '--:--:--'; - } else { - const millis = Math.abs(timer.current); - const isNegative = timer.current < 0; - timerElement.innerText = `${isNegative ? '-' : ''}${leftPad(millis / mth)}:${leftPad( - (millis % mth) / mtm, - )}:${leftPad((millis % mtm) / mts)}`; + switch (type) { + case 'ontime': { + // destructure known data from ontime + // see https://docs.getontime.no/api/osc-and-ws/ + const { timer, playback } = payload; + updateTimerElement(playback, timer); + break; + } + case 'ontime-timer': { + const { current, playback } = payload; + updateTimerElement(playback, current); + break; } } };