mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 14:14:17 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 69aeb4aabb | |||
| 34ca715fb7 | |||
| b981bae63f |
@@ -6,7 +6,8 @@ import SwatchPicker from './SwatchPicker';
|
||||
import style from './SwatchSelect.module.scss';
|
||||
|
||||
interface ColourInputProps {
|
||||
value: string;
|
||||
/** undefined represents values which do not agree, no swatch is highlighted */
|
||||
value: string | undefined;
|
||||
name: 'colour';
|
||||
handleChange: (newValue: 'colour', name: string) => void;
|
||||
}
|
||||
@@ -44,7 +45,11 @@ export default function SwatchSelect(props: ColourInputProps) {
|
||||
{colours.map((colour) => (
|
||||
<Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
|
||||
))}
|
||||
<SwatchPicker color={value} onChange={setColour} isSelected={!colours.includes(value)} />
|
||||
<SwatchPicker
|
||||
color={value ?? ''}
|
||||
onChange={setColour}
|
||||
isSelected={value !== undefined && !colours.includes(value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import { shouldSubmitValue } from '../useReactiveTextInput';
|
||||
|
||||
describe('shouldSubmitValue()', () => {
|
||||
it('submits a value which differs from the initial value', () => {
|
||||
expect(shouldSubmitValue('new', 'old')).toBe(true);
|
||||
});
|
||||
|
||||
it('does not submit a value which has not changed', () => {
|
||||
expect(shouldSubmitValue('same', 'same')).toBe(false);
|
||||
});
|
||||
|
||||
it('submits an empty value when the initial value is known', () => {
|
||||
// clearing a field which has a value is a valid edit
|
||||
expect(shouldSubmitValue('', 'old')).toBe(true);
|
||||
});
|
||||
|
||||
it('does not submit an empty value when the initial value is unknown', () => {
|
||||
// an unknown value renders as an empty field, submitting it on blur
|
||||
// would overwrite every entry being edited with an empty value
|
||||
expect(shouldSubmitValue('', undefined)).toBe(false);
|
||||
});
|
||||
|
||||
it('submits a typed value when the initial value is unknown', () => {
|
||||
expect(shouldSubmitValue('typed', undefined)).toBe(true);
|
||||
});
|
||||
|
||||
it('submits an unchanged value when the caller opts in', () => {
|
||||
expect(shouldSubmitValue('same', 'same', true)).toBe(true);
|
||||
expect(shouldSubmitValue('', undefined, true)).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,23 @@
|
||||
import { HotkeyItem, getHotkeyHandler } from '@mantine/hooks';
|
||||
import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
/**
|
||||
* Whether a value should be sent to the server
|
||||
* An undefined initial value means that the value is unknown, for example when several
|
||||
* entries are being edited and they do not agree on a value
|
||||
* It is shown as an empty field, so submitting it would overwrite data the user has not edited
|
||||
*/
|
||||
export function shouldSubmitValue(
|
||||
valueToSubmit: string,
|
||||
initialText: string | undefined,
|
||||
allowSubmitSameValue?: boolean,
|
||||
): boolean {
|
||||
if (allowSubmitSameValue) {
|
||||
return true;
|
||||
}
|
||||
return valueToSubmit !== (initialText ?? '');
|
||||
}
|
||||
|
||||
interface UseReactiveTextInputReturn {
|
||||
value: string;
|
||||
onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
||||
@@ -9,7 +26,8 @@ interface UseReactiveTextInputReturn {
|
||||
}
|
||||
|
||||
export default function useReactiveTextInput(
|
||||
initialText: string,
|
||||
/** undefined represents an unknown value, the field is shown empty and blurring it submits nothing */
|
||||
initialText: string | undefined,
|
||||
submitCallback: (newValue: string) => void,
|
||||
ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
|
||||
options?: {
|
||||
@@ -22,7 +40,7 @@ export default function useReactiveTextInput(
|
||||
allowKeyboardNavigation?: boolean;
|
||||
},
|
||||
): UseReactiveTextInputReturn {
|
||||
const [text, setText] = useState<string>(initialText);
|
||||
const [text, setText] = useState<string>(initialText ?? '');
|
||||
// track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
|
||||
const isKeyboardSubmitting = useRef(false);
|
||||
// track escape to prevent the subsequent blur from submitting
|
||||
@@ -57,8 +75,7 @@ export default function useReactiveTextInput(
|
||||
*/
|
||||
const handleSubmit = useCallback(
|
||||
(valueToSubmit: string) => {
|
||||
// No need to update if it hasn't changed
|
||||
if (valueToSubmit === initialText && !options?.allowSubmitSameValue) {
|
||||
if (!shouldSubmitValue(valueToSubmit, initialText, options?.allowSubmitSameValue)) {
|
||||
options?.onCancelUpdate?.();
|
||||
} else {
|
||||
const cleanVal = valueToSubmit.trim();
|
||||
@@ -86,10 +103,10 @@ export default function useReactiveTextInput(
|
||||
const handleEscape = useCallback(() => {
|
||||
isEscaping.current = true;
|
||||
// No need to update if it hasn't changed
|
||||
setText(initialText);
|
||||
setText(initialText ?? '');
|
||||
// force the text to be the initial value
|
||||
if (ref.current) {
|
||||
ref.current.value = initialText;
|
||||
ref.current.value = initialText ?? '';
|
||||
}
|
||||
options?.onCancelUpdate?.();
|
||||
setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before blurring
|
||||
|
||||
@@ -41,7 +41,10 @@ export default function TimeInput<T extends string>({
|
||||
* @description Resets input value to given
|
||||
*/
|
||||
const resetValue = useCallback(() => {
|
||||
if (typeof time !== 'number' || isNaN(time)) {
|
||||
if (time === undefined) {
|
||||
// there is no value to show, we leave the field empty so that the placeholder is visible
|
||||
setValue('');
|
||||
} else if (typeof time !== 'number' || isNaN(time)) {
|
||||
setValue('00:00:00');
|
||||
} else if (shouldFormat) {
|
||||
setValue(formatTime(time));
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
.wide {
|
||||
top: 4vh;
|
||||
min-width: min(1280px, 96vw);
|
||||
max-width: min(1800px, 98vw);
|
||||
max-width: min(1600px, 96vw);
|
||||
height: 88vh;
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
|
||||
@@ -16,13 +16,21 @@ interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
|
||||
options: SelectOption<T>[];
|
||||
fluid?: boolean;
|
||||
size?: 'medium' | 'large';
|
||||
/** shown when the value is null, used to represent values which do not agree */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export default function Select<T>({ options, fluid, size = 'medium', ...selectRootProps }: SelectProps<T>) {
|
||||
export default function Select<T>({
|
||||
options,
|
||||
fluid,
|
||||
size = 'medium',
|
||||
placeholder,
|
||||
...selectRootProps
|
||||
}: SelectProps<T>) {
|
||||
return (
|
||||
<BaseSelect.Root items={options} {...selectRootProps}>
|
||||
<BaseSelect.Trigger className={cx([styles.select, styles[size], fluid && styles.fluid])}>
|
||||
<BaseSelect.Value />
|
||||
<BaseSelect.Value placeholder={placeholder} />
|
||||
<BaseSelect.Icon className={styles.selectIcon}>
|
||||
<LuChevronsUpDown />
|
||||
</BaseSelect.Icon>
|
||||
|
||||
@@ -29,6 +29,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* values do not agree, we show an empty track instead of a thumb position */
|
||||
.mixed .thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.medium {
|
||||
padding: 2px;
|
||||
--width: calc(2.5rem + 4px);
|
||||
|
||||
@@ -6,11 +6,13 @@ import style from './Switch.module.scss';
|
||||
|
||||
interface SwitchProps extends BaseSwitch.Root.Props {
|
||||
size?: 'medium' | 'large';
|
||||
/** the switch represents several values which do not agree, we hide the thumb */
|
||||
mixed?: boolean;
|
||||
}
|
||||
|
||||
export default function Switch({ size = 'medium', ...switchProps }: SwitchProps) {
|
||||
export default function Switch({ size = 'medium', mixed, ...switchProps }: SwitchProps) {
|
||||
return (
|
||||
<BaseSwitch.Root className={cx([style.switch, style[size]])} {...switchProps}>
|
||||
<BaseSwitch.Root className={cx([style.switch, style[size], mixed && style.mixed])} {...switchProps}>
|
||||
<BaseSwitch.Thumb className={style.thumb} />
|
||||
</BaseSwitch.Root>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { OntimeEvent, OntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import { applyPatchToEvents, canPredictBatchResult } from '../entryAction.utils';
|
||||
|
||||
function makeEntries(): RundownEntries {
|
||||
return {
|
||||
'1': { type: SupportedEntry.Event, id: '1', title: 'one', custom: { lx: 'a', sound: 'x' } } as OntimeEvent,
|
||||
'2': { type: SupportedEntry.Event, id: '2', title: 'two', custom: { lx: 'b' } } as OntimeEvent,
|
||||
'3': { type: SupportedEntry.Event, id: '3', title: 'three', custom: {} } as OntimeEvent,
|
||||
group: { type: SupportedEntry.Group, id: 'group', title: 'a group', custom: {} } as OntimeGroup,
|
||||
};
|
||||
}
|
||||
|
||||
describe('applyPatchToEvents()', () => {
|
||||
it('applies the patch to the given events only', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['1', '2'], { title: 'patched' });
|
||||
|
||||
expect((patched['1'] as OntimeEvent).title).toBe('patched');
|
||||
expect((patched['2'] as OntimeEvent).title).toBe('patched');
|
||||
expect((patched['3'] as OntimeEvent).title).toBe('three');
|
||||
});
|
||||
|
||||
it('patches custom fields instead of replacing them', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['1', '2'], { custom: { lx: 'new' } });
|
||||
|
||||
// the field which was not part of the patch must survive
|
||||
expect((patched['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'new', sound: 'x' });
|
||||
expect((patched['2'] as OntimeEvent).custom).toStrictEqual({ lx: 'new' });
|
||||
});
|
||||
|
||||
it('keeps the existing custom fields when the patch has none', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['1'], { title: 'patched' });
|
||||
|
||||
expect((patched['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'a', sound: 'x' });
|
||||
});
|
||||
|
||||
it('ignores ids which are not in the rundown', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['1', 'does-not-exist'], { title: 'patched' });
|
||||
|
||||
expect(Object.keys(patched)).toStrictEqual(['1', '2', '3', 'group']);
|
||||
expect((patched['1'] as OntimeEvent).title).toBe('patched');
|
||||
});
|
||||
|
||||
it('ignores entries which are not events', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['group'], { title: 'patched' });
|
||||
|
||||
expect((patched.group as OntimeGroup).title).toBe('a group');
|
||||
});
|
||||
|
||||
it('does not mutate the given entries', () => {
|
||||
const entries = makeEntries();
|
||||
applyPatchToEvents(entries, ['1'], { title: 'patched', custom: { lx: 'new' } });
|
||||
|
||||
expect((entries['1'] as OntimeEvent).title).toBe('one');
|
||||
expect((entries['1'] as OntimeEvent).custom).toStrictEqual({ lx: 'a', sound: 'x' });
|
||||
});
|
||||
|
||||
it('handles repeated ids', () => {
|
||||
const patched = applyPatchToEvents(makeEntries(), ['1', '1'], { title: 'patched' });
|
||||
|
||||
expect((patched['1'] as OntimeEvent).title).toBe('patched');
|
||||
});
|
||||
});
|
||||
|
||||
describe('canPredictBatchResult()', () => {
|
||||
it('allows resolving patches which do not affect the schedule', () => {
|
||||
expect(canPredictBatchResult({ title: 'a title' })).toBe(true);
|
||||
expect(canPredictBatchResult({ colour: 'red', flag: true })).toBe(true);
|
||||
});
|
||||
|
||||
it('defers to the server when the duration changes', () => {
|
||||
// a duration cascades into the start and end of every linked event
|
||||
expect(canPredictBatchResult({ duration: 1000 })).toBe(false);
|
||||
expect(canPredictBatchResult({ title: 'a title', duration: 1000 })).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import { EntryId, OntimeEvent, RundownEntries, isOntimeEvent } from 'ontime-types';
|
||||
|
||||
/**
|
||||
* Applies a patch to a set of events, used to optimistically resolve a batch edit
|
||||
* Entries which are missing or are not events are left untouched, mirroring the server
|
||||
* @returns a new entries object, the given entries are not mutated
|
||||
*/
|
||||
export function applyPatchToEvents(
|
||||
entries: RundownEntries,
|
||||
ids: EntryId[],
|
||||
patch: Partial<OntimeEvent>,
|
||||
): RundownEntries {
|
||||
const patchedEntries = { ...entries };
|
||||
|
||||
for (const id of new Set(ids)) {
|
||||
const entry = patchedEntries[id];
|
||||
if (!isOntimeEvent(entry)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
patchedEntries[id] = {
|
||||
...entry,
|
||||
...patch,
|
||||
// custom fields are patched, not replaced
|
||||
custom: patch.custom ? { ...entry.custom, ...patch.custom } : entry.custom,
|
||||
};
|
||||
}
|
||||
|
||||
return patchedEntries;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the result of a batch edit can be resolved without the server
|
||||
* Changing the duration cascades through the rundown, so the resulting
|
||||
* schedule is only known once the server has recalculated it
|
||||
*/
|
||||
export function canPredictBatchResult(patch: Partial<OntimeEvent>): boolean {
|
||||
return !('duration' in patch);
|
||||
}
|
||||
@@ -52,6 +52,7 @@ import {
|
||||
} from '../api/rundown';
|
||||
import { logAxiosError } from '../api/utils';
|
||||
import { useEditorSettings } from '../stores/editorSettings';
|
||||
import { applyPatchToEvents, canPredictBatchResult } from './entryAction.utils';
|
||||
|
||||
export type EventOptions = Partial<{
|
||||
// options of any new entries (event / delay / group)
|
||||
@@ -483,21 +484,9 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
|
||||
// Snapshot the previous value
|
||||
const previousRundown = queryClient.getQueryData<Rundown>(queryKey);
|
||||
|
||||
if (previousRundown) {
|
||||
const eventIds = new Set(data.ids);
|
||||
const newRundown = { ...previousRundown.entries };
|
||||
|
||||
eventIds.forEach((eventId) => {
|
||||
if (Object.hasOwn(newRundown, eventId)) {
|
||||
const event = newRundown[eventId];
|
||||
if (isOntimeEvent(event)) {
|
||||
newRundown[eventId] = {
|
||||
...event,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
// when the result cannot be resolved here we wait for the recalculated rundown from the server
|
||||
if (previousRundown && canPredictBatchResult(data.data)) {
|
||||
const newRundown = applyPatchToEvents(previousRundown.entries, data.ids, data.data);
|
||||
|
||||
queryClient.setQueryData<Rundown>(queryKey, {
|
||||
id: previousRundown.id,
|
||||
|
||||
@@ -154,9 +154,6 @@ export const useTimer = createSelector((state: RuntimeStore) => ({
|
||||
...state.timer,
|
||||
}));
|
||||
|
||||
/** Shared timer for the running group, null unless the group opted in */
|
||||
export const useGroupTimer = createSelector((state: RuntimeStore) => state.groupTimer);
|
||||
|
||||
export const useNextFlag = createSelector((state: RuntimeStore) => ({
|
||||
id: state.eventFlag?.id ?? null,
|
||||
expectedStart: state.offset.expectedFlagStart,
|
||||
|
||||
-7
@@ -25,13 +25,6 @@
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.finishActions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sourceGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
+8
-22
@@ -8,7 +8,6 @@ import type {
|
||||
import { getErrorMessage, ImportMap } from 'ontime-utils';
|
||||
import { ChangeEvent, useCallback, useRef, useState } from 'react';
|
||||
import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
|
||||
import { useNavigate } from 'react-router';
|
||||
|
||||
import {
|
||||
getWorksheetMetadata as getExcelWorksheetMetadata,
|
||||
@@ -57,11 +56,9 @@ export default function SourcesPanel() {
|
||||
const [error, setError] = useState('');
|
||||
const [hasFile, setHasFile] = useState<'none' | 'loading' | 'done'>('none');
|
||||
const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
|
||||
const [completedRundownTitle, setCompletedRundownTitle] = useState('');
|
||||
|
||||
const { data: currentRundown } = useRundown();
|
||||
const { applyImport } = useSpreadsheetImport();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -104,7 +101,6 @@ export default function SourcesPanel() {
|
||||
setHasFile('none');
|
||||
setActiveSource(null);
|
||||
setError('');
|
||||
setCompletedRundownTitle('');
|
||||
};
|
||||
|
||||
const openGSheetFlow = () => {
|
||||
@@ -127,12 +123,11 @@ export default function SourcesPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinished = (rundownTitle: string) => {
|
||||
const handleFinished = () => {
|
||||
setImportFlow('finished');
|
||||
setHasFile('none');
|
||||
setActiveSource(null);
|
||||
setError('');
|
||||
setCompletedRundownTitle(rundownTitle);
|
||||
};
|
||||
|
||||
const handleApplyImport = async (
|
||||
@@ -144,7 +139,7 @@ export default function SourcesPanel() {
|
||||
if (mode === 'new') {
|
||||
const title = newRundownTitle.trim() || preview.rundown.title;
|
||||
await applyImport({ mode: 'new', rundown: { ...preview.rundown, title }, customFields: preview.customFields });
|
||||
handleFinished(title);
|
||||
handleFinished();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -161,7 +156,7 @@ export default function SourcesPanel() {
|
||||
customFields: preview.customFields,
|
||||
providedFields,
|
||||
});
|
||||
handleFinished(currentRundown.title);
|
||||
handleFinished();
|
||||
};
|
||||
|
||||
const loadWorksheetMetadata = useCallback(
|
||||
@@ -294,20 +289,11 @@ export default function SourcesPanel() {
|
||||
{showCompleted && (
|
||||
<div className={style.finishSection}>
|
||||
<span className={style.finishBadge}>Import complete</span>
|
||||
<div className={style.finishTitle}>
|
||||
Spreadsheet data applied to {completedRundownTitle || 'your rundown'}.
|
||||
</div>
|
||||
<div className={style.finishDescription}>
|
||||
Review the imported rundown in the editor or start another import.
|
||||
</div>
|
||||
<div className={style.finishActions}>
|
||||
<Button variant='primary' onClick={() => navigate('/editor')}>
|
||||
Open editor
|
||||
</Button>
|
||||
<Button variant='subtle-white' onClick={resetFlow}>
|
||||
Import another
|
||||
</Button>
|
||||
</div>
|
||||
<div className={style.finishTitle}>Spreadsheet data applied.</div>
|
||||
<div className={style.finishDescription}>You can close this flow or start another import.</div>
|
||||
<Button variant='subtle-white' onClick={resetFlow}>
|
||||
Reset flow
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isGSheetFlow && (
|
||||
|
||||
-4
@@ -92,10 +92,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbarWarning {
|
||||
color: $orange-400;
|
||||
}
|
||||
|
||||
.mappingPaneTitle {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
+2
-17
@@ -132,16 +132,7 @@ export default function SheetImportEditor({
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
{toolbarStatus && (
|
||||
<Panel.Description>
|
||||
{toolbarStatus.entries === '–'
|
||||
? 'No import preview yet'
|
||||
: `${toolbarStatus.entries} entries · ${toolbarStatus.groups} groups · ${toolbarStatus.milestones} milestones · ${toolbarStatus.start}–${toolbarStatus.end} · ${toolbarStatus.duration}`}
|
||||
{toolbarStatus.warnings > 0 && (
|
||||
<span className={style.toolbarWarning}> · {toolbarStatus.warnings} warnings</span>
|
||||
)}
|
||||
</Panel.Description>
|
||||
)}
|
||||
{toolbarStatus && <Panel.Description>{toolbarStatus}</Panel.Description>}
|
||||
</Panel.InlineElements>
|
||||
|
||||
<div className={style.editorBody}>
|
||||
@@ -159,19 +150,13 @@ export default function SheetImportEditor({
|
||||
|
||||
<section className={style.previewPane}>
|
||||
<div className={style.previewPaneHeader}>
|
||||
<div className={style.previewPaneHeading}>
|
||||
<span className={style.previewPaneTitle}>Import preview</span>
|
||||
</div>
|
||||
<span className={style.previewPaneTitle}>Import preview</span>
|
||||
</div>
|
||||
<div className={style.tableShell}>
|
||||
<PreviewTable
|
||||
preview={state.preview}
|
||||
columnLabels={columnLabels}
|
||||
canRefresh={canPreview}
|
||||
isLoadingMetadata={isLoadingMetadata}
|
||||
isRefreshing={state.loading === 'preview'}
|
||||
needsPreviewRefresh={state.needsPreviewRefresh}
|
||||
onRefresh={handlePreviewSubmit}
|
||||
worksheetHeaders={worksheetHeaders}
|
||||
/>
|
||||
</div>
|
||||
|
||||
+24
-102
@@ -1,35 +1,27 @@
|
||||
.emptyState {
|
||||
padding: 3rem 1.5rem;
|
||||
height: 100%;
|
||||
min-height: 16rem;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emptyMessage {
|
||||
width: min(30rem, 100%);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.emptyTitle {
|
||||
margin-bottom: 0.25rem;
|
||||
color: rgba($gray-200, 0.72);
|
||||
font-size: calc(1rem + 2px);
|
||||
font-weight: 400;
|
||||
color: $ui-white;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.emptyBody {
|
||||
color: rgba($gray-200, 0.55);
|
||||
font-size: calc(1rem - 3px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.emptyAction {
|
||||
margin: 1rem auto 0;
|
||||
color: $gray-400;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
color: $ui-white;
|
||||
border-collapse: collapse;
|
||||
font-size: calc(1rem - 2px);
|
||||
text-align: left;
|
||||
table-layout: auto;
|
||||
@@ -42,101 +34,31 @@
|
||||
}
|
||||
|
||||
th {
|
||||
color: $gray-300;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
font-weight: 400;
|
||||
color: $gray-400;
|
||||
text-transform: capitalize;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem;
|
||||
min-width: 8rem;
|
||||
max-width: 20rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-bottom: 1px solid $white-10;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
--entry-colour: transparent;
|
||||
background-color: color-mix(in srgb, $gray-1300 96%, var(--entry-colour) 4%);
|
||||
box-shadow: inset 3px 0 var(--entry-colour);
|
||||
tr:nth-child(even) {
|
||||
background-color: $white-1;
|
||||
}
|
||||
|
||||
td[data-empty='true'] {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.rowNumber,
|
||||
.rowType {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.rowNumber {
|
||||
left: 0;
|
||||
width: 3.25rem;
|
||||
min-width: 3.25rem !important;
|
||||
color: $gray-400;
|
||||
text-align: right;
|
||||
width: 4.5rem;
|
||||
min-width: 4.5rem;
|
||||
}
|
||||
|
||||
.rowType {
|
||||
left: 3.25rem;
|
||||
width: 6.25rem;
|
||||
min-width: 6.25rem !important;
|
||||
color: $gray-400;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 1px 0 $white-10;
|
||||
}
|
||||
|
||||
thead .rowNumber,
|
||||
thead .rowType {
|
||||
z-index: 2;
|
||||
background-color: $gray-1350;
|
||||
}
|
||||
|
||||
.numericCell {
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.multilineCell {
|
||||
max-width: 30rem !important;
|
||||
overflow-wrap: anywhere;
|
||||
text-overflow: clip !important;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
.eventRow {
|
||||
.rowNumber {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
.groupRow {
|
||||
background-color: color-mix(in srgb, $gray-1300 88%, var(--entry-colour) 12%) !important;
|
||||
box-shadow: inset 4px 0 var(--entry-colour) !important;
|
||||
font-weight: 600;
|
||||
|
||||
td {
|
||||
min-height: 3.25rem;
|
||||
border-top: 0.75rem solid $gray-1350;
|
||||
}
|
||||
}
|
||||
|
||||
.milestoneRow {
|
||||
background-color: color-mix(in srgb, $gray-1300 93%, var(--entry-colour) 7%) !important;
|
||||
box-shadow: inset 3px 0 var(--entry-colour) !important;
|
||||
color: $gray-300;
|
||||
font-style: italic;
|
||||
width: 7rem;
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
+14
-126
@@ -1,11 +1,7 @@
|
||||
import type { CustomField, CustomFieldKey, SpreadsheetPreviewResponse } from 'ontime-types';
|
||||
import { isOntimeDelay, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import Button from '../../../../../../../common/components/buttons/Button';
|
||||
import Tag from '../../../../../../../common/components/tag/Tag';
|
||||
import { getRundownMetadata } from '../../../../../../../common/utils/rundownMetadata';
|
||||
import { getCellValue } from './previewTableUtils';
|
||||
|
||||
import style from './PreviewTable.module.scss';
|
||||
@@ -13,85 +9,14 @@ import style from './PreviewTable.module.scss';
|
||||
interface PreviewTableProps {
|
||||
preview: SpreadsheetPreviewResponse | null;
|
||||
columnLabels: string[];
|
||||
canRefresh: boolean;
|
||||
isLoadingMetadata: boolean;
|
||||
isRefreshing: boolean;
|
||||
needsPreviewRefresh: boolean;
|
||||
onRefresh: () => void;
|
||||
worksheetHeaders: string[];
|
||||
}
|
||||
|
||||
const priorityColumns = ['Title', 'Cue', 'Start', 'End', 'Duration'];
|
||||
const numericColumns = new Set(['Start', 'End', 'Duration', 'Time warning', 'Time danger']);
|
||||
const transparentColour = 'transparent';
|
||||
|
||||
type PreviewEntry = SpreadsheetPreviewResponse['rundown']['entries'][string];
|
||||
|
||||
function getEntryDisplay(entry: PreviewEntry, groupColour?: string) {
|
||||
if (isOntimeGroup(entry)) {
|
||||
return {
|
||||
rowClassName: style.groupRow,
|
||||
entryColour: entry.colour,
|
||||
entryType: 'Group',
|
||||
};
|
||||
}
|
||||
|
||||
const entryColour = groupColour ?? transparentColour;
|
||||
|
||||
if (isOntimeMilestone(entry)) {
|
||||
return {
|
||||
rowClassName: style.milestoneRow,
|
||||
entryColour,
|
||||
entryType: 'Milestone',
|
||||
};
|
||||
}
|
||||
|
||||
if (isOntimeDelay(entry)) {
|
||||
return {
|
||||
rowClassName: style.eventRow,
|
||||
entryColour,
|
||||
entryType: 'Delay',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
rowClassName: style.eventRow,
|
||||
entryColour,
|
||||
entryType: 'Event',
|
||||
};
|
||||
}
|
||||
|
||||
function getCellClassName(label: string, value: string) {
|
||||
if (value.includes('\n')) {
|
||||
return style.multilineCell;
|
||||
}
|
||||
|
||||
if (numericColumns.has(label)) {
|
||||
return style.numericCell;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getDisplayColumns(columnLabels: string[]) {
|
||||
return [...columnLabels].sort((left, right) => {
|
||||
const leftPriority = priorityColumns.indexOf(left);
|
||||
const rightPriority = priorityColumns.indexOf(right);
|
||||
return (
|
||||
(leftPriority === -1 ? priorityColumns.length : leftPriority) -
|
||||
(rightPriority === -1 ? priorityColumns.length : rightPriority)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export default function PreviewTable({
|
||||
preview,
|
||||
columnLabels,
|
||||
canRefresh,
|
||||
isLoadingMetadata,
|
||||
isRefreshing,
|
||||
needsPreviewRefresh,
|
||||
onRefresh,
|
||||
worksheetHeaders,
|
||||
}: PreviewTableProps) {
|
||||
const customFieldKeyByLabel = useMemo(() => {
|
||||
@@ -99,57 +24,33 @@ export default function PreviewTable({
|
||||
return new Map(Object.entries(preview.customFields).map(([fieldId, field]) => [field.label, fieldId]));
|
||||
}, [preview]);
|
||||
|
||||
const displayColumns = useMemo(() => getDisplayColumns(columnLabels), [columnLabels]);
|
||||
|
||||
const previewMetadata = useMemo(() => {
|
||||
if (!preview) return null;
|
||||
return getRundownMetadata(preview.rundown, null);
|
||||
}, [preview]);
|
||||
|
||||
if (!preview) {
|
||||
let emptyTitle = 'Preview not generated';
|
||||
let emptyContent = 'Select the fields you want to import, then click Preview import.';
|
||||
|
||||
if (isLoadingMetadata) {
|
||||
emptyTitle = 'Loading worksheet';
|
||||
emptyContent = 'Loading worksheet metadata...';
|
||||
} else if (worksheetHeaders.length === 0) {
|
||||
emptyTitle = 'No headers found';
|
||||
emptyContent =
|
||||
'No column headers detected in this worksheet. Try a different worksheet or ensure the first row contains column headers.';
|
||||
} else if (needsPreviewRefresh) {
|
||||
emptyTitle = 'Preview needs updating';
|
||||
emptyContent = 'Your column mapping changed. Preview the import again to update this table.';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.emptyState}>
|
||||
<div className={style.emptyMessage}>
|
||||
<div className={style.emptyTitle}>{emptyTitle}</div>
|
||||
<div className={style.emptyBody}>{emptyContent}</div>
|
||||
{needsPreviewRefresh && (
|
||||
<Button
|
||||
className={style.emptyAction}
|
||||
variant='primary'
|
||||
onClick={onRefresh}
|
||||
disabled={!canRefresh}
|
||||
loading={isRefreshing}
|
||||
>
|
||||
Refresh preview
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className={style.emptyTitle}>Preview not generated</div>
|
||||
<div className={style.emptyBody}>{emptyContent}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let eventIndex = 0;
|
||||
|
||||
return (
|
||||
<table className={style.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={style.rowNumber}>#</th>
|
||||
<th className={style.rowType}>Type</th>
|
||||
{displayColumns.map((label, index) => (
|
||||
{columnLabels.map((label, index) => (
|
||||
<th key={`${label}-${index}`}>{label}</th>
|
||||
))}
|
||||
</tr>
|
||||
@@ -158,29 +59,16 @@ export default function PreviewTable({
|
||||
{preview.rundown.flatOrder.map((entryId) => {
|
||||
const entry = preview.rundown.entries[entryId];
|
||||
const isEvent = isOntimeEvent(entry);
|
||||
const entryMetadata = previewMetadata?.[entryId];
|
||||
const { rowClassName, entryColour, entryType } = getEntryDisplay(entry, entryMetadata?.groupColour);
|
||||
if (isEvent) eventIndex++;
|
||||
const hasType = isEvent || isOntimeGroup(entry) || isOntimeMilestone(entry);
|
||||
|
||||
return (
|
||||
<tr key={entryId} className={rowClassName} style={{ '--entry-colour': entryColour } as CSSProperties}>
|
||||
<td className={style.rowNumber}>{isEvent ? entryMetadata?.eventIndex : ''}</td>
|
||||
<td className={style.rowType}>
|
||||
<Tag>{entryType}</Tag>
|
||||
</td>
|
||||
{displayColumns.map((label, colIndex) => {
|
||||
const value = getCellValue(label, entry, customFieldKeyByLabel);
|
||||
const cellClassName = getCellClassName(label, value);
|
||||
return (
|
||||
<td
|
||||
key={`${entryId}-${colIndex}`}
|
||||
className={cellClassName}
|
||||
data-empty={value === ''}
|
||||
title={value || undefined}
|
||||
>
|
||||
{value}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<tr key={entryId}>
|
||||
<td className={style.rowNumber}>{isEvent ? eventIndex : ''}</td>
|
||||
<td className={style.rowType}>{hasType ? entry.type : ''}</td>
|
||||
{columnLabels.map((label, colIndex) => (
|
||||
<td key={`${entryId}-${colIndex}`}>{getCellValue(label, entry, customFieldKeyByLabel)}</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
+11
-36
@@ -5,8 +5,7 @@ import type {
|
||||
SpreadsheetPreviewResponse,
|
||||
SpreadsheetWorksheetMetadata,
|
||||
} from 'ontime-types';
|
||||
import { isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { millisToString, removeTrailingZero } from 'ontime-utils';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
|
||||
import { useFieldArray, useForm } from 'react-hook-form';
|
||||
|
||||
@@ -33,7 +32,7 @@ type ImportAction =
|
||||
| { type: 'previewSuccess'; preview: SpreadsheetPreviewResponse }
|
||||
| { type: 'applySuccess' }
|
||||
| { type: 'exportSuccess' }
|
||||
| { type: 'clearPreview'; error?: string; needsRefresh?: boolean }
|
||||
| { type: 'clearPreview'; error?: string }
|
||||
| { type: 'failure'; error: string }
|
||||
| { type: 'reset' };
|
||||
|
||||
@@ -41,14 +40,12 @@ type ImportState = {
|
||||
loading: '' | 'preview' | 'apply' | 'export';
|
||||
error: string;
|
||||
preview: SpreadsheetPreviewResponse | null;
|
||||
needsPreviewRefresh: boolean;
|
||||
};
|
||||
|
||||
const initialImportState: ImportState = {
|
||||
loading: '',
|
||||
error: '',
|
||||
preview: null,
|
||||
needsPreviewRefresh: false,
|
||||
};
|
||||
|
||||
function importReducer(state: ImportState, action: ImportAction): ImportState {
|
||||
@@ -60,15 +57,15 @@ function importReducer(state: ImportState, action: ImportAction): ImportState {
|
||||
case 'startExport':
|
||||
return { ...state, loading: 'export', error: '' };
|
||||
case 'previewSuccess':
|
||||
return { loading: '', error: '', preview: action.preview, needsPreviewRefresh: false };
|
||||
return { loading: '', error: '', preview: action.preview };
|
||||
case 'applySuccess':
|
||||
case 'exportSuccess':
|
||||
return { ...state, loading: '' };
|
||||
case 'clearPreview':
|
||||
return { ...state, error: action.error ?? '', preview: null, needsPreviewRefresh: action.needsRefresh ?? false };
|
||||
return { ...state, error: action.error ?? '', preview: null };
|
||||
case 'failure': {
|
||||
if (state.loading === 'preview') {
|
||||
return { loading: '', error: action.error, preview: null, needsPreviewRefresh: false };
|
||||
return { loading: '', error: action.error, preview: null };
|
||||
}
|
||||
return { ...state, loading: '', error: action.error };
|
||||
}
|
||||
@@ -224,7 +221,7 @@ export function useSheetImportForm({
|
||||
const sub = watch(() => {
|
||||
if (!previewRef.current) return;
|
||||
previewRef.current = null;
|
||||
dispatch({ type: 'clearPreview', needsRefresh: true });
|
||||
dispatch({ type: 'clearPreview' });
|
||||
});
|
||||
return () => sub.unsubscribe();
|
||||
}, [watch]);
|
||||
@@ -300,37 +297,15 @@ export function useSheetImportForm({
|
||||
}, [append]);
|
||||
|
||||
const toolbarStatus = (() => {
|
||||
const warningText = warningCount > 0 ? ` | warnings: ${warningCount}` : '';
|
||||
|
||||
if (!state.preview) {
|
||||
return {
|
||||
entries: '–',
|
||||
groups: '–',
|
||||
milestones: '–',
|
||||
start: '–',
|
||||
end: '–',
|
||||
duration: '–',
|
||||
warnings: warningCount,
|
||||
};
|
||||
return `entries: – | start: – | end: – | duration: –${warningText}`;
|
||||
}
|
||||
|
||||
const { entries, flatOrder } = state.preview.rundown;
|
||||
const { flatOrder } = state.preview.rundown;
|
||||
const { start, end, duration } = state.preview.summary;
|
||||
let groups = 0;
|
||||
let milestones = 0;
|
||||
for (const entryId of flatOrder) {
|
||||
const entry = entries[entryId];
|
||||
if (isOntimeGroup(entry)) groups++;
|
||||
else if (isOntimeMilestone(entry)) milestones++;
|
||||
}
|
||||
|
||||
return {
|
||||
entries: flatOrder.length,
|
||||
groups,
|
||||
milestones,
|
||||
start: removeTrailingZero(millisToString(start)),
|
||||
end: removeTrailingZero(millisToString(end)),
|
||||
duration: formatDuration(duration),
|
||||
warnings: warningCount,
|
||||
};
|
||||
return `entries: ${flatOrder.length} | start: ${millisToString(start)} | end: ${millisToString(end)} | duration: ${formatDuration(duration)}${warningText}`;
|
||||
})();
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { TimerPhase, TimerType } from 'ontime-types';
|
||||
import { IoArrowDown, IoArrowUp, IoBan, IoFolderOutline, IoTime } from 'react-icons/io5';
|
||||
import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
|
||||
import { LuArrowDownToLine } from 'react-icons/lu';
|
||||
|
||||
import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
|
||||
import Tooltip from '../../../common/components/tooltip/Tooltip';
|
||||
import useViewSettings from '../../../common/hooks-query/useViewSettings';
|
||||
import { useGroupTimer, useMessagePreview } from '../../../common/hooks/useSocket';
|
||||
import { useMessagePreview } from '../../../common/hooks/useSocket';
|
||||
import { handleLinks } from '../../../common/utils/linkUtils';
|
||||
import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
|
||||
import PipRoot from '../../../views/editor/pip-timer/PipRoot';
|
||||
@@ -22,7 +22,6 @@ const secondarySourceLabels: Record<string, string> = {
|
||||
export default function TimerPreview() {
|
||||
const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
|
||||
const { data } = useViewSettings();
|
||||
const isGroupTimerActive = useGroupTimer() !== null;
|
||||
|
||||
const main = (() => {
|
||||
if (showTimerMessage) return 'Message';
|
||||
@@ -106,14 +105,6 @@ export default function TimerPreview() {
|
||||
>
|
||||
<LuArrowDownToLine />
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
text={`Timer views are showing the ${isGroupTimerActive ? 'shared group timer' : 'event timer'}`}
|
||||
render={<span />}
|
||||
className={style.statusIcon}
|
||||
data-active={isGroupTimerActive}
|
||||
>
|
||||
<IoFolderOutline />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -22,10 +22,13 @@ export default function CuesheetEntryEditor({ entryId, rundown }: CuesheetEntryE
|
||||
return event ?? null;
|
||||
}, [entryId, rundown.entries, rundown.order.length]);
|
||||
|
||||
if (isOntimeEvent(entry)) {
|
||||
// the cuesheet always edits a single entry
|
||||
const events = useMemo(() => (isOntimeEvent(entry) ? [entry] : null), [entry]);
|
||||
|
||||
if (events) {
|
||||
return (
|
||||
<div className={style.entryEditor} data-testid='editor-container'>
|
||||
<EventEditor event={entry} />
|
||||
<EventEditor events={events} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,6 +75,26 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
// a label with an action aligned to the end of the row
|
||||
.labelRow {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.clearAction {
|
||||
font-size: $aux-text-size;
|
||||
color: $blue-400;
|
||||
margin-bottom: $element-inner-spacing; // match the label
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.splitTwo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -1,14 +1,19 @@
|
||||
import { OntimeEvent } from 'ontime-types';
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import * as Editor from '../../../common/components/editor-utils/EditorUtils';
|
||||
import Info from '../../../common/components/info/Info';
|
||||
import AppLink from '../../../common/components/link/app-link/AppLink';
|
||||
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
|
||||
import useCustomFields from '../../../common/hooks-query/useCustomFields';
|
||||
import EventEditorBatchSchedule from './composite/EventEditorBatchSchedule';
|
||||
import EntryEditorCustomFields from './composite/EventEditorCustomFields';
|
||||
import EventEditorSchedule from './composite/EventEditorSchedule';
|
||||
import EventEditorTimes from './composite/EventEditorTimes';
|
||||
import EventEditorTitles from './composite/EventEditorTitles';
|
||||
import EventEditorTriggers from './composite/EventEditorTriggers';
|
||||
import { mixedPlaceholder } from './entryEditor.utils';
|
||||
import { mergeEvents, resolveConflict } from './mergeEvents';
|
||||
|
||||
import style from './EntryEditor.module.scss';
|
||||
|
||||
@@ -16,66 +21,115 @@ import style from './EntryEditor.module.scss';
|
||||
export type EventEditorUpdateFields = 'cue' | 'title' | 'note' | 'colour' | string;
|
||||
|
||||
interface EventEditorProps {
|
||||
event: OntimeEvent;
|
||||
/** events being edited, editing several events at once shows a merged view of their values */
|
||||
events: OntimeEvent[];
|
||||
}
|
||||
|
||||
export default function EventEditor({ event }: EventEditorProps) {
|
||||
export default function EventEditor({ events }: EventEditorProps) {
|
||||
const { data: customFields } = useCustomFields();
|
||||
const { updateEntry } = useEntryActionsContext();
|
||||
const { updateEntry, batchUpdateEvents } = useEntryActionsContext();
|
||||
|
||||
const isEditor = window.location.pathname.includes('editor');
|
||||
|
||||
const ids = useMemo(() => events.map((event) => event.id), [events]);
|
||||
const merged = useMemo(() => mergeEvents(events), [events]);
|
||||
|
||||
// when editing a single event, we can show the values which are unique to it
|
||||
const singleEvent = events.length === 1 ? events[0] : null;
|
||||
|
||||
/**
|
||||
* Applies a patch to every event being edited
|
||||
*/
|
||||
const submit = useCallback(
|
||||
(patch: Partial<OntimeEvent>) => {
|
||||
if (ids.length === 1) {
|
||||
updateEntry({ id: ids[0], ...patch });
|
||||
return;
|
||||
}
|
||||
batchUpdateEvents(patch, ids);
|
||||
},
|
||||
[batchUpdateEvents, ids, updateEntry],
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(field: EventEditorUpdateFields, value: string) => {
|
||||
if (field.startsWith('custom-')) {
|
||||
const fieldLabel = field.split('custom-')[1];
|
||||
updateEntry({ id: event.id, custom: { [fieldLabel]: value } });
|
||||
submit({ custom: { [fieldLabel]: value } });
|
||||
} else {
|
||||
updateEntry({ id: event.id, [field]: value });
|
||||
submit({ [field]: value });
|
||||
}
|
||||
},
|
||||
[event.id, updateEntry],
|
||||
[submit],
|
||||
);
|
||||
|
||||
// inputs keep local state, we remount them when the edited entries change
|
||||
const editorKey = ids.join();
|
||||
|
||||
return (
|
||||
<div className={style.content}>
|
||||
{singleEvent ? (
|
||||
<EventEditorSchedule
|
||||
key={`${editorKey}-schedule`}
|
||||
eventId={singleEvent.id}
|
||||
timeStart={singleEvent.timeStart}
|
||||
timeEnd={singleEvent.timeEnd}
|
||||
duration={singleEvent.duration}
|
||||
timeStrategy={singleEvent.timeStrategy}
|
||||
linkStart={singleEvent.linkStart}
|
||||
delay={singleEvent.delay}
|
||||
/>
|
||||
) : (
|
||||
<EventEditorBatchSchedule
|
||||
key={`${editorKey}-schedule`}
|
||||
duration={resolveConflict(merged.duration)}
|
||||
submit={submit}
|
||||
/>
|
||||
)}
|
||||
<EventEditorTimes
|
||||
key={`${event.id}-times`}
|
||||
eventId={event.id}
|
||||
timeStart={event.timeStart}
|
||||
timeEnd={event.timeEnd}
|
||||
duration={event.duration}
|
||||
timeStrategy={event.timeStrategy}
|
||||
linkStart={event.linkStart}
|
||||
countToEnd={event.countToEnd}
|
||||
delay={event.delay}
|
||||
endAction={event.endAction}
|
||||
timerType={event.timerType}
|
||||
timeWarning={event.timeWarning}
|
||||
timeDanger={event.timeDanger}
|
||||
key={`${editorKey}-times`}
|
||||
countToEnd={resolveConflict(merged.countToEnd)}
|
||||
endAction={resolveConflict(merged.endAction)}
|
||||
timerType={resolveConflict(merged.timerType)}
|
||||
timeWarning={resolveConflict(merged.timeWarning)}
|
||||
timeDanger={resolveConflict(merged.timeDanger)}
|
||||
submit={submit}
|
||||
/>
|
||||
<EventEditorTitles
|
||||
key={`${event.id}-titles`}
|
||||
eventId={event.id}
|
||||
cue={event.cue}
|
||||
flag={event.flag}
|
||||
title={event.title}
|
||||
note={event.note}
|
||||
colour={event.colour}
|
||||
key={`${editorKey}-titles`}
|
||||
eventId={singleEvent?.id ?? null}
|
||||
eventCount={events.length}
|
||||
cue={singleEvent?.cue ?? ''}
|
||||
flag={resolveConflict(merged.flag)}
|
||||
title={resolveConflict(merged.title)}
|
||||
note={resolveConflict(merged.note)}
|
||||
colour={resolveConflict(merged.colour)}
|
||||
submit={submit}
|
||||
/>
|
||||
<div className={style.column}>
|
||||
<Editor.Title>
|
||||
Custom Fields
|
||||
{isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
|
||||
</Editor.Title>
|
||||
<EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={event} />
|
||||
<EntryEditorCustomFields
|
||||
key={`${editorKey}-custom`}
|
||||
fields={customFields}
|
||||
custom={merged.custom}
|
||||
idKey={editorKey}
|
||||
mixedPlaceholder={mixedPlaceholder}
|
||||
handleSubmit={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
<div className={style.column}>
|
||||
<Editor.Title>
|
||||
Automations
|
||||
{isEditor && <AppLink search='settings=automation'>Manage Automations</AppLink>}
|
||||
{isEditor && singleEvent && <AppLink search='settings=automation'>Manage Automations</AppLink>}
|
||||
</Editor.Title>
|
||||
<EventEditorTriggers triggers={event.triggers} eventId={event.id} />
|
||||
{singleEvent ? (
|
||||
<EventEditorTriggers triggers={singleEvent.triggers} eventId={singleEvent.id} />
|
||||
) : (
|
||||
<Info>Automations are not available when editing multiple events</Info>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,8 +5,6 @@ import { useCallback } from 'react';
|
||||
import * as Editor from '../../../common/components/editor-utils/EditorUtils';
|
||||
import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
|
||||
import AppLink from '../../../common/components/link/app-link/AppLink';
|
||||
import Switch from '../../../common/components/switch/Switch';
|
||||
import Tooltip from '../../../common/components/tooltip/Tooltip';
|
||||
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
|
||||
import useCustomFields from '../../../common/hooks-query/useCustomFields';
|
||||
import { getOffsetState } from '../../../common/utils/offset';
|
||||
@@ -97,22 +95,6 @@ export default function GroupEditor({ group }: GroupEditorProps) {
|
||||
submitHandler={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Tooltip
|
||||
text='Timer views count the scheduled duration of the whole group instead of the running event'
|
||||
render={<Editor.Label htmlFor='useGroupTimer' />}
|
||||
>
|
||||
Group timer
|
||||
</Tooltip>
|
||||
<Editor.Label className={style.switchLabel}>
|
||||
<Switch
|
||||
id='useGroupTimer'
|
||||
checked={group.useGroupTimer}
|
||||
onCheckedChange={(value) => updateEntry({ id: group.id, useGroupTimer: value })}
|
||||
/>
|
||||
{group.useGroupTimer ? 'On' : 'Off'}
|
||||
</Editor.Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.column}>
|
||||
@@ -130,7 +112,12 @@ export default function GroupEditor({ group }: GroupEditorProps) {
|
||||
Custom Fields
|
||||
{isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
|
||||
</Editor.Title>
|
||||
<EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={group} />
|
||||
<EntryEditorCustomFields
|
||||
fields={customFields}
|
||||
handleSubmit={handleSubmit}
|
||||
custom={group.custom}
|
||||
idKey={group.id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -69,7 +69,12 @@ export default function MilestoneEditor({ milestone }: MilestoneEditorProps) {
|
||||
Custom Fields
|
||||
{isEditor && <AppLink search='settings=manage__custom'>Manage Custom Fields</AppLink>}
|
||||
</Editor.Title>
|
||||
<EntryEditorCustomFields fields={customFields} handleSubmit={handleSubmit} entry={milestone} />
|
||||
<EntryEditorCustomFields
|
||||
fields={customFields}
|
||||
handleSubmit={handleSubmit}
|
||||
custom={milestone.custom}
|
||||
idKey={milestone.id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { OntimeEntry, OntimeEvent, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import useRundown from '../../../common/hooks-query/useRundown';
|
||||
@@ -15,6 +15,25 @@ export default function RundownEntryEditor() {
|
||||
const selectedEvents = useEventSelection((state) => state.selectedEvents);
|
||||
const { data } = useRundown();
|
||||
|
||||
/**
|
||||
* Events in the current selection
|
||||
* Only events can be multi selected, groups and milestones are always selected on their own
|
||||
*/
|
||||
const events = useMemo<OntimeEvent[]>(() => {
|
||||
if (data.order.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const selection: OntimeEvent[] = [];
|
||||
selectedEvents.forEach((entryId) => {
|
||||
const entry = data.entries[entryId];
|
||||
if (isOntimeEvent(entry)) {
|
||||
selection.push(entry);
|
||||
}
|
||||
});
|
||||
return selection;
|
||||
}, [data.order.length, data.entries, selectedEvents]);
|
||||
|
||||
const entry = useMemo<OntimeEntry | null>(() => {
|
||||
if (data.order.length === 0) {
|
||||
return null;
|
||||
@@ -29,19 +48,20 @@ export default function RundownEntryEditor() {
|
||||
return event ?? null;
|
||||
}, [data.order.length, data.entries, selectedEvents]);
|
||||
|
||||
if (!entry) {
|
||||
return <EventEditorEmpty />;
|
||||
}
|
||||
|
||||
if (isOntimeEvent(entry)) {
|
||||
if (events.length > 0) {
|
||||
const singleEvent = events.length === 1 ? events[0] : null;
|
||||
return (
|
||||
<div className={style.rundownEditor} data-testid='editor-container'>
|
||||
<EventEditor event={entry} />
|
||||
<EventEditorFooter id={entry.id} cue={entry.cue} />
|
||||
<EventEditor events={events} />
|
||||
{singleEvent && <EventEditorFooter id={singleEvent.id} cue={singleEvent.cue} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!entry) {
|
||||
return <EventEditorEmpty />;
|
||||
}
|
||||
|
||||
if (isOntimeMilestone(entry)) {
|
||||
return (
|
||||
<div className={style.rundownEditor} data-testid='editor-container'>
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
import { EndAction, OntimeEvent, SupportedEntry, TimerType } from 'ontime-types';
|
||||
|
||||
import { conflict, isConflict, mergeEvents, resolveConflict } from '../mergeEvents';
|
||||
|
||||
function makeEvent(patch: Partial<OntimeEvent>): OntimeEvent {
|
||||
return {
|
||||
type: SupportedEntry.Event,
|
||||
id: 'event',
|
||||
title: 'title',
|
||||
note: 'note',
|
||||
colour: '#FFCC78',
|
||||
flag: false,
|
||||
duration: 600000,
|
||||
endAction: EndAction.None,
|
||||
countToEnd: false,
|
||||
timerType: TimerType.CountDown,
|
||||
timeWarning: 120000,
|
||||
timeDanger: 60000,
|
||||
linkStart: true,
|
||||
custom: {},
|
||||
...patch,
|
||||
} as OntimeEvent;
|
||||
}
|
||||
|
||||
describe('mergeEvents()', () => {
|
||||
it('returns the values of a single event', () => {
|
||||
const event = makeEvent({ id: '1', title: 'only event' });
|
||||
|
||||
expect(mergeEvents([event])).toStrictEqual({
|
||||
title: 'only event',
|
||||
note: 'note',
|
||||
colour: '#FFCC78',
|
||||
flag: false,
|
||||
duration: 600000,
|
||||
endAction: EndAction.None,
|
||||
countToEnd: false,
|
||||
timerType: TimerType.CountDown,
|
||||
timeWarning: 120000,
|
||||
timeDanger: 60000,
|
||||
linkStart: true,
|
||||
custom: {},
|
||||
});
|
||||
});
|
||||
|
||||
it('keeps values which are shared by all events', () => {
|
||||
const merged = mergeEvents([makeEvent({ id: '1' }), makeEvent({ id: '2' }), makeEvent({ id: '3' })]);
|
||||
|
||||
expect(merged.title).toBe('title');
|
||||
expect(merged.colour).toBe('#FFCC78');
|
||||
expect(merged.timerType).toBe(TimerType.CountDown);
|
||||
expect(merged.duration).toBe(600000);
|
||||
});
|
||||
|
||||
it('marks only the fields which differ as conflicting', () => {
|
||||
const merged = mergeEvents([makeEvent({ id: '1', title: 'first' }), makeEvent({ id: '2', title: 'second' })]);
|
||||
|
||||
expect(merged.title).toBe(conflict);
|
||||
expect(merged.note).toBe('note');
|
||||
expect(merged.colour).toBe('#FFCC78');
|
||||
expect(merged.flag).toBe(false);
|
||||
});
|
||||
|
||||
it('handles boolean and numeric fields', () => {
|
||||
const merged = mergeEvents([
|
||||
makeEvent({ id: '1', flag: true, timeWarning: 1000, duration: 1000 }),
|
||||
makeEvent({ id: '2', flag: false, timeWarning: 1000, duration: 2000 }),
|
||||
]);
|
||||
|
||||
expect(merged.flag).toBe(conflict);
|
||||
expect(merged.timeWarning).toBe(1000);
|
||||
expect(merged.duration).toBe(conflict);
|
||||
});
|
||||
|
||||
describe('custom fields', () => {
|
||||
it('merges values under the same key', () => {
|
||||
const merged = mergeEvents([
|
||||
makeEvent({ id: '1', custom: { lx: 'same', sound: 'a' } }),
|
||||
makeEvent({ id: '2', custom: { lx: 'same', sound: 'b' } }),
|
||||
]);
|
||||
|
||||
expect(merged.custom).toStrictEqual({ lx: 'same', sound: conflict });
|
||||
});
|
||||
|
||||
it('treats a missing key as empty', () => {
|
||||
const merged = mergeEvents([makeEvent({ id: '1', custom: { lx: 'value' } }), makeEvent({ id: '2', custom: {} })]);
|
||||
|
||||
expect(merged.custom).toStrictEqual({ lx: conflict });
|
||||
});
|
||||
|
||||
it('collects keys from all events', () => {
|
||||
const merged = mergeEvents([
|
||||
makeEvent({ id: '1', custom: { lx: '' } }),
|
||||
makeEvent({ id: '2', custom: { sound: 'value' } }),
|
||||
]);
|
||||
|
||||
// lx is empty in both events, sound is only filled in one of them
|
||||
expect(merged.custom).toStrictEqual({ lx: '', sound: conflict });
|
||||
});
|
||||
|
||||
it('does not report a key which is absent from every event', () => {
|
||||
const merged = mergeEvents([makeEvent({ id: '1', custom: {} }), makeEvent({ id: '2', custom: {} })]);
|
||||
|
||||
expect(merged.custom).toStrictEqual({});
|
||||
// an absent key is distinguishable from a conflicting one
|
||||
expect(merged.custom.lx).toBeUndefined();
|
||||
expect(isConflict(merged.custom.lx)).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('resolveConflict()', () => {
|
||||
it('passes known values through', () => {
|
||||
expect(resolveConflict('value')).toBe('value');
|
||||
expect(resolveConflict(0)).toBe(0);
|
||||
expect(resolveConflict(false)).toBe(false);
|
||||
expect(resolveConflict('')).toBe('');
|
||||
});
|
||||
|
||||
it('resolves a conflict to undefined', () => {
|
||||
expect(resolveConflict(conflict)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,48 @@
|
||||
import { OntimeEvent } from 'ontime-types';
|
||||
import { MILLIS_PER_SECOND, dayInMs, parseUserTime } from 'ontime-utils';
|
||||
import { memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
|
||||
import { mixedPlaceholder } from '../entryEditor.utils';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EventEditorBatchScheduleProps {
|
||||
/** undefined when the events do not share a duration */
|
||||
duration: number | undefined;
|
||||
submit: (patch: Partial<OntimeEvent>) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule fields which can be applied to several events at once
|
||||
* Start and end times are absolute points in time: giving several events the same
|
||||
* value would collapse their durations, so only the duration is offered here
|
||||
* The server infers the duration lock and recalculates the rundown once for the whole batch
|
||||
*/
|
||||
export default memo(EventEditorBatchSchedule);
|
||||
function EventEditorBatchSchedule({ duration, submit }: EventEditorBatchScheduleProps) {
|
||||
const handleSubmit = (_field: 'duration', value: string) => {
|
||||
// durations cannot exceed a day
|
||||
submit({ duration: Math.min(parseUserTime(value), dayInMs - MILLIS_PER_SECOND) });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.column}>
|
||||
<Editor.Title>Event schedule</Editor.Title>
|
||||
<div className={style.splitTwo}>
|
||||
<div>
|
||||
<Editor.Label htmlFor='duration'>Duration</Editor.Label>
|
||||
<TimeInput
|
||||
id='duration'
|
||||
name='duration'
|
||||
submitHandler={handleSubmit}
|
||||
time={duration}
|
||||
placeholder={duration === undefined ? mixedPlaceholder : 'Duration'}
|
||||
align='left'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+17
-7
@@ -1,8 +1,9 @@
|
||||
import { CustomFields, OntimeEvent, OntimeGroup, OntimeMilestone } from 'ontime-types';
|
||||
import { CustomFields, EntryCustomFields } from 'ontime-types';
|
||||
import { CSSProperties, Fragment } from 'react';
|
||||
|
||||
import { getAccessibleColour } from '../../../../common/utils/styleUtils';
|
||||
import { EventEditorUpdateFields } from '../EventEditor';
|
||||
import { MergedCustomFields, resolveConflict } from '../mergeEvents';
|
||||
import EventEditorImage from './EventEditorImage';
|
||||
import EventTextArea from './EventTextArea';
|
||||
import EntryEditorTextInput from './EventTextInput';
|
||||
@@ -11,21 +12,29 @@ import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EntryEditorCustomFieldsProps {
|
||||
fields: CustomFields;
|
||||
entry: OntimeEvent | OntimeGroup | OntimeMilestone;
|
||||
/** values of the entries being edited, undefined when the entries do not agree */
|
||||
custom: EntryCustomFields | MergedCustomFields;
|
||||
/** used to generate stable keys for the fields */
|
||||
idKey: string;
|
||||
mixedPlaceholder?: string;
|
||||
handleSubmit: (field: EventEditorUpdateFields, value: string) => void;
|
||||
}
|
||||
|
||||
export default function EntryEditorCustomFields({
|
||||
fields: customFields,
|
||||
custom,
|
||||
idKey,
|
||||
mixedPlaceholder,
|
||||
handleSubmit,
|
||||
entry,
|
||||
}: EntryEditorCustomFieldsProps) {
|
||||
return (
|
||||
<Fragment>
|
||||
{Object.keys(customFields).map((fieldKey) => {
|
||||
const key = `${entry.id}-${fieldKey}`;
|
||||
const key = `${idKey}-${fieldKey}`;
|
||||
const fieldName = `custom-${fieldKey}`;
|
||||
const initialValue = entry.custom[fieldKey] ?? '';
|
||||
// a key which is absent from the merged view is not present in any of the entries
|
||||
const initialValue = resolveConflict(custom[fieldKey] ?? '');
|
||||
const placeholder = initialValue === undefined ? mixedPlaceholder : undefined;
|
||||
const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
|
||||
const labelText = customFields[fieldKey].label;
|
||||
|
||||
@@ -36,6 +45,7 @@ export default function EntryEditorCustomFields({
|
||||
field={fieldName}
|
||||
label={labelText}
|
||||
initialValue={initialValue}
|
||||
placeholder={placeholder}
|
||||
submitHandler={handleSubmit}
|
||||
className={style.decorated}
|
||||
style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
|
||||
@@ -51,13 +61,13 @@ export default function EntryEditorCustomFields({
|
||||
field={fieldName}
|
||||
label={labelText}
|
||||
initialValue={initialValue}
|
||||
placeholder='Paste image URL'
|
||||
placeholder={placeholder ?? 'Paste image URL'}
|
||||
submitHandler={handleSubmit}
|
||||
className={style.decorated}
|
||||
maxLength={255}
|
||||
style={{ '--decorator-bg': backgroundColor, '--decorator-color': color } as CSSProperties}
|
||||
/>
|
||||
<EventEditorImage src={initialValue} />
|
||||
<EventEditorImage src={initialValue ?? ''} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { TimeStrategy } from 'ontime-types';
|
||||
import { memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import { millisToDelayString } from '../../../../common/utils/dateConfig';
|
||||
import { formatTime, normaliseWallClock } from '../../../../common/utils/time';
|
||||
import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EventEditorScheduleProps {
|
||||
eventId: string;
|
||||
timeStart: number;
|
||||
timeEnd: number;
|
||||
duration: number;
|
||||
timeStrategy: TimeStrategy;
|
||||
linkStart: boolean;
|
||||
delay: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule of a single event
|
||||
* Schedule values cascade through the rundown, so they are not editable across a selection
|
||||
*/
|
||||
export default memo(EventEditorSchedule);
|
||||
function EventEditorSchedule({
|
||||
eventId,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
duration,
|
||||
timeStrategy,
|
||||
linkStart,
|
||||
delay,
|
||||
}: EventEditorScheduleProps) {
|
||||
const hasDelay = delay !== 0;
|
||||
const delayedStart = normaliseWallClock(timeStart + delay);
|
||||
const delayedEnd = normaliseWallClock(timeEnd + delay);
|
||||
const delayLabel = hasDelay
|
||||
? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(delayedStart)} → ${formatTime(delayedEnd)}`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div className={style.column}>
|
||||
<Editor.Title>Event schedule</Editor.Title>
|
||||
<div>
|
||||
<div className={style.inline}>
|
||||
<TimeInputFlow
|
||||
eventId={eventId}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
timeStrategy={timeStrategy}
|
||||
linkStart={linkStart}
|
||||
delay={delay}
|
||||
showLabels
|
||||
/>
|
||||
</div>
|
||||
<div className={style.delayLabel}>{delayLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EndAction, TimeStrategy, TimerType } from 'ontime-types';
|
||||
import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
|
||||
import { parseUserTime } from 'ontime-utils';
|
||||
import { memo } from 'react';
|
||||
import { IoInformationCircle } from 'react-icons/io5';
|
||||
@@ -8,103 +8,47 @@ import TimeInput from '../../../../common/components/input/time-input/TimeInput'
|
||||
import Select from '../../../../common/components/select/Select';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import Tooltip from '../../../../common/components/tooltip/Tooltip';
|
||||
import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
|
||||
import { millisToDelayString } from '../../../../common/utils/dateConfig';
|
||||
import { formatTime, normaliseWallClock } from '../../../../common/utils/time';
|
||||
import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
|
||||
import { mixedPlaceholder, switchLabel } from '../entryEditor.utils';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EventEditorTimesProps {
|
||||
eventId: string;
|
||||
timeStart: number;
|
||||
timeEnd: number;
|
||||
duration: number;
|
||||
timeStrategy: TimeStrategy;
|
||||
linkStart: boolean;
|
||||
countToEnd: boolean;
|
||||
delay: number;
|
||||
endAction: EndAction;
|
||||
timerType: TimerType;
|
||||
timeWarning: number;
|
||||
timeDanger: number;
|
||||
countToEnd: boolean | undefined;
|
||||
endAction: EndAction | undefined;
|
||||
timerType: TimerType | undefined;
|
||||
timeWarning: number | undefined;
|
||||
timeDanger: number | undefined;
|
||||
submit: (patch: Partial<OntimeEvent>) => void;
|
||||
}
|
||||
|
||||
type HandledActions = 'countToEnd' | 'timerType' | 'endAction' | 'timeWarning' | 'timeDanger';
|
||||
type TimeFields = 'timeWarning' | 'timeDanger';
|
||||
|
||||
export default memo(EventEditorTimes);
|
||||
function EventEditorTimes({
|
||||
eventId,
|
||||
timeStart,
|
||||
timeEnd,
|
||||
duration,
|
||||
timeStrategy,
|
||||
linkStart,
|
||||
countToEnd,
|
||||
delay,
|
||||
endAction,
|
||||
timerType,
|
||||
timeWarning,
|
||||
timeDanger,
|
||||
submit,
|
||||
}: EventEditorTimesProps) {
|
||||
const { updateEntry } = useEntryActionsContext();
|
||||
|
||||
const handleSubmit = (field: HandledActions, value: string | boolean) => {
|
||||
if (field === 'countToEnd') {
|
||||
updateEntry({ id: eventId, countToEnd: value as boolean });
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'timeWarning' || field === 'timeDanger') {
|
||||
const newTime = parseUserTime(value as string);
|
||||
updateEntry({ id: eventId, [field]: newTime });
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'timerType' || field === 'endAction') {
|
||||
updateEntry({ id: eventId, [field]: value });
|
||||
return;
|
||||
}
|
||||
const handleTimeSubmit = (field: TimeFields, value: string) => {
|
||||
submit({ [field]: parseUserTime(value) });
|
||||
};
|
||||
|
||||
const hasDelay = delay !== 0;
|
||||
const delayedStart = normaliseWallClock(timeStart + delay);
|
||||
const delayedEnd = normaliseWallClock(timeEnd + delay);
|
||||
const delayLabel = hasDelay
|
||||
? `Event is ${millisToDelayString(delay, 'expanded')}. New schedule ${formatTime(delayedStart)} → ${formatTime(delayedEnd)}`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={style.column}>
|
||||
<Editor.Title>Event schedule</Editor.Title>
|
||||
<div>
|
||||
<div className={style.inline}>
|
||||
<TimeInputFlow
|
||||
eventId={eventId}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
timeStrategy={timeStrategy}
|
||||
linkStart={linkStart}
|
||||
delay={delay}
|
||||
showLabels
|
||||
/>
|
||||
</div>
|
||||
<div className={style.delayLabel}>{delayLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style.column}>
|
||||
<Editor.Title>Event Behaviour</Editor.Title>
|
||||
<div className={style.splitTwo}>
|
||||
<div>
|
||||
<Editor.Label htmlFor='endAction'>End Action</Editor.Label>
|
||||
<Select
|
||||
value={endAction}
|
||||
value={endAction ?? null}
|
||||
placeholder={mixedPlaceholder}
|
||||
onValueChange={(value: EndAction | null) => {
|
||||
if (value === null) return;
|
||||
handleSubmit('endAction', value);
|
||||
submit({ endAction: value });
|
||||
}}
|
||||
options={[
|
||||
{ value: EndAction.None, label: 'None' },
|
||||
@@ -118,10 +62,11 @@ function EventEditorTimes({
|
||||
<Editor.Label className={style.switchLabel}>
|
||||
<Switch
|
||||
id='countToEnd'
|
||||
checked={countToEnd}
|
||||
onCheckedChange={(value) => handleSubmit('countToEnd', value)}
|
||||
checked={countToEnd ?? false}
|
||||
mixed={countToEnd === undefined}
|
||||
onCheckedChange={(value) => submit({ countToEnd: value })}
|
||||
/>
|
||||
{countToEnd ? 'On' : 'Off'}
|
||||
{switchLabel(countToEnd)}
|
||||
</Editor.Label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,10 +86,11 @@ function EventEditorTimes({
|
||||
<div>
|
||||
<Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
|
||||
<Select
|
||||
value={timerType}
|
||||
value={timerType ?? null}
|
||||
placeholder={mixedPlaceholder}
|
||||
onValueChange={(value: TimerType | null) => {
|
||||
if (value === null) return;
|
||||
handleSubmit('timerType', value);
|
||||
submit({ timerType: value });
|
||||
}}
|
||||
options={[
|
||||
{ value: TimerType.CountDown, label: 'Count down' },
|
||||
@@ -161,9 +107,9 @@ function EventEditorTimes({
|
||||
<TimeInput
|
||||
id='timeWarning'
|
||||
name='timeWarning'
|
||||
submitHandler={handleSubmit}
|
||||
submitHandler={handleTimeSubmit}
|
||||
time={timeWarning}
|
||||
placeholder='Duration'
|
||||
placeholder={timeWarning === undefined ? mixedPlaceholder : 'Duration'}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -171,9 +117,9 @@ function EventEditorTimes({
|
||||
<TimeInput
|
||||
id='timeDanger'
|
||||
name='timeDanger'
|
||||
submitHandler={handleSubmit}
|
||||
submitHandler={handleTimeSubmit}
|
||||
time={timeDanger}
|
||||
placeholder='Duration'
|
||||
placeholder={timeDanger === undefined ? mixedPlaceholder : 'Duration'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
import { OntimeEvent } from 'ontime-types';
|
||||
import { memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
|
||||
import Input from '../../../../common/components/input/input/Input';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
|
||||
import { enDash } from '../../../../common/utils/styleUtils';
|
||||
import { mixedPlaceholder, switchLabel } from '../entryEditor.utils';
|
||||
import EventTextArea from './EventTextArea';
|
||||
import EntryEditorTextInput from './EventTextInput';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EventEditorTitlesProps {
|
||||
eventId: string;
|
||||
/** id of the event being edited, null when editing several events */
|
||||
eventId: string | null;
|
||||
/** amount of events being edited */
|
||||
eventCount: number;
|
||||
cue: string;
|
||||
flag: boolean;
|
||||
title: string;
|
||||
note: string;
|
||||
colour: string;
|
||||
flag: boolean | undefined;
|
||||
title: string | undefined;
|
||||
note: string | undefined;
|
||||
colour: string | undefined;
|
||||
submit: (patch: Partial<OntimeEvent>) => void;
|
||||
}
|
||||
|
||||
export default memo(EventEditorTitles);
|
||||
function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
|
||||
const { updateEntry } = useEntryActionsContext();
|
||||
|
||||
const flagSubmitHandler = (newValue: boolean) => {
|
||||
updateEntry({ id: eventId, flag: newValue });
|
||||
};
|
||||
function EventEditorTitles({ eventId, eventCount, cue, flag, title, note, colour, submit }: EventEditorTitlesProps) {
|
||||
const isMulti = eventId === null;
|
||||
|
||||
const textSubmitHandler = (field: string, newValue: string) => {
|
||||
updateEntry({ id: eventId, [field]: newValue });
|
||||
submit({ [field]: newValue });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -36,21 +38,39 @@ function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEdi
|
||||
<Editor.Title>Event Data</Editor.Title>
|
||||
<div className={style.splitThree}>
|
||||
<div>
|
||||
<Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
|
||||
<Input id='eventId' data-testid='input-textfield' value={eventId} readOnly fluid />
|
||||
<Editor.Label htmlFor='eventId'>{isMulti ? 'Selection (read only)' : 'Event ID (read only)'}</Editor.Label>
|
||||
<Input
|
||||
id='eventId'
|
||||
data-testid='input-textfield'
|
||||
value={isMulti ? `${eventCount} events selected` : eventId}
|
||||
readOnly
|
||||
fluid
|
||||
/>
|
||||
</div>
|
||||
<EntryEditorTextInput
|
||||
field='cue'
|
||||
label='Cue'
|
||||
initialValue={cue}
|
||||
submitHandler={textSubmitHandler}
|
||||
maxLength={10}
|
||||
/>
|
||||
{isMulti ? (
|
||||
<div>
|
||||
<Editor.Label htmlFor='cue'>Cue (not available)</Editor.Label>
|
||||
<Input id='cue' value={enDash} readOnly fluid />
|
||||
</div>
|
||||
) : (
|
||||
<EntryEditorTextInput
|
||||
field='cue'
|
||||
label='Cue'
|
||||
initialValue={cue}
|
||||
submitHandler={textSubmitHandler}
|
||||
maxLength={10}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<Editor.Label htmlFor='flag'>Flag</Editor.Label>
|
||||
<Editor.Label className={style.switchLabel}>
|
||||
<Switch id='flag' checked={flag} onCheckedChange={flagSubmitHandler} />
|
||||
{flag ? 'On' : 'Off'}
|
||||
<Switch
|
||||
id='flag'
|
||||
checked={flag ?? false}
|
||||
mixed={flag === undefined}
|
||||
onCheckedChange={(newValue) => submit({ flag: newValue })}
|
||||
/>
|
||||
{switchLabel(flag)}
|
||||
</Editor.Label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,8 +78,20 @@ function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEdi
|
||||
<Editor.Label>Colour</Editor.Label>
|
||||
<SwatchSelect name='colour' value={colour} handleChange={textSubmitHandler} />
|
||||
</div>
|
||||
<EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
|
||||
<EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
|
||||
<EntryEditorTextInput
|
||||
field='title'
|
||||
label='Title'
|
||||
initialValue={title}
|
||||
placeholder={title === undefined ? mixedPlaceholder : undefined}
|
||||
submitHandler={textSubmitHandler}
|
||||
/>
|
||||
<EventTextArea
|
||||
field='note'
|
||||
label='Note'
|
||||
initialValue={note}
|
||||
placeholder={note === undefined ? mixedPlaceholder : undefined}
|
||||
submitHandler={textSubmitHandler}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,11 +5,15 @@ import { AutoTextarea } from '../../../../common/components/input/auto-textarea/
|
||||
import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
|
||||
import { EventEditorUpdateFields } from '../EventEditor';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface CountedTextAreaProps {
|
||||
className?: string;
|
||||
field: EventEditorUpdateFields;
|
||||
label: string;
|
||||
initialValue: string;
|
||||
/** undefined represents values which do not agree across the edited entries */
|
||||
initialValue: string | undefined;
|
||||
placeholder?: string;
|
||||
style?: CSSProperties;
|
||||
submitHandler: (field: EventEditorUpdateFields, value: string) => void;
|
||||
}
|
||||
@@ -19,6 +23,7 @@ export default function EventTextArea({
|
||||
field,
|
||||
label,
|
||||
initialValue,
|
||||
placeholder,
|
||||
style: givenStyles,
|
||||
submitHandler,
|
||||
}: CountedTextAreaProps) {
|
||||
@@ -29,16 +34,27 @@ export default function EventTextArea({
|
||||
submitOnCtrlEnter: true,
|
||||
});
|
||||
|
||||
// an unknown value cannot be cleared by emptying the field, we offer an explicit action
|
||||
const canClear = initialValue === undefined;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Editor.Label className={className} htmlFor={field} style={givenStyles}>
|
||||
{label}
|
||||
</Editor.Label>
|
||||
<div className={style.labelRow}>
|
||||
<Editor.Label className={className} htmlFor={field} style={givenStyles}>
|
||||
{label}
|
||||
</Editor.Label>
|
||||
{canClear && (
|
||||
<button type='button' className={style.clearAction} onClick={() => submitCallback('')}>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<AutoTextarea
|
||||
id={field}
|
||||
inputref={ref}
|
||||
rows={1}
|
||||
data-testid='input-textarea'
|
||||
placeholder={placeholder}
|
||||
fluid
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
|
||||
@@ -6,10 +6,13 @@ import useReactiveTextInput from '../../../../common/components/input/text-input
|
||||
import { EventEditorUpdateFields } from '../EventEditor';
|
||||
import { GroupEditorUpdateTextFields } from '../GroupEditor';
|
||||
|
||||
import style from '../EntryEditor.module.scss';
|
||||
|
||||
interface EntryEditorTextInputProps extends InputProps {
|
||||
field: EventEditorUpdateFields | GroupEditorUpdateTextFields;
|
||||
label: string;
|
||||
initialValue: string;
|
||||
/** undefined represents values which do not agree across the edited entries */
|
||||
initialValue: string | undefined;
|
||||
placeholder?: string;
|
||||
submitHandler: (field: EventEditorUpdateFields, value: string) => void;
|
||||
}
|
||||
@@ -31,11 +34,21 @@ export default function EntryEditorTextInput({
|
||||
submitOnEnter: true,
|
||||
});
|
||||
|
||||
// an unknown value cannot be cleared by emptying the field, we offer an explicit action
|
||||
const canClear = initialValue === undefined;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Editor.Label className={className} htmlFor={field} style={givenStyles}>
|
||||
{label}
|
||||
</Editor.Label>
|
||||
<div className={style.labelRow}>
|
||||
<Editor.Label className={className} htmlFor={field} style={givenStyles}>
|
||||
{label}
|
||||
</Editor.Label>
|
||||
{canClear && (
|
||||
<button type='button' className={style.clearAction} onClick={() => submitCallback('')}>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Input
|
||||
id={field}
|
||||
ref={ref}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
/** Shown in place of a value when the entries being edited do not agree */
|
||||
export const mixedPlaceholder = 'Mixed';
|
||||
|
||||
/** Returns the label of a switch which may represent values that do not agree */
|
||||
export function switchLabel(value: boolean | undefined): string {
|
||||
if (value === undefined) {
|
||||
return mixedPlaceholder;
|
||||
}
|
||||
return value ? 'On' : 'Off';
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { CustomFieldKey, OntimeEvent } from 'ontime-types';
|
||||
|
||||
/**
|
||||
* Marks a value which is not the same across the entries being edited
|
||||
* This is a distinct value from undefined, which means that the field is absent
|
||||
* Being a symbol, it also cannot be assigned to a patch by accident
|
||||
*/
|
||||
export const conflict: unique symbol = Symbol('conflict');
|
||||
export type Conflict = typeof conflict;
|
||||
|
||||
/** A value which may not be the same across the entries being edited */
|
||||
export type MergedValue<T> = T | Conflict;
|
||||
|
||||
export function isConflict<T>(value: MergedValue<T>): value is Conflict {
|
||||
return value === conflict;
|
||||
}
|
||||
|
||||
/** Resolves a merged value for the UI, where an unknown value is represented by undefined */
|
||||
export function resolveConflict<T>(value: MergedValue<T>): T | undefined {
|
||||
return isConflict(value) ? undefined : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fields which can be edited across a selection of events
|
||||
* timeStart and timeEnd are absolute points in time and are excluded:
|
||||
* giving several events the same start or end collapses their durations
|
||||
*/
|
||||
export const batchEditableFields = [
|
||||
'title',
|
||||
'note',
|
||||
'colour',
|
||||
'flag',
|
||||
'duration',
|
||||
'endAction',
|
||||
'countToEnd',
|
||||
'timerType',
|
||||
'timeWarning',
|
||||
'timeDanger',
|
||||
'linkStart',
|
||||
] as const;
|
||||
|
||||
type BatchEditableField = (typeof batchEditableFields)[number];
|
||||
|
||||
/**
|
||||
* Custom fields of the entries being edited
|
||||
* A missing key means that none of the entries have a value for that field
|
||||
*/
|
||||
export type MergedCustomFields = Record<CustomFieldKey, MergedValue<string>>;
|
||||
|
||||
/**
|
||||
* A merged view over a set of events
|
||||
* A field holds the conflict symbol when the events do not agree on its value
|
||||
*/
|
||||
export type MergedEvent = {
|
||||
[K in BatchEditableField]: MergedValue<OntimeEvent[K]>;
|
||||
} & {
|
||||
custom: MergedCustomFields;
|
||||
};
|
||||
|
||||
/**
|
||||
* Merges a list of events into a single view
|
||||
* For a single event, no field is in conflict and every value matches the event
|
||||
* @param events - events to merge, must contain at least one element
|
||||
*/
|
||||
export function mergeEvents(events: OntimeEvent[]): MergedEvent {
|
||||
return {
|
||||
title: mergeField(events, 'title'),
|
||||
note: mergeField(events, 'note'),
|
||||
colour: mergeField(events, 'colour'),
|
||||
flag: mergeField(events, 'flag'),
|
||||
duration: mergeField(events, 'duration'),
|
||||
endAction: mergeField(events, 'endAction'),
|
||||
countToEnd: mergeField(events, 'countToEnd'),
|
||||
timerType: mergeField(events, 'timerType'),
|
||||
timeWarning: mergeField(events, 'timeWarning'),
|
||||
timeDanger: mergeField(events, 'timeDanger'),
|
||||
linkStart: mergeField(events, 'linkStart'),
|
||||
custom: mergeCustomFields(events),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the shared value of a field, or the conflict symbol if the events disagree
|
||||
*/
|
||||
function mergeField<K extends BatchEditableField>(events: OntimeEvent[], field: K): MergedValue<OntimeEvent[K]> {
|
||||
const value = events[0][field];
|
||||
return events.some((event) => event[field] !== value) ? conflict : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Merges the custom fields of a list of events
|
||||
* Fields missing from an entry are considered empty
|
||||
*/
|
||||
function mergeCustomFields(events: OntimeEvent[]): MergedCustomFields {
|
||||
const merged: MergedCustomFields = {};
|
||||
|
||||
for (const event of events) {
|
||||
for (const key of Object.keys(event.custom)) {
|
||||
if (key in merged) {
|
||||
continue;
|
||||
}
|
||||
const value = event.custom[key] ?? '';
|
||||
merged[key] = events.some((other) => (other.custom[key] ?? '') !== value) ? conflict : value;
|
||||
}
|
||||
}
|
||||
|
||||
return merged;
|
||||
}
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
|
||||
import IconButton from '../../../common/components/buttons/IconButton';
|
||||
import Tag from '../../../common/components/tag/Tag';
|
||||
import Tooltip from '../../../common/components/tooltip/Tooltip';
|
||||
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
|
||||
import { useContextMenu } from '../../../common/hooks/useContextMenu';
|
||||
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
|
||||
@@ -190,13 +189,6 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
|
||||
{data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
|
||||
</div>
|
||||
</div>
|
||||
{data.useGroupTimer && (
|
||||
<div className={style.metaEntry}>
|
||||
<Tooltip text='Views show a shared timer for this group instead of the event timer'>
|
||||
<Tag>Group timer</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,18 +68,6 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// signals that the displayed timer belongs to the group, not to the running event
|
||||
.group-indicator {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
font-weight: 600;
|
||||
font-size: 2.5vw;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
color: var(--timer-colour, $ui-white);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ViewSettings } from 'ontime-types';
|
||||
|
||||
import { FitText } from '../../../common/components/fit-text/FitText';
|
||||
import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
|
||||
import { useGroupTimer, useTimerSocket } from '../../../common/hooks/useSocket';
|
||||
import { useTimerSocket } from '../../../common/hooks/useSocket';
|
||||
import { cx } from '../../../common/utils/styleUtils';
|
||||
import { getFormattedTimer, getTimerByType } from '../../common/viewUtils';
|
||||
import {
|
||||
@@ -10,8 +10,9 @@ import {
|
||||
getIsPlaying,
|
||||
getSecondaryDisplay,
|
||||
getShowMessage,
|
||||
getShowsTimerValue,
|
||||
resolveTimerDisplay,
|
||||
getShowModifiers,
|
||||
getShowProgressBar,
|
||||
getTotalTime,
|
||||
} from '../../timer/timer.utils';
|
||||
import { getTimerColour } from '../../utils/presentation.utils';
|
||||
|
||||
@@ -23,28 +24,23 @@ interface PipTimerProps {
|
||||
|
||||
export function PipTimer({ viewSettings }: PipTimerProps) {
|
||||
const { eventNow, message, time, clock, timerTypeNow, countToEndNow, auxTimer } = useTimerSocket();
|
||||
const groupTimer = useGroupTimer();
|
||||
|
||||
// gather modifiers
|
||||
const showOverlay = getShowMessage(message.timer);
|
||||
const timerDisplay = resolveTimerDisplay({
|
||||
time,
|
||||
groupTimer,
|
||||
event: eventNow,
|
||||
timerType: timerTypeNow,
|
||||
countToEnd: countToEndNow,
|
||||
freezeOvertime: false,
|
||||
freezeMessage: '',
|
||||
hidePhase: false,
|
||||
});
|
||||
const { showFinished, showWarning, showDanger } = timerDisplay;
|
||||
|
||||
const { showFinished, showWarning, showDanger } = getShowModifiers(
|
||||
timerTypeNow,
|
||||
countToEndNow,
|
||||
time.phase,
|
||||
false,
|
||||
'',
|
||||
false,
|
||||
);
|
||||
const isPlaying = getIsPlaying(time.playback);
|
||||
const showsTimerValue = getShowsTimerValue(timerTypeNow);
|
||||
const showProgressBar = showsTimerValue;
|
||||
const showProgressBar = getShowProgressBar(timerTypeNow);
|
||||
|
||||
// gather timer data
|
||||
const stageTimer = getTimerByType(false, timerTypeNow, clock, timerDisplay.source, timerTypeNow);
|
||||
const totalTime = getTotalTime(time.duration, time.addedTime);
|
||||
const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
|
||||
const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
|
||||
removeSeconds: false,
|
||||
removeLeadingZero: false,
|
||||
@@ -84,11 +80,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
|
||||
<div
|
||||
className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
|
||||
style={{ fontSize: `${timerFontSize}vw` }}
|
||||
data-phase={timerDisplay.phase}
|
||||
data-phase={time.phase}
|
||||
>
|
||||
{display}
|
||||
</div>
|
||||
{timerDisplay.isGroup && showsTimerValue && <div className='group-indicator'>group</div>}
|
||||
<div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
|
||||
<FitText mode='multi' min={12} max={256}>
|
||||
{secondaryContent}
|
||||
@@ -99,12 +94,12 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
|
||||
{showProgressBar && (
|
||||
<MultiPartProgressBar
|
||||
className={cx(['progress-container', !isPlaying && 'progress-container--paused'])}
|
||||
now={timerDisplay.source.current}
|
||||
complete={timerDisplay.total}
|
||||
now={time.current}
|
||||
complete={totalTime}
|
||||
normalColor={viewSettings.normalColor}
|
||||
warning={timerDisplay.warning}
|
||||
warning={eventNow?.timeWarning}
|
||||
warningColor={viewSettings.warningColor}
|
||||
danger={timerDisplay.danger}
|
||||
danger={eventNow?.timeDanger}
|
||||
dangerColor={viewSettings.dangerColor}
|
||||
hideOvertime={!showFinished}
|
||||
/>
|
||||
|
||||
@@ -131,18 +131,6 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// signals that the displayed timer belongs to the group, not to the running event
|
||||
.group-indicator {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
font-weight: 600;
|
||||
font-size: 1.5vw;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
color: var(--timer-colour, var(--timer-color-override, $ui-white));
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
|
||||
@@ -8,7 +8,7 @@ import TitleCard from '../../common/components/title-card/TitleCard';
|
||||
import ViewLogo from '../../common/components/view-logo/ViewLogo';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
|
||||
import { useGroupTimer, useTimerSocket } from '../../common/hooks/useSocket';
|
||||
import { useTimerSocket } from '../../common/hooks/useSocket';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
import { cx } from '../../common/utils/styleUtils';
|
||||
import { formatTime, getDefaultFormat } from '../../common/utils/time';
|
||||
@@ -25,8 +25,9 @@ import {
|
||||
getSecondaryDisplay,
|
||||
getShowClock,
|
||||
getShowMessage,
|
||||
getShowsTimerValue,
|
||||
resolveTimerDisplay,
|
||||
getShowModifiers,
|
||||
getShowProgressBar,
|
||||
getTotalTime,
|
||||
} from './timer.utils';
|
||||
import { TimerData, useTimerData } from './useTimerData';
|
||||
|
||||
@@ -71,29 +72,23 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
|
||||
timeformat,
|
||||
} = useTimerOptions();
|
||||
|
||||
const groupTimer = useGroupTimer();
|
||||
|
||||
const { getLocalizedString } = useTranslation();
|
||||
const localisedMinutes = getLocalizedString('common.minutes');
|
||||
|
||||
// gather modifiers
|
||||
const viewTimerType = timerType ?? timerTypeNow;
|
||||
const showOverlay = getShowMessage(message.timer);
|
||||
const timerDisplay = resolveTimerDisplay({
|
||||
time,
|
||||
groupTimer,
|
||||
event: eventNow,
|
||||
timerType: timerTypeNow,
|
||||
countToEnd: countToEndNow,
|
||||
const { showEndMessage, showFinished, showWarning, showDanger } = getShowModifiers(
|
||||
timerTypeNow,
|
||||
countToEndNow,
|
||||
time.phase,
|
||||
freezeOvertime,
|
||||
freezeMessage,
|
||||
hidePhase,
|
||||
});
|
||||
const { showEndMessage, showFinished, showWarning, showDanger } = timerDisplay;
|
||||
);
|
||||
const isPlaying = getIsPlaying(time.playback);
|
||||
const showClock = !hideClock && getShowClock(viewTimerType);
|
||||
const showsTimerValue = getShowsTimerValue(viewTimerType);
|
||||
const showProgressBar = !hideProgress && showsTimerValue;
|
||||
const showProgressBar = !hideProgress && getShowProgressBar(viewTimerType);
|
||||
|
||||
// gather card data
|
||||
const { showNow, nowMain, nowSecondary, showNext, nextMain, nextSecondary } = getCardData(
|
||||
@@ -107,7 +102,8 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
|
||||
);
|
||||
|
||||
// gather timer data
|
||||
const stageTimer = getTimerByType(freezeOvertime, timerTypeNow, clock, timerDisplay.source, timerType);
|
||||
const totalTime = getTotalTime(time.duration, time.addedTime);
|
||||
const stageTimer = getTimerByType(freezeOvertime, timerTypeNow, clock, time, timerType);
|
||||
const display = getFormattedTimer(stageTimer, viewTimerType, localisedMinutes, {
|
||||
removeSeconds: hideTimerSeconds,
|
||||
removeLeadingZero: removeLeadingZeros,
|
||||
@@ -182,14 +178,11 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
|
||||
className={cx(['timer', subduePaused && 'timer--paused', showFinished && 'timer--finished'])}
|
||||
style={{ fontSize: `${timerFontSize}vw` }}
|
||||
data-type={viewTimerType}
|
||||
data-phase={timerDisplay.phase}
|
||||
data-phase={time.phase}
|
||||
>
|
||||
{display}
|
||||
</div>
|
||||
)}
|
||||
{timerDisplay.isGroup && showsTimerValue && !showEndMessage && (
|
||||
<div className='group-indicator'>group</div>
|
||||
)}
|
||||
<div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
|
||||
<FitText mode='multi' min={64} max={256}>
|
||||
{secondaryContent}
|
||||
@@ -200,12 +193,12 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
|
||||
{showProgressBar && (
|
||||
<MultiPartProgressBar
|
||||
className={cx(['progress-container', !isPlaying && 'progress-container--paused'])}
|
||||
now={timerDisplay.source.current}
|
||||
complete={timerDisplay.total}
|
||||
now={time.current}
|
||||
complete={totalTime}
|
||||
normalColor={viewSettings.normalColor}
|
||||
warning={timerDisplay.warning}
|
||||
warning={eventNow?.timeWarning}
|
||||
warningColor={viewSettings.warningColor}
|
||||
danger={timerDisplay.danger}
|
||||
danger={eventNow?.timeDanger}
|
||||
dangerColor={viewSettings.dangerColor}
|
||||
hideOvertime={!showFinished}
|
||||
/>
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
import { GroupTimerState, Playback, TimerPhase, TimerState, TimerType } from 'ontime-types';
|
||||
|
||||
import { getShowsTimerValue, resolveTimerDisplay } from '../timer.utils';
|
||||
|
||||
const makeTime = (patch: Partial<TimerState> = {}): TimerState => ({
|
||||
addedTime: 0,
|
||||
current: 10000,
|
||||
duration: 60000,
|
||||
elapsed: 50000,
|
||||
expectedFinish: null,
|
||||
phase: TimerPhase.Default,
|
||||
playback: Playback.Play,
|
||||
secondaryTimer: null,
|
||||
startedAt: null,
|
||||
...patch,
|
||||
});
|
||||
|
||||
const makeGroupTimer = (patch: Partial<GroupTimerState> = {}): GroupTimerState => ({
|
||||
current: 100000,
|
||||
elapsed: 80000,
|
||||
duration: 180000,
|
||||
...patch,
|
||||
});
|
||||
|
||||
const resolve = (time: TimerState, groupTimer: GroupTimerState | null) =>
|
||||
resolveTimerDisplay({
|
||||
time,
|
||||
groupTimer,
|
||||
event: { timeWarning: 120000, timeDanger: 60000 },
|
||||
timerType: TimerType.CountDown,
|
||||
countToEnd: false,
|
||||
freezeOvertime: false,
|
||||
freezeMessage: '',
|
||||
hidePhase: false,
|
||||
});
|
||||
|
||||
describe('resolveTimerDisplay()', () => {
|
||||
it('uses the event timer when there is no group timer', () => {
|
||||
const time = makeTime();
|
||||
const result = resolve(time, null);
|
||||
|
||||
expect(result.isGroup).toBe(false);
|
||||
expect(result.source).toBe(time);
|
||||
expect(result.total).toBe(60000);
|
||||
expect(result.warning).toBe(120000);
|
||||
expect(result.danger).toBe(60000);
|
||||
});
|
||||
|
||||
it('adds the time added to an event into the event total', () => {
|
||||
expect(resolve(makeTime({ addedTime: 30000 }), null).total).toBe(90000);
|
||||
});
|
||||
|
||||
it('uses the group timer when one is present', () => {
|
||||
const groupTimer = makeGroupTimer();
|
||||
const result = resolve(makeTime(), groupTimer);
|
||||
|
||||
expect(result.isGroup).toBe(true);
|
||||
expect(result.source).toBe(groupTimer);
|
||||
expect(result.total).toBe(180000);
|
||||
});
|
||||
|
||||
it('drops the event thresholds while showing the group', () => {
|
||||
const result = resolve(makeTime({ phase: TimerPhase.Danger }), makeGroupTimer());
|
||||
|
||||
expect(result.warning).toBeUndefined();
|
||||
expect(result.danger).toBeUndefined();
|
||||
});
|
||||
|
||||
it.each([TimerPhase.Warning, TimerPhase.Danger])(
|
||||
'reports the group as running while the event is in %s',
|
||||
(phase) => {
|
||||
const result = resolve(makeTime({ phase }), makeGroupTimer());
|
||||
|
||||
expect(result.phase).toBe(TimerPhase.Default);
|
||||
expect(result.showWarning).toBe(false);
|
||||
expect(result.showDanger).toBe(false);
|
||||
expect(result.showFinished).toBe(false);
|
||||
},
|
||||
);
|
||||
|
||||
it('reports overtime only once the group itself has run out of time', () => {
|
||||
const overrunningEvent = makeTime({ current: -5000, phase: TimerPhase.Overtime });
|
||||
|
||||
// the event is over, but the group still has time left
|
||||
const stillRunning = resolve(overrunningEvent, makeGroupTimer({ current: 60000 }));
|
||||
expect(stillRunning.phase).toBe(TimerPhase.Default);
|
||||
expect(stillRunning.showFinished).toBe(false);
|
||||
|
||||
const overtime = resolve(overrunningEvent, makeGroupTimer({ current: -1000 }));
|
||||
expect(overtime.phase).toBe(TimerPhase.Overtime);
|
||||
expect(overtime.showFinished).toBe(true);
|
||||
});
|
||||
|
||||
it.each([TimerPhase.Pending, TimerPhase.None])('keeps the %s playback phase on the group', (phase) => {
|
||||
// these describe the playback state rather than a threshold, so they are true of the group too
|
||||
expect(resolve(makeTime({ phase }), makeGroupTimer()).phase).toBe(phase);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getShowsTimerValue()', () => {
|
||||
it('is true for timer types which render the running timer', () => {
|
||||
expect(getShowsTimerValue(TimerType.CountDown)).toBe(true);
|
||||
expect(getShowsTimerValue(TimerType.CountUp)).toBe(true);
|
||||
});
|
||||
|
||||
it('is false for timer types which do not reflect what is loaded', () => {
|
||||
expect(getShowsTimerValue(TimerType.Clock)).toBe(false);
|
||||
expect(getShowsTimerValue(TimerType.None)).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,4 @@
|
||||
import {
|
||||
GroupTimerState,
|
||||
MaybeNumber,
|
||||
MessageState,
|
||||
OntimeEvent,
|
||||
@@ -7,7 +6,6 @@ import {
|
||||
RundownEntries,
|
||||
TimerMessage,
|
||||
TimerPhase,
|
||||
TimerState,
|
||||
TimerType,
|
||||
} from 'ontime-types';
|
||||
import { isPlaybackActive } from 'ontime-utils';
|
||||
@@ -36,11 +34,9 @@ export function getTotalTime(duration: MaybeNumber, addedTime: MaybeNumber): num
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this timer type renders a value derived from the running timer.
|
||||
* Clock shows the time of day and none shows nothing, so neither reflects what is loaded,
|
||||
* which also means neither can carry a progress bar or a group timer indicator
|
||||
* Whether the progress bar should be shown for this timer type
|
||||
*/
|
||||
export function getShowsTimerValue(timerType: TimerType) {
|
||||
export function getShowProgressBar(timerType: TimerType) {
|
||||
return timerType !== TimerType.None && timerType !== TimerType.Clock;
|
||||
}
|
||||
|
||||
@@ -118,59 +114,6 @@ export function getShowModifiers(
|
||||
};
|
||||
}
|
||||
|
||||
interface ResolveTimerDisplayOptions {
|
||||
time: TimerState;
|
||||
/** when present, views show the group instead of the running event */
|
||||
groupTimer: GroupTimerState | null;
|
||||
event: Pick<OntimeEvent, 'timeWarning' | 'timeDanger'> | null;
|
||||
timerType: TimerType;
|
||||
countToEnd: boolean;
|
||||
freezeOvertime: boolean;
|
||||
freezeMessage: string;
|
||||
hidePhase: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves which timer a view should display, and the modifiers that go with it.
|
||||
*
|
||||
* A group has no warning or danger thresholds of its own, so it only ever reports as
|
||||
* running or overtime. Feeding that phase through `getShowModifiers` means the warning
|
||||
* and danger states are suppressed as a consequence of what a group is, rather than
|
||||
* every view having to remember to special case them.
|
||||
*/
|
||||
export function resolveTimerDisplay({
|
||||
time,
|
||||
groupTimer,
|
||||
event,
|
||||
timerType,
|
||||
countToEnd,
|
||||
freezeOvertime,
|
||||
freezeMessage,
|
||||
hidePhase,
|
||||
}: ResolveTimerDisplayOptions) {
|
||||
const isGroup = groupTimer !== null;
|
||||
const phase = (() => {
|
||||
if (!isGroup) return time.phase;
|
||||
// pending and none describe the playback state rather than a threshold,
|
||||
// they are just as true of the group as they are of the event
|
||||
if (time.phase === TimerPhase.Pending || time.phase === TimerPhase.None) return time.phase;
|
||||
return groupTimer.current <= 0 ? TimerPhase.Overtime : TimerPhase.Default;
|
||||
})();
|
||||
|
||||
return {
|
||||
isGroup,
|
||||
phase,
|
||||
/** the values to render, shaped for getTimerByType */
|
||||
source: isGroup ? groupTimer : time,
|
||||
/** the target of a progress bar */
|
||||
total: isGroup ? groupTimer.duration : getTotalTime(time.duration, time.addedTime),
|
||||
// thresholds belong to the event, they carry no meaning against a group duration
|
||||
warning: isGroup ? undefined : event?.timeWarning,
|
||||
danger: isGroup ? undefined : event?.timeDanger,
|
||||
...getShowModifiers(timerType, countToEnd, phase, freezeOvertime, freezeMessage, hidePhase),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* What, if anything, should be displayed in the secondary field
|
||||
*/
|
||||
|
||||
@@ -411,7 +411,6 @@ export function migrateRundown(
|
||||
targetDuration: null,
|
||||
colour: '', //leave default colour
|
||||
custom: {}, // leave empty
|
||||
useGroupTimer: false, // opt-in feature, off for migrated projects
|
||||
// !==== RUNTIME METADATA ====! //
|
||||
revision: -1,
|
||||
timeStart: null,
|
||||
|
||||
@@ -316,7 +316,6 @@ describe('v3 to v4', () => {
|
||||
targetDuration: null,
|
||||
timeEnd: null,
|
||||
timeStart: null,
|
||||
useGroupTimer: false,
|
||||
},
|
||||
event2: {
|
||||
id: 'event2',
|
||||
@@ -393,7 +392,6 @@ describe('v3 to v4', () => {
|
||||
targetDuration: null,
|
||||
timeEnd: null,
|
||||
timeStart: null,
|
||||
useGroupTimer: false,
|
||||
},
|
||||
delay: {
|
||||
type: SupportedEntry.Delay,
|
||||
|
||||
@@ -301,23 +301,6 @@ describe('parseRundown()', () => {
|
||||
expect(parsedRundown.entries.group).toMatchObject({ entries: ['1', '2'] });
|
||||
expect(Object.keys(parsedRundown.entries).length).toEqual(3);
|
||||
});
|
||||
|
||||
it('normalises groups from projects made before the group timer existed', () => {
|
||||
const rundown = {
|
||||
id: 'test',
|
||||
title: '',
|
||||
order: ['group'],
|
||||
flatOrder: ['group'],
|
||||
entries: {
|
||||
// a group as it would have been persisted by a previous version
|
||||
group: { id: 'group', type: SupportedEntry.Group, title: 'legacy', entries: [] },
|
||||
},
|
||||
revision: 1,
|
||||
} as unknown as Rundown;
|
||||
|
||||
const parsedRundown = parseRundown(rundown, {});
|
||||
expect(parsedRundown.entries.group).toMatchObject({ id: 'group', useGroupTimer: false });
|
||||
});
|
||||
});
|
||||
|
||||
describe('sanitiseCustomFields()', () => {
|
||||
|
||||
@@ -15,7 +15,6 @@ import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } fr
|
||||
import { parseRundown } from '../rundown.parser.js';
|
||||
import {
|
||||
calculateDayOffset,
|
||||
createGroupPatch,
|
||||
deleteById,
|
||||
doesInvalidateMetadata,
|
||||
getIntegerAndFraction,
|
||||
@@ -611,25 +610,3 @@ describe('isLoadedPlayable()', () => {
|
||||
expect(isLoadedPlayable('keynote', rundown)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('createGroupPatch()', () => {
|
||||
it('preserves useGroupTimer when it is not part of the patch', () => {
|
||||
const original = makeOntimeGroup({ id: 'group', useGroupTimer: true });
|
||||
const patched = createGroupPatch(original, { title: 'Morning sessions' });
|
||||
|
||||
expect(patched.title).toBe('Morning sessions');
|
||||
expect(patched.useGroupTimer).toBe(true);
|
||||
});
|
||||
|
||||
it('updates useGroupTimer when it is part of the patch', () => {
|
||||
const original = makeOntimeGroup({ id: 'group', useGroupTimer: false });
|
||||
expect(createGroupPatch(original, { useGroupTimer: true }).useGroupTimer).toBe(true);
|
||||
expect(createGroupPatch(original, { useGroupTimer: false }).useGroupTimer).toBe(false);
|
||||
});
|
||||
|
||||
it('ignores non boolean values for useGroupTimer', () => {
|
||||
const original = makeOntimeGroup({ id: 'group', useGroupTimer: true });
|
||||
// @ts-expect-error -- testing a value coming from an unvalidated request
|
||||
expect(createGroupPatch(original, { useGroupTimer: 'nope' }).useGroupTimer).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -179,8 +179,6 @@ export function createGroupPatch(originalGroup: OntimeGroup, patchGroup: Partial
|
||||
entries: patchGroup.entries ?? originalGroup.entries,
|
||||
targetDuration: maybeTargetDuration(),
|
||||
colour: makeString(patchGroup.colour, originalGroup.colour),
|
||||
useGroupTimer:
|
||||
typeof patchGroup.useGroupTimer === 'boolean' ? patchGroup.useGroupTimer : originalGroup.useGroupTimer,
|
||||
revision: originalGroup.revision,
|
||||
timeStart: originalGroup.timeStart,
|
||||
timeEnd: originalGroup.timeEnd,
|
||||
|
||||
@@ -147,7 +147,6 @@ There are four entry types discriminated by \`type\`:
|
||||
note: string
|
||||
entries: EntryId[]
|
||||
targetDuration: number | null
|
||||
useGroupTimer: boolean // views show a shared timer for the whole group
|
||||
custom: { [key: string]: string }
|
||||
timeStart: number | null // calculated from nested entries (runtime)
|
||||
timeEnd: number | null // calculated from nested entries (runtime)
|
||||
|
||||
@@ -54,9 +54,7 @@ export type EventFieldArgs = Partial<
|
||||
>;
|
||||
export type MilestoneFieldArgs = Partial<Pick<OntimeMilestone, 'cue' | 'title' | 'note' | 'colour' | 'custom'>>;
|
||||
export type DelayFieldArgs = Partial<Pick<OntimeDelay, 'duration'>>;
|
||||
export type GroupFieldArgs = Partial<
|
||||
Pick<OntimeGroup, 'title' | 'note' | 'colour' | 'targetDuration' | 'custom' | 'useGroupTimer'>
|
||||
>;
|
||||
export type GroupFieldArgs = Partial<Pick<OntimeGroup, 'title' | 'note' | 'colour' | 'targetDuration' | 'custom'>>;
|
||||
|
||||
export type EntryFieldArgs = EventFieldArgs & MilestoneFieldArgs & DelayFieldArgs & GroupFieldArgs;
|
||||
export type TargetRundownArgs = { rundownId?: string };
|
||||
@@ -172,7 +170,6 @@ function toGroupPatch(args: CreateEntryArgs, id: EntryId): PatchWithId<OntimeGro
|
||||
if (args.colour !== undefined) patch.colour = args.colour;
|
||||
if (args.targetDuration !== undefined) patch.targetDuration = args.targetDuration;
|
||||
if (args.custom !== undefined) patch.custom = args.custom;
|
||||
if (args.useGroupTimer !== undefined) patch.useGroupTimer = args.useGroupTimer;
|
||||
|
||||
return Object.keys(patch).length > 1 ? patch : null;
|
||||
}
|
||||
|
||||
@@ -207,7 +207,6 @@ export const startServer = async (): Promise<{ message: string; serverPort: numb
|
||||
eventStore.init({
|
||||
clock: state.clock,
|
||||
timer: state.timer,
|
||||
groupTimer: state.groupTimer,
|
||||
message: { ...runtimeStorePlaceholder.message },
|
||||
offset: state.offset,
|
||||
rundown: state.rundown,
|
||||
|
||||
@@ -39,7 +39,6 @@ export const stageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['9bf60f', 'bf71a2', 'c2697f', 'fa593e', 'a8b0b3'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -173,7 +172,6 @@ export const stageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['0aaa7d'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#3E75E8',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -221,7 +219,6 @@ export const stageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['02afca', '75ce86', 'e10ed9', '07df89'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -363,7 +360,6 @@ export const backstageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['bs0101', 'bs0102', 'bs0103', 'bs0104'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#A790F5',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -480,7 +476,6 @@ export const backstageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['bs0201', 'bs0202', 'bs0203', 'bs0204'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -593,7 +588,6 @@ export const backstageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['bs0301'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#3E75E8',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -640,7 +634,6 @@ export const backstageRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['bs0401', 'bs0402', 'bs0403', 'bs0404'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -775,7 +768,6 @@ export const broadcastRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['br0101', 'br0102', 'br0103'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#ED3333',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -859,7 +851,6 @@ export const broadcastRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['br0201', 'br0202', 'br0203', 'br0204'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -968,7 +959,6 @@ export const broadcastRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['br0301', 'br0302'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#3E75E8',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
@@ -1039,7 +1029,6 @@ export const broadcastRundown: Rundown = {
|
||||
note: '',
|
||||
entries: ['br0401', 'br0402', 'br0403'],
|
||||
targetDuration: null,
|
||||
useGroupTimer: false,
|
||||
colour: '#339E4E',
|
||||
custom: {},
|
||||
revision: 0,
|
||||
|
||||
@@ -1,16 +1,4 @@
|
||||
import {
|
||||
EndAction,
|
||||
MaybeNumber,
|
||||
OntimeEvent,
|
||||
OntimeGroup,
|
||||
Playback,
|
||||
Rundown,
|
||||
SupportedEntry,
|
||||
TimeOfDay,
|
||||
TimeStrategy,
|
||||
TimerPhase,
|
||||
TimerType,
|
||||
} from 'ontime-types';
|
||||
import { EndAction, Playback, TimeOfDay, TimeStrategy, TimerPhase, TimerType } from 'ontime-types';
|
||||
import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND, dayInMs, millisToString } from 'ontime-utils';
|
||||
|
||||
import type { RuntimeState } from '../../stores/runtimeState.js';
|
||||
@@ -19,8 +7,6 @@ import {
|
||||
getCurrent,
|
||||
getElapsed,
|
||||
getExpectedFinish,
|
||||
getGroupTimer,
|
||||
getGroupTiming,
|
||||
getRuntimeOffset,
|
||||
getTimerPhase,
|
||||
hasCrossedMidnight,
|
||||
@@ -1466,138 +1452,3 @@ describe('findDay()', () => {
|
||||
expect(findDayOffset(22 * MILLIS_PER_HOUR, 23 * MILLIS_PER_HOUR)).toBe(0); // -> 1
|
||||
});
|
||||
});
|
||||
|
||||
describe('getGroupTiming()', () => {
|
||||
const makeEvent = (id: string, duration: number, patch: object = {}) =>
|
||||
({ id, type: SupportedEntry.Event, duration, gap: 0, skip: false, parent: 'group', ...patch }) as OntimeEvent;
|
||||
|
||||
const makeGroup = (entries: string[]) => ({ id: 'group', type: SupportedEntry.Group, entries }) as OntimeGroup;
|
||||
|
||||
const makeEntries = (...entries: OntimeEvent[]) =>
|
||||
Object.fromEntries(entries.map((entry) => [entry.id, entry])) as Rundown['entries'];
|
||||
|
||||
it('splits the scheduled content around the loaded event', () => {
|
||||
const group = makeGroup(['1', '2', '3']);
|
||||
const entries = makeEntries(makeEvent('1', 10), makeEvent('2', 20), makeEvent('3', 30));
|
||||
|
||||
expect(getGroupTiming(group, entries, '1')).toStrictEqual({ before: 0, after: 50 });
|
||||
expect(getGroupTiming(group, entries, '2')).toStrictEqual({ before: 10, after: 30 });
|
||||
expect(getGroupTiming(group, entries, '3')).toStrictEqual({ before: 30, after: 0 });
|
||||
});
|
||||
|
||||
it('accounts for the gaps between events', () => {
|
||||
const group = makeGroup(['1', '2', '3']);
|
||||
const entries = makeEntries(makeEvent('1', 10), makeEvent('2', 20, { gap: 5 }), makeEvent('3', 30, { gap: 7 }));
|
||||
|
||||
expect(getGroupTiming(group, entries, '1')).toStrictEqual({ before: 0, after: 20 + 5 + 30 + 7 });
|
||||
// the gap before the loaded event has already passed, so it counts as time spent
|
||||
expect(getGroupTiming(group, entries, '2')).toStrictEqual({ before: 10 + 5, after: 30 + 7 });
|
||||
});
|
||||
|
||||
it('splits into values which add up to the group duration', () => {
|
||||
const group = makeGroup(['1', '2', '3']);
|
||||
const entries = makeEntries(makeEvent('1', 10), makeEvent('2', 20, { gap: 5 }), makeEvent('3', 30));
|
||||
const groupDuration = 10 + 20 + 5 + 30;
|
||||
|
||||
for (const id of ['1', '2', '3']) {
|
||||
const timing = getGroupTiming(group, entries, id)!;
|
||||
expect(timing.before + entries[id].duration + timing.after).toBe(groupDuration);
|
||||
}
|
||||
});
|
||||
|
||||
it('skips entries which are not playable events', () => {
|
||||
const group = makeGroup(['1', '2', '3', '4']);
|
||||
const entries = {
|
||||
...makeEntries(makeEvent('1', 10), makeEvent('2', 20, { skip: true }), makeEvent('4', 40)),
|
||||
'3': { id: '3', type: SupportedEntry.Milestone, parent: 'group' },
|
||||
} as Rundown['entries'];
|
||||
|
||||
expect(getGroupTiming(group, entries, '1')).toStrictEqual({ before: 0, after: 40 });
|
||||
});
|
||||
|
||||
it('returns null when the loaded event is not part of the group', () => {
|
||||
const group = makeGroup(['1', '2']);
|
||||
const entries = makeEntries(makeEvent('1', 10), makeEvent('2', 20));
|
||||
|
||||
expect(getGroupTiming(group, entries, 'elsewhere')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getGroupTimer()', () => {
|
||||
const makeState = (patch: {
|
||||
useGroupTimer?: boolean;
|
||||
duration?: number;
|
||||
timing?: { before: number; after: number } | null;
|
||||
current?: MaybeNumber;
|
||||
elapsed?: MaybeNumber;
|
||||
addedTime?: number;
|
||||
}) =>
|
||||
({
|
||||
groupNow: { duration: patch.duration ?? 100, useGroupTimer: patch.useGroupTimer ?? true },
|
||||
_groupTiming: patch.timing === undefined ? { before: 0, after: 0 } : patch.timing,
|
||||
timer: {
|
||||
current: patch.current ?? null,
|
||||
elapsed: patch.elapsed ?? null,
|
||||
addedTime: patch.addedTime ?? 0,
|
||||
},
|
||||
}) as RuntimeState;
|
||||
|
||||
it('is null when there is no group running', () => {
|
||||
expect(getGroupTimer({ groupNow: null, _groupTiming: null } as RuntimeState)).toBeNull();
|
||||
});
|
||||
|
||||
it('is null when the group has not opted in', () => {
|
||||
expect(getGroupTimer(makeState({ useGroupTimer: false, current: 10 }))).toBeNull();
|
||||
});
|
||||
|
||||
it('is null when the loaded event is not part of the group', () => {
|
||||
expect(getGroupTimer(makeState({ timing: null, current: 10 }))).toBeNull();
|
||||
});
|
||||
|
||||
it('offsets the event timer by the content scheduled around it', () => {
|
||||
const state = makeState({ duration: 100, timing: { before: 30, after: 50 }, current: 20, elapsed: 0 });
|
||||
|
||||
expect(getGroupTimer(state)).toStrictEqual({ current: 70, elapsed: 30, duration: 100 });
|
||||
});
|
||||
|
||||
it('keeps elapsed and current adding up to the total', () => {
|
||||
const state = makeState({ duration: 100, timing: { before: 30, after: 50 }, current: 12, elapsed: 8 });
|
||||
const groupTimer = getGroupTimer(state)!;
|
||||
|
||||
expect(groupTimer.elapsed + groupTimer.current).toBe(groupTimer.duration);
|
||||
});
|
||||
|
||||
it('grows the total with the time added to the running event', () => {
|
||||
const state = makeState({
|
||||
duration: 100,
|
||||
timing: { before: 0, after: 0 },
|
||||
current: 160,
|
||||
elapsed: 0,
|
||||
addedTime: 60,
|
||||
});
|
||||
const groupTimer = getGroupTimer(state)!;
|
||||
|
||||
expect(groupTimer.duration).toBe(160);
|
||||
// elapsed keeps counting up rather than clamping at zero once time is added
|
||||
expect(groupTimer.elapsed).toBe(0);
|
||||
expect(groupTimer.elapsed + groupTimer.current).toBe(groupTimer.duration);
|
||||
});
|
||||
|
||||
it('reports elapsed time while the group is in credit from added time', () => {
|
||||
const state = makeState({
|
||||
duration: 100,
|
||||
timing: { before: 0, after: 0 },
|
||||
current: 150,
|
||||
elapsed: 10,
|
||||
addedTime: 60,
|
||||
});
|
||||
|
||||
expect(getGroupTimer(state)).toStrictEqual({ current: 150, elapsed: 10, duration: 160 });
|
||||
});
|
||||
|
||||
it('goes negative when the group runs into overtime', () => {
|
||||
const state = makeState({ duration: 100, timing: { before: 90, after: 0 }, current: -15, elapsed: 25 });
|
||||
|
||||
expect(getGroupTimer(state)?.current).toBe(-15);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -709,18 +709,6 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
|
||||
RuntimeService.previousState.timer = { ...state.timer };
|
||||
}
|
||||
|
||||
/**
|
||||
* the group timer is the event timer offset by a constant, so it changes exactly when
|
||||
* the event timer does and can share its throttling.
|
||||
* entry changes are also considered since loading an event can move us between groups
|
||||
*/
|
||||
if (updateTimer || entryChanged) {
|
||||
if (!deepEqual(RuntimeService.previousState.groupTimer, state.groupTimer)) {
|
||||
batch.add('groupTimer', state.groupTimer);
|
||||
RuntimeService.previousState.groupTimer = state.groupTimer ? { ...state.groupTimer } : null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* clock has changed by a second or more.
|
||||
* or the timer updated so we ensure that the timer and clock ticks are in sync
|
||||
|
||||
@@ -1,18 +1,7 @@
|
||||
import {
|
||||
Day,
|
||||
EntryId,
|
||||
GroupTimerState,
|
||||
MaybeNumber,
|
||||
OntimeGroup,
|
||||
Rundown,
|
||||
TimeOfDay,
|
||||
TimerPhase,
|
||||
isOntimeEvent,
|
||||
isPlayableEvent,
|
||||
} from 'ontime-types';
|
||||
import { Day, MaybeNumber, TimeOfDay, TimerPhase } from 'ontime-types';
|
||||
import { MILLIS_PER_HOUR, checkIsNow, dayInMs, isPlaybackActive } from 'ontime-utils';
|
||||
|
||||
import type { GroupTiming, RuntimeState } from '../stores/runtimeState.js';
|
||||
import type { RuntimeState } from '../stores/runtimeState.js';
|
||||
|
||||
/**
|
||||
* handle events that span over midnight
|
||||
@@ -242,76 +231,3 @@ export function findDayOffset(plannedStart: number, clock: number): Day {
|
||||
if (distance < -12 * MILLIS_PER_HOUR) return 1 as Day;
|
||||
return 0 as Day;
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits a group's scheduled content around the loaded event.
|
||||
*
|
||||
* The result is stable for as long as the same event is loaded, so it is calculated
|
||||
* when the group is loaded rather than on every update.
|
||||
* The aggregation mirrors the group duration calculated in the rundown
|
||||
* (see rundown.dao.ts): non playable entries are skipped and the gap is
|
||||
* accounted for in every entry other than the first.
|
||||
*/
|
||||
export function getGroupTiming(
|
||||
group: OntimeGroup,
|
||||
entries: Rundown['entries'],
|
||||
currentEventId: EntryId,
|
||||
): GroupTiming | null {
|
||||
const currentIndex = group.entries.indexOf(currentEventId);
|
||||
if (currentIndex === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let before = 0;
|
||||
let after = 0;
|
||||
|
||||
for (let i = 0; i < group.entries.length; i++) {
|
||||
const entry = entries[group.entries[i]];
|
||||
if (!isOntimeEvent(entry) || !isPlayableEvent(entry)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// the first entry of the group has no gap to account for,
|
||||
// any other entry could be preceded by idle time
|
||||
const gap = i > 0 ? entry.gap : 0;
|
||||
|
||||
if (i < currentIndex) {
|
||||
before += gap + entry.duration;
|
||||
} else if (i === currentIndex) {
|
||||
// the loaded event contributes its own duration through the event timer,
|
||||
// but the idle time before it has already passed
|
||||
before += gap;
|
||||
} else {
|
||||
after += gap + entry.duration;
|
||||
}
|
||||
}
|
||||
|
||||
return { before, after };
|
||||
}
|
||||
|
||||
/**
|
||||
* Derives the shared group timer from the event timer.
|
||||
*
|
||||
* Keeping this relative to the event timer is what makes the group behave as if it were
|
||||
* a single event containing all its children: pause, added time, overtime, roll and
|
||||
* midnight rollovers are all inherited instead of being recalculated.
|
||||
*/
|
||||
export function getGroupTimer(state: RuntimeState): GroupTimerState | null {
|
||||
const { groupNow, _groupTiming } = state;
|
||||
|
||||
if (groupNow === null || !groupNow.useGroupTimer || _groupTiming === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { current, elapsed, addedTime } = state.timer;
|
||||
if (current === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
current: current + _groupTiming.after,
|
||||
elapsed: (elapsed ?? 0) + _groupTiming.before,
|
||||
// mirrors the total time of an event, which grows with the time added to it
|
||||
duration: groupNow.duration + addedTime,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -9,8 +9,6 @@ const baseState: RuntimeState = {
|
||||
eventNext: null,
|
||||
eventFlag: null,
|
||||
groupNow: null,
|
||||
groupTimer: null,
|
||||
_groupTiming: null,
|
||||
rundown: {
|
||||
selectedEventIndex: null,
|
||||
numEvents: 0,
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
TimeOfDay,
|
||||
TimerPhase,
|
||||
TimerState,
|
||||
GroupTimerState,
|
||||
isOntimeEvent,
|
||||
runtimeStorePlaceholder,
|
||||
} from 'ontime-types';
|
||||
@@ -40,8 +39,6 @@ import {
|
||||
getCurrent,
|
||||
getElapsed,
|
||||
getExpectedFinish,
|
||||
getGroupTimer,
|
||||
getGroupTiming,
|
||||
getRuntimeOffset,
|
||||
getTimerPhase,
|
||||
hasCrossedMidnight,
|
||||
@@ -54,12 +51,6 @@ type ExpectedMetadata = {
|
||||
isLinkedToLoaded: boolean;
|
||||
} | null;
|
||||
|
||||
/** scheduled content of the running group, split around the loaded event */
|
||||
export type GroupTiming = {
|
||||
before: number;
|
||||
after: number;
|
||||
};
|
||||
|
||||
export type RuntimeState = {
|
||||
clock: TimeOfDay;
|
||||
groupNow: OntimeGroup | null;
|
||||
@@ -68,8 +59,6 @@ export type RuntimeState = {
|
||||
eventFlag: PlayableEvent | null;
|
||||
offset: Offset;
|
||||
timer: TimerState;
|
||||
/** derived from the timer, only refreshed on the getState() projection */
|
||||
groupTimer: GroupTimerState | null;
|
||||
rundown: RundownState;
|
||||
// private properties of the timer calculations
|
||||
_timer: {
|
||||
@@ -83,7 +72,6 @@ export type RuntimeState = {
|
||||
totalDelay: number; // this value comes from rundown service
|
||||
};
|
||||
_group: ExpectedMetadata;
|
||||
_groupTiming: GroupTiming | null;
|
||||
_flag: ExpectedMetadata;
|
||||
_end: ExpectedMetadata;
|
||||
_startEpoch: Maybe<Instant>;
|
||||
@@ -98,7 +86,6 @@ const runtimeState: RuntimeState = {
|
||||
eventFlag: null,
|
||||
offset: { ...runtimeStorePlaceholder.offset },
|
||||
timer: { ...runtimeStorePlaceholder.timer },
|
||||
groupTimer: null,
|
||||
rundown: { ...runtimeStorePlaceholder.rundown },
|
||||
_timer: {
|
||||
forceFinish: null,
|
||||
@@ -111,7 +98,6 @@ const runtimeState: RuntimeState = {
|
||||
totalDelay: 0,
|
||||
},
|
||||
_group: null,
|
||||
_groupTiming: null,
|
||||
_flag: null,
|
||||
_end: null,
|
||||
_startEpoch: null,
|
||||
@@ -129,8 +115,6 @@ export function getState(): Readonly<RuntimeState> {
|
||||
offset: { ...runtimeState.offset },
|
||||
rundown: { ...runtimeState.rundown },
|
||||
timer: { ...runtimeState.timer },
|
||||
// derived here so it can never drift from the timer values it is built on
|
||||
groupTimer: getGroupTimer(runtimeState),
|
||||
_timer: { ...runtimeState._timer },
|
||||
_rundown: { ...runtimeState._rundown },
|
||||
};
|
||||
@@ -172,7 +156,6 @@ export function clearState() {
|
||||
|
||||
runtimeState.groupNow = null;
|
||||
runtimeState._group = null;
|
||||
runtimeState._groupTiming = null;
|
||||
|
||||
runtimeState.rundown.actualStart = null;
|
||||
runtimeState.rundown.selectedEventIndex = null;
|
||||
@@ -914,7 +897,6 @@ export function loadGroupFlagAndEnd(
|
||||
const previousGroup = state.groupNow?.id;
|
||||
state.groupNow = null;
|
||||
state._group = null;
|
||||
state._groupTiming = null;
|
||||
state.eventFlag = null;
|
||||
state._flag = null;
|
||||
state._end = null;
|
||||
@@ -938,11 +920,6 @@ export function loadGroupFlagAndEnd(
|
||||
state.rundown.actualGroupStart = null;
|
||||
}
|
||||
|
||||
// the split is stable while the same event is loaded, so we only calculate it here
|
||||
if (state.groupNow !== null) {
|
||||
state._groupTiming = getGroupTiming(state.groupNow, rundown.entries, state.eventNow.id);
|
||||
}
|
||||
|
||||
// if we don't have a any flags in the rundown then no need to look for it
|
||||
let foundFlag = !flagsPresent;
|
||||
// if we don't have a last event for the group there is no need to find its end time
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test('Editing multiple events', async ({ page }) => {
|
||||
await page.goto('/editor');
|
||||
await page.getByRole('button', { name: 'Edit' }).click();
|
||||
|
||||
// clear rundown
|
||||
await page.getByRole('button', { name: 'Rundown menu' }).click();
|
||||
await page.getByRole('menuitem', { name: 'Clear all' }).click();
|
||||
await page.getByRole('button', { name: 'Delete all' }).click();
|
||||
|
||||
// create two events with distinct titles
|
||||
await page.getByRole('button', { name: 'Create Event' }).click();
|
||||
await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
|
||||
await expect(page.getByTestId('rundown-event')).toHaveCount(2);
|
||||
|
||||
await page.getByTestId('entry-1').getByTestId('entry__title').fill('first');
|
||||
await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
|
||||
await page.getByTestId('entry-2').getByTestId('entry__title').fill('second');
|
||||
await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
|
||||
|
||||
const editor = page.getByTestId('editor-container');
|
||||
|
||||
// a single selection shows the full schedule and the event id
|
||||
await page.getByTestId('entry-1').getByTestId('rundown-event').click();
|
||||
await expect(editor.getByTestId('time-input-timeStart')).toBeVisible();
|
||||
await expect(editor.getByLabel('Title', { exact: true })).toHaveValue('first');
|
||||
|
||||
// selecting both events shows a merged view
|
||||
await page
|
||||
.getByTestId('entry-2')
|
||||
.getByTestId('rundown-event')
|
||||
.click({ modifiers: ['Shift'] });
|
||||
await expect(editor.locator('#eventId')).toHaveValue('2 events selected');
|
||||
await expect(editor.getByText('Automations are not available when editing multiple events')).toBeVisible();
|
||||
|
||||
// start and end times are unique to an event, only the duration can be batched
|
||||
await expect(editor.getByTestId('time-input-timeStart')).toBeHidden();
|
||||
await expect(editor.getByTestId('time-input-timeEnd')).toBeHidden();
|
||||
await expect(editor.getByTestId('time-input-duration')).toBeVisible();
|
||||
|
||||
// fields which do not agree are shown as mixed
|
||||
const title = editor.getByLabel('Title', { exact: true });
|
||||
await expect(title).toHaveValue('');
|
||||
await expect(title).toHaveAttribute('placeholder', 'Mixed');
|
||||
|
||||
// leaving a mixed field without editing it does not overwrite the events
|
||||
await title.click();
|
||||
await page.keyboard.press('Tab');
|
||||
await expect(page.getByTestId('entry-1').getByTestId('entry__title')).toHaveValue('first');
|
||||
await expect(page.getByTestId('entry-2').getByTestId('entry__title')).toHaveValue('second');
|
||||
|
||||
// a mixed field cannot be cleared by emptying it, so an explicit action is offered
|
||||
const clearTitle = editor.getByRole('button', { name: 'Clear', exact: true }).first();
|
||||
await expect(clearTitle).toBeVisible();
|
||||
await clearTitle.click();
|
||||
await expect(page.getByTestId('entry-1').getByTestId('entry__title')).toHaveValue('');
|
||||
await expect(page.getByTestId('entry-2').getByTestId('entry__title')).toHaveValue('');
|
||||
|
||||
// the events now agree, so the field can be cleared by hand and the action is withdrawn
|
||||
await expect(editor.getByLabel('Title', { exact: true })).not.toHaveAttribute('placeholder', 'Mixed');
|
||||
|
||||
// editing a field applies it to the whole selection
|
||||
await title.fill('shared title');
|
||||
await title.press('Enter');
|
||||
await expect(page.getByTestId('entry-1').getByTestId('entry__title')).toHaveValue('shared title');
|
||||
await expect(page.getByTestId('entry-2').getByTestId('entry__title')).toHaveValue('shared title');
|
||||
|
||||
// the value is no longer mixed
|
||||
await expect(editor.getByLabel('Title', { exact: true })).toHaveValue('shared title');
|
||||
|
||||
// a batched duration is applied to every event and the rundown is recalculated once
|
||||
const duration = editor.getByTestId('time-input-duration');
|
||||
await duration.click();
|
||||
await duration.fill('5m');
|
||||
await duration.press('Enter');
|
||||
await expect(page.getByTestId('entry-1').getByTestId('time-input-duration')).toHaveValue('00:05:00');
|
||||
await expect(page.getByTestId('entry-2').getByTestId('time-input-duration')).toHaveValue('00:05:00');
|
||||
// the second event is linked, so its start follows the new end of the first
|
||||
await expect(page.getByTestId('entry-2').getByTestId('time-input-timeStart')).toHaveValue('00:05:00');
|
||||
await expect(page.getByTestId('entry-2').getByTestId('time-input-timeEnd')).toHaveValue('00:10:00');
|
||||
|
||||
// going back to a single selection restores the full editor
|
||||
await page.getByTestId('entry-1').getByTestId('rundown-event').click();
|
||||
await expect(editor.getByTestId('time-input-timeStart')).toBeVisible();
|
||||
await expect(editor.locator('#eventId')).not.toHaveValue('2 events selected');
|
||||
});
|
||||
@@ -33,8 +33,8 @@ test('imports spreadsheet and applies imported rundown to editor', async ({ page
|
||||
await page.getByRole('button', { name: 'Preview import' }).click();
|
||||
await page.getByRole('button', { name: 'Apply import' }).click();
|
||||
await expect(page.getByText('Import complete')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Open editor' })).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Import another' }).click();
|
||||
await expect(page.getByText('Spreadsheet data applied.')).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Reset flow' }).click();
|
||||
|
||||
// verify the data in the rundown
|
||||
await page.getByRole('button', { name: 'Close settings' }).scrollIntoViewIfNeeded();
|
||||
|
||||
@@ -46,8 +46,6 @@ export type OntimeGroup = OntimeBaseEvent & {
|
||||
targetDuration: MaybeNumber;
|
||||
colour: string;
|
||||
custom: EntryCustomFields;
|
||||
/** whether views should display a shared timer for the group instead of the event timer */
|
||||
useGroupTimer: boolean;
|
||||
// !==== RUNTIME METADATA ====! //
|
||||
revision: number;
|
||||
timeStart: MaybeNumber; // calculated at runtime
|
||||
|
||||
@@ -17,7 +17,6 @@ export const runtimeStorePlaceholder: Readonly<RuntimeStore> = {
|
||||
secondaryTimer: null, // change on every update
|
||||
startedAt: null, // change can only be initiated by user
|
||||
},
|
||||
groupTimer: null, // derived from the timer, null unless the running group opted in
|
||||
message: {
|
||||
timer: {
|
||||
text: '',
|
||||
|
||||
@@ -3,14 +3,12 @@ import type { SimpleTimerState } from './AuxTimer.type.js';
|
||||
import type { MessageState } from './MessageControl.type.js';
|
||||
import type { Offset } from './Offset.type.js';
|
||||
import type { RundownState } from './RundownState.type.js';
|
||||
import type { GroupTimerState, TimerState } from './TimerState.type.js';
|
||||
import type { TimerState } from './TimerState.type.js';
|
||||
|
||||
export type RuntimeStore = {
|
||||
// timer data
|
||||
clock: number;
|
||||
timer: TimerState;
|
||||
/** shared timer for the running group, null unless the group opted in */
|
||||
groupTimer: GroupTimerState | null;
|
||||
|
||||
// messages service
|
||||
message: MessageState;
|
||||
|
||||
@@ -11,22 +11,6 @@ export enum TimerPhase {
|
||||
Pending = 'pending',
|
||||
}
|
||||
|
||||
/**
|
||||
* Timer for the running group, present when the group opted into a shared timer.
|
||||
*
|
||||
* The group is treated as a single event containing all its children: the values are
|
||||
* derived from the running event timer plus the content scheduled around it, so pause,
|
||||
* added time, overtime and roll are inherited from the event timer rather than recalculated.
|
||||
*/
|
||||
export type GroupTimerState = {
|
||||
/** Time remaining in the group */
|
||||
current: number;
|
||||
/** Time elapsed since the group started */
|
||||
elapsed: number;
|
||||
/** Total time in the group, includes time added to the running event */
|
||||
duration: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gathers the current running timer state
|
||||
*/
|
||||
|
||||
@@ -119,7 +119,7 @@ export type { Offset } from './definitions/runtime/Offset.type.js';
|
||||
export { OffsetMode } from './definitions/runtime/Offset.type.js';
|
||||
export type { RuntimeStore } from './definitions/runtime/RuntimeStore.type.js';
|
||||
export { runtimeStorePlaceholder } from './definitions/runtime/RuntimeStore.js';
|
||||
export { type GroupTimerState, type TimerState, TimerPhase } from './definitions/runtime/TimerState.type.js';
|
||||
export { type TimerState, TimerPhase } from './definitions/runtime/TimerState.type.js';
|
||||
|
||||
// ---> Extra Timer
|
||||
export { type SimpleTimerState, SimplePlayback, SimpleDirection } from './definitions/runtime/AuxTimer.type.js';
|
||||
|
||||
@@ -54,7 +54,6 @@ export const group: Omit<OntimeGroup, 'id'> = {
|
||||
targetDuration: null,
|
||||
colour: '',
|
||||
custom: {},
|
||||
useGroupTimer: false,
|
||||
// !==== RUNTIME METADATA ====! //
|
||||
revision: 0, // calculated at runtime
|
||||
timeStart: null, // calculated at runtime
|
||||
|
||||
@@ -69,7 +69,6 @@ export function createGroup(patch?: Partial<OntimeGroup>): OntimeGroup {
|
||||
targetDuration: patch.targetDuration ?? null,
|
||||
colour: makeString(patch.colour, ''),
|
||||
custom: patch.custom ?? {},
|
||||
useGroupTimer: typeof patch.useGroupTimer === 'boolean' ? patch.useGroupTimer : false,
|
||||
revision: 0,
|
||||
timeStart: null,
|
||||
timeEnd: null,
|
||||
|
||||
Reference in New Issue
Block a user