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
2026-08-21 06:59:09 +00:00 · 2022-01-12 22:41:12 +01:00
parent c3f18feaae
commit 48093b8651
90 changed files with 2787 additions and 763 deletions
@@ -0,0 +1,147 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import Countdown from 'common/components/countdown/Countdown';
+import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
+import NavLogo from 'common/components/nav/NavLogo';
+import TitleCard from 'common/components/views/TitleCard';
+import style from './Timer.module.scss';
+
+export default function Timer(props) {
+  const { general, pres, title, time } = props;
+  const [elapsed, setElapsed] = useState(true);
+  const [searchParams] = useSearchParams();
+
+  // Set window title
+  useEffect(() => {
+    document.title = 'ontime - Timer';
+  }, []);
+
+  // eg. http://localhost:3000/timer?progress=up
+  // Check for user options
+  useEffect(() => {
+    // progress: selector
+    // Should be 'up' or 'down'
+    const progress = searchParams.get('progress');
+    if (progress === 'up') {
+      setElapsed(true);
+    } else if (progress === 'down') {
+      setElapsed(false);
+    }
+  }, [searchParams]);
+
+  const showOverlay = pres.text !== '' && pres.visible;
+  const isPlaying = time.playstate !== 'pause';
+  const normalisedTime = Math.max(time.running, 0);
+
+  // show timer if end message is empty
+  const endMessage =
+    general.endMessage == null || general.endMessage === '' ? (
+      <Countdown time={time.running} hideZeroHours negative />
+    ) : (
+      general.endMessage
+    );
+
+  // motion
+  const titleVariants = {
+    hidden: {
+      y: 500,
+    },
+    visible: {
+      y: 0,
+      transition: {
+        duration: 1,
+      },
+    },
+    exit: {
+      y: 500,
+    },
+  };
+
+  return (
+    <div
+      className={
+        time.finished ? style.container__grayFinished : style.container__gray
+      }
+    >
+      <div
+        className={
+          showOverlay ? style.messageOverlayActive : style.messageOverlay
+        }
+      >
+        <div className={style.message}>{pres.text}</div>
+      </div>
+
+      <NavLogo />
+
+      <div className={style.clockContainer}>
+        <div className={style.label}>Time Now</div>
+        <div className={style.clock}>{time.clock}</div>
+      </div>
+
+      <div className={style.timerContainer}>
+        {time.finished ? (
+          <div className={style.finished}>{endMessage}</div>
+        ) : (
+          <div className={isPlaying ? style.countdown : style.countdownPaused}>
+            <Countdown time={normalisedTime} hideZeroHours />
+          </div>
+        )}
+      </div>
+
+      {!time.finished && (
+        <div
+          className={
+            isPlaying ? style.progressContainer : style.progressContainerPaused
+          }
+        >
+          <MyProgressBar
+            now={normalisedTime}
+            complete={time.durationSeconds}
+            showElapsed={elapsed}
+          />
+        </div>
+      )}
+
+      <AnimatePresence>
+        {title.showNow && (
+          <motion.div
+            className={style.nowContainer}
+            key='now'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleCard
+              label='Now'
+              title={title.titleNow}
+              subtitle={title.subtitleNow}
+              presenter={title.presenterNow}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {title.showNext && (
+          <motion.div
+            className={style.nextContainer}
+            key='next'
+            variants={titleVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          >
+            <TitleCard
+              label='Next'
+              title={title.titleNext}
+              subtitle={title.subtitleNext}
+              presenter={title.presenterNext}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}