wip: prepare timers

Author: olzzon

packages/webui/src/client/styles/countdown/director.scss

@@ -15,10 +15,11 @@ $hold-status-color: $liveline-timecode-color;
 
 .director-screen {
 	.director-screen__header {
-		display: grid;
-		grid-template-columns: auto fit-content(5em);
-		grid-template-rows: fit-content(1em);
-		font-size: 6em;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 2em;
 		color: #888;
 		padding: 0 0.2em;
 
@@ -46,7 +47,7 @@ $hold-status-color: $liveline-timecode-color;
 
 	.director-screen__body {
 		position: fixed;
-		top: 1;
+		top: 20vh;
 		bottom: 0;
 		left: 0;
 		right: 0;

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

@@ -353,15 +353,23 @@ function DirectorScreenRender({
 		return (
 			<div className="director-screen">
 				<div className="director-screen__header">
-					{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedStart || 0, true)}
-					{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedEnd || 0, true)}
-					{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedDuration || 0, true)}
-					<div
-						className={ClassNames('director-screen__header__countdown', {
-							over: Math.floor(overUnderClock / 1000) >= 0,
-						})}
-					>
-						{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
+					<div className="director-screen__header__planned-end">
+						<div>{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedEnd || 0, true)}</div>
+						PLANNED END
+					</div>
+					<div className="director-screen__header__planned-duration">
+						<div>{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, expectedDuration || 0, true)}</div>
+						TIME TO PLANNED END
+					</div>
+					<div className="director-screen__header__over-under">
+						<div
+							className={ClassNames('director-screen__header__countdown', {
+								over: Math.floor(overUnderClock / 1000) >= 0,
+							})}
+						>
+							{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
+						</div>
+						OVER/UNDER
 					</div>
 				</div>
 				<div className="director-screen__body">