76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { WithTranslation } from 'react-i18next';
|
|
import { ScrollView, StyleProp, ViewStyle } from 'react-native';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { IReduxState } from '../../../app/types';
|
|
import { translate } from '../../../base/i18n/functions';
|
|
import JitsiScreen from '../../../base/modal/components/JitsiScreen';
|
|
import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
|
|
import { setAudioTranslationLanguage, setParticipantAudioTranslationLanguage } from '../../actions';
|
|
import { SUPPORTED_TRANSLATION_LANGUAGES } from '../../constants';
|
|
|
|
import AudioTranslationLanguageItem from './AudioTranslationLanguageItem';
|
|
import styles from './styles';
|
|
|
|
interface IProps extends WithTranslation {
|
|
|
|
/**
|
|
* Navigation route; params.participantId scopes the selector to one participant.
|
|
*/
|
|
route?: { params?: { participantId?: string; }; };
|
|
}
|
|
|
|
/**
|
|
* A screen for selecting the AI audio-translation target language (or off).
|
|
*
|
|
* @param {IProps} props - The component's props.
|
|
* @returns {ReactElement}
|
|
*/
|
|
const AudioTranslationDialog = ({ route, t }: IProps) => {
|
|
const participantId = route?.params?.participantId;
|
|
const dispatch = useDispatch();
|
|
const defaultLanguage = useSelector((state: IReduxState) => state['features/audio-translation'].language);
|
|
const participantLanguages
|
|
= useSelector((state: IReduxState) => state['features/audio-translation'].participantLanguages);
|
|
|
|
// Highlight the effective language for the target: the per-participant override if one is set, else the
|
|
// default. (For the conference-wide screen there is no participantId, so this is just the default.)
|
|
const language = participantId && participantId in participantLanguages
|
|
? participantLanguages[participantId]
|
|
: defaultLanguage;
|
|
|
|
const onSelect = useCallback((code: string | null) => {
|
|
if (participantId) {
|
|
dispatch(setParticipantAudioTranslationLanguage(participantId, code));
|
|
} else {
|
|
dispatch(setAudioTranslationLanguage(code));
|
|
}
|
|
goBack();
|
|
}, [ dispatch, participantId ]);
|
|
|
|
return (
|
|
<JitsiScreen style = { styles.container }>
|
|
<ScrollView
|
|
bounces = { false }
|
|
style = { styles.itemsContainer as StyleProp<ViewStyle> }>
|
|
<AudioTranslationLanguageItem
|
|
code = { null }
|
|
label = { t('toolbar.audioTranslationOff') }
|
|
onSelect = { onSelect }
|
|
selected = { !language } />
|
|
{ SUPPORTED_TRANSLATION_LANGUAGES.map(({ code, label }) => (
|
|
<AudioTranslationLanguageItem
|
|
code = { code }
|
|
key = { code }
|
|
label = { label }
|
|
onSelect = { onSelect }
|
|
selected = { language === code } />
|
|
)) }
|
|
</ScrollView>
|
|
</JitsiScreen>
|
|
);
|
|
};
|
|
|
|
export default translate(AudioTranslationDialog);
|