Skip to content

Commit 7216154

Browse files
jstarplJulusian
jstarpl
authored and
Julusian
committed
chore: simplify OverlayScreen and PresenterScreen
1 parent 2d50ee2 commit 7216154

File tree

4 files changed

+142
-137
lines changed

4 files changed

+142
-137
lines changed

‎packages/webui/src/client/styles/countdown/overlay.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ body.transparent {
6161
width: (1em * 1.2599784264077);
6262
height: 1em; // 18.3 + 3.6
6363
margin-left: 0.3em;
64+
65+
> svg {
66+
vertical-align: top;
67+
margin-top: 0.05em;
68+
}
6469
}
6570

6671
.clocks-next-rundown,

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

Lines changed: 72 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
import { useEffect } from 'react'
1+
import React, { useEffect } from 'react'
22
import Moment from 'react-moment'
33
import { useTranslation } from 'react-i18next'
4-
import { WithTiming, withTiming } from '../RundownView/RundownTiming/withTiming.js'
5-
import { withTracker } from '../../lib/ReactMeteorData/ReactMeteorData.js'
4+
import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
5+
import { useTracker } from '../../lib/ReactMeteorData/ReactMeteorData.js'
66
import { PieceIconContainer } from '../PieceIcons/PieceIcon.js'
77
import { PieceNameContainer } from '../PieceIcons/PieceName.js'
88
import { Timediff } from './Timediff.js'
9-
import {
10-
getPresenterScreenReactive,
11-
PresenterScreenTrackedProps,
12-
usePresenterScreenSubscriptions,
13-
} from './PresenterScreen.js'
9+
import { getPresenterScreenReactive, usePresenterScreenSubscriptions } from './PresenterScreen.js'
1410
import { RundownPlaylistId, StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
1511

1612
interface TimeMap {
@@ -22,75 +18,62 @@ interface OverlayScreenProps {
2218
playlistId: RundownPlaylistId
2319
segmentLiveDurations?: TimeMap
2420
}
25-
interface OverlayScreenState {}
2621

2722
/**
2823
* This component renders a Countdown screen for a given playlist
2924
*/
30-
export const OverlayScreen = withTracker<OverlayScreenProps, OverlayScreenState, PresenterScreenTrackedProps>(
31-
getPresenterScreenReactive
32-
)(
33-
withTiming<OverlayScreenProps & PresenterScreenTrackedProps, OverlayScreenState>()(function OverlayScreen(
34-
props: Readonly<WithTiming<OverlayScreenProps & PresenterScreenTrackedProps>>
35-
) {
36-
usePresenterScreenSubscriptions(props)
37-
38-
useEffect(() => {
39-
const bodyClassList: string[] = ['transparent']
40-
41-
document.body.classList.add(...bodyClassList)
42-
43-
return () => {
44-
document.body.classList.remove(...bodyClassList)
45-
}
46-
}, [])
47-
48-
return <OverlayScreenContent {...props} />
49-
})
50-
)
51-
52-
function OverlayScreenContent({
53-
playlist,
54-
segments,
55-
nextShowStyleBaseId,
56-
playlistId,
57-
currentPartInstance,
58-
nextPartInstance,
59-
timingDurations,
60-
rundownIds,
61-
}: Readonly<WithTiming<OverlayScreenProps & PresenterScreenTrackedProps>>) {
25+
export function OverlayScreen({ playlistId, studioId }: OverlayScreenProps): React.JSX.Element {
6226
const { t } = useTranslation()
6327

64-
if (playlist && playlistId && segments) {
65-
const currentPart = currentPartInstance
28+
usePresenterScreenSubscriptions({ playlistId, studioId })
6629

67-
let currentPartCountdown: number | null = null
68-
if (currentPart) {
69-
currentPartCountdown = timingDurations.remainingTimeOnCurrentPart || 0
70-
}
30+
const presenterScreenProps = useTracker(
31+
() => getPresenterScreenReactive(studioId, playlistId),
32+
[studioId, playlistId]
33+
)
34+
35+
const timing = useTiming()
7136

72-
const nextPart = nextPartInstance
37+
useEffect(() => {
38+
const bodyClassList: string[] = ['transparent']
7339

74-
// The over-under counter is something we may want to introduce into the screen at some point,
75-
// So I'm leaving these as a reference -- Jan Starzak, 2020/12/16
76-
// const overUnderClock = playlist.expectedDuration
77-
// ? (this.props.timingDurations.asPlayedRundownDuration || 0) - playlist.expectedDuration
78-
// : (this.props.timingDurations.asPlayedRundownDuration || 0) -
79-
// (this.props.timingDurations.totalRundownDuration || 0)
40+
document.body.classList.add(...bodyClassList)
8041

81-
const currentTime = timingDurations.currentTime || 0
42+
return () => {
43+
document.body.classList.remove(...bodyClassList)
44+
}
45+
}, [])
8246

47+
if (!presenterScreenProps?.playlist || !playlistId || !presenterScreenProps?.segments) {
8348
return (
8449
<div className="clocks-overlay">
85-
<div className="clocks-lower-third bottom">
86-
<div className="clocks-current-segment-countdown clocks-segment-countdown">
87-
{currentPartCountdown !== null ? (
88-
<Timediff time={currentPartCountdown} />
89-
) : (
90-
<span className="clock-segment-countdown-next">{t('Next')}</span>
91-
)}
92-
</div>
93-
{/*
50+
<div className="clocks-lower-third bottom"></div>
51+
</div>
52+
)
53+
}
54+
55+
const currentPart = presenterScreenProps?.currentPartInstance
56+
57+
let currentPartCountdown: number | null = null
58+
if (currentPart) {
59+
currentPartCountdown = timing.remainingTimeOnCurrentPart || 0
60+
}
61+
62+
const nextPart = presenterScreenProps?.nextPartInstance
63+
64+
const currentTime = timing.currentTime || 0
65+
66+
return (
67+
<div className="clocks-overlay">
68+
<div className="clocks-lower-third bottom">
69+
<div className="clocks-current-segment-countdown clocks-segment-countdown">
70+
{currentPartCountdown !== null ? (
71+
<Timediff time={currentPartCountdown} />
72+
) : (
73+
<span className="clock-segment-countdown-next">{t('Next')}</span>
74+
)}
75+
</div>
76+
{/*
9477
// An Auto-Next is something we may want to introduce in this view after we have
9578
// some feedback from the users and they say it may be useful.
9679
// -- Jan Starzak, 2020/12/16
@@ -100,39 +83,33 @@ function OverlayScreenContent({
10083
<img style={{ height: '0.5em', verticalAlign: 'top' }} src="/icons/auto-presenter-screen.svg" />
10184
</div>
10285
) : null} */}
103-
<div className="clocks-part-icon">
104-
{nextPart && nextShowStyleBaseId ? (
105-
<PieceIconContainer
106-
partInstanceId={nextPart.instance._id}
107-
showStyleBaseId={nextShowStyleBaseId}
108-
rundownIds={rundownIds}
109-
playlistActivationId={playlist?.activationId}
110-
/>
111-
) : null}
112-
</div>
113-
<div className="clocks-part-title clocks-part-title">
114-
{nextPart && nextShowStyleBaseId && nextPart.instance.part.title ? (
115-
<PieceNameContainer
116-
partName={nextPart.instance.part.title}
117-
partInstanceId={nextPart.instance._id}
118-
showStyleBaseId={nextShowStyleBaseId}
119-
rundownIds={rundownIds}
120-
playlistActivationId={playlist?.activationId}
121-
/>
122-
) : (
123-
'_'
124-
)}
125-
</div>
126-
<span className="clocks-time-now">
127-
<Moment interval={0} format="HH:mm:ss" date={currentTime} />
128-
</span>
86+
<div className="clocks-part-icon">
87+
{nextPart && presenterScreenProps?.nextShowStyleBaseId ? (
88+
<PieceIconContainer
89+
partInstanceId={nextPart.instance._id}
90+
showStyleBaseId={presenterScreenProps?.nextShowStyleBaseId}
91+
rundownIds={presenterScreenProps?.rundownIds}
92+
playlistActivationId={presenterScreenProps?.playlist?.activationId}
93+
/>
94+
) : null}
12995
</div>
96+
<div className="clocks-part-title clocks-part-title">
97+
{nextPart && presenterScreenProps?.nextShowStyleBaseId && nextPart.instance.part.title ? (
98+
<PieceNameContainer
99+
partName={nextPart.instance.part.title}
100+
partInstanceId={nextPart.instance._id}
101+
showStyleBaseId={presenterScreenProps?.nextShowStyleBaseId}
102+
rundownIds={presenterScreenProps?.rundownIds}
103+
playlistActivationId={presenterScreenProps?.playlist?.activationId}
104+
/>
105+
) : (
106+
'_'
107+
)}
108+
</div>
109+
<span className="clocks-time-now">
110+
<Moment interval={0} format="HH:mm:ss" date={currentTime} />
111+
</span>
130112
</div>
131-
)
132-
}
133-
return (
134-
<div className="clocks-overlay">
135-
<div className="clocks-lower-third bottom"></div>
136113
</div>
137114
)
138115
}

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

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
33
import { PartUi } from '../SegmentTimeline/SegmentTimelineContainer.js'
44
import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
55
import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
6-
import { withTiming, WithTiming } from '../RundownView/RundownTiming/withTiming.js'
7-
import {
8-
useSubscription,
9-
useSubscriptions,
10-
useTracker,
11-
withTracker,
12-
} from '../../lib/ReactMeteorData/ReactMeteorData.js'
6+
import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
7+
import { useSubscription, useSubscriptions, useTracker } from '../../lib/ReactMeteorData/ReactMeteorData.js'
138
import { protectString, unprotectString } from '@sofie-automation/shared-lib/dist/lib/protectedString'
149
import { getCurrentTime } from '../../lib/systemTime.js'
1510
import { PartInstance } from '@sofie-automation/meteor-lib/dist/collections/PartInstances'
@@ -36,7 +31,7 @@ import { RundownLayoutsAPI } from '../../lib/rundownLayouts.js'
3631
import { ShelfDashboardLayout } from '../Shelf/ShelfDashboardLayout.js'
3732
import { parse as queryStringParse } from 'query-string'
3833
import { calculatePartInstanceExpectedDurationWithTransition } from '@sofie-automation/corelib/dist/playout/timings'
39-
import { getPlaylistTimingDiff } from '../../lib/rundownTiming.js'
34+
import { getPlaylistTimingDiff, RundownTimingContext } from '../../lib/rundownTiming.js'
4035
import { UIShowStyleBase } from '@sofie-automation/meteor-lib/dist/api/showStyles'
4136
import { UIShowStyleBases, UIStudios } from '../Collections.js'
4237
import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
@@ -169,13 +164,16 @@ function getShowStyleBaseIdSegmentPartUi(
169164
}
170165
}
171166

172-
export const getPresenterScreenReactive = (props: PresenterScreenProps): PresenterScreenTrackedProps => {
173-
const studio = UIStudios.findOne(props.studioId)
167+
export const getPresenterScreenReactive = (
168+
studioId: StudioId,
169+
playlistId: RundownPlaylistId
170+
): PresenterScreenTrackedProps => {
171+
const studio = UIStudios.findOne(studioId)
174172

175173
let playlist: DBRundownPlaylist | undefined
176174

177-
if (props.playlistId)
178-
playlist = RundownPlaylists.findOne(props.playlistId, {
175+
if (playlistId)
176+
playlist = RundownPlaylists.findOne(playlistId, {
179177
fields: {
180178
lastIncorrectPartPlaybackReported: 0,
181179
modified: 0,
@@ -287,27 +285,41 @@ export const getPresenterScreenReactive = (props: PresenterScreenProps): Present
287285
}
288286
}
289287

290-
function PresenterScreenContent(props: WithTiming<PresenterScreenProps & PresenterScreenTrackedProps>): JSX.Element {
291-
usePresenterScreenSubscriptions(props)
288+
/**
289+
* This component renders a Countdown screen for a given playlist
290+
*/
291+
export function PresenterScreen({ playlistId, studioId }: PresenterScreenProps): JSX.Element {
292+
usePresenterScreenSubscriptions({ playlistId, studioId })
293+
294+
const presenterScreenProps = useTracker(
295+
() => getPresenterScreenReactive(studioId, playlistId),
296+
[studioId, playlistId]
297+
)
298+
299+
const timing = useTiming()
292300

293301
let selectedPresenterLayout: RundownLayoutBase | undefined = undefined
294302

295-
if (props.rundownLayouts) {
303+
if (presenterScreenProps?.rundownLayouts) {
296304
// first try to use the one selected by the user
297-
if (props.presenterLayoutId) {
298-
selectedPresenterLayout = props.rundownLayouts.find((i) => i._id === props.presenterLayoutId)
305+
if (presenterScreenProps.presenterLayoutId) {
306+
selectedPresenterLayout = presenterScreenProps.rundownLayouts.find(
307+
(i) => i._id === presenterScreenProps.presenterLayoutId
308+
)
299309
}
300310

301311
// if couldn't find based on id, try matching part of the name
302-
if (props.presenterLayoutId && !selectedPresenterLayout) {
303-
selectedPresenterLayout = props.rundownLayouts.find(
304-
(i) => i.name.indexOf(unprotectString(props.presenterLayoutId!)) >= 0
312+
if (presenterScreenProps.presenterLayoutId && !selectedPresenterLayout) {
313+
selectedPresenterLayout = presenterScreenProps.rundownLayouts.find(
314+
(i) => i.name.indexOf(unprotectString(presenterScreenProps.presenterLayoutId!)) >= 0
305315
)
306316
}
307317

308318
// if still not found, use the first one
309319
if (!selectedPresenterLayout) {
310-
selectedPresenterLayout = props.rundownLayouts.find((i) => RundownLayoutsAPI.isLayoutForPresenterView(i))
320+
selectedPresenterLayout = presenterScreenProps.rundownLayouts.find((i) =>
321+
RundownLayoutsAPI.isLayoutForPresenterView(i)
322+
)
311323
}
312324
}
313325

@@ -322,15 +334,37 @@ function PresenterScreenContent(props: WithTiming<PresenterScreenProps & Present
322334
if (presenterLayout && RundownLayoutsAPI.isDashboardLayout(presenterLayout)) {
323335
return (
324336
<PresenterScreenContentDashboardLayout
325-
studio={props.studio}
326-
playlist={props.playlist}
327-
currentShowStyleBase={props.currentShowStyleBase}
328-
currentShowStyleVariant={props.currentShowStyleVariant}
337+
studio={presenterScreenProps?.studio}
338+
playlist={presenterScreenProps?.playlist}
339+
currentShowStyleBase={presenterScreenProps?.currentShowStyleBase}
340+
currentShowStyleVariant={presenterScreenProps?.currentShowStyleVariant}
329341
layout={presenterLayout}
330342
/>
331343
)
332344
} else {
333-
return <PresenterScreenContentDefaultLayout {...props} />
345+
return (
346+
<PresenterScreenContentDefaultLayout
347+
playlist={presenterScreenProps?.playlist}
348+
currentPartInstance={presenterScreenProps?.currentPartInstance}
349+
nextPartInstance={presenterScreenProps?.nextPartInstance}
350+
currentSegment={presenterScreenProps?.currentSegment}
351+
currentShowStyleBaseId={presenterScreenProps?.currentShowStyleBaseId}
352+
currentShowStyleBase={presenterScreenProps?.currentShowStyleBase}
353+
currentShowStyleVariantId={presenterScreenProps?.currentShowStyleVariantId}
354+
currentShowStyleVariant={presenterScreenProps?.currentShowStyleVariant}
355+
nextSegment={presenterScreenProps?.nextSegment}
356+
nextShowStyleBaseId={presenterScreenProps?.nextShowStyleBaseId}
357+
playlistId={playlistId}
358+
presenterLayoutId={presenterScreenProps?.presenterLayoutId}
359+
rundownIds={presenterScreenProps?.rundownIds ?? []}
360+
rundowns={presenterScreenProps?.rundowns ?? []}
361+
segments={presenterScreenProps?.segments ?? []}
362+
showStyleBaseIds={presenterScreenProps?.showStyleBaseIds ?? []}
363+
studio={presenterScreenProps?.studio}
364+
studioId={studioId}
365+
timingDurations={timing}
366+
/>
367+
)
334368
}
335369
}
336370

@@ -435,7 +469,7 @@ function PresenterScreenContentDefaultLayout({
435469
nextPartInstance,
436470
nextSegment,
437471
rundownIds,
438-
}: Readonly<WithTiming<PresenterScreenProps & PresenterScreenTrackedProps>>) {
472+
}: Readonly<PresenterScreenProps & PresenterScreenTrackedProps & { timingDurations: RundownTimingContext }>) {
439473
if (playlist && playlistId && segments) {
440474
const currentPartOrSegmentCountdown =
441475
timingDurations.remainingBudgetOnCurrentSegment ?? timingDurations.remainingTimeOnCurrentPart ?? 0
@@ -560,10 +594,3 @@ function PresenterScreenContentDefaultLayout({
560594
}
561595
return null
562596
}
563-
564-
/**
565-
* This component renders a Countdown screen for a given playlist
566-
*/
567-
export const PresenterScreen = withTracker<PresenterScreenProps, {}, PresenterScreenTrackedProps>(
568-
getPresenterScreenReactive
569-
)(withTiming<PresenterScreenProps & PresenterScreenTrackedProps, {}>()(PresenterScreenContent))

‎packages/webui/src/client/ui/RundownView/RundownTiming/withTiming.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -166,15 +166,11 @@ function getFilterFunction(
166166
return undefined
167167
}
168168

169-
export function useTiming({
170-
tickResolution,
171-
dataResolution,
172-
filter,
173-
}: {
174-
tickResolution: TimingTickResolution
175-
dataResolution: TimingDataResolution
169+
export function useTiming(
170+
tickResolution: TimingTickResolution = TimingTickResolution.Synced,
171+
dataResolution: TimingDataResolution = TimingDataResolution.Synced,
176172
filter?: TimingFilterFunction | string | (string | number)[]
177-
}): RundownTimingContext {
173+
): RundownTimingContext {
178174
const [_0, setForceUpdate] = useState(0)
179175

180176
const context = useContext(RundownTimingProviderContext)

0 commit comments

Comments
 (0)