Upload corporate logo (#1314)

* feat: upload logo to project data

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

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

@@ -194,4 +194,12 @@
     text-align: center;
     font-weight: 600;
   }
+
+  .logo {
+    position: absolute;
+    top: 2vw;
+    left: 2vw;
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
+  }
 }

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

@@ -5,6 +5,7 @@ import {
   MessageState,
   OntimeEvent,
   Playback,
+  ProjectData,
   Settings,
   SimpleTimerState,
   TimerPhase,
@@ -12,6 +13,7 @@ import {
   ViewSettings,
 } from 'ontime-types';
 
+import { projectLogoPath } from '../../../common/api/constants';
 import { FitText } from '../../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
@@ -50,6 +52,7 @@ interface TimerProps {
   customFields: CustomFields;
   eventNext: OntimeEvent | null;
   eventNow: OntimeEvent | null;
+  general: ProjectData;
   isMirrored: boolean;
   message: MessageState;
   settings: Settings | undefined;
@@ -58,7 +61,8 @@ interface TimerProps {
 }
 
 export default function Timer(props: TimerProps) {
-  const { auxTimer, customFields, eventNow, eventNext, isMirrored, message, settings, time, viewSettings } = props;
+  const { auxTimer, customFields, eventNow, eventNext, general, isMirrored, message, settings, time, viewSettings } =
+    props;
 
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -168,6 +172,8 @@ export default function Timer(props: TimerProps) {
 
   return (
     <div className={showFinished ? `${baseClasses} stage-timer--finished` : baseClasses} data-testid='timer-view'>
+      {general?.projectLogo && <img src={`${projectLogoPath}/${general.projectLogo}`} className='logo' />}
+
       <ViewParamsEditor viewOptions={timerOptions} />
       <div className={message.timer.blackout ? 'blackout blackout--active' : 'blackout'} />
       {!userOptions.hideMessage && (