Add translations for views (#325) (#328)

* Add translations for views (#325)

---------

Co-authored-by: Kevin <60135953+kev-ac@users.noreply.github.com>

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -9,6 +9,7 @@ import { TimeManagerType } from '../../../common/models/TimeManager.type';
 import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
 import getDelayTo from '../../../common/utils/getDelayTo';
 import { formatTime } from '../../../common/utils/time';
+import { useTranslation } from '../../../translation/TranslationProvider';
 
 import { fetchTimerData, TimerMessage } from './countdown.helpers';
 import CountdownSelect from './CountdownSelect';
@@ -37,6 +38,7 @@ export default function Countdown(props: CountdownProps) {
   const { isMirrored, backstageEvents, time, selectedId, viewSettings } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
+  const { getLocalizedString } = useTranslation();
 
   const [follow, setFollow] = useState<OntimeEvent | null>(null);
   const [runningTimer, setRunningTimer] = useState(0);
@@ -112,11 +114,11 @@ export default function Countdown(props: CountdownProps) {
       ) : (
         <div className='countdown-container' data-testid='countdown-event'>
           <div className='clock-container'>
-            <div className='label'>Time Now</div>
+            <div className='label'>{getLocalizedString('common.time_now')}</div>
             <div className='time'>{clock}</div>
           </div>
 
-          <div className='status'>{runningMessage}</div>
+          <div className='status'>{getLocalizedString(`countdown.${runningMessage}`)}</div>
 
           <span className={`timer ${standby ? 'timer--paused' : ''} ${isRunningFinished ? 'timer--finished' : ''}`}>
             {formattedTimer}
@@ -125,11 +127,11 @@ export default function Countdown(props: CountdownProps) {
 
           <div className='timer-group'>
             <div className='aux-timers'>
-              <div className='aux-timers__label'>Start Time</div>
+              <div className='aux-timers__label'>{getLocalizedString('common.start_time')}</div>
               <span className={`aux-timers__value ${delayedTimerStyles}`}>{startTime}</span>
             </div>
             <div className='aux-timers'>
-              <div className='aux-timers__label'>End Time</div>
+              <div className='aux-timers__label'>{getLocalizedString('common.end_time')}</div>
               <span className={`aux-timers__value ${delayedTimerStyles}`}>{endTime}</span>
             </div>
           </div>

apps/client/src/features/viewers/countdown/CountdownSelect.tsx

@@ -3,42 +3,43 @@ import { OntimeEvent, OntimeRundownEntry, SupportedEvent } from 'ontime-types';
 
 import Empty from '../../../common/components/state/Empty';
 import { formatTime } from '../../../common/utils/time';
+import { useTranslation } from '../../../translation/TranslationProvider';
 
 import { sanitiseTitle } from './countdown.helpers';
 
 import './Countdown.scss';
 
-
 interface CountdownSelectProps {
   events: OntimeRundownEntry[];
 }
 
 export default function CountdownSelect(props: CountdownSelectProps) {
   const { events } = props;
-  const filteredEvents = events.filter((event: OntimeRundownEntry) => event.type === SupportedEvent.Event) as OntimeEvent[];
+  const { getLocalizedString } = useTranslation();
+
+  const filteredEvents = events.filter(
+    (event: OntimeRundownEntry) => event.type === SupportedEvent.Event,
+  ) as OntimeEvent[];
 
   return (
     <div className='event-select' data-testid='countdown-select'>
-      <span className='event-select__title'>Select an event to follow</span>
+      <span className='event-select__title'>{getLocalizedString('countdown.select_event')}</span>
       <ul className='event-select__events'>
         {!events.length ? (
           <Empty text='No events in database' />
         ) : (
           filteredEvents.map((event: OntimeEvent, counter: number) => {
-              const index = counter + 1;
-              const title = sanitiseTitle(event.title);
-              const start = formatTime(event.timeStart, { format: 'hh:mm' });
-              const end = formatTime(event.timeEnd, { format: 'hh:mm' });
+            const index = counter + 1;
+            const title = sanitiseTitle(event.title);
+            const start = formatTime(event.timeStart, { format: 'hh:mm' });
+            const end = formatTime(event.timeEnd, { format: 'hh:mm' });
 
-              return (
-                <li key={event.id}>
-                  <Link to={`/countdown?eventid=${event.id}`}>
-                    {`${index}. ${start} → ${end} | ${title}`}
-                  </Link>
-                </li>
-              );
-            },
-          )
+            return (
+              <li key={event.id}>
+                <Link to={`/countdown?eventid=${event.id}`}>{`${index}. ${start} → ${end} | ${title}`}</Link>
+              </li>
+            );
+          })
         )}
       </ul>
     </div>

apps/client/src/features/viewers/countdown/countdown.helpers.ts

@@ -3,23 +3,26 @@ import { OntimeEvent, Playback } from 'ontime-types';
 import { TimeManagerType } from '../../../common/models/TimeManager.type';
 
 export enum TimerMessage {
-  toStart = 'Time to start',
-  waiting = 'Waiting for event start',
-  running = 'Event running',
-  ended = 'Event ended at',
+  toStart = 'to_start',
+  waiting = 'waiting',
+  running = 'running',
+  ended = 'ended',
   unhandled = '',
 }
 
 /**
  * Parses string as a title
  */
-export const sanitiseTitle = (title: string | null) =>
-  title ? title : '{no title}';
+export const sanitiseTitle = (title: string | null) => (title ? title : '{no title}');
 
 /**
  * Returns a parsed timer and relevant status message
  */
-export const fetchTimerData = (time: TimeManagerType, follow: OntimeEvent, selectedId: string): { message: TimerMessage, timer: number } => {
+export const fetchTimerData = (
+  time: TimeManagerType,
+  follow: OntimeEvent,
+  selectedId: string,
+): { message: TimerMessage; timer: number } => {
   let message;
   let timer;
 
@@ -27,17 +30,14 @@ export const fetchTimerData = (time: TimeManagerType, follow: OntimeEvent, selec
     // check that is not running
     message = time.playback === Playback.Pause ? TimerMessage.waiting : TimerMessage.running;
     timer = time.current ?? 0;
-
   } else if (time.clock < follow.timeStart) {
     // if it hasnt started, we count to start
     message = TimerMessage.toStart;
     timer = follow.timeStart - time.clock;
-
   } else if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
     // if it has started, we show running timer
     message = TimerMessage.waiting;
     timer = time.current ?? 0;
-
   } else {
     // running timer timer is not the one we are following
 
@@ -48,18 +48,15 @@ export const fetchTimerData = (time: TimeManagerType, follow: OntimeEvent, selec
         // if it hasnt started, we count to start
         message = TimerMessage.toStart;
         timer = follow.timeStart - time.clock;
-
       } else if (follow.timeStart <= time.clock) {
         // if it has started, we show running timer
         message = TimerMessage.waiting;
         timer = time.current ?? 0;
-
       } else {
         // if it has ended, we show how long ago
         message = TimerMessage.ended;
         timer = follow.timeEnd;
       }
-
     } else {
       // if it has ended, we show how long ago
       message = TimerMessage.ended;