jitsi-meet/react/features/subtitles/components/web/ClosedCaptionButton.tsx
theluyuan 38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
init
2025-09-02 14:49:16 +08:00

93 lines
2.7 KiB
TypeScript

import { connect } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { IconSubtitles } from '../../../base/icons/svg';
import { openCCPanel } from '../../../chat/actions.any';
import { toggleLanguageSelectorDialog } from '../../actions.web';
import { canStartSubtitles, isCCTabEnabled } from '../../functions.any';
import {
AbstractClosedCaptionButton,
IAbstractProps,
_abstractMapStateToProps
} from '../AbstractClosedCaptionButton';
/**
* A button which starts/stops the transcriptions.
*/
class ClosedCaptionButton
extends AbstractClosedCaptionButton {
override icon = IconSubtitles;
override labelProps = {
language: this.props.t(this.props._language ?? 'transcribing.subtitlesOff'),
languages: this.props.t(this.props.languages ?? ''),
languagesHead: this.props.t(this.props.languagesHead ?? '')
};
/**
* Gets the current button label based on the CC tab state.
*
* @returns {void}
*/
override _getLabel() {
const { _isCCTabEnabled } = this.props;
return _isCCTabEnabled ? 'toolbar.closedCaptions' : 'toolbar.startSubtitles';
}
/**
* Returns the accessibility label for the button.
*
* @returns {string} Accessibility label.
*/
override _getAccessibilityLabel() {
const { _isCCTabEnabled } = this.props;
return _isCCTabEnabled ? 'toolbar.accessibilityLabel.closedCaptions' : 'toolbar.accessibilityLabel.cc';
}
/**
* Returns the tooltip text based on the CC tab state.
*
* @returns {string} The tooltip text.
*/
override _getTooltip() {
const { _isCCTabEnabled } = this.props;
return _isCCTabEnabled ? 'transcribing.openClosedCaptions' : 'transcribing.ccButtonTooltip';
}
/**
* Toggle language selection dialog.
*
* @returns {void}
*/
override _handleClickOpenLanguageSelector() {
const { dispatch, _isCCTabEnabled } = this.props;
if (_isCCTabEnabled) {
dispatch(openCCPanel());
} else {
dispatch(toggleLanguageSelectorDialog());
}
}
}
/**
* Maps redux state to component props.
*
* @param {Object} state - The redux state.
* @param {Object} ownProps - The component's own props.
* @returns {Object} Mapped props for the component.
*/
function mapStateToProps(state: IReduxState, ownProps: IAbstractProps) {
const { visible = canStartSubtitles(state) || isCCTabEnabled(state) } = ownProps;
return _abstractMapStateToProps(state, {
...ownProps,
visible
});
}
export default translate(connect(mapStateToProps)(ClosedCaptionButton));