feat: Director Screen improvements

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

@@ -96,6 +96,7 @@ export class RundownPlaylistClientUtil {
 		currentPartInstance: PartInstance | undefined
 		nextPartInstance: PartInstance | undefined
 		previousPartInstance: PartInstance | undefined
+		firstTakenPartInstance: PartInstance | undefined
 	} {
 		let unorderedRundownIds = rundownIds0
 		if (!unorderedRundownIds) {
@@ -116,10 +117,22 @@ export class RundownPlaylistClientUtil {
 					}).fetch()
 				: []
 
+		const firstTakenPartInstance = UIPartInstances.findOne(
+			{
+				rundownId: { $in: unorderedRundownIds },
+				reset: { $ne: true },
+				takeCount: { $exists: true },
+			},
+			{
+				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),
+			firstTakenPartInstance,
 		}
 	}
 

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

@@ -159,7 +159,8 @@ export const App: React.FC = function App() {
 					<ErrorBoundary>
 						<Switch>
 							<Route path="/rundown/:playlistId" component={NullComponent} />
-							<Route path="/countdowns/:studioId" component={NullComponent} />
+							{/* The ClockView index should show heders. Any pages inside should not */}
+							<Route path="/countdowns/:studioId/:page" component={NullComponent} />
 							<Route path="/activeRundown" component={NullComponent} />
 							<Route path="/prompter/:studioId" component={NullComponent} />
 							<Route

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

@@ -1,18 +1,20 @@
-import { Switch, Route, Redirect } from 'react-router-dom'
+import { Switch, Route } from 'react-router-dom'
 import { useSubscription, useTracker } from '../../lib/ReactMeteorData/react-meteor-data.js'
 
 import { RundownTimingProvider } from '../RundownView/RundownTiming/RundownTimingProvider.js'
 
 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'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { CameraScreen } from './CameraScreen/index.js'
 import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
 import { useTranslation } from 'react-i18next'
+import { ClockViewIndex } from './ClockViewIndex.js'
+import { MultiviewScreen } from './MultiviewScreen.js'
 
 export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
 	useSubscription(MeteorPubSub.rundownPlaylistForStudio, studioId, true)
@@ -29,7 +31,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 
 	return (
 		<Switch>
-			<Route path="/countdowns/:studioId/presenter">
+			<Route exact path="/countdowns/:studioId/presenter">
 				{playlist ? (
 					<RundownTimingProvider playlist={playlist}>
 						<PresenterScreen playlistId={playlist._id} studioId={studioId} />
@@ -38,7 +40,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 					<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t('Presenter Screen')} />
 				)}
 			</Route>
-			<Route path="/countdowns/:studioId/director">
+			<Route exact path="/countdowns/:studioId/director">
 				{playlist ? (
 					<RundownTimingProvider playlist={playlist}>
 						<DirectorScreen playlistId={playlist._id} studioId={studioId} />
@@ -47,7 +49,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 					<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t("Director's Screen")} />
 				)}
 			</Route>
-			<Route path="/countdowns/:studioId/overlay">
+			<Route exact path="/countdowns/:studioId/overlay">
 				{playlist ? (
 					<RundownTimingProvider playlist={playlist}>
 						<OverlayScreen playlistId={playlist._id} studioId={studioId} />
@@ -56,13 +58,19 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 					<OverlayScreenSaver studioId={studioId} />
 				)}
 			</Route>
-			<Route path="/countdowns/:studioId/camera">
+			<Route exact path="/countdowns/:studioId/camera">
 				<RundownTimingProvider playlist={playlist}>
 					<CameraScreen playlist={playlist} studioId={studioId} />
 				</RundownTimingProvider>
 			</Route>
-			<Route>
-				<Redirect to="/" />
+			<Route exact path="/countdowns/:studioId/multiview">
+				<MultiviewScreen studioId={studioId} />
+			</Route>
+			<Route exact path="/countdowns/:studioId">
+				<ClockViewIndex studioId={studioId} />
+			</Route>
+			<Route path="*">
+				<div>404 - Page not found</div>
 			</Route>
 		</Switch>
 	)

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

@@ -0,0 +1,45 @@
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import Container from 'react-bootstrap/esm/Container'
+
+export function ClockViewIndex({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
+	const { t } = useTranslation()
+
+	return (
+		<Container fluid="true" className="header-clear">
+			<section className="mt-5 mx-5">
+				<header className="my-2">
+					<h1>{t('Available Screens for Studio {{studioId}}', { studioId })}</h1>
+				</header>
+				<section className="my-5">
+					<ul>
+						<li>
+							<Link to={`/countdowns/${studioId}/presenter`}>{t('Presenter Screen')}</Link>
+						</li>
+						<li>
+							<Link to={`/countdowns/${studioId}/director`}>{t('Director Screen')}</Link>
+						</li>
+						<li>
+							<Link to={`/countdowns/${studioId}/overlay`}>{t('Overlay Screen')}</Link>
+						</li>
+						<li>
+							<Link to={`/countdowns/${studioId}/camera`}>{t('Camera Screen')}</Link>
+						</li>
+						<li>
+							<Link to={`/prompter/${studioId}`}>{t('Prompter Screen')}</Link>
+						</li>
+						<li>
+							<Link to={`/countdowns/${studioId}/multiview`}>{t('All Screens in a MultiViewer')}</Link>
+						</li>
+					</ul>
+					<ul>
+						<li>
+							<Link to={`/activeRundown/${studioId}`}>{t('Active Rundown View')}</Link>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</Container>
+	)
+}