diff --git a/client/package.json b/client/package.json index 59eb2ede3..6258f8467 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "ontime-ui", - "version": "1.2.1", + "version": "1.2.2", "private": true, "dependencies": { "@chakra-ui/react": "^2.0.0-next.3", diff --git a/client/src/features/viewers/countdown/Countdown.jsx b/client/src/features/viewers/countdown/Countdown.jsx index 1c3729ed0..a7ea4d3a0 100644 --- a/client/src/features/viewers/countdown/Countdown.jsx +++ b/client/src/features/viewers/countdown/Countdown.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Link, useSearchParams } from 'react-router-dom'; import PropTypes from 'prop-types'; @@ -8,7 +8,7 @@ import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig import getDelayTo from '../../../common/utils/getDelayTo'; import { stringFromMillis } from '../../../common/utils/time'; -import { fetchTimerData, sanitiseTitle } from './countdown.helpers'; +import { fetchTimerData, sanitiseTitle, timerMessages } from './countdown.helpers'; import style from './Countdown.module.scss'; @@ -61,7 +61,17 @@ export default function Countdown(props) { setRunningTimer(timer); }, [follow, selectedId, time]); - const standby = time.playstate !== 'start' && selectedId === follow?.id; + const standby = useMemo( + () => time.playstate !== 'start' && selectedId === follow?.id, + [follow?.id, selectedId, time.playstate] + ); + + const isRunningFinished = useMemo( + () => time.finished && runningMessage === timerMessages.running, + [time.finished, runningMessage] + ); + + const isSelected = useMemo(() => runningMessage === timerMessages.running, [runningMessage]); return (