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

refactor: simplify client logic on timer phases

Browse Source
This commit is contained in:
Carlos Valente
2024-06-02 23:03:04 +02:00
committed by Carlos Valente
parent fd2eee32aa
commit f75f45b19a
8 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/models/TimeManager.type.ts
+2 -3
View File
@@ -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;
};
apps/client/src/declarations/declaration.d.ts
Vendored
+6
View File
@@ -17,4 +17,10 @@ declare global {
}
}
declare module 'react' {
interface CSSProperties {
[key: `--${string}`]: string | number;
}
}
export default {};
apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx
+2 -2
View File
@@ -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<PlaybackTimerProp
const isRolling = playback === Playback.Roll;
const isWaiting = timer.secondaryTimer !== null && timer.secondaryTimer > 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' : '';
apps/client/src/features/viewers/ViewWrapper.tsx
-2
View File
@@ -82,8 +82,6 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
...timer,
clock,
timerType: eventNow?.timerType ?? null,
timeWarning: eventNow?.timeWarning ?? null,
timeDanger: eventNow?.timeWarning ?? null,
};
// prevent render until we get all the data we need
apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
+2 -2
View File
@@ -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;
apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+6 -7
View File
@@ -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 (
<div
className={showFinished ? `${baseClasses} minimal-timer--finished` : baseClasses}
@@ -168,12 +167,12 @@ export default function MinimalTimer(props: MinimalTimerProps) {
<div
className={timerClasses}
style={{
color: timerColor,
fontSize: `${timerFontSize}vw`,
fontFamily: userOptions.font,
top: userOptions.top,
left: userOptions.left,
backgroundColor: userOptions.textBackground,
'--phase-color': timerColor,
}}
>
{display}
apps/client/src/features/viewers/timer/Timer.scss
+1 -1
View File
@@ -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;
apps/client/src/features/viewers/timer/Timer.tsx
+6 -5
View File
@@ -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}