fix(webui): Use synced time for T-Timers (Sofie-Automation#1771)

Author: PeterC89

packages/webui/src/client/ui/ClockView/TTimerDisplay.tsx

@@ -4,31 +4,22 @@ import { calculateTTimerDiff, calculateTTimerOverUnder } from '../../lib/tTimerU
 import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
 import { OverUnderChip } from '../../lib/Components/OverUnderChip.js'
 import { Countdown } from '../RundownView/RundownHeader/Countdown.js'
+import { getCurrentTime } from '../../lib/systemTime.js'
 
 interface TTimerDisplayProps {
 	timer: RundownTTimer
 }
 
 export function TTimerDisplay({ timer }: Readonly<TTimerDisplayProps>): JSX.Element | null {
-	useTiming()
+	const timing = useTiming()
 
 	if (!timer.mode) return null
 
-	const now = Date.now()
+	const now = timing.currentTime ?? getCurrentTime()
 
 	const diff = calculateTTimerDiff(timer, now)
 	const overUnder = calculateTTimerOverUnder(timer, now)
-	const timeStr = RundownUtils.formatDiffToTimecode(
-		Math.abs(diff),
-		false,
-		true,
-		true,
-		false,
-		true,
-		undefined,
-		true,
-		true
-	)
+	const timeStr = RundownUtils.formatDiffToTimecode(Math.abs(diff), false, true, true, false, true)
 	const timerSign = diff >= 0 ? '' : '-'
 
 	return (

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

@@ -4,6 +4,7 @@ import { Countdown } from './Countdown'
 import { useTiming } from '../RundownTiming/withTiming'
 import { RundownUtils } from '../../../lib/rundown.js'
 import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
+import { getCurrentTime } from '../../../lib/systemTime'
 
 export function RundownHeaderDurations({
 	playlist,
@@ -21,7 +22,7 @@ export function RundownHeaderDurations({
 
 	const estDuration = PlaylistTiming.getRemainingDuration(
 		playlist.timing,
-		timingDurations.currentTime ?? Date.now(),
+		timingDurations.currentTime ?? getCurrentTime(),
 		timingDurations.remainingPlaylistDuration,
 		startedPlayback
 	)

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

@@ -3,6 +3,7 @@ import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTi
 import { useTranslation } from 'react-i18next'
 import { Countdown } from './Countdown'
 import { useTiming } from '../RundownTiming/withTiming'
+import { getCurrentTime } from '../../../lib/systemTime'
 
 export function RundownHeaderExpectedEnd({
 	playlist,
@@ -14,7 +15,7 @@ export function RundownHeaderExpectedEnd({
 	const { t } = useTranslation()
 	const timingDurations = useTiming()
 
-	const now = timingDurations.currentTime ?? Date.now()
+	const now = timingDurations.currentTime ?? getCurrentTime()
 	const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
 	const startedPlayback = playlist.activationId ? playlist.startedPlayback : undefined
 	const estEnd = PlaylistTiming.getEstimatedEnd(

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Countdown } from './Countdown'
 import { useTiming } from '../RundownTiming/withTiming'
 import { RundownUtils } from '../../../lib/rundown.js'
+import { getCurrentTime } from '../../../lib/systemTime'
 
 export function RundownHeaderPlannedStart({
 	playlist,
@@ -16,7 +17,7 @@ export function RundownHeaderPlannedStart({
 	const timingDurations = useTiming()
 	const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing)
 
-	const now = timingDurations.currentTime ?? Date.now()
+	const now = timingDurations.currentTime ?? getCurrentTime()
 	const startsIn = now - (expectedStart ?? 0)
 	const startedPlayback = playlist.activationId ? playlist.startedPlayback : undefined
 

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

@@ -12,7 +12,8 @@ interface IProps {
 }
 
 export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
-	useTiming()
+	const timing = useTiming()
+	const now = timing.currentTime ?? getCurrentTime()
 
 	const activeTimers = tTimers.filter((t) => t.mode).slice(0, 2)
 	if (activeTimers.length == 0) return null
@@ -21,7 +22,7 @@ export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
 		<div className="rundown-header__clocks-timers">
 			{activeTimers.map((timer) => (
 				<div key={timer.index} className="rundown-header__clocks-timers__row">
-					<SingleTimer timer={timer} />
+					<SingleTimer timer={timer} now={now} />
 				</div>
 			))}
 		</div>
@@ -30,10 +31,10 @@ export const RundownHeaderTimers: React.FC<IProps> = ({ tTimers }) => {
 
 interface ISingleTimerProps {
 	timer: RundownTTimer
+	now: number
 }
 
-function SingleTimer({ timer }: Readonly<ISingleTimerProps>) {
-	const now = getCurrentTime()
+function SingleTimer({ timer, now }: Readonly<ISingleTimerProps>) {
 	const mode = timer.mode
 	if (!mode) return null
 	const isRunning = !!timer.state && !timer.state.paused