Hotfix/countdown delay (#175)

* hotfix/countdown-delay: fix styling on overran event
* hotfix/countdown-delay: prevent falsy issue
* hotfix/countdown-delay: show delay in countdown
* hotfix/countdown-delay: version bump

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.0.0-next.3",

client/src/features/viewers/countdown/Countdown.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
@@ -8,7 +8,7 @@ import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig
 import getDelayTo from '../../../common/utils/getDelayTo';
 import { stringFromMillis } from '../../../common/utils/time';
 
-import { fetchTimerData, sanitiseTitle } from './countdown.helpers';
+import { fetchTimerData, sanitiseTitle, timerMessages } from './countdown.helpers';
 
 import style from './Countdown.module.scss';
 
@@ -61,7 +61,17 @@ export default function Countdown(props) {
     setRunningTimer(timer);
   }, [follow, selectedId, time]);
 
-  const standby = time.playstate !== 'start' && selectedId === follow?.id;
+  const standby = useMemo(
+    () => time.playstate !== 'start' && selectedId === follow?.id,
+    [follow?.id, selectedId, time.playstate]
+  );
+
+  const isRunningFinished = useMemo(
+    () => time.finished && runningMessage === timerMessages.running,
+    [time.finished, runningMessage]
+  );
+
+  const isSelected = useMemo(() => runningMessage === timerMessages.running, [runningMessage]);
 
   return (
     <div className={style.container}>
@@ -106,10 +116,14 @@ export default function Countdown(props) {
             </div>
           </div>
           <div className={style.status}>{runningMessage}</div>
-          <span className={`${style.countdownClock} ${standby ? style.standby : ''} ${time.finished ? style.finished : ''}`}>
+          <span
+            className={`${style.countdownClock} ${standby ? style.standby : ''} ${
+              isRunningFinished ? style.finished : ''
+            }`}
+          >
             {formatDisplay(
-              time.running ? runningTimer : runningTimer + millisToSeconds(delay),
+              isSelected ? runningTimer : runningTimer + millisToSeconds(delay),
-              time.running || time.waiting
+              isSelected || time.waiting
             )}
           </span>
           <div className={style.title}>{follow.title || 'Untitled Event'}</div>

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",