bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/captions/component.jsx
Pedro Beschorner Marin 810deb907b refactor(etherpad): access control et al.
Move all Etherpad's access control from Meteor to a separated [Node application](https://github.com/bigbluebutton/bbb-pads).
This new app uses [Etherpad's API](https://etherpad.org/doc/v1.8.4/#index_overview)
to create groups and manage session tokens for users to access them. Each group
represents one distinct pad at the html5 client.

- Removed locked users' access to pads: replaced readOnly pad's access with a new pad's content sharing routine
- Pad's access is now controlled by [Etherpad's API](https://etherpad.org/doc/v1.8.4/#index_overview)
- Closed captions edited content now reflects at it's live feedback
- Improved closed caption's dictation mode live feedback
- Moved all Etherpad's API control from Meteor to a separated [app](https://github.com/bigbluebutton/bbb-pads)
- Included access control both in akka-apps and bbb-pads
2022-01-21 16:56:01 -03:00

135 lines
4.3 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
import Button from '/imports/ui/components/button/component';
import PadContainer from '/imports/ui/components/pads/container';
import Service from '/imports/ui/components/captions/service';
import Styled from './styles';
import { PANELS, ACTIONS } from '/imports/ui/components/layout/enums';
import browserInfo from '/imports/utils/browserInfo';
const intlMessages = defineMessages({
hide: {
id: 'app.captions.hide',
description: 'Label for hiding closed captions',
},
takeOwnership: {
id: 'app.captions.ownership',
description: 'Label for taking ownership of closed captions',
},
takeOwnershipTooltip: {
id: 'app.captions.ownershipTooltip',
description: 'Text for button for taking ownership of closed captions',
},
dictationStart: {
id: 'app.captions.dictationStart',
description: 'Label for starting speech recognition',
},
dictationStop: {
id: 'app.captions.dictationStop',
description: 'Label for stoping speech recognition',
},
dictationOnDesc: {
id: 'app.captions.dictationOnDesc',
description: 'Aria description for button that turns on speech recognition',
},
dictationOffDesc: {
id: 'app.captions.dictationOffDesc',
description: 'Aria description for button that turns off speech recognition',
},
});
const propTypes = {
locale: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
ownerId: PropTypes.string.isRequired,
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired,
}).isRequired,
dictation: PropTypes.bool.isRequired,
dictating: PropTypes.bool.isRequired,
isRTL: PropTypes.bool.isRequired,
hasPermission: PropTypes.bool.isRequired,
layoutContextDispatch: PropTypes.func.isRequired,
isResizing: PropTypes.bool.isRequired,
};
const Captions = ({
locale,
intl,
ownerId,
name,
dictation,
dictating,
isRTL,
hasPermission,
layoutContextDispatch,
isResizing,
}) => {
const { isChrome } = browserInfo;
return (
<Styled.Captions isChrome={isChrome}>
<Styled.Header>
<Styled.Title>
<Styled.HideBtn
onClick={() => {
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: false,
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.NONE,
});
}}
aria-label={intl.formatMessage(intlMessages.hide)}
label={name}
icon={isRTL ? 'right_arrow' : 'left_arrow'}
/>
</Styled.Title>
{Service.amICaptionsOwner(ownerId)
? (
<span>
<Button
onClick={dictating
? () => Service.stopDictation(locale)
: () => Service.startDictation(locale)}
label={dictating
? intl.formatMessage(intlMessages.dictationStop)
: intl.formatMessage(intlMessages.dictationStart)}
aria-describedby="dictationBtnDesc"
color={dictating ? 'danger' : 'primary'}
disabled={!dictation}
/>
<div id="dictationBtnDesc" hidden>
{dictating
? intl.formatMessage(intlMessages.dictationOffDesc)
: intl.formatMessage(intlMessages.dictationOnDesc)}
</div>
</span>
) : (
<Button
color="primary"
tooltipLabel={intl.formatMessage(intlMessages.takeOwnershipTooltip, { 0: name })}
onClick={() => Service.updateCaptionsOwner(locale, name)}
aria-label={intl.formatMessage(intlMessages.takeOwnership)}
label={intl.formatMessage(intlMessages.takeOwnership)}
/>
)}
</Styled.Header>
<PadContainer
externalId={locale}
hasPermission={hasPermission}
isResizing={isResizing}
isRTL={isRTL}
/>
</Styled.Captions>
);
};
Captions.propTypes = propTypes;
export default injectWbResizeEvent(injectIntl(Captions));