feat(translation): add description for source language (#12371)
This commit is contained in:
parent
9ae236a010
commit
30051d2b0e
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
|
|
Loading…
Reference in New Issue