mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-10 01:43:43 +00:00
Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a6feed49b | |||
| c6cf9f2bf7 | |||
| 2f73303554 | |||
| 96943ca528 | |||
| 8cfffd32c7 | |||
| 24a606a246 | |||
| c322028821 | |||
| 9f40d962ea | |||
| 1e851ae40d | |||
| 2bcda2dfa4 | |||
| e2a2ea1d24 | |||
| 5be596b83e | |||
| ab15a65585 | |||
| 65ef442a9d | |||
| 71a7f26493 | |||
| b850a51204 | |||
| 0094c15da2 | |||
| e7d62f44e7 | |||
| 3c8d7e51f5 | |||
| 3da3950fce | |||
| ac3694ce4d |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/cli",
|
||||
"version": "4.10.0",
|
||||
"version": "4.9.0",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime-ui",
|
||||
"version": "4.10.0",
|
||||
"version": "4.9.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
.kbd {
|
||||
display: inline-block;
|
||||
min-width: 1.5rem;
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border-radius: 2px;
|
||||
background-color: $gray-1100;
|
||||
color: $ui-white;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
|
||||
font-family: monospace;
|
||||
font-size: calc(1rem - 4px);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import style from './Kbd.module.scss';
|
||||
|
||||
export default function Kbd({ children }: PropsWithChildren) {
|
||||
return <kbd className={style.kbd}>{children}</kbd>;
|
||||
}
|
||||
@@ -38,6 +38,8 @@ $progress-bar-br: 3px;
|
||||
.multiprogress-bar__indicator-bar {
|
||||
background-color: var(--background-color-override, $ui-black);
|
||||
opacity: 0.8;
|
||||
transition: 1s linear;
|
||||
transition-property: width;
|
||||
|
||||
.multiprogress-bar--ignore-css-override & {
|
||||
background-color: $ui-black;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { MaybeNumber } from 'ontime-types';
|
||||
|
||||
import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
|
||||
import { getProgress } from '../../utils/getProgress';
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
|
||||
@@ -35,7 +34,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
|
||||
className = '',
|
||||
} = props;
|
||||
|
||||
const percentRemaining = 100 - useAnimatedProgress(now, complete);
|
||||
const percentRemaining = 100 - getProgress(now, complete);
|
||||
const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
|
||||
const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
|
||||
const isOvertime = now !== null && now < 0;
|
||||
|
||||
@@ -8,7 +8,6 @@ import { useLocation } from 'react-router';
|
||||
import { isLocalhost, supportsFullscreen } from '../../../externals';
|
||||
import { canUseWakeLock, useKeepAwakeOptions } from '../../../features/keep-awake/useWakeLock';
|
||||
import { navigatorConstants } from '../../../viewerConfig';
|
||||
import useUrlPresets from '../../hooks-query/useUrlPresets';
|
||||
import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
|
||||
import { useClientStore } from '../../stores/clientStore';
|
||||
import { useViewOptionsStore } from '../../stores/viewOptions';
|
||||
@@ -106,8 +105,6 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
{route.label}
|
||||
</ClientLink>
|
||||
))}
|
||||
|
||||
<PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
|
||||
</div>
|
||||
|
||||
{isLocalhost && (
|
||||
@@ -120,27 +117,3 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
|
||||
const location = useLocation();
|
||||
const { data: urlPresets } = useUrlPresets();
|
||||
const navPresets = urlPresets.filter((preset) => preset.enabled && preset.displayInNav);
|
||||
|
||||
if (navPresets.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<hr className={style.separator} />
|
||||
{navPresets.map((preset) => (
|
||||
<ClientLink
|
||||
key={preset.alias}
|
||||
to={`preset/${preset.alias}`}
|
||||
current={location.pathname === `/preset/${preset.alias}`}
|
||||
postAction={isSmallScreen ? onClose : undefined}
|
||||
>
|
||||
{preset.alias}
|
||||
</ClientLink>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { useDisclosure, useHotkeys } from '@mantine/hooks';
|
||||
import { memo } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { hasCustomParams, useSavedViewParams } from '../../stores/savedViewParams';
|
||||
import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
|
||||
import FloatingNavigation from './floating-navigation/FloatingNavigation';
|
||||
import NavigationMenu from './NavigationMenu';
|
||||
@@ -19,9 +17,6 @@ export default memo(ViewNavigationMenu);
|
||||
function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
|
||||
const [isMenuOpen, menuHandler] = useDisclosure();
|
||||
const { open: showEditFormDrawer } = useViewParamsEditorStore();
|
||||
const [searchParams] = useSearchParams();
|
||||
const savedParams = useSavedViewParams((store) => store.params);
|
||||
const hasSavedChanges = hasCustomParams(searchParams) || Object.keys(savedParams).length > 0;
|
||||
|
||||
useHotkeys([
|
||||
[
|
||||
@@ -51,7 +46,6 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
|
||||
<FloatingNavigation
|
||||
toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
|
||||
toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
|
||||
hasSavedChanges={hasSavedChanges}
|
||||
/>
|
||||
{!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
|
||||
</>
|
||||
|
||||
+1
-26
@@ -1,29 +1,4 @@
|
||||
.trailing {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
margin-left: auto;
|
||||
@include rotate-fourty-five;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: $active-indicator;
|
||||
pointer-events: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.clear {
|
||||
opacity: 0.6;
|
||||
transition: opacity $transition-time-action;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,9 @@
|
||||
import { MouseEvent, PropsWithChildren } from 'react';
|
||||
import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
|
||||
import { useLocation, useNavigate, useSearchParams } from 'react-router';
|
||||
import { PropsWithChildren } from 'react';
|
||||
import { IoArrowUp } from 'react-icons/io5';
|
||||
import { useNavigate } from 'react-router';
|
||||
|
||||
import { useElectronEvent } from '../../../hooks/useElectronEvent';
|
||||
import {
|
||||
hasCustomParams,
|
||||
reservedParams,
|
||||
stripReservedParams,
|
||||
useSavedViewParams,
|
||||
} from '../../../stores/savedViewParams';
|
||||
import { handleLinks } from '../../../utils/linkUtils';
|
||||
import IconButton from '../../buttons/IconButton';
|
||||
import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
|
||||
|
||||
import style from './ClientLink.module.scss';
|
||||
@@ -23,100 +16,32 @@ interface ClientLinkProps {
|
||||
|
||||
export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
|
||||
const { isElectron } = useElectronEvent();
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (isElectron) {
|
||||
return (
|
||||
<ElectronNavigationItem current={current} to={to} postAction={postAction}>
|
||||
<NavigationMenuItem
|
||||
active={current}
|
||||
onClick={() => {
|
||||
handleLinks(to);
|
||||
postAction?.();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ElectronNavigationItem>
|
||||
<IoArrowUp className={style.linkIcon} />
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BrowserNavigationItem current={current} to={to} postAction={postAction}>
|
||||
<NavigationMenuItem
|
||||
active={current}
|
||||
onClick={() => {
|
||||
navigate(`/${to}`);
|
||||
postAction?.();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BrowserNavigationItem>
|
||||
);
|
||||
}
|
||||
|
||||
function ElectronNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
|
||||
const navigateToLink = () => {
|
||||
handleLinks(to);
|
||||
postAction?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigationMenuItem active={current} onClick={navigateToLink}>
|
||||
{children}
|
||||
<span className={style.trailing}>
|
||||
<IoArrowUp className={style.linkIcon} />
|
||||
</span>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
function BrowserNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { params: savedParams, save, clear } = useSavedViewParams();
|
||||
|
||||
/**
|
||||
* Save the params of the view we are leaving and resolve the destination,
|
||||
* restoring any params previously saved for the target view.
|
||||
*/
|
||||
const resolveDestination = () => {
|
||||
const currentView = location.pathname.replace(/^\//, '');
|
||||
save(currentView, stripReservedParams(location.search));
|
||||
const restored = savedParams[to];
|
||||
return `${to}${restored ? `?${restored}` : ''}`;
|
||||
};
|
||||
|
||||
const isCustomised = current ? hasCustomParams(searchParams) : Boolean(savedParams[to]);
|
||||
|
||||
const navigateToLink = () => {
|
||||
const destination = resolveDestination();
|
||||
navigate(`/${destination}`);
|
||||
postAction?.();
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the saved settings for this route without navigating to it.
|
||||
* When it is the current view, also reset the live URL to its defaults.
|
||||
*/
|
||||
const clearViewSettings = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
clear(to);
|
||||
|
||||
// if mounted, clear the URL params
|
||||
if (current) {
|
||||
const preserved = new URLSearchParams();
|
||||
reservedParams.forEach((key) => {
|
||||
const value = searchParams.get(key);
|
||||
if (value !== null) preserved.set(key, value);
|
||||
});
|
||||
setSearchParams(preserved);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigationMenuItem active={current} onClick={navigateToLink}>
|
||||
{children}
|
||||
{isCustomised && (
|
||||
<span className={style.trailing}>
|
||||
<span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
|
||||
<IconButton
|
||||
variant='ghosted-white'
|
||||
size='small'
|
||||
className={style.clear}
|
||||
aria-label='Clear saved view settings'
|
||||
title='Clear saved view settings'
|
||||
onClick={clearViewSettings}
|
||||
>
|
||||
<IoCloseOutline />
|
||||
</IconButton>
|
||||
</span>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
-16
@@ -22,19 +22,3 @@
|
||||
top: 0;
|
||||
z-index: $zindex-nav;
|
||||
}
|
||||
|
||||
.buttonWithIndicator {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
top: -0.15rem;
|
||||
right: -0.15rem;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background-color: $active-indicator;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
+10
-14
@@ -9,10 +9,9 @@ import style from './FloatingNavigation.module.scss';
|
||||
interface FloatingNavigationProps {
|
||||
toggleMenu?: () => void;
|
||||
toggleSettings?: () => void;
|
||||
hasSavedChanges?: boolean;
|
||||
}
|
||||
|
||||
export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
|
||||
export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
|
||||
const isButtonShown = useFadeOutOnInactivity(true);
|
||||
|
||||
return (
|
||||
@@ -21,18 +20,15 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSave
|
||||
className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
|
||||
>
|
||||
{toggleMenu && (
|
||||
<div className={style.buttonWithIndicator}>
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='xlarge'
|
||||
onClick={toggleMenu}
|
||||
aria-label='toggle menu'
|
||||
data-testid='navigation__toggle-menu'
|
||||
>
|
||||
<IoApps />
|
||||
</IconButton>
|
||||
{hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
|
||||
</div>
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='xlarge'
|
||||
onClick={toggleMenu}
|
||||
aria-label='toggle menu'
|
||||
data-testid='navigation__toggle-menu'
|
||||
>
|
||||
<IoApps />
|
||||
</IconButton>
|
||||
)}
|
||||
{toggleSettings && (
|
||||
<IconButton
|
||||
|
||||
@@ -14,4 +14,6 @@ $progress-bar-br: 3px;
|
||||
.progress-bar__indicator {
|
||||
height: $progress-bar-size;
|
||||
background-color: var(--timer-progress-override, $accent-color);
|
||||
transition: 1s linear;
|
||||
transition-property: width;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { MaybeNumber } from 'ontime-types';
|
||||
|
||||
import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
|
||||
import { getProgress } from '../../utils/getProgress';
|
||||
|
||||
import './ProgressBar.scss';
|
||||
|
||||
@@ -12,7 +12,7 @@ interface ProgressBarProps {
|
||||
|
||||
export default function ProgressBar(props: ProgressBarProps) {
|
||||
const { current, duration, className } = props;
|
||||
const progress = useAnimatedProgress(current, duration);
|
||||
const progress = getProgress(current, duration);
|
||||
|
||||
return (
|
||||
<div className={`progress-bar__bg ${className}`}>
|
||||
|
||||
@@ -4,9 +4,7 @@
|
||||
color: $white-10;
|
||||
|
||||
.empty {
|
||||
display: block;
|
||||
width: min(100%, 24rem);
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -15,6 +13,6 @@
|
||||
margin-inline: auto;
|
||||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
max-width: min(100%, 600px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import { MaybeNumber, Playback } from 'ontime-types';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { getProgress } from '../utils/getProgress';
|
||||
import { usePlayback } from './useSocket';
|
||||
|
||||
/**
|
||||
* Returns the live completion percentage (0–100) of a countdown, interpolated locally.
|
||||
*/
|
||||
export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber): number {
|
||||
const playback = usePlayback();
|
||||
const isRunning = playback === Playback.Play || playback === Playback.Roll;
|
||||
|
||||
const baseline = useRef({ current, at: performance.now() });
|
||||
const [, setTick] = useState(0);
|
||||
|
||||
// there is only something to animate while a running timer is counting down towards 0
|
||||
const shouldAnimate = isRunning && current !== null && current > 0 && duration !== null;
|
||||
|
||||
// re-anchor to the authoritative value whenever the server pushes a new timer update
|
||||
useEffect(() => {
|
||||
baseline.current = { current, at: performance.now() };
|
||||
}, [current, duration, playback]);
|
||||
|
||||
// while counting down, re-render every animation frame so the derived progress stays smooth
|
||||
useEffect(() => {
|
||||
if (!shouldAnimate) {
|
||||
return;
|
||||
}
|
||||
let frame = requestAnimationFrame(function tick() {
|
||||
setTick((value) => value + 1);
|
||||
frame = requestAnimationFrame(tick);
|
||||
});
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}, [shouldAnimate]);
|
||||
|
||||
// derive from the anchor plus elapsed time at render; frozen to the anchor when not running
|
||||
const anchored = baseline.current.current;
|
||||
const value = isRunning && anchored !== null ? anchored - (performance.now() - baseline.current.at) : anchored;
|
||||
return getProgress(value, duration);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { hasCustomParams, stripReservedParams, useSavedViewParams } from '../savedViewParams';
|
||||
|
||||
describe('savedViewParams store', () => {
|
||||
beforeEach(() => {
|
||||
useSavedViewParams.getState().clearAll();
|
||||
});
|
||||
|
||||
it('saves and restores params per view', () => {
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=true');
|
||||
useSavedViewParams.getState().save('backstage', 'showProgress=false');
|
||||
|
||||
expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=true');
|
||||
expect(useSavedViewParams.getState().params.backstage).toBe('showProgress=false');
|
||||
});
|
||||
|
||||
it('overwrites the saved params for a view on subsequent saves', () => {
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=true');
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=false');
|
||||
|
||||
expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=false');
|
||||
});
|
||||
|
||||
it('does not store an entry for an empty search string', () => {
|
||||
useSavedViewParams.getState().save('timer', '');
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({});
|
||||
});
|
||||
|
||||
it('removes a previously saved entry when saved with an empty search string', () => {
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=true');
|
||||
useSavedViewParams.getState().save('timer', '');
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({});
|
||||
});
|
||||
|
||||
it('ignores empty view keys', () => {
|
||||
useSavedViewParams.getState().save('', 'hideSeconds=true');
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({});
|
||||
});
|
||||
|
||||
it('clears the saved params for a single view without touching others', () => {
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=true');
|
||||
useSavedViewParams.getState().save('backstage', 'showProgress=false');
|
||||
useSavedViewParams.getState().clear('timer');
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
|
||||
});
|
||||
|
||||
it('is a no-op when clearing a view without saved params', () => {
|
||||
useSavedViewParams.getState().save('backstage', 'showProgress=false');
|
||||
useSavedViewParams.getState().clear('timer');
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
|
||||
});
|
||||
|
||||
it('clears all saved params', () => {
|
||||
useSavedViewParams.getState().save('timer', 'hideSeconds=true');
|
||||
useSavedViewParams.getState().clearAll();
|
||||
|
||||
expect(useSavedViewParams.getState().params).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('stripReservedParams', () => {
|
||||
it('removes reserved auth/preset params while keeping view customisation', () => {
|
||||
expect(stripReservedParams('hideSeconds=true&token=abc&n=1&alias=my')).toBe('hideSeconds=true');
|
||||
});
|
||||
|
||||
it('returns an empty string when only reserved params are present', () => {
|
||||
expect(stripReservedParams('token=abc&n=1&alias=my')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('hasCustomParams', () => {
|
||||
it('is true when a non-reserved param is present', () => {
|
||||
expect(hasCustomParams(new URLSearchParams('hideSeconds=true&token=abc'))).toBe(true);
|
||||
});
|
||||
|
||||
it('is false when only reserved params are present', () => {
|
||||
expect(hasCustomParams(new URLSearchParams('token=abc&n=1&alias=my'))).toBe(false);
|
||||
});
|
||||
|
||||
it('is false when there are no params', () => {
|
||||
expect(hasCustomParams(new URLSearchParams(''))).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,62 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
// params that are auth/preset markers, not user view customisation (see common/utils/urlPresets.ts)
|
||||
export const reservedParams = new Set(['token', 'n', 'alias']);
|
||||
|
||||
interface SavedViewParamsStore {
|
||||
params: Record<string, string>; // view key (e.g. "timer") -> search string without leading "?"
|
||||
save: (view: string, search: string) => void;
|
||||
clear: (view: string) => void;
|
||||
clearAll: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remembers the last view parameters used for each view so they can be
|
||||
* restored when the user navigates back to that view through the menu.
|
||||
* In-memory only: persists across SPA navigation, resets on a full page reload.
|
||||
*/
|
||||
export const useSavedViewParams = create<SavedViewParamsStore>((set) => ({
|
||||
params: {},
|
||||
save: (view, search) =>
|
||||
set((state) => {
|
||||
// ignore empty view keys and do not store empty entries, so the
|
||||
// "saved changes" indicator only reflects genuine customisation
|
||||
if (!view) return state;
|
||||
const params = { ...state.params };
|
||||
if (search) {
|
||||
params[view] = search;
|
||||
} else {
|
||||
delete params[view];
|
||||
}
|
||||
return { params };
|
||||
}),
|
||||
clear: (view) =>
|
||||
set((state) => {
|
||||
if (!state.params[view]) return state;
|
||||
const params = { ...state.params };
|
||||
delete params[view];
|
||||
return { params };
|
||||
}),
|
||||
clearAll: () => set({ params: {} }),
|
||||
}));
|
||||
|
||||
/**
|
||||
* Removes reserved (auth/preset) params from a search string, keeping only
|
||||
* genuine view customisation.
|
||||
*/
|
||||
export function stripReservedParams(search: string): string {
|
||||
const sp = new URLSearchParams(search);
|
||||
reservedParams.forEach((key) => sp.delete(key));
|
||||
return sp.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the search params contain any genuine view customisation,
|
||||
* ignoring reserved params.
|
||||
*/
|
||||
export function hasCustomParams(searchParams: URLSearchParams): boolean {
|
||||
for (const key of searchParams.keys()) {
|
||||
if (!reservedParams.has(key)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { hostToBaseUrl, linkToOtherHost } from '../linkUtils';
|
||||
import { linkToOtherHost } from '../linkUtils';
|
||||
|
||||
describe('linkToOTherHost', () => {
|
||||
it('should handle electron links', () => {
|
||||
@@ -22,18 +22,3 @@ describe('linkToOTherHost', () => {
|
||||
expect(destination).toBe('https://app.getontime.no/user-hash/path');
|
||||
});
|
||||
});
|
||||
|
||||
describe('hostToBaseUrl', () => {
|
||||
it('uses http when the page is plain http', () => {
|
||||
expect(hostToBaseUrl('192.168.10.166', 4001, 'http://localhost:4001')).toBe('http://192.168.10.166:4001');
|
||||
});
|
||||
|
||||
it('keeps https when the page reaches the server over TLS on the same port', () => {
|
||||
expect(hostToBaseUrl('192.168.10.166', 4001, 'https://localhost:4001')).toBe('https://192.168.10.166:4001');
|
||||
});
|
||||
|
||||
it('falls back to http when the page is https on a different port (TLS proxy)', () => {
|
||||
// the raw server port does not speak TLS, an https link to it would fail
|
||||
expect(hostToBaseUrl('192.168.10.166', 4001, 'https://ontime.example.com')).toBe('http://192.168.10.166:4001');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,7 +37,6 @@ describe('getRouteFromPreset()', () => {
|
||||
alias: 'demopage',
|
||||
target: OntimeView.Timer,
|
||||
search: 'user=guest',
|
||||
displayInNav: false,
|
||||
options: {},
|
||||
},
|
||||
];
|
||||
@@ -120,7 +119,6 @@ describe('getRouteFromPreset()', () => {
|
||||
alias: 'cuesheet-4685d6',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
options: {
|
||||
read: 'full',
|
||||
write: '-',
|
||||
@@ -133,7 +131,6 @@ describe('getRouteFromPreset()', () => {
|
||||
alias: 'cuesheet-basic',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
},
|
||||
];
|
||||
const cuesheetPresetWithNavLock: URLPreset[] = [
|
||||
@@ -142,7 +139,6 @@ describe('getRouteFromPreset()', () => {
|
||||
alias: 'cuesheet-locked',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: 'n=1',
|
||||
displayInNav: false,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -224,7 +220,6 @@ describe('generateUrlPresetOptions', () => {
|
||||
target: 'timer',
|
||||
search: 'param1=value1¶m2=value2',
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
@@ -236,7 +231,6 @@ describe('generateUrlPresetOptions', () => {
|
||||
target: 'timer',
|
||||
search: 'param1=value1¶m2=value2',
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
@@ -248,7 +242,6 @@ describe('generateUrlPresetOptions', () => {
|
||||
target: 'timer',
|
||||
search: 'param1=value1¶m2=value2',
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
[
|
||||
@@ -260,7 +253,6 @@ describe('generateUrlPresetOptions', () => {
|
||||
target: 'timer',
|
||||
search: 'param1=value1¶m2=value2',
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
])('should generate URL preset options for %s', (_description, alias, url, expected) => {
|
||||
|
||||
@@ -37,12 +37,7 @@ export function handleLinks(
|
||||
event?.preventDefault();
|
||||
|
||||
const destination = new URL(externalServerUrl);
|
||||
// split off any query string so it is not encoded into the pathname
|
||||
const [pathname, search] = location.split('?');
|
||||
destination.pathname = externalBaseURI ? `${externalBaseURI}/${pathname}` : pathname;
|
||||
if (search) {
|
||||
destination.search = search;
|
||||
}
|
||||
destination.pathname = externalBaseURI ? `${externalBaseURI}/${location}` : location;
|
||||
openLink(destination.toString());
|
||||
}
|
||||
|
||||
@@ -59,17 +54,3 @@ export function linkToOtherHost(
|
||||
}
|
||||
return destination.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a base URL for reaching the Ontime server on a given network interface.
|
||||
* The Ontime server itself only speaks HTTP, so we only keep https when the page
|
||||
* already reaches the server over TLS on that same port (eg. a proxy in front of it);
|
||||
* any other explicit server port gets http.
|
||||
* externalServerUrl is used for testing
|
||||
*/
|
||||
export function hostToBaseUrl(host: string, port: number, externalServerUrl: string = serverURL): string {
|
||||
const page = new URL(externalServerUrl);
|
||||
const pagePort = page.port === '' ? (page.protocol === 'https:' ? 443 : 80) : Number(page.port);
|
||||
const scheme = page.protocol === 'https:' && pagePort === port ? 'https' : 'http';
|
||||
return `${scheme}://${host}:${port}`;
|
||||
}
|
||||
|
||||
@@ -194,7 +194,6 @@ export function generateUrlPresetOptions(alias: string, userUrl: string): URLPre
|
||||
target: path,
|
||||
search: url.searchParams.toString(),
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ $inner-padding: 1rem;
|
||||
.section {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
max-width: 1024px;
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.indent {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { OntimeView, URLPreset } from 'ontime-types';
|
||||
import { URLPreset } from 'ontime-types';
|
||||
import { useState } from 'react';
|
||||
import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';
|
||||
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import Info from '../../../../common/components/info/Info';
|
||||
@@ -23,23 +22,13 @@ const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
|
||||
|
||||
export default function URLPresets() {
|
||||
const [formState, setFormState] = useState<FormState>({ isOpen: false, preset: undefined });
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
const { data, status } = useUrlPresets();
|
||||
const { updatePreset, deletePreset, isMutating } = useUpdateUrlPreset();
|
||||
const { deletePreset, isMutating } = useUpdateUrlPreset();
|
||||
|
||||
const openNewForm = () => setFormState({ isOpen: true });
|
||||
const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset });
|
||||
const closeForm = () => setFormState({ isOpen: false, preset: undefined });
|
||||
|
||||
const persistPreset = async (preset: URLPreset) => {
|
||||
setActionError(null);
|
||||
try {
|
||||
await updatePreset(preset.alias, preset);
|
||||
} catch (error) {
|
||||
setActionError(maybeAxiosError(error));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel.Section>
|
||||
<Panel.Card>
|
||||
@@ -64,12 +53,10 @@ export default function URLPresets() {
|
||||
<Panel.Section>
|
||||
<Panel.Loader isLoading={status === 'pending'} />
|
||||
{formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
|
||||
{actionError && <Panel.Error>{actionError}</Panel.Error>}
|
||||
<Panel.Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Enabled</th>
|
||||
<th>Show in nav</th>
|
||||
<th>Target view</th>
|
||||
<th>Alias</th>
|
||||
<th />
|
||||
@@ -78,23 +65,10 @@ export default function URLPresets() {
|
||||
<tbody>
|
||||
{data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
|
||||
{data.map((preset, index) => {
|
||||
const isCuesheet = preset.target === OntimeView.Cuesheet;
|
||||
return (
|
||||
<tr key={preset.alias}>
|
||||
<td>
|
||||
<Switch
|
||||
checked={preset.enabled}
|
||||
onCheckedChange={(enabled) => persistPreset({ ...preset, enabled })}
|
||||
disabled={isMutating}
|
||||
aria-label='Toggle preset enabled'
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Switch
|
||||
checked={preset.displayInNav}
|
||||
onCheckedChange={(checked) => persistPreset({ ...preset, displayInNav: checked })}
|
||||
disabled={isMutating || isCuesheet}
|
||||
/>
|
||||
<Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
|
||||
</td>
|
||||
<td>
|
||||
<Tag>{preset.target}</Tag>
|
||||
|
||||
+33
-88
@@ -1,5 +1,5 @@
|
||||
import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
|
||||
@@ -12,7 +12,6 @@ import { preventEscape } from '../../../../../common/utils/keyEvent';
|
||||
import { isUrlSafe } from '../../../../../common/utils/regex';
|
||||
import { enDash } from '../../../../../common/utils/styleUtils';
|
||||
import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
|
||||
import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
|
||||
import * as Panel from '../../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './URLPresetForm.module.scss';
|
||||
@@ -33,7 +32,6 @@ const defaultValues: URLPreset = {
|
||||
target: OntimeView.Timer,
|
||||
search: '',
|
||||
enabled: true,
|
||||
displayInNav: false,
|
||||
};
|
||||
|
||||
interface URLPresetFormProps {
|
||||
@@ -63,42 +61,12 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
|
||||
});
|
||||
const urlRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Cuesheet read/write permissions live outside react-hook-form
|
||||
const initialPermissions = useRef<CuesheetPermissionValues>({
|
||||
read: urlPreset?.options?.read ?? 'full',
|
||||
write: urlPreset?.options?.write ?? 'full',
|
||||
});
|
||||
const [cuesheetPermissions, setCuesheetPermissions] = useState<CuesheetPermissionValues>(initialPermissions.current);
|
||||
|
||||
// update initial permissions on mount
|
||||
useEffect(() => {
|
||||
initialPermissions.current = {
|
||||
read: urlPreset?.options?.read ?? 'full',
|
||||
write: urlPreset?.options?.write ?? 'full',
|
||||
};
|
||||
setCuesheetPermissions(initialPermissions.current);
|
||||
// oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps -- run on mount
|
||||
}, []);
|
||||
|
||||
const isEditingCuesheet = urlPreset && urlPreset.target === OntimeView.Cuesheet;
|
||||
const isCuesheet = watch('target') === OntimeView.Cuesheet;
|
||||
const permissionsDirty =
|
||||
isCuesheet &&
|
||||
(cuesheetPermissions.read !== initialPermissions.current.read ||
|
||||
cuesheetPermissions.write !== initialPermissions.current.write);
|
||||
const noReadAccess = isCuesheet && cuesheetPermissions.read === '-';
|
||||
|
||||
const setupSubmit = async (data: URLPreset) => {
|
||||
try {
|
||||
// Preserve / apply cuesheet permissions, which are not part of the form fields
|
||||
const payload: URLPreset =
|
||||
data.target === OntimeView.Cuesheet
|
||||
? { ...data, target: OntimeView.Cuesheet, options: cuesheetPermissions }
|
||||
: data;
|
||||
if (urlPreset) {
|
||||
await updatePreset(urlPreset.alias, payload);
|
||||
await updatePreset(urlPreset.alias, data);
|
||||
} else {
|
||||
await addPreset(payload);
|
||||
await addPreset(data);
|
||||
}
|
||||
onClose();
|
||||
} catch (error) {
|
||||
@@ -106,7 +74,6 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
|
||||
}
|
||||
};
|
||||
|
||||
// focus on alias when the form opens
|
||||
useEffect(() => {
|
||||
setFocus('alias');
|
||||
}, [setFocus]);
|
||||
@@ -159,66 +126,44 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
|
||||
<div className={style.expand}>
|
||||
<Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
|
||||
<Panel.InlineElements>
|
||||
<Input placeholder='Paste URL' fluid ref={urlRef} disabled={isEditingCuesheet} />
|
||||
<Button onClick={generateOptions} disabled={isEditingCuesheet}>
|
||||
Generate
|
||||
</Button>
|
||||
<Input placeholder='Paste URL' fluid ref={urlRef} />
|
||||
<Button onClick={generateOptions}>Generate</Button>
|
||||
</Panel.InlineElements>
|
||||
</div>
|
||||
</Panel.InlineElements>
|
||||
{errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
|
||||
{!isEditingCuesheet && (
|
||||
<>
|
||||
<div>
|
||||
{enDash} or {enDash}
|
||||
</div>
|
||||
<div>2. Choose a view and its parameters</div>
|
||||
<div>
|
||||
<Panel.Description>Target</Panel.Description>
|
||||
<Select
|
||||
options={targetOptions}
|
||||
{...register('target', { required: 'Target is required' })}
|
||||
value={watch('target')}
|
||||
onValueChange={(value: OntimeViewPresettable | null) => {
|
||||
if (value === null) return;
|
||||
setValue('target', value, { shouldDirty: true });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Panel.Description>Parameters</Panel.Description>
|
||||
<Textarea
|
||||
fluid
|
||||
rows={3}
|
||||
{...register('search', {
|
||||
validate: validateParams,
|
||||
})}
|
||||
/>
|
||||
<Panel.Error>{errors.search?.message}</Panel.Error>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isCuesheet && (
|
||||
<div>
|
||||
<Panel.Description>Permissions</Panel.Description>
|
||||
<CuesheetLinkOptions
|
||||
initialRead={initialPermissions.current.read}
|
||||
initialWrite={initialPermissions.current.write}
|
||||
onChange={setCuesheetPermissions}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
{enDash} or {enDash}
|
||||
</div>
|
||||
<div>2. Choose a view and its parameters</div>
|
||||
<div>
|
||||
<Panel.Description>Target</Panel.Description>
|
||||
<Select
|
||||
options={targetOptions}
|
||||
{...register('target', { required: 'Target is required' })}
|
||||
value={watch('target')}
|
||||
onValueChange={(value: OntimeViewPresettable | null) => {
|
||||
if (value === null) return;
|
||||
setValue('target', value, { shouldDirty: true });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Panel.Description>Parameters</Panel.Description>
|
||||
<Textarea
|
||||
fluid
|
||||
rows={3}
|
||||
{...register('search', {
|
||||
validate: validateParams,
|
||||
})}
|
||||
/>
|
||||
<Panel.Error>{errors.search?.message}</Panel.Error>
|
||||
</div>
|
||||
<div>
|
||||
<Panel.Error>{errors.root?.message}</Panel.Error>
|
||||
<Panel.InlineElements align='end'>
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
type='submit'
|
||||
disabled={!isValid || (!isDirty && !permissionsDirty) || noReadAccess}
|
||||
loading={isSubmitting || isMutating}
|
||||
>
|
||||
<Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
|
||||
Save
|
||||
</Button>
|
||||
</Panel.InlineElements>
|
||||
|
||||
@@ -2,23 +2,27 @@ import { useEffect, useState } from 'react';
|
||||
|
||||
import { generateUrl } from '../../../../common/api/session';
|
||||
import CopyTag from '../../../../common/components/copy-tag/CopyTag';
|
||||
import { serverURL } from '../../../../externals';
|
||||
import useInfo from '../../../../common/hooks-query/useInfo';
|
||||
import { isOntimeCloud, serverURL } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
export default function McpSection() {
|
||||
const { data: infoData } = useInfo();
|
||||
const [mcpEndpointUrl, setMcpEndpointUrl] = useState('');
|
||||
|
||||
// generate url
|
||||
useEffect(() => {
|
||||
// the page origin is reachable wherever the user is browsing from,
|
||||
// and follows the deployment (cloud, reverse proxy, port mappings)
|
||||
// we are reusing the endpoint, so locking config and nav have no effect
|
||||
generateUrl({ baseUrl: serverURL, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
|
||||
const baseUrl = isOntimeCloud
|
||||
? serverURL
|
||||
: infoData.networkInterfaces.length > 0
|
||||
? `http://${infoData.networkInterfaces[0].address}:${infoData.serverPort}`
|
||||
: serverURL;
|
||||
|
||||
generateUrl({ baseUrl, path: 'mcp', authenticate: true, lockConfig: false, lockNav: false })
|
||||
.then(setMcpEndpointUrl)
|
||||
.catch(() => {
|
||||
setMcpEndpointUrl('');
|
||||
});
|
||||
}, []);
|
||||
}, [infoData]);
|
||||
|
||||
const mcpClientConfig = mcpEndpointUrl
|
||||
? JSON.stringify({ mcpServers: { ontime: { url: mcpEndpointUrl } } }, null, 2)
|
||||
@@ -30,19 +34,14 @@ export default function McpSection() {
|
||||
<Panel.SubHeader>MCP Server</Panel.SubHeader>
|
||||
<Panel.Paragraph>Connect any MCP-compatible AI agent to Ontime using the endpoint below.</Panel.Paragraph>
|
||||
<Panel.Divider />
|
||||
<Panel.ListGroup>
|
||||
<Panel.ListItem>
|
||||
<Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
|
||||
{mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
|
||||
</Panel.ListItem>
|
||||
<Panel.ListItem>
|
||||
<Panel.Field
|
||||
title='Client configuration snippet'
|
||||
description='Paste this into your AI agent settings under "mcpServers"'
|
||||
/>
|
||||
{mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
|
||||
</Panel.ListItem>
|
||||
</Panel.ListGroup>
|
||||
<Panel.Field title='Endpoint URL' description='Add this URL to your MCP client settings' />
|
||||
{mcpEndpointUrl && <CopyTag copyValue={mcpEndpointUrl}>{mcpEndpointUrl}</CopyTag>}
|
||||
<Panel.Divider />
|
||||
<Panel.Field
|
||||
title='Client configuration snippet'
|
||||
description='Paste this into your AI agent settings under "mcpServers"'
|
||||
/>
|
||||
{mcpEndpointUrl && <CopyTag copyValue={mcpClientConfig}>{mcpClientConfig}</CopyTag>}
|
||||
</Panel.Card>
|
||||
</Panel.Section>
|
||||
);
|
||||
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
.footer {
|
||||
width: 100%;
|
||||
}
|
||||
+14
-28
@@ -1,5 +1,5 @@
|
||||
import { TranslationObject, langEn } from 'ontime-types';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { maybeAxiosError } from '../../../../../common/api/utils';
|
||||
@@ -10,8 +10,6 @@ import Modal from '../../../../../common/components/modal/Modal';
|
||||
import { useTranslation } from '../../../../../translation/TranslationProvider';
|
||||
import * as Panel from '../../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './CustomTranslationModal.module.scss';
|
||||
|
||||
interface CustomTranslationModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@@ -19,7 +17,14 @@ interface CustomTranslationModalProps {
|
||||
|
||||
export default function CustomTranslationModal({ isOpen, onClose }: CustomTranslationModalProps) {
|
||||
const { userTranslation, postUserTranslation } = useTranslation();
|
||||
const customTranslationFormValues = useMemo(() => toFormValues(userTranslation), [userTranslation]);
|
||||
|
||||
const defaultValues = useMemo(() => {
|
||||
const values: Record<string, string> = {};
|
||||
Object.keys(langEn).forEach((key) => {
|
||||
values[toFormKey(key)] = userTranslation[key as keyof TranslationObject] || '';
|
||||
});
|
||||
return values;
|
||||
}, [userTranslation]);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
@@ -28,17 +33,13 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
|
||||
formState: { isSubmitting, isDirty, errors, isValid },
|
||||
setError,
|
||||
} = useForm({
|
||||
defaultValues: customTranslationFormValues,
|
||||
defaultValues,
|
||||
resetOptions: {
|
||||
keepDirtyValues: true,
|
||||
},
|
||||
mode: 'onChange',
|
||||
});
|
||||
|
||||
// keep data up to date
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
reset(customTranslationFormValues);
|
||||
}
|
||||
}, [customTranslationFormValues, isOpen, reset]);
|
||||
|
||||
const onSubmit = async (formData: Record<string, string>) => {
|
||||
try {
|
||||
const translationData: Record<string, string> = {};
|
||||
@@ -53,10 +54,6 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
|
||||
}
|
||||
};
|
||||
|
||||
const resetToEnglish = () => {
|
||||
reset(toFormValues(langEn), { keepDefaultValues: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title='Edit custom translations'
|
||||
@@ -87,12 +84,9 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
|
||||
</Panel.Section>
|
||||
}
|
||||
footerElements={
|
||||
<div className={style.footer}>
|
||||
<div>
|
||||
{errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
|
||||
<Panel.InlineElements align='apart'>
|
||||
<Button variant='ghosted' size='large' onClick={resetToEnglish} disabled={isSubmitting}>
|
||||
Reset to English
|
||||
</Button>
|
||||
<Panel.InlineElements>
|
||||
<Button size='large' onClick={onClose}>
|
||||
Cancel
|
||||
@@ -115,14 +109,6 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
|
||||
);
|
||||
}
|
||||
|
||||
function toFormValues(translation: Partial<TranslationObject>) {
|
||||
const values: Record<string, string> = {};
|
||||
Object.keys(langEn).forEach((key) => {
|
||||
values[toFormKey(key)] = translation[key as keyof TranslationObject] || '';
|
||||
});
|
||||
return values;
|
||||
}
|
||||
|
||||
function toFormKey(key: string) {
|
||||
return key.replace('.', '_');
|
||||
}
|
||||
|
||||
@@ -180,13 +180,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
|
||||
return (
|
||||
<Fragment key={entry.id}>
|
||||
<OperatorGroup
|
||||
key={entry.id}
|
||||
title={entry.title}
|
||||
colour={entry.colour}
|
||||
count={entry.entries.length}
|
||||
duration={entry.duration}
|
||||
/>
|
||||
<OperatorGroup key={entry.id} title={entry.title} />
|
||||
{entry.entries.map((nestedEntryId) => {
|
||||
const nestedEntry = rundown.entries[nestedEntryId];
|
||||
if (!isOntimeEvent(nestedEntry)) {
|
||||
@@ -223,7 +217,6 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
isLinkedToLoaded={isLinkedToLoaded}
|
||||
isSelected={isLoaded}
|
||||
isPast={isPast}
|
||||
groupColour={entry.colour}
|
||||
selectedRef={isLoaded ? selectedRef : undefined}
|
||||
showStart={showStart}
|
||||
subscribed={subscribedData}
|
||||
|
||||
@@ -22,39 +22,17 @@
|
||||
background-color: $gray-1250;
|
||||
}
|
||||
|
||||
&.grouped {
|
||||
position: relative;
|
||||
padding-left: 0.35rem;
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%), transparent 8rem),
|
||||
$viewer-card-bg-color;
|
||||
}
|
||||
|
||||
&.running {
|
||||
border-top: 1px solid $gray-1300;
|
||||
background-color: var(--operator-running-bg-override, $active-green);
|
||||
}
|
||||
|
||||
&.grouped.running {
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, transparent 82%, var(--group-colour, $gray-500) 18%), transparent 8rem),
|
||||
var(--operator-running-bg-override, $active-green);
|
||||
}
|
||||
|
||||
&.past {
|
||||
border-top: 1px solid transparent;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.groupRail {
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
left: 0;
|
||||
width: 0.35rem;
|
||||
background-color: var(--group-colour, $gray-500);
|
||||
}
|
||||
|
||||
.binder {
|
||||
grid-area: binder;
|
||||
color: $section-white;
|
||||
@@ -96,9 +74,6 @@
|
||||
.plannedStart,
|
||||
.timeUntil,
|
||||
.runningTime {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
border-radius: $component-border-radius-md;
|
||||
padding: 0.25rem 0.5rem;
|
||||
line-height: 1;
|
||||
@@ -120,21 +95,6 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.live {
|
||||
color: $ui-black;
|
||||
background-color: $ui-white;
|
||||
}
|
||||
|
||||
.due {
|
||||
color: $ui-black;
|
||||
background-color: $orange-500;
|
||||
}
|
||||
|
||||
.done {
|
||||
color: $white-60;
|
||||
background-color: $white-7;
|
||||
}
|
||||
|
||||
.runningTime {
|
||||
grid-area: running;
|
||||
font-size: 1.25rem;
|
||||
|
||||
@@ -25,7 +25,6 @@ interface OperatorEventProps {
|
||||
isLinkedToLoaded: boolean;
|
||||
isSelected: boolean;
|
||||
isPast: boolean;
|
||||
groupColour?: string;
|
||||
selectedRef?: RefObject<HTMLDivElement | null>;
|
||||
showStart: boolean;
|
||||
subscribed: Subscribed;
|
||||
@@ -47,7 +46,6 @@ function OperatorEvent({
|
||||
isLinkedToLoaded,
|
||||
isSelected,
|
||||
isPast,
|
||||
groupColour,
|
||||
selectedRef,
|
||||
showStart,
|
||||
subscribed,
|
||||
@@ -70,12 +68,7 @@ function OperatorEvent({
|
||||
const mouseHandlers = useLongPress(handleLongPress);
|
||||
const cueColours = colour && getAccessibleColour(colour);
|
||||
|
||||
const operatorClasses = cx([
|
||||
style.event,
|
||||
groupColour && style.grouped,
|
||||
isSelected && style.running,
|
||||
isPast && style.past,
|
||||
]);
|
||||
const operatorClasses = cx([style.event, isSelected && style.running, isPast && style.past]);
|
||||
|
||||
const hasFields = subscribed.some((field) => field.value);
|
||||
const columnCount = subscribed.length ? Math.min(subscribed.length, 4) : 0;
|
||||
@@ -92,10 +85,8 @@ function OperatorEvent({
|
||||
data-testid={cue}
|
||||
ref={selectedRef}
|
||||
onContextMenu={handleLongPress}
|
||||
style={groupColour ? ({ '--group-colour': groupColour } as CSSProperties) : undefined}
|
||||
{...mouseHandlers}
|
||||
>
|
||||
{groupColour && <div className={style.groupRail} />}
|
||||
<div className={style.binder} style={{ ...cueColours }}>
|
||||
<span className={style.cue}>{cue}</span>
|
||||
</div>
|
||||
@@ -162,11 +153,11 @@ function OperatorEventSchedule({
|
||||
isLinkedToLoaded,
|
||||
}: OperatorEventScheduleProps) {
|
||||
if (isPast) {
|
||||
return <span className={cx([style.timeUntil, style.done])}>DONE</span>;
|
||||
return <span className={style.timeUntil}>DONE</span>;
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
return <span className={cx([style.timeUntil, style.live])}>LIVE</span>;
|
||||
return <span className={style.timeUntil}>LIVE</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -195,7 +186,7 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
|
||||
const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;
|
||||
|
||||
return (
|
||||
<span className={cx([style.timeUntil, isDue && style.due])} data-testid='time-until'>
|
||||
<span className={style.timeUntil} data-testid='time-until'>
|
||||
{timeUntilString}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -1,33 +1,13 @@
|
||||
.group {
|
||||
width: 100%;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-left: 0.35rem solid var(--group-colour, $gray-500);
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: $gray-1350;
|
||||
background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: color-mix(in srgb, currentColor 60%, transparent);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
// tablet
|
||||
@media (min-width: $min-tablet) {
|
||||
.group {
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,12 @@
|
||||
import { CSSProperties, memo } from 'react';
|
||||
|
||||
import { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { formatDuration } from '../../../common/utils/time';
|
||||
import { memo } from 'react';
|
||||
|
||||
import style from './OperatorGroup.module.scss';
|
||||
|
||||
interface OperatorGroup {
|
||||
title: string;
|
||||
colour: string;
|
||||
count: number;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
export default memo(OperatorGroup);
|
||||
function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
|
||||
const groupColour = colour || '#929292';
|
||||
const groupColours = getAccessibleColour(groupColour);
|
||||
|
||||
return (
|
||||
<div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
|
||||
<span className={style.title}>{title}</span>
|
||||
<span className={style.meta}>
|
||||
<span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
|
||||
<span>{formatDuration(duration)}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
function OperatorGroup({ title }: OperatorGroup) {
|
||||
return <div className={style.group}>{title}</div>;
|
||||
}
|
||||
|
||||
@@ -3,94 +3,58 @@
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.shortcutSection {
|
||||
flex: 1;
|
||||
width: min(100%, 48rem);
|
||||
margin-top: clamp(1.5rem, 8vh, 5rem);
|
||||
margin-top: 15vh;
|
||||
margin-inline: auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
font-size: calc(1rem - 3px);
|
||||
border-collapse: separate;
|
||||
border-spacing: 4rem 0;
|
||||
|
||||
.shortcutGroup {
|
||||
h3 {
|
||||
margin: 0 0 0.375rem;
|
||||
color: $ui-white;
|
||||
font-size: calc(1rem - 3px);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
tr {
|
||||
white-space: nowrap;
|
||||
td:nth-child(odd) {
|
||||
text-align: left;
|
||||
}
|
||||
td:nth-child(even) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcutList {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.shortcutRow {
|
||||
min-height: 1.625rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10rem, 1fr) minmax(0, auto);
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: calc(1rem - 3px);
|
||||
}
|
||||
|
||||
.shortcutLabel {
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.shortcutKeys {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.25rem 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.keyCombo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25rem 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: $gray-500;
|
||||
font-size: calc(1rem - 5px);
|
||||
.spacer {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.kbd {
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
font-size: calc(1rem - 2px);
|
||||
padding: 0.125rem 0.5rem;
|
||||
background-color: $gray-1200;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.entryEditor {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.shortcutSection {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.shortcutRow {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.shortcutKeys {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
border-radius: 2px;
|
||||
font-weight: 400;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { PropsWithChildren, memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../common/components/editor-utils/EditorUtils';
|
||||
import Kbd from '../../../common/components/kbd/Kbd';
|
||||
import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
|
||||
import style from './EventEditorEmpty.module.scss';
|
||||
@@ -13,124 +12,216 @@ function EventEditorEmpty() {
|
||||
<div className={style.entryEditor} data-testid='editor-container'>
|
||||
<div className={style.shortcutSection}>
|
||||
<Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
|
||||
<div className={style.shortcuts}>
|
||||
<ShortcutGroup title='Search'>
|
||||
<Shortcut label='Find in rundown'>
|
||||
<Combo keys={[deviceMod, 'F']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Open settings'>
|
||||
<Combo keys={[deviceMod, ',']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
|
||||
<ShortcutGroup title='Navigation'>
|
||||
<Shortcut label='Select entry'>
|
||||
<Combo keys={[deviceAlt, '↑']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, '↓']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Select group'>
|
||||
<Combo keys={[deviceAlt, 'Shift', '↑']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, 'Shift', '↓']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Jump to top / bottom'>
|
||||
<Combo keys={['Home']} />
|
||||
<Separator />
|
||||
<Combo keys={['End']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Page up / down'>
|
||||
<Combo keys={['PgUp']} />
|
||||
<Separator />
|
||||
<Combo keys={['PgDn']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Deselect entry'>
|
||||
<Combo keys={['Esc']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
|
||||
<ShortcutGroup title='Editing'>
|
||||
<Shortcut label='Reorder selected entry'>
|
||||
<Combo keys={[deviceAlt, deviceMod, '↑']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, deviceMod, '↓']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Copy selected entry'>
|
||||
<Combo keys={[deviceMod, 'C']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Cut selected entry'>
|
||||
<Combo keys={[deviceMod, 'X']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Paste below'>
|
||||
<Combo keys={[deviceMod, 'V']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Paste above'>
|
||||
<Combo keys={[deviceMod, 'Shift', 'V']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Clone selected entry'>
|
||||
<Combo keys={[deviceMod, 'D']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Delete selected entry'>
|
||||
<Combo keys={[deviceAlt, 'Backspace']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
|
||||
<ShortcutGroup title='Insert'>
|
||||
<Shortcut label='Add event below / above'>
|
||||
<Combo keys={[deviceAlt, 'E']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, 'Shift', 'E']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Add group below / above'>
|
||||
<Combo keys={[deviceAlt, 'G']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, 'Shift', 'G']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Add milestone below / above'>
|
||||
<Combo keys={[deviceAlt, 'M']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, 'Shift', 'M']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Add delay below / above'>
|
||||
<Combo keys={[deviceAlt, 'D']} />
|
||||
<Separator />
|
||||
<Combo keys={[deviceAlt, 'Shift', 'D']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
</div>
|
||||
<table className={style.shortcuts}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Find in rundown</td>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>F</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Open Settings</td>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>,</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className={style.spacer} />
|
||||
<tr>
|
||||
<td>Select entry</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>↑</Kbd>
|
||||
<AuxKey>/</AuxKey>
|
||||
<Kbd>↓</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Select group</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>↑</Kbd>
|
||||
<AuxKey>/</AuxKey>
|
||||
<Kbd>↓</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jump to top / bottom</td>
|
||||
<td>
|
||||
<Kbd>Home</Kbd>
|
||||
<AuxKey>/</AuxKey>
|
||||
<Kbd>End</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page up / down</td>
|
||||
<td>
|
||||
<Kbd>PgUp</Kbd>
|
||||
<AuxKey>/</AuxKey>
|
||||
<Kbd>PgDn</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Deselect entry</td>
|
||||
<td>
|
||||
<Kbd>Esc</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className={style.spacer} />
|
||||
<tr>
|
||||
<td>Reorder selected entry</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>↑</Kbd>
|
||||
<AuxKey>/</AuxKey>
|
||||
<Kbd>↓</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Copy selected entry</td>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<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>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>V</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paste below</td>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>V</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clone selected entry</td>
|
||||
<td>
|
||||
<Kbd>{deviceMod}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>D</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete selected entry</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Backspace</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className={style.spacer} />
|
||||
<tr>
|
||||
<td>Add event below</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>E</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add event above</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>E</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add group below</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>G</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add group above</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>G</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add milestone below</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>M</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add milestone above</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>M</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add delay below</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>D</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Add delay above</td>
|
||||
<td>
|
||||
<Kbd>{deviceAlt}</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>Shift</Kbd>
|
||||
<AuxKey>+</AuxKey>
|
||||
<Kbd>D</Kbd>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
|
||||
return (
|
||||
<section className={style.shortcutGroup}>
|
||||
<h3>{title}</h3>
|
||||
<div className={style.shortcutList}>{children}</div>
|
||||
</section>
|
||||
);
|
||||
function AuxKey({ children }: PropsWithChildren) {
|
||||
return <span className={style.divider}>{children}</span>;
|
||||
}
|
||||
|
||||
function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
|
||||
return (
|
||||
<div className={style.shortcutRow}>
|
||||
<span className={style.shortcutLabel}>{label}</span>
|
||||
<span className={style.shortcutKeys}>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Combo({ keys }: { keys: string[] }) {
|
||||
return (
|
||||
<span className={style.keyCombo}>
|
||||
{keys.map((key) => (
|
||||
<Kbd key={key}>{key}</Kbd>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Separator() {
|
||||
return <span className={style.separator}>/</span>;
|
||||
function Kbd({ children }: PropsWithChildren) {
|
||||
return <span className={style.kbd}>{children}</span>;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ import { TbFlagFilled, TbListNumbers } from 'react-icons/tb';
|
||||
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
|
||||
import { useContextMenu } from '../../../common/hooks/useContextMenu';
|
||||
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
|
||||
import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
import { deviceMod } from '../../../common/utils/deviceUtils';
|
||||
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { useRenumberCuesDialogStore } from '../renumber-cues-dialog/RenumberCuesDialog';
|
||||
import { useEventIdSwapping } from '../useEventIdSwapping';
|
||||
@@ -156,7 +156,7 @@ export default function RundownEvent({
|
||||
type: 'item',
|
||||
label: 'Delete',
|
||||
icon: IoTrash,
|
||||
shortcut: `${deviceAlt}+Backspace`,
|
||||
shortcut: `${deviceMod}+Del`,
|
||||
onClick: () => {
|
||||
clearSelectedEvents();
|
||||
deleteEntry(Array.from(selectedEvents));
|
||||
@@ -202,7 +202,7 @@ export default function RundownEvent({
|
||||
type: 'item',
|
||||
label: 'Delete',
|
||||
icon: IoTrash,
|
||||
shortcut: `${deviceAlt}+Backspace`,
|
||||
shortcut: `${deviceMod}+Del`,
|
||||
onClick: () => {
|
||||
deleteEntry([eventId]);
|
||||
unselect(eventId);
|
||||
|
||||
+2
@@ -3,5 +3,7 @@
|
||||
width: 0;
|
||||
border-radius: 1px 0 0 1px;
|
||||
|
||||
transition: 1s linear;
|
||||
transition-property: width;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,12 +1,12 @@
|
||||
import { useAnimatedProgress } from '../../../../common/hooks/useAnimatedProgress';
|
||||
import { useTimer } from '../../../../common/hooks/useSocket';
|
||||
import { getProgress } from '../../../../common/utils/getProgress';
|
||||
|
||||
import style from './RundownEventProgressBar.module.scss';
|
||||
|
||||
export default function RundownEventProgressBar() {
|
||||
const timer = useTimer();
|
||||
|
||||
const progress = useAnimatedProgress(timer.current, timer.duration);
|
||||
const progress = getProgress(timer.current, timer.duration);
|
||||
|
||||
return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
|
||||
}
|
||||
|
||||
@@ -82,17 +82,6 @@
|
||||
margin-right: 0.25rem;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.duration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.lockIcon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.over {
|
||||
color: $playback-over;
|
||||
.strike {
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
IoChevronUp,
|
||||
IoDuplicateOutline,
|
||||
IoFolderOpenOutline,
|
||||
IoLockClosed,
|
||||
IoReorderTwo,
|
||||
IoTrash,
|
||||
} from 'react-icons/io5';
|
||||
@@ -18,7 +17,7 @@ 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 { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
import { deviceMod } from '../../../common/utils/deviceUtils';
|
||||
import { getOffsetState } from '../../../common/utils/offset';
|
||||
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { formatDuration, formatTime } from '../../../common/utils/time';
|
||||
@@ -66,7 +65,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
|
||||
type: 'item',
|
||||
label: 'Delete Group',
|
||||
icon: IoTrash,
|
||||
shortcut: `${deviceAlt}+Backspace`,
|
||||
shortcut: `${deviceMod}+Del`,
|
||||
onClick: () => deleteEntry([data.id]),
|
||||
},
|
||||
]);
|
||||
@@ -177,17 +176,14 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
|
||||
</div>
|
||||
<div className={style.metaEntry}>
|
||||
<div className={style.metaLabel}>Duration</div>
|
||||
<div className={style.duration}>
|
||||
{planOffset === null ? (
|
||||
formatDuration(data.duration)
|
||||
) : (
|
||||
<span className={cx([planOffsetLabel && style[planOffsetLabel]])}>
|
||||
<span className={style.strike}>{formatDuration(data.duration)}</span>
|
||||
<Tag className={style.offsetLabel}>{planOffset}</Tag>
|
||||
</span>
|
||||
)}
|
||||
{data.targetDuration !== null && <IoLockClosed className={style.lockIcon} />}
|
||||
</div>
|
||||
{planOffset === null ? (
|
||||
<div>{formatDuration(data.duration)}</div>
|
||||
) : (
|
||||
<div className={cx([planOffsetLabel && style[planOffsetLabel]])}>
|
||||
<span className={style.strike}>{formatDuration(data.duration)}</span>
|
||||
<Tag className={style.offsetLabel}>{planOffset}</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ import useReactiveTextInput from '../../../common/components/input/text-input/us
|
||||
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
|
||||
import { useContextMenu } from '../../../common/hooks/useContextMenu';
|
||||
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
|
||||
import { deviceAlt } from '../../../common/utils/deviceUtils';
|
||||
import { deviceMod } from '../../../common/utils/deviceUtils';
|
||||
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { useEventSelection } from '../useEventSelection';
|
||||
|
||||
@@ -38,7 +38,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
|
||||
type: 'item',
|
||||
label: 'Delete',
|
||||
icon: IoTrash,
|
||||
shortcut: `${deviceAlt}+Backspace`,
|
||||
shortcut: `${deviceMod}+Del`,
|
||||
onClick: () => deleteEntry([entryId]),
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { OntimeView, URLPreset } from 'ontime-types';
|
||||
import { generateId } from 'ontime-utils';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { FieldErrors, useForm } from 'react-hook-form';
|
||||
|
||||
import { generateUrl } from '../../common/api/session';
|
||||
@@ -18,7 +18,7 @@ import { preventEscape } from '../../common/utils/keyEvent';
|
||||
import { isUrlSafe } from '../../common/utils/regex';
|
||||
import { isOntimeCloud, serverURL } from '../../externals';
|
||||
import * as Panel from '../app-settings/panel-utils/PanelUtils';
|
||||
import CuesheetLinkOptions, { CuesheetPermissionValues } from './composite/CuesheetLinkOptions';
|
||||
import CuesheetLinkOptions from './composite/CuesheetLinkOptions';
|
||||
|
||||
import style from './GenerateLinkForm.module.scss';
|
||||
|
||||
@@ -53,26 +53,12 @@ type GenerateLinkState = 'pending' | 'loading' | 'success' | 'error';
|
||||
|
||||
export default function GenerateLinkForm({ hostOptions, pathOptions, presets, isLockedToView }: GenerateLinkFormProps) {
|
||||
const [formState, setFormState] = useState<GenerateLinkState>('pending');
|
||||
const [url, setUrl] = useState('');
|
||||
const [cuesheetPermissions, setCuesheetPermissions] = useState<CuesheetPermissionValues>({
|
||||
read: 'full',
|
||||
write: 'full',
|
||||
});
|
||||
const [url, setUrl] = useState(serverURL);
|
||||
const cuesheetReadRef = useRef<HTMLInputElement>(null);
|
||||
const cuesheetWriteRef = useRef<HTMLInputElement>(null);
|
||||
const generatedAlias = useRef<string>(`cuesheet-${generateId()}`);
|
||||
|
||||
const { addPreset, updatePreset } = useUpdateUrlPreset();
|
||||
// Tracks the alias we already created this session so re-generating updates rather than duplicates it
|
||||
const createdAlias = useRef<string | null>(null);
|
||||
|
||||
/**
|
||||
* Permissions live outside react-hook-form, so we reset a successful state manually
|
||||
* whenever they change - this re-arms the "Create share link" button as the previous
|
||||
* link no longer reflects the selected permissions.
|
||||
*/
|
||||
const handlePermissionsChange = useCallback((permissions: CuesheetPermissionValues) => {
|
||||
setCuesheetPermissions(permissions);
|
||||
setFormState((current) => (current === 'success' ? 'pending' : current));
|
||||
}, []);
|
||||
const { addPreset } = useUpdateUrlPreset();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
@@ -104,20 +90,16 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
|
||||
if (options.read === '-') {
|
||||
throw new Error('Cannot create a share with no read permissions');
|
||||
}
|
||||
const payload = {
|
||||
const presets = await addPreset({
|
||||
target: OntimeView.Cuesheet,
|
||||
enabled: true,
|
||||
alias,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
options: {
|
||||
read: options.read,
|
||||
write: options.write,
|
||||
},
|
||||
} as const;
|
||||
// Re-generating with the same name updates the existing preset instead of failing on a duplicate alias
|
||||
const presets = createdAlias.current === alias ? await updatePreset(alias, payload) : await addPreset(payload);
|
||||
createdAlias.current = alias;
|
||||
});
|
||||
return presets.find((preset) => preset.alias === alias);
|
||||
};
|
||||
|
||||
@@ -126,8 +108,8 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
|
||||
setFormState('loading');
|
||||
if (options.path === OntimeView.Cuesheet) {
|
||||
const urlPreset = await createPresetFromOptions((options as CuesheetLinkOptions).alias, {
|
||||
read: cuesheetPermissions.read,
|
||||
write: cuesheetPermissions.write,
|
||||
read: cuesheetReadRef.current?.value ?? 'full',
|
||||
write: cuesheetWriteRef.current?.value ?? 'full',
|
||||
});
|
||||
|
||||
if (!urlPreset) {
|
||||
@@ -175,7 +157,6 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
|
||||
}
|
||||
};
|
||||
|
||||
const noReadAccess = watch('path') === OntimeView.Cuesheet && cuesheetPermissions.read === '-';
|
||||
const canSubmit = isDirty || formState !== 'success';
|
||||
|
||||
return (
|
||||
@@ -239,7 +220,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
|
||||
})}
|
||||
/>
|
||||
</Panel.ListItem>
|
||||
<CuesheetLinkOptions onChange={handlePermissionsChange} />
|
||||
<CuesheetLinkOptions readRef={cuesheetReadRef} writeRef={cuesheetWriteRef} />
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -287,29 +268,18 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
|
||||
</Panel.ListGroup>
|
||||
<Panel.Error>{errors.root?.message}</Panel.Error>
|
||||
<Panel.InlineElements align='end' className={style.end}>
|
||||
<Button
|
||||
type='submit'
|
||||
variant={canSubmit ? 'primary' : 'subtle'}
|
||||
loading={formState === 'loading'}
|
||||
disabled={noReadAccess}
|
||||
>
|
||||
<Button type='submit' variant={canSubmit ? 'primary' : 'subtle'} loading={formState === 'loading'}>
|
||||
{canSubmit ? 'Create share link' : 'Link copied to clipboard!'}
|
||||
</Button>
|
||||
</Panel.InlineElements>
|
||||
</div>
|
||||
<Panel.Section className={style.column}>
|
||||
<Panel.Description>Share this link</Panel.Description>
|
||||
{url ? (
|
||||
<>
|
||||
<QRCode size={172} value={url} />
|
||||
<div className={style.copiableLink} data-testid='copy-link'>
|
||||
{url}
|
||||
</div>
|
||||
<CopyTag copyValue={url}>Copy link</CopyTag>
|
||||
</>
|
||||
) : (
|
||||
<Panel.Description>Your link will appear here once you create it.</Panel.Description>
|
||||
)}
|
||||
<QRCode size={172} value={url} />
|
||||
<div className={style.copiableLink} data-testid='copy-link'>
|
||||
{url}
|
||||
</div>
|
||||
<CopyTag copyValue={url}>Copy link</CopyTag>
|
||||
</Panel.Section>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useMemo } from 'react';
|
||||
|
||||
import useInfo from '../../common/hooks-query/useInfo';
|
||||
import useUrlPresets from '../../common/hooks-query/useUrlPresets';
|
||||
import { hostToBaseUrl } from '../../common/utils/linkUtils';
|
||||
import GenerateLinkForm from './GenerateLinkForm';
|
||||
|
||||
interface GenerateLinkFormExportProps {
|
||||
@@ -22,7 +21,7 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
|
||||
*/
|
||||
const hostOptions = useMemo(() => {
|
||||
return infoData.networkInterfaces.map((nif) => ({
|
||||
value: hostToBaseUrl(nif.address, infoData.serverPort),
|
||||
value: `http://${nif.address}:${infoData.serverPort}`,
|
||||
label: `${nif.name} - ${nif.address}`,
|
||||
}));
|
||||
}, [infoData.networkInterfaces, infoData.serverPort]);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Fragment, RefObject, useMemo, useState } from 'react';
|
||||
|
||||
import RadioGroup from '../../../common/components/radio-group/RadioGroup';
|
||||
import Switch from '../../../common/components/switch/Switch';
|
||||
@@ -10,141 +10,118 @@ import style from './CuesheetLinkOptions.module.scss';
|
||||
|
||||
type AccessMode = 'full' | 'custom';
|
||||
|
||||
export interface CuesheetPermissionValues {
|
||||
read: string;
|
||||
write: string;
|
||||
}
|
||||
|
||||
interface CuesheetLinkOptionsProps {
|
||||
/** Existing read permission to seed the form with ('full' | '-' | comma separated keys) */
|
||||
initialRead?: string;
|
||||
/** Existing write permission to seed the form with ('full' | '-' | comma separated keys) */
|
||||
initialWrite?: string;
|
||||
/** Notifies the parent whenever the resolved read/write permissions change */
|
||||
onChange: (permissions: CuesheetPermissionValues) => void;
|
||||
readRef?: RefObject<HTMLInputElement | null>;
|
||||
writeRef?: RefObject<HTMLInputElement | null>;
|
||||
}
|
||||
|
||||
/** A null result means "full or unset" - there is no explicit per-column selection to seed */
|
||||
function parseKeys(permission: string | undefined): Set<string> | null {
|
||||
if (permission == null || permission === 'full') {
|
||||
return null;
|
||||
}
|
||||
if (permission === '-') {
|
||||
return new Set();
|
||||
}
|
||||
return new Set(permission.split(','));
|
||||
}
|
||||
|
||||
function modeFromPermission(permission: string | undefined): AccessMode {
|
||||
return permission == null || permission === 'full' ? 'full' : 'custom';
|
||||
}
|
||||
|
||||
export default function CuesheetLinkOptions({ initialRead, initialWrite, onChange }: CuesheetLinkOptionsProps) {
|
||||
export default function CuesheetLinkOptions({ readRef, writeRef }: CuesheetLinkOptionsProps) {
|
||||
const { data } = useCustomFields();
|
||||
const customFieldColumns = useMemo(() => makeCuesheetCustomColumns(data), [data]);
|
||||
const allColumns = useMemo(() => [...cuesheetDefaultColumns, ...customFieldColumns], [customFieldColumns]);
|
||||
|
||||
// Parsed seed values - stable for the lifetime of a given preset
|
||||
const initialReadKeys = useMemo(() => parseKeys(initialRead), [initialRead]);
|
||||
const initialWriteKeys = useMemo(() => parseKeys(initialWrite), [initialWrite]);
|
||||
const [readPermissions, setReadPermissions] = useState<AccessMode>('full');
|
||||
const [writePermissions, setWritePermissions] = useState<AccessMode>('full');
|
||||
|
||||
const [readPermissions, setReadPermissions] = useState<AccessMode>(() => modeFromPermission(initialRead));
|
||||
const [writePermissions, setWritePermissions] = useState<AccessMode>(() => modeFromPermission(initialWrite));
|
||||
|
||||
// Default for a column we have not seen yet: honour the seed in custom mode, otherwise grant access
|
||||
const defaultRead = useCallback(
|
||||
(key: string) => (initialReadKeys ? initialReadKeys.has(key) : true),
|
||||
[initialReadKeys],
|
||||
);
|
||||
const defaultWrite = useCallback(
|
||||
(key: string) => (initialWriteKeys ? initialWriteKeys.has(key) : true),
|
||||
[initialWriteKeys],
|
||||
);
|
||||
|
||||
const [readSwitches, setReadSwitches] = useState<Record<string, boolean>>({});
|
||||
const [writeSwitches, setWriteSwitches] = useState<Record<string, boolean>>({});
|
||||
|
||||
// Custom fields load asynchronously, so reconcile the switch maps whenever the column list grows.
|
||||
// Newly seen columns are seeded from the initial values (or default to on for a fresh link).
|
||||
useEffect(() => {
|
||||
setReadSwitches((prev) => {
|
||||
const next = { ...prev };
|
||||
for (const column of allColumns) {
|
||||
if (!(column.value in next)) next[column.value] = defaultRead(column.value);
|
||||
}
|
||||
return next;
|
||||
const [readSwitches, setReadSwitches] = useState<Record<string, boolean>>(() => {
|
||||
const initialState: Record<string, boolean> = {};
|
||||
[...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
|
||||
initialState[column.value] = true;
|
||||
});
|
||||
setWriteSwitches((prev) => {
|
||||
const next = { ...prev };
|
||||
for (const column of allColumns) {
|
||||
if (!(column.value in next)) next[column.value] = defaultWrite(column.value);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, [allColumns, defaultRead, defaultWrite]);
|
||||
return initialState;
|
||||
});
|
||||
|
||||
const isReadOn = (key: string) => readSwitches[key] ?? defaultRead(key);
|
||||
const isWriteOn = (key: string) => writeSwitches[key] ?? defaultWrite(key);
|
||||
const [writeSwitches, setWriteSwitches] = useState<Record<string, boolean>>(() => {
|
||||
const initialState: Record<string, boolean> = {};
|
||||
[...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
|
||||
initialState[column.value] = true;
|
||||
});
|
||||
return initialState;
|
||||
});
|
||||
|
||||
const handleReadModeChange = (value: AccessMode) => {
|
||||
setReadPermissions(value);
|
||||
|
||||
setReadSwitches((prevReadSwitches) => {
|
||||
const updatedReadSwitches = { ...prevReadSwitches };
|
||||
Object.keys(updatedReadSwitches).forEach((key) => {
|
||||
updatedReadSwitches[key] = true;
|
||||
});
|
||||
return updatedReadSwitches;
|
||||
});
|
||||
};
|
||||
|
||||
const handleWriteModeChange = (value: AccessMode) => {
|
||||
setWritePermissions(value);
|
||||
// Full write implies full read
|
||||
if (value === 'full') {
|
||||
setReadPermissions('full');
|
||||
}
|
||||
setWritePermissions(value);
|
||||
|
||||
setReadSwitches((prevReadSwitches) => {
|
||||
const updatedReadSwitches = { ...prevReadSwitches };
|
||||
setWriteSwitches((prevWriteSwitches) => {
|
||||
const updatedWriteSwitches = { ...prevWriteSwitches };
|
||||
[...cuesheetDefaultColumns, ...customFieldColumns].forEach((column) => {
|
||||
updatedReadSwitches[column.value] = true;
|
||||
updatedWriteSwitches[column.value] = true;
|
||||
});
|
||||
return updatedWriteSwitches;
|
||||
});
|
||||
return updatedReadSwitches;
|
||||
});
|
||||
};
|
||||
|
||||
const handleReadSwitch = (key: string, value: boolean) => {
|
||||
setReadSwitches((prev) => ({ ...prev, [key]: value }));
|
||||
// A column the recipient cannot read cannot be written either
|
||||
if (!value) {
|
||||
setWriteSwitches((prev) => ({ ...prev, [key]: false }));
|
||||
const handleSwitchChange = (key: string, type: 'read' | 'write', value: boolean) => {
|
||||
if (type === 'read') {
|
||||
setReadSwitches((prevReadSwitches) => {
|
||||
const updatedReadSwitches = { ...prevReadSwitches, [key]: value };
|
||||
return updatedReadSwitches;
|
||||
});
|
||||
} else {
|
||||
setWriteSwitches((prevWriteSwitches) => {
|
||||
const updatedWriteSwitches = { ...prevWriteSwitches, [key]: value };
|
||||
return updatedWriteSwitches;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleWriteSwitch = (key: string, value: boolean) => {
|
||||
setWriteSwitches((prev) => ({ ...prev, [key]: value }));
|
||||
// Granting write access requires read access
|
||||
if (value) {
|
||||
setReadSwitches((prev) => ({ ...prev, [key]: true }));
|
||||
}
|
||||
};
|
||||
|
||||
const resolvedRead = useMemo(() => {
|
||||
const getReadPermissions = () => {
|
||||
if (readPermissions === 'full' || writePermissions === 'full') {
|
||||
return 'full';
|
||||
}
|
||||
const keys = allColumns.filter((column) => isReadOn(column.value)).map((column) => column.value);
|
||||
return keys.length ? keys.join(',') : '-';
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [readPermissions, writePermissions, readSwitches, allColumns]);
|
||||
|
||||
const resolvedWrite = useMemo(() => {
|
||||
return Object.entries(readSwitches)
|
||||
.filter(([_, value]) => value)
|
||||
.map(([key]) => key)
|
||||
.join(',');
|
||||
};
|
||||
|
||||
const getWritePermissions = () => {
|
||||
if (writePermissions === 'full') {
|
||||
return 'full';
|
||||
}
|
||||
const keys = allColumns.filter((column) => isWriteOn(column.value)).map((column) => column.value);
|
||||
return keys.length ? keys.join(',') : '-';
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [writePermissions, writeSwitches, allColumns]);
|
||||
|
||||
// Notify the parent of the resolved permissions. onChange is expected to be stable.
|
||||
useEffect(() => {
|
||||
onChange({ read: resolvedRead, write: resolvedWrite });
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [resolvedRead, resolvedWrite]);
|
||||
|
||||
const noReadAccess = resolvedRead === '-';
|
||||
return Object.entries(writeSwitches)
|
||||
.filter(([_, value]) => value)
|
||||
.map(([key]) => key)
|
||||
.join(',');
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel.Indent>
|
||||
<input name='read' hidden readOnly ref={readRef} value={getReadPermissions() || '-'} />
|
||||
<input name='write' hidden readOnly ref={writeRef} value={getWritePermissions() || '-'} />
|
||||
<div>
|
||||
<Panel.Field title='Access mode' description='Which parts of the data the link gives access to' />
|
||||
<Panel.Field title='Access mode' description='Which parts of the data will the link give access to' />
|
||||
<div>
|
||||
<RadioGroup
|
||||
value={writePermissions}
|
||||
onValueChange={handleWriteModeChange}
|
||||
orientation='horizontal'
|
||||
items={[
|
||||
{ value: 'full', label: 'Full write (edit all existing and future columns)' },
|
||||
{ value: 'custom', label: 'Custom write' },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
value={readPermissions}
|
||||
onValueChange={handleReadModeChange}
|
||||
@@ -155,18 +132,8 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
|
||||
{ value: 'custom', label: 'Custom read' },
|
||||
]}
|
||||
/>
|
||||
<RadioGroup
|
||||
value={writePermissions}
|
||||
onValueChange={handleWriteModeChange}
|
||||
orientation='horizontal'
|
||||
items={[
|
||||
{ value: 'full', label: 'Full write (edit all existing and future columns)' },
|
||||
{ value: 'custom', label: 'Custom write' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{noReadAccess && <Panel.Error>Links must contain at least one readable column.</Panel.Error>}
|
||||
<div className={style.twoCols}>
|
||||
<div className={style.grid}>
|
||||
<Panel.Description>Ontime columns</Panel.Description>
|
||||
@@ -176,14 +143,14 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
|
||||
<Fragment key={column.value}>
|
||||
<div>{column.label}</div>
|
||||
<Switch
|
||||
checked={isReadOn(column.value)}
|
||||
onCheckedChange={(value: boolean) => handleReadSwitch(column.value, value)}
|
||||
checked={Boolean(readSwitches[column.value])}
|
||||
onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'read', value)}
|
||||
disabled={readPermissions === 'full' || writePermissions === 'full'}
|
||||
data-testid={`read-${column.value}`}
|
||||
/>
|
||||
<Switch
|
||||
checked={isWriteOn(column.value)}
|
||||
onCheckedChange={(value: boolean) => handleWriteSwitch(column.value, value)}
|
||||
checked={Boolean(writeSwitches[column.value])}
|
||||
onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'write', value)}
|
||||
disabled={writePermissions === 'full'}
|
||||
data-testid={`write-${column.value}`}
|
||||
/>
|
||||
@@ -197,16 +164,16 @@ export default function CuesheetLinkOptions({ initialRead, initialWrite, onChang
|
||||
<Panel.Description>Write</Panel.Description>
|
||||
{customFieldColumns.map((column) => (
|
||||
<Fragment key={column.value}>
|
||||
<div>{column.label}</div>
|
||||
{column.label}
|
||||
<Switch
|
||||
checked={isReadOn(column.value)}
|
||||
onCheckedChange={(value: boolean) => handleReadSwitch(column.value, value)}
|
||||
checked={Boolean(readSwitches[column.value])}
|
||||
onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'read', value)}
|
||||
disabled={readPermissions === 'full' || writePermissions === 'full'}
|
||||
data-testid={`read-${column.value}`}
|
||||
/>
|
||||
<Switch
|
||||
checked={isWriteOn(column.value)}
|
||||
onCheckedChange={(value: boolean) => handleWriteSwitch(column.value, value)}
|
||||
checked={Boolean(writeSwitches[column.value])}
|
||||
onCheckedChange={(value: boolean) => handleSwitchChange(column.value, 'write', value)}
|
||||
disabled={writePermissions === 'full'}
|
||||
data-testid={`write-${column.value}`}
|
||||
/>
|
||||
|
||||
@@ -18,7 +18,6 @@ export const langDe: TranslationObject = {
|
||||
'common.no_data': 'Keine Daten',
|
||||
'countdown.ended': 'Veranstaltung endete um',
|
||||
'countdown.running': 'Veranstaltung läuft',
|
||||
'countdown.group_running': 'Veranstaltung in Gruppe läuft',
|
||||
'countdown.loaded': 'Veranstaltung geladen',
|
||||
'countdown.select_event': 'Wählen Sie eine Veranstaltung aus, um sie zu verfolgen',
|
||||
'countdown.to_start': 'Zeit bis zum Start',
|
||||
@@ -29,7 +28,6 @@ export const langDe: TranslationObject = {
|
||||
'timeline.done': 'Beendet',
|
||||
'timeline.due': 'fällig',
|
||||
'timeline.followedby': 'Gefolgt von',
|
||||
'timeline.standby': 'Bereitschaft',
|
||||
'project.title': 'Titel',
|
||||
'project.description': 'Beschreibung',
|
||||
'project.info': 'Projektinfo',
|
||||
|
||||
@@ -18,7 +18,6 @@ export const langEs: TranslationObject = {
|
||||
'common.no_data': 'Sin datos',
|
||||
'countdown.ended': 'Evento finalizado a las',
|
||||
'countdown.running': 'Evento en curso',
|
||||
'countdown.group_running': 'Evento en grupo en curso',
|
||||
'countdown.loaded': 'Evento está cargado', //TODO: check translation
|
||||
'countdown.select_event': 'Seleccionar un evento para seguir',
|
||||
'countdown.to_start': 'Tiempo para comenzar',
|
||||
@@ -29,7 +28,6 @@ export const langEs: TranslationObject = {
|
||||
'timeline.done': 'Terminado',
|
||||
'timeline.due': 'pendiente',
|
||||
'timeline.followedby': 'Seguido por',
|
||||
'timeline.standby': 'En espera',
|
||||
'project.title': 'Título',
|
||||
'project.description': 'Descripción',
|
||||
'project.info': 'Información del proyecto',
|
||||
|
||||
@@ -18,7 +18,6 @@ export const langFr: TranslationObject = {
|
||||
'common.no_data': 'Aucune donnée',
|
||||
'countdown.ended': 'Évènement terminé à',
|
||||
'countdown.running': 'Évènement en cours',
|
||||
'countdown.group_running': 'Évènement du groupe en cours',
|
||||
'countdown.loaded': 'Évènement chargé',
|
||||
'countdown.select_event': 'Sélectionnez un évènement à suivre',
|
||||
'countdown.to_start': 'Évènement commence dans',
|
||||
@@ -29,7 +28,6 @@ export const langFr: TranslationObject = {
|
||||
'timeline.done': 'Terminé',
|
||||
'timeline.due': 'dû',
|
||||
'timeline.followedby': 'Suivi de',
|
||||
'timeline.standby': 'En attente',
|
||||
'project.title': 'Titre',
|
||||
'project.description': 'Description',
|
||||
'project.info': 'Informations du projet',
|
||||
|
||||
@@ -18,7 +18,6 @@ export const langIt: TranslationObject = {
|
||||
'common.no_data': 'Nessun dato disponibile',
|
||||
'countdown.ended': 'Evento finito alle',
|
||||
'countdown.running': 'Evento in corso',
|
||||
'countdown.group_running': 'Evento nel gruppo in corso',
|
||||
'countdown.loaded': 'Evento caricato', //TODO: check translation
|
||||
'countdown.select_event': 'Seleziona un evento da seguire',
|
||||
'countdown.to_start': 'Tempo alla partenza',
|
||||
@@ -29,7 +28,6 @@ export const langIt: TranslationObject = {
|
||||
'timeline.done': 'Terminato',
|
||||
'timeline.due': 'previsto',
|
||||
'timeline.followedby': 'Seguito da',
|
||||
'timeline.standby': 'In attesa',
|
||||
'project.title': 'Titolo',
|
||||
'project.description': 'Descrizione',
|
||||
'project.info': 'Informazioni sul progetto',
|
||||
|
||||
@@ -18,7 +18,6 @@ export const langPt: TranslationObject = {
|
||||
'common.no_data': 'Sem dados',
|
||||
'countdown.ended': 'Evento encerrado às',
|
||||
'countdown.running': 'Evento em andamento',
|
||||
'countdown.group_running': 'Evento em grupo em andamento',
|
||||
'countdown.loaded': 'Evento carregado', //TODO: check translation
|
||||
'countdown.select_event': 'Selecione um evento para acompanhar',
|
||||
'countdown.to_start': 'Tempo para iniciar',
|
||||
@@ -29,7 +28,6 @@ export const langPt: TranslationObject = {
|
||||
'timeline.done': 'Concluído',
|
||||
'timeline.due': 'Pendente',
|
||||
'timeline.followedby': 'Seguido por',
|
||||
'timeline.standby': 'Em espera',
|
||||
'project.title': 'Título',
|
||||
'project.description': 'Descrição',
|
||||
'project.info': 'Informações do projeto',
|
||||
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
@@ -141,23 +140,25 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
|
||||
return () => clearInterval(paginator.current);
|
||||
}, [cycleInterval, numPages, stopCycle, visiblePage]);
|
||||
|
||||
let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
|
||||
|
||||
// we want to show the event after the current
|
||||
const viewEvents = useMemo(() => {
|
||||
const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
|
||||
return (events as ExtendedEntry<OntimeEvent>[]).slice(selectedEventIndex + 1);
|
||||
}, [events, selectedEventId]);
|
||||
const viewEvents = events.slice(selectedEventIndex + 1);
|
||||
selectedEventIndex = 0;
|
||||
|
||||
const value = useMemo(() => {
|
||||
return {
|
||||
events: viewEvents,
|
||||
selectedEventId,
|
||||
numPages,
|
||||
visiblePage,
|
||||
containerRef,
|
||||
};
|
||||
}, [viewEvents, selectedEventId, numPages, visiblePage, containerRef]);
|
||||
|
||||
return <ScheduleContext value={value}>{children}</ScheduleContext>;
|
||||
return (
|
||||
<ScheduleContext
|
||||
value={{
|
||||
events: viewEvents as ExtendedEntry<OntimeEvent>[],
|
||||
selectedEventId,
|
||||
numPages,
|
||||
visiblePage,
|
||||
containerRef,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ScheduleContext>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSchedule = () => {
|
||||
|
||||
@@ -59,7 +59,6 @@ $item-height: 3.5rem;
|
||||
right: $view-inline-padding;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 2rem;
|
||||
|
||||
@@ -73,27 +72,14 @@ $item-height: 3.5rem;
|
||||
}
|
||||
|
||||
/* ========================= LIST ========================*/
|
||||
.empty-state {
|
||||
min-height: min(56vh, 36rem);
|
||||
padding-top: clamp(4rem, 14vh, 9rem);
|
||||
.empty-container {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state__content {
|
||||
max-width: none;
|
||||
|
||||
span {
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(1.5rem, 4vw, 2.25rem);
|
||||
line-height: 1.1;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +88,7 @@ $item-height: 3.5rem;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
|
||||
padding-bottom: 60vh;
|
||||
}
|
||||
|
||||
/* ====================== LIST-ITEM ======================*/
|
||||
@@ -118,7 +104,6 @@ $item-height: 3.5rem;
|
||||
column-gap: 1rem;
|
||||
background-color: var(--card-background-color-override, $viewer-card-bg-color);
|
||||
padding-right: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $element-border-radius;
|
||||
|
||||
&:hover {
|
||||
@@ -130,41 +115,18 @@ $item-height: 3.5rem;
|
||||
|
||||
.sub--selected {
|
||||
background: $blue-700;
|
||||
box-shadow: inset 0 0 0 1px $blue-500;
|
||||
}
|
||||
|
||||
.sub--live {
|
||||
background-color: $active-green;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, $active-green 75%, $ui-white);
|
||||
}
|
||||
|
||||
.sub--armed {
|
||||
background-color: $gray-1325;
|
||||
}
|
||||
|
||||
.sub--in-group {
|
||||
position: relative;
|
||||
margin-left: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--group-color, transparent);
|
||||
}
|
||||
|
||||
.sub__binder {
|
||||
box-shadow: inset 3px 0 0 var(--group-color, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
border-radius: $element-border-radius 0 0 $element-border-radius;
|
||||
grid-area: binder;
|
||||
}
|
||||
|
||||
@@ -176,8 +138,6 @@ $item-height: 3.5rem;
|
||||
gap: 0.25em;
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sub__schedule--delayed {
|
||||
@@ -196,73 +156,22 @@ $item-height: 3.5rem;
|
||||
color: $playback-under;
|
||||
}
|
||||
|
||||
.sub--group {
|
||||
box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
|
||||
var(--card-background-color-override, $viewer-card-bg-color);
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub__schedule,
|
||||
.sub__status,
|
||||
.sub__label {
|
||||
color: var(--secondary-color-override, $viewer-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sub--group.sub--selected {
|
||||
box-shadow: inset 0 0 0 1px $blue-500;
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 22%, transparent), transparent 42%),
|
||||
$blue-700;
|
||||
|
||||
.sub__schedule,
|
||||
.sub__status,
|
||||
.sub__label,
|
||||
.sub__eyebrow {
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
grid-area: title;
|
||||
padding-bottom: 0.5rem;
|
||||
min-width: 0;
|
||||
|
||||
font-size: $title-font-size;
|
||||
line-height: 1.1em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sub__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 0.15rem;
|
||||
color: var(--secondary-color-override, $viewer-secondary-color);
|
||||
font-size: $timer-label-size;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sub__secondary {
|
||||
grid-area: secondary;
|
||||
padding-bottom: 0.5rem;
|
||||
min-width: 0;
|
||||
|
||||
font-size: $base-font-size;
|
||||
line-height: 1.1em;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
// allow multi-line text but trim before
|
||||
white-space: pre-line;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sub__status {
|
||||
@@ -272,7 +181,6 @@ $item-height: 3.5rem;
|
||||
font-size: $timer-label-size;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub__label {
|
||||
@@ -282,7 +190,6 @@ $item-height: 3.5rem;
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub__timer {
|
||||
@@ -292,16 +199,6 @@ $item-height: 3.5rem;
|
||||
line-height: 1.1em;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.selection-count {
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
font-size: $timer-label-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ====================== MODIFIERS ======================*/
|
||||
|
||||
@@ -1,14 +1,4 @@
|
||||
import {
|
||||
EntryId,
|
||||
OntimeEntry,
|
||||
OntimeEvent,
|
||||
OntimeGroup,
|
||||
OntimeView,
|
||||
PlayableEvent,
|
||||
isOntimeEvent,
|
||||
isOntimeGroup,
|
||||
isPlayableEvent,
|
||||
} from 'ontime-types';
|
||||
import { EntryId, OntimeEvent, OntimeView, PlayableEvent, isOntimeEvent, isPlayableEvent } from 'ontime-types';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
|
||||
@@ -25,7 +15,7 @@ import { useTranslation } from '../../translation/TranslationProvider';
|
||||
import Loader from '../common/loader/Loader';
|
||||
import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
|
||||
import { getCountdownOptions, useCountdownOptions } from './countdown.options';
|
||||
import { getOrderedSubscriptions, resolveSubscriptionTarget } from './countdown.utils';
|
||||
import { getOrderedSubscriptions } from './countdown.utils';
|
||||
import CountdownSelect from './CountdownSelect';
|
||||
import CountdownSubscriptions from './CountdownSubscriptions';
|
||||
import SingleEventCountdown from './SingleEventCountdown';
|
||||
@@ -55,19 +45,13 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
|
||||
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
// gather subscribable items: playable events and groups that contain at least one playable child
|
||||
const candidates = rundownData.filter((entry): entry is ExtendedEntry<PlayableEvent | OntimeGroup> => {
|
||||
if (isOntimeEvent(entry)) {
|
||||
return isPlayableEvent(entry);
|
||||
}
|
||||
if (isOntimeGroup(entry)) {
|
||||
return rundownData.some((item) => isOntimeEvent(item) && isPlayableEvent(item) && item.parent === entry.id);
|
||||
}
|
||||
return false;
|
||||
// gather rundown data
|
||||
const playableEvents = rundownData.filter((entry): entry is ExtendedEntry<PlayableEvent> => {
|
||||
return isOntimeEvent(entry) && isPlayableEvent(entry);
|
||||
});
|
||||
|
||||
// gather presentation data
|
||||
const hasEvents = candidates.length > 0;
|
||||
const hasEvents = playableEvents.length > 0;
|
||||
|
||||
// gather option data
|
||||
const defaultFormat = getDefaultFormat(settings?.timeFormat);
|
||||
@@ -85,20 +69,15 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
|
||||
<CountdownClock />
|
||||
</div>
|
||||
|
||||
{!hasEvents && (
|
||||
<div className='empty-state'>
|
||||
<Empty text={getLocalizedString('common.no_data')} className='empty-state__content' />
|
||||
</div>
|
||||
)}
|
||||
{!hasEvents && <Empty text={getLocalizedString('common.no_data')} className='empty-container' />}
|
||||
|
||||
{hasEvents && editMode && (
|
||||
<CountdownSelect events={candidates} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
|
||||
<CountdownSelect events={playableEvents} subscriptions={subscriptions} disableEdit={() => setEditMode(false)} />
|
||||
)}
|
||||
|
||||
{hasEvents && !editMode && (
|
||||
<CountdownContents
|
||||
candidates={candidates}
|
||||
rundownData={rundownData}
|
||||
playableEvents={playableEvents}
|
||||
subscriptions={subscriptions}
|
||||
goToEditMode={() => setEditMode(true)}
|
||||
/>
|
||||
@@ -108,20 +87,19 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
|
||||
}
|
||||
|
||||
interface CountdownContentsProps {
|
||||
candidates: ExtendedEntry<OntimeEvent | OntimeGroup>[];
|
||||
rundownData: ExtendedEntry<OntimeEntry>[];
|
||||
playableEvents: ExtendedEntry<OntimeEvent>[];
|
||||
subscriptions: EntryId[];
|
||||
goToEditMode: () => void;
|
||||
}
|
||||
|
||||
function CountdownContents({ candidates, rundownData, subscriptions, goToEditMode }: CountdownContentsProps) {
|
||||
function CountdownContents({ playableEvents, subscriptions, goToEditMode }: CountdownContentsProps) {
|
||||
const { getLocalizedString } = useTranslation();
|
||||
const { hidePast } = useCountdownOptions();
|
||||
|
||||
if (subscriptions.length === 0) {
|
||||
return (
|
||||
<div className='empty-state'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
|
||||
<div className='empty-container'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
|
||||
<Button variant='primary' size='xlarge' onClick={goToEditMode}>
|
||||
<IoAdd /> Add
|
||||
</Button>
|
||||
@@ -129,15 +107,13 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
|
||||
);
|
||||
}
|
||||
|
||||
const subscribedEvents = getOrderedSubscriptions(subscriptions, candidates)
|
||||
.map((entry) => resolveSubscriptionTarget(entry, rundownData))
|
||||
.filter((target): target is NonNullable<typeof target> => target !== null);
|
||||
const subscribedEvents = getOrderedSubscriptions(subscriptions, playableEvents);
|
||||
const eventsToShow = !hidePast ? subscribedEvents : subscribedEvents.filter((event) => !event.isPast);
|
||||
|
||||
if (subscribedEvents.length === 0) {
|
||||
return (
|
||||
<div className='empty-state'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-state__content' />
|
||||
<div className='empty-container'>
|
||||
<Empty text={getLocalizedString('countdown.select_event')} className='empty-container' />
|
||||
<Button variant='primary' size='xlarge' onClick={goToEditMode}>
|
||||
<IoAdd /> Add
|
||||
</Button>
|
||||
@@ -153,8 +129,8 @@ function CountdownContents({ candidates, rundownData, subscriptions, goToEditMod
|
||||
|
||||
if (eventsToShow.length === 0) {
|
||||
return (
|
||||
<div className='empty-state'>
|
||||
<Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-state__content' />
|
||||
<div className='empty-container'>
|
||||
<Empty text={getLocalizedString('countdown.all_have_finished')} className='empty-container' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EntryId, OntimeEvent, OntimeGroup, isOntimeGroup } from 'ontime-types';
|
||||
import { EntryId, PlayableEvent } from 'ontime-types';
|
||||
import { useState } from 'react';
|
||||
import { IoArrowBack, IoClose, IoSaveOutline } from 'react-icons/io5';
|
||||
import { useNavigate } from 'react-router';
|
||||
@@ -12,7 +12,7 @@ import { makeSubscriptionsUrl } from './countdown.utils';
|
||||
import './Countdown.scss';
|
||||
|
||||
interface CountdownSelectProps {
|
||||
events: ExtendedEntry<OntimeEvent | OntimeGroup>[];
|
||||
events: ExtendedEntry<PlayableEvent>[];
|
||||
subscriptions: EntryId[];
|
||||
disableEdit: () => void;
|
||||
}
|
||||
@@ -52,15 +52,13 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
|
||||
|
||||
return (
|
||||
<div className='list-container'>
|
||||
{events.map((event) => {
|
||||
{events.map((event, index) => {
|
||||
const title = event.title || '{no title}';
|
||||
const isSelected = selectedIds.has(event.id);
|
||||
const isGroup = isOntimeGroup(event);
|
||||
const isGroupedEvent = !isGroup && Boolean(event.parent);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
key={index}
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
onClick={() => toggleSelect(event.id)}
|
||||
@@ -70,33 +68,21 @@ export default function CountdownSelect({ events, subscriptions, disableEdit }:
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
className={cx([
|
||||
'sub',
|
||||
isSelected && 'sub--selected',
|
||||
isGroup && 'sub--group',
|
||||
isGroupedEvent && 'sub--in-group',
|
||||
])}
|
||||
className={cx(['sub', isSelected && 'sub--selected'])}
|
||||
>
|
||||
<div
|
||||
className='sub__binder'
|
||||
style={{ '--user-color': event?.colour ?? '', '--group-color': event.groupColour ?? 'transparent' }}
|
||||
/>
|
||||
<div className='sub__binder' style={{ '--user-color': event?.colour ?? '' }} />
|
||||
<div className='sub__schedule'>
|
||||
<ClockTime value={event.timeStart} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
|
||||
→
|
||||
<ClockTime value={event.timeEnd} preferredFormat12='h:mm a' preferredFormat24='HH:mm' />
|
||||
</div>
|
||||
<div className='sub__label'>{isSelected ? 'Click to remove' : 'Click to add'}</div>
|
||||
<div className='sub__title'>
|
||||
{isGroup && <span className='sub__eyebrow'>Group</span>}
|
||||
{title}
|
||||
</div>
|
||||
<div className='sub__title'>{title}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className='fab-container'>
|
||||
<div className='selection-count'>{selected.length} selected</div>
|
||||
<Button variant='subtle' size='xlarge' onClick={disableEdit}>
|
||||
<IoArrowBack /> Go back
|
||||
</Button>
|
||||
|
||||
@@ -19,7 +19,6 @@ import { getPropertyValue } from '../common/viewUtils';
|
||||
import { useCountdownOptions } from './countdown.options';
|
||||
import {
|
||||
CountdownEvent,
|
||||
CountdownTarget,
|
||||
extendEventData,
|
||||
getIsLive,
|
||||
isOutsideRange,
|
||||
@@ -31,7 +30,7 @@ import {
|
||||
import './Countdown.scss';
|
||||
|
||||
interface CountdownSubscriptionsProps {
|
||||
subscribedEvents: CountdownTarget[];
|
||||
subscribedEvents: ExtendedEntry<OntimeEvent>[];
|
||||
goToEditMode: () => void;
|
||||
}
|
||||
|
||||
@@ -99,39 +98,22 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
return (
|
||||
<div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
|
||||
{subscribedEvents.map((event) => {
|
||||
// while a group is live, surface the running event's title as the secondary line
|
||||
const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
|
||||
const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
|
||||
const isGroupedEvent = !event.isGroup && Boolean(event.parent);
|
||||
const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
|
||||
// a subscribed group is live when any of its children is the selected/running event
|
||||
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
||||
const isArmed = !isLive && activeEntryId === selectedEventId;
|
||||
const secondaryData = getPropertyValue(event, secondarySource);
|
||||
const isLive = getIsLive(event.id, selectedEventId, playback);
|
||||
const isArmed = !isLive && event.id === selectedEventId;
|
||||
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
|
||||
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
ref={isLive ? selectedRef : undefined}
|
||||
className={cx([
|
||||
'sub',
|
||||
isLive && 'sub--live',
|
||||
isArmed && 'sub--armed',
|
||||
event.isGroup && 'sub--group',
|
||||
isGroupedEvent && 'sub--in-group',
|
||||
])}
|
||||
className={cx(['sub', isLive && 'sub--live', isArmed && 'sub--armed'])}
|
||||
data-testid={event.cue}
|
||||
>
|
||||
<div
|
||||
className='sub__binder'
|
||||
style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
|
||||
/>
|
||||
<div className='sub__binder' style={{ '--user-color': event.colour }} />
|
||||
<ScheduleTime event={countdownEvent} showExpected={showExpected} />
|
||||
<SubscriptionStatus event={countdownEvent} />
|
||||
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>
|
||||
{event.isGroup && <span className='sub__eyebrow'>Group</span>}
|
||||
{displayTitle}
|
||||
</div>
|
||||
<div className={cx(['sub__title', !displayTitle && 'subdued'])}>{displayTitle}</div>
|
||||
{secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -11,13 +11,13 @@ import { cx } from '../../common/utils/styleUtils';
|
||||
import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
|
||||
import { getPropertyValue } from '../common/viewUtils';
|
||||
import { useCountdownOptions } from './countdown.options';
|
||||
import { CountdownTarget, useSubscriptionDisplayData } from './countdown.utils';
|
||||
import { useSubscriptionDisplayData } from './countdown.utils';
|
||||
import { ScheduleTime } from './CountdownSubscriptions';
|
||||
|
||||
import './SingleEventCountdown.scss';
|
||||
|
||||
interface SingleEventCountdownProps {
|
||||
subscribedEvent: CountdownTarget;
|
||||
subscribedEvent: ExtendedEntry<OntimeEvent>;
|
||||
goToEditMode: () => void;
|
||||
}
|
||||
|
||||
@@ -38,13 +38,11 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
|
||||
mode,
|
||||
});
|
||||
|
||||
const { endedAt } = reportData[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
|
||||
const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
|
||||
const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
|
||||
const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
|
||||
const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
|
||||
// while a group is live, surface the running event's title as the secondary line
|
||||
const liveTitle = subscribedEvent.isGroup && subscribedEvent.liveEntry ? subscribedEvent.liveEntry.title : undefined;
|
||||
const secondaryData = liveTitle ?? getPropertyValue(subscribedEvent, secondarySource);
|
||||
const secondaryData = getPropertyValue(subscribedEvent, secondarySource);
|
||||
|
||||
return (
|
||||
<div className='single-container' data-testid='countdown-event'>
|
||||
|
||||
@@ -80,7 +80,7 @@ export const getCountdownOptions = (
|
||||
{
|
||||
id: 'sub',
|
||||
title: 'Event subscription',
|
||||
description: 'The events and groups to follow',
|
||||
description: 'The events to follow',
|
||||
values: persistedSubscriptions,
|
||||
type: 'persist',
|
||||
},
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import { ExtendedEntry } from '../../common/utils/rundownMetadata';
|
||||
import { resolveSubscriptionTarget } from './countdown.utils';
|
||||
|
||||
/**
|
||||
* Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
|
||||
* Only the fields exercised by resolveSubscriptionTarget are provided; the rest are cast away.
|
||||
*/
|
||||
function makeEvent(patch: Partial<ExtendedEntry<OntimeEvent>>): ExtendedEntry<OntimeEvent> {
|
||||
return {
|
||||
id: 'event',
|
||||
type: SupportedEntry.Event,
|
||||
title: 'event title',
|
||||
cue: '1',
|
||||
colour: '',
|
||||
skip: false,
|
||||
parent: null,
|
||||
timeStart: 0,
|
||||
timeEnd: 0,
|
||||
duration: 0,
|
||||
delay: 0,
|
||||
dayOffset: 0,
|
||||
gap: 0,
|
||||
countToEnd: false,
|
||||
custom: {},
|
||||
note: '',
|
||||
// metadata
|
||||
totalGap: 0,
|
||||
isLinkedToLoaded: false,
|
||||
isLoaded: false,
|
||||
isPast: false,
|
||||
...patch,
|
||||
} as ExtendedEntry<OntimeEvent>;
|
||||
}
|
||||
|
||||
function makeGroup(patch: Partial<ExtendedEntry<OntimeGroup>>): ExtendedEntry<OntimeGroup> {
|
||||
return {
|
||||
id: 'group',
|
||||
type: SupportedEntry.Group,
|
||||
title: 'group title',
|
||||
colour: '#abcdef',
|
||||
note: 'group note',
|
||||
entries: [],
|
||||
duration: 0,
|
||||
custom: {},
|
||||
timeStart: 0,
|
||||
timeEnd: 0,
|
||||
isPast: false,
|
||||
isLoaded: false,
|
||||
...patch,
|
||||
} as ExtendedEntry<OntimeGroup>;
|
||||
}
|
||||
|
||||
describe('resolveSubscriptionTarget()', () => {
|
||||
it('returns events unchanged', () => {
|
||||
const event = makeEvent({ id: 'e1' });
|
||||
const result = resolveSubscriptionTarget(event, [event]);
|
||||
expect(result).toBe(event);
|
||||
});
|
||||
|
||||
it('derives group timing from the first playable child while keeping the group identity', () => {
|
||||
const group = makeGroup({ id: 'g1', title: 'Session A', colour: '#123456', duration: 5000 });
|
||||
const child1 = makeEvent({ id: 'c1', parent: 'g1', timeStart: 1000, delay: 100, dayOffset: 0, title: 'Pres 1' });
|
||||
const child2 = makeEvent({ id: 'c2', parent: 'g1', timeStart: 3000, title: 'Pres 2' });
|
||||
const flat: ExtendedEntry<OntimeEntry>[] = [group, child1, child2];
|
||||
|
||||
const result = resolveSubscriptionTarget(group, flat);
|
||||
|
||||
expect(result).not.toBeNull();
|
||||
// group identity and display
|
||||
expect(result?.id).toBe('g1');
|
||||
expect(result?.title).toBe('Session A');
|
||||
expect(result?.colour).toBe('#123456');
|
||||
expect(result?.isGroup).toBe(true);
|
||||
// timing comes from the first child, duration from the group
|
||||
expect(result?.timeStart).toBe(1000);
|
||||
expect(result?.delay).toBe(100);
|
||||
expect(result?.duration).toBe(5000);
|
||||
expect(result?.countToEnd).toBe(false);
|
||||
// state checks target the first child before any child is loaded
|
||||
expect(result?.targetId).toBe('c1');
|
||||
// report lookup targets the last child (session end)
|
||||
expect(result?.reportId).toBe('c2');
|
||||
});
|
||||
|
||||
it('returns null for a group with no playable children', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const result = resolveSubscriptionTarget(group, [group]);
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
it('skips skipped children when picking the first child', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const skipped = {
|
||||
...makeEvent({ id: 'c0', parent: 'g1', timeStart: 500 }),
|
||||
skip: true,
|
||||
} as ExtendedEntry<OntimeEntry>;
|
||||
const playable = makeEvent({ id: 'c1', parent: 'g1', timeStart: 1500 });
|
||||
const result = resolveSubscriptionTarget(group, [group, skipped, playable]);
|
||||
expect(result?.timeStart).toBe(1500);
|
||||
expect(result?.reportId).toBe('c1');
|
||||
});
|
||||
|
||||
it('is live while any child is loaded and not past', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const child1 = makeEvent({ id: 'c1', parent: 'g1', isPast: true });
|
||||
const child2 = makeEvent({ id: 'c2', parent: 'g1', isLoaded: true });
|
||||
const child3 = makeEvent({ id: 'c3', parent: 'g1' });
|
||||
const result = resolveSubscriptionTarget(group, [group, child1, child2, child3]);
|
||||
|
||||
expect(result?.isLoaded).toBe(true);
|
||||
expect(result?.isPast).toBe(false);
|
||||
expect(result?.liveEntry?.id).toBe('c2');
|
||||
});
|
||||
|
||||
it('is past only once the last child is past and nothing is loaded', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const child1 = makeEvent({ id: 'c1', parent: 'g1', isPast: true });
|
||||
const child2 = makeEvent({ id: 'c2', parent: 'g1', isPast: true });
|
||||
const result = resolveSubscriptionTarget(group, [group, child1, child2]);
|
||||
|
||||
expect(result?.isLoaded).toBe(false);
|
||||
expect(result?.isPast).toBe(true);
|
||||
expect(result?.targetId).toBe('c1');
|
||||
expect(result?.liveEntry).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,17 +1,4 @@
|
||||
import {
|
||||
EntryId,
|
||||
MaybeNumber,
|
||||
OffsetMode,
|
||||
OntimeEntry,
|
||||
OntimeEvent,
|
||||
OntimeGroup,
|
||||
OntimeReport,
|
||||
Playback,
|
||||
PlayableEvent,
|
||||
isOntimeEvent,
|
||||
isOntimeGroup,
|
||||
isPlayableEvent,
|
||||
} from 'ontime-types';
|
||||
import { EntryId, MaybeNumber, OffsetMode, OntimeEntry, OntimeEvent, OntimeReport, Playback } from 'ontime-types';
|
||||
import { MILLIS_PER_MINUTE, getExpectedStart, millisToString, removeLeadingZero } from 'ontime-utils';
|
||||
|
||||
import { useCountdownSocket } from '../../common/hooks/useSocket';
|
||||
@@ -53,7 +40,7 @@ export const timerProgress: TimerMessage = {
|
||||
* Handles events in different days but disregards whether an event has actually played
|
||||
*/
|
||||
export function useSubscriptionDisplayData(
|
||||
subscribedEvent: CountdownTarget & { endedAt: MaybeNumber; expectedStart: number },
|
||||
subscribedEvent: ExtendedEntry<OntimeEvent> & { endedAt: MaybeNumber; expectedStart: number },
|
||||
): { status: ProgressStatus; statusDisplay: string; timeDisplay: string } {
|
||||
const { playback, current, clock } = useCountdownSocket();
|
||||
const { getLocalizedString } = useTranslation();
|
||||
@@ -80,11 +67,7 @@ export function useSubscriptionDisplayData(
|
||||
|
||||
return {
|
||||
status: 'live',
|
||||
statusDisplay: getLocalizedString(
|
||||
subscribedEvent.parent || (subscribedEvent.isGroup && subscribedEvent.liveEntry)
|
||||
? 'countdown.group_running'
|
||||
: timerProgress['live'],
|
||||
),
|
||||
statusDisplay: getLocalizedString(timerProgress['live']),
|
||||
timeDisplay: bigDuration(current ?? 0),
|
||||
};
|
||||
}
|
||||
@@ -185,75 +168,10 @@ export function isOutsideRange(a: number, b: number): boolean {
|
||||
return Math.abs(a - b) > MILLIS_PER_MINUTE;
|
||||
}
|
||||
|
||||
/**
|
||||
* A subscription target normalised to the event-shaped object the countdown display consumes.
|
||||
* For events this is a pass-through; for groups it carries the group identity and display data
|
||||
* while deriving timing from the group's first playable child (see resolveSubscriptionTarget).
|
||||
*/
|
||||
export type CountdownTarget = ExtendedEntry<OntimeEvent> & {
|
||||
isGroup?: boolean;
|
||||
targetId?: EntryId; // child entry used for countdown/live/armed state checks
|
||||
reportId?: EntryId; // entry used for the report lookup (e.g. last child of a group)
|
||||
liveEntry?: ExtendedEntry<OntimeEvent> | null; // the running child while a group is live
|
||||
};
|
||||
|
||||
export type CountdownEvent = CountdownTarget & { expectedStart: number; endedAt: MaybeNumber };
|
||||
|
||||
/**
|
||||
* Resolves a subscription (event or group) into an event-shaped countdown target.
|
||||
* - Events are returned unchanged.
|
||||
* - Groups count down to their first playable child while displaying the group identity.
|
||||
* Status is group-aware: live while any child is loaded, past only once the whole group has finished.
|
||||
* Returns null when a group has no playable children (nothing to count down to).
|
||||
*/
|
||||
export function resolveSubscriptionTarget(
|
||||
entry: ExtendedEntry<OntimeEvent | OntimeGroup>,
|
||||
flatRundown: ExtendedEntry<OntimeEntry>[],
|
||||
): CountdownTarget | null {
|
||||
if (!isOntimeGroup(entry)) {
|
||||
return entry;
|
||||
}
|
||||
|
||||
const children = flatRundown.filter(
|
||||
(item): item is ExtendedEntry<PlayableEvent> =>
|
||||
isOntimeEvent(item) && isPlayableEvent(item) && item.parent === entry.id,
|
||||
);
|
||||
|
||||
if (children.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const firstChild = children[0];
|
||||
const lastChild = children[children.length - 1];
|
||||
const liveEntry = children.find((child) => child.isLoaded) ?? null;
|
||||
const isLoaded = liveEntry !== null;
|
||||
const isPast = !isLoaded && lastChild.isPast;
|
||||
|
||||
return {
|
||||
// timing derives from the first playable child
|
||||
...firstChild,
|
||||
// group identity and display data
|
||||
id: entry.id,
|
||||
parent: null,
|
||||
title: entry.title,
|
||||
colour: entry.colour,
|
||||
note: entry.note,
|
||||
custom: entry.custom,
|
||||
duration: entry.duration,
|
||||
countToEnd: false,
|
||||
// group-aware status
|
||||
isLoaded,
|
||||
isPast,
|
||||
// group markers
|
||||
isGroup: true,
|
||||
targetId: firstChild.id,
|
||||
reportId: lastChild.id,
|
||||
liveEntry,
|
||||
};
|
||||
}
|
||||
export type CountdownEvent = ExtendedEntry<OntimeEvent> & { expectedStart: number; endedAt: MaybeNumber };
|
||||
|
||||
export function extendEventData(
|
||||
event: CountdownTarget,
|
||||
event: ExtendedEntry<OntimeEvent>,
|
||||
currentDay: number,
|
||||
actualStart: MaybeNumber,
|
||||
plannedStart: MaybeNumber,
|
||||
@@ -271,6 +189,6 @@ export function extendEventData(
|
||||
offset,
|
||||
mode,
|
||||
});
|
||||
const { endedAt } = reportData[event.reportId ?? event.id] ?? { endedAt: null };
|
||||
const { endedAt } = reportData[event.id] ?? { endedAt: null };
|
||||
return { ...event, expectedStart, endedAt };
|
||||
}
|
||||
|
||||
@@ -20,7 +20,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
|
||||
alias: 'cuesheet-read-only',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
options: {
|
||||
read: 'full',
|
||||
write: '-',
|
||||
@@ -42,7 +41,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
|
||||
alias: 'cuesheet-flag',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
options: {
|
||||
read: 'full',
|
||||
write: 'flag',
|
||||
@@ -64,7 +62,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
|
||||
alias: 'cuesheet-default',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
};
|
||||
|
||||
const policy = getCuesheetColumnAccessPolicy(preset, AppMode.Edit);
|
||||
@@ -79,7 +76,6 @@ describe('getCuesheetPermissionsPolicy()', () => {
|
||||
alias: 'cuesheet-granular',
|
||||
target: OntimeView.Cuesheet,
|
||||
search: '',
|
||||
displayInNav: false,
|
||||
options: {
|
||||
read: 'cue,title',
|
||||
write: 'title',
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { parseField } from '../cuesheet.utils';
|
||||
|
||||
describe('parseField()', () => {
|
||||
it('returns a string from given millis on timeStart, TimeEnd and duration', () => {
|
||||
const testData1 = 1000;
|
||||
const testData2 = 60000;
|
||||
const testData3 = 600000;
|
||||
expect(parseField('timeStart', testData1)).toBe('00:00:01');
|
||||
expect(parseField('timeEnd', testData2)).toBe('00:01:00');
|
||||
expect(parseField('duration', testData3)).toBe('00:10:00');
|
||||
});
|
||||
|
||||
it('returns an empty string on undefined fields', () => {
|
||||
// @ts-expect-error -- testing user data with missing fields
|
||||
expect(parseField('title')).toBe('');
|
||||
});
|
||||
|
||||
describe('simply returns any other value in any other field', () => {
|
||||
const testFields = [
|
||||
{ field: 'nothing', value: '123' },
|
||||
{ field: 'title', value: 'test' },
|
||||
{ field: 'note', value: 'test' },
|
||||
{ field: 'colour', value: 'test' },
|
||||
];
|
||||
|
||||
testFields.forEach((testCase) => {
|
||||
test(`${testCase.field}:${testCase.value}`, () => {
|
||||
expect(parseField(testCase.field, testCase.value)).toBe(testCase.value);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { CustomFields, MaybeNumber, OntimeEntryCommonKeys } from 'ontime-types';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
|
||||
type CsvHeaderKey = OntimeEntryCommonKeys | keyof CustomFields;
|
||||
|
||||
/**
|
||||
* @description parses a field for export
|
||||
* @param {string} field
|
||||
* @param {*} data
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
export const parseField = (field: CsvHeaderKey, data: unknown): string => {
|
||||
if (field === 'timeStart' || field === 'timeEnd' || field === 'duration') {
|
||||
return millisToString(data as MaybeNumber, { fallback: '' });
|
||||
}
|
||||
|
||||
if (field === 'skip') {
|
||||
return data ? 'x' : '';
|
||||
}
|
||||
|
||||
return String(data ?? '');
|
||||
};
|
||||
@@ -54,51 +54,17 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
font-size: calc(1rem - 2px);
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.filterHint {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.em {
|
||||
color: $ui-white;
|
||||
margin-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.hints {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
color: $label-gray;
|
||||
font-size: calc(1rem - 3px);
|
||||
}
|
||||
|
||||
.hintItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filterHint {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { SupportedEntry } from 'ontime-types';
|
||||
import { KeyboardEvent, useState } from 'react';
|
||||
|
||||
import Input from '../../../common/components/input/input/Input';
|
||||
import Kbd from '../../../common/components/kbd/Kbd';
|
||||
import Modal from '../../../common/components/modal/Modal';
|
||||
import useFinder from './useFinder';
|
||||
|
||||
@@ -97,25 +96,8 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
}
|
||||
footerElements={
|
||||
<div className={style.footer}>
|
||||
<div className={style.hints}>
|
||||
<span className={style.hintItem}>
|
||||
<Kbd>↑</Kbd>
|
||||
<Kbd>↓</Kbd>
|
||||
Navigate
|
||||
</span>
|
||||
<span className={style.hintItem}>
|
||||
<Kbd>Enter</Kbd>
|
||||
Go
|
||||
</span>
|
||||
<span className={style.hintItem}>
|
||||
<Kbd>Esc</Kbd>
|
||||
Close
|
||||
</span>
|
||||
</div>
|
||||
<div className={style.filterHint}>
|
||||
Filter by <span className={style.em}>cue</span>, <span className={style.em}>index</span>, or
|
||||
<span className={style.em}>title</span>
|
||||
</div>
|
||||
Use the keywords <span className={style.em}>cue</span>, <span className={style.em}>index</span> or
|
||||
<span className={style.em}>title</span> to filter search.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
@use '@/theme/viewerDefs' as *;
|
||||
|
||||
$timeline-height: 1rem;
|
||||
$group-band-height: 0.5rem;
|
||||
$group-band-gap: 0.25rem;
|
||||
$timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-override, $viewer-background-color));
|
||||
|
||||
.timelineContainer {
|
||||
@@ -19,21 +17,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
height: 100%;
|
||||
// reserve the top region (progress bar + gap + group band) with the card background
|
||||
box-shadow: inset 0 calc(#{$timeline-height} + #{$group-band-gap} + #{$group-band-height}) 0 0
|
||||
var(--card-background-color-override, $viewer-card-bg-color);
|
||||
}
|
||||
|
||||
.groupBand {
|
||||
height: $group-band-height;
|
||||
margin-top: $group-band-gap;
|
||||
width: 100%;
|
||||
background: var(--group-colour, transparent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: visible;
|
||||
box-shadow: inset 0 1rem 0 0 var(--card-background-color-override, $viewer-card-bg-color);
|
||||
}
|
||||
|
||||
.column {
|
||||
@@ -108,6 +92,7 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
|
||||
border-top: 2px solid var(--background-color-override, $viewer-background-color);
|
||||
box-shadow: 0 0.25rem 0 0 var(--color, $gray-300);
|
||||
|
||||
text-transform: capitalize;
|
||||
white-space: normal;
|
||||
|
||||
&[data-status='done'] {
|
||||
@@ -134,7 +119,6 @@ $timeline-color: color-mix(in srgb, transparent 60%, var(--background-color-over
|
||||
|
||||
.status {
|
||||
width: fit-content;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status.due {
|
||||
|
||||
@@ -55,6 +55,10 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
|
||||
return calculateTimelineLayout(playableEvents, scheduleStart, scheduleEnd, screenWidth, !fixedSize);
|
||||
}, [rundown, scheduleStart, scheduleEnd, screenWidth, fixedSize]);
|
||||
|
||||
if (totalDuration === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Pre-calculate event statuses
|
||||
let currentStatus: ProgressStatus = selectedEventId ? 'done' : 'future';
|
||||
const statusMap: Record<string, ProgressStatus> = {};
|
||||
@@ -101,7 +105,6 @@ function Timeline({ firstStart, rundown, selectedEventId, totalDuration }: Timel
|
||||
title={displayTitle}
|
||||
cue={event.cue}
|
||||
width={position.width}
|
||||
groupColour={event.groupColour}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Day } from 'ontime-types';
|
||||
import { CSSProperties, RefObject } from 'react';
|
||||
|
||||
import { useAnimatedProgress } from '../../common/hooks/useAnimatedProgress';
|
||||
import { useExpectedStartData, useTimer } from '../../common/hooks/useSocket';
|
||||
import { getProgress } from '../../common/utils/getProgress';
|
||||
import { alpha, cx } from '../../common/utils/styleUtils';
|
||||
import { formatDuration, formatTime, getExpectedTimesFromExtendedEvent } from '../../common/utils/time';
|
||||
import { useTranslation } from '../../translation/TranslationProvider';
|
||||
@@ -26,7 +26,6 @@ interface TimelineEntryProps {
|
||||
title: string;
|
||||
width: number;
|
||||
cue: string;
|
||||
groupColour?: string;
|
||||
ref?: RefObject<HTMLDivElement | null>;
|
||||
}
|
||||
|
||||
@@ -49,7 +48,6 @@ export function TimelineEntry({
|
||||
title,
|
||||
width,
|
||||
cue,
|
||||
groupColour,
|
||||
ref,
|
||||
}: TimelineEntryProps) {
|
||||
const formattedStartTime = formatTime(start, formatOptions);
|
||||
@@ -69,7 +67,6 @@ export function TimelineEntry({
|
||||
{
|
||||
'--color': colour,
|
||||
'--lighter': lighterColour ?? '',
|
||||
'--group-colour': groupColour ?? 'transparent',
|
||||
left: `${left}px`,
|
||||
width: `${width}px`,
|
||||
} as CSSProperties
|
||||
@@ -77,7 +74,6 @@ export function TimelineEntry({
|
||||
data-testid={cue}
|
||||
>
|
||||
{status === 'live' ? <ActiveBlock /> : <div data-status={status} className={style.timelineBlock} />}
|
||||
<div className={style.groupBand} />
|
||||
<div
|
||||
className={cx([style.content, width < 20 && style.hide, !hasLink && style.separeLeft])}
|
||||
data-status={status}
|
||||
@@ -157,8 +153,6 @@ function TimelineEntryStatus({
|
||||
statusText = getLocalizedString('timeline.live');
|
||||
} else if (statusText === 'pending') {
|
||||
statusText = getLocalizedString('timeline.due');
|
||||
} else if (statusText === 'done') {
|
||||
statusText = getLocalizedString('timeline.done');
|
||||
}
|
||||
|
||||
const isDue = status === 'future' && timeToStart <= 0;
|
||||
@@ -169,7 +163,7 @@ function TimelineEntryStatus({
|
||||
/** Generates a block level progress bar */
|
||||
function ActiveBlock() {
|
||||
const { current, duration } = useTimer();
|
||||
const progress = useAnimatedProgress(current, duration);
|
||||
const progress = getProgress(current, duration);
|
||||
return (
|
||||
<div data-status='live' className={style.timelineBlock} style={{ '--progress': `${progress}%` } as CSSProperties} />
|
||||
);
|
||||
|
||||
@@ -38,8 +38,6 @@ export default function TimelinePageLoader() {
|
||||
function TimelinePage({ events, customFields, projectData, settings }: TimelineData) {
|
||||
const selectedEventId = useSelectedEventId();
|
||||
const { mainSource, timeformat } = useTimelineOptions();
|
||||
const { getLocalizedString } = useTranslation();
|
||||
|
||||
// holds copy of the rundown with only relevant events
|
||||
const { scopedRundown, firstStart, totalDuration } = useScopedRundown(events, selectedEventId);
|
||||
|
||||
@@ -52,8 +50,6 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
|
||||
const defaultFormat = getDefaultFormat(settings?.timeFormat);
|
||||
const progressOptions = useMemo(() => getTimelineOptions(defaultFormat, customFields), [defaultFormat, customFields]);
|
||||
|
||||
const hasContent = totalDuration > 0;
|
||||
|
||||
return (
|
||||
<div className='timeline' data-testid='timeline-view'>
|
||||
<ViewParamsEditor target={OntimeView.Timeline} viewOptions={progressOptions} />
|
||||
@@ -65,16 +61,12 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
|
||||
|
||||
<TimelineSections now={now} next={next} followedBy={followedBy} mainSource={mainSource} />
|
||||
|
||||
{hasContent ? (
|
||||
<Timeline
|
||||
firstStart={firstStart}
|
||||
rundown={scopedRundown}
|
||||
selectedEventId={selectedEventId}
|
||||
totalDuration={totalDuration}
|
||||
/>
|
||||
) : (
|
||||
<EmptyPage text={getLocalizedString('common.no_data')} />
|
||||
)}
|
||||
<Timeline
|
||||
firstStart={firstStart}
|
||||
rundown={scopedRundown}
|
||||
selectedEventId={selectedEventId}
|
||||
totalDuration={totalDuration}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function TimelineSections({ now, next, followedBy, mainSource }:
|
||||
const state = useExpectedStartData();
|
||||
|
||||
// gather card data
|
||||
const titleNow = now ? (getPropertyValue(now, mainSource ?? 'title') ?? '-') : getLocalizedString('timeline.standby');
|
||||
const titleNow = getPropertyValue(now, mainSource ?? 'title') ?? '-';
|
||||
const dueText = getLocalizedString('timeline.due').toUpperCase();
|
||||
const nextText = getPropertyValue(next, mainSource ?? 'title') ?? '-';
|
||||
const followedByText = getPropertyValue(followedBy, mainSource ?? 'title') ?? '-';
|
||||
|
||||
@@ -96,77 +96,63 @@ export function useScopedRundown(
|
||||
): ScopedRundownData {
|
||||
const { hidePast } = useTimelineOptions();
|
||||
|
||||
const data = useMemo(
|
||||
() => computeScopedRundown(rundown, selectedEventId, hidePast),
|
||||
[hidePast, rundown, selectedEventId],
|
||||
);
|
||||
const data = useMemo(() => {
|
||||
if (rundown.length === 0) {
|
||||
return { scopedRundown: [], firstStart: 0, totalDuration: 0 };
|
||||
}
|
||||
|
||||
const scopedRundown: ExtendedEntry<PlayableEvent>[] = [];
|
||||
let selectedIndex = selectedEventId ? Infinity : -1;
|
||||
let firstStart = null;
|
||||
let totalDuration = 0;
|
||||
let lastEntry: ExtendedEntry<PlayableEvent> | null = null;
|
||||
|
||||
for (let i = 0; i < rundown.length; i++) {
|
||||
const currentEntry = rundown[i];
|
||||
// we only deal with playableEvents
|
||||
if (isOntimeEvent(currentEntry) && isPlayableEvent(currentEntry)) {
|
||||
if (currentEntry.id === selectedEventId) {
|
||||
selectedIndex = i;
|
||||
}
|
||||
|
||||
// maybe filter past
|
||||
if (hidePast && i < selectedIndex) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// add to scopedRundown
|
||||
scopedRundown.push(currentEntry);
|
||||
|
||||
/**
|
||||
* Derive timers
|
||||
* This logic is partially from rundownCache.generate
|
||||
* With the addition of deriving the current day offset
|
||||
*/
|
||||
if (firstStart === null) {
|
||||
firstStart = currentEntry.timeStart;
|
||||
}
|
||||
|
||||
const timeFromPrevious: number = getTimeFrom(currentEntry, lastEntry);
|
||||
|
||||
if (timeFromPrevious === 0) {
|
||||
totalDuration += currentEntry.duration;
|
||||
} else if (timeFromPrevious > 0) {
|
||||
totalDuration += timeFromPrevious + currentEntry.duration;
|
||||
} else if (timeFromPrevious < 0) {
|
||||
totalDuration += Math.max(currentEntry.duration + timeFromPrevious, 0);
|
||||
}
|
||||
if (isNewLatest(currentEntry, lastEntry)) {
|
||||
lastEntry = currentEntry;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { scopedRundown, firstStart: firstStart ?? 0, totalDuration };
|
||||
}, [hidePast, rundown, selectedEventId]);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pure computation behind useScopedRundown: filters to playable events and derives timers
|
||||
*/
|
||||
export function computeScopedRundown(
|
||||
rundown: ExtendedEntry<OntimeEntry>[],
|
||||
selectedEventId: MaybeString,
|
||||
hidePast: boolean,
|
||||
): ScopedRundownData {
|
||||
if (rundown.length === 0) {
|
||||
return { scopedRundown: [], firstStart: 0, totalDuration: 0 };
|
||||
}
|
||||
|
||||
const scopedRundown: ExtendedEntry<PlayableEvent>[] = [];
|
||||
let selectedIndex = selectedEventId ? Infinity : -1;
|
||||
let firstStart: number | null = null;
|
||||
let totalDuration = 0;
|
||||
let lastEntry: ExtendedEntry<PlayableEvent> | null = null;
|
||||
|
||||
for (let i = 0; i < rundown.length; i++) {
|
||||
// we only deal with playableEvents
|
||||
const currentEntry = rundown[i];
|
||||
if (!isOntimeEvent(currentEntry) || !isPlayableEvent(currentEntry)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (currentEntry.id === selectedEventId) {
|
||||
selectedIndex = i;
|
||||
}
|
||||
|
||||
// maybe filter past
|
||||
if (hidePast && i < selectedIndex) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// add to scopedRundown
|
||||
scopedRundown.push(currentEntry);
|
||||
|
||||
/**
|
||||
* Derive timers
|
||||
* This logic is partially from rundownCache.generate
|
||||
* With the addition of deriving the current day offset
|
||||
*/
|
||||
if (firstStart === null) {
|
||||
firstStart = currentEntry.timeStart;
|
||||
}
|
||||
|
||||
const timeFromPrevious: number = getTimeFrom(currentEntry, lastEntry);
|
||||
|
||||
if (timeFromPrevious === 0) {
|
||||
totalDuration += currentEntry.duration;
|
||||
} else if (timeFromPrevious > 0) {
|
||||
totalDuration += timeFromPrevious + currentEntry.duration;
|
||||
} else if (timeFromPrevious < 0) {
|
||||
totalDuration += Math.max(currentEntry.duration + timeFromPrevious, 0);
|
||||
}
|
||||
if (isNewLatest(currentEntry, lastEntry)) {
|
||||
lastEntry = currentEntry;
|
||||
}
|
||||
}
|
||||
|
||||
return { scopedRundown, firstStart: firstStart ?? 0, totalDuration };
|
||||
}
|
||||
|
||||
type UpcomingEvents = {
|
||||
now: ExtendedEntry<OntimeEvent> | null;
|
||||
next: ExtendedEntry<OntimeEvent> | null;
|
||||
|
||||
@@ -71,11 +71,6 @@ export default defineConfig({
|
||||
changeOrigin: true,
|
||||
configure: logProxyRequests,
|
||||
},
|
||||
'^/mcp': {
|
||||
target: 'http://localhost:4001/',
|
||||
changeOrigin: true,
|
||||
configure: logProxyRequests,
|
||||
},
|
||||
'^/ws*': {
|
||||
target: 'http://localhost:4001/',
|
||||
changeOrigin: true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime-electron",
|
||||
"version": "4.10.0",
|
||||
"version": "4.9.0",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/resolver",
|
||||
"version": "4.10.0",
|
||||
"version": "4.9.0",
|
||||
"type": "module",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
"types": "./dist/main.d.ts",
|
||||
@@ -20,7 +20,7 @@
|
||||
"license": "AGPL-3.0-only",
|
||||
"devDependencies": {
|
||||
"ontime-types": "workspace:^4.2.1",
|
||||
"tsdown": "^0.22.4",
|
||||
"tsdown": "^0.21.5",
|
||||
"typescript": "catalog:"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"isolatedDeclarations": true,
|
||||
"allowJs": false
|
||||
"ignoreDeprecations": "6.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "ontime-server",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"version": "4.10.0",
|
||||
"version": "4.9.0",
|
||||
"exports": "./src/index.js",
|
||||
"dependencies": {
|
||||
"@googleapis/sheets": "^5.0.5",
|
||||
|
||||
@@ -110,13 +110,14 @@ type old_URLPreset = {
|
||||
/**
|
||||
* migrates a url presets from v3 to v4
|
||||
* - pathAndParams split into a target and search
|
||||
*
|
||||
*/
|
||||
export function migrateURLPresets(jsonData: object): URLPreset[] | undefined {
|
||||
if (is.objectWithKeys(jsonData, ['urlPresets']) && is.array(jsonData.urlPresets)) {
|
||||
const oldURLPresets = structuredClone(jsonData.urlPresets) as old_URLPreset;
|
||||
const newURLPreset: URLPreset[] = oldURLPresets.map(({ enabled, alias, pathAndParams }) => {
|
||||
const [target, search] = pathAndParams.split('?');
|
||||
return { enabled, alias, target, search, displayInNav: false, options: {} } as URLPreset;
|
||||
return { enabled, alias, target, search, options: {} } as URLPreset;
|
||||
});
|
||||
return newURLPreset;
|
||||
}
|
||||
|
||||
@@ -208,7 +208,6 @@ describe('v3 to v4', () => {
|
||||
target: OntimeView.Timer,
|
||||
search:
|
||||
'showLeadingZeros=true&timerType=clock&hideClock=true&hideCards=true&hideProgress=true&hideMessage=true&hideSecondary=true&hideLogo=true',
|
||||
displayInNav: false,
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
@@ -217,7 +216,6 @@ describe('v3 to v4', () => {
|
||||
target: OntimeView.Timer,
|
||||
search:
|
||||
'showLeadingZeros=true&hideClock=true&hideCards=true&hideProgress=true&hideMessage=true&hideSecondary=true&hideLogo=true',
|
||||
displayInNav: false,
|
||||
options: {},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -704,14 +704,11 @@ export async function renameRundown(id: string, title: string) {
|
||||
await dataProvider.setRundown(id, { ...rundown, title });
|
||||
|
||||
/**
|
||||
* If we are modifying the loaded rundown we re-init it
|
||||
* If loaded we re-init the rundown
|
||||
* This is likely over-kill but the simplest way to ensure state consistency
|
||||
*/
|
||||
if (isCurrentRundown(id)) {
|
||||
const rundown = dataProvider.getRundown(id);
|
||||
const customField = dataProvider.getCustomFields();
|
||||
// init rundown does its own refetch
|
||||
await initRundown(rundown, customField);
|
||||
await initRundown(dataProvider.getRundown(id), dataProvider.getCustomFields());
|
||||
} else {
|
||||
setImmediate(() => {
|
||||
sendRefetch(RefetchKey.ProjectRundowns);
|
||||
|
||||
@@ -12,9 +12,7 @@ describe('parseUrlPresets()', () => {
|
||||
|
||||
it('parses data, skipping invalid results', () => {
|
||||
const errorEmitter = vi.fn();
|
||||
const urlPresets = [
|
||||
{ enabled: true, alias: 'alias', target: 'timer', search: 'ss', displayInNav: false },
|
||||
] as URLPreset[];
|
||||
const urlPresets = [{ enabled: true, alias: 'alias', target: 'timer', search: 'ss' }] as URLPreset[];
|
||||
const result = parseUrlPresets({ urlPresets }, errorEmitter);
|
||||
expect(result.length).toEqual(1);
|
||||
expect(result.at(0)).toMatchObject({
|
||||
@@ -38,7 +36,6 @@ describe('parseUrlPresets()', () => {
|
||||
alias: 'testalias',
|
||||
target: 'timer',
|
||||
search: 'testpathAndParams',
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
} as unknown as DatabaseModel;
|
||||
|
||||
@@ -26,7 +26,6 @@ export function parseUrlPresets(data: Partial<DatabaseModel>, emitError?: ErrorE
|
||||
alias: preset.alias,
|
||||
target: preset.target,
|
||||
search: preset.search ?? '',
|
||||
displayInNav: preset.displayInNav ?? false,
|
||||
options: preset?.options,
|
||||
};
|
||||
newPresets.push(newPreset);
|
||||
|
||||
@@ -21,7 +21,6 @@ router.post('/', validateNewPreset, async (req: Request, res: Response<URLPreset
|
||||
alias: req.body.alias,
|
||||
target: req.body.target,
|
||||
search: req.body.search,
|
||||
displayInNav: req.body.displayInNav,
|
||||
options: req.body.options,
|
||||
};
|
||||
|
||||
@@ -56,7 +55,6 @@ router.put('/:alias', validateUpdatePreset, async (req: Request, res: Response<U
|
||||
alias: req.body.alias,
|
||||
target: req.body.target,
|
||||
search: req.body.search,
|
||||
displayInNav: req.body.displayInNav,
|
||||
options: req.body.options ?? existingPreset.options,
|
||||
};
|
||||
|
||||
|
||||
@@ -12,7 +12,6 @@ export const validateNewPreset = [
|
||||
body('alias').isString().trim().notEmpty(),
|
||||
body('target').isString().trim().notEmpty().isIn(Object.values(OntimeView)),
|
||||
body('search').isString().trim(),
|
||||
body('displayInNav').isBoolean(),
|
||||
|
||||
// options are currently only provided for cuesheet presets
|
||||
body('options').optional().isObject(),
|
||||
@@ -28,7 +27,6 @@ export const validateUpdatePreset = [
|
||||
body('alias').isString().trim().notEmpty(),
|
||||
body('target').isString().trim().notEmpty().isIn(Object.values(OntimeView)),
|
||||
body('search').isString().trim(),
|
||||
body('displayInNav').isBoolean(),
|
||||
|
||||
// options are currently only provided for cuesheet presets
|
||||
body('options').optional().isObject(),
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
# Ontime MCP Server
|
||||
|
||||
Ontime exposes an MCP server over Streamable HTTP.
|
||||
|
||||
## Endpoint
|
||||
|
||||
Default local URL:
|
||||
|
||||
```text
|
||||
http://localhost:4001/mcp
|
||||
```
|
||||
|
||||
If Ontime is running on another host or port, replace `localhost:4001` with that address.
|
||||
If `ROUTER_PREFIX` is configured, include it before `/mcp`, for example:
|
||||
|
||||
```text
|
||||
http://localhost:4001/stage/mcp
|
||||
```
|
||||
|
||||
The MCP route is stateless. Clients should send MCP requests with `POST`; `GET` and
|
||||
`DELETE` are not used.
|
||||
|
||||
## Authentication
|
||||
|
||||
If Ontime has no session password configured, no MCP authentication is required.
|
||||
|
||||
If a session password is configured, authenticate with the hashed Ontime token.
|
||||
The settings UI generates an endpoint URL with the token in the query string:
|
||||
|
||||
```text
|
||||
http://localhost:4001/mcp?token=<hashed-token>
|
||||
```
|
||||
|
||||
If your MCP client supports request headers, you can send the same token as a
|
||||
bearer token instead:
|
||||
|
||||
```http
|
||||
Authorization: Bearer <hashed-token>
|
||||
```
|
||||
|
||||
This is the same token used in authenticated Ontime share URLs as the `token` query
|
||||
parameter. The raw session password is not accepted as the bearer token.
|
||||
|
||||
## Client Configuration
|
||||
|
||||
Use a Streamable HTTP MCP client and point it at the MCP endpoint:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"ontime": {
|
||||
"url": "http://localhost:4001/mcp?token=<hashed-token>"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Omit the token when Ontime is not password protected. If you prefer headers, use
|
||||
`"url": "http://localhost:4001/mcp"` and add an `Authorization` header with the
|
||||
same bearer token.
|
||||
|
||||
## Quick Check
|
||||
|
||||
The server should respond to MCP initialization requests at `/mcp`. A plain browser
|
||||
`GET` request will return `405 Method not allowed`, which is expected.
|
||||
@@ -6,13 +6,11 @@ const editEntryMock = vi.hoisted(() => vi.fn());
|
||||
const groupEntriesMock = vi.hoisted(() => vi.fn());
|
||||
const ungroupEntriesMock = vi.hoisted(() => vi.fn());
|
||||
const getCurrentRundownMock = vi.hoisted(() => vi.fn());
|
||||
const getProjectCustomFieldsMock = vi.hoisted(() => vi.fn());
|
||||
const createCustomFieldMock = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock('../../api-data/rundown/rundown.dao.js', () => ({
|
||||
getCurrentRundown: getCurrentRundownMock,
|
||||
getCurrentRundownId: vi.fn(() => 'loaded-rundown'),
|
||||
getProjectCustomFields: getProjectCustomFieldsMock,
|
||||
getProjectCustomFields: vi.fn(() => ({})),
|
||||
}));
|
||||
|
||||
vi.mock('../../classes/data-provider/DataProvider.js', () => ({
|
||||
@@ -22,7 +20,6 @@ vi.mock('../../classes/data-provider/DataProvider.js', () => ({
|
||||
vi.mock('../../api-data/rundown/rundown.service.js', () => ({
|
||||
addEntry: addEntryMock,
|
||||
batchEditEntries: vi.fn(),
|
||||
createCustomField: createCustomFieldMock,
|
||||
deleteEntries: vi.fn(),
|
||||
editEntry: editEntryMock,
|
||||
groupEntries: groupEntriesMock,
|
||||
@@ -30,8 +27,7 @@ vi.mock('../../api-data/rundown/rundown.service.js', () => ({
|
||||
ungroupEntries: ungroupEntriesMock,
|
||||
}));
|
||||
|
||||
const { batchCreateEntriesForMcp, createCustomFieldForMcp, createEntryForMcp, groupEntriesForMcp, ungroupEntryForMcp } =
|
||||
await import('../mcp.service.js');
|
||||
const { batchCreateEntriesForMcp, groupEntriesForMcp, ungroupEntryForMcp } = await import('../mcp.service.js');
|
||||
|
||||
function makeRundown(entries: Rundown['entries'], order: string[] = Object.keys(entries)): Rundown {
|
||||
return {
|
||||
@@ -48,7 +44,6 @@ describe('mcp.service', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
getCurrentRundownMock.mockReturnValue(makeRundown({}));
|
||||
getProjectCustomFieldsMock.mockReturnValue({});
|
||||
|
||||
let id = 0;
|
||||
addEntryMock.mockImplementation(async (_rundownId: string, payload: EventPostPayload) => {
|
||||
@@ -257,42 +252,4 @@ describe('mcp.service', () => {
|
||||
expect(ungroupEntriesMock).toHaveBeenCalledWith('loaded-rundown', 'group');
|
||||
expect(result).toMatchObject({ ungrouped: 'group', order: ['entry-1'] });
|
||||
});
|
||||
|
||||
describe('createCustomFieldForMcp', () => {
|
||||
it('creates a field and returns the derived key', async () => {
|
||||
createCustomFieldMock.mockResolvedValue({
|
||||
Camera_Angle: { label: 'Camera Angle', type: 'text', colour: '#3E75E8' },
|
||||
});
|
||||
|
||||
const result = await createCustomFieldForMcp({ label: 'Camera Angle', type: 'text', colour: '#3E75E8' });
|
||||
|
||||
expect(createCustomFieldMock).toHaveBeenCalledWith({ label: 'Camera Angle', type: 'text', colour: '#3E75E8' });
|
||||
expect(result.key).toBe('Camera_Angle');
|
||||
});
|
||||
|
||||
it('rejects labels the editor UI would not accept', async () => {
|
||||
await expect(createCustomFieldForMcp({ label: 'Camera/GFX', type: 'text', colour: '#000000' })).rejects.toThrow(
|
||||
'Invalid label',
|
||||
);
|
||||
expect(createCustomFieldMock).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('rejects case-insensitive duplicates and points at the existing key', async () => {
|
||||
getProjectCustomFieldsMock.mockReturnValue({ Camera: { label: 'Camera', type: 'text', colour: '' } });
|
||||
|
||||
await expect(createCustomFieldForMcp({ label: 'camera', type: 'text', colour: '#000000' })).rejects.toThrow(
|
||||
'A custom field with key "Camera" (label "Camera") already exists.',
|
||||
);
|
||||
expect(createCustomFieldMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('suggests the correctly cased key when custom values use the wrong casing', async () => {
|
||||
getProjectCustomFieldsMock.mockReturnValue({ Camera: { label: 'Camera', type: 'text', colour: '' } });
|
||||
|
||||
await expect(createEntryForMcp({ title: 'Talk', custom: { camera: 'CAM 2' } })).rejects.toThrow(
|
||||
'Keys are case-sensitive — did you mean: "camera" → "Camera"?',
|
||||
);
|
||||
expect(addEntryMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
vi.mock('../../api-data/project-data/projectData.dao.js', () => ({
|
||||
getProjectData: vi.fn(() => ({ title: 'Test project' })),
|
||||
}));
|
||||
|
||||
vi.mock('../../api-data/rundown/rundown.dao.js', () => ({
|
||||
getCurrentRundown: vi.fn(() => ({
|
||||
id: 'rundown-1',
|
||||
title: 'Test',
|
||||
order: [],
|
||||
flatOrder: [],
|
||||
entries: {},
|
||||
revision: 0,
|
||||
})),
|
||||
getProjectCustomFields: vi.fn(() => ({})),
|
||||
}));
|
||||
|
||||
vi.mock('../../classes/data-provider/DataProvider.js', () => ({
|
||||
getDataProvider: vi.fn(() => ({ getProjectRundowns: () => ({}) })),
|
||||
}));
|
||||
|
||||
const { PROMPT_DEFINITIONS, handleGetPrompt } = await import('../mcp.prompts.js');
|
||||
const { RESOURCE_DEFINITIONS, handleReadResource } = await import('../mcp.resources.js');
|
||||
|
||||
describe('MCP resource wiring', () => {
|
||||
it('serves non-empty content for every listed resource', () => {
|
||||
for (const resource of RESOURCE_DEFINITIONS) {
|
||||
const result = handleReadResource(resource.uri);
|
||||
expect(result.contents).toHaveLength(1);
|
||||
expect(result.contents[0].uri).toBe(resource.uri);
|
||||
expect(result.contents[0].mimeType).toBe(resource.mimeType);
|
||||
expect((result.contents[0].text as string).length).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
it('rejects unknown resource URIs', () => {
|
||||
expect(() => handleReadResource('ontime://nope')).toThrow('Unknown resource URI: ontime://nope');
|
||||
});
|
||||
});
|
||||
|
||||
describe('MCP prompt wiring', () => {
|
||||
it('resolves every listed prompt', () => {
|
||||
for (const prompt of PROMPT_DEFINITIONS) {
|
||||
const args = Object.fromEntries((prompt.arguments ?? []).map((arg) => [arg.name, 'test value']));
|
||||
const result = handleGetPrompt(prompt.name, args);
|
||||
expect(result.messages.length).toBeGreaterThan(0);
|
||||
const content = result.messages[0].content;
|
||||
expect(content.type).toBe('text');
|
||||
}
|
||||
});
|
||||
|
||||
it('rejects unknown prompts', () => {
|
||||
expect(() => handleGetPrompt('nope', {})).toThrow('Unknown prompt: nope');
|
||||
});
|
||||
});
|
||||
@@ -1,103 +0,0 @@
|
||||
/**
|
||||
* Agent-facing Ontime guidance documents.
|
||||
*
|
||||
* These markdown resources teach agents rundown craft (ontime://style-guide)
|
||||
* and Ontime's view ecosystem (ontime://views). Guidance should be concise and
|
||||
* clear — verbosity distracts agents and users alike. Keep each document short.
|
||||
*/
|
||||
|
||||
// The palette mirrors the editor colour picker swatches in
|
||||
// apps/client/src/common/components/input/colour-input/SwatchSelect.tsx — keep in sync.
|
||||
export const ONTIME_STYLE_GUIDE_MARKDOWN = `# Ontime rundown style guide
|
||||
|
||||
Conventions for tidy, scannable rundowns. Read before creating or restyling a rundown. Follow the user's own conventions when they have them; otherwise prefer these. When communicating with the user, be concise — short proposals beat long explanations.
|
||||
|
||||
## Structure
|
||||
|
||||
- Group events into blocks matching the show's segments; 10+ ungrouped events is a wall — propose groups.
|
||||
- Set \`targetDuration\` on groups so operators can track time to block completion.
|
||||
- Use \`milestone\` for non-timed markers (doors open, broadcast start), not zero-duration events.
|
||||
- Use \`delay\` only to model schedule drift, never as padding.
|
||||
- Schedule changeovers and buffers as real events (grey; orange when technical), not invisible gaps — 5–10 min between major segments stops one overrun cascading through the day.
|
||||
- Model contingency segments as \`skip: true\` events: visible in the rundown, excluded from playback, one edit to activate.
|
||||
- Before show day, duplicate the rundown for rehearsal so the show copy stays clean.
|
||||
|
||||
## Colours
|
||||
|
||||
Prefer Ontime's default palette — the editor's swatches — so colours look native. Each hue has a dark/light tone pair:
|
||||
|
||||
| Hue | Dark | Light | Use |
|
||||
| --- | --- | --- | --- |
|
||||
| Red | \`#ED3333\` | \`#FF7878\` | attention: curfews, hard deadlines, broadcast-critical |
|
||||
| Orange | \`#FFAB33\` | \`#FFCC78\` | technical changeovers, resets |
|
||||
| Green | \`#339E4E\` | \`#77C785\` | normal show content |
|
||||
| Blue | \`#3E75E8\` | \`#779BE7\` | normal show content |
|
||||
| Violet | \`#8064E1\` | \`#A790F5\` | normal show content |
|
||||
| Grey | \`#9d9d9d\` | \`#ececec\` | breaks, housekeeping |
|
||||
|
||||
- Normal segments use the calm hues (green, blue, violet). Reserve red for what genuinely needs attention and orange for changeovers.
|
||||
- Use tones for hierarchy: dark tone on a group, the light tone of the same hue on its child events.
|
||||
- One convention per project, applied consistently.
|
||||
|
||||
## Cues and titles
|
||||
|
||||
- Cues follow ONE convention per rundown: numeric (\`1, 2, 3\` or \`10, 20, 30\`, leaving room for insertions), semantic (\`Preset\`, \`Key 1\`, \`Lunch\`), or a deliberate mix. Dense technical shows often prefix by department (\`LX1\`, \`SND2\`, \`VID3\`). Match what the rundown already uses; ask if nothing is established.
|
||||
- Cues are automation handles — external systems (Companion, OSC/HTTP) trigger events by cue name. Keep them unique and stable; warn before renaming cues on an existing show.
|
||||
- Title = what happens on stage, under ~50 characters. Department/tech data goes in custom fields; \`note\` is for free-text human context.
|
||||
|
||||
## Custom fields
|
||||
|
||||
- Structured per-department data (camera, graphics, audio, speaker) belongs in custom fields — one per department, coloured to match. This powers the cuesheet and operator views.
|
||||
- Reuse existing fields; never create near-duplicates (\`Cam\`, \`camera\`, \`Cameras\`).
|
||||
- Data repeated in titles or notes ("CAM 2") is a sign it belongs in a custom field.
|
||||
- Write values to be scannable mid-show: "CAM 2 close-up", not sentences.
|
||||
|
||||
## Timing
|
||||
|
||||
- \`linkStart\` events inside a block so schedule edits propagate.
|
||||
- \`flag\` sparingly — it marks critical moments and dilutes with overuse.
|
||||
- Set \`timeWarning\` where a moderator would signal the speaker to wrap (commonly 5 min); \`timeDanger\` for the final push (e.g. 1 min). Scale both down for short items.
|
||||
- Hard out? Backtime: build the closing items from the end with \`timeEnd\` + \`duration\` (Ontime calculates \`timeStart\`), protect their ends with \`timeStrategy: lock-end\`, and use \`countToEnd\` for true curfew items.
|
||||
|
||||
After tidying, read \`ontime://views\` and suggest views that use the new structure.
|
||||
`;
|
||||
|
||||
export const ONTIME_VIEWS_MARKDOWN = `# Ontime views and sharing guide
|
||||
|
||||
Ontime renders the rundown into role-specific views at \`http://<host>:<port>/<view>\`. Recommend the right view when the user mentions a role, device, or sharing need. Prefer sharing live view links over exporting static documents — everyone sees the current version, ending the conflicting-copies problem of circulated spreadsheets. The agent cannot create views or presets — give exact URLs and point to the editor settings.
|
||||
|
||||
| View | Path | For |
|
||||
| --- | --- | --- |
|
||||
| Timer | \`/timer\` | speakers/presenters on stage |
|
||||
| Backstage | \`/backstage\` | crew following schedule + notes |
|
||||
| Operator | \`/op\` | department operators on phone/tablet |
|
||||
| Cuesheet | \`/cuesheet\` | cross-department table editing |
|
||||
| Timeline | \`/timeline\` | producers, whole-show overview |
|
||||
| Countdown | \`/countdown\` | following selected events or a group |
|
||||
| Studio clock | \`/studio\` | on-air studio environments |
|
||||
| Project info | \`/info\` | sharing event logistics widely |
|
||||
|
||||
Most views are configured via URL parameters (editor and cuesheet in-app); the view's cog icon exposes the options and encodes them into the URL.
|
||||
|
||||
## Operator view parameters
|
||||
|
||||
- \`main\` / \`secondary-src\`: the two text lines — \`title\`, \`note\`, or \`custom-<fieldKey>\`.
|
||||
- \`subscribe=<fieldKey>\`: highlight a custom field (repeatable).
|
||||
- \`shouldEdit=true\`: long-press editing of the highlighted field.
|
||||
- \`hidePast=true\`, \`showStart=true\`: trim and annotate the list.
|
||||
|
||||
Example for a camera operator:
|
||||
\`/op?main=title&secondary-src=custom-Camera&subscribe=Camera&hidePast=true\`
|
||||
|
||||
Offer a link like this after creating a department custom field.
|
||||
|
||||
## URL presets
|
||||
|
||||
Presets bundle a configured view under a short alias (e.g. \`/camera-op\`), optionally shown in the nav menu. Managed in **Editor → Settings → URL presets**. When recommending a configured view, spell out the view and query string and suggest saving it as a preset.
|
||||
Docs: https://docs.getontime.no/features/url-presets/
|
||||
|
||||
## Custom views
|
||||
|
||||
For branding or layouts beyond the built-in options: files in Ontime's \`external\` folder are served at \`/external/…\` and can use Ontime's APIs for live data. Recommend for sponsor branding, unusual layouts, or LED wall graphics.
|
||||
Docs: https://docs.getontime.no/features/custom-views/
|
||||
`;
|
||||
@@ -33,29 +33,6 @@ export const PROMPT_DEFINITIONS: ListPromptsResult['prompts'] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'tidy_rundown',
|
||||
description:
|
||||
'Audit the rundown for readability (colours, grouping, cue naming, custom field usage) and propose improvements',
|
||||
arguments: [
|
||||
{
|
||||
name: 'focus',
|
||||
description: 'Optional area to focus on, e.g. "colours only" or "grouping"',
|
||||
required: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'manage_custom_fields',
|
||||
description: 'List, create, rename, recolour, or delete project-level custom field definitions',
|
||||
arguments: [
|
||||
{
|
||||
name: 'instruction',
|
||||
description: 'What to do, e.g. "add a Speaker field" or "delete the Camera field"',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function userPrompt(description: string, text: string): GetPromptResult {
|
||||
@@ -102,7 +79,6 @@ Count to end (countToEnd):
|
||||
- Do not set \`countToEnd: true\` unless the user explicitly asks for "count to end", "count to scheduled end", or confirms after you explain this behaviour.
|
||||
|
||||
End action (endAction):
|
||||
- Controls what happens when the event's timer reaches zero and can have surprising effect. Use only if the user explicitly asks for it.
|
||||
- \`none\` (default): stops at end; operator must manually start the next event.
|
||||
- \`load-next\`: pre-arms the next event; operator triggers start. Use when a human handoff is needed.
|
||||
- \`play-next\`: automatically starts the next event. Use for seamless back-to-back segments with no gap.
|
||||
@@ -117,17 +93,15 @@ Flags (flag):
|
||||
- Set \`flag: true\` on events that are critical operational markers (keynote starts, broadcast moments, VIP arrivals).
|
||||
- The operator view shows a countdown to the next flagged event — use sparingly for maximum impact.
|
||||
|
||||
Structure and colours:
|
||||
- Read the ontime://style-guide resource before deciding on structure or colours.
|
||||
- Propose a group per agenda section (morning block, keynotes, breaks) rather than a flat list — in ontime_batch_create_entries this is just a group entry with \`children\`.
|
||||
- Ask the user what colour convention they use; if they have none, propose one from the default Ontime palette in the style guide: calm hues for normal content, red only for attention items, orange for changeovers, dark tone on a group with the light tone of the same hue on its children. Colours are hex strings: \`#RRGGBB\`.
|
||||
Colours:
|
||||
- Ask the user what colour convention they use before applying any colours.
|
||||
- Common pattern: one colour per event type (keynotes, panels, breaks, meals).
|
||||
- Colours are hex strings: \`#RRGGBB\`.
|
||||
|
||||
Custom fields (custom):
|
||||
- Call ontime_get_custom_fields for the project's field keys (cuesheet-style columns such as camera, graphics, speaker).
|
||||
- Store values per entry at \`custom: { <fieldKey>: <value> }\` — keys are case-sensitive.
|
||||
- Reuse an existing field when it covers the concept (avoid duplicates such as \`Cam\`, \`camera\`, \`Cameras\`); when the agenda carries structured data with no matching field (speakers, locations), create it with ontime_create_custom_field and use the returned key — no confirmation needed.
|
||||
|
||||
After creating the rundown, read ontime://views and suggest how the team can follow it — e.g. a timer view for speakers, a backstage view for crew, or an operator view subscribed to a department custom field.
|
||||
- Store values per entry at \`custom: { <fieldKey>: <value> }\` — only use keys that exist in the project.
|
||||
- If the user's requested field is ambiguous, show the existing field list before choosing a key, so you avoid duplicate concepts such as \`Cam\`, \`camera\`, and \`Cameras\`.
|
||||
|
||||
Agenda:
|
||||
${args.agenda}`,
|
||||
@@ -176,7 +150,6 @@ Schedule integrity:
|
||||
- Events with \`duration\` of 0 or negative
|
||||
- Events with \`gap < 0\`: overlaps the previous timed event and is a conflict
|
||||
- Large unexplained positive gaps between consecutive timed events (> 30 min): check whether these are intentional
|
||||
- Long segments scheduled back-to-back with no changeover or buffer between them: one overrun will cascade — suggest a buffer event
|
||||
- Events where \`timeEnd < timeStart\`: these cross midnight; confirm this is intentional
|
||||
- Events whose \`timeStart\` is the same as or earlier than the previous playable event's \`timeStart\`: Ontime schedules these on the next day; confirm this is intentional
|
||||
|
||||
@@ -196,13 +169,6 @@ Skipped events:
|
||||
Totals:
|
||||
- Total rundown duration and whether it matches the user's expected show length (ask if unknown)
|
||||
|
||||
Readability (report at INFO level; see ontime://style-guide for the conventions):
|
||||
- Colour usage without a consistent convention, or key segments left uncoloured
|
||||
- Long runs of related ungrouped events that would read better as groups
|
||||
- Duplicate cues (cues are automation handles and should be unique) or mixed cue naming conventions
|
||||
- Structured department data in titles/notes that belongs in custom fields
|
||||
- If several readability issues surface, suggest running the tidy_rundown prompt to fix them systematically
|
||||
|
||||
Present issues grouped by severity: ERROR (breaks playback), WARNING (likely mistake), INFO (worth confirming).`,
|
||||
);
|
||||
}
|
||||
@@ -237,66 +203,5 @@ Efficiency tip: plan moves in the direction of the target position to minimise r
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'tidy_rundown') {
|
||||
const focus = args.focus ? `\nFocus specifically on: "${args.focus}".` : '';
|
||||
return userPrompt(
|
||||
'Audit and improve rundown readability',
|
||||
`Audit the current Ontime rundown for readability and tidiness, then propose improvements.${focus}
|
||||
|
||||
Steps:
|
||||
1. Read the ontime://style-guide resource — it defines the conventions to audit against, including the standard colour palette.
|
||||
2. Call ontime_list_rundowns and identify the target rundown. If the user wants a background rundown, pass its \`rundownId\` in all entry read/write calls instead of loading it.
|
||||
3. Call ontime_get_rundown with the chosen \`rundownId\`, and ontime_get_custom_fields for the project field definitions.
|
||||
4. Call ontime_get_timer_state. If playback is not \`stop\` and the target is the loaded rundown, explain that MCP edits affect the live rundown and ask the user to confirm before changing it.
|
||||
|
||||
Audit for:
|
||||
- Colour consistency: entries coloured outside a discernible convention, missing colours on key segments, red/orange used for normal content (the style guide reserves them for attention items and changeovers), or group/children colours that ignore the dark/light tone pairing. Prefer the default Ontime palette.
|
||||
- Grouping: long runs (roughly 4+) of related consecutive top-level events that would read better as a named group; groups missing \`targetDuration\`.
|
||||
- Buffers: long segments back-to-back with no changeover event between them; propose short buffer events so one overrun cannot cascade.
|
||||
- Cue naming: mixed conventions (numeric vs semantic) without apparent intent, duplicate cues, or gaps that suggest mistakes. Remember cues are automation handles — renaming them can break external triggers, so flag renames explicitly.
|
||||
- Data in the wrong place: structured department data buried in titles or notes (e.g. "CAM 2", "GFX: lower third") that belongs in a custom field; overlong titles (over ~50 chars).
|
||||
- Entry types: zero-duration events that should be milestones; milestones that carry timing expectations and should be events.
|
||||
- Flags: \`flag: true\` on many events dilutes its meaning — critical markers only.
|
||||
|
||||
Then:
|
||||
5. Present the findings as a short, scannable proposal (what changes, on which entries, and why) and WAIT for the user to approve before mutating anything. Be concise — a tight list beats prose.
|
||||
6. Apply approved changes with the cheapest calls: ontime_group_entries to group existing entries, ontime_batch_update_entries when several entries get the same values (e.g. recolouring), ontime_update_entry for per-entry changes, ontime_create_custom_field when moving data into a new field.
|
||||
7. Finish by reading ontime://views and suggesting views that put the improved structure to work — e.g. an operator view subscribed to a department custom field, or a cuesheet for cross-department editing.`,
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'manage_custom_fields') {
|
||||
return userPrompt(
|
||||
'List, create, rename, recolour, or delete custom field definitions',
|
||||
`Manage the project-level custom field definitions for this Ontime project: "${args.instruction}"
|
||||
|
||||
Custom fields are project-scoped. They appear as columns in the cuesheet and can be set on any event, milestone, or group. Changes apply to all rundowns in the project.
|
||||
|
||||
Steps:
|
||||
1. Call ontime_get_custom_fields to see what fields already exist. Reuse an existing field when it covers the concept — avoid duplicates such as "Cam", "camera", and "Cameras".
|
||||
2. Carry out the instruction using the tools below. Creating a field is non-destructive — do it directly. Confirm destructive changes (rename, delete) with the user before calling.
|
||||
|
||||
Creating a field:
|
||||
- Call ontime_create_custom_field with { label, type, colour }.
|
||||
- label: human-readable name (letters, numbers and spaces). The key is auto-derived: spaces → underscores (e.g. "Camera Angle" → "Camera_Angle").
|
||||
- type: "text" for short string values, "image" for image URLs. Cannot be changed after creation.
|
||||
- colour: hex colour (#RRGGBB) used to visually identify this column in the cuesheet. If unspecified, pick one from the default Ontime palette matching the department.
|
||||
- Returns: { key, customFields } — use the returned key when setting values on entries.
|
||||
|
||||
Renaming or recolouring a field:
|
||||
- Call ontime_update_custom_field with { key, label?, colour? }.
|
||||
- Warning: changing the label changes the derived key and cascades to all entry references in all rundowns. Confirm with the user before renaming.
|
||||
- The field type cannot be changed.
|
||||
|
||||
Deleting a field:
|
||||
- Call ontime_delete_custom_field with { key }.
|
||||
- Warning: this permanently removes the field definition and its values from every entry in all rundowns. Confirm with the user before deleting.
|
||||
|
||||
After any mutation, call ontime_get_custom_fields again to confirm the result and show the user the updated field list with their keys.
|
||||
|
||||
When a field was created for a department (camera, graphics, audio…), read ontime://views and offer the views that surface it: the cuesheet shows the field as a column for cross-department editing, and the operator view can display or highlight it for that department, e.g. /op?main=title&secondary-src=custom-<key>&subscribe=<key>.`,
|
||||
);
|
||||
}
|
||||
|
||||
throw new Error(`Unknown prompt: ${name}`);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { getProjectData } from '../api-data/project-data/projectData.dao.js';
|
||||
import { getCurrentRundown, getProjectCustomFields } from '../api-data/rundown/rundown.dao.js';
|
||||
import { normalisedToRundownArray } from '../api-data/rundown/rundown.utils.js';
|
||||
import { getDataProvider } from '../classes/data-provider/DataProvider.js';
|
||||
import { ONTIME_STYLE_GUIDE_MARKDOWN, ONTIME_VIEWS_MARKDOWN } from './mcp.guides.js';
|
||||
import { ONTIME_DOCS_MARKDOWN, ONTIME_SCHEMA_MARKDOWN } from './mcp.schema.js';
|
||||
|
||||
export const RESOURCE_DEFINITIONS: ListResourcesResult['resources'] = [
|
||||
@@ -46,22 +45,6 @@ export const RESOURCE_DEFINITIONS: ListResourcesResult['resources'] = [
|
||||
'Map of custom field keys to their label, type, and colour. Events reference these keys in their `custom` object.',
|
||||
mimeType: 'application/json',
|
||||
},
|
||||
{
|
||||
uri: 'ontime://style-guide',
|
||||
name: 'ontime-style-guide',
|
||||
title: 'Rundown style guide',
|
||||
description:
|
||||
'Best practices for tidy, easy-to-read rundowns: grouping, colour conventions and the default Ontime palette, cue naming, custom fields vs notes, timing hygiene. Read before creating or restyling a rundown.',
|
||||
mimeType: 'text/markdown',
|
||||
},
|
||||
{
|
||||
uri: 'ontime://views',
|
||||
name: 'ontime-views',
|
||||
title: 'Views and sharing guide',
|
||||
description:
|
||||
'What each Ontime view (timer, backstage, operator, cuesheet, timeline, countdown, studio clock, project info) is for, key URL parameters, URL presets, and custom views. Read when recommending how a team member should follow or edit the show.',
|
||||
mimeType: 'text/markdown',
|
||||
},
|
||||
{
|
||||
uri: 'ontime://docs',
|
||||
name: 'ontime-docs',
|
||||
@@ -74,8 +57,6 @@ export const RESOURCE_DEFINITIONS: ListResourcesResult['resources'] = [
|
||||
|
||||
const RESOURCE_READERS: Record<string, { mimeType: string; read: () => string }> = {
|
||||
'ontime://schema': { mimeType: 'text/markdown', read: () => ONTIME_SCHEMA_MARKDOWN },
|
||||
'ontime://style-guide': { mimeType: 'text/markdown', read: () => ONTIME_STYLE_GUIDE_MARKDOWN },
|
||||
'ontime://views': { mimeType: 'text/markdown', read: () => ONTIME_VIEWS_MARKDOWN },
|
||||
'ontime://docs': { mimeType: 'text/markdown', read: () => ONTIME_DOCS_MARKDOWN },
|
||||
'ontime://rundown/current': {
|
||||
mimeType: 'application/json',
|
||||
|
||||
@@ -17,20 +17,9 @@ mcpRouter.post('/', async (req, res) => {
|
||||
sessionIdGenerator: undefined, // stateless: no session tracking
|
||||
enableJsonResponse: true,
|
||||
});
|
||||
const server = createMcpServer();
|
||||
|
||||
let cleanedUp = false;
|
||||
const cleanup = async () => {
|
||||
if (cleanedUp) return;
|
||||
cleanedUp = true;
|
||||
transport.close();
|
||||
await server.close?.();
|
||||
};
|
||||
|
||||
res.on('close', () => void cleanup());
|
||||
res.on('finish', () => void cleanup());
|
||||
|
||||
res.on('close', () => transport.close());
|
||||
try {
|
||||
const server = createMcpServer();
|
||||
await server.connect(transport);
|
||||
await transport.handleRequest(req as IncomingMessage, res as ServerResponse, req.body);
|
||||
} catch (error) {
|
||||
@@ -39,8 +28,6 @@ mcpRouter.post('/', async (req, res) => {
|
||||
if (!res.headersSent) {
|
||||
res.status(500).json({ jsonrpc: '2.0', error: { code: -32603, message }, id: req.body?.id ?? null });
|
||||
}
|
||||
} finally {
|
||||
await cleanup();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -49,8 +49,7 @@ export const EVENT_WRITABLE_FIELDS = {
|
||||
note: { type: 'string', description: 'Free-text note for production notes or references' },
|
||||
colour: {
|
||||
type: 'string',
|
||||
description:
|
||||
'Hex colour (#RRGGBB) for visual grouping — ask the user what colour convention they use, and prefer the default Ontime palette from ontime://style-guide so colours match the editor swatches',
|
||||
description: 'Hex colour (#RRGGBB) for visual grouping — ask the user what colour convention they use',
|
||||
},
|
||||
skip: { type: 'boolean', description: 'If true, event is skipped during playback' },
|
||||
flag: {
|
||||
@@ -61,7 +60,7 @@ export const EVENT_WRITABLE_FIELDS = {
|
||||
type: 'object',
|
||||
additionalProperties: { type: 'string' },
|
||||
description:
|
||||
'Custom field values keyed by project field key, e.g. { "Camera": "CAM 2" }. Keys are case-sensitive — get them with ontime_get_custom_fields, and create missing fields with ontime_create_custom_field.',
|
||||
'Custom field values keyed by existing project field key, e.g. { "camera": "CAM 2" }. Get available keys with ontime_get_custom_fields. Adding new custom field definitions is a separate project-level operation.',
|
||||
},
|
||||
...EVENT_TIMER_FIELDS,
|
||||
} as const;
|
||||
@@ -178,14 +177,8 @@ Examples:
|
||||
## Custom fields
|
||||
Custom fields are project-scoped definitions. Get definitions at \`ontime://project/custom-fields\` or with \`ontime_get_custom_fields\`.
|
||||
Events, milestones and groups store values at \`entry.custom[fieldKey]\`.
|
||||
|
||||
Managing field definitions:
|
||||
- Read: \`ontime_get_custom_fields\` — returns \`{ [key]: { label, type, colour } }\`
|
||||
- Create: \`ontime_create_custom_field { label, type, colour }\` — key is auto-derived from label (spaces → underscores). Returns \`{ key, customFields }\`.
|
||||
- Rename/recolour: \`ontime_update_custom_field { key, label?, colour? }\` — renaming the label changes the derived key and cascades to all entry references across all rundowns. Type cannot be changed.
|
||||
- Delete: \`ontime_delete_custom_field { key }\` — removes the field definition and its values from every entry in all rundowns. Destructive, confirm first.
|
||||
|
||||
Keys are case-sensitive. When setting \`custom\` values, reuse an existing field when it covers the concept; otherwise create the missing field — creation is non-destructive and needs no confirmation. Rename and delete are the destructive operations: confirm those with the user.
|
||||
Only use existing field keys when setting \`custom\` values. Adding, renaming, or deleting custom field definitions is a separate project-level operation.
|
||||
When the user wants to assign custom values, show the existing custom field list first if there is any ambiguity, so you do not create duplicate concepts such as \`Cam\`, \`camera\`, and \`Cameras\`.
|
||||
|
||||
## Targeting rundowns
|
||||
Entry read/write tools accept an optional \`rundownId\`.
|
||||
@@ -199,8 +192,6 @@ When playback is not \`stop\`, mutations to the loaded rundown affect the live r
|
||||
|
||||
## Available resources
|
||||
- \`ontime://schema\` — this document
|
||||
- \`ontime://style-guide\` — rundown design best practices: grouping, colour palette, cue naming, custom field usage. Read before creating or restyling a rundown.
|
||||
- \`ontime://views\` — Ontime's role-specific views, URL parameters, URL presets, and custom views. Read when recommending how a team member should follow or edit the show.
|
||||
- \`ontime://rundown/current\` — the currently loaded rundown (JSON)
|
||||
- \`ontime://rundowns\` — all rundowns in the project (JSON)
|
||||
- \`ontime://project/info\` — project metadata (JSON)
|
||||
@@ -234,20 +225,8 @@ Main site: https://docs.getontime.no
|
||||
- URL presets / shared views: https://docs.getontime.no/features/url-presets/
|
||||
- HTTP Integration: https://docs.getontime.no/api/http/
|
||||
- OSC Integration: https://docs.getontime.no/api/osc/
|
||||
- Make custom views: https://docs.getontime.no/features/custom-views/
|
||||
|
||||
## Views
|
||||
- Configuring views: https://docs.getontime.no/quick-tips/configuring-views/
|
||||
- Operator view: https://docs.getontime.no/interface/production/operator/
|
||||
- Cuesheet: https://docs.getontime.no/interface/production/cuesheet/
|
||||
- Render views in third-party apps: https://docs.getontime.no/quick-tips/render-elsewhere/
|
||||
|
||||
## Quick tips
|
||||
- Managing delays: https://docs.getontime.no/quick-tips/managing-delays/
|
||||
- Smart time entry: https://docs.getontime.no/quick-tips/smart-time-entry/
|
||||
|
||||
## Helpful references
|
||||
- Ontime Cloud: https://docs.getontime.no/ontime-cloud/
|
||||
- Connect to companion module: https://docs.getontime.no/additional-notes/companion-module/
|
||||
- Import data from spreadsheets: https://docs.getontime.no/features/import-spreadsheet/
|
||||
## API reference
|
||||
- REST API overview: https://docs.getontime.no/api/
|
||||
- WebSocket events: https://docs.getontime.no/api/websocket/
|
||||
`;
|
||||
|
||||
@@ -12,16 +12,12 @@ import {
|
||||
Rundown,
|
||||
SupportedEntry,
|
||||
} from 'ontime-types';
|
||||
import { checkRegex, customFieldLabelToKey } from 'ontime-utils';
|
||||
|
||||
import { getCurrentRundown, getCurrentRundownId, getProjectCustomFields } from '../api-data/rundown/rundown.dao.js';
|
||||
import {
|
||||
addEntry,
|
||||
batchEditEntries,
|
||||
createCustomField,
|
||||
deleteCustomField,
|
||||
deleteEntries,
|
||||
editCustomField,
|
||||
editEntry,
|
||||
groupEntries,
|
||||
reorderEntry,
|
||||
@@ -107,26 +103,8 @@ export function assertKnownCustomFields(...customValues: Array<EntryFieldArgs['c
|
||||
}
|
||||
|
||||
if (unknownKeys.size > 0) {
|
||||
const missing = [...unknownKeys].join(', ');
|
||||
const available = Object.keys(customFields);
|
||||
const hint =
|
||||
available.length > 0 ? `Available keys: ${available.join(', ')}.` : 'No custom fields are defined yet.';
|
||||
|
||||
// keys are case-sensitive; a near-miss on casing is the most common mistake
|
||||
const suggestions = [...unknownKeys]
|
||||
.map((key) => {
|
||||
const match = available.find((existing) => existing.toLowerCase() === key.toLowerCase());
|
||||
return match ? `"${key}" → "${match}"` : null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
const caseHint =
|
||||
suggestions.length > 0 ? ` Keys are case-sensitive — did you mean: ${suggestions.join(', ')}?` : '';
|
||||
|
||||
throw new Error(
|
||||
`Unknown custom field key(s): ${missing}. ${hint}${caseHint} ` +
|
||||
`Call ontime_create_custom_field with { label, type, colour } to create a missing field — ` +
|
||||
`the key is auto-derived from the label (spaces → underscores, e.g. label "Mix Output" → key "Mix_Output").`,
|
||||
);
|
||||
const keys = [...unknownKeys].join(', ');
|
||||
throw new Error(`Unknown custom field key(s): ${keys}. Call ontime_get_custom_fields to list available keys.`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -342,36 +320,3 @@ export async function batchUpdateEntriesForMcp(args: TargetRundownArgs & { ids:
|
||||
const rundown = await batchEditEntries(rundownId, args.ids, args.data);
|
||||
return { target: getTargetMeta(rundownId), updated: args.ids, order: rundown.order };
|
||||
}
|
||||
|
||||
export async function createCustomFieldForMcp(args: { label: string; type: 'text' | 'image'; colour: string }) {
|
||||
const label = args.label?.trim();
|
||||
// same constraint the HTTP route enforces in customFields.validation.ts
|
||||
if (!label || !checkRegex.isAlphanumericWithSpace(label)) {
|
||||
throw new Error('Invalid label: use letters, numbers and spaces only, e.g. "Camera Angle".');
|
||||
}
|
||||
|
||||
const key = customFieldLabelToKey(label);
|
||||
const existingFields = getProjectCustomFields();
|
||||
const clash = Object.keys(existingFields).find((existing) => existing.toLowerCase() === key.toLowerCase());
|
||||
if (clash) {
|
||||
throw new Error(
|
||||
`A custom field with key "${clash}" (label "${existingFields[clash].label}") already exists. ` +
|
||||
`Reuse it in entry.custom["${clash}"] instead of creating a duplicate, or pick a clearly different label.`,
|
||||
);
|
||||
}
|
||||
|
||||
const updated = await createCustomField({ label, type: args.type, colour: args.colour });
|
||||
return { key, customFields: updated };
|
||||
}
|
||||
|
||||
export async function updateCustomFieldForMcp(args: { key: string; label?: string; colour?: string }) {
|
||||
const projectRundowns = getDataProvider().getProjectRundowns();
|
||||
const updated = await editCustomField(args.key, { label: args.label, colour: args.colour }, projectRundowns);
|
||||
return { customFields: updated };
|
||||
}
|
||||
|
||||
export async function deleteCustomFieldForMcp(args: { key: string }) {
|
||||
const projectRundowns = getDataProvider().getProjectRundowns();
|
||||
const updated = await deleteCustomField(args.key, projectRundowns);
|
||||
return { customFields: updated };
|
||||
}
|
||||
|
||||
@@ -25,9 +25,7 @@ import { EVENT_WRITABLE_FIELDS, RUNDOWN_TARGET_FIELD } from './mcp.schema.js';
|
||||
import {
|
||||
batchCreateEntriesForMcp,
|
||||
batchUpdateEntriesForMcp,
|
||||
createCustomFieldForMcp,
|
||||
createEntryForMcp,
|
||||
deleteCustomFieldForMcp,
|
||||
deleteEntriesForMcp,
|
||||
findEntry,
|
||||
getRundownById,
|
||||
@@ -35,7 +33,6 @@ import {
|
||||
reorderEntryForMcp,
|
||||
toRundownList,
|
||||
ungroupEntryForMcp,
|
||||
updateCustomFieldForMcp,
|
||||
updateEntryForMcp,
|
||||
type BatchCreateEntryArgs,
|
||||
type CreateEntryArgs,
|
||||
@@ -186,11 +183,7 @@ export const TOOL_DEFINITIONS = [
|
||||
ids: { type: 'array', items: { type: 'string' }, description: 'Existing top-level entry IDs to group' },
|
||||
title: { type: 'string', description: 'Group title shown in the rundown and views' },
|
||||
note: { type: 'string', description: 'Free-text group note for production notes or references' },
|
||||
colour: {
|
||||
type: 'string',
|
||||
description:
|
||||
'Hex colour (#RRGGBB) for the group — prefer the default Ontime palette from ontime://style-guide',
|
||||
},
|
||||
colour: { type: 'string', description: 'Hex colour (#RRGGBB) for the group' },
|
||||
custom: {
|
||||
type: 'object',
|
||||
additionalProperties: { type: 'string' },
|
||||
@@ -378,65 +371,6 @@ export const TOOL_DEFINITIONS = [
|
||||
inputSchema: { type: 'object', properties: {} },
|
||||
annotations: READ,
|
||||
},
|
||||
{
|
||||
name: 'ontime_create_custom_field',
|
||||
description:
|
||||
'Create a new project-level custom field definition. Custom fields add typed columns to every entry in all rundowns. The key is auto-derived from the label (spaces → underscores, e.g. "Camera Angle" → "Camera_Angle"). Creation is non-destructive — check ontime_get_custom_fields for an existing field covering the concept, and if none exists create directly without asking the user. After creation, use the returned key in entry.custom.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
required: ['label', 'type', 'colour'],
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
description:
|
||||
'Human-readable label (letters, numbers and spaces, e.g. "Camera"). Determines the key. Reuse an existing field over creating near-duplicates like "Cam", "camera", "Cameras".',
|
||||
},
|
||||
type: {
|
||||
type: 'string',
|
||||
enum: ['text', 'image'],
|
||||
description:
|
||||
'Field type — cannot be changed after creation. Use "text" for short text values; "image" for image URLs.',
|
||||
},
|
||||
colour: {
|
||||
type: 'string',
|
||||
description:
|
||||
'Hex colour (#RRGGBB) used to visually identify this column in the cuesheet — for department fields, match the department colour convention (see ontime://style-guide).',
|
||||
},
|
||||
},
|
||||
},
|
||||
annotations: WRITE,
|
||||
},
|
||||
{
|
||||
name: 'ontime_update_custom_field',
|
||||
description:
|
||||
'Update a custom field label or colour. Changing the label renames the derived key (spaces → underscores) and updates all entry references across all rundowns. Field type cannot be changed.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
required: ['key'],
|
||||
properties: {
|
||||
key: { type: 'string', description: 'Current field key (from ontime_get_custom_fields)' },
|
||||
label: {
|
||||
type: 'string',
|
||||
description: 'New human-readable label (optional). Changes the derived key and cascades to all entries.',
|
||||
},
|
||||
colour: { type: 'string', description: 'New hex colour (#RRGGBB) (optional)' },
|
||||
},
|
||||
},
|
||||
annotations: WRITE_IDEM,
|
||||
},
|
||||
{
|
||||
name: 'ontime_delete_custom_field',
|
||||
description:
|
||||
'Delete a custom field definition and remove its values from all entries in all rundowns. Destructive and cannot be undone — confirm with the user before calling.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
required: ['key'],
|
||||
properties: {
|
||||
key: { type: 'string', description: 'Field key to delete (from ontime_get_custom_fields)' },
|
||||
},
|
||||
},
|
||||
annotations: WRITE_DESTRUCTIVE,
|
||||
},
|
||||
// --- Project file management ---
|
||||
{
|
||||
name: 'ontime_list_projects',
|
||||
@@ -534,7 +468,7 @@ const TOOL_HANDLERS: Record<ToolName, (args: Record<string, unknown>) => Promise
|
||||
const serialised = text(data);
|
||||
if (serialised.length > CHARACTER_LIMIT) {
|
||||
return ok({
|
||||
warning: `Rundown too large (${serialised.length} chars) — fetch individual entries with ontime_get_entry.`,
|
||||
warning: `Rundown too large (${serialised.length} chars) — fetch individual entries with ontime_get_entry. Entry IDs in order: ${rundown.order.join(', ')}`,
|
||||
truncated: true,
|
||||
rundownId: rundown.id,
|
||||
order: rundown.order,
|
||||
@@ -637,18 +571,6 @@ const TOOL_HANDLERS: Record<ToolName, (args: Record<string, unknown>) => Promise
|
||||
|
||||
ontime_get_custom_fields: async () => ok(getProjectCustomFields()),
|
||||
|
||||
ontime_create_custom_field: async (args) => {
|
||||
return ok(await createCustomFieldForMcp(args as { label: string; type: 'text' | 'image'; colour: string }));
|
||||
},
|
||||
|
||||
ontime_update_custom_field: async (args) => {
|
||||
return ok(await updateCustomFieldForMcp(args as { key: string; label?: string; colour?: string }));
|
||||
},
|
||||
|
||||
ontime_delete_custom_field: async (args) => {
|
||||
return ok(await deleteCustomFieldForMcp(args as { key: string }));
|
||||
},
|
||||
|
||||
ontime_list_projects: async () => ok(await getProjectList()),
|
||||
|
||||
ontime_load_project: async (args) => {
|
||||
|
||||
@@ -87,8 +87,8 @@ describe('safeMerge', () => {
|
||||
it('should merge the urlPresets key when present', () => {
|
||||
const newData = {
|
||||
urlPresets: [
|
||||
{ enabled: true, alias: 'alias1', target: 'timer', search: '', displayInNav: false },
|
||||
{ enabled: true, alias: 'alias2', target: 'timer', search: '', displayInNav: false },
|
||||
{ enabled: true, alias: 'alias1', search: '' },
|
||||
{ enabled: true, alias: 'alias2', search: '' },
|
||||
] as URLPreset[],
|
||||
};
|
||||
|
||||
|
||||
@@ -43,7 +43,6 @@ export const demoDb: DatabaseModel = {
|
||||
target: OntimeView.Timer,
|
||||
search:
|
||||
'showLeadingZeros=true&timerType=clock&hideClock=true&hideCards=true&hideProgress=true&hideMessage=true&hideSecondary=true&hideLogo=true',
|
||||
displayInNav: false,
|
||||
},
|
||||
{
|
||||
enabled: true,
|
||||
@@ -51,7 +50,6 @@ export const demoDb: DatabaseModel = {
|
||||
target: OntimeView.Timer,
|
||||
search:
|
||||
'hideclock=true&hidecards=true&hideprogress=true&hidemessage=true&hidesecondary=true&hidelogo=true&font=arial+black&keycolour=00ff00&timerColour=ffffff',
|
||||
displayInNav: false,
|
||||
},
|
||||
],
|
||||
customFields: {
|
||||
|
||||
@@ -5,7 +5,6 @@ import type { RuntimeState } from '../../stores/runtimeState.js';
|
||||
import {
|
||||
findDayOffset,
|
||||
getCurrent,
|
||||
getElapsed,
|
||||
getExpectedFinish,
|
||||
getRuntimeOffset,
|
||||
getTimerPhase,
|
||||
@@ -16,56 +15,6 @@ import {
|
||||
|
||||
const asTimeOfDay = (value: number): RuntimeState['clock'] => value as RuntimeState['clock'];
|
||||
|
||||
describe('getElapsed()', () => {
|
||||
it('returns active elapsed time from startedAt without add-time adjustments', () => {
|
||||
const state = {
|
||||
clock: 5 * MILLIS_PER_MINUTE,
|
||||
timer: {
|
||||
addedTime: -10 * MILLIS_PER_MINUTE,
|
||||
current: 15 * MILLIS_PER_MINUTE,
|
||||
duration: 20 * MILLIS_PER_MINUTE,
|
||||
startedAt: 2 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: null,
|
||||
pausedDuration: 0,
|
||||
},
|
||||
} as RuntimeState;
|
||||
|
||||
expect(getElapsed(state)).toBe(3 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
|
||||
it('subtracts accumulated pause time', () => {
|
||||
const state = {
|
||||
clock: 10 * MILLIS_PER_MINUTE,
|
||||
timer: {
|
||||
startedAt: 2 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: null,
|
||||
pausedDuration: 5 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
} as RuntimeState;
|
||||
|
||||
expect(getElapsed(state)).toBe(3 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
|
||||
it('uses the current pause start while paused', () => {
|
||||
const state = {
|
||||
clock: 10 * MILLIS_PER_MINUTE,
|
||||
timer: {
|
||||
startedAt: 2 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: 7 * MILLIS_PER_MINUTE,
|
||||
pausedDuration: 1 * MILLIS_PER_MINUTE,
|
||||
},
|
||||
} as RuntimeState;
|
||||
|
||||
expect(getElapsed(state)).toBe(4 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getExpectedFinish()', () => {
|
||||
it('is null if we havent started', () => {
|
||||
const state = {
|
||||
@@ -975,36 +924,6 @@ describe('getRuntimeOffset()', () => {
|
||||
expect(absolute).toBe(25);
|
||||
});
|
||||
|
||||
it('paused time is delayed time when the pause spans midnight', () => {
|
||||
const state = {
|
||||
eventNow: {
|
||||
id: '1',
|
||||
timeStart: 23 * MILLIS_PER_HOUR, // 23:00
|
||||
timeEnd: 1 * MILLIS_PER_HOUR, // 01:00
|
||||
dayOffset: 0,
|
||||
},
|
||||
clock: 3 * MILLIS_PER_MINUTE, // 00:03 (after midnight)
|
||||
timer: {
|
||||
startedAt: 23 * MILLIS_PER_HOUR, // started on time at 23:00
|
||||
current: 25, // still counting down
|
||||
addedTime: 0,
|
||||
},
|
||||
_timer: {
|
||||
pausedAt: 23 * MILLIS_PER_HOUR + 58 * MILLIS_PER_MINUTE, // 23:58, before midnight
|
||||
},
|
||||
rundown: {
|
||||
actualStart: 23 * MILLIS_PER_HOUR,
|
||||
plannedStart: 23 * MILLIS_PER_HOUR,
|
||||
currentDay: 0,
|
||||
},
|
||||
_startDayOffset: 0,
|
||||
} as RuntimeState;
|
||||
|
||||
// paused from 23:58 to 00:03 -> 5 minutes, regardless of the midnight wrap
|
||||
const { absolute } = getRuntimeOffset(state);
|
||||
expect(absolute).toBe(5 * MILLIS_PER_MINUTE);
|
||||
});
|
||||
|
||||
it('offset doesnt exist if we havent started', () => {
|
||||
const state = {
|
||||
clock: 78480789,
|
||||
|
||||
@@ -47,23 +47,6 @@ describe('isRestorePoint()', () => {
|
||||
expect(isRestorePoint(restorePoint)).toBe(true);
|
||||
});
|
||||
|
||||
it('accepts optional paused duration', () => {
|
||||
const restorePoint: RestorePoint = {
|
||||
playback: Playback.Roll,
|
||||
selectedEventId: '123',
|
||||
startedAt: 1,
|
||||
addedTime: 2,
|
||||
pausedAt: null,
|
||||
pausedDuration: 3000,
|
||||
firstStart: 1,
|
||||
startEpoch: asInstant(1),
|
||||
currentDay: 0,
|
||||
};
|
||||
|
||||
expect(isRestorePoint(restorePoint)).toBe(true);
|
||||
expect(isRestorePoint({ ...restorePoint, pausedDuration: '3000' })).toBe(false);
|
||||
});
|
||||
|
||||
describe('rejects a badly formatted file', () => {
|
||||
it('with invalid playback value', () => {
|
||||
const restorePoint = {
|
||||
|
||||
@@ -46,10 +46,6 @@ export function isRestorePoint(restorePoint: unknown): restorePoint is RestorePo
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('pausedDuration' in restorePoint && !is.number(restorePoint.pausedDuration)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!is.number(restorePoint.firstStart) && restorePoint.firstStart !== null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ export type RestorePoint = {
|
||||
startedAt: MaybeNumber;
|
||||
addedTime: number;
|
||||
pausedAt: MaybeNumber;
|
||||
pausedDuration?: number;
|
||||
firstStart: MaybeNumber;
|
||||
startEpoch: Maybe<Instant>;
|
||||
currentDay: MaybeNumber;
|
||||
|
||||
@@ -760,7 +760,6 @@ function broadcastResult(_target: any, _propertyKey: string, descriptor: Propert
|
||||
startedAt: state.timer.startedAt,
|
||||
addedTime: state.timer.addedTime,
|
||||
pausedAt: state._timer.pausedAt,
|
||||
pausedDuration: state._timer.pausedDuration,
|
||||
firstStart: state.rundown.actualStart,
|
||||
startEpoch: state._startEpoch,
|
||||
currentDay: state.rundown.currentDay,
|
||||
|
||||
@@ -33,8 +33,7 @@ export function getShouldClockUpdate(previousUpdate: number, now: number): boole
|
||||
* Checks whether we should update the timer values
|
||||
* - `current` and `secondaryTimer` trigger on seconds roll over
|
||||
* - the rest trigger on any change
|
||||
* - `elapsed` changes alongside `current`
|
||||
* - `expectedFinish` is not checked
|
||||
* - `elapsed` and `expectedFinish` is not checked
|
||||
*/
|
||||
export function getShouldTimerUpdate(previousValue: TimerState | undefined, currentValue: TimerState): boolean {
|
||||
if (previousValue === undefined) return true;
|
||||
@@ -49,7 +48,7 @@ export function getShouldTimerUpdate(previousValue: TimerState | undefined, curr
|
||||
previousValue.phase !== currentValue.phase ||
|
||||
previousValue.playback !== currentValue.playback ||
|
||||
previousValue.startedAt !== currentValue.startedAt
|
||||
// elapsed - this is derived from current / duration / addedTime, so the fields above cover it
|
||||
// elapsed - this would be the direct invert of current value so no need to check
|
||||
// expectedFinish - this will be moved out by the current value going into over time, no need to check
|
||||
);
|
||||
}
|
||||
|
||||
@@ -92,33 +92,6 @@ export function getCurrent(state: RuntimeState): number {
|
||||
return startedAt + duration + addedTime - clock - correctDay;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates active time elapsed since the timer started.
|
||||
*/
|
||||
export function getElapsed(state: RuntimeState): MaybeNumber {
|
||||
const { clock } = state;
|
||||
const { startedAt } = state.timer;
|
||||
const { pausedAt, pausedDuration } = state._timer;
|
||||
|
||||
if (startedAt === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const referenceClock = pausedAt ?? clock;
|
||||
const elapsedSinceStart = getTimeSinceStart(referenceClock, startedAt);
|
||||
const activeElapsed = elapsedSinceStart - pausedDuration;
|
||||
|
||||
return Math.max(0, activeElapsed);
|
||||
}
|
||||
|
||||
function getTimeSinceStart(clock: TimeOfDay, startedAt: number): number {
|
||||
if (clock < startedAt) {
|
||||
return clock + dayInMs - startedAt;
|
||||
}
|
||||
|
||||
return clock - startedAt;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether we have skipped out of the event
|
||||
* @param {RuntimeState} state runtime state
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user