feat(ios) enable Dropbox recording

ios/app/src/AppDelegate.m

@@ -37,13 +37,8 @@
         [builder setFeatureFlag:@"welcomepage.enabled" withBoolean:YES];
         [builder setFeatureFlag:@"resolution" withValue:@(360)];
         [builder setFeatureFlag:@"ios.screensharing.enabled" withBoolean:YES];
-        builder.serverURL = [NSURL URLWithString:@"https://meet.jit.si"];
-
-        // Apple rejected our app because they claim requiring a
-        // Dropbox account for recording is not acceptable.
-#if DEBUG
         [builder setFeatureFlag:@"ios.recording.enabled" withBoolean:YES];
-#endif
+        builder.serverURL = [NSURL URLWithString:@"https://meet.jit.si"];
     }];
 
   [jitsiMeet application:application didFinishLaunchingWithOptions:launchOptions];

react/features/mobile/navigation/components/styles.js

@@ -1,5 +1,3 @@
-import { StyleSheet } from 'react-native';
-
 import { BoxModel } from '../../../base/styles';
 import BaseTheme from '../../../base/ui/components/BaseTheme';
 
@@ -11,13 +9,12 @@ export const TEXT_COLOR = BaseTheme.palette.text01;
  */
 export const navigationStyles = {
     connectingScreenContainer: {
+        backgroundColor: BaseTheme.palette.uiBackground,
         flex: 1
     },
 
     connectingScreenContent: {
-        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
-        backgroundColor: BaseTheme.palette.uiBackground,
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'center'

react/features/participants-pane/components/native/CollapsibleList.js

@@ -31,7 +31,7 @@ type Props = {
 }
 
 const CollapsibleList = ({ children, containerStyle, onLongPress, title }: Props) => {
-    const [ collapsed, setCollapsed ] = useState(true);
+    const [ collapsed, setCollapsed ] = useState(false);
     const _toggleCollapsed = useCallback(() => {
         setCollapsed(!collapsed);
     }, [ collapsed ]);

react/features/participants-pane/components/native/MeetingParticipantList.js

@@ -50,11 +50,21 @@ type Props = {
      */
     _sortedRemoteParticipants: Map<string, string>,
 
+    /**
+     * List of breakout rooms that were created.
+     */
+    breakoutRooms: Array,
+
     /**
      * The redux dispatch function.
      */
     dispatch: Function,
 
+    /**
+     * List of participants waiting in lobby.
+     */
+    lobbyParticipants: Array,
+
     /**
      * Participants search string.
      */
@@ -180,6 +190,8 @@ class MeetingParticipantList extends PureComponent<Props> {
             _participantsCount,
             _showInviteButton,
             _sortedRemoteParticipants,
+            breakoutRooms,
+            lobbyParticipants,
             t
         } = this.props;
         const title = _currentRoom?.name
@@ -192,12 +204,19 @@ class MeetingParticipantList extends PureComponent<Props> {
         // Regarding the fact that we have 3 sections, we apply
         // a certain height percentage for every section in order for all to fit
         // inside the participants pane container
+        // If there are only meeting participants available,
+        // we take the full container height
+        const onlyMeetingParticipants
+            = breakoutRooms.length === 0 && lobbyParticipants.length === 0;
         const containerStyle
-            = _participantsCount > 3 && styles.meetingListContainer;
+            = onlyMeetingParticipants
+                ? styles.meetingListFullContainer : styles.meetingListContainer;
+        const finalContainerStyle
+            = _participantsCount > 3 && containerStyle;
 
         return (
             <CollapsibleList
-                containerStyle = { containerStyle }
+                containerStyle = { finalContainerStyle }
                 title = { title } >
                 {
                     _showInviteButton

react/features/participants-pane/components/native/ParticipantsPane.js

@@ -19,6 +19,10 @@ import {
     getCurrentRoomId,
     isInBreakoutRoom
 } from '../../../breakout-rooms/functions';
+import {
+    getKnockingParticipants,
+    getLobbyEnabled
+} from '../../../lobby/functions';
 import MuteEveryoneDialog
     from '../../../video-menu/components/native/MuteEveryoneDialog';
 import {
@@ -63,11 +67,15 @@ const ParticipantsPane = () => {
         && participantsCount > 2 && rooms.length > 1;
     const addBreakoutRoom
         = _isBreakoutRoomsSupported && !hideAddRoomButton && isLocalModerator;
+    const lobbyEnabled = useSelector(getLobbyEnabled);
+    const lobbyParticipants = useSelector(getKnockingParticipants);
 
     return (
         <JitsiScreen style = { styles.participantsPaneContainer }>
             <LobbyParticipantList />
             <MeetingParticipantList
+                breakoutRooms = { _isBreakoutRoomsSupported && rooms }
+                lobbyParticipants = { lobbyEnabled && lobbyParticipants }
                 searchString = { searchString }
                 setSearchString = { setSearchString } />
             {

react/features/participants-pane/components/native/styles.js

@@ -196,7 +196,7 @@ export default {
     },
 
     lobbyListContent: {
-        height: '20%'
+        height: '16%'
     },
 
     lobbyListDescription: {
@@ -217,7 +217,11 @@ export default {
     },
 
     meetingListContainer: {
-        height: '60%'
+        height: '56%'
+    },
+
+    meetingListFullContainer: {
+        height: '82%'
     },
 
     meetingListDescription: {

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 = { [
-                        styles.headerIntegrations,
-                        _dialogStyles.topBorderContainer
-                    ] }>
+                    style = { styles.headerIntegrations }>
                     <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,38 @@ class StartRecordingDialog extends AbstractStartRecordingDialog<Props> {
      * @returns {void}
      */
     componentDidMount() {
-        const {
-            _fileRecordingsServiceEnabled,
-            _isDropboxEnabled,
-            navigation,
-            t
-        } = this.props;
+        super.componentDidMount();
 
-        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;
+        const { navigation, t } = this.props;
 
         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(prevProps) {
+        super.componentDidUpdate(prevProps);
+
+        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 +94,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;
-
-        // disable ok button id recording service is shown only, when
-        // validating dropbox token, if that is not enabled we either always
-        // show the ok button or if just dropbox is enabled ok is available
-        // when there is token
-        const isOkDisabled
-            = _fileRecordingsServiceEnabled ? isValidating
-                : _isDropboxEnabled ? !isTokenValid : false;
+        const {
+            _fileRecordingsServiceEnabled,
+            _fileRecordingsServiceSharingEnabled
+        } = this.props;
 
         return (
             <Dialog
-                okDisabled = { isOkDisabled }
+                okDisabled = { this.isStartRecordingDisabled() }
                 okKey = 'dialog.startRecording'
                 onSubmit = { this._onSubmit }
                 titleKey = 'dialog.startRecording'