Add option to display the full time (HH:mm:ss) in the timer view (#988)

* Add option to display the full time (HH:mm:ss) in the timer view

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

apps/client/src/common/components/view-params-editor/constants.ts

@@ -30,6 +30,14 @@ const hideTimerSeconds: ParamField = {
   defaultValue: false,
 };
 
+const showLeadingZeros: ParamField = {
+  id: 'showLeadingZeros',
+  title: 'Show leading zeros in timer',
+  description: 'Whether to show leading zeros in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};
+
 export const getClockOptions = (timeFormat: string): ParamField[] => [
   getTimeOption(timeFormat),
   {
@@ -107,6 +115,7 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
   return [
     getTimeOption(timeFormat),
     hideTimerSeconds,
+    showLeadingZeros,
     {
       id: 'hideClock',
       title: 'Hide Time Now',

apps/client/src/features/viewers/common/viewUtils.ts

@@ -84,7 +84,9 @@ export function getFormattedTimer(
   }
 
   let display = millisToString(timeToParse);
-  display = removeLeadingZero(display);
+  if (options.removeLeadingZero) {
+    display = removeLeadingZero(display);
+  }
 
   if (options.removeSeconds) {
     display = formatDisplayWithMinutes(display, localisedMinutes);

apps/client/src/features/viewers/timer/Timer.tsx

@@ -76,6 +76,7 @@ export default function Timer(props: TimerProps) {
     hideMessage: false,
     hideTimerSeconds: false,
     hideClockSeconds: false,
+    removeLeadingZeros: true,
   };
 
   const hideClock = searchParams.get('hideClock');
@@ -97,6 +98,9 @@ export default function Timer(props: TimerProps) {
   const hideTimerSeconds = searchParams.get('hideTimerSeconds');
   userOptions.hideTimerSeconds = isStringBoolean(hideTimerSeconds);
 
+  const showLeadingZeros = searchParams.get('showLeadingZeros');
+  userOptions.removeLeadingZeros = !isStringBoolean(showLeadingZeros);
+
   const secondarySource = searchParams.get('secondary-src');
   const secondaryTextNow = getPropertyValue(eventNow, secondarySource);
   const secondaryTextNext = getPropertyValue(eventNext, secondarySource);
@@ -126,7 +130,7 @@ export default function Timer(props: TimerProps) {
   const stageTimer = getTimerByType(viewSettings.freezeEnd, time);
   const display = getFormattedTimer(stageTimer, time.timerType, getLocalizedString('common.minutes'), {
     removeSeconds: userOptions.hideTimerSeconds,
-    removeLeadingZero: true,
+    removeLeadingZero: userOptions.removeLeadingZeros,
   });
 
   const stageTimerCharacters = display.replace('/:/g', '').length;