mirror of
https://github.com/cpvalente/ontime.git
synced 2026-09-05 22:39:11 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Carlos Valente
|
f14ad0099e | ||
 Carlos Valente
|
7fc93af909 |
@@ -1,46 +0,0 @@
|
||||
---
|
||||
name: code-review
|
||||
description: Review Ontime changes for concrete correctness, architecture, testing, routing, security, and maintenance issues. For GitHub Copilot review.
|
||||
---
|
||||
|
||||
# Review Ontime changes
|
||||
|
||||
Review as a maintainer. Find material defects, not speculative advice, style preferences, or generic checklists. Approve when no material issue remains.
|
||||
|
||||
## Load relevant context
|
||||
|
||||
Read the full diff, PR description, linked issue, tests, and nearby owning code. Then load only applicable guides:
|
||||
|
||||
- Every non-trivial review: [change assessment](../../../docs/agent-guides/change-assessment.md)
|
||||
- Module placement, server layers, client state, shared packages: [architecture](../../../docs/agent-guides/architecture.md)
|
||||
- Tests or changed behaviour: [testing](../../../docs/agent-guides/testing.md)
|
||||
- Comments, abstractions, naming, complexity: [code quality](../../../docs/agent-guides/code-quality.md)
|
||||
- Authentication, external input, files, integrations, assets, secrets: [security](../../../docs/agent-guides/security.md)
|
||||
- Routes, URLs, websockets, authentication, cookies, presets, assets: [routing and cloud](../../../docs/agent-guides/routing-and-cloud.md)
|
||||
- Rundowns, timers, persistence, imports, cache, realtime: [domain invariants](../../../docs/agent-guides/domain-invariants.md)
|
||||
- Commands, imports, dependencies, formatting, CI claims: [workflow](../../../docs/agent-guides/workflow.md)
|
||||
|
||||
Check a guide and nearby canonical code before citing an Ontime convention. Skip unrelated guides.
|
||||
|
||||
## Review order
|
||||
|
||||
1. Establish intent and affected runtime surfaces.
|
||||
2. Read tests first. Identify claimed behaviour and coverage.
|
||||
3. Trace implementation, errors, and state transitions.
|
||||
4. Check correctness/data integrity, security, architecture/testability, cloud routing, lifecycle/performance, maintainability.
|
||||
5. Verify claimed checks. Never claim unobserved results.
|
||||
|
||||
Passing tests do not prove architecture, routing, comments, or error paths. Review changed behaviour only; include existing problems only when the diff worsens or relies on them.
|
||||
|
||||
## Findings
|
||||
|
||||
Report only concrete, actionable issues. Each finding: tight line range, direct defect, impact and trigger, smallest viable remedy when unclear.
|
||||
|
||||
- **P0 — Critical:** data loss, exploitable vulnerability, broadly broken production. Blocks merge.
|
||||
- **P1 — High:** likely correctness failure or major supported-deployment regression. Blocks merge.
|
||||
- **P2 — Medium:** real edge-case defect, architecture regression, missing business-rule test, stale comment, meaningful maintenance risk. Normally blocks merge.
|
||||
- **P3 — Low:** local improvement with limited impact. No subjective style or tool-managed formatting.
|
||||
|
||||
Order by priority. Prefer few high-confidence findings. No praise or checklist before findings. If none, say so and note verification gaps or residual risk.
|
||||
|
||||
Then give one concise PR-level value/risk/complexity assessment. Never repeat it per finding.
|
||||
@@ -1,22 +0,0 @@
|
||||
# Ontime agent guide
|
||||
|
||||
Make the smallest maintainable change. Keep scope narrow. Inspect nearby code first. Reuse helpers and boundaries when semantics match.
|
||||
|
||||
## Load only relevant guides
|
||||
|
||||
- Commands, validation, formatting, imports, PRs: [workflow](docs/agent-guides/workflow.md).
|
||||
- Non-trivial planning, implementation, review: [change assessment](docs/agent-guides/change-assessment.md).
|
||||
- Module placement, server layers, client state, shared packages: [architecture](docs/agent-guides/architecture.md).
|
||||
- Tests or changed behaviour: [testing](docs/agent-guides/testing.md).
|
||||
- Comments, naming, abstractions, maintainability: [code quality](docs/agent-guides/code-quality.md).
|
||||
- Authentication, external input, files, integrations, assets, secrets: [security](docs/agent-guides/security.md).
|
||||
- Navigation, URLs, API paths, websockets, redirects, cookies, static assets: [routing and cloud](docs/agent-guides/routing-and-cloud.md).
|
||||
- Rundowns, timers, imports, persistence, cache, websockets: [domain invariants](docs/agent-guides/domain-invariants.md).
|
||||
|
||||
Load multiple guides when needed. Skip unrelated guides for mechanical work.
|
||||
|
||||
## Before handoff
|
||||
|
||||
- Check the final diff for scope, stale comments, temporary code, redundant tests, generated files.
|
||||
- If work reveals a missing, stable, reusable system, domain, or product invariant, update its owning guide. Exclude guesses, one-off bugs, and implementation details.
|
||||
- Follow [workflow verification](docs/agent-guides/workflow.md). Report only observed results.
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/cli",
|
||||
"version": "4.13.0",
|
||||
"version": "4.13.0-beta.1",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
@@ -7,15 +7,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#101010" />
|
||||
<meta name="ontime" content="ontime - time keeping for live events" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Ontime" />
|
||||
<link rel="apple-touch-icon" href="ontime-logo.png" />
|
||||
<link rel="icon" type="image/png" href="ontime-logo.png" />
|
||||
<link rel="manifest" href="site.webmanifest" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<title>Ontime</title>
|
||||
<title>ontime</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "ontime-ui",
|
||||
"version": "4.13.0",
|
||||
"version": "4.13.0-beta.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@base-ui/react": "1.7.0",
|
||||
"@base-ui/react": "1.6.0",
|
||||
"@codemirror/commands": "^6.0.0",
|
||||
"@codemirror/lang-css": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
@@ -13,12 +13,12 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fontsource/open-sans": "^5.2.7",
|
||||
"@mantine/hooks": "^9.5.1",
|
||||
"@mantine/hooks": "^8.3.7",
|
||||
"@sentry/react": "^10.59.0",
|
||||
"@table-nav/react": "^0.0.7",
|
||||
"@tanstack/react-query": "^5.101.0",
|
||||
"@tanstack/react-query-devtools": "^5.101.0",
|
||||
"@tanstack/react-table": "^9.1.2",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@uiw/codemirror-theme-vscode": "^4.25.10",
|
||||
"autosize": "^6.0.1",
|
||||
"axios": "^1.18.0",
|
||||
@@ -29,7 +29,7 @@
|
||||
"react-dom": "^19.2.7",
|
||||
"react-fast-compare": "^3.2.2",
|
||||
"react-hook-form": "^7.80.0",
|
||||
"react-icons": "5.7.0",
|
||||
"react-icons": "5.6.0",
|
||||
"react-router": "^8.0.1",
|
||||
"react-virtuoso": "^4.18.7",
|
||||
"zustand": "^5.0.14"
|
||||
@@ -60,8 +60,7 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sentry/vite-plugin": "5.4.0",
|
||||
"@types/node": "catalog:",
|
||||
"@sentry/vite-plugin": "5.1.1",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
@@ -73,8 +72,8 @@
|
||||
"ontime-utils": "workspace:*",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "catalog:",
|
||||
"vite": "8.2.1",
|
||||
"vite-plugin-compression2": "2.5.3",
|
||||
"vite": "8.0.1",
|
||||
"vite-plugin-compression2": "2.5.1",
|
||||
"vite-plugin-svgr": "4.5.0",
|
||||
"vitest": "catalog:"
|
||||
}
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
{
|
||||
"name": "Ontime",
|
||||
"short_name": "Ontime",
|
||||
"name": "ontime",
|
||||
"short_name": "ontime",
|
||||
"icons": [
|
||||
{
|
||||
"src": "ontime-logo-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
"src": "favicon.ico",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "ontime-logo-512.png",
|
||||
"sizes": "512x512",
|
||||
"src": "ontime-logo.png",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"scope": "./",
|
||||
"start_url": "./",
|
||||
"display": "standalone",
|
||||
"theme_color": "#101010",
|
||||
"display": "",
|
||||
"theme_color": "#121212",
|
||||
"background_color": "#101010"
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
|
||||
"theme_color": "#121212",
|
||||
"background_color": "#101010",
|
||||
"display": "standalone"
|
||||
}
|
||||
@@ -20,6 +20,7 @@ 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'));
|
||||
@@ -95,6 +96,15 @@ 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 />} />
|
||||
@@ -165,6 +175,7 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
|
||||
[OntimeView.StudioClock]: StudioClock,
|
||||
[OntimeView.Countdown]: Countdown,
|
||||
[OntimeView.ProjectInfo]: ProjectInfo,
|
||||
[OntimeView.Teleprompter]: Teleprompter,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -214,8 +225,14 @@ function PresetView() {
|
||||
const Component = PresetViewMap[preset.target as OntimeViewPresettable];
|
||||
return (
|
||||
<PresetContext value={preset}>
|
||||
<ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
|
||||
<ViewLoader>
|
||||
<ViewNavigationMenu
|
||||
isNavigationLocked={getIsNavigationLocked()}
|
||||
suppressSettings
|
||||
suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
|
||||
/>
|
||||
{Component ? <Component /> : <NotFound />}
|
||||
</ViewLoader>
|
||||
</PresetContext>
|
||||
);
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,5 +1,5 @@
|
||||
import axios from 'axios';
|
||||
import type { ReportData } from 'ontime-types';
|
||||
import { OntimeReport } from 'ontime-types';
|
||||
|
||||
import { ontimeQueryClient } from '../../common/queryClient';
|
||||
import { REPORT, apiEntryUrl } from './constants';
|
||||
@@ -8,13 +8,18 @@ import type { RequestOptions } from './requestOptions';
|
||||
export const reportUrl = `${apiEntryUrl}/report`;
|
||||
|
||||
/**
|
||||
* HTTP request to fetch the report
|
||||
* HTTP request to fetch all reports
|
||||
*/
|
||||
export async function fetchReport(options?: RequestOptions): Promise<ReportData> {
|
||||
export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
|
||||
const res = await axios.get(reportUrl, { signal: options?.signal });
|
||||
return res.data;
|
||||
}
|
||||
|
||||
export async function deleteReport(id: string) {
|
||||
await axios.delete(`${reportUrl}/${id}`);
|
||||
await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
|
||||
}
|
||||
|
||||
export async function deleteAllReport() {
|
||||
await axios.delete(`${reportUrl}/all`);
|
||||
await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
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,6 +0,0 @@
|
||||
.eyebrow {
|
||||
font-size: $aux-text-size;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
|
||||
import style from './Eyebrow.module.scss';
|
||||
|
||||
interface EyebrowProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Eyebrow({ children, className }: PropsWithChildren<EyebrowProps>) {
|
||||
return <span className={cx([style.eyebrow, className])}>{children}</span>;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
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,3 +1,7 @@
|
||||
.separator {
|
||||
border-color: $border-color-ondark;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -19,15 +23,14 @@
|
||||
|
||||
width: 22rem;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block: 1rem;
|
||||
|
||||
background-color: $gray-1250;
|
||||
color: $ui-white;
|
||||
border-right: 1px solid $gray-1100;
|
||||
box-shadow: $box-shadow-right;
|
||||
|
||||
&[data-open] {
|
||||
transform: translateX(0%);
|
||||
@@ -47,51 +50,22 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
min-height: 4rem;
|
||||
padding: 0.75rem 1rem 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid $white-10;
|
||||
}
|
||||
height: 3.5rem;
|
||||
padding-inline: 1.5rem;
|
||||
|
||||
.headerText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.clientName {
|
||||
font-size: $aux-text-size;
|
||||
color: $gray-600;
|
||||
@include ellipsis-text;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-block: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.groupLabel {
|
||||
padding: 0.5rem 1.25rem 0.25rem;
|
||||
color: $gray-700;
|
||||
.note {
|
||||
margin-left: auto;
|
||||
color: $white-20;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Dialog } from '@base-ui/react/dialog';
|
||||
import { useDisclosure, useFullscreenDocument } from '@mantine/hooks';
|
||||
import { memo, PropsWithChildren } from 'react';
|
||||
import { IoClose, IoExpand, IoLockClosedOutline, IoPencilOutline, IoSwapVertical } from 'react-icons/io5';
|
||||
import { useDisclosure, useFullscreen } from '@mantine/hooks';
|
||||
import { memo } from 'react';
|
||||
import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
|
||||
import { LuCoffee } from 'react-icons/lu';
|
||||
import { useLocation } from 'react-router';
|
||||
|
||||
@@ -14,11 +14,9 @@ import { useClientStore } from '../../stores/clientStore';
|
||||
import { useViewOptionsStore } from '../../stores/viewOptions';
|
||||
import IconButton from '../buttons/IconButton';
|
||||
import { RenameClientModal } from '../client-modal/RenameClientModal';
|
||||
import Eyebrow from '../eyebrow/Eyebrow';
|
||||
import ClientLink from './client-link/ClientLink';
|
||||
import EditorNavigation from './editor-navigation/EditorNavigation';
|
||||
import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
|
||||
import NavigationMenuToggle from './navigation-menu-item/NavigationMenuToggle';
|
||||
import OtherAddresses from './other-addresses/OtherAddresses';
|
||||
|
||||
import style from './NavigationMenu.module.scss';
|
||||
@@ -35,7 +33,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
const isSmallScreen = useIsSmallScreen();
|
||||
|
||||
const [isRenameOpen, handlers] = useDisclosure(false);
|
||||
const { fullscreen, toggle } = useFullscreenDocument();
|
||||
const { fullscreen, toggle } = useFullscreen();
|
||||
const { mirror, toggleMirror } = useViewOptionsStore();
|
||||
const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
|
||||
const location = useLocation();
|
||||
@@ -54,40 +52,34 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
<RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
|
||||
<Dialog.Popup className={style.drawer}>
|
||||
<div className={style.header}>
|
||||
<div className={style.headerText}>
|
||||
<Dialog.Title className={style.title}>Ontime</Dialog.Title>
|
||||
{name && <span className={style.clientName}>{name}</span>}
|
||||
</div>
|
||||
<IconButton variant='subtle-white' size='large' aria-label='Close menu' onClick={onClose}>
|
||||
<Dialog.Title>Ontime</Dialog.Title>
|
||||
<IconButton variant='subtle-white' size='large' onClick={onClose}>
|
||||
<IoClose />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={style.body}>
|
||||
<MenuGroup label='This screen'>
|
||||
{supportsFullscreen && (
|
||||
<NavigationMenuToggle checked={fullscreen} icon={<IoExpand />} label='Fullscreen' onToggle={toggle} />
|
||||
)}
|
||||
<NavigationMenuToggle
|
||||
checked={mirror}
|
||||
icon={<IoSwapVertical />}
|
||||
label='Flip Screen'
|
||||
onToggle={() => toggleMirror()}
|
||||
/>
|
||||
{canUseWakeLock && (
|
||||
<NavigationMenuToggle
|
||||
checked={keepAwake}
|
||||
icon={<LuCoffee />}
|
||||
label='Keep Awake'
|
||||
onToggle={toggleKeepAwake}
|
||||
/>
|
||||
)}
|
||||
<NavigationMenuItem onClick={handlers.open}>
|
||||
<IoPencilOutline />
|
||||
Rename Client
|
||||
<NavigationMenuItem active={fullscreen} onClick={toggle}>
|
||||
Toggle Fullscreen
|
||||
{fullscreen ? <IoContract /> : <IoExpand />}
|
||||
</NavigationMenuItem>
|
||||
</MenuGroup>
|
||||
)}
|
||||
<NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
|
||||
Flip Screen
|
||||
<IoSwapVertical />
|
||||
{mirror && <span className={style.note}>Active</span>}
|
||||
</NavigationMenuItem>
|
||||
{canUseWakeLock && (
|
||||
<NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
|
||||
Keep Awake
|
||||
<LuCoffee />
|
||||
{keepAwake && <span className={style.note}>Active</span>}
|
||||
</NavigationMenuItem>
|
||||
)}
|
||||
<NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
|
||||
|
||||
<hr className={style.separator} />
|
||||
|
||||
<MenuGroup label='Ontime app'>
|
||||
<EditorNavigation />
|
||||
<ClientLink
|
||||
to='cuesheet'
|
||||
@@ -97,17 +89,13 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
<IoLockClosedOutline />
|
||||
Cuesheet
|
||||
</ClientLink>
|
||||
<ClientLink
|
||||
to='op'
|
||||
current={location.pathname === '/op'}
|
||||
postAction={isSmallScreen ? onClose : undefined}
|
||||
>
|
||||
<ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
|
||||
<IoLockClosedOutline />
|
||||
Operator
|
||||
</ClientLink>
|
||||
</MenuGroup>
|
||||
|
||||
<MenuGroup label='Views'>
|
||||
<hr className={style.separator} />
|
||||
|
||||
{navigatorConstants.map((route) => (
|
||||
<ClientLink
|
||||
key={route.url}
|
||||
@@ -118,29 +106,21 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
|
||||
{route.label}
|
||||
</ClientLink>
|
||||
))}
|
||||
</MenuGroup>
|
||||
|
||||
<PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
|
||||
</div>
|
||||
|
||||
{isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
|
||||
{isLocalhost && (
|
||||
<div>
|
||||
<OtherAddresses currentLocation={location.pathname} />
|
||||
</div>
|
||||
)}
|
||||
</Dialog.Popup>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function MenuGroup({ label, children }: PropsWithChildren<{ label: string }>) {
|
||||
return (
|
||||
<div className={style.group}>
|
||||
<div className={style.groupLabel}>
|
||||
<Eyebrow>{label}</Eyebrow>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
|
||||
const location = useLocation();
|
||||
const { data: urlPresets } = useUrlPresets();
|
||||
@@ -149,7 +129,8 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
|
||||
if (navPresets.length === 0) return null;
|
||||
|
||||
return (
|
||||
<MenuGroup label='Presets'>
|
||||
<>
|
||||
<hr className={style.separator} />
|
||||
{navPresets.map((preset) => (
|
||||
<ClientLink
|
||||
key={preset.alias}
|
||||
@@ -160,6 +141,6 @@ function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean;
|
||||
{preset.alias}
|
||||
</ClientLink>
|
||||
))}
|
||||
</MenuGroup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useHotkeys } from '@mantine/hooks';
|
||||
import { memo, useCallback, useState } from 'react';
|
||||
import { type HotkeyItem, useDisclosure, useHotkeys } from '@mantine/hooks';
|
||||
import { memo } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { hasCustomParams } from '../../stores/savedViewParams';
|
||||
@@ -13,40 +13,32 @@ interface ViewNavigationMenuProps {
|
||||
isNavigationLocked?: boolean;
|
||||
/** prevent showing settings */
|
||||
suppressSettings?: boolean;
|
||||
}
|
||||
|
||||
function isInteractiveKeyboardAction(target: EventTarget | null): boolean {
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
target.closest(
|
||||
'button, a, input, textarea, select, [role="button"], [role="checkbox"], [role="switch"], [contenteditable]:not([contenteditable="false"])',
|
||||
) !== null
|
||||
);
|
||||
suppressSpaceHotkey?: boolean;
|
||||
}
|
||||
|
||||
export default memo(ViewNavigationMenu);
|
||||
function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: ViewNavigationMenuProps) {
|
||||
const [isMenuOpen, menuHandler] = useDisclosure();
|
||||
const { open: showEditFormDrawer } = useViewParamsEditorStore();
|
||||
const [searchParams] = useSearchParams();
|
||||
const hasSavedChanges = hasCustomParams(searchParams);
|
||||
|
||||
const toggleMenu = useCallback(() => setIsMenuOpen((prev) => !prev), []);
|
||||
const closeMenu = useCallback(() => setIsMenuOpen(false), []);
|
||||
|
||||
useHotkeys([
|
||||
// Omitting the binding also avoids useHotkeys preventing the default action.
|
||||
const spaceHotkey: HotkeyItem[] = suppressSpaceHotkey
|
||||
? []
|
||||
: [
|
||||
[
|
||||
'Space',
|
||||
(event) => {
|
||||
if (isNavigationLocked || isInteractiveKeyboardAction(event.target)) return;
|
||||
event.preventDefault();
|
||||
toggleMenu();
|
||||
() => {
|
||||
if (isNavigationLocked) return;
|
||||
menuHandler.toggle();
|
||||
},
|
||||
{ preventDefault: false },
|
||||
{ preventDefault: true },
|
||||
],
|
||||
];
|
||||
|
||||
useHotkeys([
|
||||
...spaceHotkey,
|
||||
[
|
||||
'mod + ,',
|
||||
() => {
|
||||
@@ -64,11 +56,11 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
|
||||
return (
|
||||
<>
|
||||
<FloatingNavigation
|
||||
toggleMenu={isNavigationLocked ? undefined : toggleMenu}
|
||||
toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
|
||||
toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
|
||||
hasSavedChanges={hasSavedChanges}
|
||||
/>
|
||||
{!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={closeMenu} />}
|
||||
{!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+12
-45
@@ -2,68 +2,35 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.625rem 1.25rem;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
|
||||
border-left: 3px solid transparent;
|
||||
color: $gray-200;
|
||||
font-size: $text-body-size;
|
||||
border-left: 4px solid transparent;
|
||||
color: $action-text-color;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition-property: color, background-color;
|
||||
transition-property: color;
|
||||
transition-duration: $transition-time-action;
|
||||
|
||||
// keep icons on a fixed box so labels align regardless of the glyph
|
||||
> svg {
|
||||
flex-shrink: 0;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
color: $gray-500;
|
||||
transition: color $transition-time-action;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $white-3;
|
||||
color: $ui-white;
|
||||
|
||||
> svg {
|
||||
color: $gray-300;
|
||||
}
|
||||
color: $ontime-color;
|
||||
background-color: $gray-1350;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $white-7;
|
||||
background-color: $border-color-ondark;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:focus {
|
||||
outline: 2px solid $blue-500;
|
||||
outline-offset: -2px;
|
||||
background-color: $white-3;
|
||||
}
|
||||
|
||||
// toggle rows are labels, the focusable control sits inside them
|
||||
&:focus-within {
|
||||
background-color: $white-3;
|
||||
background-color: $gray-1350;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $bg-active;
|
||||
border-left-color: $blue-400;
|
||||
color: $ui-white;
|
||||
font-weight: 600;
|
||||
|
||||
> svg {
|
||||
color: $blue-300;
|
||||
background-color: $gray-1300;
|
||||
border-left: 4px solid $action-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@include ellipsis-text;
|
||||
}
|
||||
|
||||
+2
-5
@@ -1,6 +1,6 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import { isKeyEnter, isKeySpace } from '../../../utils/keyEvent';
|
||||
import { isKeyEnter } from '../../../utils/keyEvent';
|
||||
import { cx } from '../../../utils/styleUtils';
|
||||
|
||||
import style from './NavigationMenuItem.module.scss';
|
||||
@@ -11,7 +11,6 @@ interface NavigationMenuItemProps {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
/** A row in the navigation menu, and the single place which decides how a row reacts to input */
|
||||
export default function NavigationMenuItem({
|
||||
active,
|
||||
className,
|
||||
@@ -25,9 +24,7 @@ export default function NavigationMenuItem({
|
||||
role='button'
|
||||
onClick={onClick}
|
||||
onKeyDown={(event) => {
|
||||
if (isKeyEnter(event) || isKeySpace(event)) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (isKeyEnter(event)) {
|
||||
onClick();
|
||||
}
|
||||
}}
|
||||
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import Switch from '../../switch/Switch';
|
||||
|
||||
import style from './NavigationMenuItem.module.scss';
|
||||
|
||||
interface NavigationMenuToggleProps {
|
||||
checked: boolean;
|
||||
icon: ReactNode;
|
||||
label: string;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
/** A menu row which reflects, and toggles, an on/off state */
|
||||
export default function NavigationMenuToggle({ checked, icon, label, onToggle }: NavigationMenuToggleProps) {
|
||||
return (
|
||||
<label className={style.link}>
|
||||
{icon}
|
||||
<span className={style.label}>{label}</span>
|
||||
<Switch checked={checked} onCheckedChange={onToggle} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
+4
-34
@@ -1,52 +1,22 @@
|
||||
.footer {
|
||||
flex: 0 0 auto;
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid $white-10;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 1.25rem 0.25rem;
|
||||
font-size: calc(1rem - 2px);
|
||||
margin-left: 1rem;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.interfaces {
|
||||
padding: 0.25rem 1.25rem 0;
|
||||
padding: 0.5rem 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.interface {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
> div {
|
||||
max-width: 100%;
|
||||
|
||||
> button:first-child {
|
||||
min-width: 0;
|
||||
max-width: calc(100% - 1.5rem);
|
||||
justify-content: flex-start;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
}
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.interfaceCopy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goIcon {
|
||||
flex: 0 0 auto;
|
||||
@include rotate-fourty-five;
|
||||
margin-left: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
+12
-15
@@ -3,8 +3,6 @@ import { IoArrowUp } from 'react-icons/io5';
|
||||
import useInfo from '../../../hooks-query/useInfo';
|
||||
import { linkToOtherHost, openLink } from '../../../utils/linkUtils';
|
||||
import CopyTag from '../../copy-tag/CopyTag';
|
||||
import Eyebrow from '../../eyebrow/Eyebrow';
|
||||
import { getExternalInterfaces } from './otherAddresses.utils';
|
||||
|
||||
import style from './OtherAddresses.module.scss';
|
||||
|
||||
@@ -14,33 +12,32 @@ interface OtherAddressesProps {
|
||||
|
||||
export default function OtherAddresses({ currentLocation }: OtherAddressesProps) {
|
||||
const { data } = useInfo();
|
||||
const externalInterfaces = getExternalInterfaces(data.networkInterfaces);
|
||||
|
||||
if (externalInterfaces.length === 0) {
|
||||
// there is no point showing this if we only have one interface
|
||||
if (data.networkInterfaces.length < 2) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.footer}>
|
||||
<div className={style.header}>
|
||||
<Eyebrow>Also available at</Eyebrow>
|
||||
</div>
|
||||
<>
|
||||
<div className={style.header}>Accessible on external networks</div>
|
||||
<div className={style.interfaces}>
|
||||
{externalInterfaces.map((nif) => {
|
||||
{data?.networkInterfaces?.map((nif) => {
|
||||
if (nif.name === 'localhost') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const address = linkToOtherHost(nif.address, currentLocation);
|
||||
|
||||
return (
|
||||
<div key={nif.name} className={style.interface}>
|
||||
<CopyTag copyValue={address} onClick={() => openLink(address)} size='small'>
|
||||
<CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
|
||||
<span className={style.interfaceCopy}>
|
||||
<span className={style.address}>{nif.address}</span>
|
||||
<IoArrowUp className={style.goIcon} />
|
||||
{nif.address} <IoArrowUp className={style.goIcon} />
|
||||
</span>
|
||||
</CopyTag>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
-31
@@ -1,31 +0,0 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
|
||||
import { getExternalInterfaces } from '../otherAddresses.utils';
|
||||
|
||||
describe('getExternalInterfaces', () => {
|
||||
test('returns no alternatives when localhost is the only interface', () => {
|
||||
expect(getExternalInterfaces([{ name: 'localhost', address: '127.0.0.1' }])).toEqual([]);
|
||||
});
|
||||
|
||||
test('does not treat an interface name as deployment information', () => {
|
||||
expect(
|
||||
getExternalInterfaces([
|
||||
{ name: 'localhost', address: '127.0.0.1' },
|
||||
{ name: 'cloud', address: '192.168.1.42' },
|
||||
]),
|
||||
).toEqual([{ name: 'cloud', address: '192.168.1.42' }]);
|
||||
});
|
||||
|
||||
test('returns non-local interfaces when local and external interfaces are available', () => {
|
||||
expect(
|
||||
getExternalInterfaces([
|
||||
{ name: 'localhost', address: '127.0.0.1' },
|
||||
{ name: 'Wi-Fi', address: '192.168.1.42' },
|
||||
{ name: 'Ethernet', address: '10.0.0.42' },
|
||||
]),
|
||||
).toEqual([
|
||||
{ name: 'Wi-Fi', address: '192.168.1.42' },
|
||||
{ name: 'Ethernet', address: '10.0.0.42' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
-6
@@ -1,6 +0,0 @@
|
||||
import { type NetworkInterface } from 'ontime-types';
|
||||
|
||||
/** Returns network addresses other than the localhost address injected by the info endpoint. */
|
||||
export function getExternalInterfaces(interfaces: NetworkInterface[]) {
|
||||
return interfaces.filter((networkInterface) => networkInterface.name !== 'localhost');
|
||||
}
|
||||
@@ -2,12 +2,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
> span {
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
// attempt to match with ontimeTextInputs
|
||||
|
||||
@@ -1,77 +1,37 @@
|
||||
.multiOptionList {
|
||||
overflow-y: auto;
|
||||
max-height: 12rem;
|
||||
background: $gray-1200;
|
||||
border: 1px solid $gray-1100;
|
||||
border-radius: $component-border-radius-md;
|
||||
.inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
// styles from subtle button
|
||||
.toggleSelect {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $gray-300;
|
||||
gap: 0.25rem;
|
||||
padding-inline: 0.5rem;
|
||||
height: 2.5rem;
|
||||
background: $gray-1050;
|
||||
color: $ui-white;
|
||||
line-height: 1em;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color $transition-time-action,
|
||||
border-color $transition-time-action,
|
||||
color $transition-time-action;
|
||||
border-radius: $component-border-radius-md;
|
||||
|
||||
&:hover {
|
||||
&:hover:not(:disabled):not(:active) {
|
||||
background: $gray-1000;
|
||||
color: $ui-white;
|
||||
color: $blue-500;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:active:not(:disabled) {
|
||||
background: $gray-1100;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
outline: 2px solid $blue-500;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $bg-active;
|
||||
box-shadow: inset 3px 0 $blue-400;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $white-7;
|
||||
}
|
||||
|
||||
> [role='checkbox'] {
|
||||
flex: 0 0 auto;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border: 1px solid $gray-400;
|
||||
|
||||
&[data-unchecked] {
|
||||
background: $gray-1100;
|
||||
}
|
||||
|
||||
&[data-checked] {
|
||||
border-color: $blue-400;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
border-color: $gray-1250;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
margin-left: 0.25rem;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
background: var(--user-bg, $gray-900);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { ComponentProps, useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { isStringBoolean } from '../../../views/common/viewUtils';
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
import Checkbox from '../checkbox/Checkbox';
|
||||
import Input from '../input/input/Input';
|
||||
import Select, { SelectOption } from '../select/Select';
|
||||
@@ -50,7 +49,13 @@ export default function ParamInput({ paramField }: ParamInputProps) {
|
||||
}
|
||||
|
||||
if (type === 'boolean') {
|
||||
return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
|
||||
const paramValue = searchParams.get(id);
|
||||
return (
|
||||
<ControlledSwitch
|
||||
id={id}
|
||||
initialValue={paramValue === null ? Boolean(defaultValue) : isStringBoolean(paramValue)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'number') {
|
||||
@@ -108,20 +113,18 @@ function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
|
||||
return (
|
||||
<>
|
||||
<input name={id} hidden readOnly value={paramState.join(',')} />
|
||||
<div className={style.multiOptionList}>
|
||||
<div className={style.inline}>
|
||||
{values.map((option) => {
|
||||
const selected = paramState.includes(option.value);
|
||||
|
||||
return (
|
||||
<label
|
||||
key={option.value}
|
||||
className={cx([style.toggleSelect, selected && style.selected])}
|
||||
className={style.toggleSelect}
|
||||
style={{
|
||||
'--user-bg': option.colour,
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={selected}
|
||||
checked={paramState.includes(option.value)}
|
||||
onCheckedChange={(checked) => toggleValue(option.value, checked as boolean)}
|
||||
/>
|
||||
{option.label}
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
.drawerFooter {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: $section-spacing;
|
||||
|
||||
button {
|
||||
padding: 0 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -24,11 +34,11 @@
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block: 1rem 1.5rem;
|
||||
|
||||
background-color: $ui-black;
|
||||
background-color: $gray-1250;
|
||||
color: $ui-white;
|
||||
border-left: 1px solid $gray-1100;
|
||||
box-shadow: $box-shadow-l1;
|
||||
|
||||
&[data-open] {
|
||||
transform: translateX(0%);
|
||||
@@ -48,54 +58,36 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
padding-inline: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
min-height: 4rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
height: 3.5rem;
|
||||
|
||||
.headerText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.target {
|
||||
font-size: $aux-text-size;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
padding-inline: 1rem;
|
||||
padding-bottom: 10vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
padding-inline: 1rem;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
background-color: $ui-black;
|
||||
border-top: 1px solid $white-10;
|
||||
}
|
||||
|
||||
.sectionList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 2rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
@@ -4,7 +4,6 @@ import { FormEvent, memo } from 'react';
|
||||
import { IoClose } from 'react-icons/io5';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { viewLabels } from '../../../viewerConfig';
|
||||
import useViewSettings from '../../hooks-query/useViewSettings';
|
||||
import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
|
||||
import { useSavedViewParams } from '../../stores/savedViewParams';
|
||||
@@ -72,17 +71,8 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
|
||||
<Dialog.Backdrop className={style.backdrop} />
|
||||
<Dialog.Popup className={style.drawer}>
|
||||
<div className={style.header}>
|
||||
<div className={style.headerText}>
|
||||
<Dialog.Title className={style.title}>Customise</Dialog.Title>
|
||||
<span className={style.target}>{viewLabels[target]}</span>
|
||||
</div>
|
||||
<IconButton
|
||||
variant='subtle-white'
|
||||
size='large'
|
||||
aria-label='Close'
|
||||
data-testid='close-view-params'
|
||||
onClick={handleClose}
|
||||
>
|
||||
<Dialog.Title>Customise</Dialog.Title>
|
||||
<IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
|
||||
<IoClose />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,10 @@
|
||||
.presetSection {
|
||||
background-color: $gray-1350;
|
||||
border: 1px solid $white-10;
|
||||
border-radius: $component-border-radius-md;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 2.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.presetList {
|
||||
border-top: 1px solid $white-7;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 1rem 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
max-height: 10rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
@@ -25,39 +14,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: $inner-section-text-size;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $white-7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $bg-active;
|
||||
box-shadow: inset 3px 0 $blue-400;
|
||||
color: $ui-white;
|
||||
font-weight: 600;
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.presetName {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.presetActions {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.current {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: auto;
|
||||
color: $blue-400;
|
||||
font-size: $aux-text-size;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { useSearchParams } from 'react-router';
|
||||
import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
import Button from '../buttons/Button';
|
||||
import Eyebrow from '../eyebrow/Eyebrow';
|
||||
|
||||
import style from './ViewParamsPresets.module.scss';
|
||||
|
||||
@@ -27,31 +26,22 @@ export function ViewParamsPresets({ target }: { target: OntimeView }) {
|
||||
|
||||
return (
|
||||
<div className={style.presetSection}>
|
||||
<div className={style.header}>
|
||||
<Eyebrow>Saved presets</Eyebrow>
|
||||
</div>
|
||||
<div className={style.presetList}>
|
||||
{viewPresets.map((preset) => {
|
||||
const active = searchParams.get('alias') === preset.alias;
|
||||
return (
|
||||
<div key={preset.alias} className={cx([style.preset, active && style.active])}>
|
||||
<span className={style.presetName}>{preset.alias}</span>
|
||||
{active ? (
|
||||
<span className={style.current}>Current</span>
|
||||
) : (
|
||||
<div>{preset.alias}</div>
|
||||
<Button
|
||||
variant='ghosted'
|
||||
size='small'
|
||||
variant={active ? 'ghosted' : 'subtle-white'}
|
||||
onClick={() => handleRecall(preset)}
|
||||
disabled={active}
|
||||
className={style.presetActions}
|
||||
>
|
||||
Apply
|
||||
{active ? 'Applied' : 'Apply'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+22
-92
@@ -1,118 +1,48 @@
|
||||
.section {
|
||||
overflow: hidden;
|
||||
|
||||
color: $ui-white;
|
||||
font-size: 1rem;
|
||||
background-color: $white-3;
|
||||
border: 1px solid $gray-1100;
|
||||
border-radius: $component-border-radius-md;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
|
||||
color: $gray-300;
|
||||
height: 2rem;
|
||||
|
||||
&.collapsible {
|
||||
cursor: pointer;
|
||||
transition-property: color, background-color;
|
||||
transition-duration: $transition-time-action;
|
||||
|
||||
&:hover {
|
||||
background-color: $white-3;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $blue-500;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/** marks a section which holds values coming from the URL */
|
||||
.customised {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background-color: $active-indicator;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
flex-shrink: 0;
|
||||
rotate: 180deg;
|
||||
transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
||||
|
||||
&.closed {
|
||||
rotate: 0deg;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
padding-inline: 1rem;
|
||||
border-top: 1px solid $white-7;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
row-gap: 0.25rem;
|
||||
padding: 0.75rem 0;
|
||||
margin-top: $section-spacing;
|
||||
font-size: $inner-section-text-size;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $white-7;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Compact controls sit beside their label instead of below it.
|
||||
* Placement is done with grid areas so that the markup stays flat.
|
||||
*/
|
||||
.inline {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
|
||||
> .title {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
> .description {
|
||||
grid-area: 2 / 1;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
grid-area: 1 / 2 / span 2;
|
||||
}
|
||||
color: $label-gray;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $ui-white;
|
||||
font-size: $inner-section-text-size;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $gray-400;
|
||||
font-size: $aux-text-size;
|
||||
line-height: 1.4;
|
||||
font-size: $inner-section-text-size;
|
||||
display: block;
|
||||
color: $modal-note-color;
|
||||
}
|
||||
|
||||
.closed {
|
||||
transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
.open {
|
||||
transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { useLocalStorage } from '@mantine/hooks';
|
||||
import { IoChevronDown } from 'react-icons/io5';
|
||||
import { useSearchParams } from 'react-router';
|
||||
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
import Eyebrow from '../eyebrow/Eyebrow';
|
||||
import { OptionTitle } from './constants';
|
||||
import ParamInput from './ParamInput';
|
||||
import { type ParamField } from './viewParams.types';
|
||||
@@ -16,74 +14,50 @@ interface ViewParamsSectionProps {
|
||||
options: ParamField[];
|
||||
}
|
||||
|
||||
/** Fields which are compact enough to share a row with their label */
|
||||
function isInlineField(option: ParamField): boolean {
|
||||
return option.type === 'boolean' || option.type === 'colour';
|
||||
}
|
||||
|
||||
export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
|
||||
const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// hidden options are inputs without a UI, there is nothing to frame them with
|
||||
if (title === OptionTitle.Hidden) {
|
||||
return <HiddenContents options={options} />;
|
||||
const handleCollapse = () => {
|
||||
if (collapsible) {
|
||||
setCollapsed((prev) => !prev);
|
||||
}
|
||||
|
||||
const isCollapsed = Boolean(collapsible && collapsed);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={style.section}>
|
||||
<SectionHeader
|
||||
title={title}
|
||||
isCustomised={options.some((option) => searchParams.has(option.id))}
|
||||
collapsed={isCollapsed}
|
||||
onToggle={collapsible ? () => setCollapsed((prev) => !prev) : undefined}
|
||||
/>
|
||||
{/* collapsed options stay mounted: the form reads its values from the DOM */}
|
||||
<div className={cx([style.options, isCollapsed && style.hidden])}>
|
||||
{options.map((option) => (
|
||||
<label key={option.title} className={cx([style.label, isInlineField(option) && style.inline])}>
|
||||
<span className={style.title}>{option.title}</span>
|
||||
<span className={style.description}>{option.description}</span>
|
||||
<ParamInput paramField={option} />
|
||||
</label>
|
||||
))}
|
||||
{title === OptionTitle.Hidden ? (
|
||||
<HiddenContents options={options} />
|
||||
) : (
|
||||
<>
|
||||
<div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
|
||||
{title}
|
||||
{collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
|
||||
</div>
|
||||
<SectionContents options={options} collapsed={collapsed} />
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SectionHeaderProps {
|
||||
title: string;
|
||||
isCustomised: boolean;
|
||||
interface SectionContentsProps {
|
||||
options: ParamField[];
|
||||
collapsed: boolean;
|
||||
/** a header without a toggle belongs to a section which cannot collapse */
|
||||
onToggle?: () => void;
|
||||
}
|
||||
|
||||
function SectionHeader({ title, isCustomised, collapsed, onToggle }: SectionHeaderProps) {
|
||||
const label = (
|
||||
<Eyebrow className={style.sectionTitle}>
|
||||
{title}
|
||||
{isCustomised && <span className={style.customised} title='Contains custom values' />}
|
||||
</Eyebrow>
|
||||
);
|
||||
|
||||
if (!onToggle) {
|
||||
return <div className={style.sectionHeader}>{label}</div>;
|
||||
}
|
||||
|
||||
function SectionContents({ options, collapsed }: SectionContentsProps) {
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
className={cx([style.sectionHeader, style.collapsible])}
|
||||
aria-expanded={!collapsed}
|
||||
onClick={onToggle}
|
||||
>
|
||||
{label}
|
||||
<IoChevronDown className={cx([style.chevron, collapsed && style.closed])} />
|
||||
</button>
|
||||
<>
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
|
||||
<span className={style.title}>{option.title}</span>
|
||||
<span className={style.description}>{option.description}</span>
|
||||
<ParamInput paramField={option} />
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+31
-1
@@ -228,11 +228,41 @@ 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,6 +155,14 @@ 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) {
|
||||
|
||||
@@ -1,34 +1,17 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import type { ReportData } from 'ontime-types';
|
||||
import { OntimeReport } from 'ontime-types';
|
||||
import { MILLIS_PER_HOUR } from 'ontime-utils';
|
||||
|
||||
import { REPORT } from '../api/constants';
|
||||
import { fetchReport } from '../api/report';
|
||||
|
||||
const emptyReport: ReportData = {
|
||||
eventReports: {},
|
||||
rundown: null,
|
||||
show: {
|
||||
plannedStart: null,
|
||||
plannedEnd: null,
|
||||
plannedDuration: null,
|
||||
actualStart: null,
|
||||
actualEnd: null,
|
||||
actualDuration: null,
|
||||
},
|
||||
};
|
||||
|
||||
export default function useReport() {
|
||||
const { data: report, refetch } = useQuery<ReportData>({
|
||||
const { data, refetch } = useQuery<OntimeReport>({
|
||||
queryKey: REPORT,
|
||||
queryFn: ({ signal }) => fetchReport({ signal }),
|
||||
placeholderData: (previousData) => previousData,
|
||||
placeholderData: (previousData, _previousQuery) => previousData,
|
||||
staleTime: MILLIS_PER_HOUR,
|
||||
});
|
||||
|
||||
return {
|
||||
data: report?.eventReports ?? emptyReport.eventReports,
|
||||
report: report ?? emptyReport,
|
||||
refetch,
|
||||
};
|
||||
return { data: data ?? {}, refetch };
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
|
||||
import { RefObject, useCallback, useEffect } from 'react';
|
||||
|
||||
function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
|
||||
componentRef: RefObject<ComponentRef | null>,
|
||||
scrollRef: RefObject<ScrollRef | null>,
|
||||
componentRef: RefObject<ComponentRef>,
|
||||
scrollRef: RefObject<ScrollRef>,
|
||||
topOffset: number,
|
||||
) {
|
||||
if (!componentRef.current || !scrollRef.current) {
|
||||
@@ -21,16 +21,18 @@ interface UseFollowComponentProps {
|
||||
followRef: RefObject<HTMLElement | null>;
|
||||
scrollRef: RefObject<HTMLElement | null>;
|
||||
doFollow: boolean;
|
||||
followTrigger: MaybeString; // this would be an entry id or null
|
||||
getTopOffset: () => number;
|
||||
topOffset?: number;
|
||||
setScrollFlag?: (newValue: boolean) => void;
|
||||
followTrigger?: MaybeString; // this would be an entry id or null
|
||||
}
|
||||
|
||||
export default function useFollowComponent({
|
||||
followRef,
|
||||
scrollRef,
|
||||
doFollow,
|
||||
topOffset = 100,
|
||||
setScrollFlag,
|
||||
followTrigger,
|
||||
getTopOffset,
|
||||
}: UseFollowComponentProps) {
|
||||
// when trigger moves, view should follow
|
||||
useEffect(() => {
|
||||
@@ -39,17 +41,25 @@ export default function useFollowComponent({
|
||||
}
|
||||
|
||||
if (followRef.current && scrollRef.current) {
|
||||
setScrollFlag?.(true);
|
||||
// Use requestAnimationFrame to ensure the component is fully loaded
|
||||
window.requestAnimationFrame(() => {
|
||||
// resolve the offset after layout, so that measured values are up to date
|
||||
scrollToComponent(followRef, scrollRef, getTopOffset());
|
||||
scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
|
||||
setScrollFlag?.(false);
|
||||
});
|
||||
}
|
||||
}, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);
|
||||
}, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
|
||||
|
||||
const scrollToRefComponent = useCallback(() => {
|
||||
scrollToComponent(followRef, scrollRef, getTopOffset());
|
||||
}, [followRef, scrollRef, getTopOffset]);
|
||||
const scrollToRefComponent = useCallback(
|
||||
(componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
|
||||
if (componentRef && containerRef) {
|
||||
// @ts-expect-error -- we know this are not null
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
scrollToComponent(componentRef!, containerRef!, offset);
|
||||
}
|
||||
},
|
||||
[followRef, scrollRef, topOffset],
|
||||
);
|
||||
|
||||
return scrollToRefComponent;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,6 @@ import { useEffect } from 'react';
|
||||
*/
|
||||
export function useWindowTitle(title: string) {
|
||||
useEffect(() => {
|
||||
document.title = `Ontime - ${title}`;
|
||||
document.title = `ontime - ${title}`;
|
||||
}, []);
|
||||
}
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import type { OntimeEventReport } from 'ontime-types';
|
||||
import { dayInMs, MILLIS_PER_MINUTE } from 'ontime-utils';
|
||||
|
||||
import { getEventVariance } from '../report';
|
||||
|
||||
it('uses captured days when measuring an event across midnight', () => {
|
||||
const report: OntimeEventReport = {
|
||||
startedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||
startedAtDay: 0,
|
||||
endedAt: 5 * MILLIS_PER_MINUTE,
|
||||
endedAtDay: 1,
|
||||
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||
scheduledDay: 0,
|
||||
scheduledDuration: 10 * MILLIS_PER_MINUTE,
|
||||
};
|
||||
|
||||
expect(getEventVariance(report)).toMatchObject({
|
||||
actualDuration: 10 * MILLIS_PER_MINUTE,
|
||||
delta: 0,
|
||||
status: 'ontime',
|
||||
});
|
||||
expect(getEventVariance({ ...report, endedAt: null })).toMatchObject({ status: 'not-run' });
|
||||
});
|
||||
@@ -58,16 +58,4 @@ describe('formatDuration()', () => {
|
||||
expect(formatDuration(2 * MILLIS_PER_HOUR + 6 * MILLIS_PER_MINUTE + 45 * MILLIS_PER_SECOND, false)).toBe('2h6m45s');
|
||||
expect(formatDuration(599702, false)).toBe('9m59s');
|
||||
});
|
||||
it('formats durations differently with and without seconds', () => {
|
||||
expect(formatDuration(0, false)).toBe('0m');
|
||||
expect(formatDuration(0, true)).toBe('0m');
|
||||
expect(formatDuration(30 * MILLIS_PER_SECOND, false)).toBe('30s');
|
||||
expect(formatDuration(30 * MILLIS_PER_SECOND, true)).toBe('');
|
||||
expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, false)).toBe('2h30s');
|
||||
expect(formatDuration(2 * MILLIS_PER_HOUR + 30 * MILLIS_PER_SECOND, true)).toBe('2h');
|
||||
expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, false)).toBe(
|
||||
'2h10m30s',
|
||||
);
|
||||
expect(formatDuration(2 * MILLIS_PER_HOUR + 10 * MILLIS_PER_MINUTE + 30 * MILLIS_PER_SECOND, true)).toBe('2h10m');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,10 +4,6 @@ export function isKeyEnter<T>(event: KeyboardEvent<T>): boolean {
|
||||
return event.key === 'Enter';
|
||||
}
|
||||
|
||||
export function isKeySpace<T>(event: KeyboardEvent<T>): boolean {
|
||||
return event.key === ' ' || event.code === 'Space';
|
||||
}
|
||||
|
||||
export function isKeyEscape<T>(event: KeyboardEvent<T>): boolean {
|
||||
return event.key === 'Escape';
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import type { MaybeNumber, OntimeEventReport } from 'ontime-types';
|
||||
import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
|
||||
|
||||
type EventVariance = {
|
||||
actualDuration: MaybeNumber;
|
||||
delta: number;
|
||||
status: 'ontime' | 'over' | 'under' | 'not-run';
|
||||
};
|
||||
|
||||
const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
|
||||
|
||||
export function getReportTimePosition(time: number, day: number): number;
|
||||
export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber;
|
||||
export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber {
|
||||
return time === null || day === null ? null : day * dayInMs + time;
|
||||
}
|
||||
|
||||
export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
|
||||
if (!entry) return notRun;
|
||||
|
||||
const start = getReportTimePosition(entry.startedAt, entry.startedAtDay);
|
||||
const end = getReportTimePosition(entry.endedAt, entry.endedAtDay);
|
||||
if (start === null || end === null) return notRun;
|
||||
|
||||
const actualDuration = end - start;
|
||||
const delta = actualDuration - entry.scheduledDuration;
|
||||
if (Math.abs(delta) < MILLIS_PER_SECOND) return { actualDuration, delta, status: 'ontime' };
|
||||
return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
|
||||
}
|
||||
+35
@@ -1,3 +1,5 @@
|
||||
import { AppMode } from '../ontimeConfig';
|
||||
|
||||
declare module '*.scss' {
|
||||
const content: Record<string, string>;
|
||||
export default content;
|
||||
@@ -30,6 +32,39 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Declare custom data we pass to the table
|
||||
* - `handleUpdate` callback to update the entry when the user edits a cell
|
||||
* - `handleUpdateTimer` callback to update the timer for a specific event
|
||||
* - `options-showDelayedTimes` whether to show or hide delayed times
|
||||
* - `options-hideTableSeconds` whether to hide seconds in the table
|
||||
* - `options-hideIndexColumn` whether to hide the index column
|
||||
* - `options-cuesheetMode` run or edit mode
|
||||
*
|
||||
* And metadata specific for each column
|
||||
* - `canWrite` whether the user can write to this column
|
||||
* - `colour` background colour associated with a custom field
|
||||
*/
|
||||
declare module '@tanstack/react-table' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
interface TableMeta<TData extends RowData> {
|
||||
handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
|
||||
handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
|
||||
options: {
|
||||
showDelayedTimes: boolean;
|
||||
hideTableSeconds: boolean;
|
||||
hideIndexColumn: boolean;
|
||||
cuesheetMode: AppMode;
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
interface ColumnMeta<TData extends RowData, TValue> {
|
||||
canWrite: boolean;
|
||||
colour?: string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allow passing CSS Properties
|
||||
*/
|
||||
|
||||
@@ -53,7 +53,7 @@ ul {
|
||||
&.active {
|
||||
color: $ui-white;
|
||||
border-left-color: $blue-400;
|
||||
background-color: $bg-active;
|
||||
background-color: rgba($blue-500, 0.16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@ ul {
|
||||
&.active {
|
||||
color: $ui-white;
|
||||
border-left-color: $blue-400;
|
||||
background-color: $bg-active;
|
||||
background-color: rgba($blue-500, 0.16);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,7 +124,7 @@ $card-padding: 2rem;
|
||||
// active rows use a panel-local class today; keep the treatment here so all
|
||||
// settings tables share the same state without each panel owning its colours
|
||||
tr[class*='current'] {
|
||||
background-color: $bg-active;
|
||||
background-color: rgba($blue-500, 0.16);
|
||||
|
||||
> td:first-child {
|
||||
box-shadow: inset 3px 0 $blue-400;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
th.over {
|
||||
color: $playback-over;
|
||||
}
|
||||
|
||||
th.under {
|
||||
color: $playback-under;
|
||||
}
|
||||
@@ -1,72 +1,103 @@
|
||||
import { useMemo } from 'react';
|
||||
import { IoDownloadOutline, IoTrashBin } from 'react-icons/io5';
|
||||
import { IoTrashBin } from 'react-icons/io5';
|
||||
|
||||
import { deleteAllReport } from '../../../../common/api/report';
|
||||
import { createBlob, downloadBlob } from '../../../../common/api/utils';
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import useReport from '../../../../common/hooks-query/useReport';
|
||||
import useRundown from '../../../../common/hooks-query/useRundown';
|
||||
import { cx } from '../../../../common/utils/styleUtils';
|
||||
import { formatTime } from '../../../../common/utils/time';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
import ReportShowSummary from './composite/ReportShowSummary';
|
||||
import ReportTable from './composite/ReportTable';
|
||||
import { getCombinedReport, getGroupReports, getRunSummary, makeReportCSV } from './reportSettings.utils';
|
||||
import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
|
||||
|
||||
import style from './ReportSettings.module.scss';
|
||||
|
||||
export default function ReportSettings() {
|
||||
const { report } = useReport();
|
||||
const { eventReports, rundown, show } = report;
|
||||
|
||||
const { combinedReport, groups, summary } = useMemo(() => {
|
||||
const entries = rundown?.entries ?? {};
|
||||
return {
|
||||
combinedReport: rundown ? getCombinedReport(eventReports, entries, rundown.flatOrder) : [],
|
||||
groups: rundown ? getGroupReports(eventReports, entries, rundown.order) : [],
|
||||
summary: getRunSummary(eventReports, entries, rundown?.flatOrder ?? []),
|
||||
};
|
||||
}, [eventReports, rundown]);
|
||||
|
||||
const hasReport = rundown !== null && Object.keys(eventReports).length > 0;
|
||||
const downloadCSV = () => {
|
||||
if (!hasReport) return;
|
||||
const { data: reportData } = useReport();
|
||||
const { data } = useRundown();
|
||||
|
||||
const clearReport = async () => await deleteAllReport();
|
||||
const downloadCSV = (combinedReport: CombinedReport[]) => {
|
||||
if (!combinedReport) {
|
||||
return;
|
||||
}
|
||||
const csv = makeReportCSV(combinedReport);
|
||||
const blob = createBlob(csv, 'text/csv;charset=utf-8;');
|
||||
downloadBlob(blob, 'ontime-report.csv');
|
||||
};
|
||||
|
||||
const combinedReport = useMemo(() => {
|
||||
return getCombinedReport(reportData, data.entries, data.flatOrder);
|
||||
}, [reportData, data.entries, data.flatOrder]);
|
||||
|
||||
return (
|
||||
<Panel.Section>
|
||||
<Panel.Card>
|
||||
<Panel.SubHeader>
|
||||
Report
|
||||
<Panel.SubHeader>Report</Panel.SubHeader>
|
||||
<Panel.Divider />
|
||||
<Panel.Section>
|
||||
<Panel.Title>
|
||||
Manage report
|
||||
<Panel.InlineElements>
|
||||
<Button onClick={downloadCSV} disabled={!hasReport}>
|
||||
<IoDownloadOutline />
|
||||
<Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
|
||||
<IoTrashBin />
|
||||
Export CSV
|
||||
</Button>
|
||||
<Button variant='subtle-destructive' onClick={deleteAllReport} disabled={!hasReport}>
|
||||
<Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
|
||||
<IoTrashBin />
|
||||
Clear Report
|
||||
Clear All
|
||||
</Button>
|
||||
</Panel.InlineElements>
|
||||
</Panel.SubHeader>
|
||||
<Panel.Divider />
|
||||
|
||||
{!hasReport ? (
|
||||
</Panel.Title>
|
||||
</Panel.Section>
|
||||
<Panel.Section>
|
||||
<Panel.EmptyState
|
||||
title='No report yet'
|
||||
description='Start an event to record actual timings against the schedule.'
|
||||
<Panel.Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Cue</th>
|
||||
<th>Title</th>
|
||||
<th>Scheduled Start</th>
|
||||
<th>Actual Start</th>
|
||||
<th>Scheduled End</th>
|
||||
<th>Actual End</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{combinedReport.length === 0 && (
|
||||
<Panel.TableEmpty
|
||||
title='No report data yet'
|
||||
description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
|
||||
/>
|
||||
</Panel.Section>
|
||||
) : (
|
||||
<>
|
||||
<Panel.Section>
|
||||
<ReportShowSummary rundownTitle={rundown.title} show={show} summary={summary} />
|
||||
</Panel.Section>
|
||||
<Panel.Section>
|
||||
<ReportTable rows={combinedReport} groups={groups} />
|
||||
</Panel.Section>
|
||||
</>
|
||||
)}
|
||||
|
||||
{combinedReport.map((entry) => {
|
||||
const start = (() => {
|
||||
if (entry.actualStart === null) return null;
|
||||
if (entry.actualStart <= entry.scheduledStart) return 'under';
|
||||
return 'over';
|
||||
})();
|
||||
const end = (() => {
|
||||
if (entry.actualEnd === null) return null;
|
||||
if (entry.actualEnd <= entry.scheduledEnd) return 'under';
|
||||
return 'over';
|
||||
})();
|
||||
return (
|
||||
<tr key={entry.id}>
|
||||
<th>{entry.index}</th>
|
||||
<th>{entry.cue}</th>
|
||||
<th>{entry.title}</th>
|
||||
<th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
|
||||
<th className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</th>
|
||||
<th className={cx([end && style[end]])}>{formatTime(entry.scheduledEnd)}</th>
|
||||
<th className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</th>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</Panel.Table>
|
||||
</Panel.Section>
|
||||
</Panel.Card>
|
||||
</Panel.Section>
|
||||
);
|
||||
|
||||
-156
@@ -1,156 +0,0 @@
|
||||
import type { OntimeEventReport, OntimeReport } from 'ontime-types';
|
||||
import {
|
||||
createDelay,
|
||||
createEvent,
|
||||
createGroup,
|
||||
dayInMs,
|
||||
MILLIS_PER_HOUR,
|
||||
MILLIS_PER_MINUTE,
|
||||
MILLIS_PER_SECOND,
|
||||
} from 'ontime-utils';
|
||||
|
||||
import {
|
||||
formatOffset,
|
||||
getCombinedReport,
|
||||
getGroupReports,
|
||||
getRunSummary,
|
||||
getShowOffsets,
|
||||
makeReportCSV,
|
||||
} from '../reportSettings.utils';
|
||||
|
||||
function makeEvent(id: string, patch = {}) {
|
||||
const event = createEvent({ id, title: id, ...patch });
|
||||
if (!event) throw new Error('Failed to create test event');
|
||||
return event;
|
||||
}
|
||||
|
||||
function makeReport(patch: Partial<OntimeEventReport> = {}): OntimeEventReport {
|
||||
return {
|
||||
startedAt: 5 * MILLIS_PER_MINUTE,
|
||||
startedAtDay: 1,
|
||||
endedAt: 15 * MILLIS_PER_MINUTE,
|
||||
endedAtDay: 1,
|
||||
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||
scheduledDay: 0,
|
||||
scheduledDuration: 10 * MILLIS_PER_MINUTE,
|
||||
...patch,
|
||||
};
|
||||
}
|
||||
|
||||
describe('getCombinedReport()', () => {
|
||||
it('uses the captured schedule and absolute day when calculating offsets', () => {
|
||||
const entry = makeEvent('a', { timeStart: 0, duration: 99 * MILLIS_PER_MINUTE });
|
||||
const rows = getCombinedReport({ a: makeReport() }, { a: entry }, ['a']);
|
||||
|
||||
expect(rows[0]).toMatchObject({
|
||||
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||
scheduledEnd: dayInMs + 5 * MILLIS_PER_MINUTE,
|
||||
startOffset: 10 * MILLIS_PER_MINUTE,
|
||||
endOffset: 10 * MILLIS_PER_MINUTE,
|
||||
});
|
||||
});
|
||||
|
||||
it('includes unplayed events but excludes skipped and non-event entries', () => {
|
||||
const ran = makeEvent('ran');
|
||||
const unplayed = makeEvent('unplayed', { timeStart: 20 * MILLIS_PER_MINUTE });
|
||||
const skipped = makeEvent('skipped', { skip: true });
|
||||
const delay = createDelay({ id: 'delay' });
|
||||
const report: OntimeReport = { ran: makeReport({ scheduledStart: 0, scheduledDay: 0 }) };
|
||||
|
||||
const rows = getCombinedReport(report, { ran, unplayed, skipped, delay }, ['ran', 'unplayed', 'skipped', 'delay']);
|
||||
|
||||
expect(rows.map(({ id }) => id)).toEqual(['ran', 'unplayed']);
|
||||
expect(rows[1]).toMatchObject({ scheduledStart: unplayed.timeStart, actualStart: null, actualEnd: null });
|
||||
});
|
||||
});
|
||||
|
||||
describe('report calculations', () => {
|
||||
it('keeps finishing time separate from running time', () => {
|
||||
const offsets = getShowOffsets({
|
||||
plannedStart: 19 * MILLIS_PER_HOUR,
|
||||
plannedEnd: 21 * MILLIS_PER_HOUR,
|
||||
plannedDuration: 2 * MILLIS_PER_HOUR,
|
||||
actualStart: 19 * MILLIS_PER_HOUR - 10 * MILLIS_PER_MINUTE,
|
||||
actualEnd: 21 * MILLIS_PER_HOUR - 6 * MILLIS_PER_MINUTE,
|
||||
actualDuration: 2 * MILLIS_PER_HOUR + 4 * MILLIS_PER_MINUTE,
|
||||
});
|
||||
|
||||
expect(offsets).toMatchObject({
|
||||
startOffset: -10 * MILLIS_PER_MINUTE,
|
||||
endOffset: -6 * MILLIS_PER_MINUTE,
|
||||
durationOffset: 4 * MILLIS_PER_MINUTE,
|
||||
});
|
||||
});
|
||||
|
||||
it('measures completed groups against their target', () => {
|
||||
const group = createGroup({ id: 'group', entries: ['a', 'b'], targetDuration: 30 * MILLIS_PER_MINUTE });
|
||||
const entries = {
|
||||
group,
|
||||
a: makeEvent('a', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
|
||||
b: makeEvent('b', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
|
||||
};
|
||||
const report: OntimeReport = {
|
||||
a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 10 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||
b: makeReport({
|
||||
startedAt: 15 * MILLIS_PER_MINUTE,
|
||||
startedAtDay: 0,
|
||||
endedAt: 25 * MILLIS_PER_MINUTE,
|
||||
endedAtDay: 0,
|
||||
}),
|
||||
};
|
||||
|
||||
expect(getGroupReports(report, entries, [group.id])[0]).toMatchObject({
|
||||
elapsed: 25 * MILLIS_PER_MINUTE,
|
||||
variance: -5 * MILLIS_PER_MINUTE,
|
||||
eventsRun: 2,
|
||||
eventsPlanned: 2,
|
||||
});
|
||||
expect(getGroupReports({ a: report.a }, entries, [group.id])[0].variance).toBeNull();
|
||||
});
|
||||
|
||||
it('summarises completed events and excludes skipped events from the plan', () => {
|
||||
const entries = { a: makeEvent('a'), b: makeEvent('b', { skip: true }) };
|
||||
const report = {
|
||||
a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 15 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||
b: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 30 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||
};
|
||||
|
||||
expect(getRunSummary(report, entries, ['a', 'b'])).toEqual({ eventsRun: 2, eventsPlanned: 1 });
|
||||
});
|
||||
});
|
||||
|
||||
describe('report formatting', () => {
|
||||
it.each([
|
||||
[null, '–'],
|
||||
[MILLIS_PER_SECOND / 2, 'On time'],
|
||||
[4 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND, '+4m12s'],
|
||||
[-MILLIS_PER_MINUTE, '-1m'],
|
||||
])('formats offset %s', (value, expected) => {
|
||||
expect(formatOffset(value)).toBe(expected);
|
||||
});
|
||||
|
||||
it('exports group context and leaves missing actual times empty', () => {
|
||||
const csv = makeReportCSV([
|
||||
{
|
||||
id: 'a',
|
||||
index: 1,
|
||||
title: 'Welcome',
|
||||
cue: '1',
|
||||
parent: 'act1',
|
||||
groupTitle: 'Act 1',
|
||||
scheduledStart: 0,
|
||||
scheduledEnd: 10 * MILLIS_PER_MINUTE,
|
||||
actualStart: null,
|
||||
startOffset: null,
|
||||
actualEnd: null,
|
||||
endOffset: null,
|
||||
},
|
||||
]);
|
||||
|
||||
const fields = csv.trim().split('\n')[1].split(',');
|
||||
expect(csv).toContain('Group');
|
||||
expect(fields[1]).toBe('Act 1');
|
||||
expect(fields[5]).toBe('');
|
||||
expect(fields[7]).toBe('');
|
||||
});
|
||||
});
|
||||
-104
@@ -1,104 +0,0 @@
|
||||
// Panel.Table nests its own padding inside the section it sits in, so the
|
||||
// summary takes the same inset to keep one left edge down the whole panel
|
||||
.inset {
|
||||
padding: 0 var(--panel-card-padding, 2rem);
|
||||
}
|
||||
|
||||
.summary {
|
||||
padding: 1.25rem;
|
||||
background-color: $gray-1200;
|
||||
border-radius: 3px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: $ui-white;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.headlineLabel,
|
||||
.metricLabel {
|
||||
color: $gray-300;
|
||||
font-size: calc(1rem - 2px);
|
||||
}
|
||||
|
||||
.headlineValue {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.unavailable {
|
||||
max-width: 32rem;
|
||||
color: $warning-orange;
|
||||
font-size: calc(1rem - 2px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.metricValue,
|
||||
.metricOffset {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.metricValue {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.planned,
|
||||
.arrow {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.actual {
|
||||
color: $ui-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metricOffset {
|
||||
justify-self: end;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.over {
|
||||
color: $playback-over;
|
||||
}
|
||||
|
||||
.under {
|
||||
color: $playback-under;
|
||||
}
|
||||
|
||||
.none {
|
||||
color: $gray-300;
|
||||
}
|
||||
-118
@@ -1,118 +0,0 @@
|
||||
import type { MaybeNumber, ShowReport } from 'ontime-types';
|
||||
|
||||
import { cx, enDash } from '../../../../../common/utils/styleUtils';
|
||||
import { formatDuration, formatTime } from '../../../../../common/utils/time';
|
||||
import { formatOffset, getShowOffsets, offsetTone } from '../reportSettings.utils';
|
||||
import type { RunSummary } from '../reportSettings.utils';
|
||||
|
||||
import style from './ReportShowSummary.module.scss';
|
||||
|
||||
interface ReportShowSummaryProps {
|
||||
rundownTitle: string;
|
||||
show: ShowReport;
|
||||
summary: RunSummary;
|
||||
}
|
||||
|
||||
/**
|
||||
* Leads the report with whether the show ran to the length it was planned for.
|
||||
*
|
||||
* Running time is the headline rather than finishing time because it is the
|
||||
* part the team controls and the part that carries into the next run of the
|
||||
* same rundown. Finishing time is the other question a report is asked, and
|
||||
* the two can point opposite ways, so it stays beside it as its own row
|
||||
* rather than being folded into a single figure.
|
||||
*/
|
||||
export default function ReportShowSummary({ rundownTitle, show, summary }: ReportShowSummaryProps) {
|
||||
const offsets = getShowOffsets(show);
|
||||
|
||||
/**
|
||||
* A show that stopped early has no meaningful end: its last event is simply
|
||||
* where it got to. Measuring that against the plan would report a show which
|
||||
* never finished as having come in comfortably short.
|
||||
*/
|
||||
const didReachEnd = summary.eventsRun > 0 && summary.eventsRun === summary.eventsPlanned;
|
||||
const hasPlan = offsets.startOffset !== null;
|
||||
|
||||
return (
|
||||
<div className={style.inset}>
|
||||
<section className={style.summary} aria-labelledby='report-summary-title'>
|
||||
<h4 id='report-summary-title' className={style.title}>
|
||||
{rundownTitle || 'Untitled rundown'}
|
||||
</h4>
|
||||
|
||||
<div className={style.body}>
|
||||
<div className={style.headline}>
|
||||
<span className={style.headlineLabel}>{didReachEnd ? 'Show duration' : 'Show incomplete'}</span>
|
||||
{didReachEnd && offsets.durationOffset !== null ? (
|
||||
<span className={cx([style.headlineValue, style[offsetTone(offsets.durationOffset)]])}>
|
||||
{formatOffset(offsets.durationOffset)}
|
||||
</span>
|
||||
) : (
|
||||
<span className={style.unavailable}>The show did not reach the end of the rundown.</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<dl className={style.metrics}>
|
||||
{hasPlan && (
|
||||
<Metric
|
||||
label='Started'
|
||||
planned={formatMaybeTime(show.plannedStart)}
|
||||
actual={formatMaybeTime(show.actualStart)}
|
||||
offset={offsets.startOffset}
|
||||
/>
|
||||
)}
|
||||
{hasPlan && didReachEnd && (
|
||||
<Metric
|
||||
label='Ended'
|
||||
planned={formatMaybeTime(show.plannedEnd)}
|
||||
actual={formatMaybeTime(show.actualEnd)}
|
||||
offset={offsets.endOffset}
|
||||
/>
|
||||
)}
|
||||
{didReachEnd && (
|
||||
<Metric
|
||||
label='Duration'
|
||||
planned={formatMaybeDuration(show.plannedDuration)}
|
||||
actual={formatMaybeDuration(show.actualDuration)}
|
||||
/>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Metric({
|
||||
label,
|
||||
planned,
|
||||
actual,
|
||||
offset,
|
||||
}: {
|
||||
label: string;
|
||||
planned: string;
|
||||
actual: string;
|
||||
offset?: MaybeNumber;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<dt className={style.metricLabel}>{label}</dt>
|
||||
<dd className={style.metricValue}>
|
||||
<span className={style.planned}>{planned}</span>
|
||||
<span className={style.arrow}>→</span>
|
||||
<span className={style.actual}>{actual}</span>
|
||||
</dd>
|
||||
<dd className={cx([style.metricOffset, offset !== undefined && style[offsetTone(offset)]])}>
|
||||
{offset === undefined ? '' : formatOffset(offset)}
|
||||
</dd>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function formatMaybeTime(value: MaybeNumber): string {
|
||||
return value === null ? enDash : formatTime(value);
|
||||
}
|
||||
|
||||
function formatMaybeDuration(value: MaybeNumber): string {
|
||||
return value === null ? enDash : formatDuration(value, false);
|
||||
}
|
||||
-144
@@ -1,144 +0,0 @@
|
||||
$rail: var(--user-bg, #{$gray-500});
|
||||
$event-wash: var(--event-bg, transparent);
|
||||
|
||||
// event rows carry their values in td, not th: the panel's th styling is meant
|
||||
// for column headings and renders whatever it holds small, bold and upper case
|
||||
td.over {
|
||||
color: $playback-over;
|
||||
}
|
||||
|
||||
td.under {
|
||||
color: $playback-under;
|
||||
}
|
||||
|
||||
.eventRow td {
|
||||
background-color: color-mix(in srgb, #{$gray-1300} 96%, #{$event-wash} 4%);
|
||||
}
|
||||
|
||||
.groupedRow td:first-child {
|
||||
box-shadow: inset 2px 0 $rail;
|
||||
// clear the rail rather than sitting against it
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.groupRow > * {
|
||||
background-color: color-mix(in srgb, #{$gray-1300} 88%, #{$rail} 12%);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.groupSpacer {
|
||||
height: 0.75rem;
|
||||
background: transparent !important;
|
||||
|
||||
td {
|
||||
height: 0.75rem;
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
th.groupSummary {
|
||||
padding: 0.5rem 1rem;
|
||||
box-shadow: inset 4px 0 $rail;
|
||||
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
|
||||
> * {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.groupTitle,
|
||||
.groupLabel,
|
||||
.groupValues {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.groupTitle {
|
||||
color: $ui-white;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.groupBody {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem 2.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.groupHeadline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.groupLabel,
|
||||
.groupMetrics dt {
|
||||
color: $gray-400;
|
||||
font-size: calc(1rem - 3px);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.groupHeadlineValue {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.groupMetrics {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem 1.5rem;
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.groupMetrics dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.groupValues {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
color: $gray-300;
|
||||
|
||||
b {
|
||||
color: $ui-white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.unavailable {
|
||||
color: $gray-400;
|
||||
font-size: calc(1rem - 3px);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.over {
|
||||
color: $playback-over;
|
||||
}
|
||||
|
||||
.under {
|
||||
color: $playback-under;
|
||||
}
|
||||
|
||||
.none {
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.eventCue,
|
||||
.eventIndex {
|
||||
color: $gray-300;
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
import type { EntryId } from 'ontime-types';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { cx, enDash } from '../../../../../common/utils/styleUtils';
|
||||
import { formatDuration, formatTime } from '../../../../../common/utils/time';
|
||||
import * as Panel from '../../../panel-utils/PanelUtils';
|
||||
import { formatOffset, offsetTone } from '../reportSettings.utils';
|
||||
import type { CombinedReport, GroupReport } from '../reportSettings.utils';
|
||||
|
||||
import style from './ReportTable.module.scss';
|
||||
|
||||
interface ReportTableProps {
|
||||
rows: CombinedReport[];
|
||||
groups: GroupReport[];
|
||||
}
|
||||
|
||||
type ReportColourStyle = React.CSSProperties & Partial<Record<'--event-bg' | '--user-bg', string | undefined>>;
|
||||
|
||||
/**
|
||||
* The report laid out the way the show was planned: blocks, then the events
|
||||
* inside them. Each block carries how it ran against the budget set for it.
|
||||
*/
|
||||
export default function ReportTable({ rows, groups }: ReportTableProps) {
|
||||
// groups are rendered where their first event appears, so the table follows
|
||||
// the rundown rather than a separate ordering
|
||||
const sections = useMemo(() => makeSections(rows, groups), [rows, groups]);
|
||||
|
||||
return (
|
||||
<Panel.Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Cue</th>
|
||||
<th>Title</th>
|
||||
<th>Scheduled Start</th>
|
||||
<th>Actual Start</th>
|
||||
<th>Scheduled End</th>
|
||||
<th>Actual End</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{sections.map((section, index) => (
|
||||
<tbody key={section.key}>
|
||||
{section.group && index > 0 && <GroupSpacer />}
|
||||
{section.group && <GroupRow group={section.group} />}
|
||||
{section.rows.map((entry) => (
|
||||
<EventRow
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
groupColour={section.group?.colour}
|
||||
grouped={section.group !== null}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
))}
|
||||
</Panel.Table>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupSpacer() {
|
||||
return (
|
||||
<tr aria-hidden='true' className={style.groupSpacer}>
|
||||
<td colSpan={7} />
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A group read the same way as the show above it: what it was measured
|
||||
* against, what it actually did, and how much of it ran.
|
||||
*/
|
||||
function GroupRow({ group }: { group: GroupReport }) {
|
||||
const hasTarget = group.targetDuration !== null;
|
||||
const measuredAgainst = group.targetDuration ?? group.scheduledDuration;
|
||||
const unavailableReason = group.eventsRun === 0 ? 'Did not run' : 'Still running';
|
||||
|
||||
return (
|
||||
<tr className={style.groupRow} style={groupColourStyle(group.colour)}>
|
||||
<th scope='rowgroup' colSpan={7} className={style.groupSummary}>
|
||||
<span className={style.groupTitle}>{group.title || 'Untitled group'}</span>
|
||||
<div className={style.groupBody}>
|
||||
<div className={style.groupHeadline}>
|
||||
<span className={style.groupLabel}>{hasTarget ? 'Against target' : 'Against schedule'}</span>
|
||||
{group.variance === null ? (
|
||||
<span className={style.unavailable}>{unavailableReason}</span>
|
||||
) : (
|
||||
<span className={cx([style.groupHeadlineValue, style[offsetTone(group.variance)]])}>
|
||||
{formatOffset(group.variance)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<dl className={style.groupMetrics}>
|
||||
<dt>{hasTarget ? 'Target' : 'Scheduled'}</dt>
|
||||
<dd className={style.groupValues}>
|
||||
<span>{formatDuration(measuredAgainst, false)}</span>
|
||||
<span className={style.arrow}>→</span>
|
||||
<b>{group.elapsed === null ? enDash : formatDuration(group.elapsed, false)}</b>
|
||||
</dd>
|
||||
{group.actualStart !== null && group.actualEnd !== null && (
|
||||
<>
|
||||
<dt>Ran</dt>
|
||||
<dd className={style.groupValues}>
|
||||
<span>{formatTime(group.actualStart)}</span>
|
||||
<span className={style.arrow}>→</span>
|
||||
<b>{formatTime(group.actualEnd)}</b>
|
||||
</dd>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function EventRow({ entry, groupColour, grouped }: { entry: CombinedReport; groupColour?: string; grouped: boolean }) {
|
||||
const start = offsetTone(entry.startOffset);
|
||||
const end = offsetTone(entry.endOffset);
|
||||
|
||||
return (
|
||||
<tr className={cx([style.eventRow, grouped && style.groupedRow])} style={eventColours(entry.colour, groupColour)}>
|
||||
<td className={style.eventIndex}>{entry.index}</td>
|
||||
<td className={style.eventCue}>{entry.cue}</td>
|
||||
<td>{entry.title}</td>
|
||||
<td>{formatTime(entry.scheduledStart)}</td>
|
||||
<td className={cx([style[start]])}>{formatTime(entry.actualStart)}</td>
|
||||
<td>{formatTime(entry.scheduledEnd)}</td>
|
||||
<td className={cx([style[end]])}>{formatTime(entry.actualEnd)}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Uses the cuesheet's custom property for group colour. Left unset when the
|
||||
* group has none so the stylesheet can provide a neutral edge.
|
||||
*/
|
||||
function groupColourStyle(colour?: string): ReportColourStyle {
|
||||
const style: ReportColourStyle = {};
|
||||
if (colour) style['--user-bg'] = colour;
|
||||
return style;
|
||||
}
|
||||
|
||||
/** Keeps the event wash distinct from its parent group's identifying rail. */
|
||||
function eventColours(eventColour: string, groupColour?: string): ReportColourStyle {
|
||||
const style: ReportColourStyle = {};
|
||||
if (eventColour) style['--event-bg'] = eventColour;
|
||||
if (groupColour) style['--user-bg'] = groupColour;
|
||||
return style;
|
||||
}
|
||||
|
||||
type Section = {
|
||||
key: string;
|
||||
group: GroupReport | null;
|
||||
rows: CombinedReport[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Splits the rows into the blocks they belong to, keeping rundown order and
|
||||
* leaving ungrouped events in their own run of rows.
|
||||
*/
|
||||
function makeSections(rows: CombinedReport[], groups: GroupReport[]): Section[] {
|
||||
const byId = new Map<EntryId, GroupReport>(groups.map((group) => [group.id, group]));
|
||||
const sections: Section[] = [];
|
||||
let current: Section | null = null;
|
||||
|
||||
let currentParent: EntryId | null | undefined;
|
||||
|
||||
for (const row of rows) {
|
||||
if (current === null || row.parent !== currentParent) {
|
||||
currentParent = row.parent;
|
||||
// index keeps the key unique even if a group were to appear twice
|
||||
current = {
|
||||
key: `${row.parent ?? 'ungrouped'}-${sections.length}`,
|
||||
group: row.parent ? (byId.get(row.parent) ?? null) : null,
|
||||
rows: [],
|
||||
};
|
||||
sections.push(current);
|
||||
}
|
||||
current.rows.push(row);
|
||||
}
|
||||
|
||||
return sections;
|
||||
}
|
||||
+9
-9
@@ -12,21 +12,21 @@ import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPres
|
||||
import { isUrlSafe } from '../../../../../common/utils/regex';
|
||||
import { enDash } from '../../../../../common/utils/styleUtils';
|
||||
import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
|
||||
import { viewLabels } from '../../../../../viewerConfig';
|
||||
import CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
|
||||
import * as Panel from '../../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './URLPresetForm.module.scss';
|
||||
|
||||
const targetOptions: SelectOption<OntimeViewPresettable>[] = [
|
||||
{ value: OntimeView.Cuesheet, label: viewLabels[OntimeView.Cuesheet] },
|
||||
{ value: OntimeView.Operator, label: viewLabels[OntimeView.Operator] },
|
||||
{ value: OntimeView.Timer, label: viewLabels[OntimeView.Timer] },
|
||||
{ value: OntimeView.Backstage, label: viewLabels[OntimeView.Backstage] },
|
||||
{ value: OntimeView.Timeline, label: viewLabels[OntimeView.Timeline] },
|
||||
{ value: OntimeView.StudioClock, label: viewLabels[OntimeView.StudioClock] },
|
||||
{ value: OntimeView.Countdown, label: viewLabels[OntimeView.Countdown] },
|
||||
{ value: OntimeView.ProjectInfo, label: viewLabels[OntimeView.ProjectInfo] },
|
||||
{ value: OntimeView.Cuesheet, label: 'Cuesheet' },
|
||||
{ value: OntimeView.Operator, label: 'Operator' },
|
||||
{ value: OntimeView.Timer, label: 'Timer' },
|
||||
{ value: OntimeView.Backstage, label: 'Backstage' },
|
||||
{ value: OntimeView.Timeline, label: 'Timeline' },
|
||||
{ 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';
|
||||
|
||||
+46
-198
@@ -1,241 +1,89 @@
|
||||
import type { EntryId, MaybeNumber, OntimeGroup, OntimeReport, RundownEntries, ShowReport } from 'ontime-types';
|
||||
import { isOntimeEvent, isOntimeGroup } from 'ontime-types';
|
||||
import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
|
||||
import { EntryId, MaybeNumber, OntimeReport, RundownEntries, isOntimeEvent } from 'ontime-types';
|
||||
|
||||
import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
|
||||
import { getEventVariance, getReportTimePosition } from '../../../../common/utils/report';
|
||||
import { enDash } from '../../../../common/utils/styleUtils';
|
||||
import { formatDuration, formatTime } from '../../../../common/utils/time';
|
||||
import { formatTime } from '../../../../common/utils/time';
|
||||
|
||||
export type CombinedReport = {
|
||||
id: EntryId;
|
||||
index: number;
|
||||
title: string;
|
||||
cue: string;
|
||||
colour: string;
|
||||
/** the group this event belongs to, so the report can mirror the rundown */
|
||||
parent: EntryId | null;
|
||||
groupTitle: string;
|
||||
scheduledStart: number;
|
||||
actualStart: MaybeNumber;
|
||||
startOffset: MaybeNumber;
|
||||
scheduledEnd: number;
|
||||
actualEnd: MaybeNumber;
|
||||
endOffset: MaybeNumber;
|
||||
};
|
||||
|
||||
type ShowOffsets = {
|
||||
startOffset: MaybeNumber;
|
||||
endOffset: MaybeNumber;
|
||||
durationOffset: MaybeNumber;
|
||||
};
|
||||
|
||||
export type GroupReport = {
|
||||
id: EntryId;
|
||||
title: string;
|
||||
colour: string;
|
||||
targetDuration: MaybeNumber;
|
||||
scheduledDuration: number;
|
||||
actualStart: MaybeNumber;
|
||||
actualEnd: MaybeNumber;
|
||||
elapsed: MaybeNumber;
|
||||
variance: MaybeNumber;
|
||||
eventsRun: number;
|
||||
eventsPlanned: number;
|
||||
};
|
||||
|
||||
export type RunSummary = {
|
||||
eventsRun: number;
|
||||
eventsPlanned: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a combined report with the rundown data.
|
||||
*
|
||||
* Events that ran are measured against the schedule recorded at the time,
|
||||
* not the rundown's current values, so editing the rundown afterwards does
|
||||
* not change how a show that already happened is reported. Events that never
|
||||
* ran have no snapshot and fall back to the rundown.
|
||||
* Creates a combined report with the rundown data
|
||||
*/
|
||||
export function getCombinedReport(
|
||||
report: OntimeReport,
|
||||
rundown: RundownEntries,
|
||||
flatOrder: EntryId[],
|
||||
): CombinedReport[] {
|
||||
if (Object.keys(report).length === 0 || flatOrder.length === 0) return [];
|
||||
if (Object.keys(report).length === 0) return [];
|
||||
if (flatOrder.length === 0) return [];
|
||||
|
||||
const combinedReport: CombinedReport[] = [];
|
||||
|
||||
let index = 1;
|
||||
for (const id of flatOrder) {
|
||||
for (let i = 0; i < flatOrder.length; i++) {
|
||||
const id = flatOrder[i];
|
||||
const entry = rundown[id];
|
||||
// skipped events were never meant to run, listing them alongside events
|
||||
// that did would also disagree with the summary, which excludes them
|
||||
if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
|
||||
|
||||
const parent = entry.parent;
|
||||
const group = parent ? rundown[parent] : undefined;
|
||||
const reported = report[id];
|
||||
const scheduledStart = reported?.scheduledStart ?? entry.timeStart;
|
||||
const scheduledDay = reported?.scheduledDay ?? entry.dayOffset;
|
||||
const scheduledStartPosition = getReportTimePosition(scheduledStart, scheduledDay);
|
||||
const actualStartPosition = reported ? getReportTimePosition(reported.startedAt, reported.startedAtDay) : null;
|
||||
const actualEndPosition = reported ? getReportTimePosition(reported.endedAt, reported.endedAtDay) : null;
|
||||
const scheduledDuration = reported?.scheduledDuration ?? entry.duration;
|
||||
if (!entry || !isOntimeEvent(entry)) continue;
|
||||
|
||||
if (!(id in report)) {
|
||||
combinedReport.push({
|
||||
id,
|
||||
index,
|
||||
id: id,
|
||||
index: index,
|
||||
title: entry.title,
|
||||
cue: entry.cue,
|
||||
colour: entry.colour,
|
||||
parent,
|
||||
groupTitle: group && isOntimeGroup(group) ? group.title : '',
|
||||
// an event that ran is measured against the plan it ran on, one that
|
||||
// did not has no snapshot and falls back to the rundown
|
||||
scheduledStart,
|
||||
scheduledEnd: scheduledStart + scheduledDuration,
|
||||
actualStart: reported?.startedAt ?? null,
|
||||
startOffset: getOffset(actualStartPosition, scheduledStartPosition),
|
||||
actualEnd: reported?.endedAt ?? null,
|
||||
endOffset: getOffset(actualEndPosition, scheduledStartPosition + scheduledDuration),
|
||||
scheduledStart: entry.timeStart,
|
||||
actualEnd: null,
|
||||
scheduledEnd: entry.timeEnd,
|
||||
actualStart: null,
|
||||
});
|
||||
}
|
||||
|
||||
if (id in report) {
|
||||
combinedReport.push({
|
||||
id: id,
|
||||
index: index,
|
||||
title: entry.title,
|
||||
cue: entry.cue,
|
||||
scheduledStart: entry.timeStart,
|
||||
actualEnd: report[id].endedAt,
|
||||
scheduledEnd: entry.timeEnd,
|
||||
actualStart: report[id].startedAt,
|
||||
});
|
||||
}
|
||||
index++;
|
||||
}
|
||||
|
||||
return combinedReport;
|
||||
}
|
||||
|
||||
function getOffset(actual: MaybeNumber, scheduled: number): MaybeNumber {
|
||||
return actual === null ? null : actual - scheduled;
|
||||
}
|
||||
|
||||
export function getShowOffsets(show: ShowReport): ShowOffsets {
|
||||
const { plannedDuration, actualDuration } = show;
|
||||
return {
|
||||
startOffset: getWallClockOffset(show.plannedStart, show.actualStart),
|
||||
endOffset: getWallClockOffset(show.plannedEnd, show.actualEnd),
|
||||
durationOffset: plannedDuration === null || actualDuration === null ? null : actualDuration - plannedDuration,
|
||||
};
|
||||
}
|
||||
|
||||
function getWallClockOffset(planned: MaybeNumber, actual: MaybeNumber): MaybeNumber {
|
||||
if (planned === null || actual === null) return null;
|
||||
|
||||
const offset = actual - planned;
|
||||
if (offset < -dayInMs / 2) return offset + dayInMs;
|
||||
if (offset > dayInMs / 2) return offset - dayInMs;
|
||||
return offset;
|
||||
}
|
||||
|
||||
export function getGroupReports(report: OntimeReport, entries: RundownEntries, order: EntryId[]): GroupReport[] {
|
||||
const groups: GroupReport[] = [];
|
||||
for (const id of order) {
|
||||
const group = entries[id];
|
||||
if (group && isOntimeGroup(group)) groups.push(getGroupReport(group, report, entries));
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
function getGroupReport(group: OntimeGroup, report: OntimeReport, entries: RundownEntries): GroupReport {
|
||||
let scheduledDuration = 0;
|
||||
let eventsPlanned = 0;
|
||||
let eventsRun = 0;
|
||||
let firstStart = Number.POSITIVE_INFINITY;
|
||||
let lastEnd = Number.NEGATIVE_INFINITY;
|
||||
let actualStart: MaybeNumber = null;
|
||||
let actualEnd: MaybeNumber = null;
|
||||
|
||||
for (const childId of group.entries) {
|
||||
const child = entries[childId];
|
||||
if (!child || !isOntimeEvent(child) || child.skip) continue;
|
||||
|
||||
eventsPlanned += 1;
|
||||
const reported = report[childId];
|
||||
scheduledDuration += reported?.scheduledDuration ?? child.duration;
|
||||
|
||||
const variance = getEventVariance(reported);
|
||||
if (variance.actualDuration === null || !reported) continue;
|
||||
|
||||
eventsRun += 1;
|
||||
const start = getReportTimePosition(reported.startedAt, reported.startedAtDay);
|
||||
const end = getReportTimePosition(reported.endedAt, reported.endedAtDay);
|
||||
if (start !== null && start < firstStart) {
|
||||
firstStart = start;
|
||||
actualStart = reported.startedAt;
|
||||
}
|
||||
if (end !== null && end > lastEnd) {
|
||||
lastEnd = end;
|
||||
actualEnd = reported.endedAt;
|
||||
}
|
||||
}
|
||||
|
||||
const elapsed = actualStart === null || actualEnd === null ? null : lastEnd - firstStart;
|
||||
const measuredAgainst = group.targetDuration ?? scheduledDuration;
|
||||
const isComplete = eventsRun > 0 && eventsRun === eventsPlanned;
|
||||
|
||||
return {
|
||||
id: group.id,
|
||||
title: group.title,
|
||||
colour: group.colour,
|
||||
targetDuration: group.targetDuration,
|
||||
scheduledDuration,
|
||||
actualStart,
|
||||
actualEnd,
|
||||
elapsed,
|
||||
variance: elapsed === null || !isComplete ? null : elapsed - measuredAgainst,
|
||||
eventsRun,
|
||||
eventsPlanned,
|
||||
};
|
||||
}
|
||||
|
||||
export function getRunSummary(report: OntimeReport, entries: RundownEntries, order: EntryId[]): RunSummary {
|
||||
const eventsPlanned = order.filter((id) => {
|
||||
const entry = entries[id];
|
||||
return entry && isOntimeEvent(entry) && !entry.skip;
|
||||
}).length;
|
||||
const eventsRun = Object.values(report).filter((entry) => getEventVariance(entry).status !== 'not-run').length;
|
||||
return { eventsRun, eventsPlanned };
|
||||
}
|
||||
const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
|
||||
|
||||
/**
|
||||
* Signed offset, eg "+4m12s" / "-1m", following Ontime's convention that
|
||||
* positive means behind schedule.
|
||||
*/
|
||||
export function formatOffset(value: MaybeNumber): string {
|
||||
if (value === null) return enDash;
|
||||
if (Math.abs(value) < MILLIS_PER_SECOND) return 'On time';
|
||||
return `${value > 0 ? '+' : '-'}${formatDuration(Math.abs(value), false)}`;
|
||||
}
|
||||
|
||||
export function offsetTone(value: MaybeNumber): 'over' | 'under' | 'none' {
|
||||
if (value === null || Math.abs(value) < MILLIS_PER_SECOND) return 'none';
|
||||
return value > 0 ? 'over' : 'under';
|
||||
}
|
||||
|
||||
function formatCsvTime(value: MaybeNumber): string {
|
||||
return value === null ? '' : formatTime(value);
|
||||
}
|
||||
|
||||
const csvHeader = ['Index', 'Group', 'Cue', 'Title', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
|
||||
|
||||
/**
|
||||
* Transforms a CombinedReport into a CSV string.
|
||||
*
|
||||
* Exported as one row per event with its group named, rather than with
|
||||
* rollups baked in, so it stays the dataset a report is built from.
|
||||
* Transforms a CombinedReport into a CSV string
|
||||
*/
|
||||
export function makeReportCSV(combinedReport: CombinedReport[]) {
|
||||
const csv = combinedReport.map((entry) => [
|
||||
String(entry.index),
|
||||
entry.groupTitle,
|
||||
entry.cue,
|
||||
entry.title,
|
||||
formatTime(entry.scheduledStart),
|
||||
formatCsvTime(entry.actualStart),
|
||||
formatTime(entry.scheduledEnd),
|
||||
formatCsvTime(entry.actualEnd),
|
||||
]);
|
||||
const csv: string[][] = [];
|
||||
csv.push(csvHeader);
|
||||
|
||||
return makeCSVFromArrayOfArrays([csvHeader, ...csv]);
|
||||
for (const entry of combinedReport) {
|
||||
csv.push([
|
||||
String(entry.index),
|
||||
entry.title,
|
||||
entry.cue,
|
||||
formatTime(entry.scheduledStart),
|
||||
formatTime(entry.actualStart),
|
||||
formatTime(entry.scheduledEnd),
|
||||
formatTime(entry.actualEnd),
|
||||
]);
|
||||
}
|
||||
|
||||
return makeCSVFromArrayOfArrays(csv);
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function ShutdownPanel() {
|
||||
{!isOntimeCloud && (
|
||||
<Panel.Section>
|
||||
<Button variant='destructive' onClick={handler.open} disabled={!canShutdown}>
|
||||
Shutdown Ontime
|
||||
Shutdown ontime
|
||||
</Button>
|
||||
{!canShutdown && <Panel.Description>Only available from the machine running Ontime.</Panel.Description>}
|
||||
</Panel.Section>
|
||||
|
||||
@@ -3,7 +3,6 @@ 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';
|
||||
@@ -56,60 +55,72 @@ export default function Log() {
|
||||
<div className={cx([style.container, isExtracted && style.extracted])}>
|
||||
<Panel.InlineElements className={style.buttonBar}>
|
||||
<span className={style.filterLabel}>Filter by</span>
|
||||
<ToggleButton
|
||||
pressed={showUser}
|
||||
<Button
|
||||
variant={showUser ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showClient}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showClient ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showServer}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showServer ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showPlayback}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showPlayback ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showRx}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showRx ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
pressed={showTx}
|
||||
</Button>
|
||||
<Button
|
||||
variant={showTx ? 'primary' : 'subtle'}
|
||||
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}
|
||||
</ToggleButton>
|
||||
</Button>
|
||||
<Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
|
||||
<IoClose /> Clear
|
||||
</Button>
|
||||
|
||||
@@ -18,12 +18,6 @@
|
||||
padding-bottom: 95vh;
|
||||
}
|
||||
|
||||
.groupSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.editPrompt {
|
||||
position: fixed;
|
||||
z-index: $zindex-dialog;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import EmptyFill from '../../common/components/state/EmptyFill';
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
@@ -25,10 +25,7 @@ import { OperatorData, useOperatorData } from './useOperatorData';
|
||||
|
||||
import style from './Operator.module.scss';
|
||||
|
||||
/** Keeps the running event clear of the list edge when no group header is pinned above it */
|
||||
const edgeOffset = 50;
|
||||
/** How far the running event may drift from where we placed it before we stop following */
|
||||
const followTolerance = 50;
|
||||
const selectedOffset = 50;
|
||||
|
||||
export default function OperatorLoader() {
|
||||
const { data, status } = useOperatorData();
|
||||
@@ -57,20 +54,11 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
const [lockAutoScroll, setLockAutoScroll] = useState(false);
|
||||
const selectedRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// The header height varies with the viewport, so measure it at scroll time.
|
||||
const getTopOffset = useCallback(() => {
|
||||
const header = stickyHeaderRef.current;
|
||||
// Sit right under the pinned header, so it covers the previous event instead of half of it.
|
||||
return header ? header.offsetHeight + 2 : edgeOffset;
|
||||
}, []);
|
||||
|
||||
const scrollToComponent = useFollowComponent({
|
||||
followRef: selectedRef,
|
||||
scrollRef,
|
||||
doFollow: !lockAutoScroll,
|
||||
getTopOffset,
|
||||
topOffset: selectedOffset,
|
||||
followTrigger: selectedEventId,
|
||||
});
|
||||
|
||||
@@ -94,16 +82,15 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
|
||||
// prevent considering automated scrolls as user scrolls
|
||||
const handleUserScroll = () => {
|
||||
if (!selectedRef.current || !scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRef?.current && scrollRef?.current) {
|
||||
const selectedRect = selectedRef.current.getBoundingClientRect();
|
||||
const scrollerRect = scrollRef.current.getBoundingClientRect();
|
||||
// Measure the drift from where an automated scroll would place the event.
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
|
||||
if (selectedRect && scrollerRect) {
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top;
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
|
||||
setLockAutoScroll(hasScrolledOutOfThreshold);
|
||||
}
|
||||
}
|
||||
};
|
||||
const throttledHandleScroll = throttle(handleUserScroll, 1000);
|
||||
|
||||
@@ -199,9 +186,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.groupSection} key={entry.id}>
|
||||
<Fragment key={entry.id}>
|
||||
<OperatorGroup
|
||||
ref={isCurrentParent ? stickyHeaderRef : undefined}
|
||||
key={entry.id}
|
||||
title={entry.title}
|
||||
colour={entry.colour}
|
||||
count={entry.entries.length}
|
||||
@@ -252,7 +239,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
||||
@@ -1,20 +1,13 @@
|
||||
.group {
|
||||
width: 100%;
|
||||
/* Padding is kept under the min-height so a single line fits without the list having to shrink the header,
|
||||
while a taller title still grows the row. */
|
||||
min-height: 2.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-left: 0.35rem solid var(--group-colour, $gray-500);
|
||||
background-color: $gray-1350;
|
||||
background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
|
||||
position: sticky;
|
||||
/* Cover the list padding so rows cannot scroll above the header. */
|
||||
top: -0.25rem;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type CSSProperties, type Ref, memo } from 'react';
|
||||
import { CSSProperties, memo } from 'react';
|
||||
|
||||
import { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { formatDuration } from '../../../common/utils/time';
|
||||
@@ -10,16 +10,15 @@ interface OperatorGroup {
|
||||
colour: string;
|
||||
count: number;
|
||||
duration: number;
|
||||
ref?: Ref<HTMLDivElement>;
|
||||
}
|
||||
|
||||
export default memo(OperatorGroup);
|
||||
function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
|
||||
function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
|
||||
const groupColour = colour || '#929292';
|
||||
const groupColours = getAccessibleColour(groupColour);
|
||||
|
||||
return (
|
||||
<div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
|
||||
<div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
|
||||
<span className={style.title}>{title}</span>
|
||||
<span className={style.meta}>
|
||||
<span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
|
||||
|
||||
@@ -17,59 +17,10 @@
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
--shortcut-title-color: #{$ui-white};
|
||||
--shortcut-separator-color: #{$gray-500};
|
||||
}
|
||||
|
||||
.prompt {
|
||||
@@ -84,13 +35,4 @@
|
||||
.shortcutSection {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.shortcutRow {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.shortcutKeys {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { PropsWithChildren, memo } from 'react';
|
||||
import { memo } from 'react';
|
||||
|
||||
import * as Editor from '../../../common/components/editor-utils/EditorUtils';
|
||||
import Kbd from '../../../common/components/kbd/Kbd';
|
||||
import {
|
||||
Combo,
|
||||
Separator,
|
||||
Shortcut,
|
||||
ShortcutGroup,
|
||||
ShortcutGroups,
|
||||
} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
|
||||
import { deviceAlt, deviceMod } from '../../../common/utils/deviceUtils';
|
||||
|
||||
import style from './EventEditorEmpty.module.scss';
|
||||
@@ -13,7 +19,7 @@ function EventEditorEmpty() {
|
||||
<div className={style.entryEditor} data-testid='editor-container'>
|
||||
<div className={style.shortcutSection}>
|
||||
<Editor.Title className={style.prompt}>Rundown shortcuts</Editor.Title>
|
||||
<div className={style.shortcuts}>
|
||||
<ShortcutGroups className={style.shortcuts}>
|
||||
<ShortcutGroup title='Search'>
|
||||
<Shortcut label='Find in rundown'>
|
||||
<Combo keys={[deviceMod, 'F']} />
|
||||
@@ -100,40 +106,8 @@ function EventEditorEmpty() {
|
||||
<Combo keys={[deviceAlt, 'Shift', 'D']} />
|
||||
</Shortcut>
|
||||
</ShortcutGroup>
|
||||
</div>
|
||||
</ShortcutGroups>
|
||||
</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,16 +8,10 @@ export default memo(FinderPlacement);
|
||||
function FinderPlacement() {
|
||||
const [isOpen, handler] = useDisclosure();
|
||||
|
||||
/**
|
||||
* 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 }]], []);
|
||||
useHotkeys([
|
||||
['mod + f', handler.toggle, { preventDefault: true }],
|
||||
['Escape', handler.close, { preventDefault: true }],
|
||||
]);
|
||||
|
||||
if (isOpen) {
|
||||
return <Finder isOpen={isOpen} onClose={handler.close} />;
|
||||
|
||||
@@ -312,7 +312,6 @@ 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} />
|
||||
|
||||
@@ -141,6 +141,7 @@ function RundownEventInner({
|
||||
isPast={isPast}
|
||||
isLoaded={loaded}
|
||||
totalGap={totalGap}
|
||||
duration={duration}
|
||||
/>
|
||||
)}
|
||||
<div className={style.statusElements} id='entry-status' data-timertype={timerType}>
|
||||
|
||||
@@ -6,7 +6,6 @@ import { IoCheckmarkCircle } from 'react-icons/io5';
|
||||
import Tooltip from '../../../../common/components/tooltip/Tooltip';
|
||||
import useReport from '../../../../common/hooks-query/useReport';
|
||||
import { usePlayback } from '../../../../common/hooks/useSocket';
|
||||
import { getEventVariance } from '../../../../common/utils/report';
|
||||
import { cx } from '../../../../common/utils/styleUtils';
|
||||
import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';
|
||||
|
||||
@@ -21,6 +20,7 @@ interface RundownEventChipProps {
|
||||
isLoaded: boolean;
|
||||
className: string;
|
||||
totalGap: number;
|
||||
duration: number;
|
||||
isLinkedToLoaded: boolean;
|
||||
}
|
||||
|
||||
@@ -33,6 +33,7 @@ export default function RundownEventChip({
|
||||
className,
|
||||
totalGap,
|
||||
id,
|
||||
duration,
|
||||
isLinkedToLoaded,
|
||||
}: RundownEventChipProps) {
|
||||
const playback = usePlayback();
|
||||
@@ -44,9 +45,11 @@ export default function RundownEventChip({
|
||||
const playbackActive = isPlaybackActive(playback);
|
||||
|
||||
if (!playbackActive || isPast) {
|
||||
return <EventReport className={className} id={id} />;
|
||||
return <EventReport className={className} id={id} duration={duration} />;
|
||||
}
|
||||
|
||||
if (playbackActive) {
|
||||
// we extracted the component to avoid unnecessary calculations and re-renders
|
||||
return (
|
||||
<Tooltip text='Expected time until start' render={<span />} className={className}>
|
||||
<EventUntil
|
||||
@@ -60,6 +63,9 @@ export default function RundownEventChip({
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
interface EventUntilProps {
|
||||
timeStart: number;
|
||||
delay: number;
|
||||
@@ -80,30 +86,41 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
|
||||
interface EventReportProps {
|
||||
className: string;
|
||||
id: string;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
function EventReport({ className, id }: EventReportProps) {
|
||||
function EventReport(props: EventReportProps) {
|
||||
const { className, id, duration } = props;
|
||||
const { data } = useReport();
|
||||
const currentReport = data[id];
|
||||
|
||||
const [value, overUnderStyle, tooltip] = useMemo(() => {
|
||||
// Use the schedule recorded when the event ran so later rundown edits do
|
||||
// not change its report.
|
||||
const variance = getEventVariance(currentReport);
|
||||
if (variance.status === 'not-run') {
|
||||
if (!currentReport) {
|
||||
return [null, 'none', ''];
|
||||
}
|
||||
|
||||
if (variance.status === 'ontime') {
|
||||
const { startedAt, endedAt } = currentReport;
|
||||
if (!startedAt || !endedAt) {
|
||||
return [null, 'none', ''];
|
||||
}
|
||||
|
||||
const actualDuration = endedAt - startedAt;
|
||||
const difference = actualDuration - duration;
|
||||
const absDifference = Math.abs(difference);
|
||||
|
||||
if (absDifference < MILLIS_PER_SECOND) {
|
||||
return ['ontime', 'under', 'Event finished on time'];
|
||||
}
|
||||
|
||||
const absDifference = Math.abs(variance.delta);
|
||||
const isOver = variance.status === 'over';
|
||||
const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${millisToString(absDifference)}`;
|
||||
const isOver = difference > 0;
|
||||
|
||||
const fullTimeValue = millisToString(absDifference);
|
||||
|
||||
const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
|
||||
|
||||
const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
|
||||
return [value, variance.status, tooltip];
|
||||
}, [currentReport]);
|
||||
return [value, isOver ? 'over' : 'under', tooltip];
|
||||
}, [currentReport, duration]);
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import type { CustomFields } from 'ontime-types';
|
||||
|
||||
import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
|
||||
import { AppMode } from '../../../ontimeConfig';
|
||||
import { makeCuesheetColumns } from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
|
||||
import type { CuesheetColumnDef } from '../../../views/cuesheet/cuesheet-table/cuesheetTable.features';
|
||||
|
||||
/**
|
||||
* Creates column definitions for the rundown table
|
||||
* Reuses cuesheetColsFactory with preset=undefined for full access
|
||||
*/
|
||||
export function makeRundownColumns(customFields: CustomFields): CuesheetColumnDef[] {
|
||||
export function makeRundownColumns(customFields: CustomFields): ColumnDef<ExtendedEntry>[] {
|
||||
// When preset=undefined, factory defaults to fullRead=true, fullWrite=true
|
||||
// canWrite is determined by editorMode (AppMode.Edit vs AppMode.Run)
|
||||
return makeCuesheetColumns(customFields, AppMode.Edit, undefined);
|
||||
|
||||
@@ -35,6 +35,7 @@ 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}`,
|
||||
|
||||
@@ -48,7 +48,6 @@ $playback-under: $green-500;
|
||||
// interface panels
|
||||
$bg-container-l1: $gray-1350;
|
||||
$bg-container-l2: $gray-1300;
|
||||
$bg-active: rgba($action-blue, 0.16);
|
||||
|
||||
$backdrop-color: rgba(0, 0, 0, 0.7);
|
||||
$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
|
||||
|
||||
@@ -1,30 +1,13 @@
|
||||
import { OntimeView } from 'ontime-types';
|
||||
|
||||
/** User facing name of each view, the single source for view naming in the UI */
|
||||
export const viewLabels: Record<OntimeView, string> = {
|
||||
[OntimeView.Editor]: 'Editor',
|
||||
[OntimeView.Cuesheet]: 'Cuesheet',
|
||||
[OntimeView.Operator]: 'Operator',
|
||||
[OntimeView.Timer]: 'Timer',
|
||||
[OntimeView.Backstage]: 'Backstage',
|
||||
[OntimeView.Timeline]: 'Timeline',
|
||||
[OntimeView.StudioClock]: 'Studio Clock',
|
||||
[OntimeView.Countdown]: 'Countdown',
|
||||
[OntimeView.ProjectInfo]: 'Project Info',
|
||||
};
|
||||
|
||||
/** Views offered in the navigation menu, in the order they are shown. Their value is also their route */
|
||||
const navigatorViews = [
|
||||
OntimeView.Timer,
|
||||
OntimeView.Backstage,
|
||||
OntimeView.Timeline,
|
||||
OntimeView.StudioClock,
|
||||
OntimeView.Countdown,
|
||||
OntimeView.ProjectInfo,
|
||||
export const navigatorConstants = [
|
||||
{ url: 'timer', label: 'Timer' },
|
||||
{ url: 'backstage', label: 'Backstage' },
|
||||
{ url: 'timeline', label: 'Timeline' },
|
||||
{ url: 'studio', label: 'Studio Clock' },
|
||||
{ url: 'countdown', label: 'Countdown' },
|
||||
{ url: 'teleprompter', label: 'Teleprompter' },
|
||||
{ url: 'info', label: 'Project Info' },
|
||||
];
|
||||
|
||||
export const navigatorConstants = navigatorViews.map((view) => ({ url: view, label: viewLabels[view] }));
|
||||
|
||||
// default time format to use for users in 12 hour clocks
|
||||
export const FORMAT_12 = 'h:mm:ss a';
|
||||
// default time format to use for users in 24 hour clocks
|
||||
|
||||
@@ -100,20 +100,7 @@ $item-height: 3.5rem;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
padding-bottom: 95vh;
|
||||
}
|
||||
|
||||
/* Flex prevents row margins collapsing and bounds the sticky header to its group. */
|
||||
.sub-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* The select view renders the same cards in a flat list. */
|
||||
.sub--group {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
|
||||
}
|
||||
|
||||
/* ====================== LIST-ITEM ======================*/
|
||||
@@ -209,14 +196,9 @@ $item-height: 3.5rem;
|
||||
|
||||
.sub--group {
|
||||
box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
|
||||
/* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
|
||||
background-color: var(--background-color-override, $viewer-background-color);
|
||||
background-image:
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
|
||||
linear-gradient(
|
||||
var(--card-background-color-override, $viewer-card-bg-color),
|
||||
var(--card-background-color-override, $viewer-card-bg-color)
|
||||
);
|
||||
var(--card-background-color-override, $viewer-card-bg-color);
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
@@ -248,16 +230,6 @@ $item-height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reserve the green fill for the running event. */
|
||||
.sub--group.sub--live {
|
||||
box-shadow: inset 0 0 0 2px $active-green;
|
||||
}
|
||||
|
||||
/* Keep the armed state quieter than the live ring. */
|
||||
.sub--group.sub--armed {
|
||||
box-shadow: inset 0 0 0 2px $gray-1000;
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
grid-area: title;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { MaybeNumber, OntimeEvent } from 'ontime-types';
|
||||
import { dayInMs } from 'ontime-utils';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { IoPencil } from 'react-icons/io5';
|
||||
|
||||
import Button from '../../common/components/buttons/Button';
|
||||
@@ -22,7 +22,6 @@ import {
|
||||
CountdownTarget,
|
||||
extendEventData,
|
||||
getIsLive,
|
||||
groupSubscriptionTargets,
|
||||
isOutsideRange,
|
||||
preferredFormat12,
|
||||
preferredFormat24,
|
||||
@@ -49,22 +48,11 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
const [lockAutoScroll, setLockAutoScroll] = useState(false);
|
||||
const selectedRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
|
||||
|
||||
// Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
|
||||
const getStickyOffset = useCallback(() => {
|
||||
const header = stickyHeaderRef.current;
|
||||
// Preserve the combined margins between the header and running event.
|
||||
return header ? header.offsetHeight + 4 : 0;
|
||||
}, []);
|
||||
|
||||
const scrollToComponent = useFollowComponent({
|
||||
followRef: selectedRef,
|
||||
scrollRef,
|
||||
doFollow: !lockAutoScroll,
|
||||
getTopOffset: getStickyOffset,
|
||||
topOffset: 0,
|
||||
followTrigger: selectedEventId,
|
||||
});
|
||||
|
||||
@@ -87,16 +75,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
|
||||
// prevent considering automated scrolls as user scrolls
|
||||
const handleUserScroll = () => {
|
||||
if (!selectedRef.current || !scrollRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRef?.current && scrollRef?.current) {
|
||||
const selectedRect = selectedRef.current.getBoundingClientRect();
|
||||
const scrollerRect = scrollRef.current.getBoundingClientRect();
|
||||
// Keep the threshold relative to the visible rows below the sticky header.
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
|
||||
if (selectedRect && scrollerRect) {
|
||||
const distanceFromTop = selectedRect.top - scrollerRect.top;
|
||||
const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
|
||||
setLockAutoScroll(hasScrolledOutOfThreshold);
|
||||
}
|
||||
}
|
||||
};
|
||||
const throttledHandleScroll = throttle(handleUserScroll, 1000);
|
||||
|
||||
@@ -111,14 +98,7 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
|
||||
return (
|
||||
<div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
|
||||
{sections.map((section) => {
|
||||
const rows = section.group ? [section.group, ...section.events] : section.events;
|
||||
// the running event anchors the scroll, the group header stays pinned above it
|
||||
const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
|
||||
|
||||
return (
|
||||
<div key={section.group?.id ?? rows[0].id} className='sub-section'>
|
||||
{rows.map((event) => {
|
||||
{subscribedEvents.map((event) => {
|
||||
// while a group is live, surface the running event's title as the secondary line
|
||||
const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
|
||||
const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
|
||||
@@ -127,24 +107,12 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
// a subscribed group is live when any of its children is the selected/running event
|
||||
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
||||
const isArmed = !isLive && activeEntryId === selectedEventId;
|
||||
// only ever hand the ref to a single row, sharing it would null it out on the next commit
|
||||
const isAnchor = isLive && (anchorId === null || event.id === anchorId);
|
||||
const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
|
||||
const countdownEvent = extendEventData(
|
||||
event,
|
||||
currentDay,
|
||||
actualStart,
|
||||
plannedStart,
|
||||
offset,
|
||||
mode,
|
||||
reportData,
|
||||
);
|
||||
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
|
||||
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
ref={rowRef}
|
||||
ref={isLive ? selectedRef : undefined}
|
||||
className={cx([
|
||||
'sub',
|
||||
isLive && 'sub--live',
|
||||
@@ -168,9 +136,6 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className={cx(['fab-container', !showFab && 'fab-container--hidden'])}>
|
||||
<Button variant='primary' size='xlarge' onClick={goToEditMode}>
|
||||
<IoPencil /> Edit
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
|
||||
|
||||
import { ExtendedEntry } from '../../common/utils/rundownMetadata';
|
||||
import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';
|
||||
import { resolveSubscriptionTarget } from './countdown.utils';
|
||||
|
||||
/**
|
||||
* Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
|
||||
@@ -126,89 +126,3 @@ describe('resolveSubscriptionTarget()', () => {
|
||||
expect(result?.liveEntry).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('groupSubscriptionTargets()', () => {
|
||||
/**
|
||||
* Resolves a group the same way the view does, so that the tests exercise the real target shape
|
||||
* (a resolved group carries type Event, so the helper cannot rely on the entry type)
|
||||
*/
|
||||
function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
|
||||
const resolved = resolveSubscriptionTarget(group, flat);
|
||||
if (resolved === null) {
|
||||
throw new Error('test setup: group has no playable children');
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
|
||||
it('returns no sections for an empty subscription list', () => {
|
||||
expect(groupSubscriptionTargets([])).toEqual([]);
|
||||
});
|
||||
|
||||
it('gives each ungrouped event its own section', () => {
|
||||
const e1 = makeEvent({ id: 'e1' });
|
||||
const e2 = makeEvent({ id: 'e2' });
|
||||
|
||||
expect(groupSubscriptionTargets([e1, e2])).toEqual([
|
||||
{ group: null, events: [e1] },
|
||||
{ group: null, events: [e2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('absorbs the children of a subscribed group into its section', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g1' });
|
||||
const resolved = resolveGroup(group, [group, c1, c2]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
|
||||
});
|
||||
|
||||
it('keeps a subscribed group with no subscribed children as an empty section', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const resolved = resolveGroup(group, [group, c1]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
|
||||
});
|
||||
|
||||
it('does not absorb an event which belongs to a different group', () => {
|
||||
const group1 = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const group2 = makeGroup({ id: 'g2' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g2' });
|
||||
const flat = [group1, c1, group2, c2];
|
||||
const resolved1 = resolveGroup(group1, flat);
|
||||
const resolved2 = resolveGroup(group2, flat);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
|
||||
{ group: resolved1, events: [c1] },
|
||||
{ group: resolved2, events: [c2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('does not absorb an event whose parent group is not subscribed', () => {
|
||||
const group1 = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const group2 = makeGroup({ id: 'g2' });
|
||||
const c2 = makeEvent({ id: 'c2', parent: 'g2' });
|
||||
const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
|
||||
|
||||
// only the first group is subscribed, so the second group's child stands alone
|
||||
expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
|
||||
{ group: resolved1, events: [c1] },
|
||||
{ group: null, events: [c2] },
|
||||
]);
|
||||
});
|
||||
|
||||
it('closes a section when an ungrouped event follows a group', () => {
|
||||
const group = makeGroup({ id: 'g1' });
|
||||
const c1 = makeEvent({ id: 'c1', parent: 'g1' });
|
||||
const e1 = makeEvent({ id: 'e1' });
|
||||
const resolved = resolveGroup(group, [group, c1]);
|
||||
|
||||
expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
|
||||
{ group: resolved, events: [c1] },
|
||||
{ group: null, events: [e1] },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -252,42 +252,6 @@ export function resolveSubscriptionTarget(
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A subscribed group along with the subscribed events which belong to it.
|
||||
* Events without a subscribed parent group form their own section with no group.
|
||||
*/
|
||||
export type CountdownSection = {
|
||||
group: CountdownTarget | null;
|
||||
events: CountdownTarget[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Folds the flat, rundown ordered subscription targets into sections.
|
||||
* A group opens a section which absorbs the following targets that declare it as parent,
|
||||
* which allows the group to be rendered as a sticky header for its own events.
|
||||
*/
|
||||
export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
|
||||
const sections: CountdownSection[] = [];
|
||||
|
||||
for (const target of targets) {
|
||||
// resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
|
||||
if (target.isGroup) {
|
||||
sections.push({ group: target, events: [] });
|
||||
continue;
|
||||
}
|
||||
|
||||
const previousSection = sections.at(-1);
|
||||
if (previousSection?.group?.id === target.parent) {
|
||||
previousSection.events.push(target);
|
||||
continue;
|
||||
}
|
||||
|
||||
sections.push({ group: null, events: [target] });
|
||||
}
|
||||
|
||||
return sections;
|
||||
}
|
||||
|
||||
export function extendEventData(
|
||||
event: CountdownTarget,
|
||||
currentDay: number,
|
||||
|
||||
@@ -7,13 +7,14 @@ import {
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import type { CuesheetColumnDef } from '../cuesheet-table/cuesheetTable.features';
|
||||
import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
|
||||
import { useColumnOrder } from '../cuesheet-table/useColumnManager';
|
||||
|
||||
interface CuesheetDndProps {
|
||||
columns: CuesheetColumnDef[];
|
||||
columns: ColumnDef<ExtendedEntry>[];
|
||||
tableRoot?: 'editor' | 'cuesheet';
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useTableNav } from '@table-nav/react';
|
||||
import { useTable } from '@tanstack/react-table';
|
||||
import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
||||
import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import {
|
||||
@@ -29,17 +29,12 @@ import GroupRow from './cuesheet-table-elements/GroupRow';
|
||||
import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
|
||||
import TableMenu from './cuesheet-table-menu/TableMenu';
|
||||
import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
|
||||
import {
|
||||
CuesheetColumnDef,
|
||||
CuesheetTable as CuesheetTableInstance,
|
||||
cuesheetTableFeatures,
|
||||
} from './cuesheetTable.features';
|
||||
import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
|
||||
|
||||
import style from './CuesheetTable.module.scss';
|
||||
|
||||
type CuesheetTableBaseProps = {
|
||||
columns: CuesheetColumnDef[];
|
||||
columns: ColumnDef<ExtendedEntry>[];
|
||||
cuesheetMode: AppMode;
|
||||
source: RundownSource;
|
||||
insertElement?: ReactNode;
|
||||
@@ -125,8 +120,7 @@ export default function CuesheetTable({
|
||||
const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
|
||||
const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);
|
||||
|
||||
const table = useTable({
|
||||
features: cuesheetTableFeatures,
|
||||
const table = useReactTable({
|
||||
data: flatRundown,
|
||||
columns,
|
||||
columnResizeMode: 'onChange',
|
||||
@@ -137,6 +131,7 @@ export default function CuesheetTable({
|
||||
},
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onColumnSizingChange: setColumnSizing,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
meta,
|
||||
});
|
||||
|
||||
@@ -200,7 +195,7 @@ export default function CuesheetTable({
|
||||
return colSizes;
|
||||
// eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
|
||||
}, [columns, table.state.columnResizing, table.state.columnSizing]);
|
||||
}, [table.getState().columnSizingInfo, table.getState().columnSizing]);
|
||||
|
||||
const allLeafColumns = table.getAllLeafColumns();
|
||||
const { rows } = table.getRowModel();
|
||||
@@ -219,7 +214,9 @@ export default function CuesheetTable({
|
||||
const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
|
||||
const fixedHeaderContent = useCallback(() => {
|
||||
return table.getHeaderGroups().map((headerGroup) => {
|
||||
const HeaderComponent = table.state.columnResizing.isResizingColumn ? CuesheetHeader : SortableCuesheetHeader;
|
||||
const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
|
||||
? CuesheetHeader
|
||||
: SortableCuesheetHeader;
|
||||
|
||||
// if the table is being resized, we render non-sortable headers to avoid performance issues
|
||||
return (
|
||||
@@ -282,8 +279,8 @@ interface CuesheetVirtuosoContext {
|
||||
columnSizeVars: { [key: string]: number };
|
||||
cursor: string | null;
|
||||
listeners: ReturnType<typeof useTableNav>['listeners'];
|
||||
rows: ReturnType<CuesheetTableInstance['getRowModel']>['rows'];
|
||||
table: CuesheetTableInstance;
|
||||
rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
|
||||
table: Table<ExtendedEntry>;
|
||||
handleAddNew?: (type: SupportedEntry) => void;
|
||||
}
|
||||
|
||||
|
||||
+5
-5
@@ -1,16 +1,16 @@
|
||||
import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { FlexRender } from '@tanstack/react-table';
|
||||
import { HeaderGroup, flexRender } from '@tanstack/react-table';
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { getAccessibleColour } from '../../../../common/utils/styleUtils';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import type { CuesheetHeaderGroup } from '../cuesheetTable.features';
|
||||
import { Draggable, SortableCell, TableCell } from './SortableCell';
|
||||
|
||||
import style from '../CuesheetTable.module.scss';
|
||||
|
||||
interface CuesheetHeaderProps {
|
||||
headerGroup: CuesheetHeaderGroup;
|
||||
headerGroup: HeaderGroup<ExtendedEntry>;
|
||||
cuesheetMode: AppMode;
|
||||
hideIndexColumn: boolean;
|
||||
}
|
||||
@@ -46,7 +46,7 @@ export function SortableCuesheetHeader({ headerGroup, cuesheetMode, hideIndexCol
|
||||
injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
|
||||
draggable={<Draggable header={header} />}
|
||||
>
|
||||
{header.isPlaceholder ? null : <FlexRender header={header} />}
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</SortableCell>
|
||||
);
|
||||
})}
|
||||
@@ -85,7 +85,7 @@ export function CuesheetHeader({ headerGroup, cuesheetMode, hideIndexColumn }: C
|
||||
injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
|
||||
draggable={<Draggable header={header} />}
|
||||
>
|
||||
{header.isPlaceholder ? null : <FlexRender header={header} />}
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { FlexRender } from '@tanstack/react-table';
|
||||
import { EntryId, RGBColour, SupportedEntry } from 'ontime-types';
|
||||
import { Table, flexRender } from '@tanstack/react-table';
|
||||
import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
|
||||
import { colourToHex, cssOrHexToColour } from 'ontime-utils';
|
||||
import { CSSProperties, memo, useMemo } from 'react';
|
||||
import { IoEllipsisHorizontal } from 'react-icons/io5';
|
||||
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
|
||||
import type { CuesheetTable } from '../cuesheetTable.features';
|
||||
|
||||
import style from './EventRow.module.scss';
|
||||
|
||||
@@ -25,7 +25,7 @@ interface EventRowProps {
|
||||
skip: boolean;
|
||||
parent: EntryId | null;
|
||||
rowIndex: number;
|
||||
table: CuesheetTable;
|
||||
table: Table<ExtendedEntry<OntimeEntry>>;
|
||||
injectedStyles?: CSSProperties;
|
||||
hasCursor?: boolean;
|
||||
}
|
||||
@@ -133,7 +133,7 @@ function EventRow({
|
||||
data-testid={`cuesheet-cell-${cell.column.id}`}
|
||||
data-column-id={cell.column.id}
|
||||
>
|
||||
<FlexRender cell={cell} />
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { FlexRender } from '@tanstack/react-table';
|
||||
import { Table, flexRender } from '@tanstack/react-table';
|
||||
import { EntryId, SupportedEntry } from 'ontime-types';
|
||||
import { CSSProperties, memo } from 'react';
|
||||
import { IoEllipsisHorizontal } from 'react-icons/io5';
|
||||
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
|
||||
import type { CuesheetTable } from '../cuesheetTable.features';
|
||||
|
||||
import style from './GroupRow.module.scss';
|
||||
|
||||
@@ -15,7 +15,7 @@ interface GroupRowProps {
|
||||
colour: string;
|
||||
rowId: string;
|
||||
rowIndex: number;
|
||||
table: CuesheetTable;
|
||||
table: Table<ExtendedEntry>;
|
||||
injectedStyles?: CSSProperties;
|
||||
hasCursor?: boolean;
|
||||
}
|
||||
@@ -76,7 +76,7 @@ function GroupRow({
|
||||
}}
|
||||
role='cell'
|
||||
>
|
||||
<FlexRender cell={cell} />
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
+4
-4
@@ -1,14 +1,14 @@
|
||||
import { FlexRender } from '@tanstack/react-table';
|
||||
import { Table, flexRender } from '@tanstack/react-table';
|
||||
import { EntryId, SupportedEntry } from 'ontime-types';
|
||||
import { colourToHex, cssOrHexToColour } from 'ontime-utils';
|
||||
import { CSSProperties, memo, useMemo } from 'react';
|
||||
import { IoEllipsisHorizontal } from 'react-icons/io5';
|
||||
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { cx, enDash, getAccessibleColour } from '../../../../common/utils/styleUtils';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
|
||||
import type { CuesheetTable } from '../cuesheetTable.features';
|
||||
|
||||
import style from './MilestoneRow.module.scss';
|
||||
|
||||
@@ -20,7 +20,7 @@ interface MilestoneRowProps {
|
||||
colour: string;
|
||||
rowId: string;
|
||||
rowIndex: number;
|
||||
table: CuesheetTable;
|
||||
table: Table<ExtendedEntry>;
|
||||
injectedStyles?: CSSProperties;
|
||||
hasCursor?: boolean;
|
||||
}
|
||||
@@ -102,7 +102,7 @@ function MilestoneRow({
|
||||
}}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{canRender && <FlexRender cell={cell} />}
|
||||
{canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
|
||||
+3
-2
@@ -1,8 +1,9 @@
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Header } from '@tanstack/react-table';
|
||||
import { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
import type { CuesheetHeaderCell } from '../cuesheetTable.features';
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
|
||||
import style from '../CuesheetTable.module.scss';
|
||||
|
||||
@@ -47,7 +48,7 @@ export function TableCell({ colSpan, injectedStyles, children, draggable }: Sort
|
||||
}
|
||||
|
||||
interface DraggableProps {
|
||||
header: CuesheetHeaderCell;
|
||||
header: Header<ExtendedEntry, unknown>;
|
||||
}
|
||||
|
||||
export function Draggable({ header }: DraggableProps) {
|
||||
|
||||
+15
-15
@@ -1,3 +1,4 @@
|
||||
import { CellContext, ColumnDef } from '@tanstack/react-table';
|
||||
import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
import { useCallback } from 'react';
|
||||
@@ -7,7 +8,6 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { formatDuration, formatTime } from '../../../../common/utils/time';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
|
||||
import type { CuesheetCellContext, CuesheetColumnDef } from '../cuesheetTable.features';
|
||||
import DurationInput from './DurationInput';
|
||||
import EditableImage from './EditableImage';
|
||||
import FlagCell from './FlagCell';
|
||||
@@ -17,11 +17,11 @@ import MutedText from './MutedText';
|
||||
import SingleLineCell from './SingleLineCell';
|
||||
import TimeInput from './TimeInput';
|
||||
|
||||
function getColumnLabel(column: CuesheetCellContext['column']): string {
|
||||
function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
|
||||
return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
|
||||
}
|
||||
|
||||
function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
|
||||
if (!table.options.meta) {
|
||||
return null;
|
||||
}
|
||||
@@ -60,7 +60,7 @@ function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
);
|
||||
}
|
||||
|
||||
function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
|
||||
if (!table.options.meta) {
|
||||
return null;
|
||||
}
|
||||
@@ -100,15 +100,15 @@ function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
);
|
||||
}
|
||||
|
||||
function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
|
||||
if (!table.options.meta) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { hideTableSeconds } = table.options.meta.options;
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
const duration = getValue() as number;
|
||||
return <MutedText numeric>{formatDuration(duration, false)}</MutedText>;
|
||||
return <MutedText numeric>{formatDuration(getValue() as number, hideTableSeconds)}</MutedText>;
|
||||
}
|
||||
|
||||
const { handleUpdateTimer } = table.options.meta;
|
||||
@@ -117,7 +117,7 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
|
||||
const duration = getValue() as number;
|
||||
const isDurationLocked = event.timeStrategy === TimeStrategy.LockDuration;
|
||||
const formattedDuration = formatDuration(duration, false);
|
||||
const formattedDuration = formatDuration(duration, hideTableSeconds);
|
||||
|
||||
const canWrite = column.columnDef.meta?.canWrite;
|
||||
if (!canWrite) {
|
||||
@@ -131,7 +131,7 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
|
||||
);
|
||||
}
|
||||
|
||||
function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
|
||||
function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
|
||||
@@ -160,7 +160,7 @@ function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
|
||||
);
|
||||
}
|
||||
|
||||
function LazyImage({ row, column, table }: CuesheetCellContext) {
|
||||
function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
|
||||
@@ -178,7 +178,7 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {
|
||||
return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
|
||||
}
|
||||
|
||||
function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
|
||||
function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
|
||||
@@ -207,7 +207,7 @@ function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
|
||||
);
|
||||
}
|
||||
|
||||
function MakeFlagField({ row }: CuesheetCellContext) {
|
||||
function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event) || !event.flag) {
|
||||
return null;
|
||||
@@ -215,7 +215,7 @@ function MakeFlagField({ row }: CuesheetCellContext) {
|
||||
return <FlagCell />;
|
||||
}
|
||||
|
||||
function MakeCustomField({ row, column, table }: CuesheetCellContext) {
|
||||
function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
|
||||
@@ -255,8 +255,8 @@ export function makeCuesheetColumns(
|
||||
customFields: CustomFields,
|
||||
cuesheetMode: AppMode,
|
||||
preset: URLPreset | undefined,
|
||||
): CuesheetColumnDef[] {
|
||||
const columnsDef: CuesheetColumnDef[] = [];
|
||||
): ColumnDef<ExtendedEntry>[] {
|
||||
const columnsDef: ColumnDef<ExtendedEntry>[] = [];
|
||||
const { canRead, canWrite } = getCuesheetColumnAccessPolicy(preset, cuesheetMode);
|
||||
|
||||
if (canRead('flag')) {
|
||||
|
||||
+5
-4
@@ -2,6 +2,7 @@ import { Popover } from '@base-ui/react/popover';
|
||||
import { Toggle } from '@base-ui/react/toggle';
|
||||
import { ToggleGroup } from '@base-ui/react/toggle-group';
|
||||
import { Toolbar } from '@base-ui/react/toolbar';
|
||||
import type { Column } from '@tanstack/react-table';
|
||||
import { ReactNode } from 'react';
|
||||
import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';
|
||||
|
||||
@@ -9,9 +10,9 @@ import Button from '../../../../common/components/buttons/Button';
|
||||
import Checkbox from '../../../../common/components/checkbox/Checkbox';
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import PopoverContents from '../../../../common/components/popover/Popover';
|
||||
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
|
||||
import { AppMode } from '../../../../ontimeConfig';
|
||||
import { useCuesheetPermissions } from '../../useTablePermissions';
|
||||
import type { CuesheetColumn } from '../cuesheetTable.features';
|
||||
import CuesheetShareModal from './CuesheetShareModal';
|
||||
|
||||
import style from './CuesheetTableSettings.module.scss';
|
||||
@@ -36,7 +37,7 @@ type TableModeControls = {
|
||||
};
|
||||
|
||||
interface CuesheetTableHeaderToolbarProps {
|
||||
columns: CuesheetColumn[];
|
||||
columns: Column<ExtendedEntry, unknown>[];
|
||||
optionsStore: TableHeaderOptionsStore;
|
||||
handleResetResizing: () => void;
|
||||
handleResetReordering: () => void;
|
||||
@@ -110,7 +111,7 @@ interface ViewSettingsProps {
|
||||
}
|
||||
|
||||
interface ColumnSettingsProps {
|
||||
columns: CuesheetColumn[];
|
||||
columns: Column<ExtendedEntry, unknown>[];
|
||||
handleResetResizing: () => void;
|
||||
handleResetReordering: () => void;
|
||||
handleClearToggles: () => void;
|
||||
@@ -202,7 +203,7 @@ function ColumnSettings({
|
||||
|
||||
return (
|
||||
<Editor.Label key={`${column.id}-${visible}`} className={style.option}>
|
||||
<Checkbox defaultChecked={visible} onCheckedChange={(checked) => column.toggleVisibility(checked)} />
|
||||
<Checkbox defaultChecked={visible} onCheckedChange={column.toggleVisibility} />
|
||||
{columnHeader as ReactNode}
|
||||
</Editor.Label>
|
||||
);
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&[data-background-rundown='true'] {
|
||||
background-color: $bg-active;
|
||||
background-color: rgba($ontime-color, 0.5);
|
||||
|
||||
.apart::before {
|
||||
content: 'BACKGROUND EDIT';
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import {
|
||||
columnOrderingFeature,
|
||||
columnResizingFeature,
|
||||
columnSizingFeature,
|
||||
columnVisibilityFeature,
|
||||
metaHelper,
|
||||
tableFeatures,
|
||||
} from '@tanstack/react-table';
|
||||
import type { CellContext, Column, ColumnDef, Header, HeaderGroup, Table } from '@tanstack/react-table';
|
||||
import type { TimeField } from 'ontime-types';
|
||||
|
||||
import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
|
||||
import type { AppMode } from '../../../ontimeConfig';
|
||||
|
||||
/**
|
||||
* Custom data we pass to the table
|
||||
* - `handleUpdate` callback to update the entry when the user edits a cell
|
||||
* - `handleUpdateTimer` callback to update the timer for a specific event
|
||||
* - `options-showDelayedTimes` whether to show or hide delayed times
|
||||
* - `options-hideTableSeconds` whether to hide seconds in the table
|
||||
* - `options-hideIndexColumn` whether to hide the index column
|
||||
* - `options-cuesheetMode` run or edit mode
|
||||
*/
|
||||
export interface CuesheetTableMeta {
|
||||
handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
|
||||
handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
|
||||
options: {
|
||||
showDelayedTimes: boolean;
|
||||
hideTableSeconds: boolean;
|
||||
hideIndexColumn: boolean;
|
||||
cuesheetMode: AppMode;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata specific for each column
|
||||
* - `canWrite` whether the user can write to this column
|
||||
* - `colour` background colour associated with a custom field
|
||||
*/
|
||||
export interface CuesheetColumnMeta {
|
||||
canWrite: boolean;
|
||||
colour?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Features registered in the cuesheet and rundown tables.
|
||||
* In v9 an API only exists once its feature is registered, so this list is the
|
||||
* source of truth for what the table can do:
|
||||
* - `columnOrderingFeature`: user reorders columns by dragging the headers
|
||||
* - `columnVisibilityFeature`: user toggles columns in the table settings
|
||||
* - `columnSizingFeature`: column widths, exposed to CSS as custom properties
|
||||
* - `columnResizingFeature`: the drag handle in the header (requires sizing)
|
||||
*
|
||||
* The `tableMeta` / `columnMeta` slots replace the v8 global module augmentation:
|
||||
* they scope our meta types to this table instead of every table in the app.
|
||||
*/
|
||||
export const cuesheetTableFeatures = tableFeatures({
|
||||
columnOrderingFeature,
|
||||
columnVisibilityFeature,
|
||||
columnSizingFeature,
|
||||
columnResizingFeature,
|
||||
tableMeta: metaHelper<CuesheetTableMeta>(),
|
||||
columnMeta: metaHelper<CuesheetColumnMeta>(),
|
||||
});
|
||||
|
||||
export type CuesheetFeatures = typeof cuesheetTableFeatures;
|
||||
|
||||
/** Convenience aliases so consumers do not need to repeat the feature generic */
|
||||
export type CuesheetColumnDef = ColumnDef<CuesheetFeatures, ExtendedEntry>;
|
||||
export type CuesheetTable = Table<CuesheetFeatures, ExtendedEntry>;
|
||||
export type CuesheetCellContext = CellContext<CuesheetFeatures, ExtendedEntry>;
|
||||
export type CuesheetHeaderGroup = HeaderGroup<CuesheetFeatures, ExtendedEntry>;
|
||||
export type CuesheetHeaderCell = Header<CuesheetFeatures, ExtendedEntry, unknown>;
|
||||
export type CuesheetColumn = Column<CuesheetFeatures, ExtendedEntry, unknown>;
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useLocalStorage } from '@mantine/hooks';
|
||||
import { ColumnSizingState, Updater } from '@tanstack/react-table';
|
||||
import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { debounce } from '../../../common/utils/debounce';
|
||||
import { makeStageKey } from '../../../common/utils/localStorage';
|
||||
import type { CuesheetColumnDef } from './cuesheetTable.features';
|
||||
import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
|
||||
|
||||
type TableRoot = 'editor' | 'cuesheet';
|
||||
|
||||
@@ -38,7 +38,7 @@ export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
|
||||
};
|
||||
}
|
||||
|
||||
export function useColumnOrder(columns: CuesheetColumnDef[], tableRoot: TableRoot = 'cuesheet') {
|
||||
export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
|
||||
const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);
|
||||
|
||||
const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
|
||||
|
||||
@@ -3,14 +3,11 @@
|
||||
.error {
|
||||
padding-inline: 0.5rem;
|
||||
font-size: 1rem;
|
||||
// rows grow when a match is shown from a note or custom field
|
||||
min-height: 3rem;
|
||||
padding-block: 0.35rem;
|
||||
height: 3rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.entry[data-selected='true'] {
|
||||
@@ -21,47 +18,21 @@
|
||||
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 match';
|
||||
'index title';
|
||||
column-gap: 1rem;
|
||||
grid-template-rows: min-content 1fr;
|
||||
min-width: 0;
|
||||
|
||||
.index {
|
||||
grid-area: index;
|
||||
// background and text colour come from getAccessibleColour, which keeps the
|
||||
// number legible whatever colour the user gave the entry
|
||||
background-color: var(--color, $gray-1000);
|
||||
border-radius: 2px;
|
||||
padding-block: 0.25rem;
|
||||
width: 3.5rem;
|
||||
@@ -71,33 +42,14 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,14 +63,13 @@
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.count {
|
||||
.filterHint {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.go {
|
||||
white-space: nowrap;
|
||||
padding-left: 1rem;
|
||||
.em {
|
||||
color: $ui-white;
|
||||
margin-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.hints {
|
||||
@@ -147,7 +98,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.count {
|
||||
.filterHint {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { MaybeString } from 'ontime-types';
|
||||
import { KeyboardEvent, useDeferredValue, useEffect, useRef, useState } from 'react';
|
||||
import { useDebouncedCallback } from '@mantine/hooks';
|
||||
import { SupportedEntry } from 'ontime-types';
|
||||
import { KeyboardEvent, 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 { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import useFinder, { FinderResult } from './useFinder';
|
||||
import useFinder from './useFinder';
|
||||
|
||||
import style from './Finder.module.scss';
|
||||
|
||||
@@ -16,76 +15,46 @@ interface FinderProps {
|
||||
}
|
||||
|
||||
export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [filter, setFilter] = useState<MaybeString>(null);
|
||||
const [selectedId, setSelectedId] = useState<MaybeString>(null);
|
||||
const { find, select, results, error } = useFinder();
|
||||
const [selected, setSelected] = useState(0);
|
||||
|
||||
/**
|
||||
* 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 debouncedFind = useDebouncedCallback(find, 100);
|
||||
|
||||
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') {
|
||||
setSelectedId(results[(activeIndex + 1) % results.length].id);
|
||||
setSelected((prev) => (prev + 1) % results.length);
|
||||
}
|
||||
if (event.key === 'ArrowUp') {
|
||||
setSelectedId(results[(activeIndex - 1 + results.length) % results.length].id);
|
||||
setSelected((prev) => (prev - 1 + results.length) % results.length);
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
submit(activeEntry);
|
||||
submit();
|
||||
}
|
||||
};
|
||||
|
||||
const submit = (entry: FinderResult | undefined) => {
|
||||
if (!entry) {
|
||||
return;
|
||||
}
|
||||
select(entry);
|
||||
const submit = () => {
|
||||
const selectedEvent = results[selected];
|
||||
select(selectedEvent);
|
||||
onClose();
|
||||
};
|
||||
|
||||
/** 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 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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const hiddenResults = total - results.length;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title=''
|
||||
@@ -94,68 +63,35 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
showBackdrop
|
||||
bodyElements={
|
||||
<div onKeyDown={navigate}>
|
||||
<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}>
|
||||
<Input height='large' fluid onChange={debouncedFind} placeholder='Search...' />
|
||||
<ul className={style.scrollContainer} onMouseMove={handleMouseMoveEvent}>
|
||||
{error && <li className={style.error}>{error}</li>}
|
||||
{!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';
|
||||
{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 : '';
|
||||
|
||||
return (
|
||||
<li
|
||||
key={entry.id}
|
||||
ref={isSelected ? activeRef : undefined}
|
||||
className={style.entry}
|
||||
data-testid='finder-result'
|
||||
data-selected={isSelected}
|
||||
onClick={() => submit(entry)}
|
||||
onPointerEnter={() => setSelectedId(entry.id)}
|
||||
data-index={index}
|
||||
onClick={submit}
|
||||
>
|
||||
<div className={style.data}>
|
||||
<div className={style.index} style={getAccessibleColour(entry.colour)}>
|
||||
{entry.eventIndex ?? '-'}
|
||||
<div className={style.index} style={{ '--color': entry.colour }}>
|
||||
{displayIndex}
|
||||
</div>
|
||||
<div className={style.cue}>{entry.cue}</div>
|
||||
<div className={style.cue}>{displayCue}</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>}
|
||||
{isSelected && <span>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>
|
||||
}
|
||||
@@ -176,11 +112,10 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
|
||||
Close
|
||||
</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 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>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
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,259 +1,239 @@
|
||||
import {
|
||||
CustomFields,
|
||||
EntryId,
|
||||
MaybeNumber,
|
||||
MaybeString,
|
||||
OntimeEntry,
|
||||
OntimeEvent,
|
||||
OntimeGroup,
|
||||
OntimeMilestone,
|
||||
isOntimeDelay,
|
||||
isOntimeEvent,
|
||||
} from 'ontime-types';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
|
||||
import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import useCustomFields from '../../../common/hooks-query/useCustomFields';
|
||||
import { useFlatRundown } from '../../../common/hooks-query/useRundown';
|
||||
import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
|
||||
|
||||
/** 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;
|
||||
const maxResults = 12;
|
||||
|
||||
const indexFilter = 'index';
|
||||
|
||||
/** 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 = {
|
||||
type FilterableGroup = {
|
||||
type: SupportedEntry.Group;
|
||||
id: EntryId;
|
||||
/** position in the flat rundown, which is how the rundown reveals an entry */
|
||||
index: number;
|
||||
/** 1-based position among events, null for groups and milestones */
|
||||
eventIndex: MaybeNumber;
|
||||
title: string;
|
||||
/** groups have no cue */
|
||||
colour: string;
|
||||
};
|
||||
|
||||
type FilterableEvent = {
|
||||
type: SupportedEntry.Event;
|
||||
id: EntryId;
|
||||
index: number;
|
||||
eventIndex: number;
|
||||
title: string;
|
||||
cue: string;
|
||||
colour: string;
|
||||
parent: MaybeString;
|
||||
/** absent when the entry was found by index rather than by matching text */
|
||||
match: FinderMatch | null;
|
||||
};
|
||||
|
||||
type SearchOutcome = { results: FinderResult[]; error: MaybeString; total: number };
|
||||
type FilterableMilestone = {
|
||||
type: SupportedEntry.Milestone;
|
||||
id: EntryId;
|
||||
index: number;
|
||||
title: string;
|
||||
cue: string;
|
||||
colour: string;
|
||||
parent: MaybeString;
|
||||
};
|
||||
|
||||
const noResults: SearchOutcome = { results: [], error: null, total: 0 };
|
||||
type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
|
||||
|
||||
/** 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) {
|
||||
export default function useFinder() {
|
||||
const { data, rundownId } = useFlatRundown();
|
||||
const { data: customFields } = useCustomFields();
|
||||
const [results, setResults] = useState<FilterableEntry[]>([]);
|
||||
const [error, setError] = useState<MaybeString>(null);
|
||||
const lastSearchString = useRef('');
|
||||
|
||||
const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
|
||||
|
||||
/** 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]);
|
||||
/** Filters the rundown to a given evaluation */
|
||||
const find = useCallback(
|
||||
(event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!data || data.length === 0) {
|
||||
setError('No data');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
|
||||
const { results, error, total, appliedFilter } = useMemo(() => {
|
||||
if (data.length === 0) {
|
||||
return { ...noResults, error: 'No data', appliedFilter: activeFilter };
|
||||
if (event.target.value === '') {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const normalised = searchValue.trim().toLowerCase();
|
||||
if (normalised === '') {
|
||||
return { ...noResults, appliedFilter: activeFilter };
|
||||
const searchValue = event.target.value.toLowerCase();
|
||||
lastSearchString.current = searchValue;
|
||||
|
||||
if (searchValue.startsWith('index ')) {
|
||||
const searchString = searchValue.slice('index '.length).trim();
|
||||
const { results, error } = searchByIndex(searchString);
|
||||
setResults(results);
|
||||
setError(error);
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* If a badge is selected it scopes the search; otherwise, keyword prefixes in the input
|
||||
* (e.g. "cue:" / "title:") are parsed and the matching badge is highlighted.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
if (filterKey === indexFilter) {
|
||||
return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
|
||||
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 (searchString === '') {
|
||||
// a filter is selected, but there is nothing to match on yet
|
||||
return { ...noResults, appliedFilter: filterKey };
|
||||
|
||||
if (searchIndex > data.length) {
|
||||
return { results: [], error: null };
|
||||
}
|
||||
return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
|
||||
}, [data, customFields, filters, searchValue, activeFilter]);
|
||||
|
||||
// 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],
|
||||
);
|
||||
|
||||
const select = useCallback(
|
||||
(result: FinderResult) => {
|
||||
selectAndRevealEntry({ id: result.id, index: result.index, parent: result.parent });
|
||||
(selectedEvent: FilterableEntry) => {
|
||||
selectAndRevealEntry({
|
||||
id: selectedEvent.id,
|
||||
index: selectedEvent.index,
|
||||
parent: 'parent' in selectedEvent ? selectedEvent.parent : null,
|
||||
});
|
||||
},
|
||||
[selectAndRevealEntry],
|
||||
);
|
||||
|
||||
return { select, results, error, total, filters, appliedFilter };
|
||||
/** 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 };
|
||||
}
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
@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};
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,109 @@
|
||||
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 });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
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);
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user