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() {
<>
- Presenter screen message
+ Presenter screen message
messageControl('pres-text', event.target.value)
}
+ {...inputProps}
/>
messageControl('toggle-pres-visible')}
+ {...inputProps}
/>
- Public screen message
+ Public screen message
messageControl('publ-text', event.target.value)
}
+ {...inputProps}
/>
messageControl('toggle-publ-visible')}
+ {...inputProps}
+ />
+
+
+
+
+ Lower third message
+
+ messageControl('lower-text', event.target.value)
+ }
+ {...inputProps}
+ />
+
+ messageControl('toggle-lower-visible')}
+ {...inputProps}
/>
>
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);
+ });
});
};