ref(transcriptions): refactor usage of translation label

react/features/subtitles/actions.any.ts

@@ -95,12 +95,12 @@ export function setRequestingSubtitles(enabled: boolean) {
 /**
  * Signals that the local user has selected language for the translation.
  *
- * @param {string} value - The selected language for translation.
+ * @param {string | null} value - The selected language for translation.
  * @returns {{
  *      type: UPDATE_TRANSLATION_LANGUAGE
  * }}
  */
-export function updateTranslationLanguage(value: string) {
+export function updateTranslationLanguage(value: string | null) {
     return {
         type: UPDATE_TRANSLATION_LANGUAGE,
         value

react/features/subtitles/components/AbstractLanguageSelectorDialog.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, useCallback, useEffect, useState } from 'react';
+import React, { ComponentType, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -12,7 +12,7 @@ import { setRequestingSubtitles, updateTranslationLanguage } from '../actions.an
 
 export interface IAbstractLanguageSelectorDialogProps {
     dispatch: IStore['dispatch'];
-    language: string;
+    language: string | null;
     listItems: Array<any>;
     onLanguageSelected: (e: string) => void;
     subtitles: string;
@@ -30,10 +30,10 @@ export interface IAbstractLanguageSelectorDialogProps {
 const AbstractLanguageSelectorDialog = (Component: ComponentType<IAbstractLanguageSelectorDialogProps>) => () => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
-    const off = 'transcribing.subtitlesOff';
+    const noLanguageLabel = 'transcribing.subtitlesOff';
 
-    const [ subtitles, setSubtiles ] = useState(off);
     const language = useSelector((state: IReduxState) => state['features/subtitles']._language);
+    const [ subtitles, setSubtitles ] = useState(language || noLanguageLabel);
 
     const transcription = useSelector((state: IReduxState) => state['features/base/config'].transcription);
     const translationLanguagesHead = transcription?.translationLanguagesHead ?? TRANSLATION_LANGUAGES_HEAD;
@@ -42,7 +42,7 @@ const AbstractLanguageSelectorDialog = (Component: ComponentType<IAbstractLangua
     // The off and the head languages are always on the top of the list. But once you are selecting
     // a language from the translationLanguages, that language is moved under the fixedItems list,
     // until a new languages is selected. FixedItems keep their positions.
-    const fixedItems = [ off, ...languagesHead ];
+    const fixedItems = [ noLanguageLabel, ...languagesHead ];
     const translationLanguages = transcription?.translationLanguages ?? TRANSLATION_LANGUAGES;
     const languages = translationLanguages
         .map((lang: string) => `translation-languages:${lang}`)
@@ -58,14 +58,12 @@ const AbstractLanguageSelectorDialog = (Component: ComponentType<IAbstractLangua
             };
         });
 
-    useEffect(() => {
-        language ? setSubtiles(language) : setSubtiles(off);
-    }, []);
+    const onLanguageSelected = useCallback((value: string) => {
+        const selectedLanguage = value === noLanguageLabel ? null : value;
 
-    const onLanguageSelected = useCallback((e: string) => {
-        setSubtiles(e);
-        dispatch(updateTranslationLanguage(e));
-        dispatch(setRequestingSubtitles(e !== off));
+        setSubtitles(value);
+        dispatch(updateTranslationLanguage(selectedLanguage));
+        dispatch(setRequestingSubtitles(Boolean(selectedLanguage)));
     }, [ language ]);
 
     return (

react/features/subtitles/components/native/ClosedCaptionButton.tsx

@@ -22,7 +22,7 @@ class ClosedCaptionButton
     icon = IconSubtitles;
     label = 'toolbar.startSubtitles';
     labelProps = {
-        language: this.props.t(this.props._language),
+        language: this.props.t(this.props._language ?? 'transcribing.subtitlesOff'),
         languages: this.props.t(this.props.languages ?? ''),
         languagesHead: this.props.t(this.props.languagesHead ?? '')
     };

react/features/subtitles/components/web/ClosedCaptionButton.tsx

@@ -18,7 +18,7 @@ class ClosedCaptionButton
     tooltip = 'transcribing.ccButtonTooltip';
     label = 'toolbar.startSubtitles';
     labelProps = {
-        language: this.props.t(this.props._language),
+        language: this.props.t(this.props._language ?? 'transcribing.subtitlesOff'),
         languages: this.props.t(this.props.languages ?? ''),
         languagesHead: this.props.t(this.props.languagesHead ?? '')
     };

react/features/subtitles/middleware.ts

@@ -183,7 +183,7 @@ function _requestingSubtitlesChange({ getState }: IStore) {
     const { _language } = state['features/subtitles'];
     const { conference } = state['features/base/conference'];
 
-    const requestingSubtitles = _language !== 'transcribing.subtitlesOff';
+    const requestingSubtitles = Boolean(_language);
 
     conference?.setLocalParticipantProperty(
         P_NAME_REQUESTING_TRANSCRIPTION,

react/features/subtitles/reducer.ts

@@ -11,7 +11,7 @@ import {
 const defaultState = {
     _transcriptMessages: new Map(),
     _requestingSubtitles: false,
-    _language: 'transcribing.subtitlesOff'
+    _language: null
 };
 
 interface ITranscriptMessage {
@@ -22,7 +22,7 @@ interface ITranscriptMessage {
 }
 
 export interface ISubtitlesState {
-    _language: string;
+    _language: string | null;
     _requestingSubtitles: boolean;
     _transcriptMessages: Map<string, ITranscriptMessage> | any;
 }