fix(rn,recording) fix start button not being enabled

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

@@ -379,10 +379,7 @@ class StartRecordingDialogContent extends Component<Props> {
             <Container>
                 <Container
                     className = 'recording-header recording-header-line'
-                    style = { [
+                    style = { styles.headerIntegrations }>
-                        styles.headerIntegrations,
-                        _dialogStyles.topBorderContainer
-                    ] }>
                     <Container
                         className = 'recording-icon-container'>
                         <Image

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

@@ -9,6 +9,7 @@ import HeaderNavigationButton
     from '../../../../mobile/navigation/components/HeaderNavigationButton';
 import { goBack } from
     '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { RECORDING_TYPES } from '../../../constants';
 import AbstractStartRecordingDialog, {
     type Props,
     mapStateToProps
@@ -43,30 +44,34 @@ class StartRecordingDialog extends AbstractStartRecordingDialog<Props> {
      * @returns {void}
      */
     componentDidMount() {
-        const {
+        const { navigation, t } = this.props;
-            _fileRecordingsServiceEnabled,
-            _isDropboxEnabled,
-            navigation,
-            t
-        } = this.props;
-
-        const {
-            isTokenValid,
-            isValidating
-        } = this.state;
-
-        // disable start button id recording service is shown only, when
-        // validating dropbox token, if that is not enabled we either always
-        // show the start button or if just dropbox is enabled start is available
-        // when there is token
-        const isStartDisabled
-            = _fileRecordingsServiceEnabled ? isValidating
-                : _isDropboxEnabled ? !isTokenValid : false;
 
         navigation.setOptions({
             headerRight: () => (
                 <HeaderNavigationButton
-                    disabled = { isStartDisabled }
+                    disabled = { this.isStartRecordingDisabled() }
+                    label = { t('dialog.start') }
+                    onPress = { this._onStartPress }
+                    twoActions = { true } />
+            )
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidUpdate()}. Invoked
+     * immediately after this component is updated.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentDidUpdate() {
+        const { navigation, t } = this.props;
+
+        navigation.setOptions({
+            // eslint-disable-next-line react/no-multi-comp
+            headerRight: () => (
+                <HeaderNavigationButton
+                    disabled = { this.isStartRecordingDisabled() }
                     label = { t('dialog.start') }
                     onPress = { this._onStartPress }
                     twoActions = { true } />
@@ -85,6 +90,30 @@ class StartRecordingDialog extends AbstractStartRecordingDialog<Props> {
         this._onSubmit() && goBack();
     }
 
+    isStartRecordingDisabled: () => boolean;
+
+    /**
+     * Disables start recording button.
+     *
+     * @returns {boolean}
+     */
+    isStartRecordingDisabled() {
+        const { isTokenValid, selectedRecordingService } = this.state;
+
+        // Start button is disabled if recording service is only shown;
+        // When validating dropbox token, if that is not enabled, we either always
+        // show the start button or, if just dropbox is enabled, start button
+        // is available when there is token.
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return false;
+        } else if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return !isTokenValid;
+        }
+
+        return true;
+
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *

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

@@ -7,6 +7,7 @@ import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
 import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture';
 import { isScreenshotCaptureEnabled } from '../../../../screenshot-capture/functions';
+import { RECORDING_TYPES } from '../../../constants';
 import AbstractStartRecordingDialog, {
     mapStateToProps as abstractMapStateToProps
 } from '../AbstractStartRecordingDialog';
@@ -19,6 +20,30 @@ import StartRecordingDialogContent from '../StartRecordingDialogContent';
  * @augments Component
  */
 class StartRecordingDialog extends AbstractStartRecordingDialog {
+
+    isStartRecordingDisabled: () => boolean;
+
+    /**
+     * Disables start recording button.
+     *
+     * @returns {boolean}
+     */
+    isStartRecordingDisabled() {
+        const { isTokenValid, selectedRecordingService } = this.state;
+
+        // Start button is disabled if recording service is only shown;
+        // When validating dropbox token, if that is not enabled, we either always
+        // show the start button or, if just dropbox is enabled, start button
+        // is available when there is token.
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return false;
+        } else if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return !isTokenValid;
+        }
+
+        return true;
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -33,19 +58,14 @@ class StartRecordingDialog extends AbstractStartRecordingDialog {
             spaceLeft,
             userName
         } = this.state;
-        const { _fileRecordingsServiceEnabled, _fileRecordingsServiceSharingEnabled, _isDropboxEnabled } = this.props;
+        const {
-
+            _fileRecordingsServiceEnabled,
-        // disable ok button id recording service is shown only, when
+            _fileRecordingsServiceSharingEnabled
-        // validating dropbox token, if that is not enabled we either always
+        } = this.props;
-        // show the ok button or if just dropbox is enabled ok is available
-        // when there is token
-        const isOkDisabled
-            = _fileRecordingsServiceEnabled ? isValidating
-                : _isDropboxEnabled ? !isTokenValid : false;
 
         return (
             <Dialog
-                okDisabled = { isOkDisabled }
+                okDisabled = { this.isStartRecordingDisabled() }
                 okKey = 'dialog.startRecording'
                 onSubmit = { this._onSubmit }
                 titleKey = 'dialog.startRecording'