Add "multiview"

Based on 4x4 grid layout

Squeeze camera and overlay views to half height in order to fit prompter.

Use checkerboard pattern for backgrounds to emphasise transparent nature of overlay window

Author: rjmunro

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

@@ -14,6 +14,7 @@ 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)
@@ -62,6 +63,9 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 					<CameraScreen playlist={playlist} studioId={studioId} />
 				</RundownTimingProvider>
 			</Route>
+			<Route path="/countdowns/:studioId/multiview">
+				<MultiviewScreen studioId={studioId} />
+			</Route>
 			<Route path="/countdowns/:studioId">
 				<ClockViewIndex studioId={studioId} />
 			</Route>

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

@@ -32,6 +32,9 @@ export function ClockViewIndex({ studioId }: Readonly<{ studioId: StudioId }>):
 						<li>
 							<Link to={`/activeRundown/${studioId}`}>{t('Active Rundown')}</Link>
 						</li>
+						<li>
+							<Link to={`/countdowns/${studioId}/multiview`}>{t('Multiview (All Screens)')}</Link>
+						</li>
 					</ul>
 				</section>
 			</section>

packages/webui/src/client/ui/ClockView/MultiviewScreen.scss

@@ -0,0 +1,56 @@
+.multiview-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr 1fr 1fr;
+	gap: 10px;
+	height: 100vh;
+	width: 100vw;
+	padding: 10px;
+	box-sizing: border-box;
+	background: black;
+}
+
+.multiview-item {
+	display: flex;
+	flex-direction: column;
+	border: 2px solid #cc0;
+
+	iframe {
+		flex: 1;
+		width: 100%;
+		border: none;
+		background: repeating-conic-gradient(#ddd 0% 25%, #eee 0% 50%) 50% / 40px 40px;
+	}
+}
+
+.multiview-label {
+	padding: 8px;
+	text-align: center;
+	background-color: #f0f0f0;
+	font-weight: bold;
+}
+
+.multiview-presenter {
+	grid-column: 1 / 3;
+	grid-row: 1 / 3;
+}
+
+.multiview-director {
+	grid-column: 3 / 5;
+	grid-row: 1 / 3;
+}
+
+.multiview-prompter {
+	grid-column: 1 / 3;
+	grid-row: 3 / 5;
+}
+
+.multiview-overlay {
+	grid-column: 3 / 5;
+	grid-row: 3 / 4;
+}
+
+.multiview-camera {
+	grid-column: 3 / 5;
+	grid-row: 4 / 5;
+}

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

@@ -0,0 +1,33 @@
+import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import './MultiviewScreen.scss'
+
+interface MultiviewScreenProps {
+	studioId: StudioId
+}
+
+export function MultiviewScreen({ studioId }: Readonly<MultiviewScreenProps>): JSX.Element {
+	return (
+		<div className="multiview-grid">
+			<div className="multiview-item multiview-presenter">
+				<iframe src={`/countdowns/${studioId}/presenter`} title="Presenter Screen" />
+				<div className="multiview-label">Presenter Screen</div>
+			</div>
+			<div className="multiview-item multiview-director">
+				<iframe src={`/countdowns/${studioId}/director`} title="Director Screen" />
+				<div className="multiview-label">Director Screen</div>
+			</div>
+			<div className="multiview-item multiview-prompter">
+				<iframe src={`/prompter/${studioId}`} title="Prompter" />
+				<div className="multiview-label">Prompter</div>
+			</div>
+			<div className="multiview-item multiview-overlay">
+				<iframe src={`/countdowns/${studioId}/overlay`} title="Overlay Screen" />
+				<div className="multiview-label">Overlay Screen</div>
+			</div>
+			<div className="multiview-item multiview-camera">
+				<iframe src={`/countdowns/${studioId}/camera`} title="Camera Screen" />
+				<div className="multiview-label">Camera Screen</div>
+			</div>
+		</div>
+	)
+}