rn: fix rendering unnecessary stuff when in PiP mode

react/features/conference/components/native/Conference.js

@@ -162,6 +162,78 @@ class Conference extends AbstractConference<Props, *> {
      * @returns {ReactElement}
      */
     render() {
+        return (
+            <Container style = { styles.conference }>
+                <StatusBar
+                    barStyle = 'light-content'
+                    hidden = { true }
+                    translucent = { true } />
+                { this._renderContent() }
+            </Container>
+        );
+    }
+
+    _onClick: () => void;
+
+    /**
+     * Changes the value of the toolboxVisible state, thus allowing us to switch
+     * between Toolbox and Filmstrip and change their visibility.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onClick() {
+        this._setToolboxVisible(!this.props._toolboxVisible);
+    }
+
+    _onHardwareBackPress: () => boolean;
+
+    /**
+     * Handles a hardware button press for back navigation. Enters Picture-in-Picture mode
+     * (if supported) or leaves the associated {@code Conference} otherwise.
+     *
+     * @returns {boolean} Exiting the app is undesired, so {@code true} is always returned.
+     */
+    _onHardwareBackPress() {
+        let p;
+
+        if (this.props._pictureInPictureEnabled) {
+            const { PictureInPicture } = NativeModules;
+
+            p = PictureInPicture.enterPictureInPicture();
+        } else {
+            p = Promise.reject(new Error('PiP not enabled'));
+        }
+
+        p.catch(() => {
+            this.props.dispatch(appNavigate(undefined));
+        });
+
+        return true;
+    }
+
+    /**
+     * Renders the conference notification badge if the feature is enabled.
+     *
+     * @private
+     * @returns {React$Node}
+     */
+    _renderConferenceNotification() {
+        const { _calendarEnabled, _reducedUI } = this.props;
+
+        return (
+            _calendarEnabled && !_reducedUI
+                ? <ConferenceNotification />
+                : undefined);
+    }
+
+    /**
+     * Renders the content for the Conference container.
+     *
+     * @private
+     * @returns {React$Element}
+     */
+    _renderContent() {
         const {
             _connecting,
             _filmstripVisible,
@@ -173,13 +245,12 @@ class Conference extends AbstractConference<Props, *> {
         const showGradient = _toolboxVisible;
         const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
 
-        return (
-            <Container style = { styles.conference }>
-                <StatusBar
-                    barStyle = 'light-content'
-                    hidden = { true }
-                    translucent = { true } />
+        if (_reducedUI) {
+            return this._renderContentForReducedUi();
+        }
 
+        return (
+            <>
                 <AddPeopleDialog />
                 <Chat />
                 <SharedDocument />
@@ -195,7 +266,7 @@ class Conference extends AbstractConference<Props, *> {
                 {/*
                   * If there is a ringing call, show the callee's info.
                   */
-                    _reducedUI || <CalleeInfoContainer />
+                    <CalleeInfoContainer />
                 }
 
                 {/*
@@ -255,71 +326,37 @@ class Conference extends AbstractConference<Props, *> {
                     pointerEvents = 'box-none'
                     style = { styles.navBarSafeView }>
                     <NavigationBar />
-                    { this.renderNotificationsContainer() }
+                    { this._renderNotificationsContainer() }
                 </SafeAreaView>
 
                 <TestConnectionInfo />
 
-                {
-                    this._renderConferenceNotification()
-                }
-
-            </Container>
+                { this._renderConferenceNotification() }
+            </>
         );
     }
 
-    _onClick: () => void;
-
-    /**
-     * Changes the value of the toolboxVisible state, thus allowing us to switch
-     * between Toolbox and Filmstrip and change their visibility.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onClick() {
-        this._setToolboxVisible(!this.props._toolboxVisible);
-    }
-
-    _onHardwareBackPress: () => boolean;
-
-    /**
-     * Handles a hardware button press for back navigation. Enters Picture-in-Picture mode
-     * (if supported) or leaves the associated {@code Conference} otherwise.
-     *
-     * @returns {boolean} Exiting the app is undesired, so {@code true} is always returned.
-     */
-    _onHardwareBackPress() {
-        let p;
-
-        if (this.props._pictureInPictureEnabled) {
-            const { PictureInPicture } = NativeModules;
-
-            p = PictureInPicture.enterPictureInPicture();
-        } else {
-            p = Promise.reject(new Error('PiP not enabled'));
-        }
-
-        p.catch(() => {
-            this.props.dispatch(appNavigate(undefined));
-        });
-
-        return true;
-    }
-
     /**
-     * Renders the conference notification badge if the feature is enabled.
+     * Renders the content for the Conference container when in "reduced UI" mode.
      *
      * @private
-     * @returns {React$Node}
+     * @returns {React$Element}
      */
-    _renderConferenceNotification() {
-        const { _calendarEnabled, _reducedUI } = this.props;
+    _renderContentForReducedUi() {
+        const { _connecting } = this.props;
 
         return (
-            _calendarEnabled && !_reducedUI
-                ? <ConferenceNotification />
-                : undefined);
+            <>
+                <LargeVideo onClick = { this._onClick } />
+
+                {
+                    _connecting
+                        && <TintedView>
+                            <LoadingIndicator />
+                        </TintedView>
+                }
+            </>
+        );
     }
 
     /**
@@ -329,7 +366,7 @@ class Conference extends AbstractConference<Props, *> {
      * @private
      * @returns {React$Element}
      */
-    renderNotificationsContainer() {
+    _renderNotificationsContainer() {
         const notificationsStyle = {};
 
         // In the landscape mode (wide) there's problem with notifications being