chore: remove remaining usages of react-timer-hoc

Author: Julusian

packages/webui/package.json

@@ -78,7 +78,6 @@
 		"react-popper": "^2.3.0",
 		"react-router-bootstrap": "^0.25.0",
 		"react-router-dom": "^5.3.4",
-		"react-timer-hoc": "^2.3.0",
 		"semver": "^7.6.3",
 		"sha.js": "^2.4.11",
 		"shuttle-webhid": "^0.0.2",

packages/webui/src/client/lib/Moment.tsx

@@ -1,12 +1,13 @@
 import Moment, { MomentProps } from 'react-moment'
 import moment from 'moment'
-import { getCurrentTime } from './systemTime.js'
-import timer from 'react-timer-hoc'
+import { useCurrentTime } from './lib'
 
 /**
  * Use instead of <Moment fromNow></Moment>, its result is synced with getCurrentTime()
  * @param args same as for Moment
  */
-export const MomentFromNow = timer(60000)(function MomentFromNow(args: MomentProps) {
-	return <Moment {...args} from={moment(getCurrentTime())} interval={0}></Moment>
-})
+export function MomentFromNow(args: MomentProps): JSX.Element {
+	const time = useCurrentTime(60000)
+
+	return <Moment {...args} from={moment(time)} interval={0}></Moment>
+}

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

@@ -11,7 +11,6 @@ import {
 } from '../lib/ReactMeteorData/react-meteor-data.js'
 import { VTContent, TSR, NoteSeverity, ISourceLayer } from '@sofie-automation/blueprints-integration'
 import { useTranslation, withTranslation } from 'react-i18next'
-import timer from 'react-timer-hoc'
 import * as CoreIcon from '@nrk/core-icons/jsx'
 import { Spinner } from '../lib/Spinner.js'
 import ClassNames from 'classnames'
@@ -172,117 +171,13 @@ import { PropertiesPanel } from './UserEditOperations/PropertiesPanel.js'
 import { PreviewPopUpContextProvider } from './PreviewPopUp/PreviewPopUpContext.js'
 import Navbar from 'react-bootstrap/Navbar'
 import { AnimatePresence } from 'motion/react'
+import { WarningDisplay } from './RundownView/WarningDisplay.js'
 
 const REHEARSAL_MARGIN = 1 * 60 * 1000
 const HIDE_NOTIFICATIONS_AFTER_MOUNT: number | undefined = 5000
 
 const DEFAULT_SEGMENT_VIEW_MODE = SegmentViewMode.Timeline
 
-interface ITimingWarningProps {
-	playlist: DBRundownPlaylist
-	inActiveRundownView?: boolean
-	studioMode: boolean
-	oneMinuteBeforeAction: (e: Event, noResetOnActivate: boolean) => void
-}
-
-interface ITimingWarningState {
-	plannedStartCloseShown?: boolean
-	plannedStartCloseShow?: boolean
-}
-const WarningDisplay = withTranslation()(
-	timer(5000)(
-		class WarningDisplay extends React.Component<Translated<ITimingWarningProps>, ITimingWarningState> {
-			constructor(props: Translated<ITimingWarningProps>) {
-				super(props)
-
-				this.state = {}
-			}
-
-			componentDidUpdate(prevProps: ITimingWarningProps) {
-				if (
-					(this.props.playlist.activationId && !prevProps.playlist.activationId && this.props.playlist.rehearsal) ||
-					this.props.playlist.rehearsal !== prevProps.playlist.rehearsal
-				) {
-					this.setState({
-						plannedStartCloseShown: false,
-					})
-				}
-
-				const expectedStart = PlaylistTiming.getExpectedStart(this.props.playlist.timing)
-				const expectedDuration = PlaylistTiming.getExpectedDuration(this.props.playlist.timing)
-
-				if (
-					this.props.playlist.activationId &&
-					this.props.playlist.rehearsal &&
-					expectedStart &&
-					// the expectedStart is near
-					getCurrentTime() + REHEARSAL_MARGIN > expectedStart &&
-					// but it's not horribly in the past
-					getCurrentTime() < expectedStart + (expectedDuration || 60 * 60 * 1000) &&
-					!this.props.inActiveRundownView &&
-					!this.state.plannedStartCloseShown
-				) {
-					this.setState({
-						plannedStartCloseShow: true,
-						plannedStartCloseShown: true,
-					})
-				}
-			}
-
-			discard = () => {
-				this.setState({
-					plannedStartCloseShow: false,
-				})
-			}
-
-			oneMinuteBeforeAction = (e: any, noResetOnActivate: boolean) => {
-				this.setState({
-					plannedStartCloseShow: false,
-				})
-
-				this.props.oneMinuteBeforeAction(e, noResetOnActivate)
-			}
-
-			render(): JSX.Element | null {
-				const { t } = this.props
-
-				if (!this.props.playlist) return null
-
-				return (
-					<ModalDialog
-						title={t('Start time is close')}
-						acceptText={t('Reset and Activate "On Air"')}
-						secondaryText={t('Cancel')}
-						actions={[
-							{
-								label: t('Activate "On Air"'),
-								classNames: 'btn-secondary',
-								on: (e) => {
-									this.oneMinuteBeforeAction(e as Event, true) // this one activates without resetting
-								},
-							},
-						]}
-						onAccept={(e) => this.oneMinuteBeforeAction(e as Event, false)}
-						onDiscard={this.discard}
-						onSecondary={this.discard}
-						show={
-							this.props.studioMode &&
-							this.state.plannedStartCloseShow &&
-							!(this.props.playlist.activationId && !this.props.playlist.rehearsal) &&
-							!!this.props.playlist.activationId
-						}
-					>
-						<p>
-							{t(
-								'You are in rehearsal mode, the broadcast starts in less than 1 minute. Do you want to go into On-Air mode?'
-							)}
-						</p>
-					</ModalDialog>
-				)
-			}
-		}
-	)
-)
 interface ITimingDisplayProps {
 	rundownPlaylist: DBRundownPlaylist
 	currentRundown: Rundown | undefined

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

@@ -0,0 +1,103 @@
+import type { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
+import { PlaylistTiming } from '@sofie-automation/corelib/dist/playout/rundownTiming'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ModalDialog } from '../../lib/ModalDialog'
+import { useCurrentTime } from '../../lib/lib'
+
+export const REHEARSAL_MARGIN = 1 * 60 * 1000
+
+interface ITimingWarningProps {
+	playlist: Pick<DBRundownPlaylist, '_id' | 'rehearsal' | 'activationId' | 'timing'>
+	inActiveRundownView?: boolean
+	studioMode: boolean
+	oneMinuteBeforeAction: (e: Event, noResetOnActivate: boolean) => void
+}
+
+export function WarningDisplay({
+	playlist,
+	inActiveRundownView,
+	studioMode,
+	oneMinuteBeforeAction,
+}: ITimingWarningProps): JSX.Element | null {
+	const { t } = useTranslation()
+
+	const currentTime = useCurrentTime(5000)
+
+	const [plannedStartCloseShow, setPlannedStartCloseShow] = useState(false)
+	const [plannedStartCloseShown, setPlannedStartCloseShown] = useState(false)
+
+	const discard = () => {
+		setPlannedStartCloseShow(false)
+	}
+
+	const oneMinuteBeforeAction2 = (e: any, noResetOnActivate: boolean) => {
+		setPlannedStartCloseShow(false)
+
+		oneMinuteBeforeAction(e, noResetOnActivate)
+	}
+
+	const prevPlaylist = React.useRef(playlist)
+	useEffect(() => {
+		if (
+			(playlist.activationId && !prevPlaylist.current.activationId && playlist.rehearsal) ||
+			playlist.rehearsal !== prevPlaylist.current.rehearsal
+		) {
+			setPlannedStartCloseShown(false)
+		}
+
+		const expectedStart = PlaylistTiming.getExpectedStart(playlist.timing)
+		const expectedDuration = PlaylistTiming.getExpectedDuration(playlist.timing)
+
+		if (
+			playlist.activationId &&
+			playlist.rehearsal &&
+			expectedStart &&
+			// the expectedStart is near
+			currentTime + REHEARSAL_MARGIN > expectedStart &&
+			// but it's not horribly in the past
+			currentTime < expectedStart + (expectedDuration || 60 * 60 * 1000) &&
+			!inActiveRundownView &&
+			!plannedStartCloseShown
+		) {
+			setPlannedStartCloseShow(true)
+			setPlannedStartCloseShown(true)
+		}
+
+		prevPlaylist.current = playlist
+	}, [playlist, inActiveRundownView, plannedStartCloseShown])
+
+	if (!playlist) return null
+
+	return (
+		<ModalDialog
+			title={t('Start time is close')}
+			acceptText={t('Reset and Activate "On Air"')}
+			secondaryText={t('Cancel')}
+			actions={[
+				{
+					label: t('Activate "On Air"'),
+					classNames: 'btn-secondary',
+					on: (e) => {
+						oneMinuteBeforeAction2(e as Event, true) // this one activates without resetting
+					},
+				},
+			]}
+			onAccept={(e) => oneMinuteBeforeAction2(e as Event, false)}
+			onDiscard={discard}
+			onSecondary={discard}
+			show={
+				studioMode &&
+				plannedStartCloseShow &&
+				!(playlist.activationId && !playlist.rehearsal) &&
+				!!playlist.activationId
+			}
+		>
+			<p>
+				{t(
+					'You are in rehearsal mode, the broadcast starts in less than 1 minute. Do you want to go into On-Air mode?',
+				)}
+			</p>
+		</ModalDialog>
+	)
+}

packages/webui/src/typings/react-time-hoc.d.ts

@@ -6440,7 +6440,6 @@ __metadata:
     react-popper: "npm:^2.3.0"
     react-router-bootstrap: "npm:^0.25.0"
     react-router-dom: "npm:^5.3.4"
-    react-timer-hoc: "npm:^2.3.0"
     sass: "npm:^1.83.4"
     semver: "npm:^7.6.3"
     sha.js: "npm:^2.4.11"
@@ -16794,7 +16793,7 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.4, invariant@npm:~2.2.2":
+"invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
   dependencies:
@@ -24252,7 +24251,7 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.5.10, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -25061,18 +25060,6 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"react-timer-hoc@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "react-timer-hoc@npm:2.3.0"
-  dependencies:
-    invariant: "npm:~2.2.2"
-    prop-types: "npm:^15.6.0"
-  peerDependencies:
-    react: ^15.0.0 || ^16.0.0
-  checksum: 10/caf5a75a81340344b05169d81cd48cbea833019c09c98767ef39d0e0961bbe3bfad1a0ea62d27450cc8971ec15cb4b44b001c76ed9b656f4a43da5dc20037abd
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"