partial ws update for demo (#813)

* partial ws update

* extract more of the timer formatting

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;
       }
     }
   };