feat: List available studio views at /countdowns/[studioID]

Instead of redirecting to root of site.

Author: rjmunro

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

@@ -1,4 +1,4 @@
-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'
@@ -13,6 +13,7 @@ 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'
 
 export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
 	useSubscription(MeteorPubSub.rundownPlaylistForStudio, studioId, true)
@@ -61,8 +62,8 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 					<CameraScreen playlist={playlist} studioId={studioId} />
 				</RundownTimingProvider>
 			</Route>
-			<Route>
-				<Redirect to="/" />
+			<Route path="/countdowns/:studioId">
+				<ClockViewIndex studioId={studioId} />
 			</Route>
 		</Switch>
 	)

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

@@ -0,0 +1,40 @@
+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 className="header-clear">
+			<section className="mt-5 mx-5">
+				<header className="my-2">
+					<h1>{t('Available Views 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')}</Link>
+						</li>
+						<li>
+							<Link to={`/activeRundown/${studioId}`}>{t('Active Rundown')}</Link>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</Container>
+	)
+}