cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-17 13:23:35 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: keep clock ticking on server drops

Browse Source
This commit is contained in:
Carlos Valente
2026-03-28 08:01:34 +01:00
committed by Carlos Valente
parent 9e771a2f24
commit 37dc9a620d
8 changed files with 61 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/backstage/Backstage.tsx
+3 -2
View File
@@ -10,7 +10,8 @@ import EmptyPage from '../../common/components/state/EmptyPage';
import TitleCard from '../../common/components/title-card/TitleCard';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useBackstageSocket, useClock } from '../../common/hooks/useSocket';
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useBackstageSocket } from '../../common/hooks/useSocket';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { cx, timerPlaceholderMin } from '../../common/utils/styleUtils';
import { formatTime, getDefaultFormat } from '../../common/utils/time';
@@ -214,7 +215,7 @@ function ExtraInfo({ projectData, size, source }: ExtraInfoProps) {
function BackstageClock() {
const { getLocalizedString } = useTranslation();
const clock = useClock();
const clock = useAutoTickingClock();
// gather timer data
const formattedClock = formatTime(clock);
apps/client/src/views/countdown/Countdown.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import Empty from '../../common/components/state/Empty';
import EmptyPage from '../../common/components/state/EmptyPage';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useClock } from '../../common/hooks/useSocket';
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { ExtendedEntry } from '../../common/utils/rundownMetadata';
import { formatTime, getDefaultFormat } from '../../common/utils/time';
@@ -140,7 +140,7 @@ function CountdownContents({ playableEvents, subscriptions, goToEditMode }: Coun
function CountdownClock() {
const { getLocalizedString } = useTranslation();
const clock = useClock();
const clock = useAutoTickingClock();
// gather timer data
const formattedClock = formatTime(clock);
apps/client/src/views/studio/StudioClock.tsx
+3 -1
View File
@@ -1,5 +1,6 @@
import { Playback } from 'ontime-types';
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useIsSmallScreen } from '../../common/hooks/useIsSmallScreen';
import { useStudioClockSocket } from '../../common/hooks/useSocket';
import { cx } from '../../common/utils/styleUtils';
@@ -18,7 +19,8 @@ interface StudioClockProps {
export default function StudioClock({ hideCards }: StudioClockProps) {
const isSmallScreen = useIsSmallScreen();
const { clock, playback } = useStudioClockSocket();
const clock = useAutoTickingClock();
const { playback } = useStudioClockSocket();
const onAir = playback !== Playback.Stop;
// if we are on mobile and have to show the cards
apps/client/src/views/timeline/TimelinePage.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import { useMemo } from 'react';
import EmptyPage from '../../common/components/state/EmptyPage';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useClock, useSelectedEventId } from '../../common/hooks/useSocket';
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useSelectedEventId } from '../../common/hooks/useSocket';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { formatTime, getDefaultFormat } from '../../common/utils/time';
import { useTranslation } from '../../translation/TranslationProvider';
@@ -72,7 +73,7 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
function TimelineClock() {
const { getLocalizedString } = useTranslation();
const clock = useClock();
const clock = useAutoTickingClock();
// gather timer data
const formattedClock = formatTime(clock);
apps/client/src/views/timer/Timer.tsx
+15 -7
View File
@@ -7,6 +7,7 @@ import EmptyPage from '../../common/components/state/EmptyPage';
import TitleCard from '../../common/components/title-card/TitleCard';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useTimerSocket } from '../../common/hooks/useSocket';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { cx } from '../../common/utils/styleUtils';
@@ -101,7 +102,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
// gather timer data
const totalTime = getTotalTime(time.duration, time.addedTime);
const formattedClock = formatTime(clock);
const stageTimer = getTimerByType(freezeOvertime, timerTypeNow, clock, time, timerType);
const display = getFormattedTimer(stageTimer, viewTimerType, localisedMinutes, {
removeSeconds: hideTimerSeconds,
@@ -164,12 +164,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
</div>
)}
{showClock && (
<div className='clock-container'>
<div className='label'>{getLocalizedString('common.time_now')}</div>
<SuperscriptTime time={formattedClock} className='clock' />
</div>
)}
{showClock && <TimerAutoTickingClock />}
<div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
{showEndMessage ? (
@@ -216,3 +211,16 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
</div>
);
}
function TimerAutoTickingClock() {
const autoTickingClock = useAutoTickingClock();
const formattedClock = formatTime(autoTickingClock);
const { getLocalizedString } = useTranslation();
return (
<div className='clock-container'>
<div className='label'>{getLocalizedString('common.time_now')}</div>
<SuperscriptTime time={formattedClock} className='clock' />
</div>
);
}