chore: replace various uses of withTiming with useTiming

Author: Julusian

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

@@ -1,18 +1,17 @@
 import React, { PropsWithChildren, useMemo } from 'react'
 import { PartId } from '@sofie-automation/corelib/dist/dataModel/Ids'
-import { TimingDataResolution, TimingTickResolution, withTiming } from '../../RundownView/RundownTiming/withTiming.js'
+import { TimingDataResolution, TimingTickResolution, useTiming } from '../../RundownView/RundownTiming/withTiming.js'
 import { protectStringArray } from '@sofie-automation/corelib/dist/protectedString'
 
 export const OrderedPartsContext = React.createContext<PartId[]>([])
 
-export const OrderedPartsProvider = withTiming<PropsWithChildren<{}>, {}>({
-	dataResolution: TimingDataResolution.Synced,
-	tickResolution: TimingTickResolution.Low,
-})(function OrderedPartsProvider({ timingDurations, children }) {
+export function OrderedPartsProvider({ children }: PropsWithChildren): JSX.Element {
+	const timingDurations = useTiming(TimingTickResolution.Low, TimingDataResolution.Synced)
+
 	const orderedPartIds = useMemo(
 		() => protectStringArray<PartId>(timingDurations.partCountdown ? Object.keys(timingDurations.partCountdown) : []),
 		[Object.keys(timingDurations.partCountdown ?? {}).join(',')]
 	)
 
 	return <OrderedPartsContext.Provider value={orderedPartIds}>{children}</OrderedPartsContext.Provider>
-})
+}

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

@@ -10,7 +10,7 @@ import { AutoNextStatus } from '../../RundownView/RundownTiming/AutoNextStatus.j
 import { CurrentPartOrSegmentRemaining } from '../../RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
 import { PartCountdown } from '../../RundownView/RundownTiming/PartCountdown.js'
 import { PartDisplayDuration } from '../../RundownView/RundownTiming/PartDuration.js'
-import { TimingDataResolution, TimingTickResolution, withTiming } from '../../RundownView/RundownTiming/withTiming.js'
+import { TimingDataResolution, TimingTickResolution, useTiming } from '../../RundownView/RundownTiming/withTiming.js'
 import { PartUi } from '../../SegmentContainer/withResolvedSegment.js'
 import { Piece } from './Piece.js'
 
@@ -22,12 +22,11 @@ interface IProps {
 	isNext: boolean
 }
 
-export const Part = withTiming<IProps, {}>({
-	tickResolution: TimingTickResolution.High,
-	dataResolution: TimingDataResolution.High,
-})(function Part({ playlist, part, piece, timingDurations, isLive, isNext }): JSX.Element | null {
+export function Part({ playlist, part, piece, isLive, isNext }: IProps): JSX.Element | null {
 	const areaZoom = useContext(AreaZoom)
 
+	const timingDurations = useTiming(TimingTickResolution.High, TimingDataResolution.High)
+
 	let left =
 		(timingDurations.partCountdown?.[unprotectString(part.partId)] ?? 0) -
 		(getPartInstanceTimingValue(timingDurations.partPlayed, part.instance) || 0)
@@ -82,4 +81,4 @@ export const Part = withTiming<IProps, {}>({
 			</div>
 		</div>
 	)
-})
+}

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

@@ -3,7 +3,7 @@ import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { PartUi } from '../SegmentTimeline/SegmentTimelineContainer.js'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
-import { withTiming, WithTiming } from '../RundownView/RundownTiming/withTiming.js'
+import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
 import {
 	useSubscription,
 	useSubscriptions,
@@ -331,9 +331,7 @@ function useDirectorScreenSubscriptions(props: DirectorScreenProps): void {
 	])
 }
 
-function DirectorScreenWithSubscription(
-	props: WithTiming<DirectorScreenProps & DirectorScreenTrackedProps>
-): JSX.Element {
+function DirectorScreenWithSubscription(props: DirectorScreenProps & DirectorScreenTrackedProps): JSX.Element {
 	useDirectorScreenSubscriptions(props)
 
 	return <DirectorScreenRender {...props} />
@@ -347,14 +345,15 @@ function DirectorScreenRender({
 	playlistId,
 	currentPartInstance,
 	currentSegment,
-	timingDurations,
 	nextPartInstance,
 	nextSegment,
 	rundownIds,
-}: Readonly<WithTiming<DirectorScreenProps & DirectorScreenTrackedProps>>) {
+}: Readonly<DirectorScreenProps & DirectorScreenTrackedProps>) {
 	useSetDocumentClass('dark', 'xdark')
 	const { t } = useTranslation()
 
+	const timingDurations = useTiming()
+
 	if (playlist && playlistId && segments) {
 		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing) || 0
 		const expectedEnd = PlaylistTiming.getExpectedEnd(playlist.timing)
@@ -580,4 +579,4 @@ function DirectorScreenRender({
  */
 export const DirectorScreen = withTracker<DirectorScreenProps, {}, DirectorScreenTrackedProps>(
 	getDirectorScreenReactive
-)(withTiming<DirectorScreenProps & DirectorScreenTrackedProps, {}>()(DirectorScreenWithSubscription))
+)(DirectorScreenWithSubscription)

packages/webui/src/client/ui/Prompter/OverUnderTimer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { withTiming, WithTiming } from '../RundownView/RundownTiming/withTiming.js'
+import { useTiming } from '../RundownView/RundownTiming/withTiming.js'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import { RundownUtils } from '../../lib/rundown.js'
 import ClassNames from 'classnames'
@@ -13,11 +13,9 @@ interface IProps {
 /**
  * Shows an over/under timer for the rundownPlaylist. Requires a RundownTimingContext from the RundownTimingProvider
  */
-export const OverUnderTimer = withTiming<IProps, {}>()(function OverUnderTimer({
-	rundownPlaylist,
-	style,
-	timingDurations,
-}: WithTiming<IProps>) {
+export function OverUnderTimer({ rundownPlaylist, style }: IProps): JSX.Element {
+	const timingDurations = useTiming()
+
 	const overUnderClock = getPlaylistTimingDiff(rundownPlaylist, timingDurations) ?? 0
 
 	return (
@@ -31,4 +29,4 @@ export const OverUnderTimer = withTiming<IProps, {}>()(function OverUnderTimer({
 			{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
 		</span>
 	)
-})
+}

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

@@ -31,7 +31,7 @@ import { StudioRouteSet } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
 import { ContextMenu, MenuItem, ContextMenuTrigger } from '@jstarpl/react-contextmenu'
 import { RundownTimingProvider } from './RundownView/RundownTiming/RundownTimingProvider.js'
-import { withTiming, WithTiming } from './RundownView/RundownTiming/withTiming.js'
+import { useTiming } from './RundownView/RundownTiming/withTiming.js'
 import { CurrentPartOrSegmentRemaining } from './RundownView/RundownTiming/CurrentPartOrSegmentRemaining.js'
 import { AutoNextStatus } from './RundownView/RundownTiming/AutoNextStatus.js'
 import { SegmentTimelineContainer, PieceUi, PartUi, SegmentUi } from './SegmentTimeline/SegmentTimelineContainer.js'
@@ -185,15 +185,16 @@ interface ITimingDisplayProps {
 	layout: RundownLayoutRundownHeader | undefined
 }
 
-const TimingDisplay = withTiming<ITimingDisplayProps, {}>()(function TimingDisplay({
+function TimingDisplay({
 	rundownPlaylist,
 	currentRundown,
 	rundownCount,
 	layout,
-	timingDurations,
-}: WithTiming<ITimingDisplayProps>): JSX.Element | null {
+}: ITimingDisplayProps): JSX.Element | null {
 	const { t } = useTranslation()
 
+	const timingDurations = useTiming()
+
 	if (!rundownPlaylist) return null
 
 	const expectedStart = PlaylistTiming.getExpectedStart(rundownPlaylist.timing)
@@ -257,7 +258,7 @@ const TimingDisplay = withTiming<ITimingDisplayProps, {}>()(function TimingDispl
 			</div>
 		</div>
 	)
-})
+}
 
 interface IRundownHeaderProps {
 	playlist: DBRundownPlaylist

packages/webui/src/client/ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.tsx

@@ -3,36 +3,32 @@ import { PartId, PartInstanceId, SegmentId } from '@sofie-automation/corelib/dis
 import { SourceLayerType } from '@sofie-automation/blueprints-integration'
 import { PieceStatusCode } from '@sofie-automation/corelib/dist/dataModel/Piece'
 import { unprotectString } from '@sofie-automation/corelib/dist/protectedString'
-import { TimingDataResolution, TimingTickResolution, withTiming } from '../RundownTiming/withTiming.js'
+import { TimingDataResolution, TimingTickResolution, useTiming } from '../RundownTiming/withTiming.js'
 import { RundownUtils } from '../../../lib/rundown.js'
 import classNames from 'classnames'
 import { MediaStatusIndicator } from '../../MediaStatus/MediaStatusIndicator.js'
 import { scrollToPart, scrollToSegment } from '../../../lib/viewPort.js'
 import { logger } from '../../../lib/logging.js'
 
-export const MediaStatusPopUpItem = withTiming<
-	{
-		partId: PartId | undefined
-		segmentId: SegmentId | undefined
-		partInstanceId: PartInstanceId | undefined
-		status: PieceStatusCode
-		isWorkingOn: boolean
-		statusOverlay?: string | undefined
-		sourceLayerType?: SourceLayerType | undefined
-		sourceLayerName?: string | undefined
-		segmentIdentifier?: string | undefined
-		partIdentifier?: string | undefined
-		invalid?: boolean | undefined
-		label: string
-		isAdLib: boolean
-		isLive: boolean
-		isNext: boolean
-	},
-	{}
->({
-	dataResolution: TimingDataResolution.Synced,
-	tickResolution: TimingTickResolution.Low,
-})(function MediaStatusPopUpItem({
+interface IMediaStatusPopUpItemProps {
+	partId: PartId | undefined
+	segmentId: SegmentId | undefined
+	partInstanceId: PartInstanceId | undefined
+	status: PieceStatusCode
+	isWorkingOn: boolean
+	statusOverlay?: string | undefined
+	sourceLayerType?: SourceLayerType | undefined
+	sourceLayerName?: string | undefined
+	segmentIdentifier?: string | undefined
+	partIdentifier?: string | undefined
+	invalid?: boolean | undefined
+	label: string
+	isAdLib: boolean
+	isLive: boolean
+	isNext: boolean
+}
+
+export function MediaStatusPopUpItem({
 	partId,
 	partInstanceId,
 	segmentId,
@@ -45,11 +41,12 @@ export const MediaStatusPopUpItem = withTiming<
 	partIdentifier,
 	invalid,
 	label,
-	timingDurations,
 	isAdLib,
 	isLive,
 	isNext,
-}): JSX.Element {
+}: IMediaStatusPopUpItemProps): JSX.Element {
+	const timingDurations = useTiming(TimingTickResolution.Low, TimingDataResolution.Synced)
+
 	const timingId = unprotectString(partInstanceId ?? partId)
 	const thisPartCountdown = timingId ? timingDurations.partCountdown?.[timingId] : undefined
 
@@ -109,4 +106,4 @@ export const MediaStatusPopUpItem = withTiming<
 			<td className="media-status-popup-item__label">{label}</td>
 		</tr>
 	)
-})
+}

packages/webui/src/client/ui/RundownView/PlaylistLoopingHeader.tsx

@@ -1,43 +1,31 @@
-import React from 'react'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Moment from 'react-moment'
 import { LoopingIcon } from '../../lib/ui/icons/looping.js'
-import { WithTiming, withTiming } from './RundownTiming/withTiming.js'
+import { useTiming } from './RundownTiming/withTiming.js'
 import { RundownUtils } from '../../lib/rundown.js'
 
-const NextLoopClock = withTiming<{ useWallClock?: boolean }, {}>()(
-	class NextLoopClock extends React.Component<
-		WithTiming<{
-			useWallClock?: boolean
-		}>
-	> {
-		render(): JSX.Element | null {
-			const { timingDurations, useWallClock } = this.props
+function NextLoopClock({ useWallClock }: { useWallClock?: boolean }) {
+	const timingDurations = useTiming()
 
-			if (!timingDurations?.partCountdown) return null
-			const thisPartCountdown = timingDurations.partCountdown[
-				Object.keys(timingDurations.partCountdown)[0] // use the countdown to first part of rundown
-			] as number | undefined
+	if (!timingDurations?.partCountdown) return null
+	const thisPartCountdown = timingDurations.partCountdown[
+		Object.keys(timingDurations.partCountdown)[0] // use the countdown to first part of rundown
+	] as number | undefined
+
+	return (
+		<span>
+			{useWallClock ? (
+				<Moment interval={0} format="HH:mm:ss" date={(timingDurations.currentTime || 0) + (thisPartCountdown || 0)} />
+			) : (
+				RundownUtils.formatTimeToShortTime(
+					thisPartCountdown! // shouldShow will be false if thisPartCountdown is undefined
+				)
+			)}
+		</span>
+	)
+}
 
-			return (
-				<span>
-					{useWallClock ? (
-						<Moment
-							interval={0}
-							format="HH:mm:ss"
-							date={(timingDurations.currentTime || 0) + (thisPartCountdown || 0)}
-						/>
-					) : (
-						RundownUtils.formatTimeToShortTime(
-							thisPartCountdown! // shouldShow will be false if thisPartCountdown is undefined
-						)
-					)}
-				</span>
-			)
-		}
-	}
-)
 interface ILoopingHeaderProps {
 	position: 'start' | 'end'
 	multiRundown?: boolean

packages/webui/src/client/ui/RundownView/RundownDividerHeader.tsx

@@ -1,6 +1,6 @@
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import Moment from 'react-moment'
-import { TimingDataResolution, TimingTickResolution, withTiming, WithTiming } from './RundownTiming/withTiming.js'
+import { TimingDataResolution, TimingTickResolution, useTiming } from './RundownTiming/withTiming.js'
 import { RundownUtils } from '../../lib/rundown.js'
 import { useTranslation } from 'react-i18next'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
@@ -22,16 +22,14 @@ interface MarkerCountdownProps {
  * This is a countdown to the rundown's Expected Start or Expected End time. It shows nothing if the expectedStart is undefined
  * or the time to Expected Start/End from now is larger than 6 hours.
  */
-const MarkerCountdownText = withTiming<MarkerCountdownProps, {}>({
-	filter: 'currentTime',
-	tickResolution: TimingTickResolution.Low,
-	dataResolution: TimingDataResolution.Synced,
-})(function MarkerCountdown(props: WithTiming<MarkerCountdownProps>) {
+function MarkerCountdownText(props: MarkerCountdownProps) {
 	const { t } = useTranslation()
 
+	const timingDurations = useTiming(TimingTickResolution.Low, TimingDataResolution.Synced, 'currentTime')
+
 	if (props.markerTimestamp === undefined) return null
 
-	const time = props.markerTimestamp - (props.timingDurations.currentTime || 0)
+	const time = props.markerTimestamp - (timingDurations.currentTime || 0)
 
 	if (time < QUATER_DAY) {
 		return (
@@ -47,7 +45,7 @@ const MarkerCountdownText = withTiming<MarkerCountdownProps, {}>({
 		)
 	}
 	return null
-})
+}
 
 /**
  * This is a component for showing the title of the rundown, it's expectedStart and expectedDuration and

packages/webui/src/client/ui/RundownView/RundownTiming/AutoNextStatus.tsx

@@ -1,14 +1,12 @@
 import { useTranslation } from 'react-i18next'
-import { TimingDataResolution, TimingTickResolution, withTiming, WithTiming } from './withTiming.js'
+import { TimingDataResolution, TimingTickResolution, useTiming } from './withTiming.js'
 
-export const AutoNextStatus = withTiming<{}, {}>({
-	filter: 'currentPartWillAutoNext',
-	dataResolution: TimingDataResolution.High,
-	tickResolution: TimingTickResolution.High,
-})(function AutoNextStatus({ timingDurations }: WithTiming<{}>) {
+export function AutoNextStatus(): JSX.Element | null {
 	const { t } = useTranslation()
 
+	const timingDurations = useTiming(TimingTickResolution.High, TimingDataResolution.High, 'currentPartWillAutoNext')
+
 	return timingDurations.currentPartWillAutoNext ? (
 		<div className="rundown-view__part__icon rundown-view__part__icon--auto-next">{t('Auto')}</div>
 	) : null
-})
+}