100 lines
4.5 KiB
TypeScript
100 lines
4.5 KiB
TypeScript
import React, { ComponentType, useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { IReduxState, IStore } from '../../app/types';
|
|
import { isRecorderTranscriptionsRunning } from '../../transcribing/functions';
|
|
import { setRequestingSubtitles } from '../actions.any';
|
|
import { getAvailableSubtitlesLanguages, isTranslationEnabled } from '../functions.any';
|
|
|
|
export interface IAbstractLanguageSelectorDialogProps {
|
|
dispatch: IStore['dispatch'];
|
|
language: string | null;
|
|
listItems: Array<any>;
|
|
onLanguageSelected: (e: string) => void;
|
|
|
|
/**
|
|
* Whether picking a language should open the recording/transcription dialog instead of applying the language.
|
|
*
|
|
* With async transcription there is no transcriber to dial: transcription is started through room metadata, from
|
|
* that dialog. So the first pick has to go there. Once transcription is running, picking a language just applies
|
|
* it, like it always has.
|
|
*/
|
|
startWithRecordingDialog: boolean;
|
|
subtitles: string;
|
|
t: Function;
|
|
}
|
|
|
|
|
|
/**
|
|
* Higher Order Component taking in a concrete LanguageSelector component and
|
|
* augmenting it with state/behavior common to both web and native implementations.
|
|
*
|
|
* @param {React.Component} Component - The concrete component.
|
|
* @returns {React.Component}
|
|
*/
|
|
const AbstractLanguageSelectorDialog = (Component: ComponentType<IAbstractLanguageSelectorDialogProps>) => () => {
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const language = useSelector((state: IReduxState) => state['features/subtitles']._language);
|
|
|
|
// The value for the selected language contains "translation-languages:" prefix.
|
|
const selectedLanguage = language?.replace('translation-languages:', '');
|
|
const languageCodes = useSelector((state: IReduxState) => getAvailableSubtitlesLanguages(state, selectedLanguage));
|
|
|
|
const noLanguageLabel = 'transcribing.subtitlesOff';
|
|
const selected = language ?? noLanguageLabel;
|
|
const items = [ noLanguageLabel, ...languageCodes.map((lang: string) => `translation-languages:${lang}`) ];
|
|
const listItems = items
|
|
.map((lang, index) => {
|
|
return {
|
|
id: lang + index,
|
|
lang,
|
|
selected: lang === selected
|
|
};
|
|
});
|
|
const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
|
|
const translationEnabled = useSelector(isTranslationEnabled);
|
|
const asyncTranscription = Boolean(conference?.getMetadataHandler()?.getMetadata()?.asyncTranscription);
|
|
// isRecorderTranscriptionsRunning, not isTranscribing. isTranscribing is true in two cases: a live
|
|
// Jigasi transcriber is in the room, or jicofo set the `audio-recording-enabled` conference property.
|
|
//
|
|
// That property name is misleading. It reads as though it tracks recording, but jicofo sets it from
|
|
// one place only, setEnableTranscribing, which is driven by the room metadata
|
|
// (recording.isTranscribingEnabled && asyncTranscription). Starting a recording on its own never
|
|
// reaches it. The name is left over from the backend export being reused for recording, which also
|
|
// shows in jicofo's reference.conf, where the `transcription.url-template` example points at a
|
|
// /recorder/ path.
|
|
//
|
|
// So the property does imply the metadata flag, but the Jigasi case does not. The stricter selector
|
|
// keeps the explicit start dialog where the two differ, instead of letting a language pick start
|
|
// async transcription as a side effect of the metadata write in the subtitles middleware.
|
|
const transcribing = useSelector(isRecorderTranscriptionsRunning);
|
|
const startWithRecordingDialog = asyncTranscription && !transcribing;
|
|
|
|
const onLanguageSelected = useCallback((value: string) => {
|
|
const _selectedLanguage = value === noLanguageLabel ? null : value;
|
|
const enabled = Boolean(_selectedLanguage);
|
|
const displaySubtitles = enabled;
|
|
|
|
dispatch(setRequestingSubtitles(enabled, displaySubtitles, _selectedLanguage));
|
|
}, [ language ]);
|
|
|
|
if (!translationEnabled) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Component
|
|
dispatch = { dispatch }
|
|
language = { language }
|
|
listItems = { listItems }
|
|
onLanguageSelected = { onLanguageSelected }
|
|
startWithRecordingDialog = { startWithRecordingDialog }
|
|
subtitles = { selected }
|
|
t = { t } />
|
|
);
|
|
};
|
|
|
|
export default AbstractLanguageSelectorDialog;
|