Merge pull request #597 from mynaparrot/spt_im

Display person name for subtitle
mynaparrot · Dec 15, 2023 · 53e485d · 53e485d
2 parents 9cad4ed + e203802
commit 53e485d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 22 deletions.
diff --git a/src/components/footer/icons/recording/recordingModal.tsx b/src/components/footer/icons/recording/recordingModal.tsx
@@ -71,7 +71,7 @@ const RecordingModal = ({
               >
                 <div className="inline-block w-full max-w-lg p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-darkPrimary shadow-xl rounded-2xl">
                   <button
-                    className="close-btn absolute top-8 lrt:right-6 rtl:left-6 w-[25px] h-[25px] outline-none"
+                    className="close-btn absolute top-8 ltr:right-6 rtl:left-6 w-[25px] h-[25px] outline-none"
                     type="button"
                     onClick={() => closeModal()}
                   >

diff --git a/src/components/speech-to-text-service/subtitleArea.tsx b/src/components/speech-to-text-service/subtitleArea.tsx
@@ -1,17 +1,22 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { createSelector } from '@reduxjs/toolkit';
 
 import { RootState, useAppSelector } from '../../store';
+import { TextWithInfo } from '../../store/slices/interfaces/speechServices';
 
-const speechServicesSelector = createSelector(
-  (state: RootState) => state.speechServices,
-  (speechServices) => speechServices,
-);
+interface FinalTexts {
+  first?: TextWithInfo;
+  second?: TextWithInfo;
+}
+
+const speechServicesSelector = (state: RootState) => state.speechServices;
 
 const SubtitleArea = () => {
   const speechServices = useAppSelector(speechServicesSelector);
 
-  const [finalTexts, setFinalTexts] = useState<object>({ 0: '', 1: '' });
+  const [finalTexts, setFinalTexts] = useState<FinalTexts>({
+    first: undefined,
+    second: undefined,
+  });
   const [subtitleText, setSubtitleText] = useState<string | undefined>(
     undefined,
   );
@@ -20,27 +25,83 @@ const SubtitleArea = () => {
     if (speechServices.finalText) {
       setFinalTexts((prevState) => ({
         ...prevState,
-        [0]: prevState[1],
-        [1]: speechServices.finalText,
+        first: prevState.first,
+        second: speechServices.finalText,
       }));
     }
   }, [speechServices.finalText]);
 
   useEffect(() => {
-    const text: string[] = [finalTexts[0], finalTexts[1]];
+    if (!finalTexts.first && !finalTexts.second) {
+      return;
+    }
+    let lastLineFrom = '';
+
+    let text: string[] = [];
+    if (
+      finalTexts.first &&
+      finalTexts.first?.from === finalTexts.second?.from
+    ) {
+      // both are the same person
+      const t = finalTexts.first.text + ' ' + finalTexts.second?.text;
+      text.push(`${finalTexts.first.from}:`, t.slice(-50));
+      lastLineFrom = finalTexts.first.from;
+    } else {
+      // they are both different person
+      if (finalTexts.first) {
+        text.push(
+          `${finalTexts.first.from}:`,
+          finalTexts.first.text.slice(-20),
+        );
+        if (finalTexts.second) {
+          // if second data exist, then we'll require adding a new line
+          text.push('\n');
+        }
+        lastLineFrom = finalTexts.first.from;
+      }
+
+      if (finalTexts.second) {
+        text.push(
+          `${finalTexts.second.from}:`,
+          finalTexts.second.text.slice(-50),
+        );
+        lastLineFrom = finalTexts.second.from;
+      }
+    }
 
     if (speechServices.interimText) {
-      text.push(speechServices.interimText.text);
+      if (speechServices.interimText.text.length > 100) {
+        // if we have a lot of text then better to show only those
+        text = [
+          `${speechServices.interimText.from}:`,
+          speechServices.interimText.text.slice(-200),
+        ];
+      } else {
+        if (lastLineFrom === speechServices.interimText.from) {
+          text.push(speechServices.interimText.text);
+        } else {
+          text.push(
+            '\n',
+            `${speechServices.interimText.from}:`,
+            speechServices.interimText.text,
+          );
+        }
+      }
+    }
+
+    if (!text.length) {
+      return;
     }
-    const finalText = text.join(' ').split(' ').slice(-20);
-    setSubtitleText(finalText.join(' '));
 
+    setSubtitleText(text.join(' '));
     const clear = setTimeout(() => {
       setSubtitleText(undefined);
     }, 10000);
 
     return () => {
-      clearTimeout(clear);
+      if (clear) {
+        clearTimeout(clear);
+      }
     };
   }, [finalTexts, speechServices.interimText]);
 
@@ -52,7 +113,7 @@ const SubtitleArea = () => {
           className="sub-title w-11/12 absolute bottom-4  left-1/2 -translate-x-1/2 pointer-events-none px-10 flex items-center"
           style={{ fontSize: speechServices.subtitleFontSize }}
         >
-          <p className="py-1 px-2 bg-black text-white m-auto inline-block break-words text-center">
+          <p className="py-1 px-2 bg-black text-white m-auto inline-block break-words text-center whitespace-pre-wrap">
             {subtitleText}
           </p>
         </div>

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
+import { Provider as ReduxProvider } from 'react-redux';
 import { ToastContainer } from 'react-toastify';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
@@ -19,13 +19,13 @@ const container = document.getElementById('plugNmeet-app');
 const root = createRoot(container);
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
+    <ReduxProvider store={store}>
       <DndProvider backend={HTML5Backend}>
         <Suspense fallback={<Loading text="" />}>
           <App />
         </Suspense>
         <ToastContainer />
       </DndProvider>
-    </Provider>
+    </ReduxProvider>
   </React.StrictMode>,
 );
diff --git a/src/store/slices/interfaces/speechServices.ts b/src/store/slices/interfaces/speechServices.ts
@@ -9,7 +9,7 @@ export interface ISpeechServices {
   selectedSubtitleLang: string;
   subtitleFontSize: number;
   interimText?: TextWithInfo;
-  finalText: string;
+  finalText?: TextWithInfo;
   lastFinalTexts: TextWithInfo[];
 }
 

diff --git a/src/store/slices/speechServicesSlice.ts b/src/store/slices/speechServicesSlice.ts
@@ -10,7 +10,7 @@ const initialState: ISpeechServices = {
   selectedSubtitleLang: '',
   subtitleFontSize: 14,
   interimText: undefined,
-  finalText: '',
+  finalText: undefined,
   lastFinalTexts: [],
 };
 
@@ -21,7 +21,7 @@ const speechServicesSlice = createSlice({
     updateSelectedSubtitleLang: (state, action: PayloadAction<string>) => {
       state.selectedSubtitleLang = action.payload;
       state.interimText = undefined;
-      state.finalText = '';
+      state.finalText = undefined;
     },
     updateSubtitleFontSize: (state, action: PayloadAction<number>) => {
       state.subtitleFontSize = action.payload;
@@ -34,7 +34,7 @@ const speechServicesSlice = createSlice({
         state.interimText = action.payload.result;
       } else {
         state.interimText = undefined;
-        state.finalText = action.payload.result.text;
+        state.finalText = action.payload.result;
         if (!isEmpty(action.payload.result.text)) {
           state.lastFinalTexts.push(action.payload.result);
         }