Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Countdown #1124

Merged
merged 5 commits into from
Jul 10, 2024
Merged

Countdown #1124

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8a3c725
refactor: offset cannot be null
cpvalente Jul 7, 2024
64b6433
feat: projected times in countdown
cpvalente Jul 7, 2024
8a1186e
refactor: allow reset selection by refreshing
cpvalente Jul 7, 2024
b54f3c4
refactor: extract options per view
cpvalente Jul 9, 2024
e4d7040
refactor: simplify logic dynamic menus
cpvalente Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion apps/client/src/common/components/view-params-editor/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,4 +508,14 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
];
};

export const getCountdownOptions = (timeFormat: string): ParamField[] => [getTimeOption(timeFormat), hideTimerSeconds];
export const getCountdownOptions = (timeFormat: string): ParamField[] => [
getTimeOption(timeFormat),
hideTimerSeconds,
{
id: 'showProjected',
title: 'Show projected time',
description: 'Whether to show the projected delay of an event (taken from runtime offset).',
type: 'boolean',
defaultValue: false,
},
];
5 changes: 4 additions & 1 deletion apps/client/src/features/viewers/ViewWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Message,
OntimeEvent,
ProjectData,
Runtime,
Settings,
SupportedEvent,
TimerMessage,
Expand Down Expand Up @@ -36,6 +37,7 @@ type WithDataProps = {
publicEventNext: OntimeEvent | null;
publicEventNow: OntimeEvent | null;
publicSelectedId: string | null;
runtime: Runtime;
selectedId: string | null;
settings: Settings | undefined;
time: ViewExtendedTimer;
Expand Down Expand Up @@ -66,7 +68,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
}, [rundownData]);

// websocket data
const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow } =
const { clock, timer, message, onAir, eventNext, publicEventNext, publicEventNow, eventNow, runtime } =
useStore(runtimeStore);
const publicSelectedId = publicEventNow?.id ?? null;
const selectedId = eventNow?.id ?? null;
Expand Down Expand Up @@ -108,6 +110,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
publicEventNext={publicEventNext}
publicEventNow={publicEventNow}
publicSelectedId={publicSelectedId}
runtime={runtime}
selectedId={selectedId}
settings={settings}
time={TimeManagerType}
Expand Down
83 changes: 52 additions & 31 deletions apps/client/src/features/viewers/countdown/Countdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
flex-direction: column;

&__title {
font-size: clamp(24px, 2vw, 32px);
font-size: clamp(1.5rem, 2vw, 2rem);
}

&__events {
font-size: clamp(16px, 1.5vw, 24px);
font-size: clamp(1rem, 1.5vw, 1.5rem);
margin-top: 1em;
overflow-y: auto;
height: 70vh;
Expand All @@ -38,18 +38,18 @@
.countdown-container {
height: 100%;
width: 100%;
gap: min(2vh, 16px);
padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
gap: min(2vh, 1rem);
padding: min(2vh, 1rem) clamp(1rem, 10vw, 4rem);

display: grid;
grid-template-rows: auto auto auto auto 1fr;
grid-template-columns: 100%;
grid-template-areas:
'header'
'status'
'clock'
'title'
'timers';
'header'
'status'
'clock'
'title'
'timers';

/* =================== HEADER + EXTRAS ===================*/

Expand All @@ -59,13 +59,13 @@
font-weight: 600;

.label {
font-size: clamp(16px, 1.5vw, 24px);
font-size: $timer-label-size;
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
}

.time {
font-size: clamp(32px, 3.5vw, 50px);
font-size: $timer-value-size;
color: var(--secondary-color-override, $viewer-secondary-color);
letter-spacing: 0.05em;
line-height: 0.95em;
Expand All @@ -75,7 +75,7 @@
.status {
grid-area: status;
color: var(--label-color-override, $viewer-label-color);
font-size: clamp(32px, 3.5vw, 50px);
font-size: clamp(2rem, 3.5vw, 3.5rem);
font-weight: 600;
}

Expand Down Expand Up @@ -105,7 +105,7 @@
.title {
grid-area: title;
background-color: var(--card-background-color-override, $viewer-card-bg-color);
padding: 16px 24px;
padding: 1rem 1.5rem;
border-radius: 8px;

font-weight: 600;
Expand All @@ -119,28 +119,49 @@

.timer-group {
grid-area: timers;
display: flex;
justify-content: space-evenly;
align-items: flex-end;
display: grid;
grid-template-areas:
'projected-start projected-end'
'scheduled-start scheduled-end';
grid-template-columns: 1fr 1fr;
justify-items: center;
text-align: center;
row-gap: clamp(1rem, 5vh, 4rem);

align-self: flex-end;
height: fit-content;

.aux-timers {
text-align: center;
font-size: clamp(24px, 1.75vw, 32px);
&__projected-start {
grid-area: projected-start;
}

&__label {
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
}
&__projected-end {
grid-area: projected-end;
}

&__scheduled-start {
grid-area: scheduled-start;
}

&__scheduled-end {
grid-area: scheduled-end;
}

&__value {
font-size: clamp(32px, 3.5vw, 50px);
color: var(--secondary-color-override, $viewer-secondary-color);
letter-spacing: 0.05em;
line-height: 0.95em;
&__label {
font-size: $timer-label-size;
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
}

&__value {
margin-top: 0.5rem;
font-size: $timer-value-size;
color: var(--secondary-color-override, $viewer-secondary-color);
letter-spacing: 0.05em;
line-height: 0.95em;

&--delayed {
color: $delay-color;
}
&--delayed {
color: $delay-color;
}
}
}
Expand Down
76 changes: 49 additions & 27 deletions apps/client/src/features/viewers/countdown/Countdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { OntimeEvent, OntimeRundownEntry, Playback, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
import {
OntimeEvent,
OntimeRundownEntry,
Playback,
Runtime,
Settings,
SupportedEvent,
TimerPhase,
ViewSettings,
} from 'ontime-types';

import { overrideStylesURL } from '../../../common/api/constants';
import { getCountdownOptions } from '../../../common/components/view-params-editor/constants';
Expand All @@ -13,35 +22,34 @@ import { useTranslation } from '../../../translation/TranslationProvider';
import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
import { getFormattedTimer, isStringBoolean } from '../common/viewUtils';

import { fetchTimerData, TimerMessage } from './countdown.helpers';
import { fetchTimerData, getTimerItems, TimerMessage } from './countdown.helpers';
import CountdownSelect from './CountdownSelect';

import './Countdown.scss';

interface CountdownProps {
isMirrored: boolean;
backstageEvents: OntimeEvent[];
time: ViewExtendedTimer;
runtime: Runtime;
selectedId: string | null;
viewSettings: ViewSettings;
settings: Settings | undefined;
time: ViewExtendedTimer;
viewSettings: ViewSettings;
}

export default function Countdown(props: CountdownProps) {
const { isMirrored, backstageEvents, time, selectedId, viewSettings, settings } = props;
const { isMirrored, backstageEvents, runtime, selectedId, settings, time, viewSettings } = props;
const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
const [searchParams] = useSearchParams();
const { getLocalizedString } = useTranslation();

const [follow, setFollow] = useState<OntimeEvent | null>(null);
const [runningTimer, setRunningTimer] = useState(0);
const [runningMessage, setRunningMessage] = useState<TimerMessage>(TimerMessage.unhandled);
const [delay, setDelay] = useState(0);

useWindowTitle('Countdown');

// eg. http://localhost:4001/countdown?eventId=ei0us
// Check for user options
// update data to the event we are following
useEffect(() => {
if (!backstageEvents) {
return;
Expand All @@ -50,6 +58,12 @@ export default function Countdown(props: CountdownProps) {
const eventId = searchParams.get('eventid');
const eventIndex = searchParams.get('event');

// if there is no event selected, we reset the data
if (!eventId && !eventIndex) {
setFollow(null);
return;
}

let followThis: OntimeEvent | null = null;
const events: OntimeEvent[] = [...backstageEvents].filter((event) => event.type === SupportedEvent.Event);

Expand All @@ -66,29 +80,25 @@ export default function Countdown(props: CountdownProps) {
}
}, [backstageEvents, searchParams]);

useEffect(() => {
if (!follow) {
return;
}

const { message, timer } = fetchTimerData(time, follow, selectedId);
setRunningMessage(message);
setRunningTimer(timer);
}, [follow, selectedId, time]);

// defer rendering until we load stylesheets
if (!shouldRender) {
return null;
}

const { message: runningMessage, timer: runningTimer } = fetchTimerData(time, follow, selectedId, runtime.offset);

const standby = time.playback !== Playback.Play && time.playback !== Playback.Roll && selectedId === follow?.id;
const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
const finished = time.phase === TimerPhase.Overtime;
const isRunningFinished = finished && runningMessage === TimerMessage.running;
const delayedTimerStyles = delay > 0 ? 'aux-timers__value--delayed' : '';

const clock = formatTime(time.clock);
const startTime = follow === null ? '...' : formatTime(follow.timeStart + delay);
const endTime = follow === null ? '...' : formatTime(follow.timeEnd + delay);
const { scheduledStart, scheduledEnd, projectedStart, projectedEnd } = getTimerItems(
follow?.timeStart,
follow?.timeEnd,
delay,
runtime.offset,
);

const hideSeconds = searchParams.get('hideTimerSeconds');
const formattedTimer = getFormattedTimer(runningTimer, time.timerType, getLocalizedString('common.minutes'), {
Expand Down Expand Up @@ -122,13 +132,25 @@ export default function Countdown(props: CountdownProps) {
{follow?.title && <div className='title'>{follow.title}</div>}

<div className='timer-group'>
<div className='aux-timers'>
<div className='aux-timers__label'>{getLocalizedString('common.start_time')}</div>
<SuperscriptTime time={startTime} className={`aux-timers__value ${delayedTimerStyles}`} />
{projectedStart && projectedEnd && (
<div className='timer-group__projected-start'>
<div className='timer-group__label'>{getLocalizedString('common.projected_start')}</div>
<SuperscriptTime time={projectedStart} className={`timer-group__value ${delayedTimerStyles}`} />
</div>
)}
{projectedStart && projectedEnd && (
<div className='timer-group__projected-end'>
<div className='timer-group__label'>{getLocalizedString('common.projected_end')}</div>
<SuperscriptTime time={projectedEnd} className={`timer-group__value ${delayedTimerStyles}`} />
</div>
)}
<div className='timer-group__scheduled-start'>
<div className='timer-group__label'>{getLocalizedString('common.scheduled_start')}</div>
<SuperscriptTime time={scheduledStart} className={`timer-group__value ${delayedTimerStyles}`} />
</div>
<div className='aux-timers'>
<div className='aux-timers__label'>{getLocalizedString('common.end_time')}</div>
<SuperscriptTime time={endTime} className={`aux-timers__value ${delayedTimerStyles}`} />
<div className='timer-group__scheduled-end'>
<div className='timer-group__label'>{getLocalizedString('common.scheduled_end')}</div>
<SuperscriptTime time={scheduledEnd} className={`timer-group__value ${delayedTimerStyles}`} />
</div>
</div>
</div>
Expand Down
Loading