cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 04:43:35 +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/timer/Timer.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;
font-family: var(--font-family-override, $viewer-font-family);
background: var(--background-color-override, $viewer-background-color);
apps/client/src/features/viewers/timer/Timer.tsx
+9 -6
View File
@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
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 MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -39,7 +39,7 @@ const titleVariants = {
interface TimerProps {
isMirrored: boolean;
general: EventData;
pres: Message;
pres: TimerMessage;
title: TitleManager;
time: TimeManagerType;
viewSettings: ViewSettings;
@@ -73,14 +73,16 @@ export default function Timer(props: TimerProps) {
const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage);
const showWarning = (time.current ?? 1) < viewSettings.warningThreshold;
const showDanger = (time.current ?? 1) < viewSettings.dangerThreshold;
const showBlinking = pres.timerBlink;
const showBlackout = pres.timerBlackout;
const showClock = time.timerType !== TimerType.Clock;
const timerColor =
showProgress && showDanger
? viewSettings.dangerColor
: showProgress && showWarning
? viewSettings.warningColor
: viewSettings.normalColor;
const showClock = time.timerType !== TimerType.Clock;
const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''}`;
const stageTimer = getTimerByType(time);
let display = formatTimerDisplay(stageTimer);
@@ -89,6 +91,7 @@ export default function Timer(props: TimerProps) {
display = `-${display}`;
}
const baseClasses = `stage-timer ${isMirrored ? 'mirror' : ''} ${showBlackout ? 'blackout' : ''}`;
const timerFontSize = 89 / (stageTimerCharacters - 1);
const timerClasses = `timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`;
@@ -96,7 +99,7 @@ export default function Timer(props: TimerProps) {
<div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
<NavigationMenu />
<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>
<div className={`clock-container ${showClock ? '' : 'clock-container--hidden'}`}>
@@ -104,7 +107,7 @@ export default function Timer(props: TimerProps) {
<div className='clock'>{clock}</div>
</div>
<div className='timer-container'>
<div className={`timer-container ${showBlinking ? (showOverlay ? '' : 'blink') : ''}`}>
{showEndMessage ? (
<div className='end-message'>{viewSettings.endMessage}</div>
) : (