diff --git a/lang/main.json b/lang/main.json index c49f91345..0cd581a85 100644 --- a/lang/main.json +++ b/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 {{sourceLanguage}}.
You can change it from ", + "sourceLanguageHere": "here", "start": "Start showing subtitles", "stop": "Stop showing subtitles", "subtitles": "Subtitles", diff --git a/react/features/subtitles/components/LanguageListItem.tsx b/react/features/subtitles/components/LanguageListItem.tsx index 3e6ce208e..1c8897b8e 100644 --- a/react/features/subtitles/components/LanguageListItem.tsx +++ b/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 } diff --git a/react/features/subtitles/components/LanguageSelectorDialog.web.tsx b/react/features/subtitles/components/LanguageSelectorDialog.web.tsx index cb8907f10..5f23f7ae2 100644 --- a/react/features/subtitles/components/LanguageSelectorDialog.web.tsx +++ b/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; _translationLanguagesHead: Array; - 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} */ 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 ( +

+ { + translateToHTML(t, 'transcribing.sourceLanguageDesc', { + 'sourceLanguage': t(`languages:${i18next.language}`).toLowerCase() + }) + }{t('transcribing.sourceLanguageHere')}. +