chore: add useTiming as a hook to listen to changes in the Timing context

Author: jstarpl

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

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import _ from 'underscore'
 import { RundownTiming } from './RundownTiming.js'
 import { RundownTimingContext } from '../../../lib/rundownTiming.js'
@@ -155,6 +155,66 @@ export function withTiming<IProps, IState>(
 	}
 }
 
+function getFilterFunction(
+	filter: TimingFilterFunction | string | (string | number)[] | undefined
+): TimingFilterFunction | undefined {
+	if (typeof filter === 'function') {
+		return filter
+	} else if (filter) {
+		return _.property(filter as string)
+	}
+	return undefined
+}
+
+export function useTiming({
+	tickResolution,
+	dataResolution,
+	filter,
+}: {
+	tickResolution: TimingTickResolution
+	dataResolution: TimingDataResolution
+	filter?: TimingFilterFunction | string | (string | number)[]
+}): RundownTimingContext {
+	const [_0, setForceUpdate] = useState(0)
+
+	const context = useContext(RundownTimingProviderContext)
+
+	const highResDurations: RundownTimingContext = context.durations
+	const syncedDurations: RundownTimingContext = context.syncedDurations
+
+	const isDirty = useRef(false)
+	const previousValue = useRef<RundownTimingContext | null>(null)
+
+	const filterGetter = useRef(getFilterFunction(filter))
+
+	const refreshComponent = useCallback(() => {
+		if (!filterGetter.current) {
+			setForceUpdate(Date.now())
+		} else {
+			const buf = filterGetter.current?.(context.durations || {})
+			if (isDirty.current || !_.isEqual(buf, previousValue.current)) {
+				previousValue.current = buf
+				isDirty.current = false
+				setForceUpdate(Date.now())
+			}
+		}
+	}, [filter])
+
+	useEffect(() => {
+		window.addEventListener(rundownTimingEventFromTickResolution(tickResolution), refreshComponent)
+
+		return () => {
+			window.removeEventListener(rundownTimingEventFromTickResolution(tickResolution), refreshComponent)
+		}
+	}, [tickResolution, refreshComponent])
+
+	if (componentIsDirty(filterGetter.current, highResDurations, dataResolution)) {
+		isDirty.current = true
+	}
+
+	return rundownTimingDataFromDataResolution(dataResolution, highResDurations, syncedDurations)
+}
+
 function componentIsDirty(
 	filterGetter: ((...args: any[]) => any) | undefined,
 	highResDurations: RundownTimingContext,