V2 message manager (#234)

* refactor: server run script
* refactor: extract message control feature
* refactor: socket usage for message control feature
* refactor: migrate e2e testing to playwright
* chore: add feature tests
* refactor: add validation on socket controller
* chore: jest tests server logic
* chore: update tests
* chore: run playwright tests on pull_requests

client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -12,7 +12,6 @@ export default function TooltipActionBtn(props: TooltipActionBtnProps) {
     <Tooltip label={tooltip} openDelay={openDelay}>
       <IconButton
         {...rest}
-        aria-label={tooltip}
         size={size}
         icon={icon}
         onClick={clickHandler}

client/src/features/control/message/InputRow.tsx

@@ -24,7 +24,7 @@ export default function InputRow(props: InputRowProps) {
 
   return (
     <div className={`${visible ? style.inputRowActive : ''}`}>
-      <span className={style.label}>{label}</span>
+      <label className={style.label}>{label}</label>
       <div className={style.inputItems}>
         <Input
           size='sm'
@@ -36,7 +36,7 @@ export default function InputRow(props: InputRowProps) {
         <TooltipActionBtn
           clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
           tooltip={visible ? 'Make invisible' : 'Make visible'}
-          aria-label='Toggle tooltip visibility'
+          aria-label={`Toggle ${label}`}
           openDelay={tooltipDelayMid}
           icon={<IoSunny size='18px' />}
           colorScheme='blue'

client/src/features/viewers/ViewWrapper.jsx

@@ -2,6 +2,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
 import { useSocket } from '../../common/context/socketContext';
+import { useMessageControlProvider } from '../../common/hooks/useSocketProvider';
 import useSubscription from '../../common/hooks/useSubscription';
 import useEvent from '../../common/hooks-query/useEvent';
 import useEventsList from '../../common/hooks-query/useEventsList';
@@ -12,20 +13,9 @@ const withSocket = (Component) => {
     const { data: eventsData } = useEventsList();
     const { data: genData } = useEvent();
     const { data: viewSettings } = useViewSettings();
+    const { data: messages } = useMessageControlProvider();
 
     const socket = useSocket();
-    const [pres, setPres] = useState({
-      text: '',
-      visible: false,
-    });
-    const [publ, setPubl] = useState({
-      text: '',
-      visible: false,
-    });
-    const [lower, setLower] = useState({
-      text: '',
-      visible: false,
-    });
     const [publicSelectedId, setPublicSelectedId] = useState(null);
 
     const [timer] = useSubscription('timer', {
@@ -61,35 +51,10 @@ const withSocket = (Component) => {
       if (!socket) {
         return;
       }
-
-      // Handle timer messages
-      socket.on('messages-timer', (data) => {
-        setPres({ ...data });
-      });
-
-      // Handle public messages
-      socket.on('messages-public', (data) => {
-        setPubl({ ...data });
-      });
-
-      // Handle lower third messages
-      socket.on('messages-lower', (data) => {
-        setLower({ ...data });
-      });
-
+      // todo: remove
       socket.on('publicselected-id', (data) => {
         setPublicSelectedId(data);
       });
-
-      // Ask for up to date data
-      socket.emit('get-messages');
-
-      // Clear listeners
-      return () => {
-        socket.off('messages-public');
-        socket.off('messages-timer');
-        socket.off('messages-lower');
-      };
     }, [socket]);
 
 
@@ -161,9 +126,9 @@ const withSocket = (Component) => {
     return (
       <Component
         {...props}
-        pres={pres}
-        publ={publ}
-        lower={lower}
+        pres={messages.presenter}
+        publ={messages.public}
+        lower={messages.lower}
         title={titleManager}
         publicTitle={publicTitleManager}
         time={TimeManagerType}
@@ -174,7 +139,7 @@ const withSocket = (Component) => {
         viewSettings={viewSettings}
         nextId={nextId}
         general={genData}
-        onAir={onAir}
+        onAir={messages.onAir}
       />
     );
   };

client/src/features/viewers/studio/StudioClock.jsx

@@ -94,7 +94,12 @@ export default function StudioClock(props) {
         </div>
       </div>
       <div className='schedule-container'>
-        <div className={onAir ? 'onAir' : 'onAir onAir--idle'}>ON AIR</div>
+        <div
+          className={onAir ? 'onAir' : 'onAir onAir--idle'}
+          data-testid={onAir ? 'on-air-enabled' : 'on-air-disabled'}
+        >
+          ON AIR
+        </div>
         <div className='schedule'>
           <ul>
             {schedule.map((s) => (