wip: timers are as in rundown

Author: olzzon

packages/webui/src/client/lib/Components/CounterComponents.tsx

@@ -1,3 +1,4 @@
+import Moment from 'react-moment'
 import { RundownUtils } from '../rundown'
 
 interface OverUnderProps {
@@ -17,23 +18,23 @@ export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
 export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__planned-end">
-			{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, false, false, true)}
+			<Moment interval={0} format="HH:mm:ss" date={props.value} />
 		</span>
 	)
 }
 
 export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-to-planned-end">
-			{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true)}
+			{RundownUtils.formatDiffToTimecode(props.value, true, true, true)}
 		</span>
 	)
 }
 
-export const TimesSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
+export const TimeSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-since-planned-end">
-			{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true, false, true)}
+			{RundownUtils.formatDiffToTimecode(props.value, true, true, true)}
 		</span>
 	)
 }

packages/webui/src/client/styles/counterComponents.scss

@@ -55,7 +55,6 @@
 	letter-spacing: 0%;
 	text-align: right;
 
-	color: #000000;
 	font-stretch: 57;
 	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
 		'YTUC' 712, 'slnt' 0, 'opsz' 44;

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

@@ -39,7 +39,7 @@ import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/Curr
 import {
 	OverUnderClockComponent,
 	PlannedEndComponent,
-	TimesSincePlannedEndComponent,
+	TimeSincePlannedEndComponent,
 	TimeToPlannedEndComponent,
 } from '../../lib/Components/CounterComponents'
 import { AdjustLabelFit } from '../util/AdjustLabelFit'
@@ -351,33 +351,37 @@ function DirectorScreenRender({
 		// const currentPartOrSegmentCountdown =
 		// 	timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
 
-		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing)
-		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing) || 0
+		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing) || 0
+		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
+		const expectedDuration = PlaylistTiming.getExpectedDuration(playlist.timing) || 0
+		const now = timingDurations.currentTime ?? getCurrentTime()
 
 		const overUnderClock = getPlaylistTimingDiff(playlist, timingDurations) ?? 0
 
 		return (
 			<div className="director-screen">
 				<div className="director-screen__top">
-					<div className="director-screen__top__planned-end">
-						<div>
-							<PlannedEndComponent value={expectedEnd} />
+					{expectedEnd ? (
+						<div className="director-screen__top__planned-end">
+							<div>
+								<PlannedEndComponent value={expectedEnd} />
+							</div>
+							PLANNED END
 						</div>
-						PLANNED END
-					</div>
-					{expectedEnd - overUnderClock < 0 ? (
+					) : null}
+					{expectedEnd ? (
 						<div>
 							<div>
-								<TimeToPlannedEndComponent value={expectedEnd - overUnderClock} />
+								<TimeToPlannedEndComponent value={now - expectedEnd} />
 							</div>
 							<span className="director-screen__top__planned-to">TIME TO PLANNED END</span>
 						</div>
 					) : (
 						<div>
 							<div>
-								<TimesSincePlannedEndComponent value={expectedEnd - overUnderClock} />
+								<TimeSincePlannedEndComponent value={getCurrentTime() - (expectedStart + expectedDuration)} />
+								<span className="director-screen__top__planned-since">TIME SINCE PLANNED END</span>
 							</div>
-							<span className="director-screen__top__planned-since">TIME SINCE PLANNED END</span>
 						</div>
 					)}
 					<div>