refactor(teleprompter): drop the font and colour options

These were justified as matching what the other views offer, which was wrong.
Only the timer declares a font or a key colour, and no view at all declares a
text colour, so this was the most customisable view in Ontime rather than one
following a convention.

On their own merits none of the three holds up. A prompter wants the highest
contrast it can get, which is what it now always renders: white on black in the
default font. Key colour is a chroma key idea that means nothing on a screen
read by a person standing in front of it.

The escape hatch already exists and is better than two colour pickers. This
view is wrapped in ViewLoader, which injects the project's CSS override
stylesheet, so anyone needing another palette, an inverted display for bright
conditions, or a particular typeface can style all of it.

Checked that a saved preset naming these params is simply ignored rather than
breaking, since presets outlive the options that made them.

Fourteen options remain.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf
This commit is contained in:
Claude
2026-08-16 09:31:00 +00:00
parent b42b10829a
commit 1f617bed56
5 changed files with 9 additions and 52 deletions
@@ -16,8 +16,13 @@
overflow: hidden;
font-family: var(--font-family-override, $viewer-font-family);
background: var(--background-color-override, var(--tp-background));
color: var(--color-override, var(--tp-color));
/**
* White on black is the prompter default and there is no option to change it.
* Anyone needing another palette has the project's CSS override stylesheet,
* which ViewLoader injects into this view and which can restyle anything.
*/
background: var(--background-color-override, #000000);
color: var(--color-override, #ffffff);
/**
* The flip is applied to the whole view rather than to the text alone.
@@ -120,9 +120,6 @@ function Teleprompter({ rundown, rundownMetadata, customFields }: TeleprompterDa
// the overlays and by 1dvh for the content padding. Percentage padding would
// resolve against width and put the first line nowhere near the reading line
'--tp-reading-line': options.readingLinePos,
'--tp-background': options.keyColour,
'--tp-color': options.textColour,
...(options.font ? { '--font-family-override': options.font } : {}),
} as CSSProperties;
return (
@@ -67,12 +67,6 @@ describe('getOptionsFromParams()', () => {
expect(getOptionsFromParams(new URLSearchParams('readingLine=banana')).readingLine).toBe('line');
});
test('adds the hash back to colour params', () => {
const options = getOptionsFromParams(new URLSearchParams('keyColour=112233&textColour=ffee00'));
expect(options.keyColour).toBe('#112233');
expect(options.textColour).toBe('#ffee00');
});
test('preset values take precedence over the search params', () => {
const options = getOptionsFromParams(
new URLSearchParams('speed=10&script=custom-a'),
@@ -100,8 +94,7 @@ describe('getTeleprompterOptions()', () => {
for (const field of declared) {
if (!('defaultValue' in field) || field.defaultValue === undefined) continue;
// colours are declared bare and parsed with the hash added back
const expected = field.type === 'colour' ? `#${field.defaultValue}` : field.defaultValue;
const expected = field.defaultValue;
expect({ id: field.id, value: parsedByParamId[field.id] }).toEqual({ id: field.id, value: expected });
}
});
@@ -6,7 +6,7 @@ import { OptionTitle } from '../../common/components/view-params-editor/constant
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, makeColourString } from '../common/viewUtils';
import { isStringBoolean } from '../common/viewUtils';
import { clampSpeed, DEFAULT_SPEED, MAX_SPEED, MIN_SPEED } from './teleprompter.scroll';
import type { HeadingSource, ReadingLineVariant, TeleprompterOptions } from './teleprompter.types';
@@ -48,8 +48,6 @@ const defaults = {
dimPast: true,
flipH: false,
flipV: false,
keyColour: '000000',
textColour: 'ffffff',
} satisfies Partial<Record<string, unknown>>;
/** ranges for the numeric options, applied when parsing */
@@ -193,27 +191,6 @@ export const getTeleprompterOptions = (customFields: CustomFields): ViewOption[]
type: 'boolean',
defaultValue: defaults.flipV,
},
{
id: 'font',
title: 'Font',
description: 'Font family, will use the fonts available in the system',
type: 'string',
placeholder: 'Open Sans (default)',
},
{
id: 'keyColour',
title: 'Key Colour',
description: 'Background or key colour for entire view. Default: #000000',
type: 'colour',
defaultValue: defaults.keyColour,
},
{
id: 'textColour',
title: 'Text Colour',
description: 'Colour of the script text. Default: #ffffff',
type: 'colour',
defaultValue: defaults.textColour,
},
],
},
];
@@ -234,14 +211,6 @@ function toBoolean(value: string | null, fallback: boolean): boolean {
return value === null ? fallback : isStringBoolean(value);
}
/**
* Colours are always defaulted here, so unlike the shared helper this cannot
* come back empty and the view needs no fallback of its own.
*/
function toColour(value: string | null, fallback: string): string {
return makeColourString(value ?? fallback) ?? fallback;
}
function toEnum<T extends string>(value: string | null, allowed: readonly T[], fallback: string): T {
return allowed.includes(value as T) ? (value as T) : (fallback as T);
}
@@ -275,10 +244,6 @@ export function getOptionsFromParams(
readingLinePos: toNumber(getValue('readingLinePos'), bounds.readingLinePos, defaults.readingLinePos),
flipH: toBoolean(getValue('flipH'), defaults.flipH),
flipV: toBoolean(getValue('flipV'), defaults.flipV),
font: getValue('font') ?? undefined,
keyColour: toColour(getValue('keyColour'), defaults.keyColour),
textColour: toColour(getValue('textColour'), defaults.textColour),
};
}
@@ -36,9 +36,6 @@ export type TeleprompterOptions = {
fontSize: number;
lineHeight: number;
textWidth: number;
font?: string;
keyColour: string;
textColour: string;
dimPast: boolean;
readingLine: ReadingLineVariant;
readingLinePos: number;