Feat/161 (#186)

* feat(time): add optional time format
* feat(time): show 12 hour time in stage timer
* feat(time): override locally
* feat(time): show timer in selected format
* feat(time): show 12 hour time in table header
* refactor: extract time formatting into utility
* refactor: migrate datetime library
* refactor(formatTime): centralise time formatting for viewers
* feature(12hour): version bump

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

@@ -7,8 +7,15 @@ import TitleCard from 'common/components/views/TitleCard';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
 
+import { formatTime } from '../../../common/utils/time';
+
 import style from './Timer.module.scss';
 
+const formatOptions = {
+  showSeconds: true,
+  format: 'hh:mm:ss a',
+};
+
 export default function Timer(props) {
   const { general, pres, title, time } = props;
   const [elapsed, setElapsed] = useState(true);
@@ -32,22 +39,12 @@ export default function Timer(props) {
     }
   }, [searchParams]);
 
+  const clock = formatTime(time.clock, formatOptions);
+
   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 === '' ? (
-      <TimerDisplay
-        time={time.running}
-        isNegative={time.isNegative}
-        hideZeroHours
-      />
-    ) : (
-      general.endMessage
-    );
-
   // motion
   const titleVariants = {
     hidden: {
@@ -65,16 +62,8 @@ export default function Timer(props) {
   };
 
   return (
-    <div
-      className={
-        time.finished ? style.container__grayFinished : style.container__gray
-      }
-    >
-      <div
-        className={
-          showOverlay ? style.messageOverlayActive : style.messageOverlay
-        }
-      >
+    <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>
 
@@ -82,12 +71,18 @@ export default function Timer(props) {
 
       <div className={style.clockContainer}>
         <div className={style.label}>Time Now</div>
-        <div className={style.clock}>{time.clock}</div>
+        <div className={style.clock}>{clock}</div>
       </div>
 
       <div className={style.timerContainer}>
         {time.finished ? (
-          <div className={style.finished}>{endMessage}</div>
+          <div className={style.finished}>
+            {general.endMessage == null || general.endMessage === '' ? (
+              <TimerDisplay time={time.running} isNegative={time.isNegative} hideZeroHours />
+            ) : (
+              general.endMessage
+            )}
+          </div>
         ) : (
           <div className={isPlaying ? style.countdown : style.countdownPaused}>
             <TimerDisplay time={normalisedTime} hideZeroHours />
@@ -96,11 +91,7 @@ export default function Timer(props) {
       </div>
 
       {!time.finished && (
-        <div
-          className={
-            isPlaying ? style.progressContainer : style.progressContainerPaused
-          }
-        >
+        <div className={isPlaying ? style.progressContainer : style.progressContainerPaused}>
           <MyProgressBar
             now={normalisedTime}
             complete={time.durationSeconds}