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",
"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",

View File

@ -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
}

View File

@ -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));