jiti-meet/react/features/toolbox/defaultToolbarButtons.js

439 lines
14 KiB
JavaScript
Raw Normal View History

2017-02-16 23:02:40 +00:00
/* @flow */
import React from 'react';
2017-08-16 21:28:39 +00:00
import { DEFAULT_AVATAR_RELATIVE_PATH } from '../base/participants';
import { openDeviceSelectionDialog } from '../device-selection';
2017-05-19 15:12:24 +00:00
import { openDialOutDialog } from '../dial-out';
2017-06-14 18:41:22 +00:00
import { openAddPeopleDialog, openInviteDialog } from '../invite';
feat(quality-slider): initial implementation (#1817) * feat(quality-slider): initial implementation - Add new menu button with an Inline Dialog slider for selecting received video quality. - Place P2P status in redux store for the Inline Dialog to display a warning about not respecting video quality selection. - Respond to data channel open events by setting receive video quality. This is for lonely call cases where a setting is set before the data channel is open. - Remove dropdown menu from video status label and clean up related js and css. * first pass at addressing feedback - Move VideoStatusLabel to video-quality directory. - Rename VideoStatusLabel to VideoQualityLabel. - Open VideoQualitydialog from VideoQualityLabel. - New CSS for making VideoQualityLabel display properly. - Do not render VideoQualityLabel in filmstrip only instead of hiding with css. - Remove tooltip from VideoQualityLabel. - Show LD, SD, HD labels in VideoQualityLabel. - Remove action SET_LARGE_VIDEO_HD_STATUS from conference. - Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video. - Move VideoQualityButton into video-quality directory. - General renaming (medium -> standard, menu -> dialog). - Render P2P message between title and slider. - Add padding to slider for displacement caused by P2P message's new placement. - Fix display issue with VideoQualityButton displaying out of line in the primary toolbar. * second pass at addressing feedback - Fix p2p inline message color - Force labels to break on words - Resolve rebase issues, including only dispatching quality update on change. Before there was double calling of dispatch produced by an IE11 workaround. This breaks now when setting audio only mode to true twice. - Rename some instances of quality to definition * rename to data channel opened * do not show p2p in audio only * stop toggle audio only icon automatically * remove fixme about toolbar button * find closest resolution for label * toggle dialog on button click * redo last commit for both button and label
2017-08-09 19:40:03 +00:00
import { VideoQualityButton } from '../video-quality';
2017-08-16 21:28:39 +00:00
import UIEvents from '../../../service/UI/UIEvents';
2017-02-16 23:02:40 +00:00
declare var APP: Object;
declare var interfaceConfig: Object;
2017-02-16 23:02:40 +00:00
declare var JitsiMeetJS: Object;
/**
2017-04-01 05:52:40 +00:00
* All toolbar buttons' descriptors.
2017-02-16 23:02:40 +00:00
*/
const buttons: Object = {
2017-06-14 18:41:22 +00:00
addtocall: {
classNames: [ 'button', 'icon-add' ],
enabled: true,
id: 'toolbar_button_add',
isDisplayed: () => !APP.store.getState()['features/jwt'].isGuest,
2017-07-26 20:47:53 +00:00
onClick(dispatch) {
2017-06-14 18:41:22 +00:00
JitsiMeetJS.analytics.sendEvent('toolbar.add.clicked');
2017-07-26 20:47:53 +00:00
dispatch(openAddPeopleDialog());
2017-06-14 18:41:22 +00:00
},
tooltipKey: 'toolbar.addPeople'
},
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the camera toolbar button.
2017-02-16 23:02:40 +00:00
*/
camera: {
classNames: [ 'button', 'icon-camera' ],
enabled: true,
isDisplayed: () => true,
2017-02-16 23:02:40 +00:00
id: 'toolbar_button_camera',
onClick() {
const newVideoMutedState = !APP.conference.isLocalVideoMuted();
if (newVideoMutedState) {
2017-02-16 23:02:40 +00:00
JitsiMeetJS.analytics.sendEvent('toolbar.video.enabled');
} else {
JitsiMeetJS.analytics.sendEvent('toolbar.video.disabled');
}
APP.UI.emitEvent(UIEvents.VIDEO_MUTED, newVideoMutedState);
2017-02-16 23:02:40 +00:00
},
popups: [
{
dataAttr: 'audioOnly.featureToggleDisabled',
dataInterpolate: { feature: 'video mute' },
id: 'unmuteWhileAudioOnly'
}
],
2017-02-16 23:02:40 +00:00
shortcut: 'V',
shortcutAttr: 'toggleVideoPopover',
shortcutFunc() {
if (APP.conference.isAudioOnly()) {
APP.UI.emitEvent(UIEvents.VIDEO_UNMUTING_WHILE_AUDIO_ONLY);
return;
}
2017-02-16 23:02:40 +00:00
JitsiMeetJS.analytics.sendEvent('shortcut.videomute.toggled');
APP.conference.toggleVideoMuted();
},
shortcutDescription: 'keyboardShortcuts.videoMute',
tooltipKey: 'toolbar.videomute'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the chat toolbar button.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the contact list toolbar button.
2017-02-16 23:02:40 +00:00
*/
contacts: {
classNames: [ 'button', 'icon-contactList' ],
enabled: true,
2017-04-01 05:52:40 +00:00
// XXX: Hotfix to solve race condition between toolbox rendering and
2017-02-16 23:02:40 +00:00
// contact list view that updates the number of active participants
// via jQuery. There is case when contact list view updates number of
2017-04-01 05:52:40 +00:00
// participants but toolbox has not been rendered yet. Since this issue
2017-02-16 23:02:40 +00:00
// 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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the desktop sharing toolbar button.
2017-02-16 23:02:40 +00:00
*/
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: [
{
dataAttr: 'audioOnly.featureToggleDisabled',
dataInterpolate: { feature: 'screen sharing' },
id: 'screenshareWhileAudioOnly'
}
],
2017-02-16 23:02:40 +00:00
shortcut: 'D',
shortcutAttr: 'toggleDesktopSharingPopover',
shortcutFunc() {
JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled');
// eslint-disable-next-line no-empty-function
APP.conference.toggleScreenSharing().catch(() => {});
2017-02-16 23:02:40 +00:00
},
shortcutDescription: 'keyboardShortcuts.toggleScreensharing',
tooltipKey: 'toolbar.sharescreen'
},
2017-05-19 15:12:24 +00:00
/**
* The descriptor of the dial out toolbar button.
*/
dialout: {
classNames: [ 'button', 'icon-telephone' ],
enabled: true,
// Will be displayed once the SIP calls functionality is detected.
hidden: true,
id: 'toolbar_button_dial_out',
2017-07-26 20:47:53 +00:00
onClick(dispatch) {
2017-05-19 15:12:24 +00:00
JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
2017-07-26 20:47:53 +00:00
dispatch(openDialOutDialog());
2017-05-19 15:12:24 +00:00
},
tooltipKey: 'dialOut.dialOut'
},
/**
* The descriptor of the device selection toolbar button.
*/
fodeviceselection: {
classNames: [ 'button', 'icon-settings' ],
enabled: true,
isDisplayed() {
return interfaceConfig.filmStripOnly;
},
id: 'toolbar_button_fodeviceselection',
2017-07-26 20:47:53 +00:00
onClick(dispatch) {
JitsiMeetJS.analytics.sendEvent(
'toolbar.fodeviceselection.toggled');
2017-07-26 20:47:53 +00:00
dispatch(openDeviceSelectionDialog());
},
sideContainerId: 'settings_container',
tooltipKey: 'toolbar.Settings'
},
2017-02-16 23:02:40 +00:00
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the dialpad toolbar button.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the etherpad toolbar button.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the toolbar button which toggles full-screen mode.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the toolbar button which hangs up the call/conference.
2017-02-16 23:02:40 +00:00
*/
hangup: {
classNames: [ 'button', 'icon-hangup', 'button_hangup' ],
enabled: true,
isDisplayed: () => true,
2017-02-16 23:02:40 +00:00
id: 'toolbar_button_hangup',
onClick() {
JitsiMeetJS.analytics.sendEvent('toolbar.hangup');
APP.UI.emitEvent(UIEvents.HANGUP);
},
tooltipKey: 'toolbar.hangup'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the toolbar button which shows the invite user dialog.
2017-02-16 23:02:40 +00:00
*/
invite: {
classNames: [ 'button', 'icon-link' ],
enabled: true,
id: 'toolbar_button_link',
2017-07-26 20:47:53 +00:00
onClick(dispatch) {
2017-02-16 23:02:40 +00:00
JitsiMeetJS.analytics.sendEvent('toolbar.invite.clicked');
2017-07-26 20:47:53 +00:00
dispatch(openInviteDialog());
2017-02-16 23:02:40 +00:00
},
tooltipKey: 'toolbar.invite'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the microphone toolbar button.
2017-02-16 23:02:40 +00:00
*/
microphone: {
classNames: [ 'button', 'icon-microphone' ],
enabled: true,
isDisplayed: () => true,
2017-02-16 23:02:40 +00:00
id: 'toolbar_button_mute',
onClick() {
const sharedVideoManager = APP.UI.getSharedVideoManager();
if (APP.conference.isLocalAudioMuted()) {
2017-02-16 23:02:40 +00:00
// 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: [
{
dataAttr: 'toolbar.micMutedPopup',
id: 'micMutedPopup'
},
{
dataAttr: 'toolbar.unableToUnmutePopup',
id: 'unableToUnmutePopup'
},
{
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the profile toolbar button.
2017-02-16 23:02:40 +00:00
*/
profile: {
classNames: [ 'button' ],
enabled: true,
html: <img
id = 'avatar'
2017-08-16 21:28:39 +00:00
src = { DEFAULT_AVATAR_RELATIVE_PATH } />,
2017-02-16 23:02:40 +00:00
id: 'toolbar_button_profile',
onClick() {
JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
APP.UI.emitEvent(UIEvents.TOGGLE_PROFILE);
},
sideContainerId: 'profile_container',
tooltipKey: 'profile.setDisplayNameLabel'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the "Raise hand" toolbar button.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the recording toolbar button. Requires additional
* initialization in the recording module.
2017-02-16 23:02:40 +00:00
*/
recording: {
classNames: [ 'button' ],
enabled: true,
// will be displayed once the recording functionality is detected
hidden: true,
id: 'toolbar_button_record',
tooltipKey: 'liveStreaming.buttonTooltip'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the settings toolbar button.
2017-02-16 23:02:40 +00:00
*/
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'
},
/**
2017-04-01 05:52:40 +00:00
* The descriptor of the "Share YouTube video" toolbar button.
2017-02-16 23:02:40 +00:00
*/
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: [
{
dataAttr: 'toolbar.sharedVideoMutedPopup',
id: 'sharedVideoMutedPopup'
}
],
tooltipKey: 'toolbar.sharedvideo'
feat(quality-slider): initial implementation (#1817) * feat(quality-slider): initial implementation - Add new menu button with an Inline Dialog slider for selecting received video quality. - Place P2P status in redux store for the Inline Dialog to display a warning about not respecting video quality selection. - Respond to data channel open events by setting receive video quality. This is for lonely call cases where a setting is set before the data channel is open. - Remove dropdown menu from video status label and clean up related js and css. * first pass at addressing feedback - Move VideoStatusLabel to video-quality directory. - Rename VideoStatusLabel to VideoQualityLabel. - Open VideoQualitydialog from VideoQualityLabel. - New CSS for making VideoQualityLabel display properly. - Do not render VideoQualityLabel in filmstrip only instead of hiding with css. - Remove tooltip from VideoQualityLabel. - Show LD, SD, HD labels in VideoQualityLabel. - Remove action SET_LARGE_VIDEO_HD_STATUS from conference. - Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video. - Move VideoQualityButton into video-quality directory. - General renaming (medium -> standard, menu -> dialog). - Render P2P message between title and slider. - Add padding to slider for displacement caused by P2P message's new placement. - Fix display issue with VideoQualityButton displaying out of line in the primary toolbar. * second pass at addressing feedback - Fix p2p inline message color - Force labels to break on words - Resolve rebase issues, including only dispatching quality update on change. Before there was double calling of dispatch produced by an IE11 workaround. This breaks now when setting audio only mode to true twice. - Rename some instances of quality to definition * rename to data channel opened * do not show p2p in audio only * stop toggle audio only icon automatically * remove fixme about toolbar button * find closest resolution for label * toggle dialog on button click * redo last commit for both button and label
2017-08-09 19:40:03 +00:00
},
videoquality: {
component: VideoQualityButton
2017-02-16 23:02:40 +00:00
}
};
Object.keys(buttons).forEach(name => {
const button = buttons[name];
if (!button.isDisplayed) {
button.isDisplayed = () => !interfaceConfig.filmStripOnly;
}
});
export default buttons;