feat: count label - time to planned start

Author: olzzon

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

@@ -39,8 +39,12 @@ $hold-status-color: $liveline-timecode-color;
 			text-align: left;
 		}
 
+		.director-screen__top__time-to {
+			text-align: center;
+		}
+
 		.director-screen__top__planned-to {
-			text-align: left;
+			text-align: center;
 		}
 		.director-screen__top__planned-since {
 			margin-left: -50px;
@@ -93,22 +97,6 @@ $hold-status-color: $liveline-timecode-color;
 
 				color: #ffffff;
 
-				// Default Roboto Flex settings:
-				font-variation-settings:
-					'GRAD' 0,
-					'XOPQ' 96,
-					'XTRA' 468,
-					'YOPQ' 79,
-					'YTAS' 750,
-					'YTDE' -203,
-					'YTFI' 738,
-					'YTLC' 548,
-					'YTUC' 712,
-					'opsz' 100,
-					'slnt' 0,
-					'wdth' 100,
-					'wght' 550;
-
 				text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
 				box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
 				z-index: 1;
@@ -214,6 +202,70 @@ $hold-status-color: $liveline-timecode-color;
 				}
 			}
 
+			.director-screen__body__part__timeto-content {
+				grid-row: 2;
+				grid-column: 2;
+				text-align: center;
+				width: 100vw;
+				margin-left: -13vw;
+				
+				.director-screen__body__part__timeto-name {
+					color: #888;
+					font-size: 9.63em;
+					text-transform: uppercase;
+					margin-top: -2vh;
+				}
+				
+				.director-screen__body__part__timeto-countdown {
+					margin-top: 4vh;
+					grid-row: inherit;
+					text-align: center;
+					justify-content: center;
+					font-size: 60em;
+					color: $general-countdown-to-next-color;
+					font-feature-settings:
+						'liga' off,
+						'tnum' on;
+					letter-spacing: 0.01em;
+					font-variation-settings:
+						'GRAD' 0,
+						'XOPQ' 96,
+						'XTRA' 468,
+						'YOPQ' 79,
+						'YTAS' 750,
+						'YTDE' -203,
+						'YTFI' 738,
+						'YTLC' 514,
+						'YTUC' 712,
+						'opsz' 120,
+						'slnt' 0,
+						'wdth' 70,
+						'wght' 500;
+					padding: 0 0.1em;
+					line-height: 1em;
+					display: flex;
+					align-items: center;
+
+					> .overtime {
+						color: $general-late-color;
+						font-variation-settings:
+							'GRAD' 0,
+							'XOPQ' 96,
+							'XTRA' 468,
+							'YOPQ' 79,
+							'YTAS' 750,
+							'YTDE' -203,
+							'YTFI' 738,
+							'YTLC' 548,
+							'YTUC' 712,
+							'opsz' 100,
+							'slnt' 0,
+							'wdth' 70,
+							'wght' 600;
+					}
+				}
+			}
+
 			.director-screen__body__part__piece-content {
 				grid-row: 2;
 				grid-column: 2;

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

@@ -105,8 +105,6 @@
 .counter-component__time-to-planned-end {
 	color: $general-countdown-to-next-color;
 	letter-spacing: 0%;
-	text-align: right;
-	margin-left: 1.2vw;
 
 	letter-spacing: 0.01em;
 	font-variation-settings:

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

@@ -385,7 +385,7 @@ function DirectorScreenRender({
 						</div>
 					) : null}
 					{expectedEnd ? (
-						<div>
+						<div className="director-screen__top__time-to">
 							<div>
 								<TimeToPlannedEndComponent value={now - expectedEnd} />
 							</div>
@@ -496,16 +496,14 @@ function DirectorScreenRender({
 									</>
 								)}
 							</>
-						) : (
-							expectedStart && (
-								<div className="director-screen__body__part__timeto-content">
-									<div className="director-screen__body__part__timeto-countdown">
-										<Timediff time={expectedStart - getCurrentTime()} />
-									</div>
-									<div className="director-screen__body__part__timeto-name">Time to planned start</div>
+						) : expectedStart ? (
+							<div className="director-screen__body__part__timeto-content">
+								<div className="director-screen__body__part__timeto-countdown">
+									<Timediff time={expectedStart - getCurrentTime()} />
 								</div>
-							)
-						)}
+								<div className="director-screen__body__part__timeto-name">Time to planned start</div>
+							</div>
+						) : null}
 					</div>
 					{
 						// Next Part: