mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 05:13:32 +00:00
refactor: countdown view redesign
- allow selecting multiple events - follow selected - remove past events
This commit is contained in:
Carlos Valente
committed by
Carlos Valente
Carlos Valente
parent
93977ebc48
commit
b2b115c329
@@ -0,0 +1,201 @@
|
||||
@use '../../theme/viewerDefs' as *;
|
||||
|
||||
$item-height: 3.5rem;
|
||||
|
||||
.countdown {
|
||||
margin: 0;
|
||||
box-sizing: border-box; /* reset */
|
||||
overflow: hidden;
|
||||
width: 100%; /* restrict the page width to viewport */
|
||||
height: 100vh;
|
||||
|
||||
font-family: var(--font-family-override, $viewer-font-family);
|
||||
background: var(--background-color-override, $viewer-background-color);
|
||||
color: var(--color-override, $viewer-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $view-element-gap;
|
||||
padding: $view-outer-padding;
|
||||
font-size: $base-font-size;
|
||||
|
||||
/* =================== HEADER + EXTRAS ===================*/
|
||||
.project-header {
|
||||
font-size: $header-font-size;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: min(200px, 20vw);
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.clock-container {
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
|
||||
.label {
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: $timer-value-size;
|
||||
color: var(--secondary-color-override, $viewer-secondary-color);
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 0.95em;
|
||||
}
|
||||
}
|
||||
|
||||
.fab-container {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
bottom: calc(1.5rem + env(safe-area-inset-bottom));
|
||||
right: $view-inline-padding;
|
||||
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 2rem;
|
||||
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.fab-container--hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ========================= LIST ========================*/
|
||||
.empty-container {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
padding-bottom: 60vh;
|
||||
}
|
||||
|
||||
/* ====================== LIST-ITEM ======================*/
|
||||
.sub {
|
||||
margin: 2px;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1rem 1fr auto;
|
||||
grid-template-areas:
|
||||
'binder schedule status'
|
||||
'binder title timer'
|
||||
'binder secondary secondary';
|
||||
column-gap: 1rem;
|
||||
background-color: var(--card-background-color-override, $viewer-card-bg-color);
|
||||
padding-right: 1rem;
|
||||
border-radius: $element-border-radius;
|
||||
overflow: clip;
|
||||
|
||||
&:hover {
|
||||
.sub__label {
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub--selected {
|
||||
background: $blue-700;
|
||||
}
|
||||
|
||||
.sub--live {
|
||||
background-color: $green-700;
|
||||
}
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
grid-area: binder;
|
||||
}
|
||||
|
||||
.sub__schedule {
|
||||
grid-area: schedule;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
}
|
||||
|
||||
.sub__schedule--delayed {
|
||||
color: $delay-color;
|
||||
}
|
||||
|
||||
.sub__schedule--ahead {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
.sub__schedule--behind {
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
grid-area: title;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
font-size: $title-font-size;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.sub__secondary {
|
||||
grid-area: secondary;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
font-size: $base-font-size;
|
||||
line-height: 1.1em;
|
||||
// allow multi-line text but trim before
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.sub__status {
|
||||
grid-area: status;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
font-size: $timer-label-size;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sub__label {
|
||||
grid-area: status;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sub__timer {
|
||||
grid-area: timer;
|
||||
|
||||
font-size: $timer-value-size;
|
||||
line-height: 1.1em;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ====================== MODIFIERS ======================*/
|
||||
.subdued {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { useState } from 'react';
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
import {
|
||||
CustomFields,
|
||||
EntryId,
|
||||
isOntimeEvent,
|
||||
isPlayableEvent,
|
||||
OntimeEvent,
|
||||
ProjectData,
|
||||
Settings,
|
||||
} from 'ontime-types';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
import Empty from '../../common/components/state/Empty';
|
||||
import ViewLogo from '../../common/components/view-logo/ViewLogo';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
|
||||
import { formatTime, getDefaultFormat } from '../../common/utils/time';
|
||||
import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
|
||||
import { useTranslation } from '../../translation/TranslationProvider';
|
||||
|
||||
import { getCountdownOptions, useCountdownOptions } from './countdown.options';
|
||||
import { getOrderedSubscriptions } from './countdown.utils';
|
||||
import CountdownSelect from './CountdownSelect';
|
||||
import CountdownSubscriptions from './CountdownSubscriptions';
|
||||
|
||||
import './Countdown.scss';
|
||||
|
||||
interface CountdownProps {
|
||||
customFields: CustomFields;
|
||||
events: OntimeEvent[];
|
||||
general: ProjectData;
|
||||
time: ViewExtendedTimer;
|
||||
isMirrored: boolean;
|
||||
selectedId: EntryId | null;
|
||||
settings: Settings | undefined;
|
||||
}
|
||||
|
||||
export default function Countdown({
|
||||
customFields,
|
||||
events,
|
||||
general,
|
||||
time,
|
||||
isMirrored,
|
||||
selectedId,
|
||||
settings,
|
||||
}: CountdownProps) {
|
||||
const { getLocalizedString } = useTranslation();
|
||||
const { subscriptions } = useCountdownOptions();
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useWindowTitle('Countdown');
|
||||
|
||||
// gather rundown data
|
||||
const playableEvents = events.filter((event) => isOntimeEvent(event) && isPlayableEvent(event));
|
||||
|
||||
// gather timer data
|
||||
const clock = formatTime(time.clock);
|
||||
|
||||
// gather presentation data
|
||||
const hasEvents = playableEvents.length > 0;
|
||||
|
||||
// gather option data
|
||||
const defaultFormat = getDefaultFormat(settings?.timeFormat);
|
||||
const countdownOptions = getCountdownOptions(defaultFormat, customFields);
|
||||
|
||||
return (
|
||||
<div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
|
||||
<ViewParamsEditor viewOptions={countdownOptions} />
|
||||
<div className='project-header'>
|
||||
{general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
|
||||
<div className='title'>{general.title}</div>
|
||||
<div className='clock-container'>
|
||||
<div className='label'>{getLocalizedString('common.time_now')}</div>
|
||||
<SuperscriptTime time={clock} className='time' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasEvents && <Empty text={getLocalizedString('common.no_data')} className='empty-container' />}
|
||||
|
||||
{hasEvents && editMode && (
|
||||
<CountdownSelect events={playableEvents} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
|
||||
)}
|
||||
|
||||
{hasEvents && !editMode && (
|
||||
<CountdownContents
|
||||
playableEvents={playableEvents}
|
||||
subscriptions={subscriptions}
|
||||
time={time}
|
||||
goToEditMode={() => setEditMode(true)}
|
||||
selectedId={selectedId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CountdownContentsProps {
|
||||
playableEvents: OntimeEvent[];
|
||||
selectedId: EntryId | null;
|
||||
subscriptions: EntryId[];
|
||||
time: ViewExtendedTimer;
|
||||
goToEditMode: () => void;
|
||||
}
|
||||
|
||||
function CountdownContents({ playableEvents, selectedId, subscriptions, time, goToEditMode }: CountdownContentsProps) {
|
||||
const { getLocalizedString } = useTranslation();
|
||||
|
||||
if (subscriptions.length === 0) {
|
||||
return (
|
||||
<div className='empty-container'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
|
||||
<Button variant='primary' size='large' onClick={goToEditMode}>
|
||||
<IoAdd /> Add
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const subscribedEvents = getOrderedSubscriptions(subscriptions, playableEvents);
|
||||
|
||||
if (subscribedEvents.length === 0) {
|
||||
return (
|
||||
<div className='empty-container'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
|
||||
<Button variant='primary' size='large' onClick={goToEditMode}>
|
||||
<IoAdd /> Add
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CountdownSubscriptions
|
||||
subscribedEvents={subscribedEvents}
|
||||
selectedId={selectedId}
|
||||
time={time}
|
||||
goToEditMode={goToEditMode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { useState } from 'react';
|
||||
import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EntryId, OntimeEvent } from 'ontime-types';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
import { cx } from '../../common/utils/styleUtils';
|
||||
import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
|
||||
|
||||
import { makeSubscriptionsUrl } from './countdown.utils';
|
||||
|
||||
import './Countdown.scss';
|
||||
|
||||
interface CountdownSelectProps {
|
||||
events: OntimeEvent[];
|
||||
subscriptions: EntryId[];
|
||||
disableEdit: () => void;
|
||||
}
|
||||
|
||||
export default function CountdownSelect({ events, subscriptions, disableEdit }: CountdownSelectProps) {
|
||||
const [selected, setSelected] = useState<EntryId[]>(subscriptions);
|
||||
const navigate = useNavigate();
|
||||
|
||||
/**
|
||||
* Toggles an entry from the selected set
|
||||
*/
|
||||
const toggleSelect = (entryId: EntryId) => {
|
||||
setSelected((prev) => {
|
||||
if (prev.includes(entryId)) {
|
||||
// If the entry is already selected, remove it
|
||||
return prev.filter((id) => id !== entryId);
|
||||
}
|
||||
return [...prev, entryId];
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a URL with the selected subscriptions
|
||||
* and navigates to it
|
||||
*/
|
||||
const applySelection = () => {
|
||||
// we remove events that no longer exist to avoid stale subscriptions
|
||||
const filteredSelected = selected.filter((id) => events.some((event) => event.id === id));
|
||||
const url = makeSubscriptionsUrl(window.location.href, filteredSelected);
|
||||
disableEdit();
|
||||
setSelected([]);
|
||||
navigate(url.search.toString());
|
||||
};
|
||||
|
||||
// make a copy of the selected array for quick lookup
|
||||
const selectedIds = new Set(selected);
|
||||
|
||||
return (
|
||||
<div className='list-container'>
|
||||
{events.map((event: OntimeEvent, index: number) => {
|
||||
const title = event.title || '{no title}';
|
||||
const isSelected = selectedIds.has(event.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
onClick={() => toggleSelect(event.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
toggleSelect(event.id);
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
className={cx(['sub', isSelected && 'sub--selected'])}
|
||||
>
|
||||
<div className='sub__binder' style={{ '--user-color': event?.colour ?? '' }} />
|
||||
<div className='sub__schedule'>
|
||||
<ClockTime value={event.timeStart} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
|
||||
→
|
||||
<ClockTime value={event.timeEnd} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
|
||||
</div>
|
||||
<div className='sub__label'>{isSelected ? 'Click to remove' : 'Click to add'}</div>
|
||||
<div className='sub__title'>{title}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className='fab-container'>
|
||||
<Button variant='subtle' size='large' onClick={disableEdit}>
|
||||
<IoArrowBack /> Go back
|
||||
</Button>
|
||||
<Button variant='subtle' size='large' onClick={() => setSelected([])} disabled={selected.length === 0}>
|
||||
<IoClose /> Clear
|
||||
</Button>
|
||||
<Button variant='primary' size='large' disabled={events.length < 1} onClick={applySelection}>
|
||||
<IoSaveOutline /> Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { IoPencil } from 'react-icons/io5';
|
||||
import { EntryId, OntimeEvent } from 'ontime-types';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
|
||||
import useFollowComponent from '../../common/hooks/useFollowComponent';
|
||||
import { useCurrentDay, useRuntimeOffset } from '../../common/hooks/useSocket';
|
||||
import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
|
||||
import { cx } from '../../common/utils/styleUtils';
|
||||
import { throttle } from '../../common/utils/throttle';
|
||||
import FollowButton from '../../features/operator/follow-button/FollowButton';
|
||||
import ClockTime from '../../features/viewers/common/clock-time/ClockTime';
|
||||
import { getPropertyValue } from '../../features/viewers/common/viewUtils';
|
||||
import { useTranslation } from '../../translation/TranslationProvider';
|
||||
|
||||
import { useCountdownOptions } from './countdown.options';
|
||||
import { getIsLive, getSubscriptionDisplayData, sanitiseTitle, timerProgress } from './countdown.utils';
|
||||
|
||||
import './Countdown.scss';
|
||||
|
||||
interface CountdownSubscriptionsProps {
|
||||
subscribedEvents: OntimeEvent[];
|
||||
selectedId: EntryId | null;
|
||||
time: ViewExtendedTimer;
|
||||
goToEditMode: () => void;
|
||||
}
|
||||
|
||||
export default function CountdownSubscriptions({
|
||||
time,
|
||||
subscribedEvents,
|
||||
selectedId,
|
||||
goToEditMode,
|
||||
}: CountdownSubscriptionsProps) {
|
||||
const { secondarySource, showProjected } = useCountdownOptions();
|
||||
const showFab = useFadeOutOnInactivity(true);
|
||||
|
||||
const timeoutId = useRef<NodeJS.Timeout | null>(null);
|
||||
const [lockAutoScroll, setLockAutoScroll] = useState(false);
|
||||
const selectedRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollToComponent = useFollowComponent({
|
||||
followRef: selectedRef,
|
||||
scrollRef,
|
||||
doFollow: !lockAutoScroll,
|
||||
topOffset: 0,
|
||||
});
|
||||
|
||||
// reset scroll if nothing is selected
|
||||
useEffect(() => {
|
||||
if (!selectedId) {
|
||||
if (!lockAutoScroll) {
|
||||
scrollRef.current?.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
}, [selectedId, lockAutoScroll, scrollRef]);
|
||||
|
||||
// scroll to component if user clicks the Follow button
|
||||
const handleOffset = () => {
|
||||
if (selectedId) {
|
||||
scrollToComponent();
|
||||
}
|
||||
setLockAutoScroll(false);
|
||||
};
|
||||
|
||||
// prevent considering automated scrolls as user scrolls
|
||||
const handleUserScroll = () => {
|
||||
if (selectedRef?.current && scrollRef?.current) {
|
||||
const selectedRect = selectedRef.current.getBoundingClientRect();
|
||||
const scrollerRect = scrollRef.current.getBoundingClientRect();
|
||||
if (selectedRect && scrollerRect) {
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top;
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
|
||||
setLockAutoScroll(hasScrolledOutOfThreshold);
|
||||
}
|
||||
}
|
||||
};
|
||||
const throttledHandleScroll = throttle(handleUserScroll, 1000);
|
||||
|
||||
// when the user scrolls we check if we need to show the button
|
||||
const handleScroll = () => {
|
||||
if (timeoutId.current) {
|
||||
clearTimeout(timeoutId.current);
|
||||
}
|
||||
|
||||
throttledHandleScroll();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
|
||||
{subscribedEvents.map((event) => {
|
||||
const secondaryData = getPropertyValue(event, secondarySource);
|
||||
const isLive = getIsLive(event.id, selectedId, time.playback);
|
||||
|
||||
return (
|
||||
<div key={event.id} ref={isLive ? selectedRef : undefined} className={cx(['sub', isLive && 'sub--live'])}>
|
||||
<div className='sub__binder' style={{ '--user-color': event.colour }} />
|
||||
<div className={cx(['sub__schedule', event.delay > 0 && 'sub__schedule--delayed'])}>
|
||||
{showProjected ? (
|
||||
<ProjectedSchedule timeStart={event.timeStart} timeEnd={event.timeEnd} delay={event.delay} />
|
||||
) : (
|
||||
<>
|
||||
<ClockTime value={event.timeStart + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
|
||||
→
|
||||
<ClockTime value={event.timeEnd + event.delay} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<SubscriptionStatus key={event.id} event={event} selectedId={selectedId} time={time} />
|
||||
<div className={cx(['sub__title', !event.title && 'subdued'])}>{sanitiseTitle(event.title)}</div>
|
||||
{secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
|
||||
<Button variant='primary' size='large' onClick={goToEditMode}>
|
||||
<IoPencil /> Edit
|
||||
</Button>
|
||||
</div>
|
||||
<FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProjectedScheduleProps {
|
||||
timeStart: number;
|
||||
timeEnd: number;
|
||||
delay: number;
|
||||
}
|
||||
function ProjectedSchedule(props: ProjectedScheduleProps) {
|
||||
const { timeStart, timeEnd, delay } = props;
|
||||
|
||||
const { offset } = useRuntimeOffset();
|
||||
|
||||
// offset is negative if we are ahead
|
||||
const projectedOffset = offset - delay;
|
||||
|
||||
const classes = cx([projectedOffset > 0 && 'sub__schedule--ahead', projectedOffset < 0 && 'sub__schedule--behind']);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ClockTime
|
||||
value={timeStart - projectedOffset}
|
||||
className={classes}
|
||||
preferredFormat12='h:mm'
|
||||
preferredFormat24='HH:mm'
|
||||
/>
|
||||
→
|
||||
<ClockTime value={timeEnd - projectedOffset} preferredFormat12='h:mm' preferredFormat24='HH:mm' />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface SubscriptionStatusProps {
|
||||
time: ViewExtendedTimer;
|
||||
event: OntimeEvent;
|
||||
selectedId: EntryId | null;
|
||||
}
|
||||
|
||||
function SubscriptionStatus({ time, event, selectedId }: SubscriptionStatusProps) {
|
||||
const { getLocalizedString } = useTranslation();
|
||||
const { currentDay } = useCurrentDay();
|
||||
const { offset } = useRuntimeOffset();
|
||||
const { showProjected } = useCountdownOptions();
|
||||
|
||||
// TODO: use reporter values as in the event block chip
|
||||
const { status, timer } = getSubscriptionDisplayData(
|
||||
time,
|
||||
event,
|
||||
selectedId,
|
||||
offset,
|
||||
currentDay,
|
||||
getLocalizedString('common.minutes'),
|
||||
showProjected,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='sub__status'>{getLocalizedString(timerProgress[status])}</div>
|
||||
<div className='sub__timer'>{timer}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { CustomFields, EntryId, OntimeEvent } from 'ontime-types';
|
||||
|
||||
import {
|
||||
getTimeOption,
|
||||
makeOptionsFromCustomFields,
|
||||
OptionTitle,
|
||||
} from '../../common/components/view-params-editor/constants';
|
||||
import { ViewOption } from '../../common/components/view-params-editor/types';
|
||||
import { isStringBoolean } from '../../features/viewers/common/viewUtils';
|
||||
|
||||
export const getCountdownOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
|
||||
const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
|
||||
|
||||
return [
|
||||
{ title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
|
||||
{
|
||||
title: OptionTitle.DataSources,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'sub',
|
||||
title: 'Event subscription',
|
||||
description: 'The events to follow',
|
||||
value: '',
|
||||
type: 'persist',
|
||||
},
|
||||
{
|
||||
// TODO: adding a secondary source is removing the subscriptions
|
||||
// this seems to be a bug with persist assuming that the property has a single entry
|
||||
id: 'secondary-src',
|
||||
title: 'Event secondary text',
|
||||
description: 'Select the data source for auxiliary text shown in the card',
|
||||
type: 'option',
|
||||
values: secondaryOptions,
|
||||
defaultValue: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: OptionTitle.BehaviourOptions,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'showProjected',
|
||||
title: 'Show projected time',
|
||||
description: 'Whether scheduled times should account for runtime offset',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
type CountdownOptions = {
|
||||
subscriptions: EntryId[];
|
||||
secondarySource: keyof OntimeEvent | null;
|
||||
showProjected: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Utility extract the view options from URL Params
|
||||
* the names and fallback are manually matched with timerOptions
|
||||
*/
|
||||
function getOptionsFromParams(searchParams: URLSearchParams): CountdownOptions {
|
||||
// we manually make an object that matches the key above
|
||||
return {
|
||||
subscriptions: searchParams.getAll('sub') as EntryId[],
|
||||
secondarySource: searchParams.get('secondary-src') as keyof OntimeEvent | null,
|
||||
showProjected: isStringBoolean(searchParams.get('showProjected')),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook exposes the backstage view options
|
||||
*/
|
||||
export function useCountdownOptions(): CountdownOptions {
|
||||
const [searchParams] = useSearchParams();
|
||||
const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
|
||||
return options;
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
import { EntryId, OntimeEvent, Playback, TimerType } from 'ontime-types';
|
||||
import { dayInMs } from 'ontime-utils';
|
||||
|
||||
import { ViewExtendedTimer } from '../../common/models/TimeManager.type';
|
||||
import { getFormattedTimer } from '../../features/viewers/common/viewUtils';
|
||||
import type { TranslationKey } from '../../translation/TranslationProvider';
|
||||
|
||||
/**
|
||||
* Parses string as a title
|
||||
*/
|
||||
export function sanitiseTitle(title: string | null) {
|
||||
return title ?? '{no title}';
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the current event is live
|
||||
*/
|
||||
export function getIsLive(currentId: EntryId, selectedId: EntryId | null, playback: Playback): boolean {
|
||||
return currentId === selectedId && playback !== Playback.Armed;
|
||||
}
|
||||
|
||||
const subscriptionTimerDisplayOptions = {
|
||||
removeSeconds: true,
|
||||
removeLeadingZero: true,
|
||||
} as const;
|
||||
|
||||
const subscriptionScheduledTimeDisplayOptions = {
|
||||
removeSeconds: true,
|
||||
removeLeadingZero: false,
|
||||
} as const;
|
||||
|
||||
type TimerMessage = Record<string, TranslationKey>;
|
||||
export type ProgressStatus = 'future' | 'due' | 'live' | 'done';
|
||||
|
||||
export const timerProgress: TimerMessage = {
|
||||
future: 'countdown.to_start',
|
||||
due: 'timeline.due',
|
||||
live: 'timeline.live',
|
||||
done: 'countdown.ended',
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a parsed timer and relevant status message
|
||||
* Handles events in different days but disregards whether an event has actually played
|
||||
* TODO: get data from reporter and check if the event has played
|
||||
* TODO: get timer data granularly
|
||||
*/
|
||||
export function getSubscriptionDisplayData(
|
||||
time: ViewExtendedTimer,
|
||||
subscribedEvent: OntimeEvent,
|
||||
selectedId: EntryId | null,
|
||||
offset: number,
|
||||
currentDay: number,
|
||||
minutesString: string,
|
||||
showProjected = false,
|
||||
): { status: ProgressStatus; timer: string } {
|
||||
const offsetAndDelay = showProjected ? offset + subscribedEvent.delay : 0;
|
||||
|
||||
if (selectedId === subscribedEvent.id) {
|
||||
// 1. An event that is loaded but not running is {'due': <countdown | overtime>}
|
||||
if (time.playback === Playback.Armed) {
|
||||
// if we are following the event, but it is not running, we show the scheduled start
|
||||
return {
|
||||
status: 'due',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeStart + offsetAndDelay,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionScheduledTimeDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// 2. An event with a time-to-start lower than 0 is {'due': <countdown | scheduledStart>}, show the running timer
|
||||
return {
|
||||
status: 'live',
|
||||
timer: getFormattedTimer(time.current, TimerType.CountDown, minutesString, subscriptionTimerDisplayOptions),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* If the running timer is not the one we are following
|
||||
* we can be in future, due or have ended
|
||||
*/
|
||||
|
||||
// 3. event is the day after, we show a countdown to start
|
||||
if (subscribedEvent.dayOffset > currentDay) {
|
||||
const dayOffset = (subscribedEvent.dayOffset - currentDay) * dayInMs;
|
||||
return {
|
||||
status: 'future',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeStart + dayOffset - time.clock - offsetAndDelay,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionTimerDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// 4. event is the before after, show the scheduled end
|
||||
// TODO: get the time from the reporter
|
||||
if (subscribedEvent.dayOffset < currentDay) {
|
||||
return {
|
||||
status: 'done',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeEnd,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionScheduledTimeDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// 5. if event is in future, we count to the scheduled start
|
||||
// TODO: get time until
|
||||
if (time.clock < subscribedEvent.timeStart) {
|
||||
return {
|
||||
status: 'future',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeStart - time.clock - offsetAndDelay,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionTimerDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// 6. if event has ended, we show the scheduled end
|
||||
// TODO: get the time from the reporter
|
||||
if (time.clock > subscribedEvent.timeEnd) {
|
||||
return {
|
||||
status: 'done',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeEnd,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionScheduledTimeDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
// the event here has to be due, we show the countdown the projected start time
|
||||
return {
|
||||
status: 'due',
|
||||
timer: getFormattedTimer(
|
||||
subscribedEvent.timeStart + offsetAndDelay,
|
||||
TimerType.CountDown,
|
||||
minutesString,
|
||||
subscriptionScheduledTimeDisplayOptions,
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a set of subscriptions to the URL parameters
|
||||
*/
|
||||
export function makeSubscriptionsUrl(urlRef: string, subscriptions: EntryId[]) {
|
||||
const url = new URL(urlRef);
|
||||
const newParams = new URLSearchParams();
|
||||
|
||||
// copy existing parameters except for 'sub'
|
||||
for (const [key, value] of url.searchParams.entries()) {
|
||||
if (key !== 'sub') {
|
||||
newParams.append(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
// add new subscriptions
|
||||
subscriptions.forEach((id) => {
|
||||
newParams.append('sub', id);
|
||||
});
|
||||
|
||||
url.search = newParams.toString();
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of events subscribed events ordered by scheduled
|
||||
* Since the original array is already ordered, we simply filter out the events
|
||||
* which are not in the subscriptions list.
|
||||
*/
|
||||
export function getOrderedSubscriptions(subscriptions: EntryId[], playableEvents: OntimeEvent[]): OntimeEvent[] {
|
||||
return playableEvents.filter((event) => subscriptions.includes(event.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks through the rundown whether the current event is linked to the loaded event
|
||||
*/
|
||||
export function isLinkedToLoadedEvent(events: OntimeEvent[], loadedId: EntryId | null, currentId: EntryId): boolean {
|
||||
// if nothing is loaded, we return true to simplify the logic
|
||||
if (!loadedId) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const loadedIndex = events.findIndex((event) => event.id === loadedId);
|
||||
if (loadedIndex === -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (let i = loadedIndex; i < events.length; i++) {
|
||||
const event = events[i];
|
||||
if (event.id === currentId) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (event.linkStart === null) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
Reference in New Issue
Block a user