From f75f45b19a4f2321060553fc3fb52ca3be5a868e Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sun, 2 Jun 2024 23:03:04 +0200 Subject: [PATCH] refactor: simplify client logic on timer phases --- apps/client/src/common/models/TimeManager.type.ts | 5 ++--- apps/client/src/declarations/declaration.d.ts | 6 ++++++ .../playback/playback-timer/PlaybackTimer.tsx | 4 ++-- apps/client/src/features/viewers/ViewWrapper.tsx | 2 -- .../viewers/minimal-timer/MinimalTimer.scss | 4 ++-- .../features/viewers/minimal-timer/MinimalTimer.tsx | 13 ++++++------- apps/client/src/features/viewers/timer/Timer.scss | 2 +- apps/client/src/features/viewers/timer/Timer.tsx | 11 ++++++----- 8 files changed, 25 insertions(+), 22 deletions(-) diff --git a/apps/client/src/common/models/TimeManager.type.ts b/apps/client/src/common/models/TimeManager.type.ts index be3f478d9..909dfb68c 100644 --- a/apps/client/src/common/models/TimeManager.type.ts +++ b/apps/client/src/common/models/TimeManager.type.ts @@ -1,4 +1,4 @@ -import { MaybeNumber, Playback, TimerType } from 'ontime-types'; +import { MaybeNumber, Playback, TimerPhase, TimerType } from 'ontime-types'; // first set extends TimerState export type ViewExtendedTimer = { @@ -8,12 +8,11 @@ export type ViewExtendedTimer = { elapsed: MaybeNumber; expectedFinish: MaybeNumber; finishedAt: MaybeNumber; + phase: TimerPhase; playback: Playback; secondaryTimer: MaybeNumber; startedAt: MaybeNumber; clock: number; - timeDanger: MaybeNumber; - timeWarning: MaybeNumber; timerType: TimerType; }; diff --git a/apps/client/src/declarations/declaration.d.ts b/apps/client/src/declarations/declaration.d.ts index 8c5aaa3cd..ac4635cc9 100644 --- a/apps/client/src/declarations/declaration.d.ts +++ b/apps/client/src/declarations/declaration.d.ts @@ -17,4 +17,10 @@ declare global { } } +declare module 'react' { + interface CSSProperties { + [key: `--${string}`]: string | number; + } +} + export default {}; diff --git a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx index fb8f78f0e..cdc315311 100644 --- a/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx +++ b/apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren } from 'react'; import { Tooltip } from '@chakra-ui/react'; -import { Playback } from 'ontime-types'; +import { Playback, TimerPhase } from 'ontime-types'; import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils'; import { useTimer } from '../../../../common/hooks/useSocket'; @@ -44,7 +44,7 @@ export default function PlaybackTimer(props: PropsWithChildren 0 && timer.current === null; - const isOvertime = timer.current !== null && timer.current < 0; + const isOvertime = timer.phase === TimerPhase.Negative; const hasAddedTime = Boolean(timer.addedTime); const rollLabel = isRolling ? 'Roll mode active' : ''; diff --git a/apps/client/src/features/viewers/ViewWrapper.tsx b/apps/client/src/features/viewers/ViewWrapper.tsx index 1fe94b3ac..d195129f6 100644 --- a/apps/client/src/features/viewers/ViewWrapper.tsx +++ b/apps/client/src/features/viewers/ViewWrapper.tsx @@ -82,8 +82,6 @@ const withData =

(Component: ComponentType

) => { ...timer, clock, timerType: eventNow?.timerType ?? null, - timeWarning: eventNow?.timeWarning ?? null, - timeDanger: eventNow?.timeWarning ?? null, }; // prevent render until we get all the data we need diff --git a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss index 669f0d78e..7acb934db 100644 --- a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss +++ b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss @@ -20,11 +20,11 @@ } .timer { + opacity: 1; font-family: var(--font-family-bold-override, $timer-bold-font-family) ; font-size: 20vw; position: relative; - color: var(--timer-color-override, $timer-color); - opacity: 1; + color: var(--timer-color-override, var(--phase-color)); transition: $viewer-transition-time; transition-property: opacity; background-color: transparent; diff --git a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx index 5d097b10f..8d982eecc 100644 --- a/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx +++ b/apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx @@ -1,5 +1,5 @@ import { useSearchParams } from 'react-router-dom'; -import { Playback, TimerType, ViewSettings } from 'ontime-types'; +import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types'; import { overrideStylesURL } from '../../../common/api/constants'; import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants'; @@ -126,13 +126,13 @@ export default function MinimalTimer(props: MinimalTimerProps) { const isPlaying = time.playback !== Playback.Pause; - const showEndMessage = (time.current ?? 0) < 0 && viewSettings.endMessage && !hideEndMessage; - const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt; + const finished = time.phase === TimerPhase.Negative; + const showEndMessage = finished && viewSettings.endMessage && !hideEndMessage; const showFinished = finished && !userOptions?.hideOvertime && (time.timerType !== TimerType.Clock || showEndMessage); const showProgress = time.playback !== Playback.Stop; - const showWarning = (time.current ?? 1) < (time.timeWarning ?? 0); - const showDanger = (time.current ?? 1) < (time.timeDanger ?? 0); + const showWarning = time.phase === TimerPhase.Warning; + const showDanger = time.phase === TimerPhase.Danger; let timerColor = viewSettings.normalColor; if (!timerIsTimeOfDay && showProgress && showWarning) timerColor = viewSettings.warningColor; @@ -150,7 +150,6 @@ export default function MinimalTimer(props: MinimalTimerProps) { const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`; const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`; - return (

{display} diff --git a/apps/client/src/features/viewers/timer/Timer.scss b/apps/client/src/features/viewers/timer/Timer.scss index 0155374ab..e6a73db53 100644 --- a/apps/client/src/features/viewers/timer/Timer.scss +++ b/apps/client/src/features/viewers/timer/Timer.scss @@ -109,7 +109,7 @@ .timer { opacity: 1; font-family: var(--font-family-override, $viewer-font-family); - color: var(--timer-color-override, $timer-color); + color: var(--timer-color-override, var(--phase-color)); line-height: 0.9em; text-align: center; letter-spacing: 0.05em; diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx index ab66a1403..eac81dfb8 100644 --- a/apps/client/src/features/viewers/timer/Timer.tsx +++ b/apps/client/src/features/viewers/timer/Timer.tsx @@ -7,6 +7,7 @@ import { Playback, Settings, TimerMessage, + TimerPhase, TimerType, ViewSettings, } from 'ontime-types'; @@ -110,14 +111,14 @@ export default function Timer(props: TimerProps) { const timerIsTimeOfDay = time.timerType === TimerType.Clock; - const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt; + const finished = time.phase === TimerPhase.Negative; const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0); - const showEndMessage = (time.current ?? 1) < 0 && viewSettings.endMessage; + const showEndMessage = finished && viewSettings.endMessage; const showProgress = time.playback !== Playback.Stop; const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage); - const showWarning = (time.current ?? 1) < (eventNow?.timeWarning ?? 0); - const showDanger = (time.current ?? 1) < (eventNow?.timeDanger ?? 0); + const showWarning = time.phase === TimerPhase.Warning; + const showDanger = time.phase === TimerPhase.Danger; const showBlinking = pres.blink; const showBlackout = pres.blackout; const showClock = time.timerType !== TimerType.Clock; @@ -173,7 +174,7 @@ export default function Timer(props: TimerProps) { className={timerClasses} style={{ fontSize: `${timerFontSize}vw`, - color: timerColor, + '--phase-color': timerColor, }} > {display}