From 4a2fc378fb4d2745599ecbc443a45a6169841c7d Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 13 Apr 2021 11:21:02 +0200
Subject: [PATCH] feat: lower third message

---
 .../src/features/control/MessageControl.jsx   | 53 ++++++++++++++++---
 .../control/MessageControl.module.css         |  8 ++-
 server/controllers/socketController.js        | 20 +++++++
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/client/src/features/control/MessageControl.jsx b/client/src/features/control/MessageControl.jsx
index b772b3f73..9419bd544 100644
--- a/client/src/features/control/MessageControl.jsx
+++ b/client/src/features/control/MessageControl.jsx
@@ -1,10 +1,14 @@
-import { FormControl, FormLabel } from '@chakra-ui/form-control';
+import { FormControl } from '@chakra-ui/form-control';
 import { Input } from '@chakra-ui/input';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
 import VisibleIconBtn from '../../common/components/buttons/VisibleIconBtn';
 import style from './MessageControl.module.css';
 
+const inputProps = {
+  size: 'sm',
+};
+
 export default function MessageControl() {
   const socket = useSocket();
   const [pres, setPres] = useState({
@@ -15,6 +19,10 @@ export default function MessageControl() {
     text: '',
     visible: false,
   });
+  const [lower, setLower] = useState({
+    text: '',
+    visible: false,
+  });
 
   useEffect(() => {
     if (socket == null) return;
@@ -29,14 +37,19 @@ export default function MessageControl() {
       setPubl({ ...data });
     });
 
+    // Handle lower third messages
+    socket.on('messages-lower', (data) => {
+      setLower({ ...data });
+    });
+
     // Ask for up to date data
-    socket.emit('get-presenter');
-    socket.emit('get-public');
+    socket.emit('get-messages');
 
     // Clear listeners
     return () => {
       socket.off('messages-public');
       socket.off('messages-presenter');
+      socket.off('messages-lower');
     };
   }, [socket]);
 
@@ -54,6 +67,12 @@ export default function MessageControl() {
       case 'toggle-publ-visible':
         socket.emit('set-public-visible', !publ.visible);
         break;
+      case 'lower-text':
+        socket.emit('set-lower-text', payload);
+        break;
+      case 'toggle-lower-visible':
+        socket.emit('set-lower-visible', !lower.visible);
+        break;
 
       default:
         break;
@@ -64,35 +83,55 @@ export default function MessageControl() {
     <>
       <div className={style.inputContainer}>
         <FormControl id='presenterMessage'>
-          <FormLabel>Presenter screen message</FormLabel>
+          <span className={style.label}>Presenter screen message</span>
           <Input
             placeholder='only the presenter screens see this'
             onChange={(event) =>
               messageControl('pres-text', event.target.value)
             }
+            {...inputProps}
           />
         </FormControl>
         <VisibleIconBtn
-          size='md'
           active={pres.visible}
           clickHandler={() => messageControl('toggle-pres-visible')}
+          {...inputProps}
         />
       </div>
 
       <div className={style.inputContainerWGap}>
         <FormControl id='generalMessage'>
-          <FormLabel>Public screen message</FormLabel>
+          <span className={style.label}>Public screen message</span>
           <Input
             placeholder='all screens will render this'
             onChange={(event) =>
               messageControl('publ-text', event.target.value)
             }
+            {...inputProps}
           />
         </FormControl>
         <VisibleIconBtn
-          size='md'
           active={publ.visible}
           clickHandler={() => messageControl('toggle-publ-visible')}
+          {...inputProps}
+        />
+      </div>
+
+      <div className={style.inputContainerWGap}>
+        <FormControl id='lowerMessage'>
+          <span className={style.label}>Lower third message</span>
+          <Input
+            placeholder='visible in lower third screen'
+            onChange={(event) =>
+              messageControl('lower-text', event.target.value)
+            }
+            {...inputProps}
+          />
+        </FormControl>
+        <VisibleIconBtn
+          active={lower.visible}
+          clickHandler={() => messageControl('toggle-lower-visible')}
+          {...inputProps}
         />
       </div>
     </>
diff --git a/client/src/features/control/MessageControl.module.css b/client/src/features/control/MessageControl.module.css
index 9bc179331..9cdee6ba1 100644
--- a/client/src/features/control/MessageControl.module.css
+++ b/client/src/features/control/MessageControl.module.css
@@ -6,5 +6,11 @@
 }
 
 .inputContainerWGap {
-  padding-top: 1em;
+  padding-top: 0.5em;
+}
+
+.label {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
 }
diff --git a/server/controllers/socketController.js b/server/controllers/socketController.js
index 2115c458f..e5b5ce5a3 100644
--- a/server/controllers/socketController.js
+++ b/server/controllers/socketController.js
@@ -39,6 +39,13 @@ const initiateSocket = (server, config) => {
     });
 
     // playback API
+
+    socket.on('get-messages', () => {
+      socket.emit('messages-presenter', global.timer.presenter);
+      socket.emit('messages-public', global.timer.public);
+      socket.emit('messages-lower', global.timer.lower);
+    });
+
     socket.on('set-presenter-text', (data) => {
       global.timer.presenterText = data;
       socket.emit('messages-presenter', global.timer.presenter);
@@ -67,6 +74,19 @@ const initiateSocket = (server, config) => {
       socket.emit('messages-public', global.timer.public);
     });
 
+    socket.on('set-lower-text', (data) => {
+      global.timer.lowerText = data;
+      socket.emit('messages-lower', global.timer.lower);
+    });
+
+    socket.on('set-lower-visible', (data) => {
+      global.timer.lowerVisible = data;
+      socket.emit('messages-lower', global.timer.lower);
+    });
+
+    socket.on('get-lower', () => {
+      socket.emit('messages-lower', global.timer.lower);
+    });
   });
 };