mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-21 23:19:09 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Carlos Valente
|
94e0cfa338 | ||
|
Carlos Valente
|
274d59d4d6 | ||
|
Carlos Valente
|
f21f9c4242 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/cli",
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.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.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
|
||||
@@ -20,7 +20,6 @@ const Backstage = lazy(() => import('./views/backstage/Backstage'));
|
||||
const StudioClock = lazy(() => import('./views/studio/Studio'));
|
||||
const Timeline = lazy(() => import('./views/timeline/TimelinePage'));
|
||||
const ProjectInfo = lazy(() => import('./views/project-info/ProjectInfo'));
|
||||
const Teleprompter = lazy(() => import('./views/teleprompter/Teleprompter'));
|
||||
|
||||
const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
|
||||
const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
|
||||
@@ -96,15 +95,6 @@ export default function AppRouter() {
|
||||
</ViewLoader>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='teleprompter'
|
||||
element={
|
||||
<ViewLoader>
|
||||
<ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSpaceHotkey />
|
||||
<Teleprompter />
|
||||
</ViewLoader>
|
||||
}
|
||||
/>
|
||||
{/*/!* Protected Routes *!/*/}
|
||||
<Route path='editor' element={<Editor />} />
|
||||
<Route path='cuesheet' element={<Cuesheet />} />
|
||||
@@ -175,7 +165,6 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
|
||||
[OntimeView.StudioClock]: StudioClock,
|
||||
[OntimeView.Countdown]: Countdown,
|
||||
[OntimeView.ProjectInfo]: ProjectInfo,
|
||||
[OntimeView.Teleprompter]: Teleprompter,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -225,14 +214,8 @@ function PresetView() {
|
||||
const Component = PresetViewMap[preset.target as OntimeViewPresettable];
|
||||
return (
|
||||
<PresetContext value={preset}>
|
||||
<ViewLoader>
|
||||
<ViewNavigationMenu
|
||||
isNavigationLocked={getIsNavigationLocked()}
|
||||
suppressSettings
|
||||
suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
|
||||
/>
|
||||
{Component ? <Component /> : <NotFound />}
|
||||
</ViewLoader>
|
||||
<ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
|
||||
{Component ? <Component /> : <NotFound />}
|
||||
</PresetContext>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
import Button from './Button';
|
||||
|
||||
type ToggleButtonProps = Omit<ComponentProps<typeof Button>, 'variant'> & {
|
||||
/** whether the option this button controls is currently on */
|
||||
pressed: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* A button which carries an on / off state.
|
||||
*
|
||||
* Keeps the pressed styling and the accessible state together, so that a toggle
|
||||
* cannot end up looking active without also announcing that it is.
|
||||
*/
|
||||
export default function ToggleButton({ pressed, ...buttonProps }: ToggleButtonProps) {
|
||||
return <Button variant={pressed ? 'primary' : 'subtle'} aria-pressed={pressed} {...buttonProps} />;
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
.groups {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
h3 {
|
||||
margin: 0 0 0.375rem;
|
||||
color: var(--shortcut-title-color, currentColor);
|
||||
font-size: calc(1rem - 3px);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
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);
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
color: var(--shortcut-label-color, currentColor);
|
||||
}
|
||||
|
||||
.keys {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.25rem 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.combo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25rem 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--shortcut-separator-color, currentColor);
|
||||
font-size: calc(1rem - 5px);
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.keys {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
import Kbd from '../kbd/Kbd';
|
||||
|
||||
import style from './KeyboardShortcuts.module.scss';
|
||||
|
||||
export function ShortcutGroups({ className, children }: PropsWithChildren<{ className?: string }>) {
|
||||
return <div className={cx([style.groups, className])}>{children}</div>;
|
||||
}
|
||||
|
||||
export function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
|
||||
return (
|
||||
<section className={style.group}>
|
||||
<h3>{title}</h3>
|
||||
<div className={style.list}>{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
|
||||
return (
|
||||
<div className={style.row}>
|
||||
<span className={style.label}>{label}</span>
|
||||
<span className={style.keys}>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Combo({ keys }: { keys: string[] }) {
|
||||
return (
|
||||
<span className={style.combo}>
|
||||
{keys.map((key) => (
|
||||
<Kbd key={key}>{key}</Kbd>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function Separator() {
|
||||
return <span className={style.separator}>/</span>;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type HotkeyItem, useDisclosure, useHotkeys } from '@mantine/hooks';
|
||||
import { useDisclosure, useHotkeys } from '@mantine/hooks';
|
||||
import { memo } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
@@ -13,32 +13,24 @@ interface ViewNavigationMenuProps {
|
||||
isNavigationLocked?: boolean;
|
||||
/** prevent showing settings */
|
||||
suppressSettings?: boolean;
|
||||
suppressSpaceHotkey?: boolean;
|
||||
}
|
||||
|
||||
export default memo(ViewNavigationMenu);
|
||||
function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: ViewNavigationMenuProps) {
|
||||
function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
|
||||
const [isMenuOpen, menuHandler] = useDisclosure();
|
||||
const { open: showEditFormDrawer } = useViewParamsEditorStore();
|
||||
const [searchParams] = useSearchParams();
|
||||
const hasSavedChanges = hasCustomParams(searchParams);
|
||||
|
||||
// Omitting the binding also avoids useHotkeys preventing the default action.
|
||||
const spaceHotkey: HotkeyItem[] = suppressSpaceHotkey
|
||||
? []
|
||||
: [
|
||||
[
|
||||
'Space',
|
||||
() => {
|
||||
if (isNavigationLocked) return;
|
||||
menuHandler.toggle();
|
||||
},
|
||||
{ preventDefault: true },
|
||||
],
|
||||
];
|
||||
|
||||
useHotkeys([
|
||||
...spaceHotkey,
|
||||
[
|
||||
'Space',
|
||||
() => {
|
||||
if (isNavigationLocked) return;
|
||||
menuHandler.toggle();
|
||||
},
|
||||
{ preventDefault: true },
|
||||
],
|
||||
[
|
||||
'mod + ,',
|
||||
() => {
|
||||
|
||||
@@ -49,13 +49,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
|
||||
}
|
||||
|
||||
if (type === 'boolean') {
|
||||
const paramValue = searchParams.get(id);
|
||||
return (
|
||||
<ControlledSwitch
|
||||
id={id}
|
||||
initialValue={paramValue === null ? Boolean(defaultValue) : isStringBoolean(paramValue)}
|
||||
/>
|
||||
);
|
||||
return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
|
||||
}
|
||||
|
||||
if (type === 'number') {
|
||||
|
||||
+1
-31
@@ -228,41 +228,11 @@ describe('getURLSearchParamsFromObj()', () => {
|
||||
},
|
||||
];
|
||||
const params = {
|
||||
bool1: 'off',
|
||||
bool2: 'on',
|
||||
};
|
||||
const result = getURLSearchParamsFromObj(params, mockOptionsWithBooleans);
|
||||
expect(result.get('bool1')).toBe('false');
|
||||
expect(result.get('bool2')).toBe('true');
|
||||
});
|
||||
|
||||
it('omits booleans which match their default', () => {
|
||||
const mockOptionsWithBooleans: ViewOption[] = [
|
||||
{
|
||||
title: OptionTitle.StyleOverride,
|
||||
options: [
|
||||
{
|
||||
id: 'onByDefault',
|
||||
title: 'onByDefault',
|
||||
description: 'On by default',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
},
|
||||
{
|
||||
id: 'offByDefault',
|
||||
title: 'offByDefault',
|
||||
description: 'Off by default',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const untouched = getURLSearchParamsFromObj({ onByDefault: 'on' }, mockOptionsWithBooleans);
|
||||
expect(untouched.toString()).toBe('');
|
||||
|
||||
const flipped = getURLSearchParamsFromObj({ offByDefault: 'on' }, mockOptionsWithBooleans);
|
||||
expect(flipped.get('onByDefault')).toBe('false');
|
||||
expect(flipped.get('offByDefault')).toBe('true');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -155,14 +155,6 @@ export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields:
|
||||
});
|
||||
});
|
||||
|
||||
// Unchecked checkboxes are absent from FormData. Persist false when true is the default.
|
||||
metadata.booleanFields.forEach((id) => {
|
||||
if (id in paramsObj) return;
|
||||
if (metadata.defaultValues[id] !== 'false') {
|
||||
addUniqueParam(id, 'false');
|
||||
}
|
||||
});
|
||||
|
||||
// Then process user-provided values
|
||||
Object.entries(paramsObj).forEach(([id, value]) => {
|
||||
if (typeof value === 'string' && value.length) {
|
||||
|
||||
@@ -26,7 +26,6 @@ const targetOptions: SelectOption<OntimeViewPresettable>[] = [
|
||||
{ value: OntimeView.StudioClock, label: 'Studio Clock' },
|
||||
{ value: OntimeView.Countdown, label: 'Countdown' },
|
||||
{ value: OntimeView.ProjectInfo, label: 'Project Info' },
|
||||
{ value: OntimeView.Teleprompter, label: 'Teleprompter' },
|
||||
];
|
||||
|
||||
const formId = 'url-preset-form';
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
import ToggleButton from '../../common/components/buttons/ToggleButton';
|
||||
import { clearLogs, useLogData } from '../../common/stores/logger';
|
||||
import { cx } from '../../common/utils/styleUtils';
|
||||
import * as Panel from '../app-settings/panel-utils/PanelUtils';
|
||||
@@ -55,72 +56,66 @@ export default function Log() {
|
||||
<div className={cx([style.container, isExtracted && style.extracted])}>
|
||||
<Panel.InlineElements className={style.buttonBar}>
|
||||
<span className={style.filterLabel}>Filter by</span>
|
||||
<Button
|
||||
variant={showUser ? 'primary' : 'subtle'}
|
||||
<ToggleButton
|
||||
pressed={showUser}
|
||||
size='small'
|
||||
aria-pressed={showUser}
|
||||
aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
|
||||
onClick={() => setShowUser((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.User)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.User}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showClient ? 'primary' : 'subtle'}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showClient}
|
||||
size='small'
|
||||
aria-pressed={showClient}
|
||||
aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
|
||||
onClick={() => setShowClient((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.Client)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.Client}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showServer ? 'primary' : 'subtle'}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showServer}
|
||||
size='small'
|
||||
aria-pressed={showServer}
|
||||
aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
|
||||
onClick={() => setShowServer((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.Server)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.Server}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showPlayback ? 'primary' : 'subtle'}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showPlayback}
|
||||
size='small'
|
||||
aria-pressed={showPlayback}
|
||||
aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
|
||||
onClick={() => setShowPlayback((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.Playback)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.Playback}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showRx ? 'primary' : 'subtle'}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showRx}
|
||||
size='small'
|
||||
aria-pressed={showRx}
|
||||
aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
|
||||
onClick={() => setShowRx((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.Rx)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.Rx}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showTx ? 'primary' : 'subtle'}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showTx}
|
||||
size='small'
|
||||
aria-pressed={showTx}
|
||||
aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
|
||||
onClick={() => setShowTx((s) => !s)}
|
||||
onAuxClick={() => disableOthers(LogOrigin.Tx)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
>
|
||||
{LogOrigin.Tx}
|
||||
</Button>
|
||||
</ToggleButton>
|
||||
<Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
|
||||
<IoClose /> Clear
|
||||
</Button>
|
||||
|
||||
@@ -17,10 +17,59 @@
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
--shortcut-title-color: #{$ui-white};
|
||||
--shortcut-separator-color: #{$gray-500};
|
||||
.shortcutGroup {
|
||||
h3 {
|
||||
margin: 0 0 0.375rem;
|
||||
color: $ui-white;
|
||||
font-size: calc(1rem - 3px);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.prompt {
|
||||
@@ -35,4 +84,13 @@
|
||||
.shortcutSection {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.shortcutRow {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.shortcutKeys {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
import { memo } from 'react';
|
||||
import { PropsWithChildren, memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../common/components/editor-utils/EditorUtils';
|
||||
import {
|
||||
Combo,
|
||||
Separator,
|
||||
Shortcut,
|
||||
ShortcutGroup,
|
||||
ShortcutGroups,
|
||||
} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
|
||||
import Kbd from '../../../common/components/kbd/Kbd';
|
||||
import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
|
||||
import style from './EventEditorEmpty.module.scss';
|
||||
@@ -19,7 +13,7 @@ function EventEditorEmpty() {
|
||||
<div className={style.entryEditor} data-testid='editor-container'>
|
||||
<div className={style.shortcutSection}>
|
||||
<Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
|
||||
<ShortcutGroups className={style.shortcuts}>
|
||||
<div className={style.shortcuts}>
|
||||
<ShortcutGroup title='Search'>
|
||||
<Shortcut label='Find in rundown'>
|
||||
<Combo keys={[deviceMod, 'F']} />
|
||||
@@ -106,8 +100,40 @@ function EventEditorEmpty() {
|
||||
<Combo keys={[deviceAlt, 'Shift', 'D']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
</ShortcutGroups>
|
||||
</div>
|
||||
</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 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>;
|
||||
}
|
||||
|
||||
@@ -8,10 +8,16 @@ export default memo(FinderPlacement);
|
||||
function FinderPlacement() {
|
||||
const [isOpen, handler] = useDisclosure();
|
||||
|
||||
useHotkeys([
|
||||
['mod + f', handler.toggle, { preventDefault: true }],
|
||||
['Escape', handler.close, { preventDefault: true }],
|
||||
]);
|
||||
/**
|
||||
* The empty tagsToIgnore is significant: by default the hook skips input elements,
|
||||
* which would make the shortcut dead while editing an entry.
|
||||
*
|
||||
* This opens rather than toggles. Toggling on a key that also mounts and unmounts the
|
||||
* dialog races against it, and browsers treat a repeated find shortcut as "focus the
|
||||
* search again" rather than "close it". The finder selects its input instead, and
|
||||
* Escape closes.
|
||||
*/
|
||||
useHotkeys([['mod + f', handler.open, { preventDefault: true }]], []);
|
||||
|
||||
if (isOpen) {
|
||||
return <Finder isOpen={isOpen} onClose={handler.close} />;
|
||||
|
||||
@@ -312,6 +312,7 @@ export default function RundownEvent({
|
||||
onClick={handleFocusClick}
|
||||
onContextMenu={onContextMenu}
|
||||
data-testid='rundown-event'
|
||||
data-selected={isSelected}
|
||||
{...(isPlaying ? { 'data-running': true } : {})}
|
||||
>
|
||||
<RundownIndicators timeStart={timeStart} delay={delay} gap={gap} isNextDay={isNextDay} />
|
||||
|
||||
@@ -35,7 +35,6 @@ export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormE
|
||||
{ value: OntimeView.Timer, label: 'Timer' },
|
||||
{ value: OntimeView.Cuesheet, label: 'Cuesheet' },
|
||||
{ value: OntimeView.Operator, label: 'Operator' },
|
||||
{ value: OntimeView.Teleprompter, label: 'Teleprompter' },
|
||||
{ value: '<<companion>>', label: 'Companion' },
|
||||
...urlPresetData.map((preset) => ({
|
||||
value: `preset-${preset.alias}`,
|
||||
|
||||
@@ -4,7 +4,6 @@ export const navigatorConstants = [
|
||||
{ url: 'timeline', label: 'Timeline' },
|
||||
{ url: 'studio', label: 'Studio Clock' },
|
||||
{ url: 'countdown', label: 'Countdown' },
|
||||
{ url: 'teleprompter', label: 'Teleprompter' },
|
||||
{ url: 'info', label: 'Project Info' },
|
||||
];
|
||||
|
||||
|
||||
@@ -3,11 +3,14 @@
|
||||
.error {
|
||||
padding-inline: 0.5rem;
|
||||
font-size: 1rem;
|
||||
height: 3rem;
|
||||
// rows grow when a match is shown from a note or custom field
|
||||
min-height: 3rem;
|
||||
padding-block: 0.35rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.entry[data-selected='true'] {
|
||||
@@ -18,21 +21,47 @@
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.more {
|
||||
padding-inline: 0.5rem;
|
||||
padding-block: 0.75rem;
|
||||
font-size: calc(1rem - 2px);
|
||||
color: $label-gray;
|
||||
border-top: 1px solid $gray-1000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $error-red;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
font-size: calc(1rem - 3px);
|
||||
color: $label-gray;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'index cue'
|
||||
'index title';
|
||||
'index title'
|
||||
'index match';
|
||||
column-gap: 1rem;
|
||||
grid-template-rows: min-content 1fr;
|
||||
min-width: 0;
|
||||
|
||||
.index {
|
||||
grid-area: index;
|
||||
background-color: var(--color, $gray-1000);
|
||||
// background and text colour come from getAccessibleColour, which keeps the
|
||||
// number legible whatever colour the user gave the entry
|
||||
border-radius: 2px;
|
||||
padding-block: 0.25rem;
|
||||
width: 3.5rem;
|
||||
@@ -42,14 +71,33 @@
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cue {
|
||||
grid-area: cue;
|
||||
font-size: calc(1rem - 2px);
|
||||
color: $label-gray;
|
||||
max-height: 1em;
|
||||
min-height: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.match {
|
||||
grid-area: match;
|
||||
font-size: calc(1rem - 3px);
|
||||
color: $label-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.matchLabel {
|
||||
color: $ui-white;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,13 +111,14 @@
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.filterHint {
|
||||
.count {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.em {
|
||||
color: $ui-white;
|
||||
margin-inline: 0.25rem;
|
||||
.go {
|
||||
white-space: nowrap;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.hints {
|
||||
@@ -98,7 +147,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filterHint {
|
||||
.count {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useDebouncedCallback } from '@mantine/hooks';
|
||||
import { SupportedEntry } from 'ontime-types';
|
||||
import { KeyboardEvent, useState } from 'react';
|
||||
import { MaybeString } from 'ontime-types';
|
||||
import { KeyboardEvent, useDeferredValue, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import ToggleButton from '../../../common/components/buttons/ToggleButton';
|
||||
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';
|
||||
import { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import useFinder, { FinderResult } from './useFinder';
|
||||
|
||||
import style from './Finder.module.scss';
|
||||
|
||||
@@ -15,46 +16,76 @@ interface FinderProps {
|
||||
}
|
||||
|
||||
export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
const { find, select, results, error } = useFinder();
|
||||
const [selected, setSelected] = useState(0);
|
||||
const [search, setSearch] = useState('');
|
||||
const [filter, setFilter] = useState<MaybeString>(null);
|
||||
const [selectedId, setSelectedId] = useState<MaybeString>(null);
|
||||
|
||||
const debouncedFind = useDebouncedCallback(find, 100);
|
||||
/**
|
||||
* Keeps typing responsive while the list re-renders.
|
||||
* The search itself is cheap, rendering the results is what costs.
|
||||
*/
|
||||
const deferredSearch = useDeferredValue(search);
|
||||
const { select, results, error, total, filters, appliedFilter } = useFinder(deferredSearch, filter);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const activeRef = useRef<HTMLLIElement>(null);
|
||||
|
||||
/**
|
||||
* We track the selection by ID so that it survives the result list changing under us:
|
||||
* an entry that no longer exists falls back to the first result instead of dangling past the end
|
||||
*/
|
||||
const activeIndex = Math.max(
|
||||
0,
|
||||
results.findIndex((entry) => entry.id === selectedId),
|
||||
);
|
||||
const activeEntry = results.at(activeIndex);
|
||||
|
||||
/** keep the highlighted entry in view while navigating with the keyboard */
|
||||
useEffect(() => {
|
||||
activeRef.current?.scrollIntoView({ block: 'nearest' });
|
||||
}, [activeEntry?.id]);
|
||||
|
||||
const navigate = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
// pressing the search shortcut again selects the query, ready to be replaced
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
|
||||
event.preventDefault();
|
||||
inputRef.current?.select();
|
||||
return;
|
||||
}
|
||||
|
||||
// all operations need results
|
||||
if (results.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (event.key === 'ArrowDown') {
|
||||
setSelected((prev) => (prev + 1) % results.length);
|
||||
setSelectedId(results[(activeIndex + 1) % results.length].id);
|
||||
}
|
||||
if (event.key === 'ArrowUp') {
|
||||
setSelected((prev) => (prev - 1 + results.length) % results.length);
|
||||
setSelectedId(results[(activeIndex - 1 + results.length) % results.length].id);
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
submit();
|
||||
submit(activeEntry);
|
||||
}
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const selectedEvent = results[selected];
|
||||
select(selectedEvent);
|
||||
const submit = (entry: FinderResult | undefined) => {
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
select(entry);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleMouseMoveEvent = (event: React.MouseEvent<HTMLUListElement>) => {
|
||||
const target = event.target as HTMLElement;
|
||||
const li = target.closest('li');
|
||||
if (li) {
|
||||
const index = Number(li.dataset.index);
|
||||
if (!isNaN(index)) {
|
||||
setSelected(index);
|
||||
}
|
||||
}
|
||||
/** Scopes the search to a single field, or back to all fields when tapped again */
|
||||
const handleFilter = (filterKey: string) => {
|
||||
setFilter((previous) => (previous === filterKey ? null : filterKey));
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const hiddenResults = total - results.length;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title=''
|
||||
@@ -63,35 +94,68 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
showBackdrop
|
||||
bodyElements={
|
||||
<div onKeyDown={navigate}>
|
||||
<Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
|
||||
<ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
height='large'
|
||||
fluid
|
||||
autoFocus
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder='Search...'
|
||||
/>
|
||||
<div className={style.filters} data-testid='finder-filters'>
|
||||
<span className={style.filterLabel}>Filter by</span>
|
||||
{filters.map((option) => (
|
||||
<ToggleButton
|
||||
key={option.key}
|
||||
pressed={appliedFilter === option.key}
|
||||
size='small'
|
||||
onClick={() => handleFilter(option.key)}
|
||||
>
|
||||
{option.label}
|
||||
</ToggleButton>
|
||||
))}
|
||||
</div>
|
||||
<ul className={style.scrollContainer}>
|
||||
{error && <li className={style.error}>{error}</li>}
|
||||
{results.length === 0 && <li className={style.empty}>No results</li>}
|
||||
{results.length > 0 &&
|
||||
results.map((entry, index) => {
|
||||
const isSelected = selected === index;
|
||||
const displayIndex = entry.type === SupportedEntry.Event ? entry.eventIndex : '-';
|
||||
const displayCue = 'cue' in entry ? entry.cue : '';
|
||||
{!error && results.length === 0 && <li className={style.empty}>No results</li>}
|
||||
{results.map((entry) => {
|
||||
const isSelected = activeEntry?.id === entry.id;
|
||||
// the title and cue are already on the row, a match anywhere else needs showing
|
||||
const showMatch = entry.match !== null && entry.match.key !== 'title' && entry.match.key !== 'cue';
|
||||
|
||||
return (
|
||||
<li
|
||||
key={entry.id}
|
||||
className={style.entry}
|
||||
data-selected={isSelected}
|
||||
data-index={index}
|
||||
onClick={submit}
|
||||
>
|
||||
<div className={style.data}>
|
||||
<div className={style.index} style={{ '--color': entry.colour }}>
|
||||
{displayIndex}
|
||||
</div>
|
||||
<div className={style.cue}>{displayCue}</div>
|
||||
<div className={style.title}>{entry.title}</div>
|
||||
return (
|
||||
<li
|
||||
key={entry.id}
|
||||
ref={isSelected ? activeRef : undefined}
|
||||
className={style.entry}
|
||||
data-testid='finder-result'
|
||||
data-selected={isSelected}
|
||||
onClick={() => submit(entry)}
|
||||
onPointerMove={() => setSelectedId(entry.id)}
|
||||
>
|
||||
<div className={style.data}>
|
||||
<div className={style.index} style={getAccessibleColour(entry.colour)}>
|
||||
{entry.eventIndex ?? '-'}
|
||||
</div>
|
||||
{isSelected && <span>Go ⏎</span>}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<div className={style.cue}>{entry.cue}</div>
|
||||
<div className={style.title}>{entry.title}</div>
|
||||
{showMatch && (
|
||||
<div className={style.match} data-testid='finder-result-match'>
|
||||
<span className={style.matchLabel}>{entry.match?.label}</span>
|
||||
{entry.match?.excerpt}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && <span className={style.go}>Go ⏎</span>}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
{hiddenResults > 0 && (
|
||||
<li className={style.more} data-testid='finder-more'>
|
||||
{hiddenResults} more {hiddenResults === 1 ? 'result' : 'results'} — keep typing to narrow the search
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@@ -112,10 +176,11 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
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>
|
||||
{total > 0 && (
|
||||
<div className={style.count} data-testid='finder-count'>
|
||||
{hiddenResults > 0 ? `Showing ${results.length} of ${total}` : `${total} result${total === 1 ? '' : 's'}`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
import { CustomFields, OntimeDelay, OntimeEvent, OntimeGroup, OntimeMilestone, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import { parseQuery, searchByIndex, searchByText } from './useFinder';
|
||||
|
||||
function makeEvent(id: string, overrides: Partial<OntimeEvent> = {}): OntimeEvent {
|
||||
return {
|
||||
type: SupportedEntry.Event,
|
||||
id,
|
||||
cue: '',
|
||||
title: '',
|
||||
note: '',
|
||||
colour: '#000000',
|
||||
custom: {},
|
||||
parent: null,
|
||||
...overrides,
|
||||
} as OntimeEvent;
|
||||
}
|
||||
|
||||
function makeGroup(id: string, overrides: Partial<OntimeGroup> = {}): OntimeGroup {
|
||||
return {
|
||||
type: SupportedEntry.Group,
|
||||
id,
|
||||
title: '',
|
||||
note: '',
|
||||
colour: '#000000',
|
||||
custom: {},
|
||||
...overrides,
|
||||
} as OntimeGroup;
|
||||
}
|
||||
|
||||
function makeMilestone(id: string, overrides: Partial<OntimeMilestone> = {}): OntimeMilestone {
|
||||
return {
|
||||
type: SupportedEntry.Milestone,
|
||||
id,
|
||||
cue: '',
|
||||
title: '',
|
||||
note: '',
|
||||
colour: '#000000',
|
||||
custom: {},
|
||||
parent: null,
|
||||
...overrides,
|
||||
} as OntimeMilestone;
|
||||
}
|
||||
|
||||
function makeDelay(id: string): OntimeDelay {
|
||||
return { type: SupportedEntry.Delay, id, duration: 1000, parent: null };
|
||||
}
|
||||
|
||||
describe('parseQuery()', () => {
|
||||
const filters = [
|
||||
{ key: 'cue', label: 'Cue' },
|
||||
{ key: 'Camera_Notes', label: 'Camera Notes' },
|
||||
];
|
||||
|
||||
it.each([
|
||||
['cue 12', { filterKey: 'cue', searchString: '12' }],
|
||||
['cue:12', { filterKey: 'cue', searchString: '12' }],
|
||||
['camera_notes:wide', { filterKey: 'Camera_Notes', searchString: 'wide' }],
|
||||
])('parses the field prefix in %s', (searchValue, expected) => {
|
||||
expect(parseQuery(searchValue, filters)).toStrictEqual(expected);
|
||||
});
|
||||
|
||||
it('keeps an unprefixed query as a search across all fields', () => {
|
||||
expect(parseQuery('zebrafish', filters)).toStrictEqual({ filterKey: null, searchString: 'zebrafish' });
|
||||
});
|
||||
|
||||
it('recognises a filter before any search text has been entered', () => {
|
||||
expect(parseQuery('cue', filters)).toStrictEqual({ filterKey: 'cue', searchString: '' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('searchByText()', () => {
|
||||
const customFields: CustomFields = {
|
||||
Camera_Notes: { type: 'text', label: 'Camera Notes', colour: '#000000' },
|
||||
Slide: { type: 'image', label: 'Slide', colour: '#000000' },
|
||||
};
|
||||
|
||||
it('searches cue, title, note, and text custom fields in rundown order', () => {
|
||||
const data = [
|
||||
makeMilestone('milestone', { cue: 'needle' }),
|
||||
makeGroup('group', { title: 'needle' }),
|
||||
makeEvent('note', { note: 'find the needle here' }),
|
||||
makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
|
||||
];
|
||||
|
||||
const outcome = searchByText(data, customFields, null, 'needle');
|
||||
|
||||
expect(outcome.results.map(({ id, match }) => ({ id, field: match?.key }))).toStrictEqual([
|
||||
{ id: 'milestone', field: 'cue' },
|
||||
{ id: 'group', field: 'title' },
|
||||
{ id: 'note', field: 'note' },
|
||||
{ id: 'custom', field: 'Camera_Notes' },
|
||||
]);
|
||||
expect(outcome.total).toBe(4);
|
||||
});
|
||||
|
||||
it('searches only the selected field', () => {
|
||||
const data = [
|
||||
makeEvent('title', { title: 'needle' }),
|
||||
makeEvent('note', { note: 'needle' }),
|
||||
makeEvent('custom', { custom: { Camera_Notes: 'needle' } }),
|
||||
];
|
||||
|
||||
const outcome = searchByText(data, customFields, 'note', 'needle');
|
||||
|
||||
expect(outcome.results.map((result) => result.id)).toStrictEqual(['note']);
|
||||
expect(outcome.total).toBe(1);
|
||||
});
|
||||
|
||||
it('reports the first matching field so the result can explain why it matched', () => {
|
||||
const data = [makeEvent('event', { cue: 'NEEDLE', title: 'another needle' })];
|
||||
|
||||
const outcome = searchByText(data, customFields, null, 'needle');
|
||||
|
||||
expect(outcome.results[0].match).toStrictEqual({ key: 'cue', label: 'Cue', excerpt: 'NEEDLE' });
|
||||
});
|
||||
|
||||
it('does not search image custom fields', () => {
|
||||
const data = [makeEvent('image-only', { custom: { Slide: 'needle' } })];
|
||||
|
||||
expect(searchByText(data, customFields, null, 'needle')).toStrictEqual({ results: [], error: null, total: 0 });
|
||||
});
|
||||
|
||||
it('reports the full match count while limiting rendered results', () => {
|
||||
const data = Array.from({ length: 51 }, (_, index) => makeEvent(String(index), { title: 'needle' }));
|
||||
|
||||
const outcome = searchByText(data, customFields, null, 'needle');
|
||||
|
||||
expect(outcome.results).toHaveLength(50);
|
||||
expect(outcome.total).toBe(51);
|
||||
});
|
||||
});
|
||||
|
||||
describe('searchByIndex()', () => {
|
||||
it('counts only events while preserving the flat rundown position', () => {
|
||||
const data = [
|
||||
makeGroup('group'),
|
||||
makeDelay('delay'),
|
||||
makeEvent('first'),
|
||||
makeMilestone('milestone'),
|
||||
makeEvent('second'),
|
||||
];
|
||||
|
||||
const outcome = searchByIndex(data, '2');
|
||||
|
||||
expect(outcome.results).toHaveLength(1);
|
||||
expect(outcome.results[0]).toMatchObject({ id: 'second', index: 4, eventIndex: 2 });
|
||||
expect(outcome.total).toBe(1);
|
||||
});
|
||||
|
||||
it.each(['0', 'not-a-number'])('rejects invalid index %s', (index) => {
|
||||
expect(searchByIndex([makeEvent('event')], index)).toStrictEqual({
|
||||
results: [],
|
||||
error: 'Invalid index',
|
||||
total: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it('returns no result when the event index is beyond the rundown', () => {
|
||||
expect(searchByIndex([makeEvent('event')], '2')).toStrictEqual({ results: [], error: null, total: 0 });
|
||||
});
|
||||
});
|
||||
@@ -1,239 +1,259 @@
|
||||
import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
CustomFields,
|
||||
EntryId,
|
||||
MaybeNumber,
|
||||
MaybeString,
|
||||
OntimeEntry,
|
||||
OntimeEvent,
|
||||
OntimeGroup,
|
||||
OntimeMilestone,
|
||||
isOntimeDelay,
|
||||
isOntimeEvent,
|
||||
} from 'ontime-types';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
import useCustomFields from '../../../common/hooks-query/useCustomFields';
|
||||
import { useFlatRundown } from '../../../common/hooks-query/useRundown';
|
||||
import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
|
||||
|
||||
const maxResults = 12;
|
||||
/** How many results we render, the total number of matches is reported separately */
|
||||
const maxResults = 50;
|
||||
/** Notes can hold a whole script, we only show enough to explain the match */
|
||||
const excerptPadding = 40;
|
||||
|
||||
type FilterableGroup = {
|
||||
type: SupportedEntry.Group;
|
||||
id: EntryId;
|
||||
index: number;
|
||||
title: string;
|
||||
colour: string;
|
||||
};
|
||||
const indexFilter = 'index';
|
||||
|
||||
type FilterableEvent = {
|
||||
type: SupportedEntry.Event;
|
||||
/** Everything except delays, which carry no text to search */
|
||||
type SearchableEntry = OntimeEvent | OntimeGroup | OntimeMilestone;
|
||||
|
||||
type FinderFilter = { key: string; label: string };
|
||||
|
||||
/**
|
||||
* Offered to the user as filter badges. Index is a positional lookup rather than a
|
||||
* text field, so it is handled separately from the fields a search runs over.
|
||||
*/
|
||||
const staticFilters: FinderFilter[] = [
|
||||
{ key: indexFilter, label: 'Index' },
|
||||
{ key: 'cue', label: 'Cue' },
|
||||
{ key: 'title', label: 'Title' },
|
||||
{ key: 'note', label: 'Note' },
|
||||
];
|
||||
|
||||
/** Why an entry matched, so the UI can show the user */
|
||||
type FinderMatch = { key: string; label: string; excerpt: string };
|
||||
|
||||
export type FinderResult = {
|
||||
id: EntryId;
|
||||
/** position in the flat rundown, which is how the rundown reveals an entry */
|
||||
index: number;
|
||||
eventIndex: number;
|
||||
/** 1-based position among events, null for groups and milestones */
|
||||
eventIndex: MaybeNumber;
|
||||
title: string;
|
||||
/** groups have no cue */
|
||||
cue: string;
|
||||
colour: string;
|
||||
parent: MaybeString;
|
||||
/** absent when the entry was found by index rather than by matching text */
|
||||
match: FinderMatch | null;
|
||||
};
|
||||
|
||||
type FilterableMilestone = {
|
||||
type: SupportedEntry.Milestone;
|
||||
id: EntryId;
|
||||
index: number;
|
||||
title: string;
|
||||
cue: string;
|
||||
colour: string;
|
||||
parent: MaybeString;
|
||||
};
|
||||
type SearchOutcome = { results: FinderResult[]; error: MaybeString; total: number };
|
||||
|
||||
type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
|
||||
const noResults: SearchOutcome = { results: [], error: null, total: 0 };
|
||||
|
||||
export default function useFinder() {
|
||||
/** Groups are the only searchable entry with neither a cue nor a parent */
|
||||
function toResult(entry: SearchableEntry, index: number, eventIndex: MaybeNumber, match: FinderMatch | null) {
|
||||
return {
|
||||
id: entry.id,
|
||||
index,
|
||||
eventIndex,
|
||||
title: entry.title,
|
||||
cue: 'cue' in entry ? entry.cue : '',
|
||||
colour: entry.colour,
|
||||
parent: 'parent' in entry ? entry.parent : null,
|
||||
match,
|
||||
} satisfies FinderResult;
|
||||
}
|
||||
|
||||
/** Shows enough of a long value for the user to see why it matched */
|
||||
function makeExcerpt(value: string, matchIndex: number, searchLength: number): string {
|
||||
const start = Math.max(0, matchIndex - excerptPadding);
|
||||
const end = Math.min(value.length, matchIndex + searchLength + excerptPadding);
|
||||
return `${start > 0 ? '…' : ''}${value.slice(start, end)}${end < value.length ? '…' : ''}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The first field of an entry to contain the search string, if any.
|
||||
* Fields are tried in the order we prefer to report a match.
|
||||
*/
|
||||
function findMatch(
|
||||
entry: SearchableEntry,
|
||||
customFields: CustomFields,
|
||||
filterKey: MaybeString,
|
||||
searchString: string,
|
||||
): FinderMatch | null {
|
||||
function check(key: string, label: string, value: string): FinderMatch | null {
|
||||
if (!value || (filterKey !== null && key !== filterKey)) {
|
||||
return null;
|
||||
}
|
||||
const matchIndex = value.toLowerCase().indexOf(searchString);
|
||||
if (matchIndex === -1) {
|
||||
return null;
|
||||
}
|
||||
return { key, label, excerpt: makeExcerpt(value, matchIndex, searchString.length) };
|
||||
}
|
||||
|
||||
// groups have no cue, the rest is common to every searchable entry
|
||||
const fromCue = 'cue' in entry ? check('cue', 'Cue', entry.cue) : null;
|
||||
const match = fromCue ?? check('title', 'Title', entry.title) ?? check('note', 'Note', entry.note);
|
||||
if (match !== null) {
|
||||
return match;
|
||||
}
|
||||
|
||||
// custom fields are named by the project, so these can only be reached generically
|
||||
for (const [key, value] of Object.entries(entry.custom)) {
|
||||
const definition = customFields[key];
|
||||
if (definition?.type !== 'text') {
|
||||
continue;
|
||||
}
|
||||
const custom = check(key, definition.label || key, value);
|
||||
if (custom) return custom;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits the raw search value into an optional field filter and the text to look for.
|
||||
* Both `cue 12` and `cue:12` are accepted so that typing agrees with the filter badges.
|
||||
*/
|
||||
export function parseQuery(searchValue: string, filters: FinderFilter[]) {
|
||||
for (const filter of filters) {
|
||||
// the search value is already lowercased, custom field keys are not
|
||||
const prefix = filter.key.toLowerCase();
|
||||
if (searchValue === prefix) {
|
||||
return { filterKey: filter.key, searchString: '' };
|
||||
}
|
||||
if (searchValue.startsWith(`${prefix} `) || searchValue.startsWith(`${prefix}:`)) {
|
||||
return { filterKey: filter.key, searchString: searchValue.slice(prefix.length + 1).trim() };
|
||||
}
|
||||
}
|
||||
return { filterKey: null, searchString: searchValue };
|
||||
}
|
||||
|
||||
/** Finds the single event at a 1-based position in the rundown */
|
||||
export function searchByIndex(data: OntimeEntry[], indexString: string): SearchOutcome {
|
||||
const target = Number(indexString);
|
||||
if (isNaN(target) || target < 1) {
|
||||
return { ...noResults, error: 'Invalid index' };
|
||||
}
|
||||
|
||||
let eventIndex = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const entry = data[i];
|
||||
if (!isOntimeEvent(entry)) {
|
||||
continue;
|
||||
}
|
||||
eventIndex++;
|
||||
if (eventIndex === target) {
|
||||
return { results: [toResult(entry, i, eventIndex, null)], error: null, total: 1 };
|
||||
}
|
||||
}
|
||||
|
||||
return noResults;
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches entries on a single field when one is selected, otherwise on every text field.
|
||||
* Results keep rundown order, which keeps them predictable during a show.
|
||||
*/
|
||||
export function searchByText(
|
||||
data: OntimeEntry[],
|
||||
customFields: CustomFields,
|
||||
filterKey: MaybeString,
|
||||
searchString: string,
|
||||
): SearchOutcome {
|
||||
const results: FinderResult[] = [];
|
||||
let total = 0;
|
||||
// indexes exposed to the UI are 1-based
|
||||
let eventIndex = 0;
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const entry = data[i];
|
||||
if (isOntimeDelay(entry)) {
|
||||
continue;
|
||||
}
|
||||
const isEvent = isOntimeEvent(entry);
|
||||
if (isEvent) {
|
||||
eventIndex++;
|
||||
}
|
||||
|
||||
const match = findMatch(entry, customFields, filterKey, searchString);
|
||||
if (match === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
total++;
|
||||
if (results.length < maxResults) {
|
||||
results.push(toResult(entry, i, isEvent ? eventIndex : null, match));
|
||||
}
|
||||
}
|
||||
|
||||
return { results, error: null, total };
|
||||
}
|
||||
|
||||
/**
|
||||
* @param searchValue - the text the user is looking for
|
||||
* @param activeFilter - a field selected from the filter badges, if any
|
||||
*/
|
||||
export default function useFinder(searchValue: string, activeFilter: MaybeString) {
|
||||
const { data, rundownId } = useFlatRundown();
|
||||
const [results, setResults] = useState<FilterableEntry[]>([]);
|
||||
const [error, setError] = useState<MaybeString>(null);
|
||||
const lastSearchString = useRef('');
|
||||
const { data: customFields } = useCustomFields();
|
||||
|
||||
const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
|
||||
|
||||
/** Filters the rundown to a given evaluation */
|
||||
const find = useCallback(
|
||||
(event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!data || data.length === 0) {
|
||||
setError('No data');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
/** The filters offered to the user: the fixed fields plus whatever the project defines */
|
||||
const filters = useMemo<FinderFilter[]>(() => {
|
||||
const customFilters = Object.entries(customFields)
|
||||
.filter(([_key, field]) => field.type === 'text')
|
||||
.map(([key, field]) => ({ key, label: field.label || key }));
|
||||
return [...staticFilters, ...customFilters];
|
||||
}, [customFields]);
|
||||
|
||||
if (event.target.value === '') {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
const { results, error, total, appliedFilter } = useMemo(() => {
|
||||
if (data.length === 0) {
|
||||
return { ...noResults, error: 'No data', appliedFilter: activeFilter };
|
||||
}
|
||||
|
||||
const searchValue = event.target.value.toLowerCase();
|
||||
lastSearchString.current = searchValue;
|
||||
const normalised = searchValue.trim().toLowerCase();
|
||||
if (normalised === '') {
|
||||
return { ...noResults, appliedFilter: activeFilter };
|
||||
}
|
||||
|
||||
if (searchValue.startsWith('index ')) {
|
||||
const searchString = searchValue.slice('index '.length).trim();
|
||||
const { results, error } = searchByIndex(searchString);
|
||||
setResults(results);
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* A selected badge wins, but typing a keyword still works for anyone who knows them,
|
||||
* and lights up the matching badge rather than being silently ignored.
|
||||
*/
|
||||
const { filterKey, searchString } = activeFilter
|
||||
? { filterKey: activeFilter, searchString: normalised }
|
||||
: parseQuery(normalised, filters);
|
||||
|
||||
if (searchValue.startsWith('cue ')) {
|
||||
const searchString = searchValue.slice('cue '.length).trim();
|
||||
const { results, error } = searchByCue(searchString);
|
||||
setResults(results);
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
|
||||
const { results, error } = searchByTitle(searchString);
|
||||
setResults(results);
|
||||
setError(error);
|
||||
|
||||
/** Returns a single item with a matching index */
|
||||
function searchByIndex(searchString: string) {
|
||||
const searchIndex = Number(searchString);
|
||||
if (isNaN(searchIndex) || searchIndex < 1) {
|
||||
return { results: [], error: 'Invalid index' };
|
||||
}
|
||||
|
||||
if (searchIndex > data.length) {
|
||||
return { results: [], error: null };
|
||||
}
|
||||
|
||||
// indexes exposed to the UI are 1-based
|
||||
let eventIndex = 1;
|
||||
const results: FilterableEvent[] = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const event = data[i];
|
||||
if (isOntimeEvent(event)) {
|
||||
if (eventIndex === searchIndex) {
|
||||
results.push({
|
||||
type: SupportedEntry.Event,
|
||||
id: event.id,
|
||||
index: i,
|
||||
eventIndex,
|
||||
title: event.title,
|
||||
cue: event.cue,
|
||||
colour: event.colour,
|
||||
parent: event.parent,
|
||||
} satisfies FilterableEvent);
|
||||
break;
|
||||
}
|
||||
eventIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
return { results, error: null };
|
||||
}
|
||||
|
||||
/** Returns maxResults of OntimeEvents that match the cue field */
|
||||
function searchByCue(searchString: string) {
|
||||
// indexes exposed to the UI are 1-based
|
||||
let eventIndex = 1;
|
||||
// limit amount of results we show
|
||||
let remaining = maxResults;
|
||||
const results: FilterableEvent[] = [];
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (remaining <= 0) {
|
||||
break;
|
||||
}
|
||||
const event = data[i];
|
||||
if (isOntimeEvent(event)) {
|
||||
if (event.cue.toLowerCase().includes(searchString)) {
|
||||
remaining--;
|
||||
results.push({
|
||||
type: SupportedEntry.Event,
|
||||
id: event.id,
|
||||
index: i,
|
||||
eventIndex,
|
||||
title: event.title,
|
||||
cue: event.cue,
|
||||
colour: event.colour,
|
||||
parent: event.parent,
|
||||
} satisfies FilterableEvent);
|
||||
}
|
||||
eventIndex++;
|
||||
}
|
||||
}
|
||||
return { results, error: null };
|
||||
}
|
||||
|
||||
/** Returns maxResults of OntimeEvents that match the title field*/
|
||||
function searchByTitle(searchString: string) {
|
||||
// indexes exposed to the UI are 1-based
|
||||
let eventIndex = 1;
|
||||
// limit amount of results we show
|
||||
let remaining = maxResults;
|
||||
const results: FilterableEntry[] = [];
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (remaining <= 0) {
|
||||
break;
|
||||
}
|
||||
|
||||
const entry = data[i];
|
||||
if (isOntimeEvent(entry)) {
|
||||
if (entry.title.toLowerCase().includes(searchString)) {
|
||||
remaining--;
|
||||
results.push({
|
||||
type: SupportedEntry.Event,
|
||||
id: entry.id,
|
||||
index: i,
|
||||
eventIndex,
|
||||
title: entry.title,
|
||||
cue: entry.cue,
|
||||
colour: entry.colour,
|
||||
parent: entry.parent,
|
||||
} satisfies FilterableEvent);
|
||||
}
|
||||
eventIndex++;
|
||||
} else if (isOntimeGroup(entry)) {
|
||||
if (entry.title.toLowerCase().includes(searchString)) {
|
||||
remaining--;
|
||||
results.push({
|
||||
type: SupportedEntry.Group,
|
||||
id: entry.id,
|
||||
index: i,
|
||||
title: entry.title,
|
||||
colour: entry.colour,
|
||||
} satisfies FilterableGroup);
|
||||
}
|
||||
} else if (isOntimeMilestone(entry)) {
|
||||
if (entry.title.toLowerCase().includes(searchString)) {
|
||||
remaining--;
|
||||
results.push({
|
||||
type: SupportedEntry.Milestone,
|
||||
id: entry.id,
|
||||
index: i,
|
||||
title: entry.title,
|
||||
cue: entry.cue,
|
||||
colour: entry.colour,
|
||||
parent: entry.parent,
|
||||
} satisfies FilterableMilestone);
|
||||
}
|
||||
}
|
||||
}
|
||||
return { results, error: null };
|
||||
}
|
||||
},
|
||||
[data],
|
||||
);
|
||||
if (filterKey === indexFilter) {
|
||||
return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
|
||||
}
|
||||
if (searchString === '') {
|
||||
// a filter is selected, but there is nothing to match on yet
|
||||
return { ...noResults, appliedFilter: filterKey };
|
||||
}
|
||||
return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
|
||||
}, [data, customFields, filters, searchValue, activeFilter]);
|
||||
|
||||
const select = useCallback(
|
||||
(selectedEvent: FilterableEntry) => {
|
||||
selectAndRevealEntry({
|
||||
id: selectedEvent.id,
|
||||
index: selectedEvent.index,
|
||||
parent: 'parent' in selectedEvent ? selectedEvent.parent : null,
|
||||
});
|
||||
(result: FinderResult) => {
|
||||
selectAndRevealEntry({ id: result.id, index: result.index, parent: result.parent });
|
||||
},
|
||||
[selectAndRevealEntry],
|
||||
);
|
||||
|
||||
/** clear results when source data changes */
|
||||
useEffect(() => {
|
||||
setResults([]);
|
||||
setError(null);
|
||||
// fake a submit event to re-run the search
|
||||
if (lastSearchString.current) {
|
||||
find({ target: { value: lastSearchString.current } } as ChangeEvent<HTMLInputElement>);
|
||||
}
|
||||
}, [data, find]);
|
||||
|
||||
return { find, select, results, error };
|
||||
return { select, results, error, total, filters, appliedFilter };
|
||||
}
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
@use '@/theme/viewerDefs' as *;
|
||||
|
||||
.teleprompter {
|
||||
--tp-flip-x: 1;
|
||||
--tp-flip-y: 1;
|
||||
|
||||
/* Keep shared stage-screen settings usable on smaller clients. */
|
||||
--tp-font-size: min(var(--tp-configured-font-size), 8vw);
|
||||
|
||||
position: relative;
|
||||
height: 100dvh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
font-family: var(--font-family-override, $viewer-font-family);
|
||||
background: var(--background-color-override, #000000);
|
||||
color: var(--color-override, #ffffff);
|
||||
|
||||
transform: scale(var(--tp-flip-x), var(--tp-flip-y));
|
||||
transform-origin: center center;
|
||||
|
||||
&--flip-h {
|
||||
--tp-flip-x: -1;
|
||||
}
|
||||
|
||||
&--flip-v {
|
||||
--tp-flip-y: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.teleprompter__scroller {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
/* The animation loop is the only writer of scrollTop. */
|
||||
overflow-anchor: none;
|
||||
scroll-behavior: auto;
|
||||
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.teleprompter__content {
|
||||
width: var(--tp-text-width);
|
||||
margin-inline: auto;
|
||||
|
||||
font-size: var(--tp-font-size);
|
||||
line-height: var(--tp-line-height);
|
||||
|
||||
/* Percent padding resolves against width, so use viewport-height units. */
|
||||
padding-top: calc(var(--tp-reading-line) * 1dvh);
|
||||
padding-bottom: calc(100dvh - var(--tp-reading-line) * 1dvh);
|
||||
}
|
||||
|
||||
.teleprompter__block {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&[data-loaded] .teleprompter__heading {
|
||||
color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
.teleprompter__group {
|
||||
font-size: 0.34em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: $viewer-label-color;
|
||||
margin-bottom: 0.35em;
|
||||
}
|
||||
|
||||
.teleprompter__heading {
|
||||
font-size: 0.38em;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $viewer-secondary-color;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.teleprompter__body {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.teleprompter__dim {
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: calc(var(--tp-reading-line) * 1%);
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.teleprompter__reading-line {
|
||||
position: absolute;
|
||||
top: calc(var(--tp-reading-line) * 1%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: var(--tp-text-width);
|
||||
margin-inline: auto;
|
||||
height: calc(var(--tp-font-size) * var(--tp-line-height));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.teleprompter__reading-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $accent-color;
|
||||
clip-path: polygon(0 0, 100% 50%, 0 100%);
|
||||
font-size: var(--tp-font-size);
|
||||
|
||||
--tp-gutter: max(0px, calc((100vw - 100%) / 2));
|
||||
width: min(1.2em, calc(var(--tp-gutter) * 0.6));
|
||||
right: calc(100% + var(--tp-gutter) * 0.2);
|
||||
}
|
||||
|
||||
.teleprompter__controls {
|
||||
position: absolute;
|
||||
bottom: min(2vh, 16px);
|
||||
left: 50%;
|
||||
|
||||
/* Cancel the view flip so controls remain readable to the operator. */
|
||||
transform: translateX(-50%) scale(var(--tp-flip-x), var(--tp-flip-y));
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(1vh, 8px);
|
||||
padding: min(1vh, 8px) clamp(8px, 1vw, 16px);
|
||||
|
||||
background: rgba(white, 8%);
|
||||
border-radius: $element-border-radius;
|
||||
backdrop-filter: blur(6px);
|
||||
|
||||
opacity: 1;
|
||||
transition: opacity $viewer-transition-time;
|
||||
|
||||
&--idle {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.teleprompter__speed {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.2em;
|
||||
min-width: 4em;
|
||||
justify-content: center;
|
||||
font-size: clamp(14px, 1.4vw, 22px);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.teleprompter__speed-unit {
|
||||
font-size: 0.6em;
|
||||
color: $viewer-label-color;
|
||||
}
|
||||
|
||||
.teleprompter__help {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.teleprompter__help-card {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: min(92vw, 32rem);
|
||||
max-height: 85dvh;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
|
||||
background: $viewer-background-color;
|
||||
color: $viewer-color;
|
||||
border-radius: $element-border-radius;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.teleprompter__help-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.teleprompter__help-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.teleprompter__help-groups {
|
||||
--shortcut-title-color: #{$viewer-label-color};
|
||||
--shortcut-label-color: #{$viewer-secondary-color};
|
||||
--shortcut-separator-color: #{$viewer-label-color};
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
import { OntimeView } from 'ontime-types';
|
||||
import { type CSSProperties, useState } from 'react';
|
||||
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useSelectedEventId } from '../../common/hooks/useSocket';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
import { useViewOptionsStore } from '../../common/stores/viewOptions';
|
||||
import { cx } from '../../common/utils/styleUtils';
|
||||
import Loader from '../common/loader/Loader';
|
||||
import ControlOverlay from './control-overlay/ControlOverlay';
|
||||
import HelpOverlay from './help-overlay/HelpOverlay';
|
||||
import ScriptBlockView from './script-block/ScriptBlock';
|
||||
import { defaults, getTeleprompterOptions, useTeleprompterOptions } from './teleprompter.options';
|
||||
import { stepFontSize } from './teleprompter.scroll';
|
||||
import { buildScript, composeFlip } from './teleprompter.utils';
|
||||
import { useSyncTeleprompterParams } from './useSyncTeleprompterParams';
|
||||
import { useTeleprompterControls } from './useTeleprompterControls';
|
||||
import { type TeleprompterData, useTeleprompterData } from './useTeleprompterData';
|
||||
import { useTeleprompterScroll } from './useTeleprompterScroll';
|
||||
|
||||
import './Teleprompter.scss';
|
||||
|
||||
export default function TeleprompterLoader() {
|
||||
const { data, status } = useTeleprompterData();
|
||||
|
||||
useWindowTitle('Teleprompter');
|
||||
|
||||
if (status === 'pending') {
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
if (status === 'error') {
|
||||
return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
|
||||
}
|
||||
|
||||
return <Teleprompter {...data} />;
|
||||
}
|
||||
|
||||
function Teleprompter({ rundown, rundownMetadata, customFields }: TeleprompterData) {
|
||||
'use memo';
|
||||
|
||||
const options = useTeleprompterOptions();
|
||||
const selectedEventId = useSelectedEventId();
|
||||
const isMirrored = useViewOptionsStore((state) => state.mirror);
|
||||
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
|
||||
const fromParams = { flipH: options.flipH, flipV: options.flipV, fontSize: options.fontSize };
|
||||
const paramsKey = `${fromParams.flipH}|${fromParams.flipV}|${fromParams.fontSize}`;
|
||||
|
||||
const [live, setLive] = useState(fromParams);
|
||||
const [seededFrom, setSeededFrom] = useState(paramsKey);
|
||||
// Reset live controls before commit when the URL configuration changes.
|
||||
if (seededFrom !== paramsKey) {
|
||||
setSeededFrom(paramsKey);
|
||||
setLive(fromParams);
|
||||
}
|
||||
|
||||
const viewOptions = getTeleprompterOptions(customFields);
|
||||
|
||||
const blocks = buildScript(rundown, rundownMetadata, customFields, {
|
||||
scriptSource: options.scriptSource,
|
||||
heading: options.heading,
|
||||
hideEmpty: options.hideEmpty,
|
||||
showGroups: options.showGroups,
|
||||
});
|
||||
|
||||
const {
|
||||
scrollerRef,
|
||||
contentRef,
|
||||
registerBlock,
|
||||
handleUserScroll,
|
||||
controller,
|
||||
isRunning,
|
||||
speed,
|
||||
followLocked,
|
||||
atEnd,
|
||||
} = useTeleprompterScroll({
|
||||
initialSpeed: options.speed,
|
||||
followLoaded: options.followLoaded,
|
||||
selectedEventId,
|
||||
readingLinePos: options.readingLinePos,
|
||||
blocks,
|
||||
});
|
||||
|
||||
const handleFlip = (axis: 'h' | 'v') =>
|
||||
setLive((current) => {
|
||||
const key = axis === 'h' ? 'flipH' : 'flipV';
|
||||
return { ...current, [key]: !current[key] };
|
||||
});
|
||||
|
||||
const handleFontSize = (steps: number) =>
|
||||
setLive((current) => ({ ...current, fontSize: stepFontSize(current.fontSize, steps) }));
|
||||
|
||||
const handleResetFontSize = () => setLive((current) => ({ ...current, fontSize: defaults.fontSize }));
|
||||
const handleToggleHelp = () => setShowHelp((current) => !current);
|
||||
|
||||
useSyncTeleprompterParams({ speed, fontSize: live.fontSize, flipH: live.flipH, flipV: live.flipV });
|
||||
|
||||
useTeleprompterControls({
|
||||
controller,
|
||||
isHelpOpen: showHelp,
|
||||
onFlip: handleFlip,
|
||||
onFontSize: handleFontSize,
|
||||
onResetFontSize: handleResetFontSize,
|
||||
onToggleHelp: handleToggleHelp,
|
||||
});
|
||||
|
||||
const hasScriptSource = options.scriptSource !== 'none';
|
||||
|
||||
const effectiveFlip = composeFlip(live.flipH, live.flipV, isMirrored);
|
||||
|
||||
const viewStyles = {
|
||||
'--tp-configured-font-size': `${live.fontSize}px`,
|
||||
'--tp-line-height': options.lineHeight,
|
||||
'--tp-text-width': `${options.textWidth}%`,
|
||||
'--tp-reading-line': options.readingLinePos,
|
||||
} as CSSProperties;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx([
|
||||
'teleprompter',
|
||||
effectiveFlip.flipH && 'teleprompter--flip-h',
|
||||
effectiveFlip.flipV && 'teleprompter--flip-v',
|
||||
])}
|
||||
style={viewStyles}
|
||||
data-testid='teleprompter-view'
|
||||
>
|
||||
<ViewParamsEditor target={OntimeView.Teleprompter} viewOptions={viewOptions} />
|
||||
|
||||
{!hasScriptSource ? (
|
||||
<EmptyPage text='Select which field holds the script in the view options' />
|
||||
) : blocks.length === 0 ? (
|
||||
<EmptyPage text='There is no script text in the selected field' />
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className='teleprompter__scroller'
|
||||
data-testid='teleprompter-scroller'
|
||||
ref={scrollerRef}
|
||||
onWheel={handleUserScroll}
|
||||
onTouchMove={handleUserScroll}
|
||||
onPointerDown={handleUserScroll}
|
||||
>
|
||||
<div className='teleprompter__content' ref={contentRef}>
|
||||
{blocks.map((block) => (
|
||||
<ScriptBlockView key={block.id} block={block} registerRef={registerBlock} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='teleprompter__dim' />
|
||||
{options.readingLine && (
|
||||
<div className='teleprompter__reading-line'>
|
||||
<span className='teleprompter__reading-marker' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ControlOverlay
|
||||
isRunning={isRunning}
|
||||
speed={speed}
|
||||
canReengageFollow={followLocked && options.followLoaded}
|
||||
atEnd={atEnd}
|
||||
controller={controller}
|
||||
onToggleHelp={handleToggleHelp}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<HelpOverlay isOpen={showHelp} onClose={handleToggleHelp} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import { resolveTeleprompterAction, type TeleprompterKeyEvent } from '../teleprompter.keymap';
|
||||
import { SPEED_STEP, SPEED_STEP_COARSE } from '../teleprompter.scroll';
|
||||
|
||||
function makeEvent(overrides: Partial<TeleprompterKeyEvent>): TeleprompterKeyEvent {
|
||||
return {
|
||||
code: '',
|
||||
key: '',
|
||||
shiftKey: false,
|
||||
ctrlKey: false,
|
||||
metaKey: false,
|
||||
altKey: false,
|
||||
repeat: false,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe('resolveTeleprompterAction()', () => {
|
||||
test('space toggles playback', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Space' }))).toEqual({ type: 'togglePlay' });
|
||||
});
|
||||
|
||||
test('ignores a repeating space', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Space', repeat: true }))).toBeNull();
|
||||
});
|
||||
|
||||
test('vertical arrows nudge by a line', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowDown' }))).toEqual({ type: 'nudge', lines: 1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowUp' }))).toEqual({ type: 'nudge', lines: -1 });
|
||||
});
|
||||
|
||||
test('a repeating arrow still nudges, so the key can be held', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowDown', repeat: true }))).toEqual({
|
||||
type: 'nudge',
|
||||
lines: 1,
|
||||
});
|
||||
});
|
||||
|
||||
test('page keys jump a screen', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'PageDown' }))).toEqual({ type: 'page', direction: 1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'PageUp' }))).toEqual({ type: 'page', direction: -1 });
|
||||
});
|
||||
|
||||
test('horizontal arrows change speed', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight' }))).toEqual({ type: 'speed', delta: SPEED_STEP });
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowLeft' }))).toEqual({ type: 'speed', delta: -SPEED_STEP });
|
||||
});
|
||||
|
||||
test('shift makes the speed step coarse', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight', shiftKey: true }))).toEqual({
|
||||
type: 'speed',
|
||||
delta: SPEED_STEP_COARSE,
|
||||
});
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowLeft', shiftKey: true }))).toEqual({
|
||||
type: 'speed',
|
||||
delta: -SPEED_STEP_COARSE,
|
||||
});
|
||||
});
|
||||
|
||||
test('home rewinds and escape rewinds and stops', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Home' }))).toEqual({ type: 'rewind' });
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Escape' }))).toEqual({ type: 'rewindAndPause' });
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'End' }))).toEqual({ type: 'jumpToEnd' });
|
||||
});
|
||||
|
||||
test('f flips, shift+f flips the other axis', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: 'f' }))).toEqual({ type: 'flip', axis: 'h' });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: 'F', shiftKey: true }))).toEqual({ type: 'flip', axis: 'v' });
|
||||
});
|
||||
|
||||
test('changes and resets the font size', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '+' }))).toEqual({ type: 'fontSize', steps: 1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '=' }))).toEqual({ type: 'fontSize', steps: 1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '-' }))).toEqual({ type: 'fontSize', steps: -1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '_' }))).toEqual({ type: 'fontSize', steps: -1 });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '0' }))).toEqual({ type: 'resetFontSize' });
|
||||
});
|
||||
|
||||
test('l re-engages the follow and ? shows the help', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: 'l' }))).toEqual({ type: 'reengageFollow' });
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: '?', shiftKey: true }))).toEqual({ type: 'toggleHelp' });
|
||||
});
|
||||
|
||||
test('never shadows a shortcut which carries a modifier', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ key: ',', metaKey: true }))).toBeNull();
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Space', ctrlKey: true }))).toBeNull();
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowRight', altKey: true }))).toBeNull();
|
||||
});
|
||||
|
||||
test('ignores keys it does not bind', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'KeyQ', key: 'q' }))).toBeNull();
|
||||
});
|
||||
|
||||
test('leaves Enter alone, so a focused transport button can still be pressed', () => {
|
||||
expect(resolveTeleprompterAction(makeEvent({ code: 'Enter', key: 'Enter' }))).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,109 +0,0 @@
|
||||
import { getOptionsFromParams, getTeleprompterOptions } from '../teleprompter.options';
|
||||
import { DEFAULT_SPEED, MAX_SPEED, MIN_SPEED } from '../teleprompter.scroll';
|
||||
|
||||
describe('getOptionsFromParams()', () => {
|
||||
test('provides sensible defaults with no params', () => {
|
||||
const options = getOptionsFromParams(new URLSearchParams());
|
||||
|
||||
expect(options).toMatchObject({
|
||||
scriptSource: 'none',
|
||||
heading: 'title',
|
||||
hideEmpty: true,
|
||||
showGroups: true,
|
||||
speed: DEFAULT_SPEED,
|
||||
followLoaded: true,
|
||||
fontSize: 52,
|
||||
lineHeight: 1.3,
|
||||
textWidth: 80,
|
||||
readingLine: true,
|
||||
readingLinePos: 25,
|
||||
flipH: false,
|
||||
flipV: false,
|
||||
});
|
||||
});
|
||||
|
||||
test('reads the script source verbatim so it can be handed to getPropertyValue', () => {
|
||||
const options = getOptionsFromParams(new URLSearchParams('script=custom-prompter'));
|
||||
expect(options.scriptSource).toBe('custom-prompter');
|
||||
});
|
||||
|
||||
test('booleans which default to true can be turned off', () => {
|
||||
const options = getOptionsFromParams(
|
||||
new URLSearchParams('hideEmpty=false&showGroups=false&followLoaded=false&readingLine=false'),
|
||||
);
|
||||
|
||||
expect(options).toMatchObject({
|
||||
hideEmpty: false,
|
||||
showGroups: false,
|
||||
followLoaded: false,
|
||||
readingLine: false,
|
||||
});
|
||||
});
|
||||
|
||||
test('booleans which default to false can be turned on', () => {
|
||||
const options = getOptionsFromParams(new URLSearchParams('flipH=true&flipV=true'));
|
||||
|
||||
expect(options).toMatchObject({
|
||||
flipH: true,
|
||||
flipV: true,
|
||||
});
|
||||
});
|
||||
|
||||
test('clamps the speed to the usable range', () => {
|
||||
expect(getOptionsFromParams(new URLSearchParams('speed=1000')).speed).toBe(MAX_SPEED);
|
||||
expect(getOptionsFromParams(new URLSearchParams('speed=0')).speed).toBe(MIN_SPEED);
|
||||
});
|
||||
|
||||
test('falls back to the default for a non numeric value', () => {
|
||||
expect(getOptionsFromParams(new URLSearchParams('speed=fast')).speed).toBe(DEFAULT_SPEED);
|
||||
expect(getOptionsFromParams(new URLSearchParams('speed=')).speed).toBe(DEFAULT_SPEED);
|
||||
expect(getOptionsFromParams(new URLSearchParams('fontSize=huge')).fontSize).toBe(52);
|
||||
});
|
||||
|
||||
test('rejects an unknown value for an enumerated option', () => {
|
||||
expect(getOptionsFromParams(new URLSearchParams('heading=banana')).heading).toBe('title');
|
||||
});
|
||||
|
||||
test('preset values take precedence over the search params', () => {
|
||||
const options = getOptionsFromParams(
|
||||
new URLSearchParams('speed=10&script=custom-a'),
|
||||
new URLSearchParams('speed=20&script=custom-b'),
|
||||
);
|
||||
|
||||
expect(options.speed).toBe(20);
|
||||
expect(options.scriptSource).toBe('custom-b');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getTeleprompterOptions()', () => {
|
||||
test('every declared default is what parsing an empty query produces', () => {
|
||||
const parsed = getOptionsFromParams(new URLSearchParams()) as Record<string, unknown>;
|
||||
const parsedByParamId: Record<string, unknown> = { ...parsed, script: parsed.scriptSource };
|
||||
|
||||
const declared = getTeleprompterOptions({}).flatMap((section) => section.options);
|
||||
expect(declared.length).toBeGreaterThan(0);
|
||||
|
||||
for (const field of declared) {
|
||||
if (!('defaultValue' in field) || field.defaultValue === undefined) continue;
|
||||
const expected = field.defaultValue;
|
||||
expect({ id: field.id, value: parsedByParamId[field.id] }).toEqual({ id: field.id, value: expected });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('option value round trip', () => {
|
||||
test('every value the editor offers survives parsing', () => {
|
||||
const selects = getTeleprompterOptions({})
|
||||
.flatMap((section) => section.options)
|
||||
.filter((field) => field.type === 'option' && field.id !== 'script');
|
||||
|
||||
expect(selects.length).toBeGreaterThan(0);
|
||||
|
||||
for (const field of selects) {
|
||||
for (const { value } of field.values) {
|
||||
const parsed = getOptionsFromParams(new URLSearchParams(`${field.id}=${value}`)) as Record<string, unknown>;
|
||||
expect({ id: field.id, value, parsed: parsed[field.id] }).toEqual({ id: field.id, value, parsed: value });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,139 +0,0 @@
|
||||
import {
|
||||
advance,
|
||||
clampSpeed,
|
||||
easeCatchUp,
|
||||
frameDeltaSeconds,
|
||||
linesPerMinuteToPxPerSecond,
|
||||
MAX_FONT_SIZE,
|
||||
MAX_FRAME_DELTA_MS,
|
||||
MAX_SPEED,
|
||||
MIN_FONT_SIZE,
|
||||
MIN_SPEED,
|
||||
stepFontSize,
|
||||
} from '../teleprompter.scroll';
|
||||
|
||||
describe('linesPerMinuteToPxPerSecond()', () => {
|
||||
test('converts a read rate into a pixel rate', () => {
|
||||
// 30 lines a minute over a 64px line is half a line a second
|
||||
expect(linesPerMinuteToPxPerSecond(30, 64)).toBe(32);
|
||||
});
|
||||
});
|
||||
|
||||
describe('stepFontSize()', () => {
|
||||
test('steps by a ratio, so a press is the same visual change at any size', () => {
|
||||
// a fixed pixel step would be a big jump at 20px and imperceptible at 200px
|
||||
expect(stepFontSize(100, 1)).toBe(110);
|
||||
expect(stepFontSize(20, 1)).toBe(22);
|
||||
});
|
||||
|
||||
test('shrinking undoes growing', () => {
|
||||
expect(stepFontSize(stepFontSize(50, 1), -1)).toBe(50);
|
||||
});
|
||||
|
||||
test('stays inside the range the option accepts', () => {
|
||||
expect(stepFontSize(MAX_FONT_SIZE, 5)).toBe(MAX_FONT_SIZE);
|
||||
expect(stepFontSize(MIN_FONT_SIZE, -5)).toBe(MIN_FONT_SIZE);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clampSpeed()', () => {
|
||||
test('bounds the speed to the usable range', () => {
|
||||
expect(clampSpeed(MIN_SPEED - 10)).toBe(MIN_SPEED);
|
||||
expect(clampSpeed(MAX_SPEED + 10)).toBe(MAX_SPEED);
|
||||
expect(clampSpeed(30)).toBe(30);
|
||||
});
|
||||
|
||||
test('falls back to the minimum for a non number, rather than stalling at zero', () => {
|
||||
expect(clampSpeed(Number.NaN)).toBe(MIN_SPEED);
|
||||
});
|
||||
});
|
||||
|
||||
describe('frameDeltaSeconds()', () => {
|
||||
test('clamps a long gap so returning to a background tab cannot teleport the script', () => {
|
||||
// requestAnimationFrame is suspended while hidden, so the first timestamp
|
||||
// back can be minutes stale
|
||||
expect(frameDeltaSeconds(1000 / 60)).toBeCloseTo(1 / 60, 6);
|
||||
expect(frameDeltaSeconds(60_000)).toBe(MAX_FRAME_DELTA_MS / 1000);
|
||||
});
|
||||
|
||||
test('ignores nonsense deltas', () => {
|
||||
expect(frameDeltaSeconds(-5)).toBe(0);
|
||||
expect(frameDeltaSeconds(Number.NaN)).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('advance()', () => {
|
||||
test('accumulates sub-pixel movement without losing any to rounding', () => {
|
||||
// 32px/s sampled at 60fps is 0.53px a frame: rounding each frame would stall
|
||||
const pxPerSecond = 32;
|
||||
const frame = 1 / 60;
|
||||
let position = 0;
|
||||
|
||||
for (let i = 0; i < 100; i += 1) {
|
||||
position = advance(position, pxPerSecond, frame, 10_000).position;
|
||||
}
|
||||
|
||||
expect(position).toBeCloseTo((pxPerSecond * 100) / 60, 5);
|
||||
});
|
||||
|
||||
test('reports the end of the script once the bottom is reached', () => {
|
||||
expect(advance(499, 100, 1, 500).atEnd).toBe(true);
|
||||
expect(advance(100, 100, 1, 500).atEnd).toBe(false);
|
||||
});
|
||||
|
||||
test('reports the end without bounding the position, which the caller owns', () => {
|
||||
// the loop has to bound the position anyway, for nudges and for a document
|
||||
// which shrank, so this does not do it a second time
|
||||
expect(advance(490, 100, 1, 500)).toEqual({ position: 590, atEnd: true });
|
||||
});
|
||||
|
||||
test('never reports the end for a document which does not overflow', () => {
|
||||
// it may simply not have been measured yet, and stopping playback on an
|
||||
// unmeasured document would look like the prompter refusing to run
|
||||
expect(advance(0, 100, 1, 0).atEnd).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('easeCatchUp()', () => {
|
||||
test('approaches the target monotonically from either side', () => {
|
||||
let fromAbove = 500;
|
||||
let fromBelow = 0;
|
||||
let previousAbove = 501;
|
||||
let previousBelow = -1;
|
||||
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
fromBelow = easeCatchUp(fromBelow, 500, 1 / 60);
|
||||
fromAbove = easeCatchUp(fromAbove, 0, 1 / 60);
|
||||
|
||||
expect(fromBelow).toBeGreaterThan(previousBelow);
|
||||
expect(fromBelow).toBeLessThanOrEqual(500);
|
||||
expect(fromAbove).toBeLessThan(previousAbove);
|
||||
expect(fromAbove).toBeGreaterThanOrEqual(0);
|
||||
|
||||
previousBelow = fromBelow;
|
||||
previousAbove = fromAbove;
|
||||
}
|
||||
});
|
||||
|
||||
test('settles exactly on the target instead of creeping forever', () => {
|
||||
let position = 0;
|
||||
for (let i = 0; i < 300; i += 1) {
|
||||
position = easeCatchUp(position, 500, 1 / 60);
|
||||
}
|
||||
expect(position).toBe(500);
|
||||
});
|
||||
|
||||
test('is framerate independent, so a jump takes the same time on any display', () => {
|
||||
let atSixty = 0;
|
||||
for (let i = 0; i < 60; i += 1) {
|
||||
atSixty = easeCatchUp(atSixty, 1000, 1 / 60);
|
||||
}
|
||||
|
||||
let atThirty = 0;
|
||||
for (let i = 0; i < 30; i += 1) {
|
||||
atThirty = easeCatchUp(atThirty, 1000, 1 / 30);
|
||||
}
|
||||
|
||||
expect(atSixty).toBeCloseTo(atThirty, 3);
|
||||
});
|
||||
});
|
||||
@@ -1,218 +0,0 @@
|
||||
import { type CustomFields, type OntimeEntry, type Rundown, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import type { RundownMetadata, RundownMetadataObject } from '../../../common/utils/rundownMetadata';
|
||||
import { buildScript, composeFlip } from '../teleprompter.utils';
|
||||
|
||||
function makeEvent(id: string, overrides: Partial<OntimeEntry> = {}): OntimeEntry {
|
||||
return {
|
||||
type: SupportedEntry.Event,
|
||||
id,
|
||||
cue: id.toUpperCase(),
|
||||
title: `Title ${id}`,
|
||||
note: `Note ${id}`,
|
||||
skip: false,
|
||||
custom: { script: `Script ${id}` },
|
||||
parent: null,
|
||||
...overrides,
|
||||
} as OntimeEntry;
|
||||
}
|
||||
|
||||
function makeGroup(id: string, title: string, entries: string[]): OntimeEntry {
|
||||
return { type: SupportedEntry.Group, id, title, entries } as OntimeEntry;
|
||||
}
|
||||
|
||||
function makeMetadata(overrides: Partial<RundownMetadata> = {}): RundownMetadata {
|
||||
return { isPast: false, isLoaded: false, groupId: null, ...overrides } as RundownMetadata;
|
||||
}
|
||||
|
||||
function makeRundown(entries: OntimeEntry[], flatOrder?: string[]): Rundown {
|
||||
return {
|
||||
id: 'default',
|
||||
title: 'test',
|
||||
order: flatOrder ?? entries.map((entry) => entry.id),
|
||||
flatOrder: flatOrder ?? entries.map((entry) => entry.id),
|
||||
entries: Object.fromEntries(entries.map((entry) => [entry.id, entry])),
|
||||
revision: 1,
|
||||
};
|
||||
}
|
||||
|
||||
const customFields: CustomFields = {
|
||||
script: { type: 'text', colour: '', label: 'Script' },
|
||||
poster: { type: 'image', colour: '', label: 'Poster' },
|
||||
};
|
||||
|
||||
const defaultOptions = {
|
||||
scriptSource: 'custom-script',
|
||||
heading: 'title' as const,
|
||||
hideEmpty: true,
|
||||
showGroups: true,
|
||||
};
|
||||
|
||||
function metadataFor(ids: string[], overrides: Record<string, Partial<RundownMetadata>> = {}): RundownMetadataObject {
|
||||
return Object.fromEntries(ids.map((id) => [id, makeMetadata(overrides[id])]));
|
||||
}
|
||||
|
||||
describe('buildScript()', () => {
|
||||
test('resolves the script from the selected custom field, in rundown order', () => {
|
||||
const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
|
||||
const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
|
||||
|
||||
expect(blocks).toHaveLength(2);
|
||||
expect(blocks.map((block) => block.id)).toEqual(['a', 'b']);
|
||||
expect(blocks[0].text).toBe('Script a');
|
||||
});
|
||||
|
||||
test('returns nothing when no script source is selected', () => {
|
||||
const rundown = makeRundown([makeEvent('a')]);
|
||||
expect(buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'none' })).toEqual(
|
||||
[],
|
||||
);
|
||||
});
|
||||
|
||||
test('refuses an image custom field, which the select filters but the URL does not', () => {
|
||||
const rundown = makeRundown([makeEvent('a', { custom: { poster: 'https://example.com/a.png' } })]);
|
||||
const blocks = buildScript(rundown, metadataFor(['a']), customFields, {
|
||||
...defaultOptions,
|
||||
scriptSource: 'custom-poster',
|
||||
});
|
||||
|
||||
expect(blocks).toEqual([]);
|
||||
});
|
||||
|
||||
test('reads the note and the title as script sources', () => {
|
||||
const rundown = makeRundown([makeEvent('a')]);
|
||||
expect(
|
||||
buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'note' })[0].text,
|
||||
).toBe('Note a');
|
||||
expect(
|
||||
buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'title' })[0].text,
|
||||
).toBe('Title a');
|
||||
});
|
||||
|
||||
test('skips entries which are not events', () => {
|
||||
const rundown = makeRundown([
|
||||
makeEvent('a'),
|
||||
{ type: SupportedEntry.Delay, id: 'd', duration: 10 } as OntimeEntry,
|
||||
{ type: SupportedEntry.Milestone, id: 'm', title: 'milestone' } as OntimeEntry,
|
||||
]);
|
||||
|
||||
const blocks = buildScript(rundown, metadataFor(['a', 'd', 'm']), customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.id)).toEqual(['a']);
|
||||
});
|
||||
|
||||
test('skips events flagged as skipped', () => {
|
||||
const rundown = makeRundown([makeEvent('a', { skip: true }), makeEvent('b')]);
|
||||
const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.id)).toEqual(['b']);
|
||||
});
|
||||
|
||||
test('hideEmpty drops events with no script text', () => {
|
||||
const rundown = makeRundown([makeEvent('a', { custom: { script: ' ' } }), makeEvent('b')]);
|
||||
|
||||
expect(buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions).map((b) => b.id)).toEqual(['b']);
|
||||
expect(
|
||||
buildScript(rundown, metadataFor(['a', 'b']), customFields, { ...defaultOptions, hideEmpty: false }).map(
|
||||
(b) => b.id,
|
||||
),
|
||||
).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
test('marks the block belonging to the loaded event', () => {
|
||||
const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
|
||||
const metadata = metadataFor(['a', 'b'], { b: { isLoaded: true } });
|
||||
|
||||
const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.isLoaded)).toEqual([false, true]);
|
||||
});
|
||||
|
||||
test('emits a group title once, on the first block of the group', () => {
|
||||
const rundown = makeRundown(
|
||||
[makeGroup('g', 'Morning session', ['a', 'b']), makeEvent('a'), makeEvent('b')],
|
||||
['g', 'a', 'b'],
|
||||
);
|
||||
const metadata = metadataFor(['g', 'a', 'b'], { a: { groupId: 'g' }, b: { groupId: 'g' } });
|
||||
|
||||
const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null]);
|
||||
});
|
||||
|
||||
test('emits each group title as the script moves between groups', () => {
|
||||
const rundown = makeRundown(
|
||||
[
|
||||
makeGroup('g1', 'Morning session', ['a']),
|
||||
makeEvent('a'),
|
||||
makeGroup('g2', 'Afternoon session', ['b']),
|
||||
makeEvent('b'),
|
||||
],
|
||||
['g1', 'a', 'g2', 'b'],
|
||||
);
|
||||
const metadata = metadataFor(['g1', 'a', 'g2', 'b'], { a: { groupId: 'g1' }, b: { groupId: 'g2' } });
|
||||
|
||||
const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', 'Afternoon session']);
|
||||
});
|
||||
|
||||
test('repeats a group title when the script returns to it after an ungrouped event', () => {
|
||||
// the reader has lost the context by then, so naming the group again is right
|
||||
const rundown = makeRundown(
|
||||
[makeGroup('g', 'Morning session', ['a', 'c']), makeEvent('a'), makeEvent('b'), makeEvent('c')],
|
||||
['g', 'a', 'b', 'c'],
|
||||
);
|
||||
const metadata = metadataFor(['g', 'a', 'b', 'c'], { a: { groupId: 'g' }, c: { groupId: 'g' } });
|
||||
|
||||
const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
|
||||
expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null, 'Morning session']);
|
||||
});
|
||||
|
||||
test('does not emit group titles when they are turned off', () => {
|
||||
const rundown = makeRundown([makeGroup('g', 'Morning session', ['a']), makeEvent('a')], ['g', 'a']);
|
||||
const metadata = metadataFor(['g', 'a'], { a: { groupId: 'g' } });
|
||||
|
||||
const blocks = buildScript(rundown, metadata, customFields, { ...defaultOptions, showGroups: false });
|
||||
expect(blocks[0].groupTitle).toBeNull();
|
||||
});
|
||||
|
||||
describe('headings', () => {
|
||||
const rundown = makeRundown([makeEvent('a')]);
|
||||
const metadata = metadataFor(['a']);
|
||||
|
||||
test('shows the title, the cue, both, or nothing', () => {
|
||||
expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'title' })[0].heading).toBe(
|
||||
'Title a',
|
||||
);
|
||||
expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'cue' })[0].heading).toBe('A');
|
||||
expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
|
||||
'A · Title a',
|
||||
);
|
||||
expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'none' })[0].heading).toBe('');
|
||||
});
|
||||
|
||||
test('leaves no dangling separator when an event has no cue', () => {
|
||||
const noCue = makeRundown([makeEvent('a', { cue: '' })]);
|
||||
expect(buildScript(noCue, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
|
||||
'Title a',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('composeFlip()', () => {
|
||||
test('passes the per view flips through when Flip Screen is off', () => {
|
||||
expect(composeFlip(false, false, false)).toEqual({ flipH: false, flipV: false });
|
||||
expect(composeFlip(true, false, false)).toEqual({ flipH: true, flipV: false });
|
||||
expect(composeFlip(false, true, false)).toEqual({ flipH: false, flipV: true });
|
||||
});
|
||||
|
||||
test('Flip Screen alone flips both axes, matching rotate(180deg) in every other view', () => {
|
||||
expect(composeFlip(false, false, true)).toEqual({ flipH: true, flipV: true });
|
||||
});
|
||||
|
||||
test('a horizontal flip and Flip Screen leave only the vertical axis flipped', () => {
|
||||
// scale(-1, 1) composed with scale(-1, -1) is scale(1, -1)
|
||||
expect(composeFlip(true, false, true)).toEqual({ flipH: false, flipV: true });
|
||||
});
|
||||
|
||||
test('both flips cancel Flip Screen out', () => {
|
||||
expect(composeFlip(true, true, true)).toEqual({ flipH: false, flipV: false });
|
||||
});
|
||||
});
|
||||
@@ -1,135 +0,0 @@
|
||||
import type { MouseEvent } from 'react';
|
||||
import { IoAdd, IoArrowUp, IoHelpCircleOutline, IoLocate, IoPause, IoPlay, IoRemove } from 'react-icons/io5';
|
||||
|
||||
import IconButton from '../../../common/components/buttons/IconButton';
|
||||
import Tooltip from '../../../common/components/tooltip/Tooltip';
|
||||
import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
|
||||
import { cx } from '../../../common/utils/styleUtils';
|
||||
import { SPEED_STEP } from '../teleprompter.scroll';
|
||||
import type { TeleprompterController } from '../teleprompter.types';
|
||||
|
||||
interface ControlOverlayProps {
|
||||
isRunning: boolean;
|
||||
speed: number;
|
||||
canReengageFollow: boolean;
|
||||
atEnd: boolean;
|
||||
controller: TeleprompterController;
|
||||
onToggleHelp: () => void;
|
||||
}
|
||||
|
||||
export default function ControlOverlay({
|
||||
isRunning,
|
||||
speed,
|
||||
canReengageFollow,
|
||||
atEnd,
|
||||
controller,
|
||||
onToggleHelp,
|
||||
}: ControlOverlayProps) {
|
||||
const isActive = useFadeOutOnInactivity(true);
|
||||
|
||||
// Pointer activation yields focus so the next Space reaches the transport.
|
||||
const press = (action: () => void) => (event: MouseEvent<HTMLButtonElement>) => {
|
||||
if (event.detail > 0) {
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cx(['teleprompter__controls', !isActive && 'teleprompter__controls--idle'])}>
|
||||
<Tooltip
|
||||
text={isRunning ? 'Pause (Space)' : 'Play (Space)'}
|
||||
render={
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='large'
|
||||
onClick={press(controller.togglePlay)}
|
||||
data-testid='teleprompter-play'
|
||||
aria-label={isRunning ? 'Pause' : 'Play'}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{isRunning ? <IoPause /> : <IoPlay />}
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
text='Slow down (Left arrow)'
|
||||
render={
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='large'
|
||||
onClick={press(() => controller.changeSpeed(-SPEED_STEP))}
|
||||
aria-label='Slow down'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IoRemove />
|
||||
</Tooltip>
|
||||
|
||||
<div className='teleprompter__speed' data-testid='teleprompter-speed'>
|
||||
{speed}
|
||||
<span className='teleprompter__speed-unit'>lpm</span>
|
||||
</div>
|
||||
|
||||
<Tooltip
|
||||
text='Speed up (Right arrow)'
|
||||
render={
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='large'
|
||||
onClick={press(() => controller.changeSpeed(SPEED_STEP))}
|
||||
aria-label='Speed up'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IoAdd />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
text='Rewind to the top (Home)'
|
||||
render={
|
||||
<IconButton
|
||||
variant={atEnd ? 'primary' : 'subtle-white'}
|
||||
size='large'
|
||||
onClick={press(() => controller.rewind())}
|
||||
aria-label='Rewind to top'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IoArrowUp />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
text={
|
||||
canReengageFollow ? 'Jump back to the loaded event and follow it again (L)' : 'Following the loaded event'
|
||||
}
|
||||
render={
|
||||
<IconButton
|
||||
variant={canReengageFollow ? 'primary' : 'subtle-white'}
|
||||
size='large'
|
||||
disabled={!canReengageFollow}
|
||||
onClick={press(controller.reengageFollow)}
|
||||
data-testid='teleprompter-follow'
|
||||
aria-label='Follow the loaded event'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IoLocate />
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
text='Keyboard shortcuts (?)'
|
||||
render={
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='large'
|
||||
onClick={press(onToggleHelp)}
|
||||
aria-label='Keyboard shortcuts'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<IoHelpCircleOutline />
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import { Dialog } from '@base-ui/react/dialog';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
|
||||
import IconButton from '../../../common/components/buttons/IconButton';
|
||||
import {
|
||||
Combo,
|
||||
Separator,
|
||||
Shortcut,
|
||||
ShortcutGroup,
|
||||
ShortcutGroups,
|
||||
} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
|
||||
|
||||
interface HelpOverlayProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function HelpOverlay({ isOpen, onClose }: HelpOverlayProps) {
|
||||
return (
|
||||
<Dialog.Root
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Backdrop className='teleprompter__help' />
|
||||
<Dialog.Popup className='teleprompter__help-card'>
|
||||
<div className='teleprompter__help-header'>
|
||||
<Dialog.Title className='teleprompter__help-title'>Prompter shortcuts</Dialog.Title>
|
||||
<IconButton variant='subtle-white' size='large' onClick={onClose} aria-label='Close'>
|
||||
<IoClose />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
<ShortcutGroups className='teleprompter__help-groups'>
|
||||
<ShortcutGroup title='Transport'>
|
||||
<Shortcut label='Start / stop scrolling'>
|
||||
<Combo keys={['Space']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Slower / faster'>
|
||||
<Combo keys={['←']} />
|
||||
<Separator />
|
||||
<Combo keys={['→']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Larger speed steps'>
|
||||
<Combo keys={['Shift', '←']} />
|
||||
<Separator />
|
||||
<Combo keys={['Shift', '→']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
|
||||
<ShortcutGroup title='Navigation'>
|
||||
<Shortcut label='Nudge one line'>
|
||||
<Combo keys={['↑']} />
|
||||
<Separator />
|
||||
<Combo keys={['↓']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Jump a screen'>
|
||||
<Combo keys={['PgUp']} />
|
||||
<Separator />
|
||||
<Combo keys={['PgDn']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Jump to top / end'>
|
||||
<Combo keys={['Home']} />
|
||||
<Separator />
|
||||
<Combo keys={['End']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Rewind and stop'>
|
||||
<Combo keys={['Esc']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Follow the loaded event again'>
|
||||
<Combo keys={['L']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
|
||||
<ShortcutGroup title='Display'>
|
||||
<Shortcut label='Font size'>
|
||||
<Combo keys={['+']} />
|
||||
<Separator />
|
||||
<Combo keys={['-']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Reset font size'>
|
||||
<Combo keys={['0']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Flip horizontally / vertically'>
|
||||
<Combo keys={['F']} />
|
||||
<Separator />
|
||||
<Combo keys={['Shift', 'F']} />
|
||||
</Shortcut>
|
||||
<Shortcut label='Show this list'>
|
||||
<Combo keys={['?']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
</ShortcutGroups>
|
||||
</Dialog.Popup>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { ScriptBlock } from '../teleprompter.types';
|
||||
|
||||
interface ScriptBlockProps {
|
||||
block: ScriptBlock;
|
||||
registerRef: (id: string, element: HTMLElement | null) => void;
|
||||
}
|
||||
|
||||
export default function ScriptBlockView({ block, registerRef }: ScriptBlockProps) {
|
||||
'use memo';
|
||||
|
||||
return (
|
||||
<section
|
||||
className='teleprompter__block'
|
||||
ref={(element) => registerRef(block.id, element)}
|
||||
data-loaded={block.isLoaded || undefined}
|
||||
>
|
||||
{block.groupTitle && <div className='teleprompter__group'>{block.groupTitle}</div>}
|
||||
{block.heading && <h2 className='teleprompter__heading'>{block.heading}</h2>}
|
||||
<p className='teleprompter__body'>{block.text}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { SPEED_STEP, SPEED_STEP_COARSE } from './teleprompter.scroll';
|
||||
import type { TeleprompterAction } from './teleprompter.types';
|
||||
|
||||
export type TeleprompterKeyEvent = {
|
||||
code: string;
|
||||
key: string;
|
||||
shiftKey: boolean;
|
||||
ctrlKey: boolean;
|
||||
metaKey: boolean;
|
||||
altKey: boolean;
|
||||
repeat: boolean;
|
||||
};
|
||||
|
||||
export function resolveTeleprompterAction(event: TeleprompterKeyEvent): TeleprompterAction | null {
|
||||
if (event.ctrlKey || event.metaKey || event.altKey) {
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (event.code) {
|
||||
case 'Space':
|
||||
return event.repeat ? null : { type: 'togglePlay' };
|
||||
case 'ArrowDown':
|
||||
return { type: 'nudge', lines: 1 };
|
||||
case 'ArrowUp':
|
||||
return { type: 'nudge', lines: -1 };
|
||||
case 'PageDown':
|
||||
return { type: 'page', direction: 1 };
|
||||
case 'PageUp':
|
||||
return { type: 'page', direction: -1 };
|
||||
case 'ArrowRight':
|
||||
return { type: 'speed', delta: event.shiftKey ? SPEED_STEP_COARSE : SPEED_STEP };
|
||||
case 'ArrowLeft':
|
||||
return { type: 'speed', delta: event.shiftKey ? -SPEED_STEP_COARSE : -SPEED_STEP };
|
||||
case 'Home':
|
||||
return { type: 'rewind' };
|
||||
case 'End':
|
||||
return { type: 'jumpToEnd' };
|
||||
case 'Escape':
|
||||
return { type: 'rewindAndPause' };
|
||||
}
|
||||
|
||||
// Character bindings use key so they work across keyboard layouts.
|
||||
switch (event.key) {
|
||||
case '?':
|
||||
return { type: 'toggleHelp' };
|
||||
case '+':
|
||||
case '=':
|
||||
return { type: 'fontSize', steps: 1 };
|
||||
case '-':
|
||||
case '_':
|
||||
return { type: 'fontSize', steps: -1 };
|
||||
case '0':
|
||||
return { type: 'resetFontSize' };
|
||||
}
|
||||
|
||||
const lowerKey = event.key.toLowerCase();
|
||||
if (lowerKey === 'f') {
|
||||
return { type: 'flip', axis: event.shiftKey ? 'v' : 'h' };
|
||||
}
|
||||
if (lowerKey === 'l') {
|
||||
return { type: 'reengageFollow' };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,223 +0,0 @@
|
||||
import type { CustomFields } from 'ontime-types';
|
||||
import { use, useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { OptionTitle } from '../../common/components/view-params-editor/constants';
|
||||
import type { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
|
||||
import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
|
||||
import { PresetContext } from '../../common/context/PresetContext';
|
||||
import { isStringBoolean } from '../common/viewUtils';
|
||||
import { DEFAULT_SPEED, MAX_FONT_SIZE, MAX_SPEED, MIN_FONT_SIZE, MIN_SPEED } from './teleprompter.scroll';
|
||||
import type { HeadingSource, TeleprompterOptions } from './teleprompter.types';
|
||||
|
||||
const headingOptions: { value: HeadingSource; label: string }[] = [
|
||||
{ value: 'title', label: 'Title' },
|
||||
{ value: 'cue', label: 'Cue' },
|
||||
{ value: 'both', label: 'Cue and title' },
|
||||
{ value: 'none', label: 'None' },
|
||||
];
|
||||
const headingSources = headingOptions.map((option) => option.value);
|
||||
|
||||
export const defaults = {
|
||||
script: 'none',
|
||||
heading: 'title' as HeadingSource,
|
||||
hideEmpty: true,
|
||||
showGroups: true,
|
||||
speed: DEFAULT_SPEED,
|
||||
followLoaded: true,
|
||||
fontSize: 52,
|
||||
lineHeight: 1.3,
|
||||
textWidth: 80,
|
||||
readingLine: true,
|
||||
readingLinePos: 25,
|
||||
flipH: false,
|
||||
flipV: false,
|
||||
};
|
||||
|
||||
const bounds = {
|
||||
speed: [MIN_SPEED, MAX_SPEED],
|
||||
fontSize: [MIN_FONT_SIZE, MAX_FONT_SIZE],
|
||||
lineHeight: [1, 4],
|
||||
textWidth: [20, 100],
|
||||
readingLinePos: [0, 100],
|
||||
} as const;
|
||||
|
||||
export const getTeleprompterOptions = (customFields: CustomFields): ViewOption[] => {
|
||||
const scriptOptions = makeOptionsFromCustomFields(customFields, [
|
||||
{ value: 'none', label: 'None' },
|
||||
{ value: 'note', label: 'Note' },
|
||||
{ value: 'title', label: 'Title' },
|
||||
]);
|
||||
|
||||
return [
|
||||
{
|
||||
title: OptionTitle.DataSources,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'script',
|
||||
title: 'Script',
|
||||
description: 'Select the data source which holds the script to read',
|
||||
type: 'option',
|
||||
values: scriptOptions,
|
||||
defaultValue: defaults.script,
|
||||
},
|
||||
{
|
||||
id: 'heading',
|
||||
title: 'Segment heading',
|
||||
description: 'What to show above each segment of the script',
|
||||
type: 'option',
|
||||
values: headingOptions,
|
||||
defaultValue: defaults.heading,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: OptionTitle.BehaviourOptions,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'speed',
|
||||
title: 'Speed',
|
||||
description: `Scroll speed in lines per minute (${MIN_SPEED}-${MAX_SPEED}). Adjustable live with the arrow keys`,
|
||||
type: 'number',
|
||||
defaultValue: defaults.speed,
|
||||
},
|
||||
{
|
||||
id: 'followLoaded',
|
||||
title: 'Follow loaded event',
|
||||
description: 'Scroll to the segment of the loaded event. Scrolling by hand releases the follow',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.followLoaded,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: OptionTitle.ElementVisibility,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'hideEmpty',
|
||||
title: 'Hide events without a script',
|
||||
description: 'Prevents showing headings for events which have no script text',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.hideEmpty,
|
||||
},
|
||||
{
|
||||
id: 'showGroups',
|
||||
title: 'Show group names',
|
||||
description: 'Shows the group name when the script moves into a new group',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.showGroups,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: OptionTitle.StyleOverride,
|
||||
collapsible: true,
|
||||
options: [
|
||||
{
|
||||
id: 'fontSize',
|
||||
title: 'Font size',
|
||||
description: 'Base font size in pixels. Adjustable live with the + and - keys',
|
||||
type: 'number',
|
||||
defaultValue: defaults.fontSize,
|
||||
},
|
||||
{
|
||||
id: 'lineHeight',
|
||||
title: 'Line height',
|
||||
description: 'Spacing between lines, as a multiple of the font size',
|
||||
type: 'number',
|
||||
defaultValue: defaults.lineHeight,
|
||||
},
|
||||
{
|
||||
id: 'textWidth',
|
||||
title: 'Text width',
|
||||
description: 'Width of the text column as a percentage of the screen. Narrower means less eye movement',
|
||||
type: 'number',
|
||||
defaultValue: defaults.textWidth,
|
||||
},
|
||||
{
|
||||
id: 'readingLine',
|
||||
title: 'Reading line',
|
||||
description: 'Shows a marker beside the line which should be read',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.readingLine,
|
||||
},
|
||||
{
|
||||
id: 'readingLinePos',
|
||||
title: 'Reading line position',
|
||||
description: 'Position of the reading line as a percentage from the top of the screen',
|
||||
type: 'number',
|
||||
defaultValue: defaults.readingLinePos,
|
||||
},
|
||||
{
|
||||
id: 'flipH',
|
||||
title: 'Flip horizontally',
|
||||
description:
|
||||
'Mirrors the view horizontally, which is what a beam splitter rig needs. Toggled live with F. Flip Screen in the navigation menu flips both axes at once, which is a rotation rather than a mirror',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.flipH,
|
||||
},
|
||||
{
|
||||
id: 'flipV',
|
||||
title: 'Flip vertically',
|
||||
description: 'Mirrors the view vertically. Note this also moves the reading line. Toggled live with Shift+F',
|
||||
type: 'boolean',
|
||||
defaultValue: defaults.flipV,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
function toNumber(value: string | null, [min, max]: readonly [number, number], fallback: number): number {
|
||||
if (value === null || value === '') return fallback;
|
||||
const parsed = Number(value);
|
||||
if (!Number.isFinite(parsed)) return fallback;
|
||||
return Math.min(Math.max(parsed, min), max);
|
||||
}
|
||||
|
||||
function toBoolean(value: string | null, fallback: boolean): boolean {
|
||||
return value === null ? fallback : isStringBoolean(value);
|
||||
}
|
||||
|
||||
function toEnum<T extends string>(value: string | null, allowed: readonly T[], fallback: T): T {
|
||||
return allowed.includes(value as T) ? (value as T) : fallback;
|
||||
}
|
||||
|
||||
export function getOptionsFromParams(
|
||||
searchParams: URLSearchParams,
|
||||
defaultValues?: URLSearchParams,
|
||||
): TeleprompterOptions {
|
||||
const getValue = (key: string) => defaultValues?.get(key) ?? searchParams.get(key);
|
||||
|
||||
return {
|
||||
scriptSource: getValue('script') ?? defaults.script,
|
||||
heading: toEnum(getValue('heading'), headingSources, defaults.heading),
|
||||
|
||||
hideEmpty: toBoolean(getValue('hideEmpty'), defaults.hideEmpty),
|
||||
showGroups: toBoolean(getValue('showGroups'), defaults.showGroups),
|
||||
|
||||
speed: toNumber(getValue('speed'), bounds.speed, defaults.speed),
|
||||
followLoaded: toBoolean(getValue('followLoaded'), defaults.followLoaded),
|
||||
|
||||
fontSize: toNumber(getValue('fontSize'), bounds.fontSize, defaults.fontSize),
|
||||
lineHeight: toNumber(getValue('lineHeight'), bounds.lineHeight, defaults.lineHeight),
|
||||
textWidth: toNumber(getValue('textWidth'), bounds.textWidth, defaults.textWidth),
|
||||
readingLine: toBoolean(getValue('readingLine'), defaults.readingLine),
|
||||
readingLinePos: toNumber(getValue('readingLinePos'), bounds.readingLinePos, defaults.readingLinePos),
|
||||
flipH: toBoolean(getValue('flipH'), defaults.flipH),
|
||||
flipV: toBoolean(getValue('flipV'), defaults.flipV),
|
||||
};
|
||||
}
|
||||
|
||||
export function useTeleprompterOptions(): TeleprompterOptions {
|
||||
const [searchParams] = useSearchParams();
|
||||
const maybePreset = use(PresetContext);
|
||||
|
||||
return useMemo(() => {
|
||||
const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
|
||||
return getOptionsFromParams(searchParams, defaultValues);
|
||||
}, [maybePreset, searchParams]);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
export const MIN_SPEED = 1;
|
||||
export const MAX_SPEED = 40;
|
||||
export const DEFAULT_SPEED = 14;
|
||||
|
||||
export const SPEED_STEP = 1;
|
||||
export const SPEED_STEP_COARSE = 5;
|
||||
|
||||
export const MIN_FONT_SIZE = 12;
|
||||
export const MAX_FONT_SIZE = 400;
|
||||
const FONT_SIZE_STEP_RATIO = 1.1;
|
||||
|
||||
export function stepFontSize(current: number, steps: number): number {
|
||||
return clamp(Math.round(current * FONT_SIZE_STEP_RATIO ** steps), MIN_FONT_SIZE, MAX_FONT_SIZE);
|
||||
}
|
||||
|
||||
export const MAX_FRAME_DELTA_MS = 100;
|
||||
|
||||
const CATCH_UP_RATE = 8;
|
||||
const CATCH_UP_EPSILON = 0.5;
|
||||
|
||||
export function clamp(value: number, min: number, max: number): number {
|
||||
if (Number.isNaN(value)) return min;
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
export function clampSpeed(value: number): number {
|
||||
return clamp(value, MIN_SPEED, MAX_SPEED);
|
||||
}
|
||||
|
||||
export function linesPerMinuteToPxPerSecond(linesPerMinute: number, lineHeightPx: number): number {
|
||||
return (linesPerMinute / 60) * lineHeightPx;
|
||||
}
|
||||
|
||||
export function frameDeltaSeconds(deltaMs: number): number {
|
||||
if (!Number.isFinite(deltaMs) || deltaMs < 0) return 0;
|
||||
return Math.min(deltaMs, MAX_FRAME_DELTA_MS) / 1000;
|
||||
}
|
||||
|
||||
export function advance(
|
||||
position: number,
|
||||
pxPerSecond: number,
|
||||
deltaSeconds: number,
|
||||
maxScroll: number,
|
||||
): { position: number; atEnd: boolean } {
|
||||
const next = position + pxPerSecond * deltaSeconds;
|
||||
return { position: next, atEnd: maxScroll > 0 && next >= maxScroll };
|
||||
}
|
||||
|
||||
export function easeCatchUp(current: number, target: number, deltaSeconds: number): number {
|
||||
if (deltaSeconds <= 0) return current;
|
||||
const next = target + (current - target) * Math.exp(-CATCH_UP_RATE * deltaSeconds);
|
||||
return Math.abs(next - target) < CATCH_UP_EPSILON ? target : next;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { MaybeString } from 'ontime-types';
|
||||
|
||||
export type HeadingSource = 'none' | 'title' | 'cue' | 'both';
|
||||
|
||||
export type ScriptBlock = {
|
||||
id: string;
|
||||
heading: string;
|
||||
text: string;
|
||||
groupTitle: MaybeString;
|
||||
isLoaded: boolean;
|
||||
};
|
||||
|
||||
export type TeleprompterOptions = {
|
||||
scriptSource: string;
|
||||
heading: HeadingSource;
|
||||
hideEmpty: boolean;
|
||||
showGroups: boolean;
|
||||
/** lines per minute */
|
||||
speed: number;
|
||||
followLoaded: boolean;
|
||||
fontSize: number;
|
||||
lineHeight: number;
|
||||
textWidth: number;
|
||||
readingLine: boolean;
|
||||
readingLinePos: number;
|
||||
flipH: boolean;
|
||||
flipV: boolean;
|
||||
};
|
||||
|
||||
export type TeleprompterAction =
|
||||
| { type: 'togglePlay' }
|
||||
| { type: 'nudge'; lines: number }
|
||||
| { type: 'page'; direction: 1 | -1 }
|
||||
| { type: 'speed'; delta: number }
|
||||
| { type: 'rewind' }
|
||||
| { type: 'rewindAndPause' }
|
||||
| { type: 'jumpToEnd' }
|
||||
| { type: 'flip'; axis: 'h' | 'v' }
|
||||
| { type: 'fontSize'; steps: number }
|
||||
| { type: 'resetFontSize' }
|
||||
| { type: 'reengageFollow' }
|
||||
| { type: 'toggleHelp' };
|
||||
|
||||
export type TeleprompterController = {
|
||||
togglePlay: () => void;
|
||||
nudge: (lines: number) => void;
|
||||
page: (direction: 1 | -1) => void;
|
||||
changeSpeed: (delta: number) => void;
|
||||
rewind: (alsoPause?: boolean) => void;
|
||||
jumpToEnd: () => void;
|
||||
reengageFollow: () => void;
|
||||
};
|
||||
@@ -1,80 +0,0 @@
|
||||
import { type CustomFields, isOntimeEvent, isOntimeGroup, type MaybeString, type Rundown } from 'ontime-types';
|
||||
|
||||
import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
|
||||
import { getPropertyValue } from '../common/viewUtils';
|
||||
import type { HeadingSource, ScriptBlock, TeleprompterOptions } from './teleprompter.types';
|
||||
|
||||
type BuildScriptOptions = Pick<TeleprompterOptions, 'scriptSource' | 'heading' | 'hideEmpty' | 'showGroups'>;
|
||||
|
||||
function makeHeading(source: HeadingSource, cue: string, title: string): string {
|
||||
switch (source) {
|
||||
case 'cue':
|
||||
return cue;
|
||||
case 'title':
|
||||
return title;
|
||||
case 'both':
|
||||
return [cue, title].filter(Boolean).join(' · ');
|
||||
case 'none':
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function isReadableSource(scriptSource: string, customFields: CustomFields): boolean {
|
||||
if (!scriptSource.startsWith('custom-')) {
|
||||
return true;
|
||||
}
|
||||
const key = scriptSource.slice('custom-'.length);
|
||||
return customFields[key]?.type === 'text';
|
||||
}
|
||||
|
||||
/** Builds the continuous script in rundown order. */
|
||||
export function buildScript(
|
||||
rundown: Rundown,
|
||||
rundownMetadata: RundownMetadataObject,
|
||||
customFields: CustomFields,
|
||||
options: BuildScriptOptions,
|
||||
): ScriptBlock[] {
|
||||
const { scriptSource, heading, hideEmpty, showGroups } = options;
|
||||
|
||||
if (scriptSource === 'none' || !isReadableSource(scriptSource, customFields)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const blocks: ScriptBlock[] = [];
|
||||
let lastGroupId: MaybeString = null;
|
||||
|
||||
for (const id of rundown.flatOrder) {
|
||||
const entry = rundown.entries[id];
|
||||
if (!isOntimeEvent(entry) || entry.skip) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const metadata = rundownMetadata[id];
|
||||
const text = getPropertyValue(entry, scriptSource, rundown.entries)?.trim() ?? '';
|
||||
if (hideEmpty && !text) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const groupId = metadata?.groupId ?? null;
|
||||
let groupTitle: MaybeString = null;
|
||||
if (showGroups && groupId && groupId !== lastGroupId) {
|
||||
const group = rundown.entries[groupId];
|
||||
groupTitle = isOntimeGroup(group) ? group.title : null;
|
||||
}
|
||||
lastGroupId = groupId;
|
||||
|
||||
blocks.push({
|
||||
id,
|
||||
heading: makeHeading(heading, entry.cue, entry.title),
|
||||
text,
|
||||
groupTitle,
|
||||
isLoaded: Boolean(metadata?.isLoaded),
|
||||
});
|
||||
}
|
||||
|
||||
return blocks;
|
||||
}
|
||||
|
||||
export function composeFlip(flipH: boolean, flipV: boolean, isMirrored: boolean): { flipH: boolean; flipV: boolean } {
|
||||
return { flipH: flipH !== isMirrored, flipV: flipV !== isMirrored };
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { use, useEffect } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { PresetContext } from '../../common/context/PresetContext';
|
||||
import { defaults } from './teleprompter.options';
|
||||
|
||||
const SETTLE_MS = 400;
|
||||
|
||||
interface LiveParams {
|
||||
speed: number;
|
||||
fontSize: number;
|
||||
flipH: boolean;
|
||||
flipV: boolean;
|
||||
}
|
||||
|
||||
/** Keeps keyboard and overlay changes shareable through the URL. */
|
||||
export function useSyncTeleprompterParams({ speed, fontSize, flipH, flipV }: LiveParams) {
|
||||
const [, setSearchParams] = useSearchParams();
|
||||
const isPreset = Boolean(use(PresetContext));
|
||||
|
||||
useEffect(() => {
|
||||
if (isPreset) return;
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
const values = {
|
||||
speed: speed === defaults.speed ? null : String(speed),
|
||||
fontSize: fontSize === defaults.fontSize ? null : String(fontSize),
|
||||
flipH: flipH === defaults.flipH ? null : String(flipH),
|
||||
flipV: flipV === defaults.flipV ? null : String(flipV),
|
||||
};
|
||||
|
||||
setSearchParams(
|
||||
(current) => {
|
||||
const next = new URLSearchParams(current);
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
if (value === null) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.set(key, value);
|
||||
}
|
||||
}
|
||||
return next;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
}, SETTLE_MS);
|
||||
|
||||
return () => clearTimeout(timeout);
|
||||
}, [flipH, flipV, fontSize, isPreset, setSearchParams, speed]);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import { useViewParamsEditorStore } from '../../common/components/view-params-editor/viewParamsEditor.store';
|
||||
import { resolveTeleprompterAction } from './teleprompter.keymap';
|
||||
import type { TeleprompterAction, TeleprompterController } from './teleprompter.types';
|
||||
|
||||
interface UseTeleprompterControlsArgs {
|
||||
controller: TeleprompterController;
|
||||
isHelpOpen: boolean;
|
||||
onFlip: (axis: 'h' | 'v') => void;
|
||||
onFontSize: (steps: number) => void;
|
||||
onResetFontSize: () => void;
|
||||
onToggleHelp: () => void;
|
||||
}
|
||||
|
||||
const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
|
||||
|
||||
export function useTeleprompterControls(args: UseTeleprompterControlsArgs) {
|
||||
const argsRef = useRef(args);
|
||||
useEffect(() => {
|
||||
argsRef.current = args;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function applyAction(action: TeleprompterAction) {
|
||||
const { controller, onFlip, onFontSize, onResetFontSize, onToggleHelp } = argsRef.current;
|
||||
switch (action.type) {
|
||||
case 'togglePlay':
|
||||
return controller.togglePlay();
|
||||
case 'nudge':
|
||||
return controller.nudge(action.lines);
|
||||
case 'page':
|
||||
return controller.page(action.direction);
|
||||
case 'speed':
|
||||
return controller.changeSpeed(action.delta);
|
||||
case 'rewind':
|
||||
return controller.rewind();
|
||||
case 'rewindAndPause':
|
||||
return controller.rewind(true);
|
||||
case 'jumpToEnd':
|
||||
return controller.jumpToEnd();
|
||||
case 'reengageFollow':
|
||||
return controller.reengageFollow();
|
||||
case 'flip':
|
||||
return onFlip(action.axis);
|
||||
case 'fontSize':
|
||||
return onFontSize(action.steps);
|
||||
case 'resetFontSize':
|
||||
return onResetFontSize();
|
||||
case 'toggleHelp':
|
||||
return onToggleHelp();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
|
||||
return;
|
||||
}
|
||||
if (useViewParamsEditorStore.getState().isOpen || argsRef.current.isHelpOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const action = resolveTeleprompterAction(event);
|
||||
if (!action) return;
|
||||
|
||||
event.preventDefault();
|
||||
applyAction(action);
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import type { CustomFields, Rundown } from 'ontime-types';
|
||||
|
||||
import useCustomFields from '../../common/hooks-query/useCustomFields';
|
||||
import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
|
||||
import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
|
||||
import { type ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
|
||||
|
||||
export interface TeleprompterData {
|
||||
rundown: Rundown;
|
||||
rundownMetadata: RundownMetadataObject;
|
||||
customFields: CustomFields;
|
||||
}
|
||||
|
||||
export function useTeleprompterData(): ViewData<TeleprompterData> {
|
||||
const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
|
||||
const { data: customFields, status: customFieldStatus } = useCustomFields();
|
||||
|
||||
return {
|
||||
data: {
|
||||
rundown,
|
||||
rundownMetadata,
|
||||
customFields,
|
||||
},
|
||||
status: aggregateQueryStatus([rundownStatus, customFieldStatus]),
|
||||
};
|
||||
}
|
||||
@@ -1,282 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
advance,
|
||||
clamp,
|
||||
clampSpeed,
|
||||
easeCatchUp,
|
||||
frameDeltaSeconds,
|
||||
linesPerMinuteToPxPerSecond,
|
||||
} from './teleprompter.scroll';
|
||||
import type { ScriptBlock, TeleprompterController } from './teleprompter.types';
|
||||
|
||||
const PAGE_FRACTION = 0.85;
|
||||
const EXTERNAL_SCROLL_EPSILON = 2;
|
||||
|
||||
/**
|
||||
* Uses layout coordinates because client rects include the teleprompter's CSS
|
||||
* transform while scrollTop does not.
|
||||
*/
|
||||
function getLayoutTop(element: HTMLElement): number {
|
||||
let top = 0;
|
||||
let current: HTMLElement | null = element;
|
||||
|
||||
while (current) {
|
||||
top += current.offsetTop;
|
||||
current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null;
|
||||
}
|
||||
|
||||
return top;
|
||||
}
|
||||
|
||||
interface UseTeleprompterScrollArgs {
|
||||
initialSpeed: number;
|
||||
followLoaded: boolean;
|
||||
selectedEventId: string | null;
|
||||
readingLinePos: number;
|
||||
blocks: ScriptBlock[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Owns the scroll position of the teleprompter.
|
||||
*
|
||||
* The animation frame is the only writer of scrollTop. Controls update refs so
|
||||
* smooth scrolling and playback cannot compete for the DOM position.
|
||||
*/
|
||||
export function useTeleprompterScroll({
|
||||
initialSpeed,
|
||||
followLoaded,
|
||||
selectedEventId,
|
||||
readingLinePos,
|
||||
blocks,
|
||||
}: UseTeleprompterScrollArgs) {
|
||||
const scrollerRef = useRef<HTMLDivElement | null>(null);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const blockRefs = useRef(new Map<string, HTMLElement>());
|
||||
|
||||
const [isScrollerMounted, setIsScrollerMounted] = useState(false);
|
||||
const attachScroller = useCallback((element: HTMLDivElement | null) => {
|
||||
scrollerRef.current = element;
|
||||
setIsScrollerMounted(Boolean(element && contentRef.current));
|
||||
}, []);
|
||||
const attachContent = useCallback((element: HTMLDivElement | null) => {
|
||||
contentRef.current = element;
|
||||
setIsScrollerMounted(Boolean(element && scrollerRef.current));
|
||||
}, []);
|
||||
|
||||
// authoritative, sub-pixel scroll position
|
||||
const posRef = useRef(0);
|
||||
const lastTsRef = useRef(0);
|
||||
const runningRef = useRef(false);
|
||||
const speedRef = useRef(initialSpeed);
|
||||
const lineHeightRef = useRef(0);
|
||||
const maxScrollRef = useRef(0);
|
||||
const catchUpTargetRef = useRef<number | null>(null);
|
||||
const pendingDeltaRef = useRef(0);
|
||||
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [speed, setSpeed] = useState(initialSpeed);
|
||||
const [followLocked, setFollowLocked] = useState(false);
|
||||
const [atEnd, setAtEnd] = useState(false);
|
||||
|
||||
const tick = useCallback((timestamp: number) => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
// Adopt wheel, touch, scrollbar, browser-clamp and find-in-page changes.
|
||||
if (Math.abs(el.scrollTop - posRef.current) > EXTERNAL_SCROLL_EPSILON) {
|
||||
posRef.current = el.scrollTop;
|
||||
catchUpTargetRef.current = null;
|
||||
}
|
||||
|
||||
const deltaSeconds = frameDeltaSeconds(timestamp - lastTsRef.current);
|
||||
lastTsRef.current = timestamp;
|
||||
|
||||
let next = posRef.current;
|
||||
|
||||
if (pendingDeltaRef.current !== 0) {
|
||||
next += pendingDeltaRef.current;
|
||||
pendingDeltaRef.current = 0;
|
||||
catchUpTargetRef.current = null;
|
||||
}
|
||||
|
||||
if (catchUpTargetRef.current !== null) {
|
||||
next = easeCatchUp(next, catchUpTargetRef.current, deltaSeconds);
|
||||
if (next === catchUpTargetRef.current) {
|
||||
catchUpTargetRef.current = null;
|
||||
}
|
||||
} else if (runningRef.current) {
|
||||
const pxPerSecond = linesPerMinuteToPxPerSecond(speedRef.current, lineHeightRef.current);
|
||||
const result = advance(next, pxPerSecond, deltaSeconds, maxScrollRef.current);
|
||||
next = result.position;
|
||||
if (result.atEnd) {
|
||||
runningRef.current = false;
|
||||
setIsRunning(false);
|
||||
setAtEnd(true);
|
||||
}
|
||||
}
|
||||
|
||||
const clamped = clamp(next, 0, maxScrollRef.current);
|
||||
if (clamped !== posRef.current) {
|
||||
posRef.current = clamped;
|
||||
el.scrollTop = clamped;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
lastTsRef.current = performance.now();
|
||||
let frame = requestAnimationFrame(function loop(timestamp) {
|
||||
tick(timestamp);
|
||||
frame = requestAnimationFrame(loop);
|
||||
});
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}, [tick]);
|
||||
|
||||
const measure = useCallback(() => {
|
||||
const scroller = scrollerRef.current;
|
||||
const content = contentRef.current;
|
||||
if (!scroller || !content) return;
|
||||
|
||||
maxScrollRef.current = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
|
||||
|
||||
const computed = getComputedStyle(content);
|
||||
const parsedLineHeight = Number.parseFloat(computed.lineHeight);
|
||||
if (Number.isFinite(parsedLineHeight) && parsedLineHeight > 0) {
|
||||
lineHeightRef.current = parsedLineHeight;
|
||||
} else {
|
||||
const parsedFontSize = Number.parseFloat(computed.fontSize);
|
||||
lineHeightRef.current = Number.isFinite(parsedFontSize) ? parsedFontSize * 1.2 : 0;
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
speedRef.current = speed;
|
||||
}, [speed]);
|
||||
|
||||
const [speedFromOption, setSpeedFromOption] = useState(initialSpeed);
|
||||
// Keep the live speed in sync with view-param and remote redirect changes.
|
||||
if (speedFromOption !== initialSpeed) {
|
||||
setSpeedFromOption(initialSpeed);
|
||||
setSpeed(initialSpeed);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
measure();
|
||||
|
||||
const scroller = scrollerRef.current;
|
||||
const content = contentRef.current;
|
||||
if (!scroller || !content) return;
|
||||
|
||||
const observer = new ResizeObserver(() => measure());
|
||||
observer.observe(scroller);
|
||||
observer.observe(content);
|
||||
return () => observer.disconnect();
|
||||
}, [measure, isScrollerMounted]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
void document.fonts?.ready.then(() => {
|
||||
if (!cancelled) measure();
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [measure]);
|
||||
|
||||
useEffect(() => {
|
||||
const onVisibilityChange = () => {
|
||||
lastTsRef.current = performance.now();
|
||||
};
|
||||
document.addEventListener('visibilitychange', onVisibilityChange);
|
||||
return () => document.removeEventListener('visibilitychange', onVisibilityChange);
|
||||
}, []);
|
||||
|
||||
// Avoid re-following when a new blocks array contains the same selected event.
|
||||
const hasSelectedBlock = selectedEventId !== null && blocks.some((block) => block.id === selectedEventId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!followLoaded || followLocked || !selectedEventId) return;
|
||||
|
||||
const scroller = scrollerRef.current;
|
||||
const target = blockRefs.current.get(selectedEventId);
|
||||
if (!scroller || !target) return;
|
||||
|
||||
const offset = (scroller.clientHeight * readingLinePos) / 100;
|
||||
const top = getLayoutTop(target) - getLayoutTop(scroller) - offset;
|
||||
|
||||
catchUpTargetRef.current = clamp(top, 0, maxScrollRef.current);
|
||||
setAtEnd(false);
|
||||
}, [selectedEventId, followLoaded, followLocked, readingLinePos, hasSelectedBlock]);
|
||||
|
||||
const handleUserScroll = useCallback(() => {
|
||||
if (followLoaded) {
|
||||
setFollowLocked(true);
|
||||
}
|
||||
}, [followLoaded]);
|
||||
|
||||
const registerBlock = useCallback((id: string, element: HTMLElement | null) => {
|
||||
if (element) {
|
||||
blockRefs.current.set(id, element);
|
||||
} else {
|
||||
blockRefs.current.delete(id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const controller: TeleprompterController = useMemo(() => {
|
||||
const play = () => {
|
||||
if (maxScrollRef.current > 0 && posRef.current >= maxScrollRef.current) {
|
||||
return;
|
||||
}
|
||||
runningRef.current = true;
|
||||
setIsRunning(true);
|
||||
setAtEnd(false);
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
runningRef.current = false;
|
||||
setIsRunning(false);
|
||||
};
|
||||
|
||||
return {
|
||||
togglePlay: () => (runningRef.current ? pause() : play()),
|
||||
nudge: (lines: number) => {
|
||||
pendingDeltaRef.current += lines * lineHeightRef.current;
|
||||
setAtEnd(false);
|
||||
},
|
||||
page: (direction: 1 | -1) => {
|
||||
const scroller = scrollerRef.current;
|
||||
if (!scroller) return;
|
||||
const distance = scroller.clientHeight * PAGE_FRACTION * direction;
|
||||
catchUpTargetRef.current = clamp(posRef.current + distance, 0, maxScrollRef.current);
|
||||
setAtEnd(false);
|
||||
},
|
||||
changeSpeed: (delta: number) => setSpeed((current) => clampSpeed(current + delta)),
|
||||
rewind: (alsoPause = false) => {
|
||||
catchUpTargetRef.current = 0;
|
||||
if (alsoPause) pause();
|
||||
setAtEnd(false);
|
||||
},
|
||||
jumpToEnd: () => {
|
||||
catchUpTargetRef.current = maxScrollRef.current;
|
||||
if (maxScrollRef.current > 0) {
|
||||
runningRef.current = false;
|
||||
setIsRunning(false);
|
||||
setAtEnd(true);
|
||||
}
|
||||
},
|
||||
reengageFollow: () => setFollowLocked(false),
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
scrollerRef: attachScroller,
|
||||
contentRef: attachContent,
|
||||
registerBlock,
|
||||
handleUserScroll,
|
||||
controller,
|
||||
isRunning,
|
||||
speed,
|
||||
followLocked,
|
||||
atEnd,
|
||||
};
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime-electron",
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
@@ -151,7 +151,6 @@ function makeViewMenu(clientUrl) {
|
||||
makeItemOpenInBrowser('Editor', `${clientUrl}/editor`),
|
||||
makeItemOpenInBrowser('Cuesheet', `${clientUrl}/cuesheet`),
|
||||
makeItemOpenInBrowser('Operator', `${clientUrl}/op`),
|
||||
makeItemOpenInBrowser('Teleprompter', `${clientUrl}/teleprompter`),
|
||||
{ type: 'separator' },
|
||||
makeItemOpenInBrowser('Timer', `${clientUrl}/timer`),
|
||||
makeItemOpenInBrowser('Backstage', `${clientUrl}/backstage`),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/resolver",
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"type": "module",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
"types": "./dist/main.d.ts",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "ontime-server",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"exports": "./src/index.js",
|
||||
"dependencies": {
|
||||
"@googleapis/sheets": "^5.0.5",
|
||||
|
||||
@@ -9,52 +9,45 @@ test.describe('test view navigation feature', () => {
|
||||
test('Timeline', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Timeline' }).click();
|
||||
await expect(page.getByTestId('timeline-view')).toBeVisible();
|
||||
page.locator('data-testid=timeline-view');
|
||||
await expect(page).toHaveURL('/timeline');
|
||||
});
|
||||
|
||||
test('Backstage', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Backstage' }).click();
|
||||
await expect(page.getByTestId('backstage-view')).toBeVisible();
|
||||
page.locator('data-testid=backstage-view');
|
||||
await expect(page).toHaveURL('/backstage');
|
||||
});
|
||||
|
||||
test('Studio Clock', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Studio Clock' }).click();
|
||||
await expect(page.getByTestId('studio-view')).toBeVisible();
|
||||
page.locator('data-testid=studio-view');
|
||||
await expect(page).toHaveURL('/studio');
|
||||
});
|
||||
|
||||
test('Countdown', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Countdown' }).click();
|
||||
await expect(page.getByTestId('countdown-view')).toBeVisible();
|
||||
page.locator('data-testid=countdown-view');
|
||||
await expect(page).toHaveURL('/countdown');
|
||||
});
|
||||
|
||||
test('Project Info', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Project Info' }).click();
|
||||
await expect(page.getByTestId('project-view')).toBeVisible();
|
||||
page.locator('data-testid=project-view');
|
||||
await expect(page).toHaveURL('/info');
|
||||
});
|
||||
|
||||
test('Timer', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Timer', exact: true }).click();
|
||||
await expect(page.getByTestId('timer-view')).toBeVisible();
|
||||
page.locator('data-testid=timer-view');
|
||||
await expect(page).toHaveURL('/timer');
|
||||
});
|
||||
|
||||
test('Teleprompter', async ({ page }) => {
|
||||
await openNavigationMenu(page);
|
||||
await page.getByRole('button', { name: 'Teleprompter' }).click();
|
||||
await expect(page.getByTestId('teleprompter-view')).toBeVisible();
|
||||
await expect(page).toHaveURL('/teleprompter');
|
||||
});
|
||||
|
||||
test('not-found', async ({ page }) => {
|
||||
await page.goto('/not-found');
|
||||
|
||||
|
||||
@@ -13,25 +13,3 @@ test('View params configures timer view', async ({ page }) => {
|
||||
await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
|
||||
await expect(page).toHaveURL(/.*hideClock=true/);
|
||||
});
|
||||
|
||||
test('View params configures teleprompter view', async ({ page, request }) => {
|
||||
const response = await request.post('/data/db/demo');
|
||||
expect(response.ok()).toBe(true);
|
||||
|
||||
await page.goto('/teleprompter?script=note');
|
||||
|
||||
const readingMarker = page.locator('.teleprompter__reading-marker');
|
||||
await expect(readingMarker).toBeVisible();
|
||||
|
||||
await page.mouse.move(Math.random() * 100, Math.random() * 100);
|
||||
await page.getByTestId('navigation__toggle-settings').click();
|
||||
|
||||
const readingLineSwitch = page.locator('label:has(input[name="readingLine"]) [role="switch"]');
|
||||
await expect(readingLineSwitch).toHaveAttribute('aria-checked', 'true');
|
||||
|
||||
await readingLineSwitch.click();
|
||||
await page.getByTestId('apply-view-params').click();
|
||||
|
||||
await expect(page).toHaveURL(/.*readingLine=false/);
|
||||
await expect(readingMarker).toHaveCount(0);
|
||||
});
|
||||
|
||||
@@ -222,15 +222,57 @@ test('Delete event', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: 'Create Group' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('Find in rundown', async ({ page }) => {
|
||||
test('Finder searches the rundown and reveals a result', async ({ page }) => {
|
||||
await page.goto('/rundown');
|
||||
await expect(page.getByTestId('panel-rundown')).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Edit' }).click();
|
||||
|
||||
// clear rundown
|
||||
await page.getByRole('button', { name: 'Rundown menu' }).click();
|
||||
await page.getByRole('menuitem', { name: 'Clear all' }).click();
|
||||
await page.getByRole('button', { name: 'Delete all' }).click();
|
||||
await expect(page.getByTestId('rundown-event')).toHaveCount(0);
|
||||
|
||||
// two events, where the one we are looking for is identified only by its note
|
||||
await page.getByRole('button', { name: 'Create Event' }).click();
|
||||
await expect(page.getByTestId('rundown-event')).toHaveCount(1);
|
||||
await page.getByTestId('entry-1').click();
|
||||
await page.getByTestId('entry__title').press('Escape');
|
||||
await page.getByTestId('rundown-event').locator('div').filter({ hasText: '1' }).press('Alt+E');
|
||||
await expect(page.getByTestId('rundown-event')).toHaveCount(2);
|
||||
|
||||
await page.getByTestId('entry-1').getByTestId('entry__title').fill('opening');
|
||||
await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
|
||||
await page.getByTestId('entry-2').getByTestId('entry__title').fill('closing');
|
||||
await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
|
||||
|
||||
await page.getByTestId('entry-2').click();
|
||||
await page.getByLabel('Note', { exact: true }).fill('remember the zebrafish');
|
||||
await page.getByLabel('Note', { exact: true }).press('Tab');
|
||||
|
||||
// the shortcut has to work from a focused field, which is where it is usually reached for
|
||||
await page.getByTestId('entry-2').getByTestId('entry__title').click();
|
||||
await page.keyboard.press('ControlOrMeta+f');
|
||||
await expect(page.getByPlaceholder('Search...')).toBeVisible();
|
||||
await expect(page.getByPlaceholder('Search...')).toBeFocused();
|
||||
|
||||
await page.keyboard.press('Escape');
|
||||
// a bare query reaches the note, and the result names the field it matched
|
||||
await page.getByPlaceholder('Search...').fill('zebrafish');
|
||||
await expect(page.getByTestId('finder-result')).toHaveCount(1);
|
||||
await expect(page.getByTestId('finder-result-match')).toContainText('Note');
|
||||
|
||||
// a badge scopes the search to one field, without putting syntax in the input
|
||||
const titleFilter = page.getByTestId('finder-filters').getByRole('button', { name: 'Title', exact: true });
|
||||
await titleFilter.click();
|
||||
await expect(page.getByPlaceholder('Search...')).toHaveValue('zebrafish');
|
||||
await expect(page.getByTestId('finder-result')).toHaveCount(0);
|
||||
|
||||
// pressing it again searches every field once more
|
||||
await titleFilter.click();
|
||||
await expect(page.getByTestId('finder-result')).toHaveCount(1);
|
||||
|
||||
// choosing a result closes the finder and selects the entry in the rundown
|
||||
await page.getByPlaceholder('Search...').press('Enter');
|
||||
await expect(page.getByPlaceholder('Search...')).toBeHidden();
|
||||
await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toHaveAttribute('data-selected', 'true');
|
||||
});
|
||||
|
||||
test('Open settings', async ({ page }) => {
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test('teleprompter renders and responds to its primary controls', async ({ page, request }) => {
|
||||
// Earlier feature specs edit the loaded rundown. Restore the real demo project
|
||||
// instead of manufacturing test-only events: its notes are the script fixture.
|
||||
const response = await request.post('/data/db/demo');
|
||||
expect(response.ok()).toBe(true);
|
||||
const loadResponse = await request.get('/api/load/index/5');
|
||||
expect(loadResponse.ok()).toBe(true);
|
||||
|
||||
await page.goto('/teleprompter?script=note&flipV=true');
|
||||
|
||||
const view = page.getByTestId('teleprompter-view');
|
||||
const scroller = page.getByTestId('teleprompter-scroller');
|
||||
const speed = page.getByTestId('teleprompter-speed');
|
||||
|
||||
await expect(view).toBeVisible();
|
||||
await expect(scroller).toBeVisible();
|
||||
await expect(page.getByText('Music plays, holding slide on screens')).toBeVisible();
|
||||
await expect(speed).toContainText('14');
|
||||
await expect(view).toHaveCSS('transform', /^matrix\(1, 0, 0, -1/);
|
||||
|
||||
// Following uses layout coordinates, which must remain stable when the view's
|
||||
// visual coordinates are inverted by a vertical transform.
|
||||
const loadedBlock = page.locator('.teleprompter__block[data-loaded]');
|
||||
await expect(loadedBlock).toBeAttached();
|
||||
const expectedScrollTop = await loadedBlock.evaluate((element) => {
|
||||
const scroller = element.closest('.teleprompter')?.querySelector<HTMLElement>('.teleprompter__scroller');
|
||||
if (!scroller) throw new Error('Teleprompter scroller not found');
|
||||
return Math.max(0, (element as HTMLElement).offsetTop - scroller.clientHeight * 0.25);
|
||||
});
|
||||
await expect
|
||||
.poll(async () => Math.abs((await scroller.evaluate((element) => element.scrollTop)) - expectedScrollTop))
|
||||
.toBeLessThan(2);
|
||||
|
||||
await page.goto('/teleprompter?script=note');
|
||||
|
||||
await page.keyboard.press('Space');
|
||||
await expect.poll(() => scroller.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
|
||||
await page.keyboard.press('Space');
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.keyboard.press('f');
|
||||
await expect(speed).toContainText('15');
|
||||
await expect(page).toHaveURL(/speed=15/);
|
||||
await expect(page).toHaveURL(/flipH=true/);
|
||||
await expect(view).toHaveCSS('transform', /^matrix\(-1/);
|
||||
});
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime",
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"description": "Time keeping for live events",
|
||||
"keywords": [
|
||||
"ontime",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "4.13.0-beta.1",
|
||||
"version": "4.12.0",
|
||||
"name": "ontime-types",
|
||||
"type": "module",
|
||||
"main": "./src/index.ts",
|
||||
|
||||
@@ -11,7 +11,6 @@ export enum OntimeView {
|
||||
StudioClock = 'studio',
|
||||
Countdown = 'countdown',
|
||||
ProjectInfo = 'info',
|
||||
Teleprompter = 'teleprompter',
|
||||
}
|
||||
|
||||
export type OntimeViewPresettable = Exclude<OntimeView, OntimeView.Editor>;
|
||||
|
||||
Reference in New Issue
Block a user