Fix: #279 End Message in Minimal Timer (#286)

* fix: Minimal View #279 end message
---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

apps/client/src/common/models/ViewTypes.ts

@@ -11,4 +11,5 @@ export type OverridableOptions = {
   hideNav?: boolean;
   hideOvertime?: boolean;
   hideMessagesOverlay?: boolean;
-}
+  hideEndMessage?: boolean;
+};

apps/client/src/features/viewers/minimal-timer/MinimalTimer.scss

@@ -76,4 +76,13 @@
     text-align: center;
     font-weight: 600;
   }
+
+  .end-message {
+      text-align: center;
+      font-size: 12vw;
+      line-height: 0.9em;
+      font-weight: 600;
+      color: $timer-finished-color;
+      padding: 0;
+    }
 }

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { EventDataType } from 'common/models/EventData.type';
 import { useAtom } from 'jotai';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -18,10 +19,11 @@ interface MinimalTimerProps {
   pres: PresenterMessageType;
   time: TimeManagerType;
   viewSettings: ViewSettingsType;
+  general: EventDataType;
 }
 
 export default function MinimalTimer(props: MinimalTimerProps) {
-  const { pres, time, viewSettings } = props;
+  const { pres, time, viewSettings, general } = props;
   const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const [searchParams] = useSearchParams();
   const [isMirrored] = useAtom(mirrorViewersAtom);
@@ -123,10 +125,14 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const hideMessagesOverlay = searchParams.get('hidemessages');
   userOptions.hideMessagesOverlay = Boolean(hideMessagesOverlay);
 
+  const hideEndMessage = searchParams.get('hideendmessage');
+  userOptions.hideEndMessage = Boolean(hideEndMessage);
+
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== 'pause';
   const isNegative = (time.current ?? 0) < 0;
   const showFinished = isNegative && !userOptions?.hideOvertime;
+  const showEndMessage = time.current < 0 && general.endMessage && !hideEndMessage;
 
   const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
 
@@ -153,27 +159,27 @@ export default function MinimalTimer(props: MinimalTimerProps) {
     >
       <NavigationMenu />
       {!hideMessagesOverlay && (
-        <div
-          className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}
-        >
+        <div className={showOverlay ? 'message-overlay message-overlay--active' : 'message-overlay'}>
           <div className='message'>{pres.text}</div>
         </div>
       )}
-      <div
-        className={`timer ${!isPlaying ? 'timer--paused' : ''} ${
-          showFinished ? 'timer--finished' : ''
-        }`}
-        style={{
-          color: userOptions.textColour,
-          fontSize: `${(89 / (stageTimerCharacters - 1)) * (userOptions.size || 1)}vw`,
-          fontFamily: userOptions.font,
-          top: userOptions.top,
-          left: userOptions.left,
-          backgroundColor: userOptions.textBackground,
-        }}
-      >
-        {stageTimer}
-      </div>
+      {showEndMessage ? (
+        <div className='end-message'>{general.endMessage}</div>
+      ) : (
+        <div
+          className={`timer ${!isPlaying ? 'timer--paused' : ''} ${showFinished ? 'timer--finished' : ''}`}
+          style={{
+            color: userOptions.textColour,
+            fontSize: `${(89 / (stageTimerCharacters - 1)) * (userOptions.size || 1)}vw`,
+            fontFamily: userOptions.font,
+            top: userOptions.top,
+            left: userOptions.left,
+            backgroundColor: userOptions.textBackground,
+          }}
+        >
+          {stageTimer}
+        </div>
+      )}
     </div>
   );
 }