diff --git a/react/features/toolbox/components/native/ScreenSharingButton.js b/react/features/toolbox/components/native/ScreenSharingButton.js index ba11cc978..f0cfe8fd2 100644 --- a/react/features/toolbox/components/native/ScreenSharingButton.js +++ b/react/features/toolbox/components/native/ScreenSharingButton.js @@ -4,6 +4,7 @@ import React from 'react'; import { Platform } from 'react-native'; import { connect } from '../../../base/redux'; +import { isDesktopShareButtonDisabled } from '../../functions'; import ScreenSharingAndroidButton from './ScreenSharingAndroidButton.js'; import ScreenSharingIosButton from './ScreenSharingIosButton.js'; @@ -30,7 +31,7 @@ const ScreenSharingButton = props => ( * }} */ function _mapStateToProps(state): Object { - const disabled = state['features/base/audio-only'].enabled; + const disabled = state['features/base/audio-only'].enabled || isDesktopShareButtonDisabled(state); return { _disabled: disabled diff --git a/react/features/toolbox/components/web/ShareDesktopButton.js b/react/features/toolbox/components/web/ShareDesktopButton.js index 3832266c3..d1df6c132 100644 --- a/react/features/toolbox/components/web/ShareDesktopButton.js +++ b/react/features/toolbox/components/web/ShareDesktopButton.js @@ -5,7 +5,8 @@ import { IconShareDesktop } from '../../../base/icons'; import JitsiMeetJS from '../../../base/lib-jitsi-meet/_'; import { connect } from '../../../base/redux'; import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; -import { isScreenMediaShared, isScreenVideoShared } from '../../../screen-share'; +import { isScreenVideoShared } from '../../../screen-share'; +import { isDesktopShareButtonDisabled } from '../../functions'; type Props = AbstractButtonProps & { @@ -97,15 +98,8 @@ class ShareDesktopButton extends AbstractButton { * @returns {Object} */ const mapStateToProps = state => { - const { muted, unmuteBlocked } = state['features/base/media'].video; - const videoOrShareInProgress = isScreenMediaShared(state) || !muted; - - // Disable the screenshare button if the video sender limit is reached and there is no video or media share in - // progress. - let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled() - && !(unmuteBlocked && !videoOrShareInProgress); + let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled(); const { enableFeaturesBasedOnToken } = state['features/base/config']; - let desktopSharingDisabledTooltipKey; if (enableFeaturesBasedOnToken) { @@ -115,6 +109,10 @@ const mapStateToProps = state => { desktopSharingDisabledTooltipKey = 'dialog.shareYourScreenDisabled'; } + // Disable the screenshare button if the video sender limit is reached and there is no video or media share in + // progress. + desktopSharingEnabled = desktopSharingEnabled && !isDesktopShareButtonDisabled(state); + return { _desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey, _desktopSharingEnabled: desktopSharingEnabled, diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index d33423fd2..d90d26559 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/react/features/toolbox/components/web/Toolbox.js @@ -77,7 +77,7 @@ import { showToolbox } from '../../actions'; import { THRESHOLDS, NOT_APPLICABLE, DRAWER_MAX_HEIGHT, NOTIFY_CLICK_MODE } from '../../constants'; -import { isToolboxVisible } from '../../functions'; +import { isDesktopShareButtonDisabled, isToolboxVisible } from '../../functions'; import DownloadButton from '../DownloadButton'; import HangupButton from '../HangupButton'; import HelpButton from '../HelpButton'; @@ -123,6 +123,11 @@ type Props = { */ _conference: Object, + /** + * Whether or not screensharing button is disabled. + */ + _desktopSharingButtonDisabled: boolean, + /** * The tooltip key to use when screensharing is disabled. Or undefined * if non to be shown and the button to be hidden. @@ -537,6 +542,7 @@ class Toolbox extends Component { _doToggleScreenshare() { const { _backgroundType, + _desktopSharingButtonDisabled, _desktopSharingEnabled, _localVideo, _virtualSource, @@ -558,7 +564,7 @@ class Toolbox extends Component { return; } - if (_desktopSharingEnabled) { + if (_desktopSharingEnabled && !_desktopSharingButtonDisabled) { dispatch(startScreenShareFlow()); } } @@ -1059,6 +1065,10 @@ class Toolbox extends Component { * @returns {void} */ _onShortcutToggleScreenshare() { + // Ignore the shortcut if the button is disabled. + if (this.props._desktopSharingButtonDisabled) { + return; + } sendAnalytics(createShortcutEvent( 'toggle.screen.sharing', ACTION_SHORTCUT_TRIGGERED, @@ -1377,6 +1387,7 @@ function _mapStateToProps(state, ownProps) { _clientWidth: clientWidth, _conference: conference, _desktopSharingEnabled: desktopSharingEnabled, + _desktopSharingButtonDisabled: isDesktopShareButtonDisabled(state), _desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey, _dialog: Boolean(state['features/base/dialog'].component), _feedbackConfigured: Boolean(callStatsID), diff --git a/react/features/toolbox/functions.native.js b/react/features/toolbox/functions.native.js index 57d06db9a..f67145ca8 100644 --- a/react/features/toolbox/functions.native.js +++ b/react/features/toolbox/functions.native.js @@ -53,6 +53,19 @@ export function getMovableButtons(width: number): Set { return new Set(buttons); } +/** + * Indicates if the desktop share button is disabled or not. + * + * @param {Object} state - The state from the Redux store. + * @returns {boolean} + */ +export function isDesktopShareButtonDisabled(state: Object) { + const { muted, unmuteBlocked } = state['features/base/media'].video; + const videoOrShareInProgress = !muted || isLocalVideoTrackDesktop(state); + + return unmuteBlocked && !videoOrShareInProgress; +} + /** * Returns true if the toolbox is visible. * diff --git a/react/features/toolbox/functions.web.js b/react/features/toolbox/functions.web.js index 6aee62e5a..a13160ea9 100644 --- a/react/features/toolbox/functions.web.js +++ b/react/features/toolbox/functions.web.js @@ -1,7 +1,7 @@ // @flow - import { getToolbarButtons } from '../base/config'; import { hasAvailableDevices } from '../base/devices'; +import { isScreenMediaShared } from '../screen-share/functions'; import { TOOLBAR_TIMEOUT } from './constants'; @@ -66,6 +66,19 @@ export function isAudioSettingsButtonDisabled(state: Object) { || state['features/base/config'].startSilent; } +/** + * Indicates if the desktop share button is disabled or not. + * + * @param {Object} state - The state from the Redux store. + * @returns {boolean} + */ +export function isDesktopShareButtonDisabled(state: Object) { + const { muted, unmuteBlocked } = state['features/base/media'].video; + const videoOrShareInProgress = !muted || isScreenMediaShared(state); + + return unmuteBlocked && !videoOrShareInProgress; +} + /** * Indicates if the video settings button is disabled or not. *