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

Fix: #279 End Message in Minimal Timer (#286)

Browse Source 
* fix: Minimal View #279 end message
---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
This commit is contained in:
Fabian Posenau
2023-02-16 21:46:40 +01:00
committed by GitHub
parent de9a7a87fd
commit 298af3ec5a
3 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/models/ViewTypes.ts
+2 -1
View File
@@ -11,4 +11,5 @@ export type OverridableOptions = {
hideNav?: boolean; hideNav?: boolean;
hideOvertime?: boolean; hideOvertime?: boolean;
hideMessagesOverlay?: boolean; hideMessagesOverlay?: boolean;
} hideEndMessage?: boolean;
};
apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
+9
View File
@@ -76,4 +76,13 @@
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
} }
.end-message {
text-align: center;
font-size: 12vw;
line-height: 0.9em;
font-weight: 600;
color: $timer-finished-color;
padding: 0;
}
} }
apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+25 -19
View File
@@ -1,5 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { EventDataType } from 'common/models/EventData.type';
import { useAtom } from 'jotai'; import { useAtom } from 'jotai';
import { overrideStylesURL } from '../../../common/api/apiConstants'; import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -18,10 +19,11 @@ interface MinimalTimerProps {
pres: PresenterMessageType; pres: PresenterMessageType;
time: TimeManagerType; time: TimeManagerType;
viewSettings: ViewSettingsType; viewSettings: ViewSettingsType;
general: EventDataType;
} }
export default function MinimalTimer(props: MinimalTimerProps) { export default function MinimalTimer(props: MinimalTimerProps) {
const { pres, time, viewSettings } = props; const { pres, time, viewSettings, general } = props;
const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL); const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [isMirrored] = useAtom(mirrorViewersAtom); const [isMirrored] = useAtom(mirrorViewersAtom);
@@ -123,10 +125,14 @@ export default function MinimalTimer(props: MinimalTimerProps) {
const hideMessagesOverlay = searchParams.get('hidemessages'); const hideMessagesOverlay = searchParams.get('hidemessages');
userOptions.hideMessagesOverlay = Boolean(hideMessagesOverlay); userOptions.hideMessagesOverlay = Boolean(hideMessagesOverlay);
const hideEndMessage = searchParams.get('hideendmessage');
userOptions.hideEndMessage = Boolean(hideEndMessage);
const showOverlay = pres.text !== '' && pres.visible; const showOverlay = pres.text !== '' && pres.visible;
const isPlaying = time.playback !== 'pause'; const isPlaying = time.playback !== 'pause';
const isNegative = (time.current ?? 0) < 0; const isNegative = (time.current ?? 0) < 0;
const showFinished = isNegative && !userOptions?.hideOvertime; const showFinished = isNegative && !userOptions?.hideOvertime;
const showEndMessage = time.current < 0 && general.endMessage && !hideEndMessage;
const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`; const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
@@ -153,27 +159,27 @@ export default function MinimalTimer(props: MinimalTimerProps) {
> >
<NavigationMenu /> <NavigationMenu />
{!hideMessagesOverlay && ( {!hideMessagesOverlay && (
<div <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}
>
<div className='message'>{pres.text}</div> <div className='message'>{pres.text}</div>
</div> </div>
)} )}
<div {showEndMessage ? (
className={`timer ${!isPlaying ? 'timer--paused' : ''} ${ <div className='end-message'>{general.endMessage}</div>
showFinished ? 'timer--finished' : '' ) : (
}`} <div
style={{ className={`timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`}
color: userOptions.textColour, style={{
fontSize: `${(89 / (stageTimerCharacters - 1)) * (userOptions.size || 1)}vw`, color: userOptions.textColour,
fontFamily: userOptions.font, fontSize: `${(89 / (stageTimerCharacters - 1)) * (userOptions.size || 1)}vw`,
top: userOptions.top, fontFamily: userOptions.font,
left: userOptions.left, top: userOptions.top,
backgroundColor: userOptions.textBackground, left: userOptions.left,
}} backgroundColor: userOptions.textBackground,
> }}
{stageTimer} >
</div> {stageTimer}
</div>
)}
</div> </div>
); );
} }