fix(highlight) set highlight button visibility based on record button… (#11215)

* fix(highlight) set highlight button visibility based on record button props

* code review

* code review

* code review

* code review

react/features/recording/components/Recording/AbstractHighlightButton.js

@@ -15,6 +15,7 @@ import {
 import { highlightMeetingMoment } from '../../actions.any';
 import { StartRecordingDialog } from '../../components';
 import { PROMPT_RECORDING_NOTIFICATION_ID } from '../../constants';
+import { getRecordButtonProps } from '../../functions';
 
 export type Props = {
 
@@ -106,9 +107,14 @@ export function _abstractMapStateToProps(state: Object) {
     const isButtonDisabled = isHighlightMeetingMomentDisabled(state);
     const { webhookProxyUrl } = state['features/base/config'];
 
+    const {
+        disabled: isRecordButtonDisabled,
+        visible: isRecordButtonVisible
+    } = getRecordButtonProps(state);
+
     return {
         _disabled: !isRecordingRunning,
         _isHighlightInProgress: isButtonDisabled,
-        _visible: Boolean(webhookProxyUrl)
+        _visible: isRecordButtonVisible && !isRecordButtonDisabled && Boolean(webhookProxyUrl)
     };
 }

react/features/recording/components/Recording/AbstractRecordButton.js

@@ -6,16 +6,10 @@ import {
 } from '../../../analytics';
 import { IconToggleRecording } from '../../../base/icons';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
-import {
-    getLocalParticipant,
-    isLocalParticipantModerator
-} from '../../../base/participants';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
 import { FEATURES } from '../../../jaas/constants';
-import { getActiveSession } from '../../functions';
-
+import { getActiveSession, getRecordButtonProps } from '../../functions';
 
 /**
  * The type of the React {@code Component} props of
@@ -131,57 +125,20 @@ export default class AbstractRecordButton<P: Props> extends AbstractButton<P, *>
  * {@code RecordButton} component.
  *
  * @param {Object} state - The Redux state.
- * @param {Props} ownProps - The own props of the Component.
  * @private
  * @returns {{
  *     _disabled: boolean,
  *     _isRecordingRunning: boolean,
+ *     _tooltip: string,
  *     visible: boolean
  * }}
  */
-export function _mapStateToProps(state: Object, ownProps: Props): Object {
-    let { visible } = ownProps;
-
-    // a button can be disabled/enabled if enableFeaturesBasedOnToken
-    // is on or if the livestreaming is running.
-    let _disabled;
-    let _tooltip = '';
-
-    if (typeof visible === 'undefined') {
-        // If the containing component provides the visible prop, that is one
-        // above all, but if not, the button should be autonomus and decide on
-        // its own to be visible or not.
-        const isModerator = isLocalParticipantModerator(state);
-        const {
-            enableFeaturesBasedOnToken,
-            fileRecordingsEnabled
-        } = state['features/base/config'];
-        const { features = {} } = getLocalParticipant(state);
-
-        visible = isModerator && fileRecordingsEnabled;
-
-        if (enableFeaturesBasedOnToken) {
-            visible = visible && String(features.recording) === 'true';
-            _disabled = String(features.recording) === 'disabled';
-            if (!visible && !_disabled) {
-                _disabled = true;
-                visible = true;
-                _tooltip = 'dialog.recordingDisabledTooltip';
-            }
-        }
-    }
-
-    // disable the button if the livestreaming is running.
-    if (getActiveSession(state, JitsiRecordingConstants.mode.STREAM)) {
-        _disabled = true;
-        _tooltip = 'dialog.recordingDisabledBecauseOfActiveLiveStreamingTooltip';
-    }
-
-    // disable the button if we are in a breakout room.
-    if (isInBreakoutRoom(state)) {
-        _disabled = true;
-        visible = false;
-    }
+export function _mapStateToProps(state: Object): Object {
+    const {
+        disabled: _disabled,
+        tooltip: _tooltip,
+        visible
+    } = getRecordButtonProps(state);
 
     return {
         _disabled,

react/features/recording/components/Recording/web/RecordButton.js

@@ -50,11 +50,7 @@ class RecordingButton extends AbstractRecordButton<Props> {
 export function _mapStateToProps(state: Object, ownProps: Props): Object {
     const abstractProps = _abstractMapStateToProps(state, ownProps);
     const toolbarButtons = getToolbarButtons(state);
-    let { visible } = ownProps;
-
-    if (typeof visible === 'undefined') {
-        visible = toolbarButtons.includes('recording') && abstractProps.visible;
-    }
+    const visible = toolbarButtons.includes('recording') && abstractProps.visible;
 
     return {
         ...abstractProps,

react/features/recording/functions.js

@@ -1,7 +1,8 @@
 // @flow
 
 import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
-import { getLocalParticipant } from '../base/participants';
+import { getLocalParticipant, isLocalParticipantModerator } from '../base/participants';
+import { isInBreakoutRoom } from '../breakout-rooms/functions';
 import { isEnabled as isDropboxEnabled } from '../dropbox';
 import { extractFqnFromPath } from '../dynamic-branding';
 
@@ -119,6 +120,65 @@ export function getSessionStatusToShow(state: Object, mode: string): ?string {
     return status;
 }
 
+/**
+ * Returns the recording button props.
+ *
+ * @param {Object} state - The redux state to search in.
+ *
+ * @returns {{
+ *    disabled: boolean,
+ *    tooltip: string,
+ *    visible: boolean
+ * }}
+ */
+export function getRecordButtonProps(state: Object): ?string {
+    let visible;
+
+    // a button can be disabled/enabled if enableFeaturesBasedOnToken
+    // is on or if the livestreaming is running.
+    let disabled;
+    let tooltip = '';
+
+    // If the containing component provides the visible prop, that is one
+    // above all, but if not, the button should be autonomus and decide on
+    // its own to be visible or not.
+    const isModerator = isLocalParticipantModerator(state);
+    const {
+        enableFeaturesBasedOnToken,
+        fileRecordingsEnabled
+    } = state['features/base/config'];
+    const { features = {} } = getLocalParticipant(state);
+
+    visible = isModerator && fileRecordingsEnabled;
+
+    if (enableFeaturesBasedOnToken) {
+        visible = visible && String(features.recording) === 'true';
+        disabled = String(features.recording) === 'disabled';
+        if (!visible && !disabled) {
+            disabled = true;
+            visible = true;
+            tooltip = 'dialog.recordingDisabledTooltip';
+        }
+    }
+
+    // disable the button if the livestreaming is running.
+    if (getActiveSession(state, JitsiRecordingConstants.mode.STREAM)) {
+        disabled = true;
+        tooltip = 'dialog.recordingDisabledBecauseOfActiveLiveStreamingTooltip';
+    }
+
+    // disable the button if we are in a breakout room.
+    if (isInBreakoutRoom(state)) {
+        disabled = true;
+        visible = false;
+    }
+
+    return {
+        disabled,
+        tooltip,
+        visible
+    };
+}
 
 /**
  * Returns the resource id.