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

This commit is contained in:
tamasdomokos 2022-10-18 14:42:51 +03:00 committed by GitHub
parent 9ae236a010
commit 30051d2b0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 5 deletions

View File

@ -1226,6 +1226,8 @@
"labelToolTip": "The meeting is being transcribed", "labelToolTip": "The meeting is being transcribed",
"off": "Transcribing stopped", "off": "Transcribing stopped",
"pending": "Preparing to transcribe the meeting...", "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", "start": "Start showing subtitles",
"stop": "Stop showing subtitles", "stop": "Stop showing subtitles",
"subtitles": "Subtitles", "subtitles": "Subtitles",

View File

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

View File

@ -1,35 +1,64 @@
/* eslint-disable lines-around-comment */ /* eslint-disable lines-around-comment */
import { Theme } from '@mui/material';
import i18next from 'i18next';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { WithTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../app/types'; import { IState } from '../../app/types';
// @ts-ignore // @ts-ignore
import { TRANSLATION_LANGUAGES, TRANSLATION_LANGUAGES_HEAD } from '../../base/i18n'; import { TRANSLATION_LANGUAGES, TRANSLATION_LANGUAGES_HEAD } from '../../base/i18n';
import { translate, translateToHTML } from '../../base/i18n/functions';
import { connect } from '../../base/redux/functions'; import { connect } from '../../base/redux/functions';
import Dialog from '../../base/ui/components/web/Dialog'; import Dialog from '../../base/ui/components/web/Dialog';
// @ts-ignore // @ts-ignore
import { openSettingsDialog } from '../../settings/actions';
// @ts-ignore
import { SETTINGS_TABS } from '../../settings/constants';
// @ts-ignore
import { setRequestingSubtitles, toggleLanguageSelectorDialog, updateTranslationLanguage } from '../actions'; import { setRequestingSubtitles, toggleLanguageSelectorDialog, updateTranslationLanguage } from '../actions';
import LanguageList from './LanguageList'; import LanguageList from './LanguageList';
interface ILanguageSelectorDialogProps {
interface ILanguageSelectorDialogProps extends WithTranslation {
_language: string; _language: string;
_translationLanguages: Array<string>; _translationLanguages: Array<string>;
_translationLanguagesHead: 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. * Component that renders the subtitle language selector dialog.
* *
* @returns {React$Element<any>} * @returns {React$Element<any>}
*/ */
const LanguageSelectorDialog = ({ const LanguageSelectorDialog = ({
t,
_language, _language,
_translationLanguages, _translationLanguages,
_translationLanguagesHead _translationLanguagesHead
}: ILanguageSelectorDialogProps) => { }: ILanguageSelectorDialogProps) => {
const { classes: styles } = useStyles();
const dispatch = useDispatch(); const dispatch = useDispatch();
const off = 'transcribing.subtitlesOff'; const off = 'transcribing.subtitlesOff';
const [ language, setLanguage ] = useState(off); const [ language, setLanguage ] = useState(off);
@ -65,11 +94,24 @@ const LanguageSelectorDialog = ({
dispatch(toggleLanguageSelectorDialog()); dispatch(toggleLanguageSelectorDialog());
}, [ _language ]); }, [ _language ]);
const onSourceLanguageClick = useCallback(() => {
dispatch(openSettingsDialog(SETTINGS_TABS.MORE, false));
}, []);
return ( return (
<Dialog <Dialog
cancel = {{ hidden: true }} cancel = {{ hidden: true }}
ok = {{ hidden: true }} ok = {{ hidden: true }}
titleKey = 'transcribing.subtitles'> 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 <LanguageList
items = { listItems } items = { listItems }
onLanguageSelected = { onLanguageSelected } onLanguageSelected = { onLanguageSelected }
@ -102,4 +144,4 @@ function mapStateToProps(state: IState) {
}; };
} }
export default connect(mapStateToProps)(LanguageSelectorDialog); export default translate(connect(mapStateToProps)(LanguageSelectorDialog));