From a2186e8cee962391ccfe9d23b5c1673be4c971e9 Mon Sep 17 00:00:00 2001 From: Tudor-Ovidiu Avram Date: Fri, 25 Mar 2022 09:34:07 +0200 Subject: [PATCH] fix(highlight) set highlight button visibility based on record button props --- .../Recording/AbstractHighlightButton.js | 8 ++- .../Recording/AbstractRecordButton.js | 59 +++--------------- react/features/recording/functions.js | 62 ++++++++++++++++++- 3 files changed, 76 insertions(+), 53 deletions(-) diff --git a/react/features/recording/components/Recording/AbstractHighlightButton.js b/react/features/recording/components/Recording/AbstractHighlightButton.js index 378c6c1433b86..6c6d096919741 100644 --- a/react/features/recording/components/Recording/AbstractHighlightButton.js +++ b/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) }; } diff --git a/react/features/recording/components/Recording/AbstractRecordButton.js b/react/features/recording/components/Recording/AbstractRecordButton.js index 7b8812fa06b59..81cc0bb2a97e8 100644 --- a/react/features/recording/components/Recording/AbstractRecordButton.js +++ b/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 extends AbstractButton * {@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, + _tooltip, + visible + } = getRecordButtonProps(state); return { _disabled, diff --git a/react/features/recording/functions.js b/react/features/recording/functions.js index 0eecd49cce1cc..1fffae30a5faf 100644 --- a/react/features/recording/functions.js +++ b/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.