a1476c68f1
Audio only mode will be toggleable only from the VideoStatusLabel, so remove AudioOnlyButton from the toolbar and delete the component itself. As a result of the button being removed, a truthy check in VideoStatusLabel was also removed to ensure it will display as it is now the only way to toggle audio only mode. Also set the cursor on VideoStatusLabel to always be default, so it can never show the text cursor.
417 lines
13 KiB
JavaScript
417 lines
13 KiB
JavaScript
/* @flow */
|
|
|
|
import React from 'react';
|
|
|
|
import UIEvents from '../../../service/UI/UIEvents';
|
|
|
|
import { openInviteDialog } from '../invite';
|
|
|
|
declare var APP: Object;
|
|
declare var config: Object;
|
|
declare var JitsiMeetJS: Object;
|
|
|
|
/**
|
|
* Shows SIP number dialog.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
function _showSIPNumberInput() {
|
|
const defaultNumber = config.defaultSipNumber || '';
|
|
const msgString
|
|
= `<input class="input-control" name="sipNumber" type="text" value="${
|
|
defaultNumber}" autofocus>`;
|
|
|
|
APP.UI.messageHandler.openTwoButtonDialog({
|
|
focus: ':input:first',
|
|
leftButtonKey: 'dialog.Dial',
|
|
msgString,
|
|
titleKey: 'dialog.sipMsg',
|
|
|
|
// eslint-disable-next-line max-params
|
|
submitFunction(event, value, message, formValues) {
|
|
const { sipNumber } = formValues;
|
|
|
|
if (value && sipNumber) {
|
|
APP.UI.emitEvent(UIEvents.SIP_DIAL, sipNumber);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* All toolbar buttons' descriptors.
|
|
*/
|
|
export default {
|
|
/**
|
|
* The descriptor of the camera toolbar button.
|
|
*/
|
|
camera: {
|
|
classNames: [ 'button', 'icon-camera' ],
|
|
enabled: true,
|
|
filmstripOnlyEnabled: true,
|
|
id: 'toolbar_button_camera',
|
|
onClick() {
|
|
if (APP.conference.videoMuted) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.video.enabled');
|
|
APP.UI.emitEvent(UIEvents.VIDEO_MUTED, false);
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.video.disabled');
|
|
APP.UI.emitEvent(UIEvents.VIDEO_MUTED, true);
|
|
}
|
|
},
|
|
popups: [
|
|
{
|
|
className: 'loginmenu',
|
|
dataAttr: 'audioOnly.featureToggleDisabled',
|
|
dataInterpolate: { feature: 'video mute' },
|
|
id: 'unmuteWhileAudioOnly'
|
|
}
|
|
],
|
|
shortcut: 'V',
|
|
shortcutAttr: 'toggleVideoPopover',
|
|
shortcutFunc() {
|
|
if (APP.conference.isAudioOnly()) {
|
|
APP.UI.emitEvent(UIEvents.VIDEO_UNMUTING_WHILE_AUDIO_ONLY);
|
|
|
|
return;
|
|
}
|
|
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.videomute.toggled');
|
|
APP.conference.toggleVideoMuted();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.videoMute',
|
|
tooltipKey: 'toolbar.videomute'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the chat toolbar button.
|
|
*/
|
|
chat: {
|
|
classNames: [ 'button', 'icon-chat' ],
|
|
enabled: true,
|
|
html: <span className = 'badge-round'>
|
|
<span id = 'unreadMessages' />
|
|
</span>,
|
|
id: 'toolbar_button_chat',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_CHAT);
|
|
},
|
|
shortcut: 'C',
|
|
shortcutAttr: 'toggleChatPopover',
|
|
shortcutFunc() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
|
APP.UI.toggleChat();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.toggleChat',
|
|
sideContainerId: 'chat_container',
|
|
tooltipKey: 'toolbar.chat'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the contact list toolbar button.
|
|
*/
|
|
contacts: {
|
|
classNames: [ 'button', 'icon-contactList' ],
|
|
enabled: true,
|
|
|
|
// XXX: Hotfix to solve race condition between toolbox rendering and
|
|
// contact list view that updates the number of active participants
|
|
// via jQuery. There is case when contact list view updates number of
|
|
// participants but toolbox has not been rendered yet. Since this issue
|
|
// is reproducible only for conferences with the only participant let's
|
|
// use 1 participant as a default value for this badge. Later after
|
|
// reactification of contact list let's use the value of active
|
|
// paricipants from Redux store.
|
|
html: <span className = 'badge-round'>
|
|
<span id = 'numberOfParticipants'>1</span>
|
|
</span>,
|
|
id: 'toolbar_contact_list',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent(
|
|
'toolbar.contacts.toggled');
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_CONTACT_LIST);
|
|
},
|
|
sideContainerId: 'contacts_container',
|
|
tooltipKey: 'bottomtoolbar.contactlist'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the desktop sharing toolbar button.
|
|
*/
|
|
desktop: {
|
|
classNames: [ 'button', 'icon-share-desktop' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_desktopsharing',
|
|
onClick() {
|
|
if (APP.conference.isSharingScreen) {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.screen.disabled');
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.screen.enabled');
|
|
}
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_SCREENSHARING);
|
|
},
|
|
popups: [
|
|
{
|
|
className: 'loginmenu',
|
|
dataAttr: 'audioOnly.featureToggleDisabled',
|
|
dataInterpolate: { feature: 'screen sharing' },
|
|
id: 'screenshareWhileAudioOnly'
|
|
}
|
|
],
|
|
shortcut: 'D',
|
|
shortcutAttr: 'toggleDesktopSharingPopover',
|
|
shortcutFunc() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled');
|
|
APP.conference.toggleScreenSharing();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.toggleScreensharing',
|
|
tooltipKey: 'toolbar.sharescreen'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the dialpad toolbar button.
|
|
*/
|
|
dialpad: {
|
|
classNames: [ 'button', 'icon-dialpad' ],
|
|
enabled: true,
|
|
|
|
// TODO: remove it after UI.updateDTMFSupport fix
|
|
hidden: true,
|
|
id: 'toolbar_button_dialpad',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sip.dialpad.clicked');
|
|
},
|
|
tooltipKey: 'toolbar.dialpad'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the etherpad toolbar button.
|
|
*/
|
|
etherpad: {
|
|
classNames: [ 'button', 'icon-share-doc' ],
|
|
enabled: true,
|
|
hidden: true,
|
|
id: 'toolbar_button_etherpad',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
|
|
APP.UI.emitEvent(UIEvents.ETHERPAD_CLICKED);
|
|
},
|
|
tooltipKey: 'toolbar.etherpad'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the toolbar button which toggles full-screen mode.
|
|
*/
|
|
fullscreen: {
|
|
classNames: [ 'button', 'icon-full-screen' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_fullScreen',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
|
|
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_FULLSCREEN);
|
|
},
|
|
shortcut: 'S',
|
|
shortcutAttr: 'toggleFullscreenPopover',
|
|
shortcutDescription: 'keyboardShortcuts.fullScreen',
|
|
shortcutFunc() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.fullscreen.toggled');
|
|
APP.UI.toggleFullScreen();
|
|
},
|
|
tooltipKey: 'toolbar.fullscreen'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the toolbar button which hangs up the call/conference.
|
|
*/
|
|
hangup: {
|
|
classNames: [ 'button', 'icon-hangup', 'button_hangup' ],
|
|
enabled: true,
|
|
filmstripOnlyEnabled: true,
|
|
id: 'toolbar_button_hangup',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.hangup');
|
|
APP.UI.emitEvent(UIEvents.HANGUP);
|
|
},
|
|
tooltipKey: 'toolbar.hangup'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the toolbar button which shows the invite user dialog.
|
|
*/
|
|
invite: {
|
|
classNames: [ 'button', 'icon-link' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_link',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked');
|
|
APP.store.dispatch(openInviteDialog());
|
|
},
|
|
tooltipKey: 'toolbar.invite'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the microphone toolbar button.
|
|
*/
|
|
microphone: {
|
|
classNames: [ 'button', 'icon-microphone' ],
|
|
enabled: true,
|
|
filmstripOnlyEnabled: true,
|
|
id: 'toolbar_button_mute',
|
|
onClick() {
|
|
const sharedVideoManager = APP.UI.getSharedVideoManager();
|
|
|
|
if (APP.conference.audioMuted) {
|
|
// If there's a shared video with the volume "on" and we aren't
|
|
// the video owner, we warn the user
|
|
// that currently it's not possible to unmute.
|
|
if (sharedVideoManager
|
|
&& sharedVideoManager.isSharedVideoVolumeOn()
|
|
&& !sharedVideoManager.isSharedVideoOwner()) {
|
|
APP.UI.showCustomToolbarPopup(
|
|
'#unableToUnmutePopup', true, 5000);
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted');
|
|
APP.UI.emitEvent(UIEvents.AUDIO_MUTED, false, true);
|
|
}
|
|
} else {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.audio.muted');
|
|
APP.UI.emitEvent(UIEvents.AUDIO_MUTED, true, true);
|
|
}
|
|
},
|
|
popups: [
|
|
{
|
|
className: 'loginmenu',
|
|
dataAttr: 'toolbar.micMutedPopup',
|
|
id: 'micMutedPopup'
|
|
},
|
|
{
|
|
className: 'loginmenu',
|
|
dataAttr: 'toolbar.unableToUnmutePopup',
|
|
id: 'unableToUnmutePopup'
|
|
},
|
|
{
|
|
className: 'loginmenu',
|
|
dataAttr: 'toolbar.talkWhileMutedPopup',
|
|
id: 'talkWhileMutedPopup'
|
|
}
|
|
],
|
|
shortcut: 'M',
|
|
shortcutAttr: 'mutePopover',
|
|
shortcutFunc() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.audiomute.toggled');
|
|
APP.conference.toggleAudioMuted();
|
|
},
|
|
shortcutDescription: 'keyboardShortcuts.mute',
|
|
tooltipKey: 'toolbar.mute'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the profile toolbar button.
|
|
*/
|
|
profile: {
|
|
classNames: [ 'button' ],
|
|
enabled: true,
|
|
html: <img
|
|
id = 'avatar'
|
|
src = 'images/avatar2.png' />,
|
|
id: 'toolbar_button_profile',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_PROFILE);
|
|
},
|
|
sideContainerId: 'profile_container',
|
|
tooltipKey: 'profile.setDisplayNameLabel'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the "Raise hand" toolbar button.
|
|
*/
|
|
raisehand: {
|
|
classNames: [ 'button', 'icon-raised-hand' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_raisehand',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.raiseHand.clicked');
|
|
APP.conference.maybeToggleRaisedHand();
|
|
},
|
|
shortcut: 'R',
|
|
shortcutAttr: 'raiseHandPopover',
|
|
shortcutDescription: 'keyboardShortcuts.raiseHand',
|
|
shortcutFunc() {
|
|
JitsiMeetJS.analytics.sendEvent('shortcut.raisehand.clicked');
|
|
APP.conference.maybeToggleRaisedHand();
|
|
},
|
|
tooltipKey: 'toolbar.raiseHand'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the recording toolbar button. Requires additional
|
|
* initialization in the recording module.
|
|
*/
|
|
recording: {
|
|
classNames: [ 'button' ],
|
|
enabled: true,
|
|
|
|
// will be displayed once the recording functionality is detected
|
|
hidden: true,
|
|
id: 'toolbar_button_record',
|
|
tooltipKey: 'liveStreaming.buttonTooltip'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the settings toolbar button.
|
|
*/
|
|
settings: {
|
|
classNames: [ 'button', 'icon-settings' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_settings',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.settings.toggled');
|
|
APP.UI.emitEvent(UIEvents.TOGGLE_SETTINGS);
|
|
},
|
|
sideContainerId: 'settings_container',
|
|
tooltipKey: 'toolbar.Settings'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the "Share YouTube video" toolbar button.
|
|
*/
|
|
sharedvideo: {
|
|
classNames: [ 'button', 'icon-shared-video' ],
|
|
enabled: true,
|
|
id: 'toolbar_button_sharedvideo',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sharedvideo.clicked');
|
|
APP.UI.emitEvent(UIEvents.SHARED_VIDEO_CLICKED);
|
|
},
|
|
popups: [
|
|
{
|
|
className: 'loginmenu extendedToolbarPopup',
|
|
dataAttr: 'toolbar.sharedVideoMutedPopup',
|
|
dataAttrPosition: 'w',
|
|
id: 'sharedVideoMutedPopup'
|
|
}
|
|
],
|
|
tooltipKey: 'toolbar.sharedvideo'
|
|
},
|
|
|
|
/**
|
|
* The descriptor of the SIP call toolbar button.
|
|
*/
|
|
sip: {
|
|
classNames: [ 'button', 'icon-telephone' ],
|
|
enabled: true,
|
|
|
|
// Will be displayed once the SIP calls functionality is detected.
|
|
hidden: true,
|
|
id: 'toolbar_button_sip',
|
|
onClick() {
|
|
JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
|
|
_showSIPNumberInput();
|
|
},
|
|
tooltipKey: 'toolbar.sip'
|
|
}
|
|
};
|