Feat/studio clock (#60)

client/src/features/control/MessageControl.jsx

@@ -1,15 +1,16 @@
-import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
-import { useEffect, useState } from 'react';
-import { useSocket } from 'app/context/socketContext';
+import {Editable, EditableInput, EditablePreview} from '@chakra-ui/editable';
+import {Switch} from "@chakra-ui/react";
+import {useEffect, useState} from 'react';
+import {useSocket} from 'app/context/socketContext';
 import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn';
-import style from './MessageControl.module.css';
+import style from './MessageControl.module.scss';
 
 const inputProps = {
   size: 'sm',
 };
 
 const InputRow = (props) => {
-  const { label, placeholder, text, visible } = props;
+  const {label, placeholder, text, visible} = props;
 
   return (
     <>
@@ -22,8 +23,8 @@ const InputRow = (props) => {
           className={style.inline}
           color={text === '' ? '#666' : 'inherit'}
         >
-          <EditablePreview className={style.padleft} />
-          <EditableInput className={style.padleft} />
+          <EditablePreview className={style.padleft}/>
+          <EditableInput className={style.padleft}/>
         </Editable>
         <VisibleIconBtn
           active={visible || undefined}
@@ -49,33 +50,42 @@ export default function MessageControl() {
     text: '',
     visible: false,
   });
+  const [onAir, setonAir] = useState(false);
 
   useEffect(() => {
     if (socket == null) return;
 
     // Handle presenter messages
     socket.on('messages-presenter', (data) => {
-      setPres({ ...data });
+      setPres({...data});
     });
 
     // Handle public messages
     socket.on('messages-public', (data) => {
-      setPubl({ ...data });
+      setPubl({...data});
     });
 
     // Handle lower third messages
     socket.on('messages-lower', (data) => {
-      setLower({ ...data });
+      setLower({...data});
+    });
+
+    // Handle lower third messages
+    socket.on('onAir', (data) => {
+      setonAir(data);
     });
 
     // Ask for up to date data
     socket.emit('get-messages');
+    // Ask for onAir state
+    socket.emit('get-onAir');
 
     // Clear listeners
     return () => {
       socket.off('messages-public');
       socket.off('messages-presenter');
       socket.off('messages-lower');
+      socket.off('onAir');
     };
   }, [socket]);
 
@@ -99,38 +109,54 @@ export default function MessageControl() {
       case 'toggle-lower-visible':
         socket.emit('set-lower-visible', !lower.visible);
         break;
-
+      case 'toggle-onAir':
+        socket.emit('set-onAir', !onAir);
+        break;
       default:
         break;
     }
   };
 
   return (
-    <div className={style.messageContainer}>
-      <InputRow
-        label='Presenter screen message'
-        placeholder='only the presenter screens see this'
-        text={pres.text}
-        visible={pres.visible}
-        changeHandler={(event) => messageControl('pres-text', event)}
-        actionHandler={() => messageControl('toggle-pres-visible')}
-      />
-      <InputRow
-        label='Public screen message'
-        placeholder='public screens will render this'
-        text={publ.text}
-        visible={publ.visible}
-        changeHandler={(event) => messageControl('publ-text', event)}
-        actionHandler={() => messageControl('toggle-publ-visible')}
-      />
-      <InputRow
-        label='Lower third message'
-        placeholder='visible in lower third screen'
-        text={lower.text}
-        visible={lower.visible}
-        changeHandler={(event) => messageControl('lower-text', event)}
-        actionHandler={() => messageControl('toggle-lower-visible')}
-      />
-    </div>
+    <>
+      <div className={style.messageContainer}>
+        <InputRow
+          label='Presenter screen message'
+          placeholder='only the presenter screens see this'
+          text={pres.text}
+          visible={pres.visible}
+          changeHandler={(event) => messageControl('pres-text', event)}
+          actionHandler={() => messageControl('toggle-pres-visible')}
+        />
+        <InputRow
+          label='Public screen message'
+          placeholder='public screens will render this'
+          text={publ.text}
+          visible={publ.visible}
+          changeHandler={(event) => messageControl('publ-text', event)}
+          actionHandler={() => messageControl('toggle-publ-visible')}
+        />
+        <InputRow
+          label='Lower third message'
+          placeholder='visible in lower third screen'
+          text={lower.text}
+          visible={lower.visible}
+          changeHandler={(event) => messageControl('lower-text', event)}
+          actionHandler={() => messageControl('toggle-lower-visible')}
+        />
+      </div>
+      <div className={style.onAirToggle}>
+        <Switch
+          colorScheme='green'
+          size='md'
+          isChecked={onAir}
+          onChange={() => messageControl('toggle-onAir')}>
+          On Air?
+        </Switch>
+        <span className={style.oscLabel}>
+          {`/ontime/offAir << OSC >> /ontime/onAir`}
+        </span>
+      </div>
+    </>
   );
 }

client/src/features/control/MessageControl.module.css

@@ -1,32 +0,0 @@
-.messageContainer {
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-  padding: 0.5em;
-}
-
-.inputItems {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 1em;
-}
-
-.label {
-  padding: 0;
-  margin: 0;
-  font-size: 0.9em;
-  color: #ccc;
-}
-
-.inline {
-  border-radius: 4px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.padleft {
-  padding-left: 0.5em;
-}

client/src/features/control/MessageControl.module.scss

@@ -0,0 +1,54 @@
+.messageContainer,
+.onAirToggle {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  display: flex;
+  gap: 0.5em;
+  padding: 0.5em;
+
+}
+
+.messageContainer {
+  flex-direction: column;
+
+  .inputItems {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1em;
+  }
+  .label {
+    padding: 0;
+    margin: 0;
+    font-size: 0.9em;
+    color: #ccc;
+  }
+  .inline {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  .padleft {
+    padding-left: 0.5em;
+  }
+}
+
+.onAirToggle {
+  margin-top: 1em;
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  line-height: 3em;
+
+  .onAirLabel {
+    font-size: 1.2em;
+  }
+  .oscLabel {
+    color: #4bffabcc;
+    font-size: 0.8em;
+    float: right;
+    padding-right: 1em;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+}