feat: end message

- set end message in settings

client/src/features/modals/AppSettingsModal.jsx

@@ -110,26 +110,6 @@ export default function AppSettingsModal() {
                 />
               </FormControl>
             </div>
-
-            <FormControl id='endMessage'>
-              <FormLabel htmlFor='endMessage'>
-                End Message
-                <span className={style.notes}>
-                  Message shown in timer when time is finished
-                </span>
-              </FormLabel>
-              <Input
-                size='sm'
-                name='endMessage'
-                placeholder='Time Out'
-                autoComplete='off'
-                value={'TIME UP'}
-                onChange={(event) => {
-                  // Nothing here yet
-                }}
-                isDisabled={true}
-              />
-            </FormControl>
           </>
           <Button
             colorScheme='blue'

client/src/features/modals/EventSettingsModal.jsx

@@ -19,6 +19,7 @@ export default function SettingsModal() {
     url: '',
     publicInfo: '',
     backstageInfo: '',
+    endMessage: '',
   });
   const [changed, setChanged] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -31,9 +32,12 @@ export default function SettingsModal() {
       url: data.url,
       publicInfo: data.publicInfo,
       backstageInfo: data.backstageInfo,
+      endMessage: data.endMessage,
     });
   }, [data]);
 
+  console.log(`formData.endMessage`, formData.endMessage);
+
   const submitHandler = async (event) => {
     event.preventDefault();
     setSubmitting(true);
@@ -60,6 +64,7 @@ export default function SettingsModal() {
                 <FormLabel htmlFor='title'>Event Title</FormLabel>
                 <Input
                   size='sm'
+                  maxLength={35}
                   name='title'
                   placeholder='Event Title'
                   autoComplete='off'
@@ -131,6 +136,31 @@ export default function SettingsModal() {
                   isDisabled={submitting}
                 />
               </FormControl>
+
+              <FormControl id='endMessage'>
+                <FormLabel htmlFor='endMessage'>
+                  End Message
+                  <span className={style.notes}>
+                    Shown on presenter view when time is finished
+                  </span>
+                </FormLabel>
+                <Input
+                  size='sm'
+                  maxLength={30}
+                  name='endMessage'
+                  placeholder='Empty message shows elapsed time'
+                  autoComplete='off'
+                  value={formData.endMessage}
+                  onChange={(event) => {
+                    setChanged(true);
+                    setFormData({
+                      ...formData,
+                      endMessage: event.target.value,
+                    });
+                  }}
+                  isDisabled={submitting}
+                />
+              </FormControl>
             </>
           )}
           <Button

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;