Compare commits

..

1 Commits

Author SHA1 Message Date
Carlos Valente 2a2554d32a refactor: prevent custom field overriding prototype property 2026-03-14 07:42:40 +01:00
47 changed files with 1070 additions and 1556 deletions
+6 -7
View File
@@ -57,21 +57,20 @@
]
},
"devDependencies": {
"@sentry/vite-plugin": "5.1.1",
"@sentry/vite-plugin": "^2.16.1",
"@types/prismjs": "^1.26.5",
"@types/react": "^19.1.12",
"@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "5.2.0",
"@vitejs/plugin-react": "4.5.1",
"babel-plugin-react-compiler": "1.0.0",
"ontime-types": "workspace:*",
"ontime-utils": "workspace:*",
"sass": "^1.57.1",
"typescript": "catalog:",
"vite": "7.3.1",
"vite-plugin-compression2": "2.5.1",
"vite-plugin-prismjs-plus": "1.1.0",
"vite-plugin-svgr": "4.5.0",
"vite-tsconfig-paths": "6.1.1",
"vite": "6.3.1",
"vite-plugin-compression2": "2.2.0",
"vite-plugin-svgr": "4.3.0",
"vite-tsconfig-paths": "5.1.4",
"vitest": "catalog:"
}
}
+2 -1
View File
@@ -13,7 +13,6 @@ export const RUNDOWN = ['rundown'];
export const RUNTIME = ['runtimeStore'];
export const URL_PRESETS = ['urlpresets'];
export const VIEW_SETTINGS = ['viewSettings'];
export const CSS_OVERRIDE = ['cssOverride'];
export const CLIENT_LIST = ['clientList'];
export const REPORT = ['report'];
export const TRANSLATION = ['translation'];
@@ -22,7 +21,9 @@ export const TRANSLATION = ['translation'];
export const apiEntryUrl = `${serverURL}/data`;
const userAssetsPath = 'user';
const cssOverridePath = 'styles/override.css';
const customTranslationsPath = 'translations/translations.json';
export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
export const customTranslationsURL = `${serverURL}/${userAssetsPath}/${customTranslationsPath}`;
-14
View File
@@ -153,20 +153,6 @@ export async function postCloneEntry(
return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
}
export type PastePayload = {
entryIds: EntryId[];
sourceRundownId: string;
afterId?: EntryId;
beforeId?: EntryId;
};
/**
* HTTP request for pasting entries into the active rundown
*/
export async function postPasteEntries(rundownId: RundownId, data: PastePayload): Promise<AxiosResponse<Rundown>> {
return axios.post(`${rundownPath}/${rundownId}/paste`, data);
}
/**
* HTTP request for grouping a list of entries into a group
*/
@@ -1,18 +0,0 @@
import { useQuery } from '@tanstack/react-query';
import { MILLIS_PER_HOUR } from 'ontime-utils';
import { getCSSContents } from '../api/assets';
import { CSS_OVERRIDE } from '../api/constants';
export default function useCssOverride(enabled: boolean) {
const { data, status } = useQuery({
queryKey: CSS_OVERRIDE,
queryFn: ({ signal }) => getCSSContents({ signal }),
staleTime: MILLIS_PER_HOUR,
enabled
});
return {
data: data ?? '', status
};
}
@@ -35,13 +35,11 @@ import { useCallback, useMemo } from 'react';
import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
import { RUNDOWN } from '../api/constants';
import {
PastePayload,
ReorderEntry,
deleteEntries,
patchReorderEntry,
postAddEntry,
postCloneEntry,
postPasteEntries,
putBatchEditEvents,
putEditEntry,
requestApplyDelay,
@@ -272,35 +270,6 @@ export const useEntryActions = () => {
[cloneEntryMutation, getCurrentRundownData],
);
/**
* Calls mutation to paste entries
* @private
*/
const { mutateAsync: pasteEntriesMutation } = useMutation({
mutationFn: ([rundownId, data]: [string, PastePayload]) => postPasteEntries(rundownId, data),
onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
});
/**
* Paste entries from copy store into the active rundown
*/
const pasteEntries = useCallback(
async (data: PastePayload) => {
try {
const rundownId = getCurrentRundownData()?.id;
if (!rundownId) {
throw new Error('Rundown not initialised');
}
await pasteEntriesMutation([rundownId, data]);
} catch (error) {
logAxiosError('Error pasting entries', error);
}
},
[pasteEntriesMutation, getCurrentRundownData],
);
/**
* Calls mutation to update existing entry
* @private
@@ -950,7 +919,6 @@ export const useEntryActions = () => {
clone,
deleteEntry,
deleteAllEntries,
pasteEntries,
ungroup,
getEntryById,
groupEntries,
@@ -967,7 +935,6 @@ export const useEntryActions = () => {
clone,
deleteEntry,
deleteAllEntries,
pasteEntries,
ungroup,
getEntryById,
groupEntries,
+5 -5
View File
@@ -202,20 +202,20 @@ export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
clock: state.clock,
mode: state.offset.mode,
groupExpectedEnd: state.offset.expectedGroupEnd,
actualGroupStart: state.rundown.actualGroupStart,
// we can force these numbers to 0 for this use case to avoid null checks
actualGroupStart: state.rundown.actualGroupStart ?? 0,
currentDay: state.rundown.currentDay ?? 0,
playback: state.timer.playback,
phase: state.timer.phase,
}));
export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
clock: state.clock,
mode: state.offset.mode,
actualStart: state.rundown.actualStart,
plannedStart: state.rundown.plannedStart,
// we can force these numbers to 0 for this use case to avoid null checks
actualStart: state.rundown.actualStart ?? 0,
plannedStart: state.rundown.plannedStart ?? 0,
currentDay: state.rundown.currentDay ?? 0,
playback: state.timer.playback,
phase: state.timer.phase,
}));
/* ======================= View specific subscriptions ======================= */
@@ -1,16 +1,14 @@
import { create } from 'zustand';
type EntryCopyStore = {
entryIds: Set<string>;
sourceRundownId: string | null;
setCopyEntries: (ids: string[], rundownId: string) => void;
clearCopy: () => void;
entryCopyId: string | null;
entryCopyMode: 'copy' | 'cut';
setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
};
export const useEntryCopy = create<EntryCopyStore>()((set) => ({
entryIds: new Set(),
sourceRundownId: null,
setCopyEntries: (ids: string[], rundownId: string) =>
set({ entryIds: new Set(ids), sourceRundownId: rundownId }),
clearCopy: () => set({ entryIds: new Set(), sourceRundownId: null }),
entryCopyId: null,
entryCopyMode: 'copy',
setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
set({ entryCopyId, entryCopyMode: mode }),
}));
-4
View File
@@ -13,7 +13,6 @@ import { isProduction, websocketUrl } from '../../externals';
import {
APP_SETTINGS,
CLIENT_LIST,
CSS_OVERRIDE,
CUSTOM_FIELDS,
PROJECT_DATA,
REPORT,
@@ -200,9 +199,6 @@ export const connectSocket = () => {
case RefetchKey.ViewSettings:
ontimeQueryClient.invalidateQueries({ queryKey: VIEW_SETTINGS });
break;
case RefetchKey.CssOverride:
ontimeQueryClient.invalidateQueries({ queryKey: CSS_OVERRIDE });
break;
case RefetchKey.Translation:
ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
break;
@@ -1,4 +1,4 @@
import Prism from 'virtual:prismjs';
import Prism from 'prismjs/components/prism-core';
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
import Editor from 'react-simple-code-editor';
import 'prismjs/components/prism-css';
@@ -0,0 +1,5 @@
declare module 'prismjs/components/prism-core' {
export * from 'prismjs';
}
declare module 'prismjs/components/prism-css';
@@ -208,28 +208,26 @@ export function MetadataTimes() {
}
function GroupTimes() {
const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
const currentGroupId = useCurrentGroupId();
const group = useEntry(currentGroupId) as OntimeGroup | null;
const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback) ;
const active = isPlaybackActive(playback);
// the group end time does not encode any day offsets so it is calculated with group start time and duration
// the group end time dose not encode any day offsets so it is calculated with group start time and duration
const plannedGroupEnd = (() => {
if (!hasRunningTimer) return null;
if (!active) return null;
if (!group || group.timeStart === null) return null;
const normalizedClock = clock + currentDay * dayInMs;
if (mode === OffsetMode.Absolute) {
return group.timeStart + group.duration - normalizedClock;
}
if (actualGroupStart === null) return null;
return actualGroupStart + group.duration - normalizedClock;
return mode === OffsetMode.Absolute
? group.timeStart + group.duration - normalizedClock
: actualGroupStart + group.duration - normalizedClock;
})();
const plannedTimeUntilGroupEnd = formatDueTime(plannedGroupEnd, 3, TimerType.CountDown);
const expectedGroupEnd = hasRunningTimer && groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
const expectedTimeUntilGroupEnd = formatDueTime(expectedGroupEnd, 3, TimerType.CountDown);
return (
@@ -240,7 +238,7 @@ function GroupTimes() {
<span
className={cx([
style.time,
(!group || !hasRunningTimer) && style.muted,
(!group || !active) && style.muted,
plannedTimeUntilGroupEnd === 'due' && style.dueTime,
])}
>
@@ -252,7 +250,7 @@ function GroupTimes() {
<span
className={cx([
style.time,
expectedGroupEnd === null && style.muted,
!groupExpectedEnd && style.muted,
expectedTimeUntilGroupEnd === 'due' && style.dueTime,
])}
>
@@ -264,27 +262,25 @@ function GroupTimes() {
}
function FlagTimes() {
const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
const { clock, mode, actualStart, plannedStart, playback, currentDay } = useFlagTimerOverView();
const { id, expectedStart } = useNextFlag();
const entry = useEntry(id) as OntimeEvent | null;
const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
const active = isPlaybackActive(playback);
const plannedFlagStart = (() => {
if (!hasRunningTimer) return null;
if (!active) return null;
if (!entry) return null;
const normalizedTimeStart = entry.timeStart + entry.dayOffset * dayInMs;
const normalizedClock = clock + currentDay * dayInMs;
if (mode === OffsetMode.Absolute) {
return normalizedTimeStart - normalizedClock;
}
if (actualStart === null || plannedStart === null) return null;
return normalizedTimeStart + actualStart - plannedStart - normalizedClock;
return mode === OffsetMode.Absolute
? normalizedTimeStart - normalizedClock
: normalizedTimeStart + actualStart - plannedStart - normalizedClock;
})();
const plannedTimeUntilDisplay = formatDueTime(plannedFlagStart, 3, TimerType.CountDown);
const expectedTimeUntil = hasRunningTimer && expectedStart !== null ? expectedStart - clock : null;
const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);
const title = entry?.title ?? null;
@@ -298,7 +294,7 @@ function FlagTimes() {
data-testid='flag-plannedStart'
className={cx([
style.time,
(!entry || !hasRunningTimer) && style.muted,
(!entry || !active) && style.muted,
plannedTimeUntilDisplay === 'due' && style.dueTime,
])}
>
+3 -3
View File
@@ -13,6 +13,7 @@ import { TbFlagFilled } from 'react-icons/tb';
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { useEntryActionsContext } from '../../common/context/EntryActionsContext';
import { useEntryCopy } from '../../common/stores/entryCopyStore';
import { RundownMetadataObject, lastMetadataKey } from '../../common/utils/rundownMetadata';
import { AppMode } from '../../ontimeConfig';
import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
@@ -63,7 +64,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
const entryActions = useEntryActionsContext();
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
// cursor
const { editorMode } = useEditorFollowMode();
@@ -104,10 +105,9 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
// Keyboard shortcuts
useRundownKeyboard({
cursor,
rundownId: id,
selectedEvents,
commands,
clearSelectedEvents,
setEntryCopyId,
});
// DND handlers
@@ -96,6 +96,14 @@ function EventEditorEmpty() {
<Kbd>C</Kbd>
</td>
</tr>
<tr>
<td>Cut selected entry</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>X</Kbd>
</td>
</tr>
<tr>
<td>Paste above</td>
<td>
@@ -26,7 +26,7 @@ export function useRundownCommands({
selectEntry: applySelection,
handleCollapseGroup,
}: UseRundownCommandsOptions) {
const { addEntry, clone, deleteEntry, move, pasteEntries } = entryActions;
const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
const deleteAtCursor = useCallback(
(cursor: string | null) => {
@@ -40,21 +40,52 @@ export function useRundownCommands({
[entries, flatOrder, deleteEntry, applySelection],
);
const pasteAtCursor = useCallback(
(cursor: EntryId | null, above = false) => {
const { entryIds, sourceRundownId } = useEntryCopy.getState();
if (entryIds.size === 0 || !sourceRundownId) {
const insertCopyAtId = useCallback(
(atId: EntryId | null, above = false) => {
// lazily get the value from the store
const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
if (entryCopyId === null || !entries[entryCopyId]) {
// we cant clone without selection
return;
}
pasteEntries({
entryIds: Array.from(entryIds),
sourceRundownId,
afterId: above ? undefined : (cursor ?? undefined),
beforeId: above ? (cursor ?? undefined) : undefined,
let normalisedAtId = atId;
const elementToCopy = entries[entryCopyId];
const refElement = atId ? entries[atId] : undefined;
if (refElement && 'parent' in refElement && refElement.parent && elementToCopy.type === SupportedEntry.Group) {
normalisedAtId = refElement.parent;
}
if (entryCopyMode === 'cut') {
if (!normalisedAtId) {
const firstId = flatOrder[0];
if (!firstId || firstId === entryCopyId) {
return;
}
reorderEntry(entryCopyId, firstId, 'before')
.then(() => setEntryCopyId(null))
.catch(() => {});
return;
}
if (normalisedAtId === entryCopyId) {
return;
}
const placement = above ? 'before' : 'after';
reorderEntry(entryCopyId, normalisedAtId, placement)
.then(() => setEntryCopyId(null))
.catch(() => {});
return;
}
clone(entryCopyId, {
after: above ? undefined : (normalisedAtId ?? undefined),
// if we don't have a cursor add the new event on top
before: above ? (normalisedAtId ?? undefined) : undefined,
});
},
[pasteEntries],
[entries, flatOrder, clone, reorderEntry],
);
/**
@@ -186,7 +217,7 @@ export function useRundownCommands({
return {
cloneEntry,
deleteAtCursor,
pasteAtCursor,
insertCopyAtId,
insertAtId,
selectGroup,
selectEntry,
@@ -6,8 +6,6 @@ import { useEventSelection } from '../useEventSelection';
interface UseRundownKeyboardOptions {
cursor: EntryId | null;
rundownId: string | undefined;
selectedEvents: Set<EntryId>;
commands: {
selectEntry: (cursor: EntryId | null, direction: 'up' | 'down') => EntryId | null;
selectGroup: (cursor: EntryId | null, direction: 'up' | 'down') => EntryId | null;
@@ -17,9 +15,10 @@ interface UseRundownKeyboardOptions {
moveEntry: (cursor: EntryId | null, direction: 'up' | 'down') => void;
deleteAtCursor: (cursor: EntryId | null) => void;
insertAtId: (patch: Partial<OntimeEntry> & { type: SupportedEntry }, id: EntryId | null, above?: boolean) => void;
pasteAtCursor: (cursor: EntryId | null, above?: boolean) => void;
insertCopyAtId: (atId: EntryId | null, above?: boolean) => void;
};
clearSelectedEvents: () => void;
setEntryCopyId: (id: EntryId | null, mode?: 'copy' | 'cut') => void;
}
/**
@@ -38,10 +37,9 @@ function isEditableElement(target: EventTarget | null): boolean {
export function useRundownKeyboard({
cursor,
rundownId,
selectedEvents,
commands,
clearSelectedEvents,
setEntryCopyId,
}: UseRundownKeyboardOptions) {
const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
@@ -140,7 +138,7 @@ export function useRundownKeyboard({
'Escape',
() => {
clearSelectedEvents();
useEntryCopy.getState().clearCopy();
setEntryCopyId(null);
},
{ preventDefault: true, usePhysicalKeys: true },
],
@@ -194,25 +192,33 @@ export function useRundownKeyboard({
[
'mod + C',
(event) => {
if (cursor === null || isEditableElement(event.target) || !rundownId) {
if (cursor === null || isEditableElement(event.target)) {
return;
}
event.preventDefault();
// if multiple events are selected, copy all of them; otherwise copy the cursor entry
const ids = selectedEvents.size > 1 ? Array.from(selectedEvents) : [cursor];
useEntryCopy.getState().setCopyEntries(ids, rundownId);
setEntryCopyId(cursor);
},
{ usePhysicalKeys: true },
],
[
'mod + X',
(event) => {
if (cursor === null || isEditableElement(event.target)) {
return;
}
event.preventDefault();
setEntryCopyId(cursor, 'cut');
},
{ usePhysicalKeys: true },
],
[
'mod + V',
(event) => {
if (isEditableElement(event.target) || useEntryCopy.getState().entryIds.size === 0) {
if (isEditableElement(event.target) || useEntryCopy.getState().entryCopyId === null) {
return;
}
event.preventDefault();
commands.pasteAtCursor(cursor);
commands.insertCopyAtId(cursor);
},
{ usePhysicalKeys: true },
],
@@ -220,11 +226,11 @@ export function useRundownKeyboard({
[
'mod + shift + V',
(event) => {
if (isEditableElement(event.target) || useEntryCopy.getState().entryIds.size === 0) {
if (isEditableElement(event.target) || useEntryCopy.getState().entryCopyId === null) {
return;
}
event.preventDefault();
commands.pasteAtCursor(cursor, true);
commands.insertCopyAtId(cursor, true);
},
{ usePhysicalKeys: true },
],
@@ -17,6 +17,10 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 1px dashed $blue-500;
outline-offset: -2px;
}
}
.drag {
@@ -6,6 +6,7 @@ import { IoCheckmarkDone, IoClose, IoReorderTwo } from 'react-icons/io5';
import Button from '../../../common/components/buttons/Button';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { cx } from '../../../common/utils/styleUtils';
import DelayInput from './DelayInput';
@@ -21,6 +22,7 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
const { applyDelay, deleteEntry } = useEntryActionsContext();
const handleRef = useRef<null | HTMLSpanElement>(null);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const {
attributes: dragAttributes,
@@ -59,7 +61,7 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
return (
<div
className={cx([style.delay, hasCursor && style.hasCursor])}
className={cx([style.delay, hasCursor && style.hasCursor, entryCopyId === data.id && style.copyTarget])}
ref={setNodeRef}
style={dragStyle}
data-testid='rundown-delay'
@@ -58,6 +58,10 @@ $skip-opacity: 0.2;
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
&.past:not(.skip) {
.timerNote,
.statusElements,
@@ -17,6 +17,7 @@ import { TbFlagFilled } from 'react-icons/tb';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
import { useEventIdSwapping } from '../useEventIdSwapping';
@@ -105,6 +106,7 @@ export default function RundownEvent({
const selectEntry = useEventSelection((state) => state.setSelectedEvents);
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const handleRef = useRef<null | HTMLSpanElement>(null);
@@ -246,6 +248,7 @@ export default function RundownEvent({
playback && style[playback],
isSelected && style.selected,
hasCursor && style.hasCursor,
entryCopyId === eventId && style.copyTarget,
]);
const handleFocusClick = (event: MouseEvent) => {
@@ -13,6 +13,10 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
&.expanded {
margin-block: 0.5rem 0;
border-radius: $block-border-radius $block-border-radius 0 0;
@@ -16,6 +16,7 @@ import IconButton from '../../../common/components/buttons/IconButton';
import Tag from '../../../common/components/tag/Tag';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { getOffsetState } from '../../../common/utils/offset';
import { cx, getAccessibleColour, timerPlaceholder } from '../../../common/utils/styleUtils';
@@ -42,6 +43,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
{
@@ -131,6 +133,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
style.group,
hasCursor && style.hasCursor,
!collapsed && style.expanded,
entryCopyId === data.id && style.copyTarget,
])}
ref={setNodeRef}
onClick={handleFocusClick}
@@ -18,6 +18,9 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
}
.binder {
@@ -8,6 +8,7 @@ import Input from '../../../common/components/input/input/Input';
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
import { useEventSelection } from '../useEventSelection';
@@ -30,6 +31,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
{
@@ -87,6 +89,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
className={cx([
style.milestone,
hasCursor ? style.hasCursor : null,
entryCopyId === entryId ? style.copyTarget : null,
])}
ref={setNodeRef}
onClick={handleFocusClick}
+22 -26
View File
@@ -1,39 +1,35 @@
import { PropsWithChildren, Suspense } from 'react';
import { PropsWithChildren } from 'react';
import useCssOverride from '../common/hooks-query/useCssOverride';
import { overrideStylesURL } from '../common/api/constants';
import useViewSettings from '../common/hooks-query/useViewSettings';
import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
import Loader from './common/loader/Loader';
const scriptTagId = 'ontime-stylesheet-override';
function OverrideStyles() {
'use memo';
const { data: settings } = useViewSettings();
const { overrideStyles } = settings;
const { data: css } = useCssOverride(overrideStyles);
const cssBlob = URL.createObjectURL(new Blob([css], { type: 'text/css' }));
//@ts-expect-error disabled exists on link when rel='stylesheet' https://react.dev/reference/react-dom/components/link#props
return <link id={scriptTagId} rel='stylesheet' href={cssBlob} precedence='high' disabled={!overrideStyles} />;
}
export default function ViewLoader({ children }: PropsWithChildren) {
'use memo';
const { data } = useViewSettings();
const { shouldRender } = useRuntimeStylesheet(data.overrideStyles ? overrideStylesURL : undefined);
// we need to be able to override the background colour with the key param
const searchParams = new URLSearchParams(window.location.search);
const colourFromParams = searchParams.get('keyColour') ?? '#101010';
// eventually we would want to leverage suspense here
// while the feature is not ready, we simply trigger a loader
// suspense would have the advantage of being triggered also by react-query
if (!shouldRender) {
return (
<>
<style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
<Loader />
</>
);
}
return (
<Suspense
fallback={
<>
<style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
<Loader />
</>
}
>
<OverrideStyles />
<>
<style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
{children}
</Suspense>
</>
);
}
@@ -4,7 +4,6 @@
background-color: transparent;
border-radius: $component-border-radius-md;
text-wrap: nowrap;
white-space: nowrap;
display: flex;
align-items: center;
+1 -2
View File
@@ -9,8 +9,7 @@
],
"types": [
"vite/client",
"vite-plugin-svgr/client",
"vite-plugin-prismjs-plus/client",
"vite-plugin-svgr/client"
],
"module": "esnext",
"moduleResolution": "bundler",
+10 -6
View File
@@ -4,7 +4,6 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { compression } from 'vite-plugin-compression2';
import prismjsPlugin from 'vite-plugin-prismjs-plus';
import svgrPlugin from 'vite-plugin-svgr';
import { ONTIME_VERSION } from './src/ONTIME_VERSION';
@@ -49,11 +48,6 @@ export default defineConfig({
algorithm: 'brotliCompress',
exclude: /\.(html)$/, // Ontime cloud: Exclude HTML files from compression so we can change the base property at runtime
}),
prismjsPlugin({
manual: true,
languages: ['css',],
css: true
}),
],
server: {
port: 3000,
@@ -94,6 +88,16 @@ export default defineConfig({
build: {
outDir: './build',
sourcemap: true,
rollupOptions: {
output: {
manualChunks(id) {
// Split vendor code
if (id.includes('node_modules')) {
return 'vendor';
}
},
},
},
},
resolve: {
alias: {
+1 -1
View File
@@ -1,3 +1,3 @@
export interface IAdapter {
shutdown: () => Promise<void>;
shutdown: () => void;
}
+2 -9
View File
@@ -72,17 +72,10 @@ class OscServer implements IAdapter {
});
this.udpSocket.bind(port);
}
shutdown(): Promise<void> {
shutdown() {
logger.info(LogOrigin.Rx, 'OSC: Closing server');
const socket = this.udpSocket;
this.udpSocket?.close();
this.udpSocket = null;
if (!socket) {
return Promise.resolve();
}
return new Promise((resolve) => {
socket.close(() => resolve());
});
}
}
+2 -19
View File
@@ -235,25 +235,8 @@ class SocketServer implements IAdapter {
}
}
shutdown(): Promise<void> {
const wss = this.wss;
if (!wss) {
return Promise.resolve();
}
return new Promise((resolve) => {
// Notify clients first so they can reconnect gracefully
for (const client of wss.clients) {
if (client.readyState === WebSocket.OPEN || client.readyState === WebSocket.CONNECTING) {
client.close(1001, 'Server shutting down');
}
}
wss.close(() => {
this.wss = null;
resolve();
});
});
shutdown() {
this.wss?.close();
}
}
@@ -24,7 +24,6 @@ router.post('/css', validatePostCss, async (req: Request, res: Response<never |
const { css } = req.body;
try {
await writeCssFile(css);
sendRefetch(RefetchKey.CssOverride);
res.status(204).send();
} catch (error) {
const message = getErrorMessage(error);
@@ -35,7 +34,6 @@ router.post('/css', validatePostCss, async (req: Request, res: Response<never |
router.post('/css/restore', async (_req: Request, res: Response<string | ErrorResponse>) => {
try {
await writeCssFile(defaultCss);
sendRefetch(RefetchKey.CssOverride);
res.status(200).send(defaultCss);
} catch (error) {
const message = getErrorMessage(error);
@@ -126,4 +126,15 @@ describe('sanitiseCustomFields()', () => {
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(expectedCustomFields);
});
it('filters keys that collide with Object prototype properties', () => {
const customFields: CustomFields = {
toString: { label: 'toString', type: 'text', colour: 'red' },
normalField: { label: 'normalField', type: 'text', colour: 'green' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual({
normalField: { label: 'normalField', type: 'text', colour: 'green' },
});
});
});
@@ -1,5 +1,5 @@
import { CustomField, CustomFields, DatabaseModel } from 'ontime-types';
import { checkRegex, customFieldLabelToKey } from 'ontime-utils';
import { checkRegex, customFieldLabelToKey, isObjectPrototypeKey } from 'ontime-utils';
import type { ErrorEmitter } from '../../utils/parserUtils.js';
@@ -45,6 +45,7 @@ export function sanitiseCustomFields(data: object): CustomFields {
'type' in data &&
(data.type === 'text' || data.type === 'image') &&
checkRegex.isAlphanumericWithSpace(data.label) &&
!isObjectPrototypeKey(key) &&
key === customFieldLabelToKey(data.label)
);
}
@@ -1,5 +1,5 @@
import { body, param } from 'express-validator';
import { checkRegex } from 'ontime-utils';
import { checkRegex, customFieldLabelToKey, isObjectPrototypeKey } from 'ontime-utils';
import { requestValidationFunction } from '../validation-utils/validationFunction.js';
@@ -9,7 +9,7 @@ export const validateCustomField = [
.trim()
.notEmpty()
.custom((value) => {
return checkRegex.isAlphanumericWithSpace(value);
return checkRegex.isAlphanumericWithSpace(value) && !isObjectPrototypeKey(customFieldLabelToKey(value));
}),
body('type').isIn(['text', 'image']),
body('colour').isString().trim(),
@@ -24,7 +24,7 @@ export const validateEditCustomField = [
.trim()
.notEmpty()
.custom((value) => {
return checkRegex.isAlphanumericWithSpace(value);
return checkRegex.isAlphanumericWithSpace(value) && !isObjectPrototypeKey(customFieldLabelToKey(value));
}),
body('type').isIn(['text', 'image']),
body('colour').isString().trim(),
@@ -1,37 +0,0 @@
import xlsx from 'xlsx';
import { demoDb } from '../../../models/demoProject.js';
import { generateExcelFile } from '../excel.service.js';
describe('generateExcelFile()', () => {
it('sanitises long worksheet names to an Excel-compatible value', () => {
const buffer = generateExcelFile(
{
...demoDb.rundowns.default,
title: 'This is a very long name with many characters and weird things: like [Main]/?*',
},
demoDb.customFields,
);
const workbook = xlsx.read(buffer, { type: 'buffer' });
const worksheetName = workbook.SheetNames[0];
expect(worksheetName).toBeDefined();
expect(worksheetName.length).toBeLessThanOrEqual(31);
expect(worksheetName).not.toMatch(/[:\\/?*3[\]]/);
});
it('falls back to default worksheet name when title is fully invalid', () => {
const buffer = generateExcelFile(
{
...demoDb.rundowns.default,
title: '[]:*?/\\',
},
demoDb.customFields,
);
const workbook = xlsx.read(buffer, { type: 'buffer' });
expect(workbook.SheetNames[0]).toBe('Rundown');
});
});
@@ -21,18 +21,6 @@ import { rundownToTabular } from './excel.utils.js';
// we keep the excel data in memory to allow the flow upload -> preview
let excelData: WorkBook = xlsx.utils.book_new();
const maxWorksheetNameLength = 31;
const invalidWorksheetCharsRegex = /[:\\/?*[\]]/g;
function getValidWorksheetName(title: string): string {
const sanitisedTitle = title.replaceAll(invalidWorksheetCharsRegex, ' ').trim().replace(/\s+/g, ' ');
const withFallback = sanitisedTitle.length > 0 ? sanitisedTitle : 'Rundown';
const truncatedTitle = withFallback.slice(0, maxWorksheetNameLength).trim();
return truncatedTitle.length > 0 ? truncatedTitle : 'Rundown';
}
/**
* Receives and parses an excel file
* The file is deleted after being read
@@ -105,8 +93,7 @@ export function generateExcelFile(rundown: Rundown, customFields: CustomFields):
const workbook = xlsx.utils.book_new();
const worksheet = xlsx.utils.aoa_to_sheet(rundownToTabular(rundown, customFields));
const worksheetName = getValidWorksheetName(rundown.title || 'Rundown');
xlsx.utils.book_append_sheet(workbook, worksheet, worksheetName);
xlsx.utils.book_append_sheet(workbook, worksheet, rundown.title || 'Rundown');
return xlsx.write(workbook, { type: 'buffer', bookType: 'xlsx' });
}
@@ -188,7 +188,7 @@ export function parseRundown(
*/
export function sanitiseCustomFields(customFields: CustomFields, entry: OntimeEvent | OntimeMilestone | OntimeGroup) {
for (const field in entry.custom) {
if (field in customFields) continue;
if (Object.hasOwn(customFields, field)) continue;
delete entry.custom[field];
}
return entry;
@@ -18,7 +18,6 @@ import {
groupEntries,
initRundown,
loadRundown,
pasteEntries,
reorderEntry,
swapEvents,
ungroupEntries,
@@ -31,7 +30,6 @@ import {
entryPutValidator,
entryReorderValidator,
entrySwapValidator,
pastePostValidator,
rundownArrayOfIds,
rundownPostValidator,
validateRundownMutation,
@@ -304,29 +302,6 @@ router.post(
},
);
/**
* Pastes entries from a source rundown into the active rundown
*/
router.post(
'/:rundownId/paste',
pastePostValidator,
validateRundownMutation,
async (req: Request, res: Response<Rundown | ErrorResponse>) => {
try {
const rundown = await pasteEntries({
entryIds: req.body.entryIds,
sourceRundownId: req.body.sourceRundownId,
afterId: req.body.afterId,
beforeId: req.body.beforeId,
});
res.status(200).send(rundown);
} catch (error) {
const message = getErrorMessage(error);
res.status(400).send({ message });
}
},
);
/**
* Creates a group out of a list of entries
*/
@@ -16,7 +16,7 @@ import {
isOntimeEvent,
isOntimeGroup,
} from 'ontime-types';
import { customFieldLabelToKey, getInsertAfterId, resolveInsertParent } from 'ontime-utils';
import { customFieldLabelToKey, getInsertAfterId, isObjectPrototypeKey, resolveInsertParent } from 'ontime-utils';
import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
@@ -334,102 +334,6 @@ export async function swapEvents(fromId: EntryId, toId: EntryId): Promise<Rundow
return rundownResult;
}
/**
* Pastes a list of entries into the active rundown
* Supports cross-rundown paste within the same instance
* @throws if any entry is not found in the source rundown
*/
export async function pasteEntries(payload: {
entryIds: EntryId[];
sourceRundownId: string;
afterId?: EntryId;
beforeId?: EntryId;
}): Promise<Rundown> {
const { entryIds, sourceRundownId, afterId, beforeId } = payload;
const { rundown, commit } = createTransaction({ mutableRundown: true, mutableCustomFields: false });
// resolve source rundown
const sourceRundown =
sourceRundownId === rundown.id ? rundown : getDataProvider().getRundown(sourceRundownId);
// validate all entry IDs exist in source
for (const entryId of entryIds) {
if (!sourceRundown.entries[entryId]) {
throw new Error(`Entry with ID ${entryId} not found in source rundown`);
}
}
// resolve insertion position
let currentAfterId: EntryId | undefined;
if (afterId) {
currentAfterId = afterId;
} else if (beforeId) {
// for "before" positioning, pass it to the first clone and then chain after
currentAfterId = undefined;
}
const newEntryIds: EntryId[] = [];
// sort entry IDs by source rundown flatOrder so paste preserves rundown order
// regardless of the order they were selected (e.g. ctrl-click order)
const validIds = entryIds.filter((id) => sourceRundown.entries[id]);
const orderedIds = validIds.sort((a, b) => {
const idxA = sourceRundown.flatOrder.indexOf(a);
const idxB = sourceRundown.flatOrder.indexOf(b);
return idxA - idxB;
});
for (let i = 0; i < orderedIds.length; i++) {
const entryId = orderedIds[i];
const sourceEntry = sourceRundown.entries[entryId];
// resolve position reference for this entry
// when pasting a group and the reference is a child inside another group,
// normalise to the parent group so the pasted group lands at the top level
const options: InsertOptions = {};
if (i === 0 && beforeId && !afterId) {
options.before = normaliseGroupPosition(rundown, sourceEntry, beforeId);
} else if (currentAfterId) {
options.after = normaliseGroupPosition(rundown, sourceEntry, currentAfterId);
}
const newEntry = rundownMutation.clone(rundown, sourceEntry, options);
newEntryIds.push(newEntry.id);
// chain: each new entry becomes the afterId for the next
currentAfterId = newEntry.id;
}
const { rundown: rundownResult, rundownMetadata, revision } = commit();
// schedule the side effects
setImmediate(() => {
updateRuntimeOnChange(rundownMetadata);
notifyChanges(rundownMetadata, revision, { timer: newEntryIds, external: true });
});
return rundownResult;
}
/**
* When pasting a group, the position reference must be a top-level entry.
* If the reference is a child inside another group, resolve to the parent
* so the pasted group ends up at the correct position in rundown.order.
*/
function normaliseGroupPosition(rundown: Rundown, sourceEntry: OntimeEntry, referenceId: EntryId): EntryId {
if (!isOntimeGroup(sourceEntry)) {
return referenceId;
}
const referenceEntry = rundown.entries[referenceId];
if (referenceEntry && 'parent' in referenceEntry && referenceEntry.parent) {
return referenceEntry.parent;
}
return referenceId;
}
/**
* Clones an entry, ensuring that all dependencies are preserved
* Handles cloning children if the entry is a group
@@ -521,6 +425,9 @@ export async function createCustomField(customField: CustomField): Promise<Custo
if (!key) {
throw new Error('Unable to convert label to a valid key');
}
if (isObjectPrototypeKey(key)) {
throw new Error('Label conflicts with a reserved field name');
}
const { customFields, commit } = createTransaction({ mutableRundown: false, mutableCustomFields: true });
@@ -559,7 +466,7 @@ export async function editCustomField(
mutableCustomFields: true,
});
if (!(key in customFields)) {
if (!Object.hasOwn(customFields, key)) {
throw new Error('Could not find label');
}
@@ -568,6 +475,9 @@ export async function editCustomField(
if (newField.type && existingField.type !== newField.type) {
throw new Error('Change of field type is not allowed');
}
if (newField.label && isObjectPrototypeKey(customFieldLabelToKey(newField.label))) {
throw new Error('Label conflicts with a reserved field name');
}
const { oldKey, newKey } = customFieldMutation.edit(customFields, key, existingField, newField);
@@ -609,7 +519,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
mutableRundown: true,
mutableCustomFields: true,
});
if (!(key in customFields)) {
if (!Object.hasOwn(customFields, key)) {
return customFields;
}
@@ -83,14 +83,4 @@ export const rundownArrayOfIds = [
requestValidationFunction,
];
export const pastePostValidator = [
body('entryIds').isArray().notEmpty(),
body('entryIds.*').isString(),
body('sourceRundownId').isString().notEmpty(),
body('afterId').optional().isString(),
body('beforeId').optional().isString(),
requestValidationFunction,
];
// #endregion operations on rundown entries =======================
+23 -89
View File
@@ -42,7 +42,6 @@ import { consoleError, consoleHighlight, consoleSuccess } from './utils/console.
import { generateCrashReport } from './utils/generateCrashReport.js';
import { getNetworkInterfaces } from './utils/network.js';
import { clearUploadfolder } from './utils/upload.js';
import { withTimeout } from './utils/withTimeout.js';
console.log('\n');
consoleHighlight(`Starting Ontime version ${ONTIME_VERSION}`);
@@ -65,7 +64,6 @@ const prefix = updateRouterPrefix();
// Create express APP
const app = express();
let isShuttingDown = false;
if (!isProduction) {
// log server timings to requests
app.use(serverTiming());
@@ -87,15 +85,6 @@ app.get(`${prefix}/health`, (_req, res) => {
res.status(200).send('OK');
});
// readiness probe route for orchestrators (e.g. kubernetes)
app.get(`${prefix}/ready`, (_req, res) => {
if (isShuttingDown) {
res.status(503).send('SHUTTING_DOWN');
return;
}
res.status(200).send('READY');
});
// Implement route endpoints
app.use(`${prefix}/login`, loginRouter); // router for login flow
app.use(`${prefix}/data`, authenticate, appRouter); // router for application data
@@ -147,7 +136,6 @@ enum OntimeStartOrder {
let step = OntimeStartOrder.InitAssets;
let expressServer: Server | null = null;
let shutdownPromise: Promise<void> | null = null;
const checkStart = (currentState: OntimeStartOrder) => {
if (step !== currentState) {
@@ -262,88 +250,34 @@ export const startIntegrations = async () => {
};
/**
* Clean shutdown app services
* - it avoid concurrency issues with deduplication of request to shutdown
* - extracts exit code to modify cleanup behaviour
* @description clean shutdown app services
* @param {number} exitCode
* @return {Promise<void>}
*/
export async function shutdown(exitCode = 0): Promise<void> {
if (shutdownPromise) {
return shutdownPromise;
}
shutdownPromise = performShutdown(exitCode);
return shutdownPromise;
};
const closeHttpServer = async (server: Server | null): Promise<void> => {
if (!server) return;
const closePromise = new Promise<void>((resolve, reject) => {
server.close((error) => {
if (error) {
if ((error as NodeJS.ErrnoException).code === 'ERR_SERVER_NOT_RUNNING') {
resolve();
return;
}
reject(error);
return;
}
resolve();
});
});
server.closeIdleConnections();
server.closeAllConnections();
await closePromise;
};
const shutdownGlobalTimeout = 10_000; // 10 seconds
const shutdownTimeout = 4_000; // 4 seconds
async function performShutdown(exitCode: number): Promise<void> {
isShuttingDown = true;
export const shutdown = async (exitCode = 0) => {
consoleHighlight(`Ontime shutting down with code ${exitCode}`);
// if shutdown takes longer than 10 seconds, force exit to avoid hanging processes
const forceExitTimer = setTimeout(() => {
consoleError('Forced shutdown after timeout');
process.exit(exitCode);
}, shutdownGlobalTimeout);
await flushPendingWrites().catch((_error) => {
/** nothing do to here */
});
try {
runtimeService.shutdown();
// Block for at most 4 seconds on each shutdown segment
await withTimeout(
flushPendingWrites().catch((_error) => {
/** nothing do to here */
}),
shutdownTimeout,
);
// clear the restore file if it was a normal exit
// 0 means it was a SIGNAL
// 1 means crash -> keep the file
// 2 means dev crash -> do nothing
// 3 means container shutdown -> keep the file
// 99 means there was a shutdown request from the UI
if (exitCode === 0 || exitCode === 99) {
await withTimeout(restoreService.clear(), shutdownTimeout);
await withTimeout(portManager.shutdown(), shutdownTimeout);
}
await withTimeout(
Promise.all([closeHttpServer(expressServer), socket.shutdown(), oscServer.shutdown()]),
shutdownTimeout,
);
} catch (error) {
logger.error(LogOrigin.Server, `Shutdown error: ${error}`, false);
} finally {
clearTimeout(forceExitTimer);
logger.shutdown();
process.exit(exitCode);
// clear the restore file if it was a normal exit
// 0 means it was a SIGNAL
// 1 means crash -> keep the file
// 2 means dev crash -> do nothing
// 3 means container shutdown -> keep the file
// 99 means there was a shutdown request from the UI
if (exitCode === 0 || exitCode === 99) {
await restoreService.clear();
await portManager.shutdown();
}
expressServer?.close();
runtimeService.shutdown();
logger.shutdown();
oscServer.shutdown();
socket.shutdown();
process.exit(exitCode);
};
process.on('exit', (code) => consoleHighlight(`Ontime shutdown with code: ${code}`));
-15
View File
@@ -1,15 +0,0 @@
/**
* Resolves or rejects with the provided promise, but fails if it does not settle within `timeoutMs`.
*/
export const withTimeout = <T>(promise: Promise<T>, timeoutMs: number): Promise<T> => {
let timer: NodeJS.Timeout | null = null;
const timeout = new Promise<T>((_, reject) => {
timer = setTimeout(() => reject(new Error('Operation timed out')), timeoutMs);
});
return Promise.race([promise, timeout]).finally(() => {
if (timer) {
clearTimeout(timer);
}
});
};
@@ -31,7 +31,7 @@ test('Copy-paste', async ({ page }) => {
await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('4');
});
test('Multi-event copy-paste', async ({ page }) => {
test('Cut-paste', async ({ page }) => {
await page.goto('http://localhost:4001/rundown');
await page.getByRole('button', { name: 'Edit' }).click();
@@ -40,39 +40,27 @@ test('Multi-event copy-paste', async ({ page }) => {
await page.getByRole('menuitem', { name: 'Clear all' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
// create three events with distinct titles
// create events
await page.getByRole('button', { name: 'Create Event' }).click();
await page.getByTestId('entry-1').getByTestId('entry__title').click();
await page.getByTestId('entry-1').getByTestId('entry__title').fill('alpha');
await page.getByTestId('entry-1').getByTestId('entry__title').fill('first');
await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
await page.getByRole('button', { name: 'Event' }).nth(4).click();
await page.getByTestId('entry-2').getByTestId('entry__title').click();
await page.getByTestId('entry-2').getByTestId('entry__title').fill('beta');
await page.getByTestId('entry-2').getByTestId('entry__title').fill('second');
await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
await page.getByTestId('entry-3').getByTestId('entry__title').click();
await page.getByTestId('entry-3').getByTestId('entry__title').fill('gamma');
await page.getByTestId('entry-3').getByTestId('entry__title').press('Enter');
// cut first event, paste below second
await page.getByTestId('entry-1').getByTestId('rundown-event').getByText('1').click();
await page.getByTestId('entry-1').getByTestId('rundown-event').filter({ hasText: '1' }).press('ControlOrMeta+x');
await page.getByTestId('entry-2').getByTestId('rundown-event').getByText('2').click();
await page.getByTestId('entry-2').getByTestId('rundown-event').filter({ hasText: '2' }).press('ControlOrMeta+v');
// multi-select first and third events via ctrl-click
await page.getByTestId('entry-1').getByTestId('rundown-event').click();
await page.getByTestId('entry-3').getByTestId('rundown-event').click({ modifiers: ['Control'] });
// copy and paste after the last event
await page.keyboard.press('ControlOrMeta+c');
await page.getByTestId('entry-3').getByTestId('rundown-event').click();
await page.keyboard.press('ControlOrMeta+v');
// should now have 5 events: alpha, beta, gamma, alpha-copy, gamma-copy
await expect(page.getByTestId('rundown-event')).toHaveCount(5);
const titles = await page.getByTestId('entry__title').all();
await expect(titles[0]).toHaveValue('alpha');
await expect(titles[1]).toHaveValue('beta');
await expect(titles[2]).toHaveValue('gamma');
await expect(titles[3]).toHaveValue('alpha');
await expect(titles[4]).toHaveValue('gamma');
// we can verify that the entries have swapped places
const events = await page.getByTestId('entry__title').all();
await expect(events[0]).toHaveValue('second');
await expect(events[1]).toHaveValue('first');
});
test('Move', async ({ page }) => {
@@ -6,7 +6,6 @@ export enum RefetchKey {
Rundown = 'rundown',
UrlPresets = 'url-presets',
ViewSettings = 'view-settings',
CssOverride = 'css-override',
Translation = 'translation',
Settings = 'settings',
}
+1 -1
View File
@@ -61,7 +61,7 @@ export { checkRegex, regex } from './src/regex-utils/checkRegex.js';
export { isColourHex } from './src/regex-utils/isColourHex.js';
export { splitWhitespace } from './src/regex-utils/splitWhitespace.js';
export { customFieldLabelToKey, customKeyFromLabel } from './src/customField-utils/customFieldUtils.js';
export { customFieldLabelToKey, customKeyFromLabel, isObjectPrototypeKey } from './src/customField-utils/customFieldUtils.js';
// helpers from externals
export { deepmerge } from './src/externals/deepmerge.js';
@@ -1,5 +1,7 @@
import type { CustomFields } from 'ontime-types';
const objectPrototypeKeys = new Set(Object.getOwnPropertyNames(Object.prototype));
/**
* Transforms an alphanumeric label with spaces into a valid key
*/
@@ -7,6 +9,13 @@ export function customFieldLabelToKey(label: string): string {
return label.trim().replaceAll(' ', '_');
}
/**
* Detects keys that collide with Object prototype properties or methods
*/
export function isObjectPrototypeKey(key: string): boolean {
return objectPrototypeKeys.has(key);
}
/**
* Finds an object key in the CustomFields object that matches the given label
*/
+813 -1024
View File
File diff suppressed because it is too large Load Diff