Apply code review suggestions

Author: anteeek

packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeaderTimers.tsx

@@ -3,6 +3,7 @@ import { RundownTTimer } from '@sofie-automation/corelib/dist/dataModel/RundownP
 import { useTiming } from '../RundownTiming/withTiming'
 import { RundownUtils } from '../../../lib/rundown'
 import classNames from 'classnames'
+import { getCurrentTime } from '../../../lib/systemTime'
 
 interface IProps {
 	tTimers: [RundownTTimer, RundownTTimer, RundownTTimer]
@@ -11,13 +12,13 @@ interface IProps {
 export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
 	useTiming()
 
-	const hasActiveTimers = tTimers.some((t) => t.mode)
+	const activeTimers = tTimers.filter((t) => t.mode)
 
-	if (!hasActiveTimers) return null
+	if (activeTimers.length == 0) return null
 
 	return (
 		<div className="timing__header_t-timers">
-			{tTimers.map((timer) => (
+			{activeTimers.map((timer) => (
 				<SingleTimer key={timer.index} timer={timer} />
 			))}
 		</div>
@@ -29,29 +30,29 @@ interface ISingleTimerProps {
 }
 
 function SingleTimer({ timer }: ISingleTimerProps) {
-	if (!timer.mode) return null
+	const now = getCurrentTime()
 
-	const now = Date.now()
-
-	const isRunning = timer.state !== null && !timer.state.paused
+	const isRunning = !!timer.state && !timer.state.paused
 
 	const diff = calculateDiff(timer, now)
 	const timeStr = RundownUtils.formatDiffToTimecode(Math.abs(diff), false, true, true, false, true)
 	const parts = timeStr.split(':')
 
 	const timerSign = diff >= 0 ? '+' : '-'
 
+	const isCountingDown = timer.mode?.type === 'countdown' && diff < 0 && isRunning
+
 	return (
 		<div
 			className={classNames('timing__header_t-timers__timer', {
 				'timing__header_t-timers__timer__countdown': timer.mode!.type === 'countdown',
 				'timing__header_t-timers__timer__freeRun': timer.mode!.type === 'freeRun',
 				'timing__header_t-timers__timer__isRunning': isRunning,
 				'timing__header_t-timers__timer__isPaused': !isRunning,
-				'timing__header_t-timers__timer__isCountingDown': timer.mode!.type === 'countdown',
-				'timing__header_t-timers__timer__isCountingUp': timer.mode!.type === 'countdown',
+				'timing__header_t-timers__timer__isCountingDown': timer.mode!.type === 'countdown' && isCountingDown,
+				'timing__header_t-timers__timer__isCountingUp': timer.mode!.type === 'countdown' && !isCountingDown,
 				'timing__header_t-timers__timer__isComplete':
-					timer.mode!.type === 'countdown' && timer.state !== null && timer.state.paused,
+					timer.mode!.type === 'countdown' && timer.state !== null && diff <= 0,
 			})}
 		>
 			<span className="timing__header_t-timers__timer__label">{timer.label}</span>
@@ -61,7 +62,7 @@ function SingleTimer({ timer }: ISingleTimerProps) {
 					<React.Fragment key={i}>
 						<span
 							className={classNames('timing__header_t-timers__timer__part', {
-								'timing__header_t-timers__timer__part--dimmed': p === '00',
+								'timing__header_t-timers__timer__part--dimmed': Math.abs(diff) < [3600000, 60000, 1][i],
 							})}
 						>
 							{p}