Display streamdelay stream duration

package-lock.json

@@ -8708,6 +8708,11 @@
       "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
       "integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0="
     },
+    "luxon": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.26.0.tgz",
+      "integrity": "sha512-+V5QIQ5f6CDXQpWNICELwjwuHdqeJM1UenlZWx5ujcRMc9venvluCjFb4t5NYLhb6IhkbMVOxzVuOqkgMxee2A=="
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",

package.json

@@ -29,6 +29,7 @@
     "koa-static": "^5.0.0",
     "koa-views": "^6.3.0",
     "lodash": "^4.17.19",
+    "luxon": "^1.26.0",
     "node-fetch": "^2.6.0",
     "node-simple-cert": "0.0.1",
     "preact": "^10.4.4",

src/web/control.js

@@ -16,6 +16,7 @@ import { State } from 'xstate'
 import styled, { createGlobalStyle } from 'styled-components'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Color from 'color'
+import { DateTime } from 'luxon'
 
 import '../index.css'
 import { idxInBox } from '../geometry'
@@ -798,6 +799,21 @@ const Stack = styled.div`
   ${({ minHeight }) => minHeight && `min-height: ${minHeight}px`};
 `
 
+function StreamDurationClock({ startTime }) {
+  const [now, setNow] = useState(() => DateTime.now())
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(DateTime.now())
+    }, 500)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [startTime])
+  return (
+    <span>{now.diff(DateTime.fromMillis(startTime)).toFormat('hh:mm:ss')}</span>
+  )
+}
+
 function StreamDelayBox({
   role,
   delayState,
@@ -830,6 +846,9 @@ function StreamDelayBox({
         {!delayState.isStreamRunning && <span>stream stopped</span>}
         {delayState.isConnected && (
           <>
+            {delayState.startTime !== null && (
+              <StreamDurationClock startTime={delayState.startTime} />
+            )}
             <span>delay: {delayState.delaySeconds}s</span>
             {delayState.isStreamRunning && (
               <StyledButton