fix(recording): Show the button when the dropbox integration is disabled

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

@@ -11,7 +11,6 @@ import {
     getLocalParticipant,
     isLocalParticipantModerator
 } from '../../../base/participants';
-import { isEnabled as isDropboxEnabled } from '../../../dropbox';
 import {
     AbstractButton,
     type AbstractButtonProps
@@ -130,8 +129,7 @@ export function _mapStateToProps(state: Object, ownProps: Props): Object {
         const { features = {} } = getLocalParticipant(state);
 
         visible = isModerator
-            && fileRecordingsEnabled
+            && fileRecordingsEnabled;
-            && isDropboxEnabled(state);
 
         if (enableFeaturesBasedOnToken) {
             visible = visible && String(features.recording) === 'true';

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

@@ -9,9 +9,12 @@ import {
 } from '../../../analytics';
 import { Dialog } from '../../../base/dialog';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import {
+    getDropboxData,
+    isEnabled as isDropboxEnabled
+} from '../../../dropbox';
 
 import StartRecordingDialogContent from './StartRecordingDialogContent';
-import { getDropboxData } from '../../../dropbox';
 
 type Props = {
 
@@ -25,6 +28,11 @@ type Props = {
      */
     _appKey: string,
 
+    /**
+     * If true the dropbox integration is enabled, otherwise - disabled.
+     */
+    _isDropboxEnabled: boolean,
+
     /**
      * The dropbox access token.
      */
@@ -117,7 +125,11 @@ class StartRecordingDialog extends Component<Props, State> {
      * @returns {void}
      */
     _onTokenUpdated() {
-        const { _appKey, _token } = this.props;
+        const { _appKey, _isDropboxEnabled, _token } = this.props;
+
+        if (!_isDropboxEnabled) {
+            return;
+        }
 
         if (typeof _token === 'undefined') {
             this.setState({
@@ -154,15 +166,17 @@ class StartRecordingDialog extends Component<Props, State> {
      */
     render() {
         const { isTokenValid, isValidating, spaceLeft, userName } = this.state;
+        const { _isDropboxEnabled } = this.props;
 
         return (
             <Dialog
-                okDisabled = { !isTokenValid }
+                okDisabled = { !isTokenValid && _isDropboxEnabled }
                 okTitleKey = 'dialog.confirm'
                 onSubmit = { this._onSubmit }
                 titleKey = 'dialog.recording'
                 width = 'small'>
                 <StartRecordingDialogContent
+                    integrationsEnabled = { _isDropboxEnabled }
                     isTokenValid = { isTokenValid }
                     isValidating = { isValidating }
                     spaceLeft = { spaceLeft }
@@ -183,18 +197,23 @@ class StartRecordingDialog extends Component<Props, State> {
         sendAnalytics(
             createRecordingDialogEvent('start', 'confirm.button')
         );
-        const { _conference, _token } = this.props;
+        const { _conference, _isDropboxEnabled, _token } = this.props;
+        let appData;
 
-        _conference.startRecording({
+        if (_isDropboxEnabled) {
-            mode: JitsiRecordingConstants.mode.FILE,
+            appData = JSON.stringify({
-            appData: JSON.stringify({
                 'file_recording_metadata': {
                     'upload_credentials': {
                         'service_name': 'dropbox',
                         'token': _token
                     }
                 }
-            })
+            });
+        }
+
+        _conference.startRecording({
+            mode: JitsiRecordingConstants.mode.FILE,
+            appData
         });
 
         return true;
@@ -227,6 +246,7 @@ function mapStateToProps(state: Object) {
     return {
         _appKey: dropbox.appKey,
         _conference: state['features/base/conference'].conference,
+        _isDropboxEnabled: isDropboxEnabled(state),
         _token: state['features/dropbox'].token
     };
 }

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

@@ -26,6 +26,11 @@ type Props = {
      */
     dispatch: Function,
 
+    /**
+     * If true the content related to the integrations will be shown.
+     */
+    integrationsEnabled: boolean,
+
     /**
      * <tt>true</tt> if we have valid oauth token.
      */
@@ -79,6 +84,33 @@ class StartRecordingDialogContent extends Component<Props> {
      * @returns {React$Component}
      */
     render() {
+        if (this.props.integrationsEnabled) {
+            return this._renderIntegrationsContent();
+        }
+
+        return this._renderNoIntegrationsContent();
+    }
+
+    /**
+     * Renders the content in case no integrations were enabled.
+     *
+     * @returns {React$Component}
+     */
+    _renderNoIntegrationsContent() {
+        return (
+            <Container>
+                { this.props.t('recording.startRecordingBody') }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the content in case integrations were enabled.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    _renderIntegrationsContent() {
         const { isTokenValid, isValidating, t } = this.props;
 
         let content = null;