mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 05:13:32 +00:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user