diff --git a/react/features/recording/components/Recording/AbstractStartRecordingDialog.js b/react/features/recording/components/Recording/AbstractStartRecordingDialog.js index 4605e7cb6..8bd752377 100644 --- a/react/features/recording/components/Recording/AbstractStartRecordingDialog.js +++ b/react/features/recording/components/Recording/AbstractStartRecordingDialog.js @@ -64,6 +64,11 @@ type State = { */ isValidating: boolean, + /** + * The currently selected recording service of type: RECORDING_TYPES. + */ + selectedRecordingService: ?string, + /** * Number of MiB of available space in user's Dropbox account. */ @@ -89,15 +94,27 @@ class AbstractStartRecordingDialog extends Component { // Bind event handler so it is only bound once for every instance. this._onSubmit = this._onSubmit.bind(this); + this._onSelectedRecordingServiceChanged + = this._onSelectedRecordingServiceChanged.bind(this); + + let selectedRecordingService; + + // TODO: Potentially check if we need to handle changes of + // _fileRecordingsServiceEnabled and _areIntegrationsEnabled() + if (this.props._fileRecordingsServiceEnabled + || !this._areIntegrationsEnabled()) { + selectedRecordingService = RECORDING_TYPES.JITSI_REC_SERVICE; + } else if (this._areIntegrationsEnabled()) { + selectedRecordingService = RECORDING_TYPES.DROPBOX; + } this.state = { isTokenValid: false, isValidating: false, userName: undefined, - spaceLeft: undefined + spaceLeft: undefined, + selectedRecordingService }; - - this._onSubmit = this._onSubmit.bind(this); } /** @@ -124,6 +141,32 @@ class AbstractStartRecordingDialog extends Component { } } + _areIntegrationsEnabled: () => boolean; + + /** + * Returns true if the integrations with third party services are enabled + * and false otherwise. + * + * @returns {boolean} - True if the integrations with third party services + * are enabled and false otherwise. + */ + _areIntegrationsEnabled() { + return this.props._isDropboxEnabled; + } + + _onSelectedRecordingServiceChanged: (string) => void; + + /** + * Handles selected recording service changes. + * + * @param {string} selectedRecordingService - The new selected recording + * service. + * @returns {void} + */ + _onSelectedRecordingServiceChanged(selectedRecordingService) { + this.setState({ selectedRecordingService }); + } + /** * Validates the dropbox access token and fetches account information. * @@ -176,7 +219,10 @@ class AbstractStartRecordingDialog extends Component { let appData; const attributes = {}; - if (_isDropboxEnabled && _token) { + if (_isDropboxEnabled + && _token + && this.state.selectedRecordingService + === RECORDING_TYPES.DROPBOX) { appData = JSON.stringify({ 'file_recording_metadata': { 'upload_credentials': { diff --git a/react/features/recording/components/Recording/StartRecordingDialogContent.js b/react/features/recording/components/Recording/StartRecordingDialogContent.js index 2afc583ab..d00ed2c0b 100644 --- a/react/features/recording/components/Recording/StartRecordingDialogContent.js +++ b/react/features/recording/components/Recording/StartRecordingDialogContent.js @@ -64,6 +64,17 @@ type Props = { */ isValidating: boolean, + /** + * The function will be called when there are changes related to the + * switches. + */ + onChange: Function, + + /** + * The currently selected recording service of type: RECORDING_TYPES. + */ + selectedRecordingService: ?string, + /** * Number of MiB of available space in user's Dropbox account. */ @@ -77,27 +88,15 @@ type Props = { /** * The display name of the user's Dropbox account. */ - userName: ?string, + userName: ?string }; -/** - * State of the component. - */ -type State = { - - /** - * The currently selected recording service of type: RECORDING_TYPES. - */ - selectedRecordingService: string -}; - - /** * React Component for getting confirmation to start a file recording session. * * @extends Component */ -class StartRecordingDialogContent extends Component { +class StartRecordingDialogContent extends Component { /** * Initializes a new {@code StartRecordingDialogContent} instance. * @@ -113,12 +112,6 @@ class StartRecordingDialogContent extends Component { = this._onDropboxSwitchChange.bind(this); this._onRecordingServiceSwitchChange = this._onRecordingServiceSwitchChange.bind(this); - - // the initial state is jitsi rec service is always selected - // if only one type of recording is enabled this state will be ignored - this.state = { - selectedRecordingService: RECORDING_TYPES.JITSI_REC_SERVICE - }; } /** @@ -165,7 +158,7 @@ class StartRecordingDialogContent extends Component { style = { styles.switch } trackColor = {{ false: ColorPalette.lightGrey }} value = { - this.state.selectedRecordingService + this.props.selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE } /> ) : null; @@ -243,7 +236,7 @@ class StartRecordingDialogContent extends Component { onValueChange = { this._onDropboxSwitchChange } style = { styles.switch } trackColor = {{ false: ColorPalette.lightGrey }} - value = { this.state.selectedRecordingService + value = { this.props.selectedRecordingService === RECORDING_TYPES.DROPBOX } /> ); } @@ -287,18 +280,21 @@ class StartRecordingDialogContent extends Component { * @returns {void} */ _onRecordingServiceSwitchChange() { + const { + isTokenValid, + onChange, + selectedRecordingService + } = this.props; // act like group, cannot toggle off - if (this.state.selectedRecordingService + if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) { return; } - this.setState({ - selectedRecordingService: RECORDING_TYPES.JITSI_REC_SERVICE - }); + onChange(RECORDING_TYPES.JITSI_REC_SERVICE); - if (this.props.isTokenValid) { + if (isTokenValid) { this._onSignOut(); } } @@ -309,17 +305,21 @@ class StartRecordingDialogContent extends Component { * @returns {void} */ _onDropboxSwitchChange() { + const { + isTokenValid, + onChange, + selectedRecordingService + } = this.props; + // act like group, cannot toggle off - if (this.state.selectedRecordingService + if (selectedRecordingService === RECORDING_TYPES.DROPBOX) { return; } - this.setState({ - selectedRecordingService: RECORDING_TYPES.DROPBOX - }); + onChange(RECORDING_TYPES.DROPBOX); - if (!this.props.isTokenValid) { + if (!isTokenValid) { this._onSignIn(); } } diff --git a/react/features/recording/components/Recording/native/StartRecordingDialog.js b/react/features/recording/components/Recording/native/StartRecordingDialog.js index 6801164c3..7826260ca 100644 --- a/react/features/recording/components/Recording/native/StartRecordingDialog.js +++ b/react/features/recording/components/Recording/native/StartRecordingDialog.js @@ -24,7 +24,13 @@ class StartRecordingDialog extends AbstractStartRecordingDialog { * @inheritdoc */ render() { - const { isTokenValid, isValidating, spaceLeft, userName } = this.state; + const { + isTokenValid, + isValidating, + selectedRecordingService, + spaceLeft, + userName + } = this.state; const { _fileRecordingsServiceEnabled, _isDropboxEnabled } = this.props; // disable ok button id recording service is shown only, when @@ -42,16 +48,20 @@ class StartRecordingDialog extends AbstractStartRecordingDialog { ); } + _areIntegrationsEnabled: () => boolean; _onSubmit: () => boolean + _onSelectedRecordingServiceChanged: (string) => void; } export default translate(connect(mapStateToProps)(StartRecordingDialog)); diff --git a/react/features/recording/components/Recording/web/StartRecordingDialog.js b/react/features/recording/components/Recording/web/StartRecordingDialog.js index 77055ef68..d8b9c5d71 100644 --- a/react/features/recording/components/Recording/web/StartRecordingDialog.js +++ b/react/features/recording/components/Recording/web/StartRecordingDialog.js @@ -24,7 +24,13 @@ class StartRecordingDialog extends AbstractStartRecordingDialog { * @inheritdoc */ render() { - const { isTokenValid, isValidating, spaceLeft, userName } = this.state; + const { + isTokenValid, + isValidating, + selectedRecordingService, + spaceLeft, + userName + } = this.state; const { _fileRecordingsServiceEnabled, _isDropboxEnabled } = this.props; // disable ok button id recording service is shown only, when @@ -45,16 +51,20 @@ class StartRecordingDialog extends AbstractStartRecordingDialog { ); } - _onSubmit: () => boolean + _areIntegrationsEnabled: () => boolean; + _onSubmit: () => boolean; + _onSelectedRecordingServiceChanged: (string) => void; } export default translate(connect(mapStateToProps)(StartRecordingDialog));