From 1f617bed56418d36eac55ca7381b2541236c8d28 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 16 Aug 2026 09:31:00 +0000 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf --- .../src/views/teleprompter/Teleprompter.scss | 9 ++++- .../src/views/teleprompter/Teleprompter.tsx | 3 -- .../__tests__/teleprompter.options.test.ts | 9 +---- .../teleprompter/teleprompter.options.ts | 37 +------------------ .../views/teleprompter/teleprompter.types.ts | 3 -- 5 files changed, 9 insertions(+), 52 deletions(-) diff --git a/apps/client/src/views/teleprompter/Teleprompter.scss b/apps/client/src/views/teleprompter/Teleprompter.scss index e0f81b222..eb44f09f2 100644 --- a/apps/client/src/views/teleprompter/Teleprompter.scss +++ b/apps/client/src/views/teleprompter/Teleprompter.scss @@ -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. diff --git a/apps/client/src/views/teleprompter/Teleprompter.tsx b/apps/client/src/views/teleprompter/Teleprompter.tsx index bdb46d759..7e4d537d2 100644 --- a/apps/client/src/views/teleprompter/Teleprompter.tsx +++ b/apps/client/src/views/teleprompter/Teleprompter.tsx @@ -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 ( diff --git a/apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts b/apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts index de549fe5b..3b31374fd 100644 --- a/apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts +++ b/apps/client/src/views/teleprompter/__tests__/teleprompter.options.test.ts @@ -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 }); } }); diff --git a/apps/client/src/views/teleprompter/teleprompter.options.ts b/apps/client/src/views/teleprompter/teleprompter.options.ts index 39af31329..8d9c86ebb 100644 --- a/apps/client/src/views/teleprompter/teleprompter.options.ts +++ b/apps/client/src/views/teleprompter/teleprompter.options.ts @@ -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>; /** 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(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), }; } diff --git a/apps/client/src/views/teleprompter/teleprompter.types.ts b/apps/client/src/views/teleprompter/teleprompter.types.ts index 08b9cd056..72a9bf725 100644 --- a/apps/client/src/views/teleprompter/teleprompter.types.ts +++ b/apps/client/src/views/teleprompter/teleprompter.types.ts @@ -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;