Skip to content

Commit f7afd72

Browse files
jstarpljstarpl
authored
Merge pull request Sofie-Automation#1567 from Sofie-Automation/rjmunro/link-to-views
2 parents 4217b11 + bccefe4 commit f7afd72

File tree

5 files changed

+151
-8
lines changed

5 files changed

+151
-8
lines changed

‎packages/webui/src/client/ui/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,8 @@ export const App: React.FC = function App() {
159159
<ErrorBoundary>
160160
<Switch>
161161
<Route path="/rundown/:playlistId" component={NullComponent} />
162-
<Route path="/countdowns/:studioId" component={NullComponent} />
162+
{/* The ClockView index should show heders. Any pages inside should not */}
163+
<Route path="/countdowns/:studioId/:page" component={NullComponent} />
163164
<Route path="/activeRundown" component={NullComponent} />
164165
<Route path="/prompter/:studioId" component={NullComponent} />
165166
<Route

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Switch, Route, Redirect } from 'react-router-dom'
1+
import { Switch, Route } from 'react-router-dom'
22
import { useSubscription, useTracker } from '../../lib/ReactMeteorData/react-meteor-data.js'
33

44
import { RundownTimingProvider } from '../RundownView/RundownTiming/RundownTimingProvider.js'
@@ -13,6 +13,8 @@ import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
1313
import { CameraScreen } from './CameraScreen/index.js'
1414
import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
1515
import { useTranslation } from 'react-i18next'
16+
import { ClockViewIndex } from './ClockViewIndex.js'
17+
import { MultiviewScreen } from './MultiviewScreen.js'
1618

1719
export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
1820
useSubscription(MeteorPubSub.rundownPlaylistForStudio, studioId, true)
@@ -29,7 +31,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
2931

3032
return (
3133
<Switch>
32-
<Route path="/countdowns/:studioId/presenter">
34+
<Route exact path="/countdowns/:studioId/presenter">
3335
{playlist ? (
3436
<RundownTimingProvider playlist={playlist}>
3537
<PresenterScreen playlistId={playlist._id} studioId={studioId} />
@@ -38,7 +40,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
3840
<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t('Presenter Screen')} />
3941
)}
4042
</Route>
41-
<Route path="/countdowns/:studioId/director">
43+
<Route exact path="/countdowns/:studioId/director">
4244
{playlist ? (
4345
<RundownTimingProvider playlist={playlist}>
4446
<DirectorScreen playlistId={playlist._id} studioId={studioId} />
@@ -47,7 +49,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
4749
<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t("Director's Screen")} />
4850
)}
4951
</Route>
50-
<Route path="/countdowns/:studioId/overlay">
52+
<Route exact path="/countdowns/:studioId/overlay">
5153
{playlist ? (
5254
<RundownTimingProvider playlist={playlist}>
5355
<OverlayScreen playlistId={playlist._id} studioId={studioId} />
@@ -56,13 +58,19 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
5658
<OverlayScreenSaver studioId={studioId} />
5759
)}
5860
</Route>
59-
<Route path="/countdowns/:studioId/camera">
61+
<Route exact path="/countdowns/:studioId/camera">
6062
<RundownTimingProvider playlist={playlist}>
6163
<CameraScreen playlist={playlist} studioId={studioId} />
6264
</RundownTimingProvider>
6365
</Route>
64-
<Route>
65-
<Redirect to="/" />
66+
<Route exact path="/countdowns/:studioId/multiview">
67+
<MultiviewScreen studioId={studioId} />
68+
</Route>
69+
<Route exact path="/countdowns/:studioId">
70+
<ClockViewIndex studioId={studioId} />
71+
</Route>
72+
<Route path="*">
73+
<div>404 - Page not found</div>
6674
</Route>
6775
</Switch>
6876
)

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Link } from 'react-router-dom'
2+
import { useTranslation } from 'react-i18next'
3+
import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
4+
import Container from 'react-bootstrap/esm/Container'
5+
6+
export function ClockViewIndex({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
7+
const { t } = useTranslation()
8+
9+
return (
10+
<Container fluid="true" className="header-clear">
11+
<section className="mt-5 mx-5">
12+
<header className="my-2">
13+
<h1>{t('Available Screens for Studio {{studioId}}', { studioId })}</h1>
14+
</header>
15+
<section className="my-5">
16+
<ul>
17+
<li>
18+
<Link to={`/countdowns/${studioId}/presenter`}>{t('Presenter Screen')}</Link>
19+
</li>
20+
<li>
21+
<Link to={`/countdowns/${studioId}/director`}>{t('Director Screen')}</Link>
22+
</li>
23+
<li>
24+
<Link to={`/countdowns/${studioId}/overlay`}>{t('Overlay Screen')}</Link>
25+
</li>
26+
<li>
27+
<Link to={`/countdowns/${studioId}/camera`}>{t('Camera Screen')}</Link>
28+
</li>
29+
<li>
30+
<Link to={`/prompter/${studioId}`}>{t('Prompter Screen')}</Link>
31+
</li>
32+
<li>
33+
<Link to={`/countdowns/${studioId}/multiview`}>{t('All Screens in a MultiViewer')}</Link>
34+
</li>
35+
</ul>
36+
<ul>
37+
<li>
38+
<Link to={`/activeRundown/${studioId}`}>{t('Active Rundown View')}</Link>
39+
</li>
40+
</ul>
41+
</section>
42+
</section>
43+
</Container>
44+
)
45+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.multiview-grid {
2+
display: grid;
3+
grid-template-columns: 1fr 1fr 1fr 1fr;
4+
grid-template-rows: 1fr 1fr 1fr 1fr;
5+
gap: 10px;
6+
height: 100vh;
7+
width: 100vw;
8+
padding: 10px;
9+
box-sizing: border-box;
10+
background: black;
11+
}
12+
13+
.multiview-item {
14+
display: flex;
15+
flex-direction: column;
16+
border: 2px solid #cc0;
17+
18+
iframe {
19+
flex: 1;
20+
width: 100%;
21+
border: none;
22+
background: repeating-conic-gradient(#ddd 0% 25%, #eee 0% 50%) 50% / 40px 40px;
23+
}
24+
}
25+
26+
.multiview-label {
27+
padding: 8px;
28+
text-align: center;
29+
background-color: #f0f0f0;
30+
font-weight: bold;
31+
}
32+
33+
.multiview-presenter {
34+
grid-column: 1 / 3;
35+
grid-row: 1 / 3;
36+
}
37+
38+
.multiview-director {
39+
grid-column: 3 / 5;
40+
grid-row: 1 / 3;
41+
}
42+
43+
.multiview-prompter {
44+
grid-column: 1 / 3;
45+
grid-row: 3 / 5;
46+
}
47+
48+
.multiview-overlay {
49+
grid-column: 3 / 5;
50+
grid-row: 3 / 4;
51+
}
52+
53+
.multiview-camera {
54+
grid-column: 3 / 5;
55+
grid-row: 4 / 5;
56+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
2+
import './MultiviewScreen.scss'
3+
4+
interface MultiviewScreenProps {
5+
studioId: StudioId
6+
}
7+
8+
export function MultiviewScreen({ studioId }: Readonly<MultiviewScreenProps>): JSX.Element {
9+
return (
10+
<div className="multiview-grid">
11+
<div className="multiview-item multiview-presenter">
12+
<iframe src={`/countdowns/${studioId}/presenter`} title="Presenter Screen" />
13+
<div className="multiview-label">Presenter Screen</div>
14+
</div>
15+
<div className="multiview-item multiview-director">
16+
<iframe src={`/countdowns/${studioId}/director`} title="Director Screen" />
17+
<div className="multiview-label">Director Screen</div>
18+
</div>
19+
<div className="multiview-item multiview-prompter">
20+
<iframe src={`/prompter/${studioId}`} title="Prompter" />
21+
<div className="multiview-label">Prompter</div>
22+
</div>
23+
<div className="multiview-item multiview-overlay">
24+
<iframe src={`/countdowns/${studioId}/overlay`} title="Overlay Screen" />
25+
<div className="multiview-label">Overlay Screen</div>
26+
</div>
27+
<div className="multiview-item multiview-camera">
28+
<iframe src={`/countdowns/${studioId}/camera`} title="Camera Screen" />
29+
<div className="multiview-label">Camera Screen</div>
30+
</div>
31+
</div>
32+
)
33+
}

0 commit comments

Comments
 (0)