Ux/54 help (#88)

* ux/54-help tooltips
* ux/54-help refetch after mutation
* ux/54-help broadcast event index
* ux/54-help prevent multiple keypresses when key held
* ux/54-help fat clock
* ux/54-help progress bar user defined
* ux/54-help onAir is button
* ux/54-help OSC: add missing presenter message
* ux/54-help OSC: enable / disable OSC
* ux/54-help handle timezone in excel date import
* ux/54-help tray left click to show app
* ux/54-help create queriable endpoint
* ux/54-help fix memoisation in lower thirds
* ux/54-help revise icons
* ux/54-help clarify text
* ux/54-help forgiving text parsing
* ux/54-help add smart keywords
* ux/54-help version bump

client/src/features/viewers/timer/MinimalTimer.jsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { formatDisplay } from '../../../common/utils/dateConfig';
+import NavLogo from '../../../common/components/nav/NavLogo';
+import style from './MinimalTimer.module.scss';
+
+export default function MinimalTimer(props) {
+  const { pres, time } = props;
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Minimal Timer';
+  }, []);
+
+  const showOverlay = pres.text !== '' && pres.visible;
+  const isPlaying = time.playstate !== 'pause';
+  const timer = formatDisplay(time.running, true);
+  const clean = timer.replaceAll(':', '');
+
+  return (
+    <div className={time.finished ? style.containerFinished : style.container}>
+      <div
+        className={
+          showOverlay ? style.messageOverlayActive : style.messageOverlay
+        }
+      >
+        <div className={style.message}>{pres.text}</div>
+      </div>
+      <NavLogo />
+      <div
+        style={{ fontSize: `${89 / (clean.length - 1)}vw` }}
+        className={isPlaying ? style.timer : style.timerPaused}
+      >
+        {time.running < 0 ? `-${timer}` : timer}
+      </div>
+    </div>
+  );
+}