fix(CCTab): Reset start button state on error

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

@@ -88,6 +88,7 @@ export default function ClosedCaptionsTab() {
     const _isTranscribing = useSelector(isTranscribing);
     const _canStartSubtitles = useSelector(canStartSubtitles);
     const [ isButtonPressed, setButtonPressed ] = useState(false);
+    const subtitlesError = useSelector((state: IReduxState) => state['features/subtitles']._hasError);
 
     const filteredSubtitles = useMemo(() => {
         // First, create a map of transcription messages by message ID
@@ -128,6 +129,10 @@ export default function ClosedCaptionsTab() {
         setButtonPressed(true);
     }, [ dispatch, isButtonPressed, setButtonPressed ]);
 
+    if (subtitlesError && isButtonPressed) {
+        setButtonPressed(false);
+    }
+
     if (!_isTranscribing) {
         if (_canStartSubtitles) {
             return (

react/features/subtitles/actionTypes.ts

@@ -60,3 +60,13 @@ export const SET_REQUESTING_SUBTITLES
  * Action to store received subtitles in history.
  */
 export const STORE_SUBTITLE = 'STORE_SUBTITLE';
+
+/**
+ * The type of (redux) action which indicates that an error occurred while starting subtitles.
+ *
+ * {
+ *      type: SET_SUBTITLES_ERROR,
+ *      hasError: boolean
+ * }
+ */
+export const SET_SUBTITLES_ERROR = 'SET_SUBTITLES_ERROR';

react/features/subtitles/actions.any.ts

@@ -6,7 +6,8 @@ import {
     SET_REQUESTING_SUBTITLES,
     STORE_SUBTITLE,
     TOGGLE_REQUESTING_SUBTITLES,
-    UPDATE_TRANSCRIPT_MESSAGE
+    UPDATE_TRANSCRIPT_MESSAGE,
+    SET_SUBTITLES_ERROR
 } from './actionTypes';
 import { ISubtitle } from './types';
 
@@ -116,3 +117,19 @@ export function storeSubtitle(subtitle: ISubtitle) {
         subtitle
     };
 }
+
+/**
+ * Signals that an error occurred while starting subtitles.
+ *
+ * @param {boolean} hasError - Whether an error occurred or not.
+ * @returns {{
+ *    type: SET_SUBTITLES_ERROR,
+ *    hasError: boolean
+ * }}
+ */
+export function setSubtitlesError(hasError: boolean) {
+    return {
+        type: SET_SUBTITLES_ERROR,
+        hasError
+    };
+}

react/features/subtitles/middleware.ts

@@ -16,6 +16,7 @@ import {
     removeCachedTranscriptMessage,
     removeTranscriptMessage,
     setRequestingSubtitles,
+    setSubtitlesError,
     storeSubtitle,
     updateTranscriptMessage
 } from './actions.any';
@@ -357,6 +358,7 @@ function _requestingSubtitlesChange(
                     dispatch(showErrorNotification({
                         titleKey: 'transcribing.failed'
                     }));
+                    dispatch(setSubtitlesError(true));
                 });
         }
     }

react/features/subtitles/reducer.ts

@@ -7,7 +7,8 @@ import {
     SET_REQUESTING_SUBTITLES,
     STORE_SUBTITLE,
     TOGGLE_REQUESTING_SUBTITLES,
-    UPDATE_TRANSCRIPT_MESSAGE
+    UPDATE_TRANSCRIPT_MESSAGE,
+    SET_SUBTITLES_ERROR
 } from './actionTypes';
 import { ISubtitle, ITranscriptMessage } from './types';
 
@@ -21,12 +22,14 @@ const defaultState = {
     _requestingSubtitles: false,
     _language: null,
     messages: [],
-    subtitlesHistory: []
+    subtitlesHistory: [],
+    _hasError: false
 };
 
 export interface ISubtitlesState {
     _cachedTranscriptMessages: Map<string, ITranscriptMessage>;
     _displaySubtitles: boolean;
+    _hasError: boolean;
     _language: string | null;
     _requestingSubtitles: boolean;
     _transcriptMessages: Map<string, ITranscriptMessage>;
@@ -52,12 +55,14 @@ ReducerRegistry.register<ISubtitlesState>('features/subtitles', (
             ...state,
             _displaySubtitles: action.displaySubtitles,
             _language: action.language,
-            _requestingSubtitles: action.enabled
+            _requestingSubtitles: action.enabled,
+            _hasError: false
         };
     case TOGGLE_REQUESTING_SUBTITLES:
         return {
             ...state,
-            _requestingSubtitles: !state._requestingSubtitles
+            _requestingSubtitles: !state._requestingSubtitles,
+            _hasError: false
         };
     case TRANSCRIBER_LEFT:
         return {
@@ -88,6 +93,11 @@ ReducerRegistry.register<ISubtitlesState>('features/subtitles', (
             ]
         };
     }
+    case SET_SUBTITLES_ERROR:
+        return {
+            ...state,
+            _hasError: action.hasError
+        };
     }
 
     return state;