Skip to content

Commit da0a0e2

Browse files
nytaminnytamin
committed
Merge pull request #1435 from superFlyTV/feat/start-replacing-withtiming'
chore(webui): replace withTiming with useTiming
2 parents 2c2e521 + a67ee14 commit da0a0e2

31 files changed

+477
-491
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,11 @@ body.transparent {
6060
.clocks-part-icon {
6161
width: (1em * 1.2599784264077);
6262
margin-left: 0.3em;
63+
64+
> svg {
65+
vertical-align: top;
66+
margin-top: 0.05em;
67+
}
6368
}
6469

6570
.clocks-part-icon > svg.piece-icon {

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React, { PropsWithChildren, useMemo } from 'react'
22
import { PartId } from '@sofie-automation/corelib/dist/dataModel/Ids'
3-
import { TimingDataResolution, TimingTickResolution, withTiming } from '../../RundownView/RundownTiming/withTiming.js'
3+
import { TimingDataResolution, TimingTickResolution, useTiming } from '../../RundownView/RundownTiming/withTiming.js'
44
import { protectStringArray } from '@sofie-automation/corelib/dist/protectedString'
55

66
export const OrderedPartsContext = React.createContext<PartId[]>([])
77

8-
export const OrderedPartsProvider = withTiming<PropsWithChildren<{}>, {}>({
9-
dataResolution: TimingDataResolution.Synced,
10-
tickResolution: TimingTickResolution.Low,
11-
})(function OrderedPartsProvider({ timingDurations, children }) {
8+
export function OrderedPartsProvider({ children }: PropsWithChildren): JSX.Element {
9+
const timingDurations = useTiming(TimingTickResolution.Low, TimingDataResolution.Synced)
10+
1211
const orderedPartIds = useMemo(
1312
() => protectStringArray<PartId>(timingDurations.partCountdown ? Object.keys(timingDurations.partCountdown) : []),
1413
[Object.keys(timingDurations.partCountdown ?? {}).join(',')]
1514
)
1615

1716
return <OrderedPartsContext.Provider value={orderedPartIds}>{children}</OrderedPartsContext.Provider>
18-
})
17+
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { AutoNextStatus } from '../../RundownView/RundownTiming/AutoNextStatus.j
1010
import { CurrentPartOrSegmentRemaining } from '../../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
1111
import { PartCountdown } from '../../RundownView/RundownTiming/PartCountdown.js'
1212
import { PartDisplayDuration } from '../../RundownView/RundownTiming/PartDuration.js'
13-
import { TimingDataResolution, TimingTickResolution, withTiming } from '../../RundownView/RundownTiming/withTiming.js'
13+
import { TimingDataResolution, TimingTickResolution, useTiming } from '../../RundownView/RundownTiming/withTiming.js'
1414
import { PartUi } from '../../SegmentContainer/withResolvedSegment.js'
1515
import { Piece } from './Piece.js'
1616

@@ -22,12 +22,11 @@ interface IProps {
2222
isNext: boolean
2323
}
2424

25-
export const Part = withTiming<IProps, {}>({
26-
tickResolution: TimingTickResolution.High,
27-
dataResolution: TimingDataResolution.High,
28-
})(function Part({ playlist, part, piece, timingDurations, isLive, isNext }): JSX.Element | null {
25+
export function Part({ playlist, part, piece, isLive, isNext }: IProps): JSX.Element | null {
2926
const areaZoom = useContext(AreaZoom)
3027

28+
const timingDurations = useTiming(TimingTickResolution.High, TimingDataResolution.High)
29+
3130
let left =
3231
(timingDurations.partCountdown?.[unprotectString(part.partId)] ?? 0) -
3332
(getPartInstanceTimingValue(timingDurations.partPlayed, part.instance) || 0)
@@ -82,4 +81,4 @@ export const Part = withTiming<IProps, {}>({
8281
</div>
8382
</div>
8483
)
85-
})
84+
}

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ 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'
6+
import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
77
import {
88
useSubscription,
99
useSubscriptions,
@@ -331,9 +331,7 @@ function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
331331
])
332332
}
333333

334-
function DirectorScreenWithSubscription(
335-
props: WithTiming<DirectorScreenProps & DirectorScreenTrackedProps>
336-
): JSX.Element {
334+
function DirectorScreenWithSubscription(props: DirectorScreenProps & DirectorScreenTrackedProps): JSX.Element {
337335
useDirectorScreenSubscriptions(props)
338336

339337
return <DirectorScreenRender {...props} />
@@ -347,14 +345,15 @@ function DirectorScreenRender({
347345
playlistId,
348346
currentPartInstance,
349347
currentSegment,
350-
timingDurations,
351348
nextPartInstance,
352349
nextSegment,
353350
rundownIds,
354-
}: Readonly<WithTiming<DirectorScreenProps & DirectorScreenTrackedProps>>) {
351+
}: Readonly<DirectorScreenProps & DirectorScreenTrackedProps>) {
355352
useSetDocumentClass('dark', 'xdark')
356353
const { t } = useTranslation()
357354

355+
const timingDurations = useTiming()
356+
358357
if (playlist && playlistId && segments) {
359358
const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing) || 0
360359
const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
@@ -580,4 +579,4 @@ function DirectorScreenRender({
580579
*/
581580
export const DirectorScreen = withTracker<DirectorScreenProps, {}, DirectorScreenTrackedProps>(
582581
getDirectorScreenReactive
583-
)(withTiming<DirectorScreenProps & DirectorScreenTrackedProps, {}>()(DirectorScreenWithSubscription))
582+
)(DirectorScreenWithSubscription)

‎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
}

0 commit comments

Comments
 (0)