fix(toolbox) Disable screensharing button on mobile for video sender limit.

Also, ignore the toggle screenshare shortcut when the video sender limit is reached.

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

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<Props, *> {
  * @returns {Object}
  */
 const mapStateToProps = state => {
-    const { muted, unmuteBlocked } = state['features/base/media'].video;
+    let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled();
-    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);
     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,

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<Props> {
     _doToggleScreenshare() {
         const {
             _backgroundType,
+            _desktopSharingButtonDisabled,
             _desktopSharingEnabled,
             _localVideo,
             _virtualSource,
@@ -558,7 +564,7 @@ class Toolbox extends Component<Props> {
             return;
         }
 
-        if (_desktopSharingEnabled) {
+        if (_desktopSharingEnabled && !_desktopSharingButtonDisabled) {
             dispatch(startScreenShareFlow());
         }
     }
@@ -1059,6 +1065,10 @@ class Toolbox extends Component<Props> {
      * @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),

react/features/toolbox/functions.native.js

@@ -53,6 +53,19 @@ export function getMovableButtons(width: number): Set<string> {
     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.
  *

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.
  *