130 lines
3.5 KiB
TypeScript
130 lines
3.5 KiB
TypeScript
import { Theme } from '@mui/material';
|
|
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { withStyles } from 'tss-react/mui';
|
|
|
|
import { IReduxState, IStore } from '../../../app/types';
|
|
import { openDialog } from '../../../base/dialog/actions';
|
|
import { translate } from '../../../base/i18n/functions';
|
|
import { IconTranscription } from '../../../base/icons/svg';
|
|
import Label from '../../../base/label/components/web/Label';
|
|
import Tooltip from '../../../base/tooltip/components/Tooltip';
|
|
import { isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
|
|
import { hasRecordingOrTranscriptionFeature } from '../../functions';
|
|
import AbstractRecordingLabel, {
|
|
IProps as AbstractProps
|
|
} from '../AbstractRecordingLabel';
|
|
import RecordingTranscriptionDialog from '../Recording/web/RecordingTranscriptionDialog';
|
|
|
|
interface IProps extends AbstractProps {
|
|
|
|
/**
|
|
* Whether the local participant can control recording/transcription (has either feature enabled).
|
|
*/
|
|
_canControlRecording: boolean;
|
|
|
|
/**
|
|
* An object containing the CSS classes.
|
|
*/
|
|
classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
|
|
|
|
/**
|
|
* The Redux dispatch function.
|
|
*/
|
|
dispatch: IStore['dispatch'];
|
|
|
|
}
|
|
|
|
/**
|
|
* Creates the styles for the component.
|
|
*
|
|
* @param {Object} theme - The current UI theme.
|
|
*
|
|
* @returns {Object}
|
|
*/
|
|
const styles = (theme: Theme) => {
|
|
return {
|
|
transcribing: {
|
|
background: theme.palette.transcriptionIndicator
|
|
}
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Implements a React {@link Component} which displays the current state of
|
|
* transcription.
|
|
*
|
|
* @augments {Component}
|
|
*/
|
|
class TranscribingLabel extends AbstractRecordingLabel<IProps> {
|
|
/**
|
|
* Initializes a new {@code TranscribingLabel} instance.
|
|
*
|
|
* @param {IProps} props - The props of the component.
|
|
*/
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
|
|
this._onClick = this._onClick.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Handles clicking on the label.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
_onClick() {
|
|
if (this.props._canControlRecording) {
|
|
this.props.dispatch(openDialog('RecordingTranscriptionDialog', RecordingTranscriptionDialog));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Renders the platform specific label component.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
override _renderLabel() {
|
|
const { _isTranscribing, t } = this.props;
|
|
const classes = withStyles.getClasses(this.props);
|
|
|
|
if (!_isTranscribing) {
|
|
return null;
|
|
}
|
|
|
|
const content = t('transcribing.labelTooltip');
|
|
|
|
return (
|
|
<Tooltip
|
|
content = { content }
|
|
position = { 'bottom' }>
|
|
<Label
|
|
className = { classes.transcribing }
|
|
icon = { IconTranscription }
|
|
onClick = { this._onClick } />
|
|
</Tooltip>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the Redux state to the associated props.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @private
|
|
* @returns {Object}
|
|
*/
|
|
function _mapStateToProps(state: IReduxState) {
|
|
const _isTranscribing = isRecorderTranscriptionsRunning(state);
|
|
|
|
return {
|
|
_isVisible: _isTranscribing,
|
|
_iAmRecorder: Boolean(state['features/base/config'].iAmRecorder),
|
|
_canControlRecording: hasRecordingOrTranscriptionFeature(state),
|
|
_isTranscribing,
|
|
mode: 'transcribing' // Custom mode for transcription
|
|
};
|
|
}
|
|
|
|
export default withStyles(translate(connect(_mapStateToProps)(TranscribingLabel)), styles);
|