bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
2022-06-16 16:59:01 -03:00

132 lines
4.0 KiB
JavaScript
Executable File

import React, { PureComponent } from 'react';
import CaptionsButtonContainer from '/imports/ui/components/captions/button/container';
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
import Styled from './styles';
import ActionsDropdown from './actions-dropdown/container';
import ScreenshareButtonContainer from '/imports/ui/components/actions-bar/screenshare/container';
import AudioControlsContainer from '../audio/audio-controls/container';
import JoinVideoOptionsContainer from '../video-provider/video-button/container';
import PresentationOptionsContainer from './presentation-options/component';
import Button from '/imports/ui/components/common/button/component';
class ActionsBar extends PureComponent {
render() {
const {
amIPresenter,
amIModerator,
enableVideo,
presentationIsOpen,
setPresentationIsOpen,
handleTakePresenter,
intl,
isSharingVideo,
hasScreenshare,
stopExternalVideoShare,
isCaptionsAvailable,
isMeteorConnected,
isPollingEnabled,
isSelectRandomUserEnabled,
isRaiseHandButtonEnabled,
isPresentationDisabled,
isThereCurrentPresentation,
allowExternalVideo,
setEmojiStatus,
currentUser,
shortcuts,
layoutContextDispatch,
actionsBarStyle,
setMeetingLayout,
showPushLayout,
setPushLayout,
} = this.props;
return (
<Styled.ActionsBar
style={
{
height: actionsBarStyle.innerHeight,
}
}
>
<Styled.Left>
<ActionsDropdown {...{
amIPresenter,
amIModerator,
isPollingEnabled,
isSelectRandomUserEnabled,
allowExternalVideo,
handleTakePresenter,
intl,
isSharingVideo,
stopExternalVideoShare,
isMeteorConnected,
setMeetingLayout,
setPushLayout,
presentationIsOpen,
showPushLayout,
}}
/>
{isCaptionsAvailable
? (
<CaptionsButtonContainer {...{ intl }} />
)
: null}
</Styled.Left>
<Styled.Center>
<AudioControlsContainer />
{enableVideo
? (
<JoinVideoOptionsContainer />
)
: null}
<ScreenshareButtonContainer {...{
amIPresenter,
isMeteorConnected,
}}
/>
</Styled.Center>
<Styled.Right>
<PresentationOptionsContainer
presentationIsOpen={presentationIsOpen}
setPresentationIsOpen={setPresentationIsOpen}
layoutContextDispatch={layoutContextDispatch}
hasPresentation={isThereCurrentPresentation}
hasExternalVideo={isSharingVideo}
hasScreenshare={hasScreenshare}
/>
{isRaiseHandButtonEnabled
? (
<Button
icon="hand"
label={intl.formatMessage({
id: `app.actionsBar.emojiMenu.${
currentUser.emoji === 'raiseHand'
? 'lowerHandLabel'
: 'raiseHandLabel'
}`,
})}
accessKey={shortcuts.raisehand}
color={currentUser.emoji === 'raiseHand' ? 'primary' : 'default'}
data-test={currentUser.emoji === 'raiseHand' ? 'lowerHandLabel' : 'raiseHandLabel'}
ghost={currentUser.emoji !== 'raiseHand'}
emoji={currentUser.emoji}
hideLabel
circle
size="lg"
onClick={() => {
setEmojiStatus(
currentUser.userId,
currentUser.emoji === 'raiseHand' ? 'none' : 'raiseHand',
);
}}
/>
)
: null}
</Styled.Right>
</Styled.ActionsBar>
);
}
}
export default withShortcutHelper(ActionsBar, ['raiseHand']);