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

Timer/blinking and blackout buttons (#406)

Browse Source 
*feat: timer blink

*feat: blackout

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
This commit is contained in:
Fabian Posenau
2023-06-04 21:25:56 +02:00
committed by GitHub
parent 07737cc8b3
commit 5cb8020ab9
24 changed files with 196 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss
+1
View File
@@ -6,6 +6,7 @@
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
height: 100vh;
transition: opacity 0.5s ease-in-out;
background: var(--background-color-override, $viewer-background-color);
color: var(--color-override, $viewer-color);
apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx
+13 -6
View File
@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { EventData, Message, Playback, TimerType, ViewSettings } from 'ontime-types';
import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
import { overrideStylesURL } from '../../../common/api/apiConstants';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -14,7 +14,7 @@ import './MinimalTimer.scss';
interface MinimalTimerProps {
isMirrored: boolean;
pres: Message;
pres: TimerMessage;
time: TimeManagerType;
viewSettings: ViewSettings;
general: EventData;
@@ -136,6 +136,9 @@ export default function MinimalTimer(props: MinimalTimerProps) {
const showProgress = time.playback !== Playback.Stop;
const showWarning = (time.current ?? 1) < viewSettings.warningThreshold;
const showDanger = (time.current ?? 1) < viewSettings.dangerThreshold;
const showBlinking = pres.timerBlink;
const showBlackout = pres.timerBlackout;
const timerColor = userOptions.textColour
? userOptions.textColour
: showProgress && showDanger
@@ -153,8 +156,10 @@ export default function MinimalTimer(props: MinimalTimerProps) {
const timerFontSize = (89 / (stageTimerCharacters - 1)) * (userOptions.size || 1);
const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''} ${
showBlinking ? (showOverlay ? '' : 'blink') : ''
}`;
const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''} ${showBlackout ? 'blackout' : ''}`;
return (
<div
@@ -169,11 +174,13 @@ export default function MinimalTimer(props: MinimalTimerProps) {
<NavigationMenu />
{!hideMessagesOverlay && (
<div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
<div className='message'>{pres.text}</div>
<div className={`message ${showBlinking ? 'blink' : ''}`}>{pres.text}</div>
</div>
)}
{showEndMessage ? (
<div className='end-message'>{viewSettings.endMessage}</div>
<div className={`end-message ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`}>
{viewSettings.endMessage}
</div>
) : (
<div
className={timerClasses}