Merge pull request Sofie-Automation#1600 from bbc/feat/SOFIE-252

feat: Director screen improvements

Author: anteeek

packages/webui/src/client/lib/rundownPlaylistUtil.ts

@@ -96,6 +96,7 @@ export class RundownPlaylistClientUtil {
 		currentPartInstance: PartInstance | undefined
 		nextPartInstance: PartInstance | undefined
 		previousPartInstance: PartInstance | undefined
+		partInstanceToCountTimeFrom: PartInstance | undefined
 	} {
 		let unorderedRundownIds = rundownIds0
 		if (!unorderedRundownIds) {
@@ -116,10 +117,26 @@ export class RundownPlaylistClientUtil {
 					}).fetch()
 				: []
 
+		const areAllPartsTimed = !!UIPartInstances.findOne({
+			rundownId: { $in: unorderedRundownIds },
+			['part.untimed']: { $ne: true },
+		})
+
+		const partInstanceToCountTimeFrom = UIPartInstances.findOne(
+			{
+				rundownId: { $in: unorderedRundownIds },
+				reset: { $ne: true },
+				takeCount: { $exists: true },
+				['part.untimed']: { $ne: areAllPartsTimed },
+			},
+			{ sort: { takeCount: 1 } }
+		)
+
 		return {
 			currentPartInstance: instances.find((inst) => inst._id === playlist.currentPartInfo?.partInstanceId),
 			nextPartInstance: instances.find((inst) => inst._id === playlist.nextPartInfo?.partInstanceId),
 			previousPartInstance: instances.find((inst) => inst._id === playlist.previousPartInfo?.partInstanceId),
+			partInstanceToCountTimeFrom,
 		}
 	}
 

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/ClockView.tsx

@@ -5,7 +5,7 @@ import { RundownTimingProvider } from '../RundownView/RundownTiming/RundownTimin
 
 import { StudioScreenSaver } from '../StudioScreenSaver/StudioScreenSaver.js'
 import { PresenterScreen } from './PresenterScreen.js'
-import { DirectorScreen } from './DirectorScreen.js'
+import { DirectorScreen } from './DirectorScreen/DirectorScreen'
 import { OverlayScreen } from './OverlayScreen.js'
 import { OverlayScreenSaver } from './OverlayScreenSaver.js'
 import { RundownPlaylists } from '../../collections/index.js'