jiti-meet/react/features/toolbox/components/web/Toolbox.js

1453 lines
44 KiB
JavaScript
Raw Normal View History

// @flow
2017-02-16 23:02:40 +00:00
import React, { Component } from 'react';
import {
ACTION_SHORTCUT_TRIGGERED,
createShortcutEvent,
createToolbarEvent,
sendAnalytics
} from '../../../analytics';
import { openDialog, toggleDialog } from '../../../base/dialog';
2020-08-05 07:58:16 +00:00
import { isMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n';
2019-08-30 16:39:06 +00:00
import {
IconChat,
IconCodeBlock,
2019-08-30 16:39:06 +00:00
IconExitFullScreen,
IconFeedback,
IconFullScreen,
IconInviteMore,
2019-08-30 16:39:06 +00:00
IconOpenInNew,
IconPresentation,
IconRaisedHand,
IconRec,
IconShareDesktop,
IconShareVideo
} from '../../../base/icons';
2017-02-16 23:02:40 +00:00
import {
getLocalParticipant,
getParticipants,
participantUpdated
} from '../../../base/participants';
import { connect, equals } from '../../../base/redux';
2020-07-24 12:14:33 +00:00
import { OverflowMenuItem } from '../../../base/toolbox/components';
import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
2019-07-03 15:38:25 +00:00
import { VideoBlurButton } from '../../../blur';
import { CHAT_SIZE, ChatCounter, toggleChat } from '../../../chat';
import { EmbedMeetingDialog } from '../../../embed-meeting';
import { SharedDocumentButton } from '../../../etherpad';
import { openFeedbackDialog } from '../../../feedback';
import { beginAddPeople } from '../../../invite';
import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
import {
LocalRecordingButton,
LocalRecordingInfoDialog
} from '../../../local-recording';
feat(recording): frontend logic can support live streaming and recording (#2952) * feat(recording): frontend logic can support live streaming and recording Instead of either live streaming or recording, now both can live together. The changes to facilitate such include the following: - Killing the state storing in Recording.js. Instead state is stored in the lib and updated in redux for labels to display the necessary state updates. - Creating a new container, Labels, for recording labels. Previously labels were manually created and positioned. The container can create a reasonable number of labels and only the container itself needs to be positioned with CSS. The VideoQualityLabel has been shoved into the container as well because it moves along with the recording labels. - The action for updating recording state has been modified to enable updating an array of recording sessions to support having multiple sessions. - Confirmation dialogs for stopping and starting a file recording session have been created, as they previously were jquery modals opened by Recording.js. - Toolbox.web displays live streaming and recording buttons based on configuration instead of recording availability. - VideoQualityLabel and RecordingLabel have been simplified to remove any positioning logic, as the Labels container handles such. - Previous recording state update logic has been moved into the RecordingLabel component. Each RecordingLabel is in charge of displaying state for a recording session. The display UX has been left alone. - Sipgw availability is no longer broadcast so remove logic depending on its state. Some moving around of code was necessary to get around linting errors about the existing code being too deeply nested (even though I didn't touch it). * work around lib-jitsi-meet circular dependency issues * refactor labels to use html base * pass in translation keys to video quality label * add video quality classnames for torture tests * break up, rearrange recorder session update listener * add comment about disabling startup resize animation * rename session to sessionData * chore(deps): update to latest lib for recording changes
2018-05-16 14:00:16 +00:00
import {
2018-07-05 11:17:45 +00:00
LiveStreamButton,
RecordButton
feat(recording): frontend logic can support live streaming and recording (#2952) * feat(recording): frontend logic can support live streaming and recording Instead of either live streaming or recording, now both can live together. The changes to facilitate such include the following: - Killing the state storing in Recording.js. Instead state is stored in the lib and updated in redux for labels to display the necessary state updates. - Creating a new container, Labels, for recording labels. Previously labels were manually created and positioned. The container can create a reasonable number of labels and only the container itself needs to be positioned with CSS. The VideoQualityLabel has been shoved into the container as well because it moves along with the recording labels. - The action for updating recording state has been modified to enable updating an array of recording sessions to support having multiple sessions. - Confirmation dialogs for stopping and starting a file recording session have been created, as they previously were jquery modals opened by Recording.js. - Toolbox.web displays live streaming and recording buttons based on configuration instead of recording availability. - VideoQualityLabel and RecordingLabel have been simplified to remove any positioning logic, as the Labels container handles such. - Previous recording state update logic has been moved into the RecordingLabel component. Each RecordingLabel is in charge of displaying state for a recording session. The display UX has been left alone. - Sipgw availability is no longer broadcast so remove logic depending on its state. Some moving around of code was necessary to get around linting errors about the existing code being too deeply nested (even though I didn't touch it). * work around lib-jitsi-meet circular dependency issues * refactor labels to use html base * pass in translation keys to video quality label * add video quality classnames for torture tests * break up, rearrange recorder session update listener * add comment about disabling startup resize animation * rename session to sessionData * chore(deps): update to latest lib for recording changes
2018-05-16 14:00:16 +00:00
} from '../../../recording';
import { SecurityDialogButton } from '../../../security';
import {
SETTINGS_TABS,
SettingsButton,
openSettingsDialog
} from '../../../settings';
import { toggleSharedVideo } from '../../../shared-video';
import { SpeakerStats } from '../../../speaker-stats';
2020-05-20 10:57:03 +00:00
import {
ClosedCaptionButton
} from '../../../subtitles';
import {
TileViewButton,
2020-07-23 13:12:25 +00:00
shouldDisplayTileView,
toggleTileView
} from '../../../video-layout';
import {
OverflowMenuVideoQualityItem,
VideoQualityDialog
} from '../../../video-quality';
import {
setFullScreen,
setOverflowMenuVisible,
setToolbarHovered
} from '../../actions';
2019-03-12 17:45:53 +00:00
import { isToolboxVisible } from '../../functions';
2020-05-20 10:57:03 +00:00
import DownloadButton from '../DownloadButton';
import HangupButton from '../HangupButton';
2019-10-11 18:09:50 +00:00
import HelpButton from '../HelpButton';
2020-05-20 10:57:03 +00:00
import AudioSettingsButton from './AudioSettingsButton';
import MuteEveryoneButton from './MuteEveryoneButton';
import OverflowMenuButton from './OverflowMenuButton';
import OverflowMenuProfileItem from './OverflowMenuProfileItem';
import ToolbarButton from './ToolbarButton';
import VideoSettingsButton from './VideoSettingsButton';
2018-05-11 02:10:26 +00:00
/**
* The type of the React {@code Component} props of {@link Toolbox}.
*/
type Props = {
/**
* Whether or not the chat feature is currently displayed.
*/
_chatOpen: boolean,
/**
* The {@code JitsiConference} for the current conference.
*/
_conference: Object,
/**
* The tooltip key to use when screensharing is disabled. Or undefined
* if non to be shown and the button to be hidden.
*/
_desktopSharingDisabledTooltipKey: boolean,
/**
* Whether or not screensharing is initialized.
*/
_desktopSharingEnabled: boolean,
/**
* Whether or not a dialog is displayed.
*/
_dialog: boolean,
/**
* Whether or not call feedback can be sent.
*/
_feedbackConfigured: boolean,
/**
* Whether or not the app is currently in full screen.
*/
_fullScreen: boolean,
/**
* Whether or not the tile view is enabled.
*/
_tileViewEnabled: boolean,
/**
* Whether or not the current user is logged in through a JWT.
*/
_isGuest: boolean,
/**
* The ID of the local participant.
*/
_localParticipantID: String,
/**
* The subsection of Redux state for local recording
*/
_localRecState: Object,
/**
* The value for how the conference is locked (or undefined if not locked)
* as defined by room-lock constants.
*/
_locked: boolean,
/**
* Whether or not the overflow menu is visible.
*/
_overflowMenuVisible: boolean,
/**
* Whether or not the local participant's hand is raised.
*/
_raisedHand: boolean,
/**
* Whether or not the local participant is screensharing.
*/
_screensharing: boolean,
/**
* Whether or not the local participant is sharing a YouTube video.
*/
_sharingVideo: boolean,
/**
* Flag showing whether toolbar is visible.
*/
_visible: boolean,
/**
* Set with the buttons which this Toolbox should display.
*/
_visibleButtons: Set<string>,
/**
* Invoked to active other features of the app.
*/
dispatch: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
2018-05-11 02:10:26 +00:00
};
/**
* The type of the React {@code Component} state of {@link Toolbox}.
*/
type State = {
/**
* The width of the browser's window.
*/
windowWidth: number
};
2017-02-16 23:02:40 +00:00
declare var APP: Object;
declare var interfaceConfig: Object;
// XXX: We are not currently using state here, but in the future, when
// interfaceConfig is part of redux we will. This will have to be retrieved from the store.
const visibleButtons = new Set(interfaceConfig.TOOLBAR_BUTTONS);
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* Implements the conference toolbox on React/Web.
*
* @extends Component
2017-02-16 23:02:40 +00:00
*/
class Toolbox extends Component<Props, State> {
2017-02-16 23:02:40 +00:00
/**
* Initializes a new {@code Toolbox} instance.
2017-02-16 23:02:40 +00:00
*
* @param {Props} props - The read-only React {@code Component} props with
* which the new instance is to be initialized.
2017-02-16 23:02:40 +00:00
*/
constructor(props: Props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onMouseOut = this._onMouseOut.bind(this);
this._onMouseOver = this._onMouseOver.bind(this);
this._onResize = this._onResize.bind(this);
this._onSetOverflowVisible = this._onSetOverflowVisible.bind(this);
2017-02-16 23:02:40 +00:00
this._onShortcutToggleChat = this._onShortcutToggleChat.bind(this);
2019-10-11 14:51:42 +00:00
this._onShortcutToggleFullScreen = this._onShortcutToggleFullScreen.bind(this);
this._onShortcutToggleRaiseHand = this._onShortcutToggleRaiseHand.bind(this);
this._onShortcutToggleScreenshare = this._onShortcutToggleScreenshare.bind(this);
this._onShortcutToggleVideoQuality = this._onShortcutToggleVideoQuality.bind(this);
this._onToolbarOpenFeedback = this._onToolbarOpenFeedback.bind(this);
this._onToolbarOpenInvite = this._onToolbarOpenInvite.bind(this);
2019-10-11 14:51:42 +00:00
this._onToolbarOpenKeyboardShortcuts = this._onToolbarOpenKeyboardShortcuts.bind(this);
this._onToolbarOpenSpeakerStats = this._onToolbarOpenSpeakerStats.bind(this);
this._onToolbarOpenEmbedMeeting = this._onToolbarOpenEmbedMeeting.bind(this);
2019-10-11 14:51:42 +00:00
this._onToolbarOpenVideoQuality = this._onToolbarOpenVideoQuality.bind(this);
this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this);
2019-10-11 14:51:42 +00:00
this._onToolbarToggleFullScreen = this._onToolbarToggleFullScreen.bind(this);
this._onToolbarToggleProfile = this._onToolbarToggleProfile.bind(this);
this._onToolbarToggleRaiseHand = this._onToolbarToggleRaiseHand.bind(this);
this._onToolbarToggleScreenshare = this._onToolbarToggleScreenshare.bind(this);
this._onToolbarToggleSharedVideo = this._onToolbarToggleSharedVideo.bind(this);
this._onToolbarOpenLocalRecordingInfoDialog = this._onToolbarOpenLocalRecordingInfoDialog.bind(this);
this._onShortcutToggleTileView = this._onShortcutToggleTileView.bind(this);
this.state = {
windowWidth: window.innerWidth
};
}
2017-02-16 23:02:40 +00:00
/**
* Sets keyboard shortcuts for to trigger ToolbarButtons actions.
2017-02-16 23:02:40 +00:00
*
* @inheritdoc
2017-02-16 23:02:40 +00:00
* @returns {void}
*/
componentDidMount() {
const KEYBOARD_SHORTCUTS = [
this._shouldShowButton('videoquality') && {
character: 'A',
exec: this._onShortcutToggleVideoQuality,
helpDescription: 'keyboardShortcuts.videoQuality'
},
this._shouldShowButton('chat') && {
character: 'C',
exec: this._onShortcutToggleChat,
helpDescription: 'keyboardShortcuts.toggleChat'
},
this._shouldShowButton('desktop') && {
character: 'D',
exec: this._onShortcutToggleScreenshare,
helpDescription: 'keyboardShortcuts.toggleScreensharing'
},
this._shouldShowButton('raisehand') && {
character: 'R',
exec: this._onShortcutToggleRaiseHand,
helpDescription: 'keyboardShortcuts.raiseHand'
},
this._shouldShowButton('fullscreen') && {
character: 'S',
exec: this._onShortcutToggleFullScreen,
helpDescription: 'keyboardShortcuts.fullScreen'
},
this._shouldShowButton('tileview') && {
character: 'W',
exec: this._onShortcutToggleTileView,
helpDescription: 'toolbar.tileViewToggle'
}
];
KEYBOARD_SHORTCUTS.forEach(shortcut => {
if (typeof shortcut === 'object') {
APP.keyboardshortcut.registerShortcut(
shortcut.character,
null,
shortcut.exec,
shortcut.helpDescription);
}
});
window.addEventListener('resize', this._onResize);
}
/**
* Update the visibility of the {@code OverflowMenuButton}.
*
* @inheritdoc
*/
componentDidUpdate(prevProps) {
// Ensure the dialog is closed when the toolbox becomes hidden.
if (prevProps._overflowMenuVisible && !this.props._visible) {
this._onSetOverflowVisible(false);
}
if (prevProps._overflowMenuVisible
&& !prevProps._dialog
&& this.props._dialog) {
this._onSetOverflowVisible(false);
this.props.dispatch(setToolbarHovered(false));
}
if (this.props._chatOpen !== prevProps._chatOpen) {
this._onResize();
}
}
/**
* Removes keyboard shortcuts registered by this component.
*
* @inheritdoc
* @returns {void}
*/
componentWillUnmount() {
[ 'A', 'C', 'D', 'R', 'S' ].forEach(letter =>
APP.keyboardshortcut.unregisterShortcut(letter));
window.removeEventListener('resize', this._onResize);
2017-02-16 23:02:40 +00:00
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { _chatOpen, _visible, _visibleButtons } = this.props;
const rootClassNames = `new-toolbox ${_visible ? 'visible' : ''} ${
_visibleButtons.size ? '' : 'no-buttons'} ${_chatOpen ? 'shift-right' : ''}`;
2017-02-16 23:02:40 +00:00
return (
<div
className = { rootClassNames }
id = 'new-toolbox'
onMouseOut = { this._onMouseOut }
onMouseOver = { this._onMouseOver }>
2019-02-20 23:35:19 +00:00
<div className = 'toolbox-background' />
{ this._renderToolboxContent() }
2017-02-16 23:02:40 +00:00
</div>
);
}
/**
* Callback invoked to display {@code FeedbackDialog}.
2017-02-16 23:02:40 +00:00
*
* @private
* @returns {void}
2017-02-16 23:02:40 +00:00
*/
_doOpenFeedback() {
const { _conference } = this.props;
2017-02-16 23:02:40 +00:00
this.props.dispatch(openFeedbackDialog(_conference));
}
/**
* Callback invoked to display {@code FeedbackDialog}.
*
* @private
* @returns {void}
*/
_doOpenEmbedMeeting() {
this.props.dispatch(openDialog(EmbedMeetingDialog));
}
/**
* Dispatches an action to display {@code KeyboardShortcuts}.
*
* @private
* @returns {void}
*/
_doOpenKeyboardShorcuts() {
this.props.dispatch(openKeyboardShortcutsDialog());
}
/**
* Callback invoked to display {@code SpeakerStats}.
*
* @private
* @returns {void}
*/
_doOpenSpeakerStats() {
this.props.dispatch(openDialog(SpeakerStats, {
conference: this.props._conference
}));
}
/**
* Dispatches an action to open the video quality dialog.
*
* @private
* @returns {void}
*/
_doOpenVideoQuality() {
this.props.dispatch(openDialog(VideoQualityDialog));
}
/**
* Dispatches an action to toggle the display of chat.
*
* @private
* @returns {void}
*/
_doToggleChat() {
this.props.dispatch(toggleChat());
}
/**
* Dispatches an action to toggle screensharing.
*
* @private
* @returns {void}
*/
_doToggleFullScreen() {
const fullScreen = !this.props._fullScreen;
this.props.dispatch(setFullScreen(fullScreen));
}
/**
* Dispatches an action to show or hide the profile edit panel.
*
* @private
* @returns {void}
*/
_doToggleProfile() {
this.props.dispatch(openSettingsDialog(SETTINGS_TABS.PROFILE));
}
/**
* Dispatches an action to toggle the local participant's raised hand state.
*
* @private
* @returns {void}
*/
_doToggleRaiseHand() {
const { _localParticipantID, _raisedHand } = this.props;
this.props.dispatch(participantUpdated({
Associate remote participant w/ JitsiConference (_UPDATED) The commit message of "Associate remote participant w/ JitsiConference (_JOINED)" explains the motivation for this commit. Practically, _JOINED and _LEFT combined with "Remove remote participants who are no longer of interest" should alleviate the problem with multiplying remote participants to an acceptable level of annoyance. Technically though, a remote participant cannot be identified by an ID only. The ID is (somewhat) "unique" in the context of a single JitsiConference instance. So in order to not have to scratch our heads over an obscure corner, racing case, it's better to always identify remote participants by the pair id-conference. Unfortunately, that's a bit of a high order given the existing source code. So I've implemented the cases which are the easiest so that new source code written with participantUpdated is more likely to identify a remote participant with the pair id-conference. Additionally, the commit "Reduce direct read access to the features/base/participants redux state" brings more control back to the functions of the feature base/participants so that one day we can (if we choose to) do something like, for example: If getParticipants is called with a conference, it returns the participants from features/base/participants who are associated with the specified conference. If no conference is specified in the function call, then default to the conference which is the primary focus of the app at the time of the function call. Added to the above, this should allow us to further reduce the cases in which we're identifying remote participants by id only and get us even closer to a more "predictable" behavior in corner, racing cases.
2018-05-22 21:47:43 +00:00
// XXX Only the local participant is allowed to update without
// stating the JitsiConference instance (i.e. participant property
// `conference` for a remote participant) because the local
// participant is uniquely identified by the very fact that there is
// only one local participant.
id: _localParticipantID,
local: true,
raisedHand: !_raisedHand
}));
}
/**
* Dispatches an action to toggle screensharing.
*
* @private
* @returns {void}
*/
_doToggleScreenshare() {
if (this.props._desktopSharingEnabled) {
this.props.dispatch(toggleScreensharing());
2017-02-16 23:02:40 +00:00
}
}
2017-02-16 23:02:40 +00:00
/**
* Dispatches an action to toggle YouTube video sharing.
*
* @private
* @returns {void}
*/
_doToggleSharedVideo() {
this.props.dispatch(toggleSharedVideo());
}
2017-02-16 23:02:40 +00:00
/**
* Dispatches an action to toggle the video quality dialog.
*
* @private
* @returns {void}
*/
_doToggleVideoQuality() {
this.props.dispatch(toggleDialog(VideoQualityDialog));
}
/**
* Dispaches an action to toggle tile view.
*
* @private
* @returns {void}
*/
_doToggleTileView() {
this.props.dispatch(toggleTileView());
}
_onMouseOut: () => void;
2017-02-16 23:02:40 +00:00
/**
* Dispatches an action signaling the toolbar is not being hovered.
*
* @private
* @returns {void}
*/
_onMouseOut() {
this.props.dispatch(setToolbarHovered(false));
2017-02-16 23:02:40 +00:00
}
_onMouseOver: () => void;
2017-02-16 23:02:40 +00:00
/**
* Dispatches an action signaling the toolbar is being hovered.
2017-02-16 23:02:40 +00:00
*
* @private
* @returns {void}
2017-02-16 23:02:40 +00:00
*/
_onMouseOver() {
this.props.dispatch(setToolbarHovered(true));
}
_onResize: () => void;
/**
* A window resize handler used to calculate the number of buttons we can
* fit in the toolbar.
*
* @private
* @returns {void}
*/
_onResize() {
let widthToUse = window.innerWidth;
// Take chat size into account when resizing toolbox.
if (this.props._chatOpen) {
widthToUse -= CHAT_SIZE;
}
if (this.state.windowWidth !== widthToUse) {
this.setState({ windowWidth: widthToUse });
}
}
_onSetOverflowVisible: (boolean) => void;
/**
* Sets the visibility of the overflow menu.
*
* @param {boolean} visible - Whether or not the overflow menu should be
* displayed.
* @private
* @returns {void}
*/
_onSetOverflowVisible(visible) {
this.props.dispatch(setOverflowMenuVisible(visible));
}
_onShortcutToggleChat: () => void;
/**
* Creates an analytics keyboard shortcut event and dispatches an action for
* toggling the display of chat.
*
* @private
* @returns {void}
*/
_onShortcutToggleChat() {
sendAnalytics(createShortcutEvent(
'toggle.chat',
{
enable: !this.props._chatOpen
}));
this._doToggleChat();
}
_onShortcutToggleVideoQuality: () => void;
/**
* Creates an analytics keyboard shortcut event and dispatches an action for
* toggling the display of Video Quality.
*
* @private
* @returns {void}
*/
_onShortcutToggleVideoQuality() {
sendAnalytics(createShortcutEvent('video.quality'));
this._doToggleVideoQuality();
}
_onShortcutToggleTileView: () => void;
/**
* Dispatches an action for toggling the tile view.
*
* @private
* @returns {void}
*/
_onShortcutToggleTileView() {
sendAnalytics(createShortcutEvent(
'toggle.tileview',
{
enable: !this.props._tileViewEnabled
}));
this._doToggleTileView();
}
_onShortcutToggleFullScreen: () => void;
/**
* Creates an analytics keyboard shortcut event and dispatches an action for
* toggling full screen mode.
*
* @private
* @returns {void}
*/
_onShortcutToggleFullScreen() {
sendAnalytics(createShortcutEvent(
'toggle.fullscreen',
{
enable: !this.props._fullScreen
}));
this._doToggleFullScreen();
}
_onShortcutToggleRaiseHand: () => void;
/**
* Creates an analytics keyboard shortcut event and dispatches an action for
* toggling raise hand.
*
* @private
* @returns {void}
*/
_onShortcutToggleRaiseHand() {
sendAnalytics(createShortcutEvent(
'toggle.raise.hand',
ACTION_SHORTCUT_TRIGGERED,
{ enable: !this.props._raisedHand }));
this._doToggleRaiseHand();
}
_onShortcutToggleScreenshare: () => void;
/**
* Creates an analytics keyboard shortcut event and dispatches an action for
* toggling screensharing.
*
* @private
* @returns {void}
*/
_onShortcutToggleScreenshare() {
sendAnalytics(createToolbarEvent(
'screen.sharing',
{
enable: !this.props._screensharing
}));
this._doToggleScreenshare();
}
_onToolbarOpenFeedback: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* display of feedback.
*
* @private
* @returns {void}
*/
_onToolbarOpenFeedback() {
sendAnalytics(createToolbarEvent('feedback'));
this._doOpenFeedback();
}
_onToolbarOpenInvite: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for opening
* the modal for inviting people directly into the conference.
*
* @private
* @returns {void}
*/
_onToolbarOpenInvite() {
sendAnalytics(createToolbarEvent('invite'));
this.props.dispatch(beginAddPeople());
}
_onToolbarOpenKeyboardShortcuts: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for opening
* the modal for showing available keyboard shortcuts.
*
* @private
* @returns {void}
*/
_onToolbarOpenKeyboardShortcuts() {
sendAnalytics(createToolbarEvent('shortcuts'));
this._doOpenKeyboardShorcuts();
}
_onToolbarOpenEmbedMeeting: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for opening
* the embed meeting modal.
*
* @private
* @returns {void}
*/
_onToolbarOpenEmbedMeeting() {
sendAnalytics(createToolbarEvent('embed.meeting'));
this._doOpenEmbedMeeting();
}
_onToolbarOpenSpeakerStats: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for opening
* the speaker stats modal.
*
* @private
* @returns {void}
*/
_onToolbarOpenSpeakerStats() {
sendAnalytics(createToolbarEvent('speaker.stats'));
this._doOpenSpeakerStats();
}
_onToolbarOpenVideoQuality: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* open the video quality dialog.
*
* @private
* @returns {void}
*/
_onToolbarOpenVideoQuality() {
sendAnalytics(createToolbarEvent('video.quality'));
this._doOpenVideoQuality();
}
_onToolbarToggleChat: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* the display of chat.
*
* @private
* @returns {void}
*/
_onToolbarToggleChat() {
sendAnalytics(createToolbarEvent(
'toggle.chat',
{
enable: !this.props._chatOpen
}));
this._doToggleChat();
}
_onToolbarToggleFullScreen: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* full screen mode.
*
* @private
* @returns {void}
*/
_onToolbarToggleFullScreen() {
sendAnalytics(createToolbarEvent(
'toggle.fullscreen',
{
enable: !this.props._fullScreen
}));
this._doToggleFullScreen();
}
_onToolbarToggleProfile: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for showing
* or hiding the profile edit panel.
*
* @private
* @returns {void}
*/
_onToolbarToggleProfile() {
sendAnalytics(createToolbarEvent('profile'));
this._doToggleProfile();
}
_onToolbarToggleRaiseHand: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* raise hand.
*
* @private
* @returns {void}
*/
_onToolbarToggleRaiseHand() {
sendAnalytics(createToolbarEvent(
'raise.hand',
{ enable: !this.props._raisedHand }));
this._doToggleRaiseHand();
}
_onToolbarToggleScreenshare: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* screensharing.
*
* @private
* @returns {void}
*/
_onToolbarToggleScreenshare() {
if (!this.props._desktopSharingEnabled) {
return;
}
sendAnalytics(createShortcutEvent(
'toggle.screen.sharing',
ACTION_SHORTCUT_TRIGGERED,
{ enable: !this.props._screensharing }));
this._doToggleScreenshare();
}
_onToolbarToggleSharedVideo: () => void;
/**
* Creates an analytics toolbar event and dispatches an action for toggling
* the sharing of a YouTube video.
*
* @private
* @returns {void}
*/
_onToolbarToggleSharedVideo() {
sendAnalytics(createToolbarEvent('shared.video.toggled',
{
enable: !this.props._sharingVideo
}));
this._doToggleSharedVideo();
}
2018-07-18 22:12:25 +00:00
_onToolbarOpenLocalRecordingInfoDialog: () => void;
/**
2018-07-18 22:12:25 +00:00
* Opens the {@code LocalRecordingInfoDialog}.
*
* @private
* @returns {void}
*/
2018-07-18 22:12:25 +00:00
_onToolbarOpenLocalRecordingInfoDialog() {
sendAnalytics(createToolbarEvent('local.recording'));
this.props.dispatch(openDialog(LocalRecordingInfoDialog));
}
/**
* Returns true if the the desktop sharing button should be visible and
* false otherwise.
*
* @returns {boolean}
*/
_isDesktopSharingButtonVisible() {
const {
_desktopSharingEnabled,
_desktopSharingDisabledTooltipKey
} = this.props;
return _desktopSharingEnabled || _desktopSharingDisabledTooltipKey;
}
/**
* Renders a button for toggleing screen sharing.
*
* @private
* @param {boolean} isInOverflowMenu - True if the button is moved to the
* overflow menu.
* @returns {ReactElement|null}
*/
_renderDesktopSharingButton(isInOverflowMenu = false) {
const {
_desktopSharingEnabled,
_desktopSharingDisabledTooltipKey,
_screensharing,
t
} = this.props;
if (!this._isDesktopSharingButtonVisible()) {
2017-02-16 23:02:40 +00:00
return null;
}
if (isInOverflowMenu) {
return (
<OverflowMenuItem
accessibilityLabel
= { t('toolbar.accessibilityLabel.shareYourScreen') }
disabled = { _desktopSharingEnabled }
2019-08-30 16:39:06 +00:00
icon = { IconShareDesktop }
iconId = 'share-desktop'
key = 'desktop'
onClick = { this._onToolbarToggleScreenshare }
text = {
t(`toolbar.${
_screensharing
? 'stopScreenSharing' : 'startScreenSharing'}`
)
} />
);
}
const tooltip = t(
_desktopSharingEnabled
? 'dialog.shareYourScreen' : _desktopSharingDisabledTooltipKey);
2017-02-16 23:02:40 +00:00
return (
<ToolbarButton
fix(i18n) Accessiblity labels translations (#3071) * fix(toolbar): accessibilityLabel should be translatable. This commit adds a helper property to get the accessibilityLabel of an item, providing a translation if one is available. This mimics the behavior of label and tooltip. * fix(toolbar) 'hangup' button accessibilityLabel i18n * fix(toolbar) 'mute' button accessibilityLabel i18n * fix(toolbar) 'videomute' button accessibilityLabel i18n * fix(toolbar) 'moreActions' button accessibilityLabel i18n * fix(toolbar) 'shareRoom' button accessibilityLabel i18n * fix(toolbar) 'audioRoute' button accessibilityLabel i18n * fix(toolbar) 'toggleCamera' button accessibilityLabel i18n * fix(toolbar) 'audioOnly' button accessibilityLabel i18n * fix(toolbar) 'roomLock' button accessibilityLabel i18n * fix(toolbar) 'pip' button accessibilityLabel i18n * fix(toolbar) 'invite' button accessibilityLabel i18n * fix(toolbar) 'raiseHand' button accessibilityLabel i18n * fix(toolbar) 'chat' button accessibilityLabel i18n * fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n * fix(toolbar) 'fullScreen' button accessibilityLabel i18n * fix(toolbar) 'sharedvideo' button accessibilityLabel i18n * fix(toolbar) 'document' button accessibilityLabel i18n * fix(toolbar) 'speakerStats' button accessibilityLabel i18n * fix(toolbar) 'feedback' button accessibilityLabel i18n * fix(toolbar) 'shortcuts' button accessibilityLabel i18n * fix(toolbar) 'recording' button accessibilityLabel i18n * fix(toolbar) 'settings' button accessibilityLabel i18n * fix(welcomepage) accessibilityLabels i18n * fix(toolbar) 'info' button accessibilityLabel i18n * fix(i18n): Add translation to various aria-label property values. * fix(i18n): Differentiate between overflow menu and button.
2018-06-07 20:32:18 +00:00
accessibilityLabel
= { t('toolbar.accessibilityLabel.shareYourScreen') }
2019-08-30 16:39:06 +00:00
disabled = { !_desktopSharingEnabled }
icon = { IconShareDesktop }
onClick = { this._onToolbarToggleScreenshare }
2019-08-30 16:39:06 +00:00
toggled = { _screensharing }
tooltip = { tooltip } />
2017-02-16 23:02:40 +00:00
);
}
/**
* Returns true if the profile button is visible and false otherwise.
*
* @returns {boolean}
*/
_isProfileVisible() {
return this.props._isGuest && this._shouldShowButton('profile');
}
/**
* Renders the list elements of the overflow menu.
*
* @private
* @returns {Array<ReactElement>}
*/
_renderOverflowMenuContent() {
const {
_feedbackConfigured,
_fullScreen,
2019-07-08 09:42:39 +00:00
_screensharing,
_sharingVideo,
t
} = this.props;
return [
this._isProfileVisible()
&& <OverflowMenuProfileItem
key = 'profile'
onClick = { this._onToolbarToggleProfile } />,
this._shouldShowButton('videoquality')
&& <OverflowMenuVideoQualityItem
key = 'videoquality'
onClick = { this._onToolbarOpenVideoQuality } />,
this._shouldShowButton('fullscreen')
&& <OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
key = 'fullscreen'
onClick = { this._onToolbarToggleFullScreen }
2019-10-11 14:51:42 +00:00
text = { _fullScreen ? t('toolbar.exitFullScreen') : t('toolbar.enterFullScreen') } />,
2018-07-05 11:17:45 +00:00
<LiveStreamButton
key = 'livestreaming'
showLabel = { true } />,
<RecordButton
key = 'record'
showLabel = { true } />,
this._shouldShowButton('sharedvideo')
&& <OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.sharedvideo') }
2019-08-30 16:39:06 +00:00
icon = { IconShareVideo }
key = 'sharedvideo'
onClick = { this._onToolbarToggleSharedVideo }
2019-10-11 14:51:42 +00:00
text = { _sharingVideo ? t('toolbar.stopSharedVideo') : t('toolbar.sharedvideo') } />,
this._shouldShowButton('etherpad')
&& <SharedDocumentButton
key = 'etherpad'
showLabel = { true } />,
2019-06-28 17:18:47 +00:00
<VideoBlurButton
key = 'videobackgroundblur'
showLabel = { true }
2019-07-08 09:42:39 +00:00
visible = { this._shouldShowButton('videobackgroundblur') && !_screensharing } />,
<SettingsButton
key = 'settings'
showLabel = { true }
visible = { this._shouldShowButton('settings') } />,
<MuteEveryoneButton
key = 'mute-everyone'
showLabel = { true }
visible = { this._shouldShowButton('mute-everyone') } />,
this._shouldShowButton('stats')
&& <OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.speakerStats') }
2019-08-30 16:39:06 +00:00
icon = { IconPresentation }
key = 'stats'
onClick = { this._onToolbarOpenSpeakerStats }
text = { t('toolbar.speakerStats') } />,
this._shouldShowButton('embedmeeting')
&& <OverflowMenuItem
accessibilityLabel = { t('toolbar.accessibilityLabel.embedMeeting') }
icon = { IconCodeBlock }
key = 'embed'
onClick = { this._onToolbarOpenEmbedMeeting }
text = { t('toolbar.embedMeeting') } />,
this._shouldShowButton('feedback')
&& _feedbackConfigured
&& <OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.feedback') }
2019-08-30 16:39:06 +00:00
icon = { IconFeedback }
key = 'feedback'
onClick = { this._onToolbarOpenFeedback }
text = { t('toolbar.feedback') } />,
this._shouldShowButton('shortcuts')
&& <OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
2019-08-30 16:39:06 +00:00
icon = { IconOpenInNew }
key = 'shortcuts'
onClick = { this._onToolbarOpenKeyboardShortcuts }
2019-10-11 14:51:42 +00:00
text = { t('toolbar.shortcuts') } />,
this._shouldShowButton('download')
&& <DownloadButton
key = 'download'
showLabel = { true } />,
2019-10-11 14:51:42 +00:00
this._shouldShowButton('help')
&& <HelpButton
key = 'help'
showLabel = { true } />
];
}
/**
* Renders a list of buttons that are moved to the overflow menu.
*
* @private
* @param {Array<string>} movedButtons - The names of the buttons to be
* moved.
* @returns {Array<ReactElement>}
*/
_renderMovedButtons(movedButtons) {
const {
_chatOpen,
_raisedHand,
t
} = this.props;
return movedButtons.map(buttonName => {
switch (buttonName) {
case 'desktop':
return this._renderDesktopSharingButton(true);
case 'raisehand':
return (
<OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.raiseHand') }
2019-08-30 16:39:06 +00:00
icon = { IconRaisedHand }
key = 'raisedHand'
onClick = { this._onToolbarToggleRaiseHand }
text = {
t(`toolbar.${
_raisedHand
? 'lowerYourHand' : 'raiseYourHand'}`
)
} />
);
case 'chat':
return (
<OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.chat') }
2019-08-30 16:39:06 +00:00
icon = { IconChat }
key = 'chat'
onClick = { this._onToolbarToggleChat }
text = {
t(`toolbar.${
_chatOpen ? 'closeChat' : 'openChat'}`
)
} />
);
case 'closedcaptions':
return (
<ClosedCaptionButton
key = 'closed-captions'
showLabel = { true } />
);
case 'security':
return (
<SecurityDialogButton
key = 'security'
showLabel = { true } />
);
case 'invite':
return (
<OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.invite') }
icon = { IconInviteMore }
key = 'invite'
onClick = { this._onToolbarOpenInvite }
text = { t('toolbar.invite') } />
);
case 'tileview':
return <TileViewButton showLabel = { true } />;
case 'localrecording':
return (
<OverflowMenuItem
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
2019-08-30 16:39:06 +00:00
icon = { IconRec }
key = 'localrecording'
2019-10-11 14:51:42 +00:00
onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
text = { t('localRecording.dialogTitle') } />
);
default:
return null;
}
});
}
/**
* Renders the Audio controlling button.
*
* @returns {ReactElement}
*/
_renderAudioButton() {
return this._shouldShowButton('microphone')
2020-04-01 18:07:43 +00:00
? <AudioSettingsButton
key = 'asb'
visible = { true } />
: null;
}
/**
* Renders the Video controlling button.
*
* @returns {ReactElement}
*/
_renderVideoButton() {
return this._shouldShowButton('camera')
2020-04-01 18:07:43 +00:00
? <VideoSettingsButton
key = 'vsb'
visible = { true } />
: null;
}
2019-02-20 23:35:19 +00:00
/**
* Renders the toolbox content.
*
* @returns {Array<ReactElement>}
*/
_renderToolboxContent() {
const {
_chatOpen,
_overflowMenuVisible,
_raisedHand,
t
} = this.props;
const overflowMenuContent = this._renderOverflowMenuContent();
2019-10-11 14:51:42 +00:00
const overflowHasItems = Boolean(overflowMenuContent.filter(child => child).length);
2019-02-20 23:35:19 +00:00
const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
const buttonsLeft = [];
const buttonsRight = [];
const smallThreshold = 700;
const verySmallThreshold = 500;
let minSpaceBetweenButtons = 48;
let widthPlusPaddingOfButton = 56;
if (this.state.windowWidth <= verySmallThreshold) {
minSpaceBetweenButtons = 26;
widthPlusPaddingOfButton = 28;
} else if (this.state.windowWidth <= smallThreshold) {
minSpaceBetweenButtons = 36;
widthPlusPaddingOfButton = 40;
}
const maxNumberOfButtonsPerGroup = Math.floor(
(
this.state.windowWidth
- 168 // the width of the central group by design
- minSpaceBetweenButtons // the minimum space between the button groups
)
/ widthPlusPaddingOfButton // the width + padding of a button
/ 2 // divide by the number of groups(left and right group)
);
2020-08-05 07:49:39 +00:00
const showOverflowMenu = this.state.windowWidth >= verySmallThreshold || isMobileBrowser();
if (this._shouldShowButton('chat')) {
buttonsLeft.push('chat');
}
if (this._shouldShowButton('desktop')
&& this._isDesktopSharingButtonVisible()) {
buttonsLeft.push('desktop');
}
if (this._shouldShowButton('raisehand')) {
buttonsLeft.push('raisehand');
}
if (this._shouldShowButton('closedcaptions')) {
buttonsLeft.push('closedcaptions');
}
2020-08-05 07:49:39 +00:00
if (overflowHasItems && showOverflowMenu) {
buttonsRight.push('overflowmenu');
}
if (this._shouldShowButton('invite')) {
buttonsRight.push('invite');
}
if (this._shouldShowButton('security') || this._shouldShowButton('info')) {
buttonsRight.push('security');
}
if (this._shouldShowButton('tileview')) {
buttonsRight.push('tileview');
}
if (this._shouldShowButton('localrecording')) {
buttonsRight.push('localrecording');
}
const movedButtons = [];
if (buttonsLeft.length > maxNumberOfButtonsPerGroup) {
movedButtons.push(...buttonsLeft.splice(
maxNumberOfButtonsPerGroup,
buttonsLeft.length - maxNumberOfButtonsPerGroup));
2020-08-05 07:49:39 +00:00
if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
buttonsRight.unshift('overflowmenu');
}
}
if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
2020-08-05 07:49:39 +00:00
if (buttonsRight.indexOf('overflowmenu') === -1 && showOverflowMenu) {
buttonsRight.unshift('overflowmenu');
}
let numberOfButtons = maxNumberOfButtonsPerGroup;
// make sure the more button will be displayed when we move buttons.
if (numberOfButtons === 0) {
numberOfButtons++;
}
movedButtons.push(...buttonsRight.splice(
numberOfButtons,
buttonsRight.length - numberOfButtons));
}
overflowMenuContent.splice(
1, 0, ...this._renderMovedButtons(movedButtons));
2019-02-20 23:35:19 +00:00
return (
<div className = 'toolbox-content'>
<div className = 'button-group-left'>
{ buttonsLeft.indexOf('chat') !== -1
2019-02-20 23:35:19 +00:00
&& <div className = 'toolbar-button-with-badge'>
<ToolbarButton
2019-10-11 14:51:42 +00:00
accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
2019-08-30 16:39:06 +00:00
icon = { IconChat }
2019-02-20 23:35:19 +00:00
onClick = { this._onToolbarToggleChat }
2019-08-30 16:39:06 +00:00
toggled = { _chatOpen }
2019-02-20 23:35:19 +00:00
tooltip = { t('toolbar.chat') } />
<ChatCounter />
</div> }
{ buttonsLeft.indexOf('desktop') !== -1
&& this._renderDesktopSharingButton() }
{ buttonsLeft.indexOf('raisehand') !== -1
&& <ToolbarButton
accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
icon = { IconRaisedHand }
onClick = { this._onToolbarToggleRaiseHand }
toggled = { _raisedHand }
tooltip = { t('toolbar.raiseHand') } /> }
2019-02-20 23:35:19 +00:00
{
buttonsLeft.indexOf('closedcaptions') !== -1
2019-02-20 23:35:19 +00:00
&& <ClosedCaptionButton />
}
</div>
<div className = 'button-group-center'>
{ this._renderAudioButton() }
2019-02-20 23:35:19 +00:00
<HangupButton
visible = { this._shouldShowButton('hangup') } />
{ this._renderVideoButton() }
2019-02-20 23:35:19 +00:00
</div>
<div className = 'button-group-right'>
{ buttonsRight.indexOf('localrecording') !== -1
2019-02-20 23:35:19 +00:00
&& <LocalRecordingButton
onClick = {
this._onToolbarOpenLocalRecordingInfoDialog
} />
}
{ buttonsRight.indexOf('tileview') !== -1
2019-02-20 23:35:19 +00:00
&& <TileViewButton /> }
{ buttonsRight.indexOf('invite') !== -1
2019-02-20 23:35:19 +00:00
&& <ToolbarButton
accessibilityLabel =
{ t('toolbar.accessibilityLabel.invite') }
icon = { IconInviteMore }
2019-02-20 23:35:19 +00:00
onClick = { this._onToolbarOpenInvite }
tooltip = { t('toolbar.invite') } /> }
{ buttonsRight.indexOf('security') !== -1
&& <SecurityDialogButton customClass = 'security-toolbar-button' /> }
2020-08-05 07:49:39 +00:00
{ buttonsRight.indexOf('overflowmenu') !== -1
2019-02-20 23:35:19 +00:00
&& <OverflowMenuButton
isOpen = { _overflowMenuVisible }
onVisibilityChange = { this._onSetOverflowVisible }>
<ul
aria-label = { t(toolbarAccLabel) }
className = 'overflow-menu'>
{ overflowMenuContent }
</ul>
</OverflowMenuButton> }
</div>
</div>);
}
_shouldShowButton: (string) => boolean;
/**
* Returns if a button name has been explicitly configured to be displayed.
*
* @param {string} buttonName - The name of the button, as expected in
2018-08-08 20:35:40 +00:00
* {@link interfaceConfig}.
* @private
* @returns {boolean} True if the button should be displayed.
*/
_shouldShowButton(buttonName) {
return this.props._visibleButtons.has(buttonName);
}
2017-02-16 23:02:40 +00:00
}
/**
* Maps (parts of) the redux state to {@link Toolbox}'s React {@code Component}
* props.
2017-02-16 23:02:40 +00:00
*
* @param {Object} state - The redux store/state.
2017-02-16 23:02:40 +00:00
* @private
* @returns {{}}
2017-02-16 23:02:40 +00:00
*/
function _mapStateToProps(state) {
const { conference, locked } = state['features/base/conference'];
let { desktopSharingEnabled } = state['features/base/conference'];
const {
callStatsID,
enableFeaturesBasedOnToken
} = state['features/base/config'];
const sharedVideoStatus = state['features/shared-video'].status;
2017-02-16 23:02:40 +00:00
const {
fullScreen,
2019-03-12 17:45:53 +00:00
overflowMenuVisible
2017-04-01 05:52:40 +00:00
} = state['features/toolbox'];
const localParticipant = getLocalParticipant(state);
const localRecordingStates = state['features/local-recording'];
const localVideo = getLocalVideoTrack(state['features/base/tracks']);
2017-02-16 23:02:40 +00:00
let desktopSharingDisabledTooltipKey;
if (enableFeaturesBasedOnToken) {
// we enable desktop sharing if any participant already have this
// feature enabled
desktopSharingEnabled = getParticipants(state)
.find(({ features = {} }) =>
String(features['screen-sharing']) === 'true') !== undefined;
// we want to show button and tooltip
if (state['features/base/jwt'].isGuest) {
desktopSharingDisabledTooltipKey
= 'dialog.shareYourScreenDisabledForGuest';
} else {
desktopSharingDisabledTooltipKey
= 'dialog.shareYourScreenDisabled';
}
}
// NB: We compute the buttons again here because if URL parameters were used to
// override them we'd miss it.
const buttons = new Set(interfaceConfig.TOOLBAR_BUTTONS);
2017-02-16 23:02:40 +00:00
return {
_chatOpen: state['features/chat'].isOpen,
_conference: conference,
_desktopSharingEnabled: desktopSharingEnabled,
_desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey,
_dialog: Boolean(state['features/base/dialog'].component),
_feedbackConfigured: Boolean(callStatsID),
_isGuest: state['features/base/jwt'].isGuest,
_fullScreen: fullScreen,
2020-07-23 13:12:25 +00:00
_tileViewEnabled: shouldDisplayTileView(state),
_localParticipantID: localParticipant.id,
_localRecState: localRecordingStates,
_locked: locked,
_overflowMenuVisible: overflowMenuVisible,
_raisedHand: localParticipant.raisedHand,
_screensharing: localVideo && localVideo.videoType === 'desktop',
_sharingVideo: sharedVideoStatus === 'playing'
|| sharedVideoStatus === 'start'
|| sharedVideoStatus === 'pause',
2019-03-12 17:45:53 +00:00
_visible: isToolboxVisible(state),
_visibleButtons: equals(visibleButtons, buttons) ? visibleButtons : buttons
2017-02-16 23:02:40 +00:00
};
}
export default translate(connect(_mapStateToProps)(Toolbox));