From 95848716f5e7ace42785ea29417b01d949cbe193 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 19 Aug 2026 19:29:43 +0000 Subject: [PATCH] fix(teleprompter): keep the transport upright, cap the size on small screens Two things a look at the view on real screen sizes turned up. On a mirrored rig the transport was mirrored with the script: reversed icons, reversed order, the speed readout backwards. The flip exists to pre-compensate for a beam splitter, so it belongs to the script; these buttons are read off the screen itself by whoever is driving. The navigation menu and the help dialog were already outside the flip, so the transport was the only piece of chrome that turned over. Applying the same flip a second time cancels it. The font size is now a ceiling rather than a fixed value. It is carried in the link, so a prompter set up on a stage screen and opened on a phone was showing three words to a line; it now caps against the viewport, which only takes effect below about 650px. The cap is applied once, where the size is derived, so the cue arrow and the reading line still measure a single line. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf --- .../src/views/teleprompter/Teleprompter.scss | 25 ++++++++++++++++--- .../src/views/teleprompter/Teleprompter.tsx | 2 +- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/apps/client/src/views/teleprompter/Teleprompter.scss b/apps/client/src/views/teleprompter/Teleprompter.scss index a3a24744a..3c589c5a3 100644 --- a/apps/client/src/views/teleprompter/Teleprompter.scss +++ b/apps/client/src/views/teleprompter/Teleprompter.scss @@ -1,15 +1,25 @@ @use '@/theme/viewerDefs' as *; /** - * The --tp-* custom properties are all set by Teleprompter.tsx from the parsed + * The --tp-* custom properties come from Teleprompter.tsx, set from the parsed * view options, so they carry no fallbacks here. A fallback would be a second - * copy of a default that nothing reaches and nothing keeps in step. + * copy of a default that nothing reaches and nothing keeps in step. The one + * exception is --tp-font-size, derived below from the size the view was given. */ .teleprompter { --tp-flip-x: 1; --tp-flip-y: 1; + /** + * The configured size is a ceiling rather than a fixed value. A prompter set + * up on a stage screen keeps its size in the link it is shared as, and the + * same link opened on a phone would otherwise leave three words to a line. + * The cap only bites below about 650px of viewport, so a rig set up on + * anything laptop sized or larger reads exactly what it was given. + */ + --tp-font-size: min(var(--tp-configured-font-size), 8vw); + position: relative; height: 100dvh; width: 100%; @@ -183,7 +193,16 @@ position: absolute; bottom: min(2vh, 16px); left: 50%; - transform: translateX(-50%); + + /** + * Applying the view's own flip a second time cancels it, which keeps the + * transport the right way round on a mirrored rig. The flip exists to + * pre-compensate for a beam splitter, so it belongs to the script; the + * operator reads these buttons off the screen itself, and mirrored icons in + * a mirrored order are unusable. The navigation menu and the help dialog are + * already outside the flip for the same reason, this is the odd one in. + */ + transform: translateX(-50%) scale(var(--tp-flip-x), var(--tp-flip-y)); display: flex; align-items: center; diff --git a/apps/client/src/views/teleprompter/Teleprompter.tsx b/apps/client/src/views/teleprompter/Teleprompter.tsx index 19f43ef5e..a4fd98494 100644 --- a/apps/client/src/views/teleprompter/Teleprompter.tsx +++ b/apps/client/src/views/teleprompter/Teleprompter.tsx @@ -142,7 +142,7 @@ function Teleprompter({ rundown, rundownMetadata, customFields }: TeleprompterDa const effectiveFlip = composeFlip(live.flipH, live.flipV, isMirrored); const viewStyles = { - '--tp-font-size': `${live.fontSize}px`, + '--tp-configured-font-size': `${live.fontSize}px`, '--tp-line-height': options.lineHeight, '--tp-text-width': `${options.textWidth}%`, // unitless, so the stylesheet can scale it by 1% against the view height for