Timers: admin "Timer font" option with a monospace choice
A new Display-group select (Default / Monospace) sets the font for the timer and LTC digits. Monospace keeps the numbers from shifting sideways as they change — easier to read on a fast-moving countdown or timecode. Flows through server state → client applies a `tm-mono` class and re-fits the digit sizing; both timer and LTC values (.tm-time) honor it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
1d46657e06
commit
5fe39539fc
@@ -393,6 +393,14 @@ export default function create({ root, moduleApi }) {
|
||||
rebuildMenu();
|
||||
updateLtcAnchor();
|
||||
|
||||
// Admin-chosen digit font. A font swap changes glyph metrics, so re-fit
|
||||
// the digit sizing when it actually changes.
|
||||
const mono = state?.timerFont === 'monospace';
|
||||
if (mono !== wrap.classList.contains('tm-mono')) {
|
||||
wrap.classList.toggle('tm-mono', mono);
|
||||
fit();
|
||||
}
|
||||
|
||||
let hint = '';
|
||||
if (state && !state.enabled && !state.ltc?.supported) {
|
||||
hint = 'No ProPresenter connection — set the host and port in Admin.';
|
||||
|
||||
@@ -42,6 +42,16 @@
|
||||
"group": "LTC Timecode",
|
||||
"showWhen": "ltcEnabled",
|
||||
"default": 1
|
||||
},
|
||||
"timerFont": {
|
||||
"type": "select",
|
||||
"label": "Timer font",
|
||||
"group": "Display",
|
||||
"default": "default",
|
||||
"options": [
|
||||
{ "value": "default", "label": "Default (system)" },
|
||||
{ "value": "monospace", "label": "Monospace — steadier changing digits" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,10 +57,11 @@ const { createLtcListener } = require('./ltc-listener');
|
||||
/** Set by init(), read by the routes — both are rebuilt together on remount. */
|
||||
let current = null;
|
||||
|
||||
function clearedState(enabled, ltcEnabled = false) {
|
||||
function clearedState(enabled, ltcEnabled = false, timerFont = 'default') {
|
||||
return {
|
||||
enabled,
|
||||
ltcEnabled,
|
||||
timerFont,
|
||||
reachable: false,
|
||||
lastError: '',
|
||||
timers: [],
|
||||
@@ -86,8 +87,9 @@ module.exports = {
|
||||
const ltcEnabled = Boolean(config.ltcEnabled);
|
||||
const ltcDevice = String(config.ltcDevice || '');
|
||||
const ltcChannel = Math.max(1, Math.trunc(Number(config.ltcChannel)) || 1);
|
||||
const timerFont = config.timerFont === 'monospace' ? 'monospace' : 'default';
|
||||
|
||||
let latest = clearedState(enabled, ltcEnabled);
|
||||
let latest = clearedState(enabled, ltcEnabled, timerFont);
|
||||
let lastFrame = '';
|
||||
let stopped = false;
|
||||
let pollTimer = null;
|
||||
@@ -207,6 +209,7 @@ module.exports = {
|
||||
latest = {
|
||||
enabled,
|
||||
ltcEnabled,
|
||||
timerFont,
|
||||
reachable: latest.reachable,
|
||||
lastError: latest.lastError,
|
||||
timers: latest.timers,
|
||||
|
||||
@@ -113,6 +113,13 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Admin "Timer font: Monospace" — steadier digits as the numbers change.
|
||||
Applies to timer and LTC values alike (both are .tm-time). */
|
||||
[data-module="propresenter-timers"] .tm-mono .tm-time {
|
||||
font-family: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", "Consolas", monospace;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-module="propresenter-timers"] .tm-state {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user