refactor(timer): allow multiline secondary text

apps/client/src/views/editor/pip-timer/PipTimer.scss

@@ -37,7 +37,7 @@
 
     .timer {
       opacity: 1;
-      font-family: var(--timer-font, $viewer-font-family);
+      font-family: $viewer-font-family;
       color: var(--timer-colour, $ui-white);
       line-height: 0.9em;
       text-align: center;
@@ -72,17 +72,17 @@
 
   .secondary {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    max-height: 100%;
+    height: auto;
 
     margin-top: 0.125em;
     padding-block: 0.125em;
 
     font-weight: 600;
     text-align: center;
-    color: var(--external-color-override, $external-color);
+    color: $external-color;
     letter-spacing: 0.5px;
-    line-height: 1em;
+    line-height: 1;
     transition-property: opacity, height;
     transition-duration: $viewer-transition-time;
     border-top: 1px solid color-mix(in srgb, $external-color 10%, transparent);

apps/client/src/views/editor/pip-timer/PipTimer.tsx

@@ -63,7 +63,7 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, undefined, showWarning, showDanger);
-  const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
+  const timerFontSize = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
   };
@@ -84,11 +84,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
         >
           {display}
         </div>
-        <div
-          className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}
-          style={{ fontSize: `${externalFontSize}vw` }}
-        >
-          {secondaryContent}
+        <div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
+          <FitText mode='multi' min={12} max={256}>
+            {secondaryContent}
+          </FitText>
         </div>
       </div>
 

apps/client/src/views/timer/Timer.scss

@@ -135,8 +135,8 @@
 
   .secondary {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    max-height: 100%;
+    height: auto;
 
     margin-top: 0.125em;
     padding-block: 0.125em;
@@ -145,7 +145,7 @@
     text-align: center;
     color: var(--external-color-override, $external-color);
     letter-spacing: 0.5px;
-    line-height: 1em;
+    line-height: 1;
     transition-property: opacity, height;
     transition-duration: $viewer-transition-time;
     border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent);

apps/client/src/views/timer/Timer.tsx

@@ -132,7 +132,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
 
   // gather presentation styles
   const resolvedTimerColour = getTimerColour(viewSettings, timerColour, showWarning, showDanger);
-  const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
+  const timerFontSize = getEstimatedFontSize(display, secondaryContent);
   const userStyles = {
     ...(keyColour && { '--timer-bg': keyColour }),
     ...(resolvedTimerColour && { '--timer-colour': resolvedTimerColour }),
@@ -185,11 +185,10 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
             {display}
           </div>
         )}
-        <div
-          className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}
-          style={{ fontSize: `${externalFontSize}vw` }}
-        >
-          {secondaryContent}
+        <div className={cx(['secondary', !secondaryContent && 'secondary--hidden'])}>
+          <FitText mode='multi' min={64} max={256}>
+            {secondaryContent}
+          </FitText>
         </div>
       </div>
 

apps/client/src/views/timer/timer.utils.ts

@@ -50,7 +50,7 @@ const fontSizeMap: { [key: number]: number } = {
  * Finds a font size that fits the timer in the screen
  * Unfortunately hand tweaked
  */
-export function getEstimatedFontSize(stageTimer: string, secondaryContent?: string) {
+export function getEstimatedFontSize(stageTimer: string, secondaryContent?: string): number {
   const stageTimerCharacters = stageTimer.length;
   let timerFontSize = (100 / (stageTimerCharacters - 1)) * 1.25;
 
@@ -58,20 +58,13 @@ export function getEstimatedFontSize(stageTimer: string, secondaryContent?: stri
     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) {
-    // 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;
-    if (secondaryContent.length > 25) {
-      externalFontSize = (100 / (secondaryContent.length - 1)) * 1.8;
-    }
   }
 
-  return {
-    timerFontSize,
-    externalFontSize,
-  };
+  return timerFontSize;
 }
 
 /**