cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 22:49:18 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: minimal demo page (#644)

Browse Source 
* minimal

* eslint-browser

* dynamic port, reconnect socket, msTo string without Date

* 404 on external not found
This commit is contained in:
Alex Christoffer Rasmussen
2023-12-14 13:27:18 +01:00
committed by GitHub
parent 5a2f711eab
commit 8756b396cc
4 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/server/src/app.ts
+3
View File
@@ -65,6 +65,9 @@ app.use('/playback', playbackRouter);
// serve static - css // serve static - css
app.use('/external', express.static(externalsStartDirectory)); 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 // serve static - react, in dev/test mode we fetch the React app from module
const reactAppPath = join(currentDirectory, resolvedPath()); const reactAppPath = join(currentDirectory, resolvedPath());
apps/server/src/external/demo/app.js
Vendored
+67
View File
@@ -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();
apps/server/src/external/demo/index.html
Vendored
+14
View File
@@ -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>
apps/server/src/external/demo/styles.css
Vendored
+16
View File
@@ -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;
}