cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 12:53:32 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(timer): allow multiline secondary text

Browse Source
This commit is contained in:
Carlos Valente
2025-11-21 16:48:32 +01:00
committed by Carlos Valente
parent 48f2511764
commit 18e6f0d7c4
5 changed files with 22 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/editor/pip-timer/PipTimer.scss
+5 -5
View File
@@ -37,7 +37,7 @@
.timer { .timer {
opacity: 1; opacity: 1;
font-family: var(--timer-font, $viewer-font-family); font-family: $viewer-font-family;
color: var(--timer-colour, $ui-white); color: var(--timer-colour, $ui-white);
line-height: 0.9em; line-height: 0.9em;
text-align: center; text-align: center;
@@ -72,17 +72,17 @@
.secondary { .secondary {
white-space: nowrap; white-space: nowrap;
overflow: hidden; max-height: 100%;
text-overflow: ellipsis; height: auto;
margin-top: 0.125em; margin-top: 0.125em;
padding-block: 0.125em; padding-block: 0.125em;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: var(--external-color-override, $external-color); color: $external-color;
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 1em; line-height: 1;
transition-property: opacity, height; transition-property: opacity, height;
transition-duration: $viewer-transition-time; transition-duration: $viewer-transition-time;
border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent); border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent);
apps/client/src/views/editor/pip-timer/PipTimer.tsx
+5 -6
View File
@@ -63,7 +63,7 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
// gather presentation styles // gather presentation styles
const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger); const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent); const timerFontSize = getEstimatedFontSize(display, secondaryContent);
const userStyles = { const userStyles = {
...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }), ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
}; };
@@ -84,11 +84,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
> >
{display} {display}
</div> </div>
<div <div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
className={cx(['secondary', !secondaryContent && 'secondary--hidden'])} <FitText mode='multi' min={12} max={256}>
style={{ fontSize: `${externalFontSize}vw` }} {secondaryContent}
> </FitText>
{secondaryContent}
</div> </div>
</div> </div>
apps/client/src/views/timer/Timer.scss
+3 -3
View File
@@ -135,8 +135,8 @@
.secondary { .secondary {
white-space: nowrap; white-space: nowrap;
overflow: hidden; max-height: 100%;
text-overflow: ellipsis; height: auto;
margin-top: 0.125em; margin-top: 0.125em;
padding-block: 0.125em; padding-block: 0.125em;
@@ -145,7 +145,7 @@
text-align: center; text-align: center;
color: var(--external-color-override, $external-color); color: var(--external-color-override, $external-color);
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 1em; line-height: 1;
transition-property: opacity, height; transition-property: opacity, height;
transition-duration: $viewer-transition-time; transition-duration: $viewer-transition-time;
border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent);
apps/client/src/views/timer/Timer.tsx
+5 -6
View File
@@ -132,7 +132,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
// gather presentation styles // gather presentation styles
const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger); const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent); const timerFontSize = getEstimatedFontSize(display, secondaryContent);
const userStyles = { const userStyles = {
...(keyColour && { '--timer-bg': keyColour }), ...(keyColour && { '--timer-bg': keyColour }),
...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }), ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
@@ -185,11 +185,10 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
{display} {display}
</div> </div>
)} )}
<div <div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
className={cx(['secondary', !secondaryContent && 'secondary--hidden'])} <FitText mode='multi' min={64} max={256}>
style={{ fontSize: `${externalFontSize}vw` }} {secondaryContent}
> </FitText>
{secondaryContent}
</div> </div>
</div> </div>
apps/client/src/views/timer/timer.utils.ts
+4 -11
View File
@@ -50,7 +50,7 @@ const fontSizeMap: { [key: number]: number } = {
* Finds a font size that fits the timer in the screen * Finds a font size that fits the timer in the screen
* Unfortunately hand tweaked * Unfortunately hand tweaked
*/ */
export function getEstimatedFontSize(stageTimer: string, secondaryContent?: string) { export function getEstimatedFontSize(stageTimer: string, secondaryContent?: string): number {
const stageTimerCharacters = stageTimer.length; const stageTimerCharacters = stageTimer.length;
let timerFontSize = (100 / (stageTimerCharacters - 1)) * 1.25; let timerFontSize = (100 / (stageTimerCharacters - 1)) * 1.25;
@@ -58,20 +58,13 @@ export function getEstimatedFontSize(stageTimer: string, secondaryContent?: stri
timerFontSize = fontSizeMap[stageTimerCharacters]; timerFontSize = fontSizeMap[stageTimerCharacters];
} }
let externalFontSize = timerFontSize * 0.325; // we need to shrink the timer if the external is going to be there
// this number has been tweaked to fit in a landscape mobile screen
if (secondaryContent) { if (secondaryContent) {
// we need to shrink the timer if the external is going to be there
// this number has been tweaked to fit in a landscape mobile screen
timerFontSize *= 0.6; timerFontSize *= 0.6;
if (secondaryContent.length > 25) {
externalFontSize = (100 / (secondaryContent.length - 1)) * 1.8;
}
} }
return { return timerFontSize;
timerFontSize,
externalFontSize,
};
} }
/** /**