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