feat: end message

- set end message in settings

client/src/features/viewers/ViewWrapper.jsx

@@ -64,6 +64,7 @@ const withSocket = (Component) => {
       url: '',
       publicInfo: '',
       backstageInfo: '',
+      endMessage: '',
     });
     const [playback, setPlayback] = useState(null);
 

client/src/features/viewers/presenter/PresenterView.jsx

@@ -7,7 +7,7 @@ import TitleCard from 'common/components/views/TitleCard';
 import style from './PresenterView.module.css';
 
 export default function PresenterView(props) {
-  const { pres, title, time } = props;
+  const { general, pres, title, time } = props;
 
   // Set window title
   useEffect(() => {
@@ -18,6 +18,14 @@ export default function PresenterView(props) {
   const isPlaying = time.playstate !== 'pause';
   const normalisedTime = Math.max(time.running, 0);
 
+  // show timer if end message is empty
+  const endMessage =
+    general.endMessage == null || general.endMessage === '' ? (
+      <Countdown time={time.running} hideZeroHours negative />
+    ) : (
+      general.endMessage
+    );
+
   // motion
   const titleVariants = {
     hidden: {
@@ -57,7 +65,7 @@ export default function PresenterView(props) {
 
       <div className={style.timerContainer}>
         {time.finished ? (
-          <div className={style.finished}>TIME UP</div>
+          <div className={style.finished}>{endMessage}</div>
         ) : (
           <div className={isPlaying ? style.countdown : style.countdownPaused}>
             <Countdown time={normalisedTime} hideZeroHours />

client/src/features/viewers/presenter/PresenterView.module.css

@@ -66,7 +66,8 @@
 }
 
 .finished {
-  font-size: 18vw;
+  text-align: center;
+  font-size: 12vw;
   line-height: 18vw;
   font-weight: 600;
   color: #ff6969;