mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-12 02:43:50 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 alex-arc
|
6d79764ffe | ||
 Claude
|
a67dbd8a59 | ||
|
Claude
|
361b6eb875 |
@@ -22,11 +22,6 @@ interface UseFollowComponentProps {
|
||||
scrollRef: RefObject<HTMLElement | null>;
|
||||
doFollow: boolean;
|
||||
topOffset?: number;
|
||||
/**
|
||||
* Resolved at scroll time, for offsets which can only be measured from the DOM (eg. a sticky header).
|
||||
* Takes precedence over topOffset. Keep the reference stable, it is a dependency of the follow effect.
|
||||
*/
|
||||
getTopOffset?: () => number;
|
||||
setScrollFlag?: (newValue: boolean) => void;
|
||||
followTrigger?: MaybeString; // this would be an entry id or null
|
||||
}
|
||||
@@ -36,7 +31,6 @@ export default function useFollowComponent({
|
||||
scrollRef,
|
||||
doFollow,
|
||||
topOffset = 100,
|
||||
getTopOffset,
|
||||
setScrollFlag,
|
||||
followTrigger,
|
||||
}: UseFollowComponentProps) {
|
||||
@@ -50,23 +44,21 @@ export default function useFollowComponent({
|
||||
setScrollFlag?.(true);
|
||||
// Use requestAnimationFrame to ensure the component is fully loaded
|
||||
window.requestAnimationFrame(() => {
|
||||
// resolve the offset after layout, so that measured values are up to date
|
||||
const offset = getTopOffset?.() ?? topOffset;
|
||||
scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, offset);
|
||||
scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
|
||||
setScrollFlag?.(false);
|
||||
});
|
||||
}
|
||||
}, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset, getTopOffset]);
|
||||
}, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
|
||||
|
||||
const scrollToRefComponent = useCallback(
|
||||
(componentRef = followRef, containerRef = scrollRef, offset?: number) => {
|
||||
(componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
|
||||
if (componentRef && containerRef) {
|
||||
// @ts-expect-error -- we know this are not null
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
scrollToComponent(componentRef!, containerRef!, offset ?? getTopOffset?.() ?? topOffset);
|
||||
scrollToComponent(componentRef!, containerRef!, offset);
|
||||
}
|
||||
},
|
||||
[followRef, scrollRef, topOffset, getTopOffset],
|
||||
[followRef, scrollRef, topOffset],
|
||||
);
|
||||
|
||||
return scrollToRefComponent;
|
||||
|
||||
@@ -200,7 +200,8 @@ $card-padding: 2rem;
|
||||
.overlay {
|
||||
position: absolute;
|
||||
z-index: $zindex-backdrop;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(2px);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.updateIndicator {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 99px;
|
||||
background-color: $red-400;
|
||||
}
|
||||
@@ -3,8 +3,6 @@ import useAppVersion from '../../../../common/hooks-query/useAppVersion';
|
||||
import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './AppVersion.module.scss';
|
||||
|
||||
export default function AppVersion() {
|
||||
const { data, isError } = useAppVersion();
|
||||
|
||||
@@ -20,12 +18,7 @@ export default function AppVersion() {
|
||||
return (
|
||||
<Panel.ListItem>
|
||||
<Panel.Field
|
||||
title={
|
||||
<>
|
||||
<span className={style.updateIndicator} aria-hidden='true' />
|
||||
{`Ontime ${appVersion}`}
|
||||
</>
|
||||
}
|
||||
title={`Ontime ${appVersion}`}
|
||||
description={
|
||||
isOntimeCloud
|
||||
? `Version ${data.version} is available. Restart your stage to update.`
|
||||
@@ -33,7 +26,7 @@ export default function AppVersion() {
|
||||
}
|
||||
/>
|
||||
{!isOntimeCloud && (
|
||||
<ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
|
||||
<ExternalLink href={websiteUrl}>Visit Ontime's page to download the latest version.</ExternalLink>
|
||||
)}
|
||||
</Panel.ListItem>
|
||||
);
|
||||
|
||||
@@ -85,10 +85,10 @@ export default function ServerPortSettings() {
|
||||
</Button>
|
||||
</Panel.InlineElements>
|
||||
</Panel.SubHeader>
|
||||
<Panel.Loader isLoading={status === 'pending'} />
|
||||
{rootError && <Panel.Error>{rootError}</Panel.Error>}
|
||||
<Panel.Divider />
|
||||
<Panel.Section>
|
||||
<Panel.Loader isLoading={status === 'pending'} />
|
||||
{data.pendingRestart && (
|
||||
<Info type='warning'>A port change is pending and will happen on the next restart.</Info>
|
||||
)}
|
||||
|
||||
@@ -18,14 +18,6 @@
|
||||
padding-bottom: 95vh;
|
||||
}
|
||||
|
||||
/* a group and its events, bounds the sticky group header to its own section */
|
||||
.groupSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* the rows used to be direct children of the list, keep the gap they had */
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.editPrompt {
|
||||
position: fixed;
|
||||
z-index: $zindex-dialog;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import EmptyFill from '../../common/components/state/EmptyFill';
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
@@ -54,21 +54,11 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
const [lockAutoScroll, setLockAutoScroll] = useState(false);
|
||||
const selectedRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// the group of the running event is pinned to the top of the list, the running event needs to clear it
|
||||
const getStickyOffset = useCallback(() => {
|
||||
const header = stickyHeaderRef.current;
|
||||
// account for the list gap, so that the rows do not touch
|
||||
return header ? header.offsetHeight + 2 : 0;
|
||||
}, []);
|
||||
const getTopOffset = useCallback(() => selectedOffset + getStickyOffset(), [getStickyOffset]);
|
||||
|
||||
const scrollToComponent = useFollowComponent({
|
||||
followRef: selectedRef,
|
||||
scrollRef,
|
||||
doFollow: !lockAutoScroll,
|
||||
getTopOffset,
|
||||
topOffset: selectedOffset,
|
||||
followTrigger: selectedEventId,
|
||||
});
|
||||
|
||||
@@ -96,8 +86,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
const selectedRect = selectedRef.current.getBoundingClientRect();
|
||||
const scrollerRect = scrollRef.current.getBoundingClientRect();
|
||||
if (selectedRect && scrollerRect) {
|
||||
// discount the pinned group header, so that the threshold keeps its meaning when a header is stuck
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top;
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
|
||||
setLockAutoScroll(hasScrolledOutOfThreshold);
|
||||
}
|
||||
@@ -197,14 +186,13 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.groupSection} key={entry.id}>
|
||||
<Fragment key={entry.id}>
|
||||
<OperatorGroup
|
||||
ref={isCurrentParent ? stickyHeaderRef : undefined}
|
||||
key={entry.id}
|
||||
title={entry.title}
|
||||
colour={entry.colour}
|
||||
count={entry.entries.length}
|
||||
duration={entry.duration}
|
||||
isLive={isCurrentParent}
|
||||
/>
|
||||
{entry.entries.map((nestedEntryId) => {
|
||||
const nestedEntry = rundown.entries[nestedEntryId];
|
||||
@@ -251,7 +239,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
||||
@@ -3,32 +3,17 @@
|
||||
min-height: 2.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-left: 0.35rem solid var(--group-colour, $gray-500);
|
||||
/* the background comes inline from getAccessibleColour, which resolves to an opaque colour
|
||||
and is what keeps the rows from showing through while the header is pinned */
|
||||
background-color: $gray-1350;
|
||||
background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
|
||||
/* stays visible as a header for the events of the group, bound by the group section */
|
||||
position: sticky;
|
||||
/* covers the list padding, otherwise the rows scroll through it */
|
||||
top: -0.25rem;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* a group holding the running event is only outlined, the green fill belongs to the event row itself.
|
||||
the card is already filled with the group colour, so we use the lighter active indicator over a dark
|
||||
frame, which stays legible against any of them, green groups included */
|
||||
.live {
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $ui-black,
|
||||
inset 0 0 0 4px $active-indicator;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { CSSProperties, Ref, memo } from 'react';
|
||||
import { CSSProperties, memo } from 'react';
|
||||
|
||||
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { formatDuration } from '../../../common/utils/time';
|
||||
|
||||
import style from './OperatorGroup.module.scss';
|
||||
@@ -10,22 +10,15 @@ interface OperatorGroup {
|
||||
colour: string;
|
||||
count: number;
|
||||
duration: number;
|
||||
/** whether the group contains the currently running event */
|
||||
isLive?: boolean;
|
||||
ref?: Ref<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export default memo(OperatorGroup);
|
||||
function OperatorGroup({ title, colour, count, duration, isLive, ref }: OperatorGroup) {
|
||||
function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
|
||||
const groupColour = colour || '#929292';
|
||||
const groupColours = getAccessibleColour(groupColour);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx([style.group, isLive && style.live])}
|
||||
style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}
|
||||
ref={ref}
|
||||
>
|
||||
<div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
|
||||
<span className={style.title}>{title}</span>
|
||||
<span className={style.meta}>
|
||||
<span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
|
||||
|
||||
@@ -103,22 +103,6 @@ $item-height: 3.5rem;
|
||||
padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
|
||||
}
|
||||
|
||||
/* a subscribed group and its subscribed events, bounds the sticky header to its own section */
|
||||
.sub-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* flex-grow is set inline from the row count, so that the rows keep the share they had in the list */
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
/* scoped to the section, the select view shows the same cards in a flat list */
|
||||
.sub-section .sub--group {
|
||||
position: sticky;
|
||||
/* sticky insets constrain the margin box, negate the row margin so the header sits flush */
|
||||
top: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ====================== LIST-ITEM ======================*/
|
||||
.sub {
|
||||
margin: 2px;
|
||||
@@ -212,15 +196,9 @@ $item-height: 3.5rem;
|
||||
|
||||
.sub--group {
|
||||
box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
|
||||
/* the card colour is translucent, an opaque base keeps the rows from showing through the sticky header.
|
||||
split into longhands since the shorthand only takes a colour in its last layer */
|
||||
background-color: var(--background-color-override, $viewer-background-color);
|
||||
background-image:
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
|
||||
linear-gradient(
|
||||
var(--card-background-color-override, $viewer-card-bg-color),
|
||||
var(--card-background-color-override, $viewer-card-bg-color)
|
||||
);
|
||||
var(--card-background-color-override, $viewer-card-bg-color);
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
@@ -252,16 +230,6 @@ $item-height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* a group holding the running event is only outlined, the green fill belongs to the event row itself */
|
||||
.sub--group.sub--live {
|
||||
box-shadow: inset 0 0 0 2px $active-green;
|
||||
}
|
||||
|
||||
/* loaded but not yet running, subtle enough to not compete with the live ring */
|
||||
.sub--group.sub--armed {
|
||||
box-shadow: inset 0 0 0 2px $gray-1000;
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
grid-area: title;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { MaybeNumber, OntimeEvent } from 'ontime-types';
|
||||
import { dayInMs } from 'ontime-utils';
|
||||
import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { IoPencil } from 'react-icons/io5';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
@@ -22,7 +22,6 @@ import {
|
||||
CountdownTarget,
|
||||
extendEventData,
|
||||
getIsLive,
|
||||
groupSubscriptionTargets,
|
||||
isOutsideRange,
|
||||
preferredFormat12,
|
||||
preferredFormat24,
|
||||
@@ -49,22 +48,11 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
const [lockAutoScroll, setLockAutoScroll] = useState(false);
|
||||
const selectedRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
|
||||
|
||||
// the group of the running event is pinned to the top of the list, the running event needs to clear it
|
||||
const getStickyOffset = useCallback(() => {
|
||||
const header = stickyHeaderRef.current;
|
||||
// account for the row margin, so that the rows do not touch
|
||||
return header ? header.offsetHeight + 2 : 0;
|
||||
}, []);
|
||||
|
||||
const scrollToComponent = useFollowComponent({
|
||||
followRef: selectedRef,
|
||||
scrollRef,
|
||||
doFollow: !lockAutoScroll,
|
||||
getTopOffset: getStickyOffset,
|
||||
topOffset: 0,
|
||||
followTrigger: selectedEventId,
|
||||
});
|
||||
|
||||
@@ -91,8 +79,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
const selectedRect = selectedRef.current.getBoundingClientRect();
|
||||
const scrollerRect = scrollRef.current.getBoundingClientRect();
|
||||
if (selectedRect && scrollerRect) {
|
||||
// discount the pinned group header, so that the threshold keeps its meaning when a header is stuck
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top;
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
|
||||
setLockAutoScroll(hasScrolledOutOfThreshold);
|
||||
}
|
||||
@@ -109,68 +96,43 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
throttledHandleScroll();
|
||||
};
|
||||
|
||||
const renderRow = (event: CountdownTarget, rowRef: RefObject<HTMLDivElement | null> | undefined, isLive: boolean) => {
|
||||
// while a group is live, surface the running event's title as the secondary line
|
||||
const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
|
||||
const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
|
||||
const isGroupedEvent = !event.isGroup && Boolean(event.parent);
|
||||
const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
|
||||
const isArmed = !isLive && activeEntryId === selectedEventId;
|
||||
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
|
||||
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
ref={rowRef}
|
||||
className={cx([
|
||||
'sub',
|
||||
isLive && 'sub--live',
|
||||
isArmed && 'sub--armed',
|
||||
event.isGroup && 'sub--group',
|
||||
isGroupedEvent && 'sub--in-group',
|
||||
])}
|
||||
data-testid={event.cue}
|
||||
>
|
||||
<div
|
||||
className='sub__binder'
|
||||
style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
|
||||
/>
|
||||
<ScheduleTime event={countdownEvent} showExpected={showExpected} />
|
||||
<SubscriptionStatus event={countdownEvent} />
|
||||
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>
|
||||
{event.isGroup && <span className='sub__eyebrow'>Group</span>}
|
||||
{displayTitle}
|
||||
</div>
|
||||
{secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
|
||||
{sections.map((section) => {
|
||||
const rows = section.group ? [section.group, ...section.events] : section.events;
|
||||
// the running event anchors the scroll, the group header stays pinned above it
|
||||
const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
|
||||
|
||||
{subscribedEvents.map((event) => {
|
||||
// while a group is live, surface the running event's title as the secondary line
|
||||
const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
|
||||
const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
|
||||
const isGroupedEvent = !event.isGroup && Boolean(event.parent);
|
||||
const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
|
||||
// a subscribed group is live when any of its children is the selected/running event
|
||||
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
||||
const isArmed = !isLive && activeEntryId === selectedEventId;
|
||||
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
|
||||
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
||||
return (
|
||||
<div
|
||||
key={section.group?.id ?? rows[0].id}
|
||||
className='sub-section'
|
||||
// the rows used to be direct children of the list, keep their share of the available space
|
||||
style={{ flexGrow: rows.length }}
|
||||
key={event.id}
|
||||
ref={isLive ? selectedRef : undefined}
|
||||
className={cx([
|
||||
'sub',
|
||||
isLive && 'sub--live',
|
||||
isArmed && 'sub--armed',
|
||||
event.isGroup && 'sub--group',
|
||||
isGroupedEvent && 'sub--in-group',
|
||||
])}
|
||||
data-testid={event.cue}
|
||||
>
|
||||
{rows.map((event) => {
|
||||
const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
|
||||
// a subscribed group is live when any of its children is the selected/running event
|
||||
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
||||
// only ever hand the ref to a single row, sharing it would null it out on the next commit
|
||||
const isAnchor = isLive && (anchorId === null || event.id === anchorId);
|
||||
const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
|
||||
|
||||
return renderRow(event, rowRef, isLive);
|
||||
})}
|
||||
<div
|
||||
className='sub__binder'
|
||||
style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
|
||||
/>
|
||||
<ScheduleTime event={countdownEvent} showExpected={showExpected} />
|
||||
<SubscriptionStatus event={countdownEvent} />
|
||||
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>
|
||||
{event.isGroup && <span className='sub__eyebrow'>Group</span>}
|
||||
{displayTitle}
|
||||
</div>
|
||||
{secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import { ExtendedEntry } from '../../common/utils/rundownMetadata';
|
||||
import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';
|
||||
import { resolveSubscriptionTarget } from './countdown.utils';
|
||||
|
||||
/**
|
||||
* Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
|
||||
@@ -126,89 +126,3 @@ describe('resolveSubscriptionTarget()', () => {
|
||||
expect(result?.liveEntry).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupSubscriptionTargets()', () => {
|
||||
/**
|
||||
* Resolves a group the same way the view does, so that the tests exercise the real target shape
|
||||
* (a resolved group carries type Event, so the helper cannot rely on the entry type)
|
||||
*/
|
||||
function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
|
||||
const resolved = resolveSubscriptionTarget(group, flat);
|
||||
if (resolved === null) {
|
||||
throw new Error('test setup: group has no playable children');
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
|
||||
it('returns no sections for an empty subscription list', () => {
|
||||
expect(groupSubscriptionTargets([])).toEqual([]);
|
||||
});
|
||||
|
||||
it('gives each ungrouped event its own section', () => {
|
||||
const e1 = makeEvent({ id: 'e1' });
|
||||
const e2 = makeEvent({ id: 'e2' });
|
||||
|
||||
expect(groupSubscriptionTargets([e1, e2])).toEqual([
|
||||
{ group: null, events: [e1] },
|
||||
{ group: null, events: [e2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('absorbs the children of a subscribed group into its section', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g1' });
|
||||
const resolved = resolveGroup(group, [group, c1, c2]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
|
||||
});
|
||||
|
||||
it('keeps a subscribed group with no subscribed children as an empty section', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const resolved = resolveGroup(group, [group, c1]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
|
||||
});
|
||||
|
||||
it('does not absorb an event which belongs to a different group', () => {
|
||||
const group1 = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const group2 = makeGroup({ id: 'g2' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g2' });
|
||||
const flat = [group1, c1, group2, c2];
|
||||
const resolved1 = resolveGroup(group1, flat);
|
||||
const resolved2 = resolveGroup(group2, flat);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
|
||||
{ group: resolved1, events: [c1] },
|
||||
{ group: resolved2, events: [c2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('does not absorb an event whose parent group is not subscribed', () => {
|
||||
const group1 = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const group2 = makeGroup({ id: 'g2' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g2' });
|
||||
const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
|
||||
|
||||
// only the first group is subscribed, so the second group's child stands alone
|
||||
expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
|
||||
{ group: resolved1, events: [c1] },
|
||||
{ group: null, events: [c2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('closes a section when an ungrouped event follows a group', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const e1 = makeEvent({ id: 'e1' });
|
||||
const resolved = resolveGroup(group, [group, c1]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
|
||||
{ group: resolved, events: [c1] },
|
||||
{ group: null, events: [e1] },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -252,44 +252,6 @@ export function resolveSubscriptionTarget(
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A subscribed group along with the subscribed events which belong to it.
|
||||
* Events without a subscribed parent group form their own section with no group.
|
||||
*/
|
||||
export type CountdownSection = {
|
||||
group: CountdownTarget | null;
|
||||
events: CountdownTarget[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Folds the flat, rundown ordered subscription targets into sections.
|
||||
* A group opens a section which absorbs the following targets that declare it as parent,
|
||||
* which allows the group to be rendered as a sticky header for its own events.
|
||||
*/
|
||||
export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
|
||||
const sections: CountdownSection[] = [];
|
||||
let openSection: CountdownSection | null = null;
|
||||
|
||||
for (const target of targets) {
|
||||
// resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
|
||||
if (target.isGroup) {
|
||||
openSection = { group: target, events: [] };
|
||||
sections.push(openSection);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (openSection?.group && target.parent === openSection.group.id) {
|
||||
openSection.events.push(target);
|
||||
continue;
|
||||
}
|
||||
|
||||
openSection = null;
|
||||
sections.push({ group: null, events: [target] });
|
||||
}
|
||||
|
||||
return sections;
|
||||
}
|
||||
|
||||
export function extendEventData(
|
||||
event: CountdownTarget,
|
||||
currentDay: number,
|
||||
|
||||
@@ -100,7 +100,7 @@ function makeFileMenu(askToQuit, serverUrl, redirectWindow, showDialog, download
|
||||
submenu: [
|
||||
{
|
||||
label: 'New project...',
|
||||
click: () => redirectWindow('/editor?settings=project__create'),
|
||||
click: () => redirectWindow('/editor?settings=project__manage&new=true'),
|
||||
},
|
||||
{
|
||||
label: 'Load...',
|
||||
@@ -202,18 +202,6 @@ function makeSettingsMenu(redirectWindow) {
|
||||
label: 'View settings',
|
||||
click: () => redirectWindow('/editor?settings=settings__view'),
|
||||
},
|
||||
{
|
||||
label: 'Custom views',
|
||||
click: () => redirectWindow('/editor?settings=settings__custom-views'),
|
||||
},
|
||||
{
|
||||
label: 'MCP Server',
|
||||
click: () => redirectWindow('/editor?settings=settings__mcp'),
|
||||
},
|
||||
{
|
||||
label: 'Server port',
|
||||
click: () => redirectWindow('/editor?settings=settings__port'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { EndAction, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
|
||||
import { EndAction, Instant, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
|
||||
import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND, dayInMs, millisToString } from 'ontime-utils';
|
||||
|
||||
import * as timeCore from '../../lib/time-core/timeCore.js';
|
||||
import type { RuntimeState } from '../../stores/runtimeState.js';
|
||||
import {
|
||||
findDayOffset,
|
||||
@@ -53,11 +54,12 @@ describe('getElapsed()', () => {
|
||||
it('uses the current pause start while paused', () => {
|
||||
const state = {
|
||||
clock: 10 * MILLIS_PER_MINUTE,
|
||||
_now: timeCore.toInstant((10 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
|
||||
timer: {
|
||||
startedAt: 2 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: 7 * MILLIS_PER_MINUTE,
|
||||
pausedAt: timeCore.toInstant((7 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
|
||||
pausedDuration: 1 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
} as RuntimeState;
|
||||
@@ -975,6 +977,40 @@ describe('getRuntimeOffset()', () => {
|
||||
expect(absolute).toBe(25);
|
||||
});
|
||||
|
||||
it('paused time is delayed time when the pause spans midnight', () => {
|
||||
const state = {
|
||||
eventNow: {
|
||||
id: '1',
|
||||
timeStart: 23 * MILLIS_PER_HOUR, // 23:00
|
||||
timeEnd: 1 * MILLIS_PER_HOUR, // 01:00
|
||||
dayOffset: 0,
|
||||
},
|
||||
clock: 3 * MILLIS_PER_MINUTE, // 00:03 (after midnight)
|
||||
_now: timeCore.toInstant((3 * MILLIS_PER_MINUTE) as TimeOfDay, timeCore.now()),
|
||||
timer: {
|
||||
startedAt: 23 * MILLIS_PER_HOUR, // started on time at 23:00
|
||||
current: 25, // still counting down
|
||||
addedTime: 0,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: timeCore.toInstant(
|
||||
(23 * MILLIS_PER_HOUR + 58 * MILLIS_PER_MINUTE) as TimeOfDay,
|
||||
(timeCore.now() - dayInMs) as Instant,
|
||||
), // 23:58, before midnight
|
||||
pausedDuration: 0,
|
||||
},
|
||||
rundown: {
|
||||
actualStart: 23 * MILLIS_PER_HOUR,
|
||||
plannedStart: 23 * MILLIS_PER_HOUR,
|
||||
currentDay: 0,
|
||||
},
|
||||
_startDayOffset: 0,
|
||||
} as RuntimeState;
|
||||
|
||||
// paused from 23:58 to 00:03 -> so elapsed should still be 58 minutes
|
||||
expect(getElapsed(state)).toBe(58 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
|
||||
it('offset doesnt exist if we havent started', () => {
|
||||
const state = {
|
||||
clock: 78480789,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Day, MaybeNumber, TimeOfDay, TimerPhase } from 'ontime-types';
|
||||
import { MILLIS_PER_HOUR, checkIsNow, dayInMs, isPlaybackActive } from 'ontime-utils';
|
||||
|
||||
import * as timeCore from '../lib/time-core/timeCore.js';
|
||||
import type { RuntimeState } from '../stores/runtimeState.js';
|
||||
|
||||
/**
|
||||
@@ -96,17 +97,18 @@ export function getCurrent(state: RuntimeState): number {
|
||||
* Calculates active time elapsed since the timer started.
|
||||
*/
|
||||
export function getElapsed(state: RuntimeState): MaybeNumber {
|
||||
const { clock } = state;
|
||||
const { clock, _now } = state;
|
||||
const { startedAt } = state.timer;
|
||||
const { pausedAt, pausedDuration } = state._timer;
|
||||
const { pausedDuration, pausedAt } = state._timer;
|
||||
|
||||
if (startedAt === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const referenceClock = pausedAt ?? clock;
|
||||
const elapsedSinceStart = getTimeSinceStart(referenceClock, startedAt);
|
||||
const activeElapsed = elapsedSinceStart - pausedDuration;
|
||||
const currentPauseDuration = pausedAt !== null ? timeCore.timeSince(_now, pausedAt) : 0;
|
||||
|
||||
const elapsedSinceStart = getTimeSinceStart(clock, startedAt);
|
||||
const activeElapsed = elapsedSinceStart - pausedDuration - currentPauseDuration;
|
||||
|
||||
return Math.max(0, activeElapsed);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { OffsetMode, Playback, type TimeOfDay, TimerPhase } from 'ontime-types';
|
||||
import { Instant, OffsetMode, Playback, type TimeOfDay, TimerPhase } from 'ontime-types';
|
||||
import { deepmerge } from 'ontime-utils';
|
||||
|
||||
import type { RuntimeState } from '../runtimeState.js';
|
||||
|
||||
const baseState: RuntimeState = {
|
||||
clock: 0 as TimeOfDay,
|
||||
_now: 0 as Instant,
|
||||
eventNow: null,
|
||||
eventNext: null,
|
||||
eventFlag: null,
|
||||
|
||||
@@ -135,7 +135,7 @@ describe('mutation on runtimeState', () => {
|
||||
playback: Playback.Pause,
|
||||
addedTime: 0,
|
||||
});
|
||||
expect(newState._timer.pausedAt).toEqual(newState.clock);
|
||||
expect(newState._timer.pausedAt).toEqual(newState._now);
|
||||
|
||||
success = pause();
|
||||
expect(success).toBe(false);
|
||||
@@ -248,6 +248,59 @@ describe('mutation on runtimeState', () => {
|
||||
state = getState();
|
||||
expect(state.timer.elapsed).toBe(3 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
|
||||
test('elapsed excludes a pause that spans midnight', async () => {
|
||||
clearState();
|
||||
// an event that runs over midnight (23:00 -> 01:00)
|
||||
const event = {
|
||||
...mockEvent,
|
||||
id: 'elapsed-pause-midnight',
|
||||
timeStart: 23 * MILLIS_PER_HOUR,
|
||||
timeEnd: 1 * MILLIS_PER_HOUR,
|
||||
duration: 2 * MILLIS_PER_HOUR,
|
||||
};
|
||||
const mockRundown = makeRundown({
|
||||
entries: { [event.id]: event },
|
||||
order: [event.id],
|
||||
});
|
||||
|
||||
await initRundown(mockRundown, {});
|
||||
vi.runAllTimers();
|
||||
|
||||
const { metadata, rundown } = rundownCache.get();
|
||||
|
||||
// start before midnight
|
||||
vi.setSystemTime('jan 1 23:50');
|
||||
load(event, rundown, metadata);
|
||||
start();
|
||||
|
||||
// 8 minutes of active running before we pause
|
||||
vi.setSystemTime('jan 1 23:58');
|
||||
update();
|
||||
expect(getState().timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
|
||||
pause();
|
||||
|
||||
// elapsed is active time since start, so it must not advance while paused,
|
||||
// not even when the pause itself crosses midnight
|
||||
vi.setSystemTime('jan 2 00:01');
|
||||
update();
|
||||
expect(getState().timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
|
||||
|
||||
// resume 5 minutes after pausing, having crossed midnight (23:58 -> 00:03)
|
||||
vi.setSystemTime('jan 2 00:03');
|
||||
start();
|
||||
let state = getState();
|
||||
// the accumulated pause count is 5 minutes, regardless of the midnight wrap
|
||||
expect(state._timer.pausedDuration).toBe(5 * MILLIS_PER_MINUTE);
|
||||
// and elapsed still reflects only the 8 active minutes
|
||||
expect(state.timer.elapsed).toBe(8 * MILLIS_PER_MINUTE);
|
||||
|
||||
// 2 more active minutes after resume -> 10 minutes elapsed
|
||||
vi.setSystemTime('jan 2 00:05');
|
||||
update();
|
||||
state = getState();
|
||||
expect(state.timer.elapsed).toBe(10 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
});
|
||||
|
||||
test('runtime offset', async () => {
|
||||
|
||||
@@ -63,7 +63,9 @@ export type RuntimeState = {
|
||||
// private properties of the timer calculations
|
||||
_timer: {
|
||||
forceFinish: Maybe<TimeOfDay>; // whether we should declare an event as finished, will contain the finish time
|
||||
pausedAt: Maybe<TimeOfDay>;
|
||||
pausedAt: Maybe<Instant>;
|
||||
|
||||
/** Accumulate pause duration but dose not include the current pause */
|
||||
pausedDuration: number;
|
||||
secondaryTarget: Maybe<TimeOfDay>;
|
||||
hasFinished: boolean;
|
||||
@@ -76,10 +78,12 @@ export type RuntimeState = {
|
||||
_end: ExpectedMetadata;
|
||||
_startEpoch: Maybe<Instant>;
|
||||
_startDayOffset: Maybe<Day>;
|
||||
_now: Instant;
|
||||
};
|
||||
|
||||
const runtimeState: RuntimeState = {
|
||||
clock: timeCore.timeOfDayNow(),
|
||||
_now: timeCore.now(),
|
||||
groupNow: null,
|
||||
eventNow: null,
|
||||
eventNext: null,
|
||||
@@ -104,6 +108,12 @@ const runtimeState: RuntimeState = {
|
||||
_startDayOffset: null,
|
||||
};
|
||||
|
||||
/** set the current clock to ensure parity between _now and clock */
|
||||
function setClock(state: RuntimeState) {
|
||||
state._now = timeCore.now();
|
||||
state.clock = timeCore.toTimeOfDay(state._now);
|
||||
}
|
||||
|
||||
export function getState(): Readonly<RuntimeState> {
|
||||
// create a shallow copy of the state
|
||||
return {
|
||||
@@ -136,7 +146,7 @@ export function clearEventData() {
|
||||
runtimeState.rundown.selectedEventIndex = null;
|
||||
|
||||
runtimeState.timer.playback = Playback.Stop;
|
||||
runtimeState.clock = timeCore.timeOfDayNow();
|
||||
setClock(runtimeState);
|
||||
runtimeState.timer = { ...runtimeStorePlaceholder.timer };
|
||||
|
||||
// when clearing, we maintain the total delay from the rundown
|
||||
@@ -169,7 +179,7 @@ export function clearState() {
|
||||
runtimeState._end = null;
|
||||
|
||||
runtimeState.timer.playback = Playback.Stop;
|
||||
runtimeState.clock = timeCore.timeOfDayNow();
|
||||
setClock(runtimeState);
|
||||
runtimeState.timer = { ...runtimeStorePlaceholder.timer };
|
||||
|
||||
// when clearing, we maintain the total delay from the rundown
|
||||
@@ -422,15 +432,12 @@ export function start(state: RuntimeState = runtimeState): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
const epoch = timeCore.now();
|
||||
const now = timeCore.toTimeOfDay(epoch);
|
||||
|
||||
state.clock = now;
|
||||
setClock(state);
|
||||
state.timer.secondaryTimer = null;
|
||||
|
||||
// add paused time if it exists
|
||||
if (state._timer.pausedAt) {
|
||||
const timeToAdd = state.clock - state._timer.pausedAt;
|
||||
const timeToAdd = state._now - state._timer.pausedAt;
|
||||
state.timer.addedTime += timeToAdd;
|
||||
state._timer.pausedDuration += timeToAdd;
|
||||
state._timer.pausedAt = null;
|
||||
@@ -447,7 +454,7 @@ export function start(state: RuntimeState = runtimeState): boolean {
|
||||
if (state.rundown.actualStart === null) {
|
||||
state._startDayOffset = (findDayOffset(state.eventNow.timeStart, state.clock) + state.eventNow.dayOffset) as Day;
|
||||
state.rundown.currentDay = state._startDayOffset;
|
||||
state._startEpoch = epoch;
|
||||
state._startEpoch = state._now;
|
||||
state.rundown.actualStart = state.clock;
|
||||
}
|
||||
|
||||
@@ -481,8 +488,8 @@ export function pause(state: RuntimeState = runtimeState): boolean {
|
||||
}
|
||||
|
||||
state.timer.playback = Playback.Pause;
|
||||
state.clock = timeCore.timeOfDayNow();
|
||||
state._timer.pausedAt = state.clock;
|
||||
setClock(state);
|
||||
state._timer.pausedAt = state._now;
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -547,9 +554,7 @@ export type UpdateResult = {
|
||||
export function update(): UpdateResult {
|
||||
// 0. there are some things we always do
|
||||
const previousClock = runtimeState.clock;
|
||||
const epoch = timeCore.now();
|
||||
const now = timeCore.toTimeOfDay(epoch);
|
||||
runtimeState.clock = now; // we update the clock on every update call
|
||||
setClock(runtimeState); // we update the clock on every update call
|
||||
|
||||
// 1. is playback idle?
|
||||
if (!isPlaybackActive(runtimeState.timer.playback)) {
|
||||
@@ -558,13 +563,13 @@ export function update(): UpdateResult {
|
||||
|
||||
// calculate currentDay from epoch (days elapsed since playback was started)
|
||||
if (runtimeState._startEpoch !== null && runtimeState._startDayOffset !== null) {
|
||||
const daysSinceStart = timeCore.daysSinceStart(runtimeState._startEpoch, epoch);
|
||||
const daysSinceStart = timeCore.daysSinceStart(runtimeState._startEpoch, runtimeState._now);
|
||||
runtimeState.rundown.currentDay = runtimeState._startDayOffset + daysSinceStart;
|
||||
}
|
||||
|
||||
// 2. are we waiting to roll?
|
||||
if (runtimeState.timer.playback === Playback.Roll && runtimeState.timer.secondaryTimer !== null) {
|
||||
const clockHasCrossedMidnight = hasCrossedMidnight(previousClock, now);
|
||||
const clockHasCrossedMidnight = hasCrossedMidnight(previousClock, runtimeState.clock);
|
||||
return updateIfWaitingToRoll(clockHasCrossedMidnight);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user