feat: minimal demo page (#644)

* minimal * eslint-browser * dynamic port, reconnect socket, msTo string without Date * 404 on external not found
2026-08-07 08:23:55 +00:00 · 2023-12-14 13:27:18 +01:00
parent 5a2f711eab
commit 8756b396cc
4 changed files with 100 additions and 0 deletions
@@ -65,6 +65,9 @@ app.use('/playback', playbackRouter);

 // serve static - css
 app.use('/external', express.static(externalsStartDirectory));
+app.use('/external', (req, res) => {
+  res.status(404).send(`${req.originalUrl} not found`);
+});

 // serve static - react, in dev/test mode we fetch the React app from module
 const reactAppPath = join(currentDirectory, resolvedPath());
@@ -0,0 +1,67 @@
+/*eslint-env browser*/
+/**
+ * This is a very minimal example for a websocket client
+ * You could use this as a starting point to creating your own interfaces
+ */
+
+const mts = 1000; // millis to seconds
+const mtm = 1000 * 60; // millis to minutes
+const mth = 1000 * 60 * 60; // millis to hours
+
+const leftPad = (number) => {
+  return Math.floor(number).toString().padStart(2, '0');
+};
+
+let reconnectTimeout;
+const reconnectInterval = 1000;
+let reconnectAttempts = 0;
+
+const connectSocket = () => {
+  const websocket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`);
+
+  websocket.onopen = () => {
+    clearTimeout(reconnectTimeout);
+    reconnectAttempts = 0;
+    console.info('WebSocket connected');
+  };
+
+  websocket.onclose = () => {
+    console.warn('WebSocket disconnected');
+    reconnectTimeout = setTimeout(() => {
+      console.warn(`WebSocket: attempting reconnect ${reconnectAttempts}`);
+      if (websocket && websocket.readyState === WebSocket.CLOSED) {
+        reconnectAttempts += 1;
+        connectSocket();
+      }
+    }, reconnectInterval);
+  };
+  websocket.onerror = (error) => {
+    console.error('WebSocket error:', error);
+  };
+
+  websocket.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+
+    // all objects from ontime are structured with type and payload
+    const { type, payload } = data;
+
+    // we only need to read message type of ontime
+    if (type === 'ontime') {
+      // destructure known data from ontime
+      // see https://cpvalente.gitbook.io/ontime/control-and-feedback/websocket-api
+      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)}`;
+      }
+    }
+  };
+};
+
+connectSocket();
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>ontime demo</title>
+    <link href="./styles.css" rel="stylesheet" />
+</head>
+
+<body>
+    <div id="timer"></div>
+    <script src="./app.js" type="module"></script>
+</html>
@@ -0,0 +1,16 @@
+body {
+  overflow: hidden;
+  margin: 0;
+}
+div {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: azure;
+  font-family: monospace;
+  font-size: 20vw;
+  background-color: black;
+}