fix: Using recording dialog on asyncTranscription.

This partially reverts commit 02787b1 to avoid looping between request subtitles and start recording which results not closing the start recording dialog.

react/features/chat/components/web/ClosedCaptionsTab.tsx

@@ -4,10 +4,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../app/types';
+import { openDialog } from '../../../base/dialog/actions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconSubtitles } from '../../../base/icons/svg';
 import Button from '../../../base/ui/components/web/Button';
 import { groupMessagesBySender } from '../../../base/util/messageGrouping';
+import { StartRecordingDialog } from '../../../recording/components/Recording';
 import { setRequestingSubtitles } from '../../../subtitles/actions.any';
 import LanguageSelector from '../../../subtitles/components/web/LanguageSelector';
 import { canStartSubtitles } from '../../../subtitles/functions.any';
@@ -88,6 +90,7 @@ export default function ClosedCaptionsTab() {
     const _canStartSubtitles = useSelector(canStartSubtitles);
     const [ isButtonPressed, setButtonPressed ] = useState(false);
     const subtitlesError = useSelector((state: IReduxState) => state['features/subtitles']._hasError);
+    const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
 
     const filteredSubtitles = useMemo(() => {
         // First, create a map of transcription messages by message ID
@@ -124,9 +127,17 @@ export default function ClosedCaptionsTab() {
         if (isButtonPressed) {
             return;
         }
-        dispatch(setRequestingSubtitles(true, false, null));
+
+        if (conference?.getMetadataHandler()?.getMetadata()?.asyncTranscription) {
+            dispatch(openDialog('StartRecordingDialog', StartRecordingDialog, {
+                recordAudioAndVideo: false
+            }));
+        } else {
+            dispatch(setRequestingSubtitles(true, false, null));
+        }
+
         setButtonPressed(true);
-    }, [ dispatch, isButtonPressed, setButtonPressed ]);
+    }, [ conference, dispatch, isButtonPressed, openDialog, setButtonPressed ]);
 
     if (subtitlesError && isButtonPressed) {
         setButtonPressed(false);

react/features/subtitles/actions.any.ts

@@ -1,7 +1,4 @@
-import { IStore } from '../app/types';
-import { openDialog } from '../base/dialog/actions';
 import { DEFAULT_LANGUAGE } from '../base/i18n/i18next';
-import { StartRecordingDialog } from '../recording/components/Recording';
 
 import {
     REMOVE_CACHED_TRANSCRIPT_MESSAGE,
@@ -100,24 +97,12 @@ export function setRequestingSubtitles(
         displaySubtitles = true,
         language: string | null = `translation-languages:${DEFAULT_LANGUAGE}`,
         backendRecordingOn = false) {
-    return function(dispatch: IStore['dispatch'], getState: IStore['getState']) {
+    return {
-        const { conference } = getState()['features/base/conference'];
+        type: SET_REQUESTING_SUBTITLES,
-
+        backendRecordingOn,
-        if (conference?.getMetadataHandler()?.getMetadata()?.asyncTranscription) {
+        displaySubtitles,
-            dispatch(openDialog('StartRecordingDialog', StartRecordingDialog, {
+        enabled,
-                recordAudioAndVideo: false
+        language
-            }));
-
-            return;
-        }
-
-        dispatch({
-            type: SET_REQUESTING_SUBTITLES,
-            backendRecordingOn,
-            displaySubtitles,
-            enabled,
-            language
-        });
     };
 }
 

react/features/subtitles/components/AbstractLanguageSelectorDialog.tsx

@@ -3,10 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { IReduxState, IStore } from '../../app/types';
+import { openDialog } from '../../base/dialog/actions';
+import { StartRecordingDialog } from '../../recording/components/Recording/index';
 import { setRequestingSubtitles } from '../actions.any';
 import { getAvailableSubtitlesLanguages } from '../functions.any';
 
-
 export interface IAbstractLanguageSelectorDialogProps {
     dispatch: IStore['dispatch'];
     language: string | null;
@@ -44,14 +45,21 @@ const AbstractLanguageSelectorDialog = (Component: ComponentType<IAbstractLangua
                 selected: lang === selected
             };
         });
+    const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
 
     const onLanguageSelected = useCallback((value: string) => {
         const _selectedLanguage = value === noLanguageLabel ? null : value;
         const enabled = Boolean(_selectedLanguage);
         const displaySubtitles = enabled;
 
-        dispatch(setRequestingSubtitles(enabled, displaySubtitles, _selectedLanguage));
+        if (conference?.getMetadataHandler()?.getMetadata()?.asyncTranscription) {
-    }, [ language ]);
+            dispatch(openDialog('StartRecordingDialog', StartRecordingDialog, {
+                recordAudioAndVideo: false
+            }));
+        } else {
+            dispatch(setRequestingSubtitles(enabled, displaySubtitles, _selectedLanguage));
+        }
+    }, [ conference, language ]);
 
     return (
         <Component