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

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/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}