From f1a8db9649b2cc45fbda49d3b200964cbc050292 Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Wed, 6 Aug 2025 06:28:34 +0200 Subject: [PATCH] feat: timer overview shows waiting timer --- .../control/playback/PlaybackControl.tsx | 4 +-- .../playback/playback-timer/PlaybackTimer.tsx | 15 +++------ .../operator/status-bar/StatusBar.module.scss | 26 +--------------- .../operator/status-bar/StatusBarTimers.tsx | 31 +++---------------- .../composite/TimeElements.module.scss | 2 +- .../overview/composite/TimeElements.tsx | 23 +++++++++----- .../overview/composite/TimeLayout.module.scss | 5 +++ .../overview/composite/TimeLayout.tsx | 8 ++--- apps/client/src/theme/_ontimeStyles.scss | 2 +- 9 files changed, 37 insertions(+), 79 deletions(-) diff --git a/apps/client/src/features/control/playback/PlaybackControl.tsx b/apps/client/src/features/control/playback/PlaybackControl.tsx index 560a9c013..3476ef3a7 100644 --- a/apps/client/src/features/control/playback/PlaybackControl.tsx +++ b/apps/client/src/features/control/playback/PlaybackControl.tsx @@ -1,5 +1,3 @@ -import { Playback } from 'ontime-types'; - import { usePlaybackControl } from '../../../common/hooks/useSocket'; import AddTime from './add-time/AddTime'; @@ -14,7 +12,7 @@ export default function PlaybackControl() { return (
- + 0) { return `Added ${formatDuration(addedTime, false)}`; @@ -27,11 +23,10 @@ function resolveAddedTimeLabel(addedTime: number) { return ''; } -export default function PlaybackTimer(props: PropsWithChildren) { - const { playback, children } = props; +export default function PlaybackTimer({ children }: PropsWithChildren) { const timer = useTimer(); - const isRolling = playback === Playback.Roll; + const isRolling = timer.playback === Playback.Roll; const isWaiting = timer.phase === TimerPhase.Pending; const isOvertime = timer.phase === TimerPhase.Overtime; const hasAddedTime = Boolean(timer.addedTime); @@ -52,7 +47,7 @@ export default function PlaybackTimer(props: PropsWithChildrenRoll: Countdown to start ) : ( - + )}
{children} @@ -65,9 +60,7 @@ interface RunningStatusProps { expectedFinish: MaybeNumber; playback: Playback; } -function RunningStatus(props: RunningStatusProps) { - const { startedAt, expectedFinish, playback } = props; - +function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusProps) { if (playback === Playback.Stop) { return ; } diff --git a/apps/client/src/features/operator/status-bar/StatusBar.module.scss b/apps/client/src/features/operator/status-bar/StatusBar.module.scss index 184a0615e..d41fa24ed 100644 --- a/apps/client/src/features/operator/status-bar/StatusBar.module.scss +++ b/apps/client/src/features/operator/status-bar/StatusBar.module.scss @@ -3,15 +3,12 @@ top: 0; width: 100%; z-index: $zindex-floating; - background-color: $gray-1350; - border-bottom: 1px solid $white-10; - box-shadow: $large-top-drawer-shadow; } .timers { padding-block: 0.75rem 0.5rem; - padding-inline: 1rem; + padding-inline: 1rem 0; display: grid; grid-template-columns: 1fr 1fr 1fr; @@ -20,35 +17,14 @@ .runningTimer { grid-area: timers; - display: flex; - flex-direction: column; justify-self: center; - color: $muted-gray; } .timeNow { grid-area: clock; - display: flex; - flex-direction: column; justify-self: right; } -.label { - font-size: calc(1rem - 2px); - color: $gray-700; - line-height: 0.9em; -} - -.timer { - font-size: 1.5rem; - letter-spacing: 0.5px; - line-height: 1.5; -} - -.active { - color: $ui-white; -} - .progressOverride { grid-area: bar; height: 1rem; diff --git a/apps/client/src/features/operator/status-bar/StatusBarTimers.tsx b/apps/client/src/features/operator/status-bar/StatusBarTimers.tsx index 031cc5057..c666aea28 100644 --- a/apps/client/src/features/operator/status-bar/StatusBarTimers.tsx +++ b/apps/client/src/features/operator/status-bar/StatusBarTimers.tsx @@ -1,33 +1,12 @@ -import { isPlaybackActive } from 'ontime-utils'; +import { ClockOverview, TimerOverview } from '../../overview/composite/TimeElements'; -import { useClock, useTimer } from '../../../common/hooks/useSocket'; -import { cx } from '../../../common/utils/styleUtils'; -import ClockTime from '../../viewers/common/clock-time/ClockTime'; -import RunningTime from '../../viewers/common/running-time/RunningTime'; - -import styles from './StatusBar.module.scss'; +import style from './StatusBar.module.scss'; export default function StatusBarTimers() { - const timer = useTimer(); - const { clock } = useClock(); - - const playbackActive = isPlaybackActive(timer.playback); - return ( -
-
- Running timer - -
- -
- Time now - -
+
+ +
); } diff --git a/apps/client/src/features/overview/composite/TimeElements.module.scss b/apps/client/src/features/overview/composite/TimeElements.module.scss index f7c4c3529..b51d8b709 100644 --- a/apps/client/src/features/overview/composite/TimeElements.module.scss +++ b/apps/client/src/features/overview/composite/TimeElements.module.scss @@ -66,4 +66,4 @@ color: $active-indicator; font-size: calc(1rem - 2px); text-align: right; -} \ No newline at end of file +} diff --git a/apps/client/src/features/overview/composite/TimeElements.tsx b/apps/client/src/features/overview/composite/TimeElements.tsx index 88a68c5e2..2d0f6aa62 100644 --- a/apps/client/src/features/overview/composite/TimeElements.tsx +++ b/apps/client/src/features/overview/composite/TimeElements.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { TbCalendar, TbCalendarClock, TbCalendarDown, TbCalendarStar, TbFlagDown, TbFlagStar } from 'react-icons/tb'; -import { isOntimeBlock, OntimeBlock, OntimeEvent, TimerType } from 'ontime-types'; +import { isOntimeBlock, OntimeBlock, OntimeEvent, TimerPhase, TimerType } from 'ontime-types'; import { isPlaybackActive, millisToString } from 'ontime-utils'; import Tooltip from '../../../common/components/tooltip/Tooltip'; @@ -194,7 +194,7 @@ export function ProgressOverview() { const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash; const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash; - return ; + return ; } export function OffsetOverview() { @@ -208,16 +208,23 @@ export function OffsetOverview() { return ; } -export function ClockOverview() { +export function ClockOverview({ className }: { className?: string }) { const { clock } = useClock(); - return ; + return ; } -export function TimerOverview() { - const { current } = useTimer(); +export function TimerOverview({ className }: { className?: string }) { + const timer = useTimer(); - const display = millisToString(current, { fallback: timerPlaceholder }); + const isWaiting = timer.phase === TimerPhase.Pending; + const title = isWaiting ? 'Count to start' : 'Running timer'; + const display = millisToString(isWaiting ? timer.secondaryTimer : timer.current, { fallback: timerPlaceholder }); + const timerState = (() => { + if (isWaiting) return 'waiting'; + if (timer.current === null) return 'muted'; + return 'active'; + })(); - return ; + return ; } diff --git a/apps/client/src/features/overview/composite/TimeLayout.module.scss b/apps/client/src/features/overview/composite/TimeLayout.module.scss index 1c0a49895..97027489a 100644 --- a/apps/client/src/features/overview/composite/TimeLayout.module.scss +++ b/apps/client/src/features/overview/composite/TimeLayout.module.scss @@ -29,6 +29,11 @@ gap: 0.25rem; } + &[data-state='waiting'] { + .label { + color: $ontime-roll; + } + } &[data-state='over'] { .label .over { color: $playback-over; diff --git a/apps/client/src/features/overview/composite/TimeLayout.tsx b/apps/client/src/features/overview/composite/TimeLayout.tsx index 5e501c7e8..501c26ebf 100644 --- a/apps/client/src/features/overview/composite/TimeLayout.tsx +++ b/apps/client/src/features/overview/composite/TimeLayout.tsx @@ -5,17 +5,17 @@ import style from './TimeLayout.module.scss'; interface TimeLayoutProps { label: string; value: string; - muted?: boolean; + state?: 'muted' | 'waiting' | 'active'; daySpan?: number; className?: string; testId?: string; } -export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) { +export function TimeColumn({ label, value, state = 'active', className, testId }: TimeLayoutProps) { return ( -
+
{label} - + {value}
diff --git a/apps/client/src/theme/_ontimeStyles.scss b/apps/client/src/theme/_ontimeStyles.scss index 4d55660da..9818e75ce 100644 --- a/apps/client/src/theme/_ontimeStyles.scss +++ b/apps/client/src/theme/_ontimeStyles.scss @@ -28,7 +28,7 @@ $active-green: $green-700; // playback colours $playback-start: $green-600; -$ontime-roll: #0274B6; +$ontime-roll: #22a0e9; $ontime-delay: #F57C13; $ontime-delay-text: #E69056; $ontime-paused: #c05621;