feat(translation): add description for source language (#12371)

lang/main.json

@@ -1226,6 +1226,8 @@
         "labelToolTip": "The meeting is being transcribed",
         "off": "Transcribing stopped",
         "pending": "Preparing to transcribe the meeting...",
+        "sourceLanguageDesc": "Currently the meeting language is set to <b>{{sourceLanguage}}</b>. <br/> You can change it from ",
+        "sourceLanguageHere": "here",
         "start": "Start showing subtitles",
         "stop": "Stop showing subtitles",
         "subtitles": "Subtitles",

react/features/subtitles/components/LanguageListItem.tsx

@@ -29,10 +29,11 @@ const useStyles = makeStyles()((theme: Theme) => {
     return {
         itemContainer: {
             display: 'flex',
-            color: theme.palette.text01,
+            color: theme.palette.text02,
             alignItems: 'center',
             fontSize: '14px',
             cursor: 'pointer',
+            padding: '5px 0',
             '&:hover': {
                 backgroundColor: theme.palette.ui04
             }

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

@@ -1,35 +1,64 @@
 /* eslint-disable lines-around-comment */
+import { Theme } from '@mui/material';
+import i18next from 'i18next';
 import React, { useCallback, useEffect, useState } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
 
 import { IState } from '../../app/types';
 // @ts-ignore
 import { TRANSLATION_LANGUAGES, TRANSLATION_LANGUAGES_HEAD } from '../../base/i18n';
+import { translate, translateToHTML } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
 // @ts-ignore
+import { openSettingsDialog } from '../../settings/actions';
+// @ts-ignore
+import { SETTINGS_TABS } from '../../settings/constants';
+// @ts-ignore
 import { setRequestingSubtitles, toggleLanguageSelectorDialog, updateTranslationLanguage } from '../actions';
 
 import LanguageList from './LanguageList';
 
-interface ILanguageSelectorDialogProps {
+
+interface ILanguageSelectorDialogProps extends WithTranslation {
     _language: string;
     _translationLanguages: Array<string>;
     _translationLanguagesHead: Array<string>;
-    t: Function;
 }
 
+const useStyles = makeStyles()((theme: Theme) => {
+    return {
+        paragraphWrapper: {
+            fontSize: 14,
+            margin: '10px 0px',
+            color: theme.palette.text01
+        },
+        spanWrapper: {
+            fontWeight: 700,
+            cursor: 'pointer',
+            color: theme.palette.link01,
+            '&:hover': {
+                backgroundColor: theme.palette.ui04,
+                color: theme.palette.link01Hover
+            }
+        }
+    };
+});
+
 /**
  * Component that renders the subtitle language selector dialog.
  *
  * @returns {React$Element<any>}
  */
 const LanguageSelectorDialog = ({
+    t,
     _language,
     _translationLanguages,
     _translationLanguagesHead
 }: ILanguageSelectorDialogProps) => {
-
+    const { classes: styles } = useStyles();
     const dispatch = useDispatch();
     const off = 'transcribing.subtitlesOff';
     const [ language, setLanguage ] = useState(off);
@@ -65,11 +94,24 @@ const LanguageSelectorDialog = ({
         dispatch(toggleLanguageSelectorDialog());
     }, [ _language ]);
 
+    const onSourceLanguageClick = useCallback(() => {
+        dispatch(openSettingsDialog(SETTINGS_TABS.MORE, false));
+    }, []);
+
     return (
         <Dialog
             cancel = {{ hidden: true }}
             ok = {{ hidden: true }}
             titleKey = 'transcribing.subtitles'>
+            <p className = { styles.paragraphWrapper } >
+                {
+                    translateToHTML(t, 'transcribing.sourceLanguageDesc', {
+                        'sourceLanguage': t(`languages:${i18next.language}`).toLowerCase()
+                    })
+                }<span
+                    className = { styles.spanWrapper }
+                    onClick = { onSourceLanguageClick }>{t('transcribing.sourceLanguageHere')}.</span>
+            </p>
             <LanguageList
                 items = { listItems }
                 onLanguageSelected = { onLanguageSelected }
@@ -102,4 +144,4 @@ function mapStateToProps(state: IState) {
     };
 }
 
-export default connect(mapStateToProps)(LanguageSelectorDialog);
+export default translate(connect(mapStateToProps)(LanguageSelectorDialog));