feat(teleprompter): stop playback at the end of the event

A user reading a podcast script found the prompter ran past the end of the
event and on into the next one. An event is a unit of time with a stop of
its own, but auto-scroll bounded against the end of the whole document, so
nothing held it at the boundary. At a conference that means the prompter
reads the next speaker's script while they are still walking on.

Playback now runs to the end of the segment being read and parks there,
saying so. Loading the next event releases it through the existing follow,
and pressing play again carries on into the next segment for a reader who
wants to keep going. Only playback is held: a jump, a page or a nudge is
the reader asking to leave the segment and still crosses freely.

The segment is chosen once when playback starts, and held by identity
rather than as a pixel bound. Re-deciding it against a position which is
moving let the bound outrun the reader and never arrive; holding the id
rather than the offset keeps the stop on the same words when an edit moves
the script underneath it.

Add an option to show only the event being played, for the case where the
rest of the script is a distraction. It falls back to the whole script
while nothing is playing, where narrowing would leave a blank screen. The
script of the event being played is now held out from the rest, which stays
readable so a reader who is ahead or behind can still find their place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf

.github/skills/code-review/SKILL.md

@@ -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.

AGENTS.md

@@ -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.

apps/cli/package.json

@@ -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",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.13.0",
+  "version": "4.13.0-beta.1",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/AppRouter.tsx

@@ -3,7 +3,6 @@ import { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
 import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
 
 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
-import { EditableRundownScopeProvider } from './common/context/EditableRundownScopeProvider';
 import { PresetContext } from './common/context/PresetContext';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
 import { useClientPath } from './common/hooks/useClientPath';
@@ -21,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'));
@@ -96,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 />} />
@@ -113,9 +122,7 @@ export default function AppRouter() {
           path='rundown'
           element={
             <EditorFeatureWrapper>
-              <EditableRundownScopeProvider rundownId={null}>
-                <RundownPanel />
-              </EditableRundownScopeProvider>
+              <RundownPanel />
             </EditorFeatureWrapper>
           }
         />
@@ -168,6 +175,7 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
   [OntimeView.StudioClock]: StudioClock,
   [OntimeView.Countdown]: Countdown,
   [OntimeView.ProjectInfo]: ProjectInfo,
+  [OntimeView.Teleprompter]: Teleprompter,
 };
 
 /**
@@ -217,8 +225,14 @@ function PresetView() {
   const Component = PresetViewMap[preset.target as OntimeViewPresettable];
   return (
     <PresetContext value={preset}>
-      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      {Component ? <Component /> : <NotFound />}
+      <ViewLoader>
+        <ViewNavigationMenu
+          isNavigationLocked={getIsNavigationLocked()}
+          suppressSettings
+          suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
+        />
+        {Component ? <Component /> : <NotFound />}
+      </ViewLoader>
     </PresetContext>
   );
 }

apps/client/src/common/api/constants.ts

@@ -22,14 +22,6 @@ export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
 
-/**
- * Cache key holding the data for a rundown.
- * Before the loaded rundown is known there is no id to key by,
- * and the data lives under the bootstrap alias.
- */
-export const getRundownCacheKey = (rundownId: string) =>
-  rundownId ? getRundownQueryKey(rundownId) : CURRENT_RUNDOWN_QUERY_KEY;
-
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
 

apps/client/src/common/components/buttons/ToggleButton.tsx

@@ -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} />;
-}

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.module.scss

@@ -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;
+  }
+}

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.tsx

@@ -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>;
+}

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -13,6 +13,8 @@ interface ViewNavigationMenuProps {
   isNavigationLocked?: boolean;
   /** prevent showing settings */
   suppressSettings?: boolean;
+  /** leave Space to the view, which needs it for its own transport */
+  suppressSpaceHotkey?: boolean;
 }
 
 function isInteractiveKeyboardAction(target: EventTarget | null): boolean {
@@ -28,7 +30,7 @@ function isInteractiveKeyboardAction(target: EventTarget | null): boolean {
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: ViewNavigationMenuProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { open: showEditFormDrawer } = useViewParamsEditorStore();
   const [searchParams] = useSearchParams();
@@ -41,7 +43,7 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
     [
       'Space',
       (event) => {
-        if (isNavigationLocked || isInteractiveKeyboardAction(event.target)) return;
+        if (suppressSpaceHotkey || isNavigationLocked || isInteractiveKeyboardAction(event.target)) return;
         event.preventDefault();
         toggleMenu();
       },

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -50,7 +50,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') {

apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts

@@ -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');
+  });
 });

apps/client/src/common/components/view-params-editor/viewParams.utils.ts

@@ -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) {

apps/client/src/common/context/EditableRundownScopeProvider.tsx

@@ -1,24 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { useScopedEntryActions } from '../hooks/useEntryAction';
-import { EntryActionsProvider } from './EntryActionsContext';
-import { RundownScopeProvider, useRundownScope, type RundownScopeProviderProps } from './RundownScopeContext';
-
-/**
- * Rundown scope for subtrees which mutate entries.
- * Actions are bound to the same rundown as the data, so the two cannot disagree.
- */
-export function EditableRundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
-  return (
-    <RundownScopeProvider rundownId={rundownId}>
-      <ScopedEntryActions>{children}</ScopedEntryActions>
-    </RundownScopeProvider>
-  );
-}
-
-function ScopedEntryActions({ children }: PropsWithChildren) {
-  const { rundownId } = useRundownScope();
-  const actions = useScopedEntryActions(rundownId);
-
-  return <EntryActionsProvider actions={actions}>{children}</EntryActionsProvider>;
-}

apps/client/src/common/context/RundownScopeContext.tsx

@@ -1,77 +0,0 @@
-import { MaybeString, Rundown } from 'ontime-types';
-import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef } from 'react';
-
-import { getRundownCacheKey } from '../api/constants';
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
-import { ontimeQueryClient } from '../queryClient';
-import { createEventSelectionStore, type EventSelectionStoreApi } from '../stores/eventSelectionStore';
-
-export type RundownScopeValue = {
-  /** the rundown this subtree operates on */
-  rundownId: string;
-  /** whether this scope targets the rundown the runtime is playing */
-  isLoaded: boolean;
-  /** selection and cursor, scoped to this rundown */
-  selectionStore: EventSelectionStoreApi;
-};
-
-const RundownScopeContext = createContext<RundownScopeValue | null>(null);
-
-export interface RundownScopeProviderProps extends PropsWithChildren {
-  /** rundown to operate on, null follows the loaded rundown */
-  rundownId: MaybeString;
-}
-
-/**
- * Declares which rundown a subtree reads from.
- *
- * Data hooks resolve their rundown from here, so components never need to know
- * which rundown they operate on. Nest a provider to point part of the tree at a
- * different rundown; the app mounts one at the root that follows the loaded rundown.
- */
-export function RundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
-  const {
-    data: { loaded },
-  } = useProjectRundowns();
-
-  const targetId = rundownId ?? loaded;
-
-  // the store reads the rundown lazily, the ref keeps it pointing at the current target
-  const targetIdRef = useRef(targetId);
-
-  const selectionStoreRef = useRef<EventSelectionStoreApi | null>(null);
-  if (selectionStoreRef.current === null) {
-    selectionStoreRef.current = createEventSelectionStore(() =>
-      ontimeQueryClient.getQueryData<Rundown>(getRundownCacheKey(targetIdRef.current)),
-    );
-  }
-  const selectionStore = selectionStoreRef.current;
-
-  // a selection refers to entries of a single rundown, it cannot survive a change of target
-  useEffect(() => {
-    targetIdRef.current = targetId;
-    selectionStore.getState().clearSelectedEvents();
-  }, [selectionStore, targetId]);
-
-  const value = useMemo(
-    (): RundownScopeValue => ({
-      rundownId: targetId,
-      // an unresolved target is not the loaded rundown, it is not yet any rundown
-      isLoaded: Boolean(loaded) && targetId === loaded,
-      selectionStore,
-    }),
-    [targetId, loaded, selectionStore],
-  );
-
-  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
-}
-
-export function useRundownScope(): RundownScopeValue {
-  const context = useContext(RundownScopeContext);
-
-  if (!context) {
-    throw new Error('useRundownScope must be used within a RundownScopeProvider');
-  }
-
-  return context;
-}

apps/client/src/common/hooks-query/useLoadedRundown.ts

@@ -1,73 +0,0 @@
-import { EntryId, OntimeEntry } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
-import { flattenRundown, useRundownById } from './useRundownById';
-
-/**
- * Rundown data for surfaces which only ever work against the rundown being played:
- * the viewers, the operator, app settings and the runtime overview.
- *
- * These take no part in a rundown scope, they resolve the loaded rundown directly.
- * Anything which can be pointed at a background rundown reads from its scope instead.
- */
-export function useLoadedRundown() {
-  const {
-    data: { loaded },
-  } = useProjectRundowns();
-  return useRundownById(loaded);
-}
-
-export function useLoadedRundownWithMetadata() {
-  const { data, status } = useLoadedRundown();
-  const selectedEventId = useSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data, status, rundownMetadata };
-}
-
-export function useLoadedFlatRundown() {
-  const { data, status } = useLoadedRundown();
-  const flatRundown = useMemo(() => flattenRundown(data), [data]);
-  return { data: flatRundown, rundownId: data.id, status };
-}
-
-export function useLoadedFlatRundownWithMetadata() {
-  const { data, status } = useLoadedRundown();
-  const selectedEventId = useSelectedEventId();
-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data: rundownWithMetadata, status };
-}
-
-/**
- * Provides access to a partial rundown based on a filter callback
- *
- * Callers MUST memoize the callback with useCallback to prevent
- * re-filtering on every render.
- */
-export function useLoadedPartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useLoadedFlatRundownWithMetadata();
-  const filteredData = useMemo(() => data.filter(cb), [data, cb]);
-  return { data: filteredData, status };
-}
-
-/**
- * Hook to get a specific entry by ID from the loaded rundown.
- * Runtime ids (the playing event, its group, the next flag) only exist here.
- */
-export function useLoadedEntry(entryId: EntryId | null): OntimeEntry | null {
-  const { data: rundown } = useLoadedRundown();
-
-  if (entryId === null) return null;
-  return rundown.entries[entryId] ?? null;
-}
-
-export function useLoadedRundownAuxData() {
-  const { data, status } = useLoadedRundown();
-  const filteredData = useMemo(() => {
-    const { title, id } = data;
-    return { title, id };
-  }, [data]);
-  return { data: filteredData, status };
-}

apps/client/src/common/hooks-query/useRundown.ts

@@ -1,32 +1,61 @@
-import { EntryId, OntimeEntry } from 'ontime-types';
-import { useMemo } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
+import { useEffect, useMemo } from 'react';
 
-import { useRundownScope } from '../context/RundownScopeContext';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { flattenRundown, useRundownById } from './useRundownById';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+
+// revision is -1 so that the remote revision is higher
+const cachedRundownPlaceholder: Rundown = {
+  id: 'default',
+  title: '',
+  order: [],
+  flatOrder: [],
+  entries: {},
+  revision: -1,
+};
 
 /**
- * Normalised rundown data for the rundown of the enclosing scope
+ * Normalised rundown data for the currently loaded rundown.
+ *
+ * Bootstraps via the `/current` alias so the first paint is a single round-trip,
+ * independent of the project rundown list. Once the loaded id is known, the
+ * query key swaps to the id-keyed cache that is shared with `useRundownById`.
  */
 export default function useRundown() {
-  const { rundownId } = useRundownScope();
-  return useRundownById(rundownId);
-}
+  const queryClient = useQueryClient();
+  const {
+    data: { loaded: loadedRundownId },
+  } = useProjectRundowns();
 
-/**
- * Runtime state only describes the loaded rundown,
- * a scope pointed elsewhere must not show a playing event
- */
-export function useScopedSelectedEventId(): EntryId | null {
-  const { isLoaded } = useRundownScope();
-  const selectedEventId = useSelectedEventId();
-  return isLoaded ? selectedEventId : null;
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || loadedRundownId) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, loadedRundownId, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache
+  useEffect(() => {
+    if (!loadedRundownId) return;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [loadedRundownId, queryClient]);
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
 export function useRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
   const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data, status, rundownMetadata };
 }
@@ -37,19 +66,41 @@ export function useRundownWithMetadata() {
  */
 export function useFlatRundown() {
   const { data, status } = useRundown();
-  const flatRundown = useMemo(() => flattenRundown(data), [data]);
+
+  const flatRundown = useMemo(() => {
+    if (data.revision === -1) {
+      return [];
+    }
+    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
+  }, [data]);
 
   return { data: flatRundown, rundownId: data.id, status };
 }
 
 export function useFlatRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
 
   const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data: rundownWithMetadata, status };
 }
 
+/**
+ * Provides access to a partial rundown based on a filter callback
+ *
+ * Callers MUST memoize the callback with useCallback to prevent
+ * re-filtering on every render.
+ *
+ */
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
+  const filteredData = useMemo(() => {
+    return data.filter(cb);
+  }, [data, cb]);
+
+  return { data: filteredData, status };
+}
+
 /**
  * Hook to get a specific entry by ID from the rundown
  */
@@ -59,3 +110,30 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
+
+export function useRundownAuxData() {
+  const { data, status } = useRundown();
+  const filteredData = useMemo(() => {
+    const { title, id } = data;
+    return { title, id };
+  }, [data]);
+  return { data: filteredData, status };
+}
+
+/**
+ * Provides access to a specific rundown by ID.
+ * When rundownId is null/undefined the query is disabled and returns the placeholder.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const enabled = Boolean(rundownId);
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownQueryKey(rundownId ?? ''),
+    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
+    enabled,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}

apps/client/src/common/hooks-query/useRundownById.ts

@@ -1,66 +0,0 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { OntimeEntry, Rundown } from 'ontime-types';
-import { useEffect, useRef } from 'react';
-
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { CURRENT_RUNDOWN_QUERY_KEY, getRundownCacheKey, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
-
-// revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  flatOrder: [],
-  entries: {},
-  revision: -1,
-};
-
-/**
- * Provides access to a specific rundown by ID.
- *
- * Without an ID we do not yet know which rundown is loaded, so we bootstrap via
- * the `/current` alias to keep the first paint to a single round-trip, then seed
- * the id-keyed cache that every other reader shares.
- */
-export function useRundownById(rundownId: string | null | undefined) {
-  const queryClient = useQueryClient();
-  const id = rundownId ?? '';
-  const isBootstrap = id === '';
-
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownCacheKey(id),
-    queryFn: ({ signal }) => (isBootstrap ? fetchCurrentRundown({ signal }) : fetchRundown(id, { signal })),
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-
-  // Seed the id-keyed cache when fetching via the bootstrap alias
-  useEffect(() => {
-    if (!data || !isBootstrap) return;
-    queryClient.setQueryData(getRundownQueryKey(data.id), data);
-  }, [data, isBootstrap, queryClient]);
-
-  // Once we have the ID, drop the temporary current cache.
-  // Only the reader which bootstrapped may do so, others are still relying on it.
-  const didBootstrap = useRef(isBootstrap);
-  useEffect(() => {
-    if (isBootstrap || !didBootstrap.current) return;
-    didBootstrap.current = false;
-    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  }, [isBootstrap, queryClient]);
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
-}
-
-/**
- * Builds a flat rundown from the order and entries fields
- */
-export function flattenRundown(rundown: Rundown): OntimeEntry[] {
-  if (rundown.revision === -1) {
-    return [];
-  }
-  return rundown.flatOrder
-    .map((id) => rundown.entries[id])
-    .filter((entry): entry is OntimeEntry => entry !== undefined);
-}

apps/client/src/common/hooks-query/useScopedRundown.ts

@@ -0,0 +1,54 @@
+import { EntryId, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { useRundownById } from './useRundown';
+
+export type RundownSource = {
+  rundownId: string | null;
+  rundown: Rundown;
+  flatRundown: ExtendedEntry[];
+  status: string;
+  selectedEventId: EntryId | null;
+};
+
+/**
+ * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
+ */
+export function useScopedRundown(rundownId: string | null): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  return useRundownSource(rundownId, projectRundowns.loaded || null);
+}
+
+/**
+ * Loaded-rundown source for views that must follow the active runtime rundown.
+ */
+export function useLoadedRundownSource(): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  const loadedRundownId = projectRundowns.loaded || null;
+  return useRundownSource(loadedRundownId, loadedRundownId);
+}
+
+function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
+  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
+  const runtimeSelectedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
+  const { data: rundown, status } = useRundownById(rundownId);
+  const flatRundown = useMemo(
+    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      rundownId,
+      rundown,
+      flatRundown,
+      status,
+      selectedEventId: effectiveSelectedEventId,
+    }),
+    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
+  );
+}

apps/client/src/common/hooks/useEntryAction.ts

@@ -8,6 +8,7 @@ import {
   OntimeGroup,
   OntimeMilestone,
   PatchWithId,
+  ProjectRundownsList,
   Rundown,
   SupportedEntry,
   TimeField,
@@ -33,7 +34,7 @@ import {
 import { useCallback, useMemo } from 'react';
 
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { getRundownCacheKey } from '../api/constants';
+import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
 import {
   ReorderEntry,
   deleteEntries,
@@ -51,7 +52,6 @@ import {
   requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
-import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
@@ -70,16 +70,16 @@ type ClientInsertOptions = {
 };
 
 /**
- * Gather utilities for actions on entries in the rundown of the enclosing scope.
+ * Gather utilities for actions on entries in the loaded rundown.
  */
-export const useEntryActions = () => useEntryActionsForRundown(useRundownScope().rundownId);
+export const useEntryActions = () => useEntryActionsForRundown(undefined);
 
 /**
  * Gather utilities for actions on entries in an explicitly selected rundown.
  */
-export const useScopedEntryActions = (rundownId: MaybeString) => useEntryActionsForRundown(rundownId ?? '');
+export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
 
-function useEntryActionsForRundown(scopedRundownId: string) {
+function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   const queryClient = useQueryClient();
   const {
     linkPrevious,
@@ -93,8 +93,12 @@ function useEntryActionsForRundown(scopedRundownId: string) {
   } = useEditorSettings();
 
   const resolveCurrentRundownQueryKey = useCallback(() => {
-    return getRundownCacheKey(scopedRundownId);
-  }, [scopedRundownId]);
+    if (scopedRundownId !== undefined) {
+      return getRundownQueryKey(scopedRundownId);
+    }
+    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+  }, [queryClient, scopedRundownId]);
 
   /**
    * Returns the currently loaded rundown

apps/client/src/common/stores/__tests__/eventSelectionStore.test.ts

@@ -1,64 +0,0 @@
-import { Rundown, SupportedEntry } from 'ontime-types';
-
-import { createEventSelectionStore } from '../eventSelectionStore';
-
-function makeRundown(id: string, eventIds: string[]): Rundown {
-  return {
-    id,
-    title: id,
-    order: eventIds,
-    flatOrder: eventIds,
-    entries: Object.fromEntries(eventIds.map((entryId) => [entryId, { id: entryId, type: SupportedEntry.Event }])),
-    revision: 1,
-  } as unknown as Rundown;
-}
-
-describe('createEventSelectionStore', () => {
-  it('keeps selections of separate instances independent', () => {
-    const first = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
-    const second = createEventSelectionStore(() => makeRundown('rundown-b', ['b1', 'b2']));
-
-    first.getState().setSingleEntrySelection({ id: 'a1' });
-    second.getState().setSingleEntrySelection({ id: 'b2' });
-
-    expect(first.getState().cursor).toBe('a1');
-    expect(second.getState().cursor).toBe('b2');
-    expect(first.getState().selectedEvents).toEqual(new Set(['a1']));
-    expect(second.getState().selectedEvents).toEqual(new Set(['b2']));
-  });
-
-  it('resolves a shift range against the injected rundown', () => {
-    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2', 'a3']));
-
-    store.getState().setSelectedEvents({ id: 'a3', index: 2, selectMode: 'shift' });
-
-    // without an anchor the range runs from the top up to the clicked index
-    expect(store.getState().selectedEvents).toEqual(new Set(['a1', 'a2']));
-    expect(store.getState().anchoredIndex).toBe(2);
-  });
-
-  it('replaces the selection set so subscribers on the set re-render', () => {
-    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
-
-    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'click' });
-    const afterClick = store.getState().selectedEvents;
-
-    store.getState().setSelectedEvents({ id: 'a2', index: 1, selectMode: 'ctrl' });
-    const afterAdd = store.getState().selectedEvents;
-    expect(afterAdd).not.toBe(afterClick);
-    expect(afterAdd).toEqual(new Set(['a1', 'a2']));
-
-    store.getState().unselect('a1');
-    const afterUnselect = store.getState().selectedEvents;
-    expect(afterUnselect).not.toBe(afterAdd);
-    expect(afterUnselect).toEqual(new Set(['a2']));
-  });
-
-  it('does not select when the rundown is unavailable', () => {
-    const store = createEventSelectionStore(() => undefined);
-
-    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'shift' });
-
-    expect(store.getState().selectedEvents).toEqual(new Set());
-  });
-});

apps/client/src/common/stores/entryCopyStore.ts

@@ -1,21 +1,14 @@
-import { MaybeString } from 'ontime-types';
 import { create } from 'zustand';
 
 type EntryCopyStore = {
-  entryCopyId: MaybeString;
-  /** rundown the copied entry belongs to, so a paste knows whether it crosses rundowns */
-  entryCopyRundownId: MaybeString;
+  entryCopyId: string | null;
   entryCopyMode: 'copy' | 'cut';
-  setEntryCopyId: (eventId: MaybeString, rundownId: MaybeString, mode?: 'copy' | 'cut') => void;
+  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
 };
 
-/**
- * The clipboard is shared across rundowns so entries can be moved between them
- */
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
   entryCopyId: null,
-  entryCopyRundownId: null,
   entryCopyMode: 'copy',
-  setEntryCopyId: (entryCopyId: MaybeString, entryCopyRundownId: MaybeString, mode: 'copy' | 'cut' = 'copy') =>
-    set({ entryCopyId, entryCopyRundownId, entryCopyMode: mode }),
+  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
+    set({ entryCopyId, entryCopyMode: mode }),
 }));

apps/client/src/common/stores/eventSelectionStore.ts

@@ -1,158 +0,0 @@
-import { EntryId, MaybeNumber, Rundown, isOntimeEvent } from 'ontime-types';
-import { MouseEvent } from 'react';
-import { StoreApi } from 'zustand';
-import { createStore } from 'zustand/vanilla';
-
-import { isMacOS } from '../utils/deviceUtils';
-
-export type SelectionMode = 'shift' | 'click' | 'ctrl';
-
-export interface EventSelectionStore {
-  selectedEvents: Set<EntryId>;
-  anchoredIndex: MaybeNumber;
-  cursor: EntryId | null;
-  entryMode: 'event' | 'single' | null;
-  scrollHandler: ((id: EntryId) => void) | null;
-  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
-  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
-  clearSelectedEvents: () => void;
-  clearMultiSelect: () => void;
-  unselect: (id: EntryId) => void;
-  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
-  scrollToEntry: (id: EntryId) => void;
-}
-
-export type EventSelectionStoreApi = StoreApi<EventSelectionStore>;
-
-/**
- * Keeps track of the selected entries and selection mode
- * Provides methods to update the selection based on user interactions
- *
- * One store instance exists per rundown scope, so panels showing different
- * rundowns keep independent selections. The rundown the selection refers to is
- * injected as `getRundown` rather than resolved from the loaded rundown.
- */
-export function createEventSelectionStore(getRundown: () => Rundown | undefined): EventSelectionStoreApi {
-  return createStore<EventSelectionStore>()((set, get) => ({
-    selectedEvents: new Set(),
-    anchoredIndex: null,
-    cursor: null,
-    entryMode: null,
-    scrollHandler: null,
-    setSingleEntrySelection: ({ id }) => {
-      set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
-    },
-    setSelectedEvents: ({ id, index, selectMode }) => {
-      const { selectedEvents, anchoredIndex, entryMode } = get();
-
-      // if we are in single mode, we replace the selection and change the mode
-      if (entryMode === 'single') {
-        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-      }
-
-      // on click, we replace selection with event
-      if (selectMode === 'click') {
-        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-      }
-
-      // on ctrl + click, we toggle the selection of that event
-      if (selectMode === 'ctrl') {
-        const rundownData = getRundown();
-        if (!rundownData) return;
-
-        // if it doesnt exist, simply add to the list and set an anchor
-        if (!selectedEvents.has(id)) {
-          return set({
-            selectedEvents: new Set(selectedEvents).add(id),
-            anchoredIndex: index,
-            cursor: id,
-            entryMode: 'event',
-          });
-        }
-
-        // if event is already selected, we remove it from selection
-        // and set the anchor to the event after
-        const withoutId = new Set(selectedEvents);
-        withoutId.delete(id);
-
-        const nextIndex = rundownData.order.findIndex(
-          (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && withoutId.has(eventId),
-        );
-
-        // if we didnt find anything after, set the anchor to the last event
-        return set({
-          selectedEvents: withoutId,
-          anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
-          entryMode: 'event',
-        });
-      }
-
-      // on shift + click, we select a range of events up to the clicked event
-      if (selectMode === 'shift') {
-        const rundownData = getRundown();
-        if (!rundownData) return;
-
-        // get list of rundown with only ontime events
-        const eventIds: EntryId[] = [];
-        rundownData.flatOrder.forEach((eventId) => {
-          const event = rundownData.entries[eventId];
-          if (isOntimeEvent(event)) {
-            eventIds.push(event.id);
-          }
-        });
-
-        const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
-        const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
-
-        // create new set with range of ids from start to end
-        const selectedEventIds = eventIds.slice(start, end);
-
-        return set({
-          selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
-          anchoredIndex: index,
-          entryMode: 'event',
-        });
-      }
-    },
-    clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
-    clearMultiSelect: () => {
-      const { selectedEvents } = get();
-      const [firstSelected] = selectedEvents;
-      set({
-        selectedEvents: new Set(firstSelected ? [firstSelected] : []),
-        anchoredIndex: null,
-        entryMode: null,
-      });
-    },
-    unselect: (id: string) => {
-      const { entryMode, selectedEvents } = get();
-      const remaining = new Set(selectedEvents);
-      remaining.delete(id);
-      set({
-        selectedEvents: remaining,
-        entryMode: remaining.size === 0 ? null : entryMode,
-      });
-    },
-    // Sets the scroll handler for programmatic scrolling to entries
-    setScrollHandler: (handler) => set({ scrollHandler: handler }),
-    // Scrolls to the specified entry using the registered scroll handler
-    scrollToEntry: (id: EntryId) => {
-      const handler = get().scrollHandler;
-      if (handler) {
-        handler(id);
-      }
-    },
-  }));
-}
-
-export function getSelectionMode(event: MouseEvent): SelectionMode {
-  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
-    return 'ctrl';
-  }
-
-  if (event.shiftKey) {
-    return 'shift';
-  }
-
-  return 'click';
-}

apps/client/src/common/utils/socket.ts

@@ -242,12 +242,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
     return;
   }
 
+  // skip if we dont recognise the ID the revision is lower
   const queryKey = getRundownQueryKey(rundownId);
   const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);
 
-  // we already have this change, or something newer
-  // messages can arrive after a refetch has already brought in a later revision
-  if (revision !== null && cachedRundown !== undefined && revision <= cachedRundown.revision) {
+  if (revision === cachedRundown?.revision) {
+    // we already have the latest change
     return;
   }
 

apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx

@@ -4,8 +4,8 @@ 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 { useLoadedRundown } from '../../../../common/hooks-query/useLoadedRundown';
 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';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';
 
 export default function ReportSettings() {
   const { data: reportData } = useReport();
-  const { data } = useLoadedRundown();
+  const { data } = useRundown();
 
   const clearReport = async () => await deleteAllReport();
   const downloadCSV = (combinedReport: CombinedReport[]) => {

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx

@@ -26,6 +26,7 @@ const targetOptions: SelectOption<OntimeViewPresettable>[] = [
   { value: OntimeView.Timeline, label: viewLabels[OntimeView.Timeline] },
   { value: OntimeView.StudioClock, label: viewLabels[OntimeView.StudioClock] },
   { value: OntimeView.Countdown, label: viewLabels[OntimeView.Countdown] },
+  { value: OntimeView.Teleprompter, label: viewLabels[OntimeView.Teleprompter] },
   { value: OntimeView.ProjectInfo, label: viewLabels[OntimeView.ProjectInfo] },
 ];
 

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -19,8 +19,8 @@ import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
-import { useDirectLinkToBackgroundEdit } from '../../../../common/hooks/useRundownSelection';
 import { cx } from '../../../../common/utils/styleUtils';
+import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/SourcesPanel.tsx

@@ -24,7 +24,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
-import { useLoadedRundown } from '../../../../../common/hooks-query/useLoadedRundown';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
   const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
   const [completedRundownTitle, setCompletedRundownTitle] = useState('');
 
-  const { data: currentRundown } = useLoadedRundown();
+  const { data: currentRundown } = useRundown();
   const { applyImport } = useSpreadsheetImport();
   const navigate = useNavigate();
 

apps/client/src/features/log/Log.tsx

@@ -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>

apps/client/src/features/operator/useOperatorData.ts

@@ -1,7 +1,7 @@
 import { CustomFields, Rundown, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../../views/utils/viewLoader.utils';
@@ -14,7 +14,7 @@ export interface OperatorData {
 }
 
 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useLoadedRundownWithMetadata();
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: settings, status: settingsStatus } = useSettings();
 

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-icons/tb';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useLoadedEntry } from '../../../common/hooks-query/useLoadedRundown';
+import { useEntry } from '../../../common/hooks-query/useRundown';
 import { useAutoTickingClock } from '../../../common/hooks/useAutoTickingClock';
 import {
   useCurrentGroupId,
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
   const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
   const currentGroupId = useCurrentGroupId();
-  const group = useLoadedEntry(currentGroupId) as OntimeGroup | null;
+  const group = useEntry(currentGroupId) as OntimeGroup | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 
@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
   const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
-  const entry = useLoadedEntry(id) as OntimeEvent | null;
+  const entry = useEntry(id) as OntimeEvent | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 

apps/client/src/features/overview/composite/TitleOverview.tsx

@@ -1,12 +1,12 @@
-import { useLoadedRundownAuxData } from '../../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../../common/hooks-query/useProjectData';
+import { useRundownAuxData } from '../../../common/hooks-query/useRundown';
 
 import style from './TitleOverview.module.scss';
 
 export default function TitleOverview() {
   'use memo';
   const { data: projectData } = useProjectData();
-  const { data: rundownData } = useLoadedRundownAuxData();
+  const { data: rundownData } = useRundownAuxData();
 
   const projectTitle = projectData.title.trim();
   const rundownTitle = rundownData.title.trim();

apps/client/src/features/rundown/Rundown.tsx

@@ -67,11 +67,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
   const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
 
   const entryActions = useEntryActionsContext();
-  const setEntryCopy = useEntryCopy((state) => state.setEntryCopyId);
-  const setEntryCopyId = useCallback(
-    (entryId: EntryId | null, mode?: 'copy' | 'cut') => setEntryCopy(entryId, id, mode),
-    [setEntryCopy, id],
-  );
+  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
 
   // cursor
   const { editorMode } = useEditorFollowMode();

apps/client/src/features/rundown/RundownExport.tsx

@@ -5,6 +5,9 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -36,25 +39,28 @@ function RundownExport() {
     defaultValue: RundownViewMode.List,
   });
   const isSmallDevice = useIsSmallDevice();
+  const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <ProtectRoute permission='editor'>
-        <div
-          className={cx([style.rundownExport, style.extracted])}
-          data-target='small-device'
-          data-testid='panel-rundown'
-        >
-          <FinderPlacement />
-          <ViewNavigationMenu suppressSettings />
-          <div className={style.rundown}>
-            <ErrorBoundary>
-              <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-              <RundownContextMenu />
-            </ErrorBoundary>
+      <EntryActionsProvider actions={entryActions}>
+        <ProtectRoute permission='editor'>
+          <div
+            className={cx([style.rundownExport, style.extracted])}
+            data-target='small-device'
+            data-testid='panel-rundown'
+          >
+            <FinderPlacement />
+            <ViewNavigationMenu suppressSettings />
+            <div className={style.rundown}>
+              <ErrorBoundary>
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
+            </div>
           </div>
-        </div>
-      </ProtectRoute>
+        </ProtectRoute>
+      </EntryActionsProvider>
     );
   }
 
@@ -64,28 +70,30 @@ function RundownExport() {
     viewMode === RundownViewMode.Table;
 
   return (
-    <ProtectRoute permission='editor'>
-      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-        <FinderPlacement />
-        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-        <div className={style.rundown}>
-          <Editor.Panel className={style.list}>
-            <ErrorBoundary>
-              {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-              <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-              <RundownContextMenu />
-            </ErrorBoundary>
-          </Editor.Panel>
-          {!hideSideBar && (
-            <div className={style.side}>
+    <EntryActionsProvider actions={entryActions}>
+      <ProtectRoute permission='editor'>
+        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+          <FinderPlacement />
+          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+          <div className={style.rundown}>
+            <Editor.Panel className={style.list}>
               <ErrorBoundary>
-                <RundownEntryEditor />
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
               </ErrorBoundary>
-            </div>
-          )}
+            </Editor.Panel>
+            {!hideSideBar && (
+              <div className={style.side}>
+                <ErrorBoundary>
+                  <RundownEntryEditor />
+                </ErrorBoundary>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </ProtectRoute>
+      </ProtectRoute>
+    </EntryActionsProvider>
   );
 }
 
@@ -97,6 +105,8 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  const source = useLoadedRundownSource();
+
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
@@ -105,7 +115,7 @@ function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: Rund
         <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
       )}
       {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
       <RenumberCuesDialog />
     </div>
   );

apps/client/src/features/rundown/RundownList.tsx

@@ -1,22 +1,15 @@
-import { Playback } from 'ontime-types';
 import { memo } from 'react';
 
 import EmptyFill from '../../common/components/state/EmptyFill';
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 
-/** a rundown which is not loaded has no playback to follow */
-const idleFeatureData = { playback: Playback.Stop, selectedEventId: null, nextEventId: null };
-
 export default memo(RundownList);
 function RundownList() {
-  const { isLoaded } = useRundownScope();
   const { data, status, rundownMetadata } = useRundownWithMetadata();
-  const runtimeFeatureData = useRundownEditor();
-  const featureData = isLoaded ? runtimeFeatureData : idleFeatureData;
+  const featureData = useRundownEditor();
   const { getLocalizedString } = useTranslation();
 
   // avoid showing the editable empty state before we know whether the rundown is actually empty

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss

@@ -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;
-  }
 }

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx

@@ -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>;
-}

apps/client/src/features/rundown/hooks/useRundownCommands.ts

@@ -2,7 +2,6 @@ import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'on
 import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
 import { useCallback } from 'react';
 
-import { useRundownScope } from '../../../common/context/RundownScopeContext';
 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { SelectionMode } from '../useEventSelection';
@@ -27,7 +26,6 @@ export function useRundownCommands({
   selectEntry: applySelection,
   handleCollapseGroup,
 }: UseRundownCommandsOptions) {
-  const { rundownId } = useRundownScope();
   const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
 
   const deleteAtCursor = useCallback(
@@ -45,17 +43,12 @@ export function useRundownCommands({
   const insertCopyAtId = useCallback(
     (atId: EntryId | null, above = false) => {
       // lazily get the value from the store
-      const { entryCopyId, entryCopyRundownId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
       if (entryCopyId === null || !entries[entryCopyId]) {
         // we cant clone without selection
         return;
       }
 
-      // pasting into a different rundown needs the entry payload, the server clones within a rundown
-      if (entryCopyRundownId !== null && entryCopyRundownId !== rundownId) {
-        return;
-      }
-
       let normalisedAtId = atId;
 
       const elementToCopy = entries[entryCopyId];
@@ -72,7 +65,7 @@ export function useRundownCommands({
             return;
           }
           reorderEntry(entryCopyId, firstId, 'before')
-            .then(() => setEntryCopyId(null, null))
+            .then(() => setEntryCopyId(null))
             .catch(() => {});
           return;
         }
@@ -81,7 +74,7 @@ export function useRundownCommands({
         }
         const placement = above ? 'before' : 'after';
         reorderEntry(entryCopyId, normalisedAtId, placement)
-          .then(() => setEntryCopyId(null, null))
+          .then(() => setEntryCopyId(null))
           .catch(() => {});
         return;
       }
@@ -92,7 +85,7 @@ export function useRundownCommands({
         before: above ? (normalisedAtId ?? undefined) : undefined,
       });
     },
-    [entries, flatOrder, clone, reorderEntry, rundownId],
+    [entries, flatOrder, clone, reorderEntry],
   );
 
   /**

apps/client/src/features/rundown/placements/FinderPlacement.tsx

@@ -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} />;

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -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} />

apps/client/src/features/rundown/rundown-table/RundownTable.tsx

@@ -1,6 +1,9 @@
 import { memo, useEffect, useMemo } from 'react';
 
+import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -12,6 +15,8 @@ function RundownTable() {
   const { data: customFields } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
+  const source = useLoadedRundownSource();
+  const actions = useEntryActions();
 
   // Editor always has full permissions
   useEffect(() => {
@@ -27,8 +32,10 @@ function RundownTable() {
   const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
 
   return (
-    <CuesheetDnd columns={columns} tableRoot='editor'>
-      <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
-    </CuesheetDnd>
+    <EntryActionsProvider actions={actions}>
+      <CuesheetDnd columns={columns} tableRoot='editor'>
+        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+      </CuesheetDnd>
+    </EntryActionsProvider>
   );
 }

apps/client/src/features/rundown/useEventSelection.ts

@@ -1,15 +1,155 @@
-import { useStore } from 'zustand';
+import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } from 'ontime-types';
+import { MouseEvent } from 'react';
+import { create } from 'zustand';
 
-import { useRundownScope } from '../../common/context/RundownScopeContext';
-import type { EventSelectionStore } from '../../common/stores/eventSelectionStore';
+import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
+import { ontimeQueryClient } from '../../common/queryClient';
+import { isMacOS } from '../../common/utils/deviceUtils';
 
-export { getSelectionMode } from '../../common/stores/eventSelectionStore';
-export type { SelectionMode } from '../../common/stores/eventSelectionStore';
+export type SelectionMode = 'shift' | 'click' | 'ctrl';
+
+interface EventSelectionStore {
+  selectedEvents: Set<EntryId>;
+  anchoredIndex: MaybeNumber;
+  cursor: EntryId | null;
+  entryMode: 'event' | 'single' | null;
+  scrollHandler: ((id: EntryId) => void) | null;
+  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
+  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
+  clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: EntryId) => void;
+  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
+  scrollToEntry: (id: EntryId) => void;
+}
 
 /**
- * Selection and cursor for the rundown of the enclosing scope
+ * Keeps track of the selected entries and selection mode
+ * Provides methods to update the selection based on user interactions
  */
-export function useEventSelection<T>(selector: (state: EventSelectionStore) => T): T {
-  const { selectionStore } = useRundownScope();
-  return useStore(selectionStore, selector);
+export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
+  selectedEvents: new Set(),
+  anchoredIndex: null,
+  cursor: null,
+  entryMode: null,
+  scrollHandler: null,
+  setSingleEntrySelection: ({ id }) => {
+    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
+  },
+  setSelectedEvents: ({ id, index, selectMode }) => {
+    const { selectedEvents, anchoredIndex, entryMode } = get();
+
+    // if we are in single mode, we replace the selection and change the mode
+    if (entryMode === 'single') {
+      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+    }
+
+    // on click, we replace selection with event
+    if (selectMode === 'click') {
+      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+    }
+
+    // on ctrl + click, we toggle the selection of that event
+    if (selectMode === 'ctrl') {
+      const rundownData = getLoadedRundownData();
+      if (!rundownData) return;
+
+      // if it doesnt exist, simply add to the list and set an anchor
+      if (!selectedEvents.has(id)) {
+        return set({
+          selectedEvents: selectedEvents.add(id),
+          anchoredIndex: index,
+          cursor: id,
+          entryMode: 'event',
+        });
+      }
+
+      // if event is already selected, we remove it from selection
+      // and set the anchor to the event after
+      selectedEvents.delete(id);
+
+      const nextIndex = rundownData.order.findIndex(
+        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
+      );
+
+      // if we didnt find anything after, set the anchor to the last event
+      return set({
+        selectedEvents,
+        anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
+        entryMode: 'event',
+      });
+    }
+
+    // on shift + click, we select a range of events up to the clicked event
+    if (selectMode === 'shift') {
+      const rundownData = getLoadedRundownData();
+      if (!rundownData) return;
+
+      // get list of rundown with only ontime events
+      const eventIds: EntryId[] = [];
+      rundownData.flatOrder.forEach((eventId) => {
+        const event = rundownData.entries[eventId];
+        if (isOntimeEvent(event)) {
+          eventIds.push(event.id);
+        }
+      });
+
+      const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
+      const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
+
+      // create new set with range of ids from start to end
+      const selectedEventIds = eventIds.slice(start, end);
+
+      return set({
+        selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
+        anchoredIndex: index,
+        entryMode: 'event',
+      });
+    }
+  },
+  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
+  clearMultiSelect: () => {
+    const { selectedEvents } = get();
+    const [firstSelected] = selectedEvents;
+    set({
+      selectedEvents: new Set(firstSelected ? [firstSelected] : []),
+      anchoredIndex: null,
+      entryMode: null,
+    });
+  },
+  unselect: (id: string) => {
+    const { entryMode, selectedEvents } = get();
+    selectedEvents.delete(id);
+    set({
+      selectedEvents,
+      entryMode: selectedEvents.size === 0 ? null : entryMode,
+    });
+  },
+  // Sets the scroll handler for programmatic scrolling to entries
+  setScrollHandler: (handler) => set({ scrollHandler: handler }),
+  // Scrolls to the specified entry using the registered scroll handler
+  scrollToEntry: (id: EntryId) => {
+    const handler = get().scrollHandler;
+    if (handler) {
+      handler(id);
+    }
+  },
+}));
+
+function getLoadedRundownData() {
+  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+  if (!rundownId) return undefined;
+  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
+}
+
+export function getSelectionMode(event: MouseEvent): SelectionMode {
+  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
+    return 'ctrl';
+  }
+
+  if (event.shiftKey) {
+    return 'shift';
+  }
+
+  return 'click';
 }

apps/client/src/features/rundown/useSelectAndRevealEntry.ts

@@ -1,7 +1,6 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { useCallback } from 'react';
 
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useCollapsedGroups } from './useCollapsedGroups';
 import { useEventSelection } from './useEventSelection';
 
@@ -11,8 +10,7 @@ type SelectAndRevealOptions = {
   parent?: MaybeString;
 };
 
-export function useSelectAndRevealEntry() {
-  const { rundownId } = useRundownScope();
+export function useSelectAndRevealEntry(rundownId: string) {
   const { expandGroup } = useCollapsedGroups(rundownId);
   const selectEntry = useEventSelection((state) => state.setSelectedEvents);
   const scrollToEntry = useEventSelection((state) => state.scrollToEntry);

apps/client/src/features/sharing/GenerateLinkFormExport.tsx

@@ -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}`,

apps/client/src/viewerConfig.ts

@@ -10,6 +10,7 @@ export const viewLabels: Record<OntimeView, string> = {
   [OntimeView.Timeline]: 'Timeline',
   [OntimeView.StudioClock]: 'Studio Clock',
   [OntimeView.Countdown]: 'Countdown',
+  [OntimeView.Teleprompter]: 'Teleprompter',
   [OntimeView.ProjectInfo]: 'Project Info',
 };
 
@@ -20,6 +21,7 @@ const navigatorViews = [
   OntimeView.Timeline,
   OntimeView.StudioClock,
   OntimeView.Countdown,
+  OntimeView.Teleprompter,
   OntimeView.ProjectInfo,
 ];
 

apps/client/src/views/backstage/useBackstageData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundown();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react';
 
-import { useLoadedPartialRundown } from '../../../common/hooks-query/useLoadedRundown';
+import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useScheduleOptions } from './schedule.options';
 
@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
     [filter],
   );
 
-  const { data: events } = useLoadedPartialRundown(filterCallback);
+  const { data: events } = usePartialRundown(filterCallback);
 
   const [firstIndex, setFirstIndex] = useState(-1);
   const [numPages, setNumPages] = useState(0);

apps/client/src/views/countdown/useCountdownData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/cuesheet/CuesheetPage.tsx

@@ -3,31 +3,35 @@ import { IoApps } from 'react-icons/io5';
 
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
-import { useRundownSelection } from '../../common/hooks/useRundownSelection';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
+import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
+import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 export default function CuesheetPage() {
   'use memo';
   const [isMenuOpen, menuHandler] = useDisclosure();
-  const { scopedRundownId, selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } =
-    useRundownSelection('cuesheet');
+  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
+  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
+
+  const actions = useScopedEntryActions(source.rundownId);
 
   useWindowTitle('Cuesheet');
 
   const isLocked = getIsNavigationLocked();
 
   return (
-    <EditableRundownScopeProvider rundownId={scopedRundownId}>
+    <EntryActionsProvider actions={actions}>
       <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal />
+      <EntryEditModal rundown={source.rundown} />
       <div className={styles.tableWrapper} data-testid='cuesheet'>
         <CuesheetOverview>
           {!isLocked && (
@@ -38,12 +42,13 @@ export default function CuesheetPage() {
         </CuesheetOverview>
         <CuesheetProgress />
         <CuesheetTableWrapper
+          source={source}
           selectedRundownId={selectedRundownId}
           loadedRundownId={loadedRundownId}
           setSelectedRundownId={setSelectedRundownId}
           projectRundowns={projectRundowns}
         />
       </div>
-    </EditableRundownScopeProvider>
+    </EntryActionsProvider>
   );
 }

apps/client/src/views/cuesheet/CuesheetTableWrapper.tsx

@@ -3,18 +3,19 @@ import { memo, use, useMemo } from 'react';
 
 import Select from '../../common/components/select/Select';
 import { PresetContext } from '../../common/context/PresetContext';
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { FOLLOW_LOADED_RUNDOWN_ID } from '../../common/hooks/useRundownSelection';
+import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
 import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
+import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 interface CuesheetTableWrapperProps {
+  source: RundownSource;
   selectedRundownId: MaybeString;
   loadedRundownId: string;
   setSelectedRundownId: (rundownId: string) => void;
@@ -23,14 +24,15 @@ interface CuesheetTableWrapperProps {
 
 export default memo(CuesheetTableWrapper);
 function CuesheetTableWrapper({
+  source,
   selectedRundownId,
   setSelectedRundownId,
   loadedRundownId,
   projectRundowns,
 }: CuesheetTableWrapperProps) {
   const preset = use(PresetContext);
-  const { isLoaded } = useRundownScope();
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoaded });
+  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
   const { data: customFields } = useCustomFields();
 
   const columns = useMemo(
@@ -42,9 +44,11 @@ function CuesheetTableWrapper({
     <CuesheetDnd columns={columns}>
       <CuesheetTable
         columns={columns}
+        source={source}
         cuesheetMode={cuesheetMode}
         tableRoot='cuesheet'
         setCuesheetMode={setCuesheetMode}
+        isCurrentRundown={isCurrentRundown}
         insertElement={
           <>
             <RundownSelect

apps/client/src/views/cuesheet/__tests__/useCuesheetRundownSelection.test.ts

@@ -1,13 +1,13 @@
 import {
   FOLLOW_LOADED_RUNDOWN_ID,
-  getRundownSelectionStorageKey,
+  getCuesheetRundownStorageKey,
   resolveSelectedRundownId,
-} from '../useRundownSelection';
+} from '../useCuesheetRundownSelection';
 
-describe('useRundownSelection helpers', () => {
-  it('builds a namespace and project scoped storage key', () => {
-    expect(getRundownSelectionStorageKey('cuesheet', 'http://localhost:4001', 'My Project')).toBe(
-      'rundown-selection:cuesheet:http://localhost:4001:My Project',
+describe('useCuesheetRundownSelection helpers', () => {
+  it('builds a project-scoped storage key', () => {
+    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
+      'cuesheet-selected-rundown:http://localhost:4001:My Project',
     );
   });
 

apps/client/src/views/cuesheet/cuesheet-edit-modal/EntryEditModal.tsx

@@ -1,13 +1,16 @@
+import { Rundown } from 'ontime-types';
 import { memo } from 'react';
 
 import Modal from '../../../common/components/modal/Modal';
-import useRundown from '../../../common/hooks-query/useRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';
 
+interface EntryEditModalProps {
+  rundown: Rundown;
+}
+
 export default memo(EntryEditModal);
-function EntryEditModal() {
-  const { data: rundown } = useRundown();
+function EntryEditModal({ rundown }: EntryEditModalProps) {
   const entryId = useEditModal((state) => state.selectedEntryId);
   const closeModal = useEditModal((state) => state.clearSelection);
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -14,8 +14,7 @@ import {
 import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useRundownScope } from '../../../common/context/RundownScopeContext';
-import { useFlatRundownWithMetadata, useScopedSelectedEventId } from '../../../common/hooks-query/useRundown';
+import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -42,17 +41,20 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
   columns: CuesheetColumnDef[];
   cuesheetMode: AppMode;
+  source: RundownSource;
   insertElement?: ReactNode;
 };
 
 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'editor';
   setCuesheetMode?: undefined;
+  isCurrentRundown?: undefined;
 };
 
 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'cuesheet';
   setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
 };
 
 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
@@ -60,13 +62,13 @@ type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
 export default function CuesheetTable({
   columns,
   cuesheetMode,
+  source,
   tableRoot,
   setCuesheetMode,
+  isCurrentRundown,
   insertElement,
 }: CuesheetTableProps) {
-  const { isLoaded: isCurrentRundown } = useRundownScope();
-  const { data: flatRundown, status } = useFlatRundownWithMetadata();
-  const selectedEventId = useScopedSelectedEventId();
+  const { flatRundown, status, selectedEventId } = source;
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const { getLocalizedString } = useTranslation();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;

apps/client/src/views/cuesheet/useCuesheetRundownSelection.ts

@@ -2,21 +2,14 @@ import { useSessionStorage } from '@mantine/hooks';
 import { startTransition, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
+import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
+import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
 import { serverURL } from '../../externals';
-import { useOrderedProjectList } from '../hooks-query/useProjectList';
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
 
 export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
 
-/** each surface keeps its own selection, so panels can point at different rundowns */
-export type RundownSelectionNamespace = 'cuesheet';
-
-export function getRundownSelectionStorageKey(
-  namespace: RundownSelectionNamespace,
-  server: string,
-  projectFilename: string,
-) {
-  return `rundown-selection:${namespace}:${server}:${projectFilename}`;
+export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
+  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
 }
 
 export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
@@ -24,22 +17,14 @@ export function resolveSelectedRundownId(storedSelectedRundownId: string | null,
   return FOLLOW_LOADED_RUNDOWN_ID;
 }
 
-/**
- * Persisted choice of which rundown a surface operates on.
- * The resolved id is meant to be handed to a rundown scope provider,
- * where null means follow whichever rundown is loaded.
- */
-export function useRundownSelection(namespace: RundownSelectionNamespace) {
+export function useCuesheetRundownSelection() {
   'use memo';
 
   const { data: projectRundowns } = useProjectRundowns();
   const {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
-  const storageKey = useMemo(
-    () => getRundownSelectionStorageKey(namespace, serverURL, lastLoadedProject),
-    [namespace, lastLoadedProject],
-  );
+  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
   const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
     key: storageKey,
     defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
@@ -53,8 +38,6 @@ export function useRundownSelection(namespace: RundownSelectionNamespace) {
   return {
     loadedRundownId,
     selectedRundownId,
-    /** id for the rundown scope, null follows the loaded rundown */
-    scopedRundownId: selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? null : selectedRundownId,
     projectRundowns: projectRundowns.rundowns,
     setSelectedRundownId: (rundownId: string) => {
       startTransition(() => {
@@ -69,7 +52,7 @@ export function useDirectLinkToBackgroundEdit() {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
   const navigate = useNavigate();
-  const storageKey = getRundownSelectionStorageKey('cuesheet', serverURL, lastLoadedProject);
+  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
   const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
 
   return useCallback(

apps/client/src/views/editor/Editor.tsx

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 
-import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -22,9 +21,7 @@ export default function Editor() {
           <TimerControl />
           <MessageControl />
         </div>
-        <EditableRundownScopeProvider rundownId={null}>
-          <Rundown />
-        </EditableRundownScopeProvider>
+        <Rundown />
       </div>
     );
   }
@@ -32,17 +29,14 @@ export default function Editor() {
   if (layoutMode === EditorLayoutMode.TRACKING) {
     return (
       <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-        {/* the titles and the rundown share a scope, so they follow one cursor */}
-        <EditableRundownScopeProvider rundownId={null}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <TitleList mode={AppMode.Run} />
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
+        <div className={styles.rundownLayout}>
+          <div className={styles.titlesPanel}>
+            <TitleList mode={AppMode.Run} />
           </div>
-        </EditableRundownScopeProvider>
+          <div className={styles.rundownPanel}>
+            <Rundown />
+          </div>
+        </div>
         <TrackingPlaybackBar />
       </div>
     );
@@ -50,16 +44,14 @@ export default function Editor() {
 
   return (
     <div id='panels' className={styles.panelContainer}>
-      <EditableRundownScopeProvider rundownId={null}>
-        <div className={styles.rundownLayout}>
-          <div className={styles.titlesPanel}>
-            <TitleList mode={AppMode.Edit} />
-          </div>
-          <div className={styles.rundownPanel}>
-            <Rundown />
-          </div>
+      <div className={styles.rundownLayout}>
+        <div className={styles.titlesPanel}>
+          <TitleList mode={AppMode.Edit} />
         </div>
-      </EditableRundownScopeProvider>
+        <div className={styles.rundownPanel}>
+          <Rundown />
+        </div>
+      </div>
     </div>
   );
 }

apps/client/src/views/editor/finder/Finder.module.scss

@@ -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;
   }
 }

apps/client/src/views/editor/finder/Finder.tsx

@@ -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)}
-                >
-                  <div className={style.data}>
-                    <div className={style.index} style={getAccessibleColour(entry.colour)}>
-                      {entry.eventIndex ?? '-'}
-                    </div>
-                    <div className={style.cue}>{entry.cue}</div>
-                    <div className={style.title}>{entry.title}</div>
-                    {showMatch && (
-                      <div className={style.match} data-testid='finder-result-match'>
-                        <span className={style.matchLabel}>{entry.match?.label}</span>
-                        {entry.match?.excerpt}
+                return (
+                  <li
+                    key={entry.id}
+                    className={style.entry}
+                    data-selected={isSelected}
+                    data-index={index}
+                    onClick={submit}
+                  >
+                    <div className={style.data}>
+                      <div className={style.index} style={{ '--color': entry.colour }}>
+                        {displayIndex}
                       </div>
-                    )}
-                  </div>
-                  {isSelected && <span className={style.go}>Go ⏎</span>}
-                </li>
-              );
-            })}
-            {hiddenResults > 0 && (
-              <li className={style.more} data-testid='finder-more'>
-                {hiddenResults} more {hiddenResults === 1 ? 'result' : 'results'} — keep typing to narrow the search
-              </li>
-            )}
+                      <div className={style.cue}>{displayCue}</div>
+                      <div className={style.title}>{entry.title}</div>
+                    </div>
+                    {isSelected && <span>Go ⏎</span>}
+                  </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>
-          )}
+          <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>
       }
     />

apps/client/src/views/editor/finder/useFinder.test.ts

@@ -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 });
-  });
-});

apps/client/src/views/editor/finder/useFinder.tsx

@@ -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;
-}
+export default function useFinder() {
+  const { data, rundownId } = useFlatRundown();
+  const [results, setResults] = useState<FilterableEntry[]>([]);
+  const [error, setError] = useState<MaybeString>(null);
+  const lastSearchString = useRef('');
 
-/** 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 ? '…' : ''}`;
-}
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
 
-/**
- * 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) };
-  }
+  /** Filters the rundown to a given evaluation */
+  const find = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!data || data.length === 0) {
+        setError('No data');
+        return;
+      }
+      setError(null);
 
-  // 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;
-  }
+      if (event.target.value === '') {
+        setResults([]);
+        return;
+      }
 
-  // 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;
-  }
+      const searchValue = event.target.value.toLowerCase();
+      lastSearchString.current = searchValue;
 
-  return null;
-}
+      if (searchValue.startsWith('index ')) {
+        const searchString = searchValue.slice('index '.length).trim();
+        const { results, error } = searchByIndex(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }
 
-/**
- * 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 };
-}
+      if (searchValue.startsWith('cue ')) {
+        const searchString = searchValue.slice('cue '.length).trim();
+        const { results, error } = searchByCue(searchString);
+        setResults(results);
+        setError(error);
+        return;
+      }
 
-/** 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' };
-  }
+      const searchString = searchValue.startsWith('title ') ? searchValue.slice('title '.length).trim() : searchValue;
+      const { results, error } = searchByTitle(searchString);
+      setResults(results);
+      setError(error);
 
-  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 };
-    }
-  }
+      /** 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' };
+        }
 
-  return noResults;
-}
+        if (searchIndex > data.length) {
+          return { results: [], error: null };
+        }
 
-/**
- * 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;
+        // 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++;
+          }
+        }
 
-  for (let i = 0; i < data.length; i++) {
-    const entry = data[i];
-    if (isOntimeDelay(entry)) {
-      continue;
-    }
-    const isEvent = isOntimeEvent(entry);
-    if (isEvent) {
-      eventIndex++;
-    }
+        return { results, error: null };
+      }
 
-    const match = findMatch(entry, customFields, filterKey, searchString);
-    if (match === null) {
-      continue;
-    }
+      /** 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[] = [];
 
-    total++;
-    if (results.length < maxResults) {
-      results.push(toResult(entry, i, isEvent ? eventIndex : null, match));
-    }
-  }
+        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 };
+      }
 
-  return { results, error: null, total };
-}
+      /** 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[] = [];
 
-/**
- * @param searchValue - the text the user is looking for
- * @param activeFilter - a field selected from the filter badges, if any
- */
-export default function useFinder(searchValue: string, activeFilter: MaybeString) {
-  const { data } = useFlatRundown();
-  const { data: customFields } = useCustomFields();
+        for (let i = 0; i < data.length; i++) {
+          if (remaining <= 0) {
+            break;
+          }
 
-  const selectAndRevealEntry = useSelectAndRevealEntry();
-
-  /** 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]);
-
-  const { results, error, total, appliedFilter } = useMemo(() => {
-    if (data.length === 0) {
-      return { ...noResults, error: 'No data', appliedFilter: activeFilter };
-    }
-
-    const normalised = searchValue.trim().toLowerCase();
-    if (normalised === '') {
-      return { ...noResults, appliedFilter: activeFilter };
-    }
-
-    /**
-     * 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 (filterKey === indexFilter) {
-      return { ...searchByIndex(data, searchString), appliedFilter: filterKey };
-    }
-    if (searchString === '') {
-      // a filter is selected, but there is nothing to match on yet
-      return { ...noResults, appliedFilter: filterKey };
-    }
-    return { ...searchByText(data, customFields, filterKey, searchString), appliedFilter: filterKey };
-  }, [data, customFields, filters, searchValue, activeFilter]);
+          const 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 };
 }

apps/client/src/views/editor/title-list/TitleList.tsx

@@ -46,6 +46,7 @@ export default function TitleList({ mode }: TitleListProps) {
       eventData={eventData}
       selectedEventId={selectedEventId}
       resolvedFollowEventId={resolvedFollowEventId}
+      rundownId={rundown.id}
     />
   );
 }
@@ -55,14 +56,21 @@ interface TitleListContentProps {
   eventData: ExtendedEntry<OntimeEvent>[];
   selectedEventId: string | null;
   resolvedFollowEventId: string | null;
+  rundownId: string;
 }
 
-function TitleListContent({ mode, eventData, selectedEventId, resolvedFollowEventId }: TitleListContentProps) {
+function TitleListContent({
+  mode,
+  eventData,
+  selectedEventId,
+  resolvedFollowEventId,
+  rundownId,
+}: TitleListContentProps) {
   'use memo';
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
   const scrollParentRef = useRef<HTMLDivElement | null>(null);
-  const selectAndRevealEntry = useSelectAndRevealEntry();
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
 
   // Calculate current event info
   const currentEventInfo = useMemo(() => {

apps/client/src/views/teleprompter/Teleprompter.scss

@@ -0,0 +1,215 @@
+@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;
+  }
+
+  /* Holds the eye on the cued event without hiding what is around it, which is
+     what the reader needs when they are recovering from being ahead or behind. */
+  .teleprompter--has-playing &:not([data-loaded]) {
+    opacity: 0.45;
+  }
+}
+
+.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__parked {
+  font-size: clamp(11px, 1vw, 15px);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  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};
+}

apps/client/src/views/teleprompter/Teleprompter.tsx

@@ -0,0 +1,162 @@
+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,
+    onlyPlaying: options.onlyPlaying,
+    hideEmpty: options.hideEmpty,
+    showGroups: options.showGroups,
+  });
+
+  const { scrollerRef, contentRef, registerBlock, controller, isRunning, speed, canReengageFollow, parkedAt } =
+    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',
+        // nothing to hold back the eye from when no event is cued
+        blocks.some((block) => block.isLoaded) && 'teleprompter--has-playing',
+      ])}
+      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}>
+            <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={canReengageFollow}
+            parkedAt={parkedAt}
+            controller={controller}
+            onToggleHelp={handleToggleHelp}
+          />
+        </>
+      )}
+
+      <HelpOverlay isOpen={showHelp} onClose={handleToggleHelp} />
+    </div>
+  );
+}

apps/client/src/views/teleprompter/__tests__/teleprompter.keymap.test.ts

@@ -0,0 +1,107 @@
+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('shift makes the vertical arrows jump a whole event', () => {
+    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowDown', shiftKey: true }))).toEqual({
+      type: 'jumpEvent',
+      direction: 1,
+    });
+    expect(resolveTeleprompterAction(makeEvent({ code: 'ArrowUp', shiftKey: true }))).toEqual({
+      type: 'jumpEvent',
+      direction: -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();
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts

@@ -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 });
+      }
+    }
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.scroll.test.ts

@@ -0,0 +1,293 @@
+import {
+  advance,
+  anchorAtReadPoint,
+  type BlockGeometry,
+  clampSpeed,
+  easeCatchUp,
+  FOLLOW_BREAK_LINES,
+  frameDeltaSeconds,
+  hasBrokenFollow,
+  indexAtReadPoint,
+  linesPerMinuteToPxPerSecond,
+  MAX_FONT_SIZE,
+  MAX_FRAME_DELTA_MS,
+  MAX_SPEED,
+  MIN_FONT_SIZE,
+  MIN_SPEED,
+  readPointForAnchor,
+  segmentAfter,
+  segmentEndFor,
+  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('hasBrokenFollow()', () => {
+  const lineHeight = 40;
+
+  test('tolerates drift under the threshold, so momentum or a stray touch does not break it', () => {
+    const underThreshold = lineHeight * FOLLOW_BREAK_LINES - 1;
+    expect(hasBrokenFollow(underThreshold, lineHeight)).toBe(false);
+    expect(hasBrokenFollow(-underThreshold, lineHeight)).toBe(false);
+  });
+
+  test('counts a deliberate scroll past the threshold, in either direction', () => {
+    const overThreshold = lineHeight * FOLLOW_BREAK_LINES + 1;
+    expect(hasBrokenFollow(overThreshold, lineHeight)).toBe(true);
+    expect(hasBrokenFollow(-overThreshold, lineHeight)).toBe(true);
+  });
+
+  test('never breaks follow before the document has been measured', () => {
+    // an unmeasured line height would make any distance look like a break
+    expect(hasBrokenFollow(10_000, 0)).toBe(false);
+  });
+});
+
+describe('the read anchor', () => {
+  const script: BlockGeometry[] = [
+    { id: 'welcome', top: 0, height: 100 },
+    { id: 'keynote', top: 100, height: 300 },
+    { id: 'lunch', top: 400, height: 100 },
+  ];
+  const ids = script.map((block) => block.id);
+
+  describe('indexAtReadPoint()', () => {
+    test('finds the block the reading line is over', () => {
+      expect(indexAtReadPoint(150, script)).toBe(1);
+      expect(indexAtReadPoint(400, script)).toBe(2);
+    });
+
+    test('clamps past either end, so a jump from there still lands on a block', () => {
+      expect(indexAtReadPoint(-50, script)).toBe(0);
+      expect(indexAtReadPoint(10_000, script)).toBe(2);
+    });
+
+    test('reports no block for an empty script', () => {
+      expect(indexAtReadPoint(0, [])).toBe(-1);
+    });
+  });
+
+  describe('readPointForAnchor()', () => {
+    test('round trips an unchanged document', () => {
+      const anchor = anchorAtReadPoint(250, script);
+      expect(anchor).toEqual({ blockId: 'keynote', offset: 150 });
+      expect(readPointForAnchor(anchor!, script, ids)).toBe(250);
+    });
+
+    test('holds the same words under the reading line when an event above grows', () => {
+      // the whole point: the rundown is edited while it is being read, and an
+      // edit above the reader moves every pixel below it
+      const anchor = anchorAtReadPoint(250, script);
+      const grown: BlockGeometry[] = [
+        { id: 'welcome', top: 0, height: 180 },
+        { id: 'keynote', top: 180, height: 300 },
+        { id: 'lunch', top: 480, height: 100 },
+      ];
+      expect(readPointForAnchor(anchor!, grown, ids)).toBe(330);
+    });
+
+    test('follows the anchored event when the rundown is reordered', () => {
+      const anchor = anchorAtReadPoint(250, script);
+      const reordered: BlockGeometry[] = [
+        { id: 'lunch', top: 0, height: 100 },
+        { id: 'welcome', top: 100, height: 100 },
+        { id: 'keynote', top: 200, height: 300 },
+      ];
+      expect(readPointForAnchor(anchor!, reordered, ids)).toBe(350);
+    });
+
+    test('stays inside an event which was edited shorter than the read offset', () => {
+      const anchor = anchorAtReadPoint(250, script);
+      const trimmed: BlockGeometry[] = [
+        { id: 'welcome', top: 0, height: 100 },
+        { id: 'keynote', top: 100, height: 40 },
+        { id: 'lunch', top: 140, height: 100 },
+      ];
+      expect(readPointForAnchor(anchor!, trimmed, ids)).toBe(140);
+    });
+
+    test('falls back to the end of the nearest surviving event when the anchored one is deleted', () => {
+      // where the deleted text used to begin, rather than wherever its pixels
+      // now happen to point
+      const anchor = anchorAtReadPoint(250, script);
+      const deleted: BlockGeometry[] = [
+        { id: 'welcome', top: 0, height: 100 },
+        { id: 'lunch', top: 100, height: 100 },
+      ];
+      expect(readPointForAnchor(anchor!, deleted, ids)).toBe(100);
+    });
+
+    test('gives up rather than guessing when nothing before the anchor survives', () => {
+      const anchor = anchorAtReadPoint(250, script);
+      expect(readPointForAnchor(anchor!, [{ id: 'lunch', top: 0, height: 100 }], ids)).toBeNull();
+    });
+  });
+});
+
+describe('segmentAfter()', () => {
+  const readingOffset = 100;
+  const script: BlockGeometry[] = [
+    { id: 'welcome', top: 0, height: 300 },
+    { id: 'keynote', top: 300, height: 500 },
+  ];
+
+  const endAfter = (position: number) => {
+    const block = segmentAfter(position, readingOffset, script);
+    return block === null ? null : segmentEndFor(block, readingOffset);
+  };
+
+  test('stops playback at the end of the segment being read', () => {
+    // an event has a stop of its own, and running on would read a segment
+    // nobody cued: at a conference, the next speaker's script
+    expect(endAfter(0)).toBe(200);
+    expect(endAfter(150)).toBe(200);
+  });
+
+  test('moves on to the next segment from a position already parked on a boundary', () => {
+    // otherwise playback would stop again where it already is, and the reader
+    // could never start the next event by pressing play
+    expect(endAfter(200)).toBe(700);
+  });
+
+  test('treats a position within measurement noise of a boundary as parked on it', () => {
+    // re-measuring can leave the parked position a fraction off the boundary,
+    // and a sub-pixel run to it would look like play doing nothing at all
+    expect(endAfter(199.5)).toBe(700);
+    expect(endAfter(190)).toBe(200);
+  });
+
+  test('gives up the bound past the last segment, leaving the end of the script', () => {
+    expect(endAfter(700)).toBeNull();
+  });
+
+  test('has no boundary to stop at in a single segment script', () => {
+    // the plain use of pointing at some text and scrolling through it
+    const single: BlockGeometry[] = [{ id: 'only', top: 0, height: 5000 }];
+    expect(segmentAfter(0, readingOffset, single)?.id).toBe('only');
+    expect(segmentAfter(4900, readingOffset, single)).toBeNull();
+  });
+});
+
+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);
+  });
+});

apps/client/src/views/teleprompter/__tests__/teleprompter.utils.test.ts

@@ -0,0 +1,239 @@
+import { type CustomFields, type OntimeEntry, type Rundown, SupportedEntry } from 'ontime-types';
+
+import type { RundownMetadata, RundownMetadataObject } from '../../../common/utils/rundownMetadata';
+import { buildScript, composeFlip } from '../teleprompter.utils';
+
+function makeEvent(id: string, overrides: Partial<OntimeEntry> = {}): OntimeEntry {
+  return {
+    type: SupportedEntry.Event,
+    id,
+    cue: id.toUpperCase(),
+    title: `Title ${id}`,
+    note: `Note ${id}`,
+    skip: false,
+    custom: { script: `Script ${id}` },
+    parent: null,
+    ...overrides,
+  } as OntimeEntry;
+}
+
+function makeGroup(id: string, title: string, entries: string[]): OntimeEntry {
+  return { type: SupportedEntry.Group, id, title, entries } as OntimeEntry;
+}
+
+function makeMetadata(overrides: Partial<RundownMetadata> = {}): RundownMetadata {
+  return { isPast: false, isLoaded: false, groupId: null, ...overrides } as RundownMetadata;
+}
+
+function makeRundown(entries: OntimeEntry[], flatOrder?: string[]): Rundown {
+  return {
+    id: 'default',
+    title: 'test',
+    order: flatOrder ?? entries.map((entry) => entry.id),
+    flatOrder: flatOrder ?? entries.map((entry) => entry.id),
+    entries: Object.fromEntries(entries.map((entry) => [entry.id, entry])),
+    revision: 1,
+  };
+}
+
+const customFields: CustomFields = {
+  script: { type: 'text', colour: '', label: 'Script' },
+  poster: { type: 'image', colour: '', label: 'Poster' },
+};
+
+const defaultOptions = {
+  scriptSource: 'custom-script',
+  heading: 'title' as const,
+  onlyPlaying: false,
+  hideEmpty: true,
+  showGroups: true,
+};
+
+function metadataFor(ids: string[], overrides: Record<string, Partial<RundownMetadata>> = {}): RundownMetadataObject {
+  return Object.fromEntries(ids.map((id) => [id, makeMetadata(overrides[id])]));
+}
+
+describe('buildScript()', () => {
+  test('resolves the script from the selected custom field, in rundown order', () => {
+    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
+    const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
+
+    expect(blocks).toHaveLength(2);
+    expect(blocks.map((block) => block.id)).toEqual(['a', 'b']);
+    expect(blocks[0].text).toBe('Script a');
+  });
+
+  test('returns nothing when no script source is selected', () => {
+    const rundown = makeRundown([makeEvent('a')]);
+    expect(buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'none' })).toEqual(
+      [],
+    );
+  });
+
+  test('refuses an image custom field, which the select filters but the URL does not', () => {
+    const rundown = makeRundown([makeEvent('a', { custom: { poster: 'https://example.com/a.png' } })]);
+    const blocks = buildScript(rundown, metadataFor(['a']), customFields, {
+      ...defaultOptions,
+      scriptSource: 'custom-poster',
+    });
+
+    expect(blocks).toEqual([]);
+  });
+
+  test('reads the note and the title as script sources', () => {
+    const rundown = makeRundown([makeEvent('a')]);
+    expect(
+      buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'note' })[0].text,
+    ).toBe('Note a');
+    expect(
+      buildScript(rundown, metadataFor(['a']), customFields, { ...defaultOptions, scriptSource: 'title' })[0].text,
+    ).toBe('Title a');
+  });
+
+  test('skips entries which are not events', () => {
+    const rundown = makeRundown([
+      makeEvent('a'),
+      { type: SupportedEntry.Delay, id: 'd', duration: 10 } as OntimeEntry,
+      { type: SupportedEntry.Milestone, id: 'm', title: 'milestone' } as OntimeEntry,
+    ]);
+
+    const blocks = buildScript(rundown, metadataFor(['a', 'd', 'm']), customFields, defaultOptions);
+    expect(blocks.map((block) => block.id)).toEqual(['a']);
+  });
+
+  test('skips events flagged as skipped', () => {
+    const rundown = makeRundown([makeEvent('a', { skip: true }), makeEvent('b')]);
+    const blocks = buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions);
+    expect(blocks.map((block) => block.id)).toEqual(['b']);
+  });
+
+  test('onlyPlaying narrows the script to the event being played', () => {
+    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
+    const metadata = metadataFor(['a', 'b'], { b: { isLoaded: true } });
+
+    expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, onlyPlaying: true }).map((b) => b.id)) //
+      .toEqual(['b']);
+  });
+
+  test('onlyPlaying shows the whole script while nothing is playing', () => {
+    // narrowing to nothing would leave a blank screen, which is a worse answer
+    // than the script the reader asked to see
+    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
+
+    expect(
+      buildScript(rundown, metadataFor(['a', 'b']), customFields, { ...defaultOptions, onlyPlaying: true }).map(
+        (b) => b.id,
+      ),
+    ).toEqual(['a', 'b']);
+  });
+
+  test('hideEmpty drops events with no script text', () => {
+    const rundown = makeRundown([makeEvent('a', { custom: { script: '   ' } }), makeEvent('b')]);
+
+    expect(buildScript(rundown, metadataFor(['a', 'b']), customFields, defaultOptions).map((b) => b.id)).toEqual(['b']);
+    expect(
+      buildScript(rundown, metadataFor(['a', 'b']), customFields, { ...defaultOptions, hideEmpty: false }).map(
+        (b) => b.id,
+      ),
+    ).toEqual(['a', 'b']);
+  });
+
+  test('marks the block belonging to the loaded event', () => {
+    const rundown = makeRundown([makeEvent('a'), makeEvent('b')]);
+    const metadata = metadataFor(['a', 'b'], { b: { isLoaded: true } });
+
+    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
+    expect(blocks.map((block) => block.isLoaded)).toEqual([false, true]);
+  });
+
+  test('emits a group title once, on the first block of the group', () => {
+    const rundown = makeRundown(
+      [makeGroup('g', 'Morning session', ['a', 'b']), makeEvent('a'), makeEvent('b')],
+      ['g', 'a', 'b'],
+    );
+    const metadata = metadataFor(['g', 'a', 'b'], { a: { groupId: 'g' }, b: { groupId: 'g' } });
+
+    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
+    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null]);
+  });
+
+  test('emits each group title as the script moves between groups', () => {
+    const rundown = makeRundown(
+      [
+        makeGroup('g1', 'Morning session', ['a']),
+        makeEvent('a'),
+        makeGroup('g2', 'Afternoon session', ['b']),
+        makeEvent('b'),
+      ],
+      ['g1', 'a', 'g2', 'b'],
+    );
+    const metadata = metadataFor(['g1', 'a', 'g2', 'b'], { a: { groupId: 'g1' }, b: { groupId: 'g2' } });
+
+    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
+    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', 'Afternoon session']);
+  });
+
+  test('repeats a group title when the script returns to it after an ungrouped event', () => {
+    // the reader has lost the context by then, so naming the group again is right
+    const rundown = makeRundown(
+      [makeGroup('g', 'Morning session', ['a', 'c']), makeEvent('a'), makeEvent('b'), makeEvent('c')],
+      ['g', 'a', 'b', 'c'],
+    );
+    const metadata = metadataFor(['g', 'a', 'b', 'c'], { a: { groupId: 'g' }, c: { groupId: 'g' } });
+
+    const blocks = buildScript(rundown, metadata, customFields, defaultOptions);
+    expect(blocks.map((block) => block.groupTitle)).toEqual(['Morning session', null, 'Morning session']);
+  });
+
+  test('does not emit group titles when they are turned off', () => {
+    const rundown = makeRundown([makeGroup('g', 'Morning session', ['a']), makeEvent('a')], ['g', 'a']);
+    const metadata = metadataFor(['g', 'a'], { a: { groupId: 'g' } });
+
+    const blocks = buildScript(rundown, metadata, customFields, { ...defaultOptions, showGroups: false });
+    expect(blocks[0].groupTitle).toBeNull();
+  });
+
+  describe('headings', () => {
+    const rundown = makeRundown([makeEvent('a')]);
+    const metadata = metadataFor(['a']);
+
+    test('shows the title, the cue, both, or nothing', () => {
+      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'title' })[0].heading).toBe(
+        'Title a',
+      );
+      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'cue' })[0].heading).toBe('A');
+      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
+        'A · Title a',
+      );
+      expect(buildScript(rundown, metadata, customFields, { ...defaultOptions, heading: 'none' })[0].heading).toBe('');
+    });
+
+    test('leaves no dangling separator when an event has no cue', () => {
+      const noCue = makeRundown([makeEvent('a', { cue: '' })]);
+      expect(buildScript(noCue, metadata, customFields, { ...defaultOptions, heading: 'both' })[0].heading).toBe(
+        'Title a',
+      );
+    });
+  });
+});
+
+describe('composeFlip()', () => {
+  test('passes the per view flips through when Flip Screen is off', () => {
+    expect(composeFlip(false, false, false)).toEqual({ flipH: false, flipV: false });
+    expect(composeFlip(true, false, false)).toEqual({ flipH: true, flipV: false });
+    expect(composeFlip(false, true, false)).toEqual({ flipH: false, flipV: true });
+  });
+
+  test('Flip Screen alone flips both axes, matching rotate(180deg) in every other view', () => {
+    expect(composeFlip(false, false, true)).toEqual({ flipH: true, flipV: true });
+  });
+
+  test('a horizontal flip and Flip Screen leave only the vertical axis flipped', () => {
+    // scale(-1, 1) composed with scale(-1, -1) is scale(1, -1)
+    expect(composeFlip(true, false, true)).toEqual({ flipH: false, flipV: true });
+  });
+
+  test('both flips cancel Flip Screen out', () => {
+    expect(composeFlip(true, true, true)).toEqual({ flipH: false, flipV: false });
+  });
+});

apps/client/src/views/teleprompter/control-overlay/ControlOverlay.tsx

@@ -0,0 +1,139 @@
+import type { MouseEvent } from 'react';
+import { IoAdd, IoArrowUp, IoHelpCircleOutline, IoLocate, IoPause, IoPlay, IoRemove } from 'react-icons/io5';
+
+import IconButton from '../../../common/components/buttons/IconButton';
+import Tooltip from '../../../common/components/tooltip/Tooltip';
+import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+import { cx } from '../../../common/utils/styleUtils';
+import { SPEED_STEP } from '../teleprompter.scroll';
+import type { ParkedAt, TeleprompterController } from '../teleprompter.types';
+
+interface ControlOverlayProps {
+  isRunning: boolean;
+  speed: number;
+  canReengageFollow: boolean;
+  parkedAt: ParkedAt;
+  controller: TeleprompterController;
+  onToggleHelp: () => void;
+}
+
+export default function ControlOverlay({
+  isRunning,
+  speed,
+  canReengageFollow,
+  parkedAt,
+  controller,
+  onToggleHelp,
+}: ControlOverlayProps) {
+  const isActive = useFadeOutOnInactivity(true);
+
+  // Pointer activation yields focus so the next Space reaches the transport.
+  const press = (action: () => void) => (event: MouseEvent<HTMLButtonElement>) => {
+    if (event.detail > 0) {
+      event.currentTarget.blur();
+    }
+    action();
+  };
+
+  return (
+    <div className={cx(['teleprompter__controls', !isActive && 'teleprompter__controls--idle'])}>
+      <Tooltip
+        text={isRunning ? 'Pause (Space)' : 'Play (Space)'}
+        render={
+          <IconButton
+            variant='subtle-white'
+            size='large'
+            onClick={press(controller.togglePlay)}
+            data-testid='teleprompter-play'
+            aria-label={isRunning ? 'Pause' : 'Play'}
+          />
+        }
+      >
+        {isRunning ? <IoPause /> : <IoPlay />}
+      </Tooltip>
+
+      <Tooltip
+        text='Slow down (Left arrow)'
+        render={
+          <IconButton
+            variant='subtle-white'
+            size='large'
+            onClick={press(() => controller.changeSpeed(-SPEED_STEP))}
+            aria-label='Slow down'
+          />
+        }
+      >
+        <IoRemove />
+      </Tooltip>
+
+      <div className='teleprompter__speed' data-testid='teleprompter-speed'>
+        {speed}
+        <span className='teleprompter__speed-unit'>lpm</span>
+      </div>
+
+      {parkedAt === 'segment' && (
+        <span className='teleprompter__parked' data-testid='teleprompter-parked'>
+          End of event
+        </span>
+      )}
+
+      <Tooltip
+        text='Speed up (Right arrow)'
+        render={
+          <IconButton
+            variant='subtle-white'
+            size='large'
+            onClick={press(() => controller.changeSpeed(SPEED_STEP))}
+            aria-label='Speed up'
+          />
+        }
+      >
+        <IoAdd />
+      </Tooltip>
+
+      <Tooltip
+        text='Rewind to the top (Home)'
+        render={
+          <IconButton
+            variant={parkedAt === 'script' ? 'primary' : 'subtle-white'}
+            size='large'
+            onClick={press(() => controller.rewind())}
+            aria-label='Rewind to top'
+          />
+        }
+      >
+        <IoArrowUp />
+      </Tooltip>
+
+      <Tooltip
+        text={canReengageFollow ? 'Resume following the loaded event (L)' : 'Following the loaded event'}
+        render={
+          <IconButton
+            variant={canReengageFollow ? 'primary' : 'subtle-white'}
+            size='large'
+            disabled={!canReengageFollow}
+            onClick={press(controller.reengageFollow)}
+            data-testid='teleprompter-follow'
+            aria-label='Follow the loaded event'
+          />
+        }
+      >
+        <IoLocate />
+      </Tooltip>
+
+      <Tooltip
+        text='Keyboard shortcuts (?)'
+        render={
+          <IconButton
+            variant='subtle-white'
+            size='large'
+            onClick={press(onToggleHelp)}
+            aria-label='Keyboard shortcuts'
+          />
+        }
+      >
+        <IoHelpCircleOutline />
+      </Tooltip>
+    </div>
+  );
+}

apps/client/src/views/teleprompter/help-overlay/HelpOverlay.tsx

@@ -0,0 +1,107 @@
+import { Dialog } from '@base-ui/react/dialog';
+import { IoClose } from 'react-icons/io5';
+
+import IconButton from '../../../common/components/buttons/IconButton';
+import {
+  Combo,
+  Separator,
+  Shortcut,
+  ShortcutGroup,
+  ShortcutGroups,
+} from '../../../common/components/keyboard-shortcuts/KeyboardShortcuts';
+
+interface HelpOverlayProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function HelpOverlay({ isOpen, onClose }: HelpOverlayProps) {
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Backdrop className='teleprompter__help' />
+        <Dialog.Popup className='teleprompter__help-card'>
+          <div className='teleprompter__help-header'>
+            <Dialog.Title className='teleprompter__help-title'>Prompter shortcuts</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={onClose} aria-label='Close'>
+              <IoClose />
+            </IconButton>
+          </div>
+
+          <ShortcutGroups className='teleprompter__help-groups'>
+            <ShortcutGroup title='Transport'>
+              <Shortcut label='Start / stop scrolling'>
+                <Combo keys={['Space']} />
+              </Shortcut>
+              <Shortcut label='Slower / faster'>
+                <Combo keys={['←']} />
+                <Separator />
+                <Combo keys={['→']} />
+              </Shortcut>
+              <Shortcut label='Larger speed steps'>
+                <Combo keys={['Shift', '←']} />
+                <Separator />
+                <Combo keys={['Shift', '→']} />
+              </Shortcut>
+            </ShortcutGroup>
+
+            <ShortcutGroup title='Navigation'>
+              <Shortcut label='Nudge one line'>
+                <Combo keys={['↑']} />
+                <Separator />
+                <Combo keys={['↓']} />
+              </Shortcut>
+              <Shortcut label='Jump a screen'>
+                <Combo keys={['PgUp']} />
+                <Separator />
+                <Combo keys={['PgDn']} />
+              </Shortcut>
+              <Shortcut label='Jump to previous / next event'>
+                <Combo keys={['Shift', '↑']} />
+                <Separator />
+                <Combo keys={['Shift', '↓']} />
+              </Shortcut>
+              <Shortcut label='Jump to top / end'>
+                <Combo keys={['Home']} />
+                <Separator />
+                <Combo keys={['End']} />
+              </Shortcut>
+              <Shortcut label='Rewind and stop'>
+                <Combo keys={['Esc']} />
+              </Shortcut>
+              <Shortcut label='Follow the loaded event again'>
+                <Combo keys={['L']} />
+              </Shortcut>
+            </ShortcutGroup>
+
+            <ShortcutGroup title='Display'>
+              <Shortcut label='Font size'>
+                <Combo keys={['+']} />
+                <Separator />
+                <Combo keys={['-']} />
+              </Shortcut>
+              <Shortcut label='Reset font size'>
+                <Combo keys={['0']} />
+              </Shortcut>
+              <Shortcut label='Flip horizontally / vertically'>
+                <Combo keys={['F']} />
+                <Separator />
+                <Combo keys={['Shift', 'F']} />
+              </Shortcut>
+              <Shortcut label='Show this list'>
+                <Combo keys={['?']} />
+              </Shortcut>
+            </ShortcutGroup>
+          </ShortcutGroups>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

apps/client/src/views/teleprompter/script-block/ScriptBlock.tsx

@@ -0,0 +1,22 @@
+import type { ScriptBlock } from '../teleprompter.types';
+
+interface ScriptBlockProps {
+  block: ScriptBlock;
+  registerRef: (id: string, element: HTMLElement | null) => void;
+}
+
+export default function ScriptBlockView({ block, registerRef }: ScriptBlockProps) {
+  'use memo';
+
+  return (
+    <section
+      className='teleprompter__block'
+      ref={(element) => registerRef(block.id, element)}
+      data-loaded={block.isLoaded || undefined}
+    >
+      {block.groupTitle && <div className='teleprompter__group'>{block.groupTitle}</div>}
+      {block.heading && <h2 className='teleprompter__heading'>{block.heading}</h2>}
+      <p className='teleprompter__body'>{block.text}</p>
+    </section>
+  );
+}

apps/client/src/views/teleprompter/teleprompter.keymap.ts

@@ -0,0 +1,67 @@
+import { SPEED_STEP, SPEED_STEP_COARSE } from './teleprompter.scroll';
+import type { TeleprompterAction } from './teleprompter.types';
+
+export type TeleprompterKeyEvent = {
+  code: string;
+  key: string;
+  shiftKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  altKey: boolean;
+  repeat: boolean;
+};
+
+export function resolveTeleprompterAction(event: TeleprompterKeyEvent): TeleprompterAction | null {
+  if (event.ctrlKey || event.metaKey || event.altKey) {
+    return null;
+  }
+
+  switch (event.code) {
+    case 'Space':
+      return event.repeat ? null : { type: 'togglePlay' };
+    // Shift is the coarser step on both axes: a bigger speed change sideways,
+    // a whole event rather than a line vertically.
+    case 'ArrowDown':
+      return event.shiftKey ? { type: 'jumpEvent', direction: 1 } : { type: 'nudge', lines: 1 };
+    case 'ArrowUp':
+      return event.shiftKey ? { type: 'jumpEvent', direction: -1 } : { type: 'nudge', lines: -1 };
+    case 'PageDown':
+      return { type: 'page', direction: 1 };
+    case 'PageUp':
+      return { type: 'page', direction: -1 };
+    case 'ArrowRight':
+      return { type: 'speed', delta: event.shiftKey ? SPEED_STEP_COARSE : SPEED_STEP };
+    case 'ArrowLeft':
+      return { type: 'speed', delta: event.shiftKey ? -SPEED_STEP_COARSE : -SPEED_STEP };
+    case 'Home':
+      return { type: 'rewind' };
+    case 'End':
+      return { type: 'jumpToEnd' };
+    case 'Escape':
+      return { type: 'rewindAndPause' };
+  }
+
+  // Character bindings use key so they work across keyboard layouts.
+  switch (event.key) {
+    case '?':
+      return { type: 'toggleHelp' };
+    case '+':
+    case '=':
+      return { type: 'fontSize', steps: 1 };
+    case '-':
+    case '_':
+      return { type: 'fontSize', steps: -1 };
+    case '0':
+      return { type: 'resetFontSize' };
+  }
+
+  const lowerKey = event.key.toLowerCase();
+  if (lowerKey === 'f') {
+    return { type: 'flip', axis: event.shiftKey ? 'v' : 'h' };
+  }
+  if (lowerKey === 'l') {
+    return { type: 'reengageFollow' };
+  }
+
+  return null;
+}

apps/client/src/views/teleprompter/teleprompter.options.ts

@@ -0,0 +1,233 @@
+import type { CustomFields } from 'ontime-types';
+import { use, useMemo } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { OptionTitle } from '../../common/components/view-params-editor/constants';
+import type { ViewOption } from '../../common/components/view-params-editor/viewParams.types';
+import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
+import { PresetContext } from '../../common/context/PresetContext';
+import { isStringBoolean } from '../common/viewUtils';
+import { DEFAULT_SPEED, MAX_FONT_SIZE, MAX_SPEED, MIN_FONT_SIZE, MIN_SPEED } from './teleprompter.scroll';
+import type { HeadingSource, TeleprompterOptions } from './teleprompter.types';
+
+const headingOptions: { value: HeadingSource; label: string }[] = [
+  { value: 'title', label: 'Title' },
+  { value: 'cue', label: 'Cue' },
+  { value: 'both', label: 'Cue and title' },
+  { value: 'none', label: 'None' },
+];
+const headingSources = headingOptions.map((option) => option.value);
+
+export const defaults = {
+  script: 'none',
+  heading: 'title' as HeadingSource,
+  onlyPlaying: false,
+  hideEmpty: true,
+  showGroups: true,
+  speed: DEFAULT_SPEED,
+  followLoaded: true,
+  fontSize: 52,
+  lineHeight: 1.3,
+  textWidth: 80,
+  readingLine: true,
+  readingLinePos: 25,
+  flipH: false,
+  flipV: false,
+};
+
+const bounds = {
+  speed: [MIN_SPEED, MAX_SPEED],
+  fontSize: [MIN_FONT_SIZE, MAX_FONT_SIZE],
+  lineHeight: [1, 4],
+  textWidth: [20, 100],
+  readingLinePos: [0, 100],
+} as const;
+
+export const getTeleprompterOptions = (customFields: CustomFields): ViewOption[] => {
+  const scriptOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
+    { value: 'note', label: 'Note' },
+    { value: 'title', label: 'Title' },
+  ]);
+
+  return [
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'script',
+          title: 'Script',
+          description: 'Select the data source which holds the script to read',
+          type: 'option',
+          values: scriptOptions,
+          defaultValue: defaults.script,
+        },
+        {
+          id: 'heading',
+          title: 'Segment heading',
+          description: 'What to show above each segment of the script',
+          type: 'option',
+          values: headingOptions,
+          defaultValue: defaults.heading,
+        },
+      ],
+    },
+    {
+      title: OptionTitle.BehaviourOptions,
+      collapsible: true,
+      options: [
+        {
+          id: 'speed',
+          title: 'Speed',
+          description: `Scroll speed in lines per minute (${MIN_SPEED}-${MAX_SPEED}). Adjustable live with the arrow keys`,
+          type: 'number',
+          defaultValue: defaults.speed,
+        },
+        {
+          id: 'followLoaded',
+          title: 'Follow loaded event',
+          description: 'Scroll to the segment of the loaded event. Scrolling by hand releases the follow',
+          type: 'boolean',
+          defaultValue: defaults.followLoaded,
+        },
+      ],
+    },
+    {
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
+        {
+          id: 'onlyPlaying',
+          title: 'Show only the playing event',
+          description:
+            'Hides the rest of the script, leaving only the event being played. Shows the whole script while nothing is playing',
+          type: 'boolean',
+          defaultValue: defaults.onlyPlaying,
+        },
+        {
+          id: 'hideEmpty',
+          title: 'Hide events without a script',
+          description: 'Prevents showing headings for events which have no script text',
+          type: 'boolean',
+          defaultValue: defaults.hideEmpty,
+        },
+        {
+          id: 'showGroups',
+          title: 'Show group names',
+          description: 'Shows the group name when the script moves into a new group',
+          type: 'boolean',
+          defaultValue: defaults.showGroups,
+        },
+      ],
+    },
+    {
+      title: OptionTitle.StyleOverride,
+      collapsible: true,
+      options: [
+        {
+          id: 'fontSize',
+          title: 'Font size',
+          description: 'Base font size in pixels. Adjustable live with the + and - keys',
+          type: 'number',
+          defaultValue: defaults.fontSize,
+        },
+        {
+          id: 'lineHeight',
+          title: 'Line height',
+          description: 'Spacing between lines, as a multiple of the font size',
+          type: 'number',
+          defaultValue: defaults.lineHeight,
+        },
+        {
+          id: 'textWidth',
+          title: 'Text width',
+          description: 'Width of the text column as a percentage of the screen. Narrower means less eye movement',
+          type: 'number',
+          defaultValue: defaults.textWidth,
+        },
+        {
+          id: 'readingLine',
+          title: 'Reading line',
+          description: 'Shows a marker beside the line which should be read',
+          type: 'boolean',
+          defaultValue: defaults.readingLine,
+        },
+        {
+          id: 'readingLinePos',
+          title: 'Reading line position',
+          description: 'Position of the reading line as a percentage from the top of the screen',
+          type: 'number',
+          defaultValue: defaults.readingLinePos,
+        },
+        {
+          id: 'flipH',
+          title: 'Flip horizontally',
+          description:
+            'Mirrors the view horizontally, which is what a beam splitter rig needs. Toggled live with F. Flip Screen in the navigation menu flips both axes at once, which is a rotation rather than a mirror',
+          type: 'boolean',
+          defaultValue: defaults.flipH,
+        },
+        {
+          id: 'flipV',
+          title: 'Flip vertically',
+          description: 'Mirrors the view vertically. Note this also moves the reading line. Toggled live with Shift+F',
+          type: 'boolean',
+          defaultValue: defaults.flipV,
+        },
+      ],
+    },
+  ];
+};
+
+function toNumber(value: string | null, [min, max]: readonly [number, number], fallback: number): number {
+  if (value === null || value === '') return fallback;
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return fallback;
+  return Math.min(Math.max(parsed, min), max);
+}
+
+function toBoolean(value: string | null, fallback: boolean): boolean {
+  return value === null ? fallback : isStringBoolean(value);
+}
+
+function toEnum<T extends string>(value: string | null, allowed: readonly T[], fallback: T): T {
+  return allowed.includes(value as T) ? (value as T) : fallback;
+}
+
+export function getOptionsFromParams(
+  searchParams: URLSearchParams,
+  defaultValues?: URLSearchParams,
+): TeleprompterOptions {
+  const getValue = (key: string) => defaultValues?.get(key) ?? searchParams.get(key);
+
+  return {
+    scriptSource: getValue('script') ?? defaults.script,
+    heading: toEnum(getValue('heading'), headingSources, defaults.heading),
+
+    onlyPlaying: toBoolean(getValue('onlyPlaying'), defaults.onlyPlaying),
+    hideEmpty: toBoolean(getValue('hideEmpty'), defaults.hideEmpty),
+    showGroups: toBoolean(getValue('showGroups'), defaults.showGroups),
+
+    speed: toNumber(getValue('speed'), bounds.speed, defaults.speed),
+    followLoaded: toBoolean(getValue('followLoaded'), defaults.followLoaded),
+
+    fontSize: toNumber(getValue('fontSize'), bounds.fontSize, defaults.fontSize),
+    lineHeight: toNumber(getValue('lineHeight'), bounds.lineHeight, defaults.lineHeight),
+    textWidth: toNumber(getValue('textWidth'), bounds.textWidth, defaults.textWidth),
+    readingLine: toBoolean(getValue('readingLine'), defaults.readingLine),
+    readingLinePos: toNumber(getValue('readingLinePos'), bounds.readingLinePos, defaults.readingLinePos),
+    flipH: toBoolean(getValue('flipH'), defaults.flipH),
+    flipV: toBoolean(getValue('flipV'), defaults.flipV),
+  };
+}
+
+export function useTeleprompterOptions(): TeleprompterOptions {
+  const [searchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  return useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+}

apps/client/src/views/teleprompter/teleprompter.scroll.ts

@@ -0,0 +1,165 @@
+export const MIN_SPEED = 1;
+export const MAX_SPEED = 40;
+export const DEFAULT_SPEED = 14;
+
+export const SPEED_STEP = 1;
+export const SPEED_STEP_COARSE = 5;
+
+export const MIN_FONT_SIZE = 12;
+export const MAX_FONT_SIZE = 400;
+const FONT_SIZE_STEP_RATIO = 1.1;
+
+export function stepFontSize(current: number, steps: number): number {
+  return clamp(Math.round(current * FONT_SIZE_STEP_RATIO ** steps), MIN_FONT_SIZE, MAX_FONT_SIZE);
+}
+
+export const MAX_FRAME_DELTA_MS = 100;
+
+const CATCH_UP_RATE = 8;
+const CATCH_UP_EPSILON = 0.5;
+
+export function clamp(value: number, min: number, max: number): number {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+export function clampSpeed(value: number): number {
+  return clamp(value, MIN_SPEED, MAX_SPEED);
+}
+
+export function linesPerMinuteToPxPerSecond(linesPerMinute: number, lineHeightPx: number): number {
+  return (linesPerMinute / 60) * lineHeightPx;
+}
+
+export function frameDeltaSeconds(deltaMs: number): number {
+  if (!Number.isFinite(deltaMs) || deltaMs < 0) return 0;
+  return Math.min(deltaMs, MAX_FRAME_DELTA_MS) / 1000;
+}
+
+export function advance(
+  position: number,
+  pxPerSecond: number,
+  deltaSeconds: number,
+  maxScroll: number,
+): { position: number; atEnd: boolean } {
+  const next = position + pxPerSecond * deltaSeconds;
+  return { position: next, atEnd: maxScroll > 0 && next >= maxScroll };
+}
+
+export function easeCatchUp(current: number, target: number, deltaSeconds: number): number {
+  if (deltaSeconds <= 0) return current;
+  const next = target + (current - target) * Math.exp(-CATCH_UP_RATE * deltaSeconds);
+  return Math.abs(next - target) < CATCH_UP_EPSILON ? target : next;
+}
+
+/** Where a block sits inside the scrolled content, in layout pixels, ordered top to bottom. */
+export type BlockGeometry = { id: string; top: number; height: number };
+
+/**
+ * The read position expressed as a place in the script rather than an offset
+ * into the document.
+ *
+ * A rundown is edited while it is being read, and an edit above the reader
+ * moves every pixel below it. Professional prompters cue a story plus an
+ * offset into it for exactly this reason: the text under the reading line is
+ * the position, the scroll offset is only how it is currently drawn.
+ */
+export type ScrollAnchor = { blockId: string; offset: number };
+
+/**
+ * Index of the block the read point falls in, clamped to the ends of the script.
+ *
+ * Scans rather than bisects: this runs once a frame over a show's worth of
+ * events, and a scan makes no assumption the caller has to keep true.
+ */
+export function indexAtReadPoint(readPoint: number, blocks: BlockGeometry[]): number {
+  if (blocks.length === 0) return -1;
+
+  // starts on the first block, which is where a read point above the script lands
+  let index = 0;
+  for (let i = 1; i < blocks.length; i += 1) {
+    if (blocks[i].top > readPoint) break;
+    index = i;
+  }
+
+  return index;
+}
+
+export function anchorAtReadPoint(readPoint: number, blocks: BlockGeometry[]): ScrollAnchor | null {
+  const index = indexAtReadPoint(readPoint, blocks);
+  if (index === -1) return null;
+  return { blockId: blocks[index].id, offset: readPoint - blocks[index].top };
+}
+
+/**
+ * The read point which puts an anchored place in the script back under the
+ * reading line, or null when it cannot be found at all.
+ */
+export function readPointForAnchor(
+  anchor: ScrollAnchor,
+  blocks: BlockGeometry[],
+  previousOrder: string[],
+): number | null {
+  const match = blocks.find((block) => block.id === anchor.blockId);
+  if (match) {
+    // The block may have been edited shorter than the offset into it.
+    return match.top + Math.min(anchor.offset, match.height);
+  }
+
+  // The anchored event was deleted mid-read. Land on the end of the nearest
+  // event which preceded it and survives, which is where the deleted text
+  // used to begin, rather than wherever its pixels now happen to point.
+  const previousIndex = previousOrder.indexOf(anchor.blockId);
+  for (let i = previousIndex - 1; i >= 0; i -= 1) {
+    const survivor = blocks.find((block) => block.id === previousOrder[i]);
+    if (survivor) return survivor.top + survivor.height;
+  }
+
+  return null;
+}
+
+/** Keeps a position resting on a boundary from counting as still being before it. */
+const SEGMENT_BOUNDARY_EPSILON = 1;
+
+/** The position at which the reading line reaches the end of a segment. */
+export function segmentEndFor(block: BlockGeometry, readingOffset: number): number {
+  return block.top + block.height - readingOffset;
+}
+
+/**
+ * The segment playback should run to, or null past the last one, where the end
+ * of the script is the bound.
+ *
+ * An event is a unit of time with a stop of its own, so running the script on
+ * into the next one reads a segment nobody has cued: at a conference that is
+ * the next speaker's script, while they are still walking on.
+ *
+ * Takes the first segment ending ahead rather than the one the position sits
+ * in, so that starting again from a position already parked on a boundary
+ * carries on into the next segment instead of stopping where it already is.
+ * Decide this once when playback starts: re-deciding it against a position
+ * which is moving lets the bound outrun the reader and never arrive.
+ */
+export function segmentAfter(position: number, readingOffset: number, blocks: BlockGeometry[]): BlockGeometry | null {
+  for (const block of blocks) {
+    if (segmentEndFor(block, readingOffset) > position + SEGMENT_BOUNDARY_EPSILON) return block;
+  }
+
+  return null;
+}
+
+/** How far, in lines, the reader may move the script themselves before it counts as taking over. */
+export const FOLLOW_BREAK_LINES = 1.5;
+
+/**
+ * Distinguishes a deliberate scroll away from the read position from momentum
+ * or a stray touch.
+ *
+ * Takes what the reader moved rather than where the script ended up: while
+ * following eases towards a newly loaded event, and while playback carries the
+ * script along, the distance to the target is the prompter's own doing.
+ */
+export function hasBrokenFollow(readerDriftPx: number, lineHeightPx: number): boolean {
+  if (lineHeightPx <= 0) return false;
+  return Math.abs(readerDriftPx) > lineHeightPx * FOLLOW_BREAK_LINES;
+}

apps/client/src/views/teleprompter/teleprompter.types.ts

@@ -0,0 +1,61 @@
+import type { MaybeString } from 'ontime-types';
+
+export type HeadingSource = 'none' | 'title' | 'cue' | 'both';
+
+export type ScriptBlock = {
+  id: string;
+  heading: string;
+  text: string;
+  groupTitle: MaybeString;
+  isLoaded: boolean;
+};
+
+/**
+ * Where playback stopped of its own accord: at the end of the segment being
+ * read, or at the end of the whole script. Null while it has somewhere to go.
+ */
+export type ParkedAt = 'segment' | 'script' | null;
+
+export type TeleprompterOptions = {
+  scriptSource: string;
+  heading: HeadingSource;
+  onlyPlaying: boolean;
+  hideEmpty: boolean;
+  showGroups: boolean;
+  /** lines per minute */
+  speed: number;
+  followLoaded: boolean;
+  fontSize: number;
+  lineHeight: number;
+  textWidth: number;
+  readingLine: boolean;
+  readingLinePos: number;
+  flipH: boolean;
+  flipV: boolean;
+};
+
+export type TeleprompterAction =
+  | { type: 'togglePlay' }
+  | { type: 'nudge'; lines: number }
+  | { type: 'page'; direction: 1 | -1 }
+  | { type: 'jumpEvent'; direction: 1 | -1 }
+  | { type: 'speed'; delta: number }
+  | { type: 'rewind' }
+  | { type: 'rewindAndPause' }
+  | { type: 'jumpToEnd' }
+  | { type: 'flip'; axis: 'h' | 'v' }
+  | { type: 'fontSize'; steps: number }
+  | { type: 'resetFontSize' }
+  | { type: 'reengageFollow' }
+  | { type: 'toggleHelp' };
+
+export type TeleprompterController = {
+  togglePlay: () => void;
+  nudge: (lines: number) => void;
+  page: (direction: 1 | -1) => void;
+  jumpEvent: (direction: 1 | -1) => void;
+  changeSpeed: (delta: number) => void;
+  rewind: (alsoPause?: boolean) => void;
+  jumpToEnd: () => void;
+  reengageFollow: () => void;
+};

apps/client/src/views/teleprompter/teleprompter.utils.ts

@@ -0,0 +1,92 @@
+import { type CustomFields, isOntimeEvent, isOntimeGroup, type MaybeString, type Rundown } from 'ontime-types';
+
+import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
+import { getPropertyValue } from '../common/viewUtils';
+import type { HeadingSource, ScriptBlock, TeleprompterOptions } from './teleprompter.types';
+
+type BuildScriptOptions = Pick<
+  TeleprompterOptions,
+  'scriptSource' | 'heading' | 'onlyPlaying' | 'hideEmpty' | 'showGroups'
+>;
+
+function makeHeading(source: HeadingSource, cue: string, title: string): string {
+  switch (source) {
+    case 'cue':
+      return cue;
+    case 'title':
+      return title;
+    case 'both':
+      return [cue, title].filter(Boolean).join(' · ');
+    case 'none':
+      return '';
+  }
+}
+
+function isReadableSource(scriptSource: string, customFields: CustomFields): boolean {
+  if (!scriptSource.startsWith('custom-')) {
+    return true;
+  }
+  const key = scriptSource.slice('custom-'.length);
+  return customFields[key]?.type === 'text';
+}
+
+/** Builds the continuous script in rundown order. */
+export function buildScript(
+  rundown: Rundown,
+  rundownMetadata: RundownMetadataObject,
+  customFields: CustomFields,
+  options: BuildScriptOptions,
+): ScriptBlock[] {
+  const { scriptSource, heading, onlyPlaying, hideEmpty, showGroups } = options;
+
+  if (scriptSource === 'none' || !isReadableSource(scriptSource, customFields)) {
+    return [];
+  }
+
+  const blocks: ScriptBlock[] = [];
+  let lastGroupId: MaybeString = null;
+
+  for (const id of rundown.flatOrder) {
+    const entry = rundown.entries[id];
+    if (!isOntimeEvent(entry) || entry.skip) {
+      continue;
+    }
+
+    const metadata = rundownMetadata[id];
+    const text = getPropertyValue(entry, scriptSource, rundown.entries)?.trim() ?? '';
+    if (hideEmpty && !text) {
+      continue;
+    }
+
+    const groupId = metadata?.groupId ?? null;
+    let groupTitle: MaybeString = null;
+    if (showGroups && groupId && groupId !== lastGroupId) {
+      const group = rundown.entries[groupId];
+      groupTitle = isOntimeGroup(group) ? group.title : null;
+    }
+    lastGroupId = groupId;
+
+    blocks.push({
+      id,
+      heading: makeHeading(heading, entry.cue, entry.title),
+      text,
+      groupTitle,
+      isLoaded: Boolean(metadata?.isLoaded),
+    });
+  }
+
+  if (onlyPlaying) {
+    const playing = blocks.filter((block) => block.isLoaded);
+    // With nothing loaded there is no event to narrow to, and a blank screen
+    // would be a worse answer than the script the reader asked to see.
+    if (playing.length > 0) {
+      return playing;
+    }
+  }
+
+  return blocks;
+}
+
+export function composeFlip(flipH: boolean, flipV: boolean, isMirrored: boolean): { flipH: boolean; flipV: boolean } {
+  return { flipH: flipH !== isMirrored, flipV: flipV !== isMirrored };
+}

apps/client/src/views/teleprompter/useSyncTeleprompterParams.ts

@@ -0,0 +1,50 @@
+import { use, useEffect } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { PresetContext } from '../../common/context/PresetContext';
+import { defaults } from './teleprompter.options';
+
+const SETTLE_MS = 400;
+
+interface LiveParams {
+  speed: number;
+  fontSize: number;
+  flipH: boolean;
+  flipV: boolean;
+}
+
+/** Keeps keyboard and overlay changes shareable through the URL. */
+export function useSyncTeleprompterParams({ speed, fontSize, flipH, flipV }: LiveParams) {
+  const [, setSearchParams] = useSearchParams();
+  const isPreset = Boolean(use(PresetContext));
+
+  useEffect(() => {
+    if (isPreset) return;
+
+    const timeout = setTimeout(() => {
+      const values = {
+        speed: speed === defaults.speed ? null : String(speed),
+        fontSize: fontSize === defaults.fontSize ? null : String(fontSize),
+        flipH: flipH === defaults.flipH ? null : String(flipH),
+        flipV: flipV === defaults.flipV ? null : String(flipV),
+      };
+
+      setSearchParams(
+        (current) => {
+          const next = new URLSearchParams(current);
+          for (const [key, value] of Object.entries(values)) {
+            if (value === null) {
+              next.delete(key);
+            } else {
+              next.set(key, value);
+            }
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    }, SETTLE_MS);
+
+    return () => clearTimeout(timeout);
+  }, [flipH, flipV, fontSize, isPreset, setSearchParams, speed]);
+}

apps/client/src/views/teleprompter/useTeleprompterControls.ts

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+
+import { useViewParamsEditorStore } from '../../common/components/view-params-editor/viewParamsEditor.store';
+import { resolveTeleprompterAction } from './teleprompter.keymap';
+import type { TeleprompterAction, TeleprompterController } from './teleprompter.types';
+
+interface UseTeleprompterControlsArgs {
+  controller: TeleprompterController;
+  isHelpOpen: boolean;
+  onFlip: (axis: 'h' | 'v') => void;
+  onFontSize: (steps: number) => void;
+  onResetFontSize: () => void;
+  onToggleHelp: () => void;
+}
+
+const ignoredTags = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+
+export function useTeleprompterControls(args: UseTeleprompterControlsArgs) {
+  const argsRef = useRef(args);
+  useEffect(() => {
+    argsRef.current = args;
+  });
+
+  useEffect(() => {
+    function applyAction(action: TeleprompterAction) {
+      const { controller, onFlip, onFontSize, onResetFontSize, onToggleHelp } = argsRef.current;
+      switch (action.type) {
+        case 'togglePlay':
+          return controller.togglePlay();
+        case 'nudge':
+          return controller.nudge(action.lines);
+        case 'page':
+          return controller.page(action.direction);
+        case 'jumpEvent':
+          return controller.jumpEvent(action.direction);
+        case 'speed':
+          return controller.changeSpeed(action.delta);
+        case 'rewind':
+          return controller.rewind();
+        case 'rewindAndPause':
+          return controller.rewind(true);
+        case 'jumpToEnd':
+          return controller.jumpToEnd();
+        case 'reengageFollow':
+          return controller.reengageFollow();
+        case 'flip':
+          return onFlip(action.axis);
+        case 'fontSize':
+          return onFontSize(action.steps);
+        case 'resetFontSize':
+          return onResetFontSize();
+        case 'toggleHelp':
+          return onToggleHelp();
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      if (target && (ignoredTags.has(target.tagName) || target.isContentEditable)) {
+        return;
+      }
+      if (useViewParamsEditorStore.getState().isOpen || argsRef.current.isHelpOpen) {
+        return;
+      }
+
+      const action = resolveTeleprompterAction(event);
+      if (!action) return;
+
+      event.preventDefault();
+      applyAction(action);
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+}

apps/client/src/views/teleprompter/useTeleprompterData.ts

@@ -0,0 +1,26 @@
+import type { CustomFields, Rundown } from 'ontime-types';
+
+import useCustomFields from '../../common/hooks-query/useCustomFields';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import type { RundownMetadataObject } from '../../common/utils/rundownMetadata';
+import { type ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
+
+export interface TeleprompterData {
+  rundown: Rundown;
+  rundownMetadata: RundownMetadataObject;
+  customFields: CustomFields;
+}
+
+export function useTeleprompterData(): ViewData<TeleprompterData> {
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
+  const { data: customFields, status: customFieldStatus } = useCustomFields();
+
+  return {
+    data: {
+      rundown,
+      rundownMetadata,
+      customFields,
+    },
+    status: aggregateQueryStatus([rundownStatus, customFieldStatus]),
+  };
+}

apps/client/src/views/teleprompter/useTeleprompterScroll.ts

@@ -0,0 +1,455 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  advance,
+  anchorAtReadPoint,
+  type BlockGeometry,
+  clamp,
+  clampSpeed,
+  easeCatchUp,
+  frameDeltaSeconds,
+  hasBrokenFollow,
+  indexAtReadPoint,
+  linesPerMinuteToPxPerSecond,
+  readPointForAnchor,
+  type ScrollAnchor,
+  segmentAfter,
+  segmentEndFor,
+} from './teleprompter.scroll';
+import type { ParkedAt, ScriptBlock, TeleprompterController } from './teleprompter.types';
+
+const PAGE_FRACTION = 0.85;
+const EXTERNAL_SCROLL_EPSILON = 2;
+/** Below this the correction would be invisible and only add jitter. */
+const ANCHOR_CORRECTION_EPSILON = 1;
+
+/**
+ * Uses layout coordinates because client rects include the teleprompter's CSS
+ * transform while scrollTop does not.
+ */
+function getLayoutTop(element: HTMLElement): number {
+  let top = 0;
+  let current: HTMLElement | null = element;
+
+  while (current) {
+    top += current.offsetTop;
+    current = current.offsetParent instanceof HTMLElement ? current.offsetParent : null;
+  }
+
+  return top;
+}
+
+interface UseTeleprompterScrollArgs {
+  initialSpeed: number;
+  followLoaded: boolean;
+  selectedEventId: string | null;
+  readingLinePos: number;
+  blocks: ScriptBlock[];
+}
+
+/**
+ * Owns the scroll position of the teleprompter.
+ *
+ * The animation frame is the only writer of scrollTop. Controls update refs so
+ * smooth scrolling and playback cannot compete for the DOM position.
+ */
+export function useTeleprompterScroll({
+  initialSpeed,
+  followLoaded,
+  selectedEventId,
+  readingLinePos,
+  blocks,
+}: UseTeleprompterScrollArgs) {
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const blockRefs = useRef(new Map<string, HTMLElement>());
+
+  const [isScrollerMounted, setIsScrollerMounted] = useState(false);
+  const attachScroller = useCallback((element: HTMLDivElement | null) => {
+    scrollerRef.current = element;
+    setIsScrollerMounted(Boolean(element && contentRef.current));
+  }, []);
+  const attachContent = useCallback((element: HTMLDivElement | null) => {
+    contentRef.current = element;
+    setIsScrollerMounted(Boolean(element && scrollerRef.current));
+  }, []);
+
+  // authoritative, sub-pixel scroll position
+  const posRef = useRef(0);
+  const lastTsRef = useRef(0);
+  const runningRef = useRef(false);
+  const speedRef = useRef(initialSpeed);
+  const lineHeightRef = useRef(0);
+  const maxScrollRef = useRef(0);
+  const catchUpTargetRef = useRef<number | null>(null);
+  const pendingDeltaRef = useRef(0);
+  // where following last put (or is easing towards putting) the reader
+  const followTargetRef = useRef(0);
+  // how far the reader has moved the script themselves since following last placed it
+  const readerDriftRef = useRef(0);
+  // distance from the top of the viewport to the reading line
+  const readingOffsetRef = useRef(0);
+  const readingLinePosRef = useRef(readingLinePos);
+  const selectedEventIdRef = useRef(selectedEventId);
+  // the script's layout as of the last measure, and the reader's place in it
+  const geometryRef = useRef<BlockGeometry[]>([]);
+  const anchorRef = useRef<ScrollAnchor | null>(null);
+  // the segment this run of playback stops at, chosen when it started
+  const playbackSegmentRef = useRef<string | null>(null);
+
+  const [isRunning, setIsRunning] = useState(false);
+  const [speed, setSpeed] = useState(initialSpeed);
+  // mirrors the operator view's lockAutoScroll: true once the reader has taken
+  // the scroll over by hand, false while following is doing the driving
+  const [autoScrollLocked, setAutoScrollLocked] = useState(false);
+  const [parkedAt, setParkedAt] = useState<ParkedAt>(null);
+
+  const isFollowingRef = useRef(false);
+  useEffect(() => {
+    isFollowingRef.current = followLoaded && !autoScrollLocked;
+  }, [followLoaded, autoScrollLocked]);
+
+  /**
+   * One rule for every input, wheel and keyboard alike: once the reader has
+   * moved the script far enough themselves, they are driving.
+   *
+   * Accumulates, so a gesture the browser spreads over many frames adds up to
+   * the move it was, and so does a slow drag. Scrolling back where you came
+   * from cancels out, which is what keeps momentum and a stray touch from
+   * taking the scroll over.
+   */
+  const addReaderDrift = useCallback((delta: number) => {
+    if (!isFollowingRef.current) return;
+    readerDriftRef.current += delta;
+    if (hasBrokenFollow(readerDriftRef.current, lineHeightRef.current)) {
+      setAutoScrollLocked(true);
+    }
+  }, []);
+
+  const tick = useCallback(
+    (timestamp: number) => {
+      const el = scrollerRef.current;
+      if (!el) return;
+
+      // Adopt wheel, touch, scrollbar, browser-clamp and find-in-page changes.
+      // Whatever the position is that the frame loop did not put there is the
+      // reader's own doing, which makes this the one place a scroll by hand can
+      // be measured, however the browser chose to deliver it.
+      const external = el.scrollTop - posRef.current;
+      if (Math.abs(external) > EXTERNAL_SCROLL_EPSILON) {
+        addReaderDrift(external);
+        posRef.current = el.scrollTop;
+        catchUpTargetRef.current = null;
+      }
+
+      const deltaSeconds = frameDeltaSeconds(timestamp - lastTsRef.current);
+      lastTsRef.current = timestamp;
+
+      let next = posRef.current;
+
+      if (pendingDeltaRef.current !== 0) {
+        next += pendingDeltaRef.current;
+        pendingDeltaRef.current = 0;
+        catchUpTargetRef.current = null;
+      }
+
+      if (catchUpTargetRef.current !== null) {
+        next = easeCatchUp(next, catchUpTargetRef.current, deltaSeconds);
+        if (next === catchUpTargetRef.current) {
+          catchUpTargetRef.current = null;
+        }
+      } else if (runningRef.current) {
+        // Only playback is held to the segment. A jump, a page or a nudge is
+        // the reader asking to leave it, and stays free to cross.
+        //
+        // Resolved from the segment's identity rather than the pixel bound
+        // taken when playback started, so an edit which moves the script keeps
+        // playback stopping on the same words.
+        const stopBlock = geometryRef.current.find((block) => block.id === playbackSegmentRef.current);
+        const stop = stopBlock
+          ? clamp(segmentEndFor(stopBlock, readingOffsetRef.current), 0, maxScrollRef.current)
+          : maxScrollRef.current;
+
+        const pxPerSecond = linesPerMinuteToPxPerSecond(speedRef.current, lineHeightRef.current);
+        const result = advance(next, pxPerSecond, deltaSeconds, stop);
+        next = Math.min(result.position, stop);
+        if (result.atEnd) {
+          runningRef.current = false;
+          setIsRunning(false);
+          // Past the last segment there is only the trailing padding, so
+          // stopping there is the end of the read rather than a wait for a cue.
+          const isLastSegment = stopBlock !== undefined && stopBlock.id === geometryRef.current.at(-1)?.id;
+          setParkedAt(isLastSegment || stop >= maxScrollRef.current ? 'script' : 'segment');
+        }
+      }
+
+      const clamped = clamp(next, 0, maxScrollRef.current);
+      if (clamped !== posRef.current) {
+        posRef.current = clamped;
+        el.scrollTop = clamped;
+      }
+
+      // Remember the reader's place in the script, not just in the document, so
+      // the next measure can put them back if the rundown changed underneath
+      // them. Reads no layout: the geometry is the one taken at that measure.
+      anchorRef.current = anchorAtReadPoint(clamped + readingOffsetRef.current, geometryRef.current);
+    },
+    [addReaderDrift],
+  );
+
+  useEffect(() => {
+    lastTsRef.current = performance.now();
+    let frame = requestAnimationFrame(function loop(timestamp) {
+      tick(timestamp);
+      frame = requestAnimationFrame(loop);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [tick]);
+
+  /** Where following would put the reader for a block, against the last measure. */
+  const scrollTargetFor = useCallback((blockId: string): number | null => {
+    const block = geometryRef.current.find((entry) => entry.id === blockId);
+    if (!block) return null;
+    return clamp(block.top - readingOffsetRef.current, 0, maxScrollRef.current);
+  }, []);
+
+  const measure = useCallback(() => {
+    const scroller = scrollerRef.current;
+    const content = contentRef.current;
+    if (!scroller || !content) return;
+
+    maxScrollRef.current = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+    readingOffsetRef.current = (scroller.clientHeight * readingLinePosRef.current) / 100;
+
+    const computed = getComputedStyle(content);
+    const parsedLineHeight = Number.parseFloat(computed.lineHeight);
+    if (Number.isFinite(parsedLineHeight) && parsedLineHeight > 0) {
+      lineHeightRef.current = parsedLineHeight;
+    } else {
+      const parsedFontSize = Number.parseFloat(computed.fontSize);
+      lineHeightRef.current = Number.isFinite(parsedFontSize) ? parsedFontSize * 1.2 : 0;
+    }
+
+    const wasEasingToLoadedEvent = catchUpTargetRef.current === followTargetRef.current;
+
+    const previous = geometryRef.current;
+    const scrollerTop = getLayoutTop(scroller);
+    const geometry: BlockGeometry[] = [];
+    blockRefs.current.forEach((element, id) => {
+      geometry.push({ id, top: getLayoutTop(element) - scrollerTop, height: element.offsetHeight });
+    });
+    // registration follows mounting rather than rundown order, so trust layout
+    geometry.sort((a, b) => a.top - b.top);
+    geometryRef.current = geometry;
+
+    // Put the reader back on the words they were on. Nothing to restore on the
+    // first measure, when there is no earlier document to have moved.
+    const anchor = anchorRef.current;
+    if (anchor && previous.length > 0) {
+      const readPoint = readPointForAnchor(
+        anchor,
+        geometry,
+        previous.map((block) => block.id),
+      );
+      if (readPoint !== null) {
+        const target = clamp(readPoint - readingOffsetRef.current, 0, maxScrollRef.current);
+        const delta = target - posRef.current;
+        if (Math.abs(delta) > ANCHOR_CORRECTION_EPSILON) {
+          posRef.current = target;
+          scroller.scrollTop = target;
+          if (catchUpTargetRef.current !== null) {
+            catchUpTargetRef.current = clamp(catchUpTargetRef.current + delta, 0, maxScrollRef.current);
+          }
+        }
+      }
+    }
+
+    // The follow target is a position in a document which may have just moved,
+    // so take it from the new geometry rather than ageing the old value.
+    const selectedId = selectedEventIdRef.current;
+    if (selectedId !== null) {
+      const followTarget = scrollTargetFor(selectedId);
+      if (followTarget !== null) {
+        followTargetRef.current = followTarget;
+      }
+    }
+
+    // Shifting an in-flight ease by the correction is only an estimate. When it
+    // was heading for the loaded event we know better: send it to where that
+    // event is now, so following still lands exactly on the reading line.
+    if (wasEasingToLoadedEvent) {
+      catchUpTargetRef.current = followTargetRef.current;
+    }
+  }, [scrollTargetFor]);
+
+  useEffect(() => {
+    speedRef.current = speed;
+  }, [speed]);
+
+  const [speedFromOption, setSpeedFromOption] = useState(initialSpeed);
+  // Keep the live speed in sync with view-param and remote redirect changes.
+  if (speedFromOption !== initialSpeed) {
+    setSpeedFromOption(initialSpeed);
+    setSpeed(initialSpeed);
+  }
+
+  useEffect(() => {
+    measure();
+
+    const scroller = scrollerRef.current;
+    const content = contentRef.current;
+    if (!scroller || !content) return;
+
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(scroller);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [measure, isScrollerMounted]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void document.fonts?.ready.then(() => {
+      if (!cancelled) measure();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [measure]);
+
+  useEffect(() => {
+    readingLinePosRef.current = readingLinePos;
+    measure();
+  }, [readingLinePos, measure]);
+
+  /**
+   * A resize observer sees the document get taller or shorter, but not a
+   * reorder or a rewrite which happens to leave the height alone, and both
+   * move the reader's place in the script.
+   */
+  const contentSignature = blocks.map((block) => `${block.id}:${block.text.length}`).join();
+  useEffect(() => {
+    measure();
+  }, [contentSignature, measure]);
+
+  useEffect(() => {
+    const onVisibilityChange = () => {
+      lastTsRef.current = performance.now();
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () => document.removeEventListener('visibilitychange', onVisibilityChange);
+  }, []);
+
+  useEffect(() => {
+    selectedEventIdRef.current = selectedEventId;
+  }, [selectedEventId]);
+
+  // Avoid re-following when a new blocks array contains the same selected event.
+  const hasSelectedBlock = selectedEventId !== null && blocks.some((block) => block.id === selectedEventId);
+
+  useEffect(() => {
+    if (!followLoaded || autoScrollLocked || !selectedEventId) return;
+
+    const target = scrollTargetFor(selectedEventId);
+    if (target === null) return;
+
+    followTargetRef.current = target;
+    catchUpTargetRef.current = target;
+    readerDriftRef.current = 0;
+    setParkedAt(null);
+  }, [selectedEventId, followLoaded, autoScrollLocked, readingLinePos, hasSelectedBlock, scrollTargetFor]);
+
+  const registerBlock = useCallback((id: string, element: HTMLElement | null) => {
+    if (element) {
+      blockRefs.current.set(id, element);
+    } else {
+      blockRefs.current.delete(id);
+    }
+  }, []);
+
+  const controller: TeleprompterController = useMemo(() => {
+    const play = () => {
+      if (maxScrollRef.current > 0 && posRef.current >= maxScrollRef.current) {
+        return;
+      }
+      const stopAt = segmentAfter(posRef.current, readingOffsetRef.current, geometryRef.current);
+      playbackSegmentRef.current = stopAt?.id ?? null;
+      runningRef.current = true;
+      setIsRunning(true);
+      setParkedAt(null);
+    };
+
+    const pause = () => {
+      runningRef.current = false;
+      setIsRunning(false);
+    };
+
+    /**
+     * Where the scroll is headed rather than where it currently sits, so
+     * pressing a step key again before the ease settles moves on by another
+     * step instead of re-aiming at the one already in flight.
+     */
+    const destination = () => catchUpTargetRef.current ?? posRef.current;
+
+    /** Eases to a position the reader asked for, by hand. */
+    const goTo = (position: number) => {
+      const target = clamp(position, 0, maxScrollRef.current);
+      addReaderDrift(target - destination());
+      catchUpTargetRef.current = target;
+      setParkedAt(null);
+    };
+
+    return {
+      togglePlay: () => (runningRef.current ? pause() : play()),
+      nudge: (lines: number) => {
+        const distance = lines * lineHeightRef.current;
+        pendingDeltaRef.current += distance;
+        addReaderDrift(distance);
+        setParkedAt(null);
+      },
+      page: (direction: 1 | -1) => {
+        const scroller = scrollerRef.current;
+        if (!scroller) return;
+        goTo(destination() + scroller.clientHeight * PAGE_FRACTION * direction);
+      },
+      jumpEvent: (direction: 1 | -1) => {
+        const geometry = geometryRef.current;
+        const current = indexAtReadPoint(destination() + readingOffsetRef.current, geometry);
+        if (current === -1) return;
+
+        const next = clamp(current + direction, 0, geometry.length - 1);
+        goTo(geometry[next].top - readingOffsetRef.current);
+      },
+      changeSpeed: (delta: number) => setSpeed((current) => clampSpeed(current + delta)),
+      rewind: (alsoPause = false) => {
+        goTo(0);
+        if (alsoPause) pause();
+      },
+      jumpToEnd: () => {
+        addReaderDrift(maxScrollRef.current - destination());
+        catchUpTargetRef.current = maxScrollRef.current;
+        if (maxScrollRef.current > 0) {
+          runningRef.current = false;
+          setIsRunning(false);
+          setParkedAt('script');
+        }
+      },
+      reengageFollow: () => {
+        readerDriftRef.current = 0;
+        setAutoScrollLocked(false);
+      },
+    };
+  }, [addReaderDrift]);
+
+  return {
+    scrollerRef: attachScroller,
+    contentRef: attachContent,
+    registerBlock,
+    controller,
+    isRunning,
+    speed,
+    // folds followLoaded in, so callers get one ready-to-use signal instead of
+    // a runtime flag they must remember to AND with the option themselves
+    canReengageFollow: followLoaded && autoScrollLocked,
+    parkedAt,
+  };
+}

apps/client/src/views/timeline/useTimelineData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -16,7 +16,7 @@ export interface TimelineData {
 
 export function useTimelineData(): ViewData<TimelineData> {
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/timer/Timer.scss

@@ -195,24 +195,6 @@
     font-weight: 600;
   }
 
-  .sound-prompt {
-    position: absolute;
-    bottom: $view-block-padding;
-    left: $view-inline-padding;
-    padding: 0.5em 0.75em;
-    border-radius: $element-border-radius;
-    background-color: $viewer-card-bg-color;
-    color: $viewer-secondary-color;
-    font-size: $timer-label-size;
-    text-transform: uppercase;
-    pointer-events: none;
-    transition: opacity $viewer-transition-time;
-
-    &--hidden {
-      opacity: 0;
-    }
-  }
-
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;

apps/client/src/views/timer/Timer.tsx

@@ -8,7 +8,6 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
-import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -31,7 +30,6 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
-import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -68,7 +66,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
-    endSound,
     font,
     keyColour,
     timerColour,
@@ -78,8 +75,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
-  const showSoundPrompt = useTimerSound(time.phase, endSound);
-
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -161,8 +156,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
-      {showSoundPrompt && <SoundPermissionPrompt />}
-
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -234,13 +227,3 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
-
-function SoundPermissionPrompt() {
-  const isUserActive = useFadeOutOnInactivity(true);
-
-  return (
-    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
-      Interact with the page (click/tap or press any key) to enable sound
-    </div>
-  );
-}

apps/client/src/views/timer/__tests__/timer.utils.test.ts

@@ -1,34 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-
-import { shouldPlayEndSound } from '../timer.utils';
-
-describe('shouldPlayEndSound()', () => {
-  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
-    'sounds when a running timer goes into overtime from %s',
-    (previousPhase) => {
-      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
-    },
-  );
-
-  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
-    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
-    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent for a roll timer waiting to start', () => {
-    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('sounds once, not on every update while in overtime', () => {
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent on phases which are not the end of the timer', () => {
-    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
-  });
-});

apps/client/src/views/timer/timer.options.ts

@@ -16,7 +16,6 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
-import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';
 
 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -77,15 +76,6 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
-        {
-          id: 'endSound',
-          title: 'Play sound on timer end',
-          description:
-            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
-          type: 'option',
-          values: endSoundOptions,
-          defaultValue: 'none',
-        },
       ],
     },
     {
@@ -203,7 +193,6 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
-  endSound: EndSound;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -219,7 +208,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   // Get timerType from either source
   const timerType = validateTimerType(getValue('timerType'), TimerType.None);
-  const endSoundValue = getValue('endSound');
 
   return {
     hideClock: isStringBoolean(getValue('hideClock')),
@@ -239,7 +227,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
-    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

apps/client/src/views/timer/timer.sound.ts

@@ -1,20 +0,0 @@
-import arpeggio from '../../assets/sounds/arpeggio.wav';
-import bell from '../../assets/sounds/bell.wav';
-import chime from '../../assets/sounds/chime.wav';
-import type { SelectOption } from '../../common/components/select/Select';
-
-// synthesised tones bundled with the app, no external source or licence to track
-export const endSoundSources = { chime, bell, arpeggio } as const;
-
-export type EndSound = 'none' | keyof typeof endSoundSources;
-
-export const endSoundOptions: SelectOption[] = [
-  { value: 'none', label: 'None' },
-  { value: 'chime', label: 'Chime' },
-  { value: 'bell', label: 'Bell' },
-  { value: 'arpeggio', label: 'Arpeggio' },
-];
-
-export function isEndSound(value: string | null): value is EndSound {
-  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
-}

apps/client/src/views/timer/timer.utils.ts

@@ -189,18 +189,3 @@ export function getCardData(
     nextSecondary,
   };
 }
-
-/**
- * Whether the end of timer sound should play for a given phase transition
- * We only sound the transition into overtime from a phase that was already counting,
- * which keeps a client that connects or reloads mid-overtime silent
- */
-export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
-  if (phase !== TimerPhase.Overtime) {
-    return false;
-  }
-
-  return (
-    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
-  );
-}

apps/client/src/views/timer/useTimerData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
   const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useLoadedRundown();
+  const { data: rundown, status: rundownStatus } = useRundown();
   const { entries } = rundown;
 
   return {

apps/client/src/views/timer/useTimerSound.ts

@@ -1,99 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import { endSoundSources, type EndSound } from './timer.sound';
-import { shouldPlayEndSound } from './timer.utils';
-
-/**
- * Plays a sound when the timer reaches its end
- *
- * Browsers reject playback until the document has been interacted with, and that permission
- * is lost on every page load. Since a timer screen is typically left unattended, we prime the
- * audio element on the first interaction and let the view prompt for one if it never comes.
- * Safari grants the permission per element, so priming has to call play() on this element from
- * inside the event handler, it is not enough to know that an interaction happened.
- */
-export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const previousPhaseRef = useRef<TimerPhase | null>(null);
-  const [isArmed, setIsArmed] = useState(false);
-
-  const enabled = sound !== 'none';
-
-  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
-  useEffect(() => {
-    setIsArmed(false);
-
-    if (sound === 'none') {
-      return;
-    }
-
-    const audio = new Audio(endSoundSources[sound]);
-    audioRef.current = audio;
-
-    return () => {
-      audio.pause();
-      audioRef.current = null;
-    };
-  }, [sound]);
-
-  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
-  useEffect(() => {
-    if (!enabled || isArmed) {
-      return;
-    }
-
-    const controller = new AbortController();
-    const prime = () => {
-      const audio = audioRef.current;
-      if (!audio) {
-        return;
-      }
-
-      const wasMuted = audio.muted;
-      audio.muted = true;
-      audio
-        .play()
-        .then(() => {
-          if (audioRef.current !== audio) {
-            return;
-          }
-          audio.pause();
-          audio.currentTime = 0;
-          setIsArmed(true);
-        })
-        .catch(() => {
-          // playback is still blocked, a later interaction will try again
-        })
-        .finally(() => {
-          audio.muted = wasMuted;
-        });
-    };
-
-    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
-    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
-
-    return () => {
-      controller.abort();
-    };
-  }, [enabled, isArmed]);
-
-  // Track phase transitions and play only when a running timer enters overtime.
-  useEffect(() => {
-    const previousPhase = previousPhaseRef.current;
-    previousPhaseRef.current = phase;
-
-    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
-      return;
-    }
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    audio.currentTime = 0;
-    audio.play().catch(() => {
-      // the screen has not been interacted with, the view shows a prompt for it
-    });
-  }, [enabled, phase]);
-
-  return enabled && !isArmed;
-}

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-electron",
-  "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",

apps/electron/src/menu/applicationMenu.js

@@ -151,6 +151,7 @@ function makeViewMenu(clientUrl) {
       makeItemOpenInBrowser('Editor', `${clientUrl}/editor`),
       makeItemOpenInBrowser('Cuesheet', `${clientUrl}/cuesheet`),
       makeItemOpenInBrowser('Operator', `${clientUrl}/op`),
+      makeItemOpenInBrowser('Teleprompter', `${clientUrl}/teleprompter`),
       { type: 'separator' },
       makeItemOpenInBrowser('Timer', `${clientUrl}/timer`),
       makeItemOpenInBrowser('Backstage', `${clientUrl}/backstage`),

apps/resolver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getontime/resolver",
-  "version": "4.13.0",
+  "version": "4.13.0-beta.1",
   "type": "module",
   "repository": "https://github.com/cpvalente/ontime",
   "types": "./dist/main.d.ts",
@@ -17,7 +17,7 @@
     "parser"
   ],
   "author": "",
-  "license": "ISC",
+  "license": "AGPL-3.0-only",
   "devDependencies": {
     "ontime-types": "workspace:^4.2.1",
     "tsdown": "^0.22.4",

apps/server/package.json

@@ -2,7 +2,7 @@
   "name": "ontime-server",
   "type": "module",
   "main": "src/index.ts",
-  "version": "4.13.0",
+  "version": "4.13.0-beta.1",
   "exports": "./src/index.js",
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",

apps/server/src/api-data/rundown/__tests__/rundown.utils.test.ts

@@ -1,7 +1,5 @@
-import { deepEqual } from 'fast-equals';
 import {
   EndAction,
-  OntimeEntry,
   OntimeEvent,
   OntimeGroup,
   OntimeMilestone,
@@ -10,21 +8,13 @@ import {
   TimerType,
   Trigger,
 } from 'ontime-types';
-import {
-  MILLIS_PER_HOUR,
-  MILLIS_PER_MINUTE,
-  createDelay,
-  createEvent,
-  createGroup,
-  createMilestone,
-} from 'ontime-utils';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, createEvent } from 'ontime-utils';
 import { assertType } from 'vitest';
 
 import { makeOntimeEvent, makeOntimeGroup, makeOntimeMilestone, makeRundown } from '../__mocks__/rundown.mocks.js';
 import { parseRundown } from '../rundown.parser.js';
 import {
   calculateDayOffset,
-  cloneEntryData,
   deleteById,
   doesInvalidateMetadata,
   getIntegerAndFraction,
@@ -725,68 +715,3 @@ describe('eventDurationMatchGroupTarget()', () => {
     expect(result).toStrictEqual(null);
   });
 });
-
-describe('cloneEntryData()', () => {
-  const trigger: Trigger = {
-    id: 'trigger-1',
-    title: 'Go on air',
-    trigger: TimerLifeCycle.onStart,
-    automationId: 'automation-1',
-  };
-
-  // the real factories, so these are complete entries exactly as the rundown holds them
-  const entries: [string, OntimeEntry][] = [
-    ['event', createEvent({ custom: { sponsor: 'a value' }, triggers: [trigger] }, 'cue-1') as OntimeEvent],
-    ['group', createGroup({ id: 'group-1', entries: ['a', 'b'], custom: { sponsor: 'a value' } })],
-    ['milestone', createMilestone({ id: 'milestone-1', custom: { sponsor: 'a value' } })],
-    ['delay', createDelay({ id: 'delay-1', duration: 10 })],
-  ];
-
-  /**
-   * Fails if any nested object or array in the clone is the same reference as the source,
-   * so a field added later that needs a copy of its own is caught here without the clone
-   * having to enumerate fields.
-   */
-  function expectNoSharedReferences(clone: unknown, source: unknown, path: string) {
-    if (typeof source !== 'object' || source === null) return;
-    expect(clone, `${path} is shared with the source`).not.toBe(source);
-    const cloneRecord = clone as Record<string, unknown>;
-    const sourceRecord = source as Record<string, unknown>;
-    for (const key of Object.keys(sourceRecord)) {
-      expectNoSharedReferences(cloneRecord[key], sourceRecord[key], `${path}.${key}`);
-    }
-  }
-
-  /** the two halves of the structuredClone contract: same value, no shared references */
-  it.each(entries)('clones a %s to the same value structuredClone would produce', (_type, entry) => {
-    expect(cloneEntryData(entry)).toStrictEqual(structuredClone(entry));
-  });
-
-  it.each(entries)('shares no nested object or array with the source %s', (_type, entry) => {
-    expectNoSharedReferences(cloneEntryData(entry), entry, 'entry');
-  });
-
-  /**
-   * Regression: normalising an absent container to an empty one makes deepEqual report a
-   * change on every comparison, which would have the runtime re-broadcast and re-save the
-   * restore point on every tick. See PR #2178.
-   */
-  it.each([
-    ['event', makeOntimeEvent({ id: 'partial' })],
-    ['group', makeOntimeGroup({ id: 'partial', entries: undefined })],
-  ])('gives a partial %s exactly the keys structuredClone would, so it stays deep-equal', (_type, entry) => {
-    const clone = cloneEntryData(entry);
-    // asserting on keys, not values: `toBeUndefined()` cannot tell an absent key from an own
-    // key holding undefined, and it is key presence that decides the deepEqual below
-    expect(Object.keys(clone).sort()).toEqual(Object.keys(structuredClone(entry)).sort());
-    // this is the comparison runtime.service.ts uses to decide whether to re-broadcast an
-    // entry; if the clone gains a key, every tick looks like a change
-    expect(deepEqual(clone, entry)).toBe(true);
-  });
-
-  it('throws on an entry type it does not know how to clone', () => {
-    expect(() => cloneEntryData({ id: 'x', type: 'unknown' } as unknown as OntimeEvent)).toThrow(
-      'Unsupported entry type for cloning',
-    );
-  });
-});

apps/server/src/api-data/rundown/rundown.dao.ts

@@ -27,7 +27,6 @@ import {
   isPlayableEvent,
 } from 'ontime-types';
 import { addToRundown, createGroup, customFieldLabelToKey, getInsertAfterId, insertAtIndex } from 'ontime-utils';
-import type { DeepReadonly } from 'ts-essentials';
 
 import { getDataProvider } from '../../classes/data-provider/DataProvider.js';
 import { consoleError } from '../../utils/console.js';
@@ -35,7 +34,6 @@ import { ProcessedRundownMetadata, makeRundownMetadata } from './rundown.parser.
 import type { RundownMetadata } from './rundown.types.js';
 import {
   applyPatchToEntry,
-  cloneRundown,
   cloneSimpleRundownEntry,
   deleteById,
   doesInvalidateMetadata,
@@ -45,14 +43,9 @@ import {
 } from './rundown.utils.js';
 
 /**
- * The currently loaded rundown in cache.
- *
- * Reassigned - never mutated in place - when a different rundown is loaded: the persistence
- * layer stores this object by reference, so repurposing it for another rundown would rewrite
- * the previously loaded rundown's stored record. Mutating it in place while it represents the
- * same rundown (ie. from commit) is intended, and is what keeps the stored record current.
+ * The currently loaded rundown in cache
  */
-let cachedRundown: Rundown = {
+const cachedRundown: Rundown = {
   id: '',
   title: '',
   order: [],
@@ -86,16 +79,9 @@ export const getRundownMetadata = (): Readonly<RundownMetadata> => rundownMetada
 export const getProjectCustomFields = (): Readonly<CustomFields> => projectCustomFields;
 export const getEntryWithId = (entryId: EntryId): OntimeEntry | undefined => cachedRundown.entries[entryId];
 
-/**
- * @param R the type callers see for `rundown` - a plain, mutable `Rundown` when the
- * transaction was opened with `mutableRundown: true`, otherwise a `DeepReadonly<Rundown>`
- * so that accidentally mutating an entry (or an order array) on a non-mutable transaction
- * - which would silently corrupt the live cache without going through commit() - is a
- * compile-time error instead of a runtime bug.
- */
-type Transaction<R> = {
+type Transaction = {
   customFields: CustomFields;
-  rundown: R;
+  rundown: Rundown;
 
   commit: (shouldProcess?: boolean) => Promise<{
     rundown: Readonly<Rundown>;
@@ -116,17 +102,11 @@ type TransactionOptions = {
   rundownId?: string;
 };
 
-export function createTransaction(options: TransactionOptions & { mutableRundown: true }): Transaction<Rundown>;
-export function createTransaction(
-  options: TransactionOptions & { mutableRundown?: false },
-): Transaction<DeepReadonly<Rundown>>;
-export function createTransaction(
-  options: TransactionOptions,
-): Transaction<Rundown> | Transaction<DeepReadonly<Rundown>> {
+export function createTransaction(options: TransactionOptions): Transaction {
   const targetId = options.rundownId ?? cachedRundown.id;
   const isLoaded = targetId === cachedRundown.id;
   const sourceRundown: Rundown = isLoaded ? cachedRundown : (getDataProvider().getRundown(targetId) as Rundown);
-  const rundown = options.mutableRundown ? cloneRundown(sourceRundown) : sourceRundown;
+  const rundown = options.mutableRundown ? structuredClone(sourceRundown) : sourceRundown;
   const customFields = options.mutableCustomFields ? structuredClone(projectCustomFields) : projectCustomFields;
 
   /**
@@ -727,25 +707,21 @@ export const customFieldMutation = {
  * Expose function to add an initial rundown to the system
  */
 export function init(initialRundown: Readonly<Rundown>, initialCustomFields: Readonly<CustomFields>) {
-  const rundown = cloneRundown(initialRundown);
+  const rundown = structuredClone(initialRundown);
   const customFields = structuredClone(initialCustomFields);
   const processedData = processRundown(rundown, customFields, { mutate: true });
 
+  // update the cache values
+  cachedRundown.id = rundown.id;
+  cachedRundown.title = rundown.title;
   projectCustomFields = customFields;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
   const { previousEvent, latestEvent, previousEntry, entries, order, ...metadata } = processedData;
-
-  // a fresh object, so that the record already stored for a previously loaded rundown keeps
-  // pointing at that rundown's data - see the note on cachedRundown
-  cachedRundown = {
-    id: rundown.id,
-    title: rundown.title,
-    entries,
-    order,
-    flatOrder: metadata.flatEntryOrder,
-    revision: rundown.revision,
-  };
+  cachedRundown.entries = entries;
+  cachedRundown.order = order;
+  cachedRundown.flatOrder = metadata.flatEntryOrder;
+  cachedRundown.revision = rundown.revision;
   rundownMetadata = metadata;
 
   // defer writing to the database

apps/server/src/api-data/rundown/rundown.parser.ts

@@ -33,7 +33,7 @@ import {
 import { makeNewRundown } from '../../models/dataModel.js';
 import type { ErrorEmitter } from '../../utils/parserUtils.js';
 import { RundownMetadata } from './rundown.types.js';
-import { calculateDayOffset, cleanupCustomFields, cloneEntryData } from './rundown.utils.js';
+import { calculateDayOffset, cleanupCustomFields } from './rundown.utils.js';
 
 /**
  * Parse a rundowns object along with the project custom fields
@@ -234,7 +234,7 @@ export function makeRundownMetadata(customFields: CustomFields, options?: { muta
   };
 
   function process<T extends OntimeEntry>(entry: T, childOfGroup: EntryId | null): T {
-    return processEntry(rundownMeta, customFields, mutate ? entry : cloneEntryData(entry), childOfGroup);
+    return processEntry(rundownMeta, customFields, mutate ? entry : structuredClone(entry), childOfGroup);
   }
 
   function getMetadata(): ProcessedRundownMetadata {

apps/server/src/api-data/rundown/rundown.service.ts

@@ -39,7 +39,6 @@ import {
 import { parseRundown } from './rundown.parser.js';
 import type { RundownMetadata } from './rundown.types.js';
 import {
-  cloneRundown,
   generateEvent,
   getFirstInsertId,
   getIntegerAndFraction,
@@ -627,7 +626,7 @@ export async function editCustomField(
     // ... reassign references in the background rundowns
     for (const rundownId of Object.keys(projectRundowns)) {
       if (rundownId !== rundown.id) {
-        const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+        const backgroundRundown = structuredClone(projectRundowns[rundownId]);
         customFieldMutation.renameUsages(backgroundRundown, oldKey, newKey);
         await updateBackgroundRundown(rundownId, backgroundRundown);
       }
@@ -667,7 +666,7 @@ export async function deleteCustomField(key: CustomFieldKey, projectRundowns: Pr
   // remove references in the background rundowns
   for (const rundownId of Object.keys(projectRundowns)) {
     if (rundownId !== rundown.id) {
-      const backgroundRundown = cloneRundown(projectRundowns[rundownId]);
+      const backgroundRundown = structuredClone(projectRundowns[rundownId]);
       customFieldMutation.removeUsages(backgroundRundown, key);
       await updateBackgroundRundown(rundownId, backgroundRundown);
     }
@@ -816,23 +815,27 @@ export async function createNewRundown(title: string) {
  * @throws if the provided id does not exist
  */
 export async function renameRundown(id: string, title: string) {
-  const { rundown, commit } = createTransaction({ rundownId: id, mutableRundown: true });
+  const dataProvider = getDataProvider();
+  const rundown = dataProvider.getRundown(id);
 
-  if (rundown.title === title) {
-    return getDataProvider().getProjectRundowns();
+  await dataProvider.setRundown(id, { ...rundown, title });
+
+  /**
+   * If we are modifying the loaded rundown we re-init it
+   * This is likely over-kill but the simplest way to ensure state consistency
+   */
+  if (isCurrentRundown(id)) {
+    const rundown = dataProvider.getRundown(id);
+    const customField = dataProvider.getCustomFields();
+    // init rundown does its own refetch
+    await initRundown(rundown, customField);
+  } else {
+    setImmediate(() => {
+      sendRefetch(RefetchKey.ProjectRundowns);
+    });
   }
 
-  rundown.title = title;
-
-  // a title has no bearing on the schedule, there is nothing to process and no runtime to notify
-  const { rundownMetadata, revision } = await commit(false);
-
-  setImmediate(() => {
-    notifyChanges(id, rundownMetadata, revision, { external: true });
-    sendRefetch(RefetchKey.ProjectRundowns);
-  });
-
-  return getDataProvider().getProjectRundowns();
+  return dataProvider.getProjectRundowns();
 }
 
 /**
@@ -843,7 +846,7 @@ export async function duplicateExistingRundown(id: string) {
   const dataProvider = getDataProvider();
   const rundown = dataProvider.getRundown(id);
 
-  const duplicatedRundown: Rundown = cloneRundown(rundown);
+  const duplicatedRundown: Rundown = structuredClone(rundown);
   duplicatedRundown.id = generateId();
   duplicatedRundown.title = `Copy of ${rundown.title}`;
   duplicatedRundown.revision = 0;

apps/server/src/api-data/rundown/rundown.utils.ts

@@ -329,7 +329,7 @@ export function mergeRundownPreservingFields(
     const structure = isOntimeGroup(incomingEntry)
       ? { entries: incomingEntry.entries }
       : { parent: incomingEntry.parent };
-    entries[id] = cloneEntryData({ ...merged, ...structure });
+    entries[id] = structuredClone({ ...merged, ...structure });
   }
 
   return {
@@ -499,61 +499,6 @@ export function cloneSimpleRundownEntry(entry: OntimeEntry, newId: EntryId): Ont
   throw new Error(`Unsupported entry type for cloning: ${entry}`);
 }
 
-/**
- * Fast, shape-aware clone of a single entry, preserving its identity (id, revision, etc).
- * Drop-in replacement for `structuredClone(entry)`
- */
-export function cloneEntryData<T extends OntimeEntry>(entry: T): T {
-  switch (entry.type) {
-    case SupportedEntry.Event: {
-      const clone: OntimeEvent = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.triggers) clone.triggers = clone.triggers.map((trigger) => ({ ...trigger }));
-      return clone as T;
-    }
-    case SupportedEntry.Group: {
-      const clone: OntimeGroup = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      if (clone.entries) clone.entries = clone.entries.slice();
-      return clone as T;
-    }
-    case SupportedEntry.Milestone: {
-      const clone: OntimeMilestone = { ...entry };
-      if (clone.custom) clone.custom = { ...clone.custom };
-      return clone as T;
-    }
-    case SupportedEntry.Delay:
-      return { ...entry } as T;
-    default: {
-      // exhaustiveness guard: a new member of `SupportedEntry` is named in the error here
-      const unhandled: never = entry;
-      throw new Error(`Unsupported entry type for cloning: ${(unhandled as OntimeEntry).type}`);
-    }
-  }
-}
-
-/**
- * Fast, shape-aware clone of a whole rundown.
- * Drop-in replacement for `structuredClone(rundown)`: every entry (and its nested
- * `custom` / `triggers` / `entries` containers) gets its own copy, so callers can mutate
- * the result freely without touching the source - same contract as structuredClone,
- * at a fraction of the cost since we skip the generic serialization algorithm.
- */
-export function cloneRundown(rundown: Readonly<Rundown>): Rundown {
-  const entries: RundownEntries = {};
-  for (const id in rundown.entries) {
-    entries[id] = cloneEntryData(rundown.entries[id]);
-  }
-  return {
-    id: rundown.id,
-    title: rundown.title,
-    revision: rundown.revision,
-    order: rundown.order.slice(),
-    flatOrder: rundown.flatOrder.slice(),
-    entries,
-  };
-}
-
 /**
  * Utility for calculating if the current events should have a day offset
  * @param current the current event under test

apps/server/src/api-data/sheets/sheets.service.ts

@@ -464,8 +464,9 @@ export async function upload(sheetId: string, options: ImportMap) {
     sheetOrder.forEach((entryId, index) => {
       const isGroupEnd = entryId.startsWith('group-end-');
       const id = isGroupEnd ? entryId.split('group-end-')[1] : entryId;
-      // cellRequestFromEvent only reads the entry to build a cell request, no clone is needed
-      const entry = isGroupEnd ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup) : rundown.entries[id];
+      const entry = isGroupEnd
+        ? ({ id: entryId, type: SupportedEntry.Group } as OntimeGroup)
+        : structuredClone(rundown.entries[id]);
       updateRundown.push(cellRequestFromEvent(entry, index, worksheetId, sheetMetadata));
     });
   } catch (e) {