MR - Subtitles rework + add broadcast (#38)

* fix(broadcast): change check success statusCode

* pending(broadcast): add .on & emitters
fix statusCode 201 to 200

* pending(broadcast): add areas update broadcast + prepare subtitles broadcast

* fix(broadcast socket): add boolean to make sure that the listenning is not multiplied

* feat(socket): add getSubtitlesSettings & getAllTextFields

* fix(): listener is destroyed after closing component

* fix(compressor): align center

* rework(subtitles): list subtitles text fields
* add subtitles text field
* remove subtitles text field
* broadcast
* ui/ux

* fix merge conflict stah mescouilles

* fix(): merge error + change display text + avoid conflict variable name

* fix(): empty subtitles handling

* fix(): remove success notif + remove debug

* fix(): text change -> easier to understand

Author: Mitix-EPI

public/electron.js

@@ -182,6 +182,71 @@ ipcMain.on("getActReactCouples", (event, arg) => {
   }
 });
 
+ipcMain.on("getSubtitlesSettings", (event, arg) => {
+  if (isDev) {
+    let res = {
+      statusCode: 200,
+      message: "OK",
+      data: {
+        length: 2,
+        text_fields: [
+          {
+            "uuid": "27705058-7a54-4057-ad17-a810c08e8db9",
+            "name": "Text lambda 1",
+          },
+          {
+            "uuid": "4f712d61-094a-4b7b-9905-4fa928329de4",
+            "name": "Text EN",
+          }
+        ],
+      }
+    };
+    event.returnValue = res;
+    return res;
+  } else {
+    return tcpConn.getSubtitlesSettings().then((res) => {
+      console.log("getSubtitlesSettings : " + res);
+      event.returnValue = res;
+    });
+  }
+});
+
+ipcMain.on("getAllTextFields", (event, arg) => {
+  if (isDev) {
+    let res = {
+      statusCode: 200,
+      message: "OK",
+      data: {
+        length: 3,
+        text_fields: [
+          {
+            "name": "Text lambda 1",
+            "parent_scene": "Scene 1",
+            "uuid": "27705058-7a54-4057-ad17-a810c08e8db9",
+          },
+          {
+            "name": "Text EN",
+            "parent_scene": "Scene 1",
+            "uuid": "4f712d61-094a-4b7b-9905-4fa928329de4",
+          },
+          {
+            "name": "Blop 3",
+            "parent_scene": "Scene 2",
+            "uuid": "4fa92094a-832-94fde4-712d61-4b7b-9905",
+          }
+        ],
+      }
+    };
+    event.returnValue = res;
+    return res;
+  } else {
+    return tcpConn.getAllTextFields().then((res) => {
+      console.log("getAllTextFields : " + res);
+      event.returnValue = res;
+    });
+  }
+});
+
 ipcMain.on("setCompressorLevel", (event, arg) => {
   if (isDev) {
     let res = {
@@ -263,6 +328,14 @@ ipcMain.on("scenes-updated", (evt, arg) => { // Get from socket broadcast
   mainWindow.webContents.send('scenes-updated'); // To renderer
 });
 
+ipcMain.on("actions-reactions-updated", (evt, arg) => { // Get from socket broadcast
+  mainWindow.webContents.send('actions-reactions-updated'); // To renderer
+});
+
+ipcMain.on("subtitles-updated", (evt, arg) => { // Get from socket broadcast
+  mainWindow.webContents.send('subtitles-updated'); // To renderer
+});
+
 ipcMain.on("connection-server-lost", (evt, arg) => {
   // Quit main app
   if (mainWindow)

src/Components/ActionsReactions/ActionsReactions.tsx

@@ -1,4 +1,4 @@
-import React, { Component, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import "./ActionsReactions.css";
 
 import Card from "@mui/material/Card";
@@ -133,7 +133,18 @@ export const ActionsReactions = () => {
 
   // Hook to load actions and reactions on component mount
   useEffect(() => {
-    ipcRenderer.on('scenes-updated', (evt: any, message: any) => {
+    const handleActionReactionUpdated = (evt: any, message: any) => {
+      getActionReactionFromServer().then((res) => {
+        if (res.statusCode === 200) {
+          toast("Actions/Reactions have been updated !", {
+            type: "info",
+          });
+          console.log("New Array", res);
+          setActionsReactionsList(res.data.actReacts);
+        }
+      });
+    };
+    const handleScenesUpdated = (evt: any, message: any) => {
       getAllScenes().then((res) => {
         if (res.statusCode === 200) {
           toast("Scenes have been updated.", {
@@ -142,7 +153,11 @@ export const ActionsReactions = () => {
           setAvailableScenes(res.data.scenes);
         }
       });
-    });
+    };
+    
+    ipcRenderer.on('actions-reactions-updated', handleActionReactionUpdated);
+    ipcRenderer.on('scenes-updated', handleScenesUpdated);
+
     async function sleep(): Promise<boolean> {
       return new Promise((resolve) => {
         getActionReactionFromServer().then((res) => {
@@ -174,6 +189,11 @@ export const ActionsReactions = () => {
     }
 
     sleep().then((res) => setload(!res));
+
+    return () => {
+      ipcRenderer.removeListener('actions-reactions-updated', handleActionReactionUpdated);
+      ipcRenderer.removeListener('scenes-updated', handleScenesUpdated);
+    };
   }, []);
 
   /**

src/Components/ActionsReactions/AddAppLaunch/AppLaunchModal/AppLaunchModal.tsx

@@ -172,7 +172,7 @@ export const AppLaunchModal = (props: any) => {
               <InputLabel
                 id="demo-simple-select-label"
                 className={classes.selectLabel}>
-                sources
+                reactions
               </InputLabel>
               <Select
                 labelId="demo-simple-select-label"

src/Components/ActionsReactions/AddNewKeyPressed/KeyPressedModal/KeyPressedModal.tsx

@@ -187,7 +187,7 @@ export const KeyPressedModal = (props: any) => {
                 <InputLabel
                   id="demo-simple-select-label"
                   className={classes.selectLabel}>
-                  sources
+                  reactions
                 </InputLabel>
                 <Select
                   labelId="demo-simple-select-label"

src/Components/ActionsReactions/AddNewWord/WordDetectionModal/WordDetectionModal.tsx

@@ -190,7 +190,7 @@ export const WordDetectionModal = (props: any) => {
                 <InputLabel
                   id="demo-simple-select-label"
                   className={classes.selectLabel}>
-                  sources
+                  reactions
                 </InputLabel>
                 <Select
                   labelId="demo-simple-select-label"

src/Components/ActionsReactions/CreateReactions/CreateReactions.tsx

@@ -66,7 +66,7 @@ export const CreateReactions = () => {
   );
   const [availableScenes, setAvailableScenes] = React.useState<Scene[]>([]);
 
-  
+
   /**
    * Define styles for the component
    */
@@ -266,7 +266,7 @@ export const CreateReactions = () => {
   }
 
   useEffect(() => {
-    ipcRenderer.on('scenes-updated', (evt: any, message: any) => {
+    const handleScenesUpdated = (evt: any, message: any) => {
       getAllScenes().then((res) => {
         if (res.statusCode === 200) {
           toast("Scenes have been updated.", {
@@ -275,7 +275,10 @@ export const CreateReactions = () => {
           setAvailableScenes(res.data.scenes);
         }
       });
-    });
+    };
+  
+    ipcRenderer.on('scenes-updated', handleScenesUpdated);
+
     getAllScenes().then((res) => {
       if (res.statusCode === 200) {
         setAvailableScenes(res.data.scenes);
@@ -287,6 +290,9 @@ export const CreateReactions = () => {
       }
     });
 
+    return () => {
+      ipcRenderer.removeListener('scenes-updated', handleScenesUpdated);
+    };
   }, []);
 
   return (
@@ -372,7 +378,7 @@ export const CreateReactions = () => {
             <TextField
               autoFocus
               id="name"
-              label="Name of the action"
+              label="Name of the reaction"
               type="text"
               value={newActionName}
               variant="standard"
@@ -404,7 +410,7 @@ export const CreateReactions = () => {
             {
               newActionSelected === "SCENE_SWITCH" ? (
                 <>
-                  <InputLabel id="select-event-label">Parameter action</InputLabel>
+                  <InputLabel id="select-event-label">Parameter reaction</InputLabel>
                   <Select
                     labelId="select-event-label"
                     id="select-event"

src/Components/CompressorLevel/CompressorLevel.tsx

@@ -1,4 +1,4 @@
-import React, { Component, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import CustomizedSlider from "../Slider/Slider";
 import { AllMics, Mic } from "../../Socket/interfaces";
 import { resultFormat } from "../../Socket/interfaces";
@@ -17,6 +17,7 @@ export const CompressorLevel = () => {
   >([]);
   const [load, setload] = React.useState(true);
   const [point, setpoint] = React.useState(".");
+
   const axiosPrivate = useAxiosPrivate();
 
   const style = {
@@ -31,8 +32,6 @@ export const CompressorLevel = () => {
     },
   };
 
-  let timeoutCommit: NodeJS.Timeout | undefined = undefined;
-
   const getAllCompressors = (): Promise<AllMics> => {
     return new Promise(async (resolve, reject) => {
       const result: AllMics = await ipcRenderer.sendSync("getAllMics", "ping");
@@ -69,13 +68,16 @@ export const CompressorLevel = () => {
   };
 
   useEffect(() => {
-    ipcRenderer.on('compressor-level-updated', (evt: any, message: any) => {
+    const handleCompressorLevelUpdated = (evt: any, message: any) => {
       getAllCompressors().then((res) => {
         if (res.statusCode === 200) {
           setExampleCompressorArray(res.data.mics);
         }
       });
-    })
+    };
+
+    ipcRenderer.on('compressor-level-updated', handleCompressorLevelUpdated);
+
     async function sleep(): Promise<boolean> {
       return new Promise((resolve) => {
         getAllCompressors().then((res) => {
@@ -88,6 +90,10 @@ export const CompressorLevel = () => {
     }
 
     sleep().then((res) => setload(res));
+
+    return () => {
+      ipcRenderer.removeListener('compressor-level-updated', handleCompressorLevelUpdated);
+    };
   }, []);
 
   function addpoint() {

src/Components/Slider/Slider.tsx

@@ -105,6 +105,7 @@ const CustomizedSlider = (props: any) => {
         sx={{
           display: "flex",
           alignItems: "center",
+          justifyContent: "space-evenly",
           p: 1,
           m: 1,
         }}
@@ -120,7 +121,7 @@ const CustomizedSlider = (props: any) => {
           />
         </Box>
         <Box
-          sx={{ marginTop: "-22px", paddingLeft: "5vw" }}
+          sx={{ marginTop: "-20px"}}
           onClick={handleMicToggle}
           style={{ color: props.isActive ? "green" : "red" }}
         >

src/Components/Subtitles/Subtitles.css

@@ -0,0 +1,21 @@
+.subtitlesSettingsBox {
+    border: 3px solid orange;
+    background-color: #565d68;
+    /* rounded */
+    border-radius: 10px;
+
+    overflow:scroll;
+    overflow-y:scroll;
+    overflow-x:hidden;
+
+    max-height: 65vh;
+}
+
+.subtitlesSettingsItem:hover {
+    box-shadow: 20px;
+    transform: scale(1.02);
+}
+
+.MuiListItemText-secondary {
+    color: orange !important;
+}