wip: prepare counter components

Author: olzzon

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

@@ -0,0 +1,33 @@
+import { RundownUtils } from '../rundown'
+
+interface OverUnderProps {
+	value: number
+}
+
+export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
+	const overUnder = props.value > 0 ? 'Over' : 'Under'
+	return (
+		<div className="counter-component__over-under-clock">
+			<span>{overUnder}</span>
+			<span>
+				{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
+			</span>
+		</div>
+	)
+}
+
+export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
+	return (
+		<span className="counter-component__planned-end">
+			{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true)}
+		</span>
+	)
+}
+
+export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element => {
+	return (
+		<span className="counter-component__time-to-planned-end">
+			{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true)}
+		</span>
+	)
+}

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

@@ -0,0 +1,11 @@
+.counter-component__over-under {
+background-color: aqua;
+}
+
+.counter-component__planned-end {
+background-color: purple;
+}
+
+.counter-component__time-to-planned-end {
+background-color: pink;
+}

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

@@ -49,6 +49,7 @@ input {
 @import 'countdown/overlay';
 @import 'countdown/presenter';
 @import 'countdown/director';
+@import 'counterComponents';
 
 @import 'customizations/nrk/shelf/taPanel';
 

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

@@ -36,6 +36,11 @@ import { useSetDocumentClass } from '../util/useSetDocumentClass'
 import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist'
 import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil'
 import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/CurrentPartOrSegmentRemaining'
+import {
+	OverUnderClockComponent,
+	PlannedEndComponent,
+	TimeToPlannedEndComponent,
+} from '../../lib/Components/CounterComponents'
 
 interface SegmentUi extends DBSegment {
 	items: Array<PartUi>
@@ -345,7 +350,7 @@ function DirectorScreenRender({
 			timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
 
 		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing)
-		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
+		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing) || 0
 		const expectedDuration = PlaylistTiming.getExpectedDuration(playlist.timing)
 
 		const overUnderClock = getPlaylistTimingDiff(playlist, timingDurations) ?? 0
@@ -354,11 +359,15 @@ function DirectorScreenRender({
 			<div className="director-screen">
 				<div className="director-screen__header">
 					<div className="director-screen__header__planned-end">
-						<div>{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedEnd || 0, true)}</div>
+						<div>
+							<PlannedEndComponent value={expectedEnd} />
+						</div>
 						PLANNED END
 					</div>
 					<div className="director-screen__header__planned-duration">
-						<div>{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedDuration || 0, true)}</div>
+						<div>
+							<TimeToPlannedEndComponent value={expectedEnd - overUnderClock} />
+						</div>
 						TIME TO PLANNED END
 					</div>
 					<div className="director-screen__header__over-under">
@@ -367,7 +376,7 @@ function DirectorScreenRender({
 								over: Math.floor(overUnderClock / 1000) >= 0,
 							})}
 						>
-							{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
+							<OverUnderClockComponent value={overUnderClock} />
 						</div>
 						OVER/UNDER
 					</div>