Browse Source

rn: fix rendering unnecessary stuff when in PiP mode

j8
Saúl Ibarra Corretgé 6 years ago
parent
commit
f7a526f488
1 changed files with 97 additions and 60 deletions
  1. 97
    60
      react/features/conference/components/native/Conference.js

+ 97
- 60
react/features/conference/components/native/Conference.js View File

162
      * @returns {ReactElement}
162
      * @returns {ReactElement}
163
      */
163
      */
164
     render() {
164
     render() {
165
+        return (
166
+            <Container style = { styles.conference }>
167
+                <StatusBar
168
+                    barStyle = 'light-content'
169
+                    hidden = { true }
170
+                    translucent = { true } />
171
+                { this._renderContent() }
172
+            </Container>
173
+        );
174
+    }
175
+
176
+    _onClick: () => void;
177
+
178
+    /**
179
+     * Changes the value of the toolboxVisible state, thus allowing us to switch
180
+     * between Toolbox and Filmstrip and change their visibility.
181
+     *
182
+     * @private
183
+     * @returns {void}
184
+     */
185
+    _onClick() {
186
+        this._setToolboxVisible(!this.props._toolboxVisible);
187
+    }
188
+
189
+    _onHardwareBackPress: () => boolean;
190
+
191
+    /**
192
+     * Handles a hardware button press for back navigation. Enters Picture-in-Picture mode
193
+     * (if supported) or leaves the associated {@code Conference} otherwise.
194
+     *
195
+     * @returns {boolean} Exiting the app is undesired, so {@code true} is always returned.
196
+     */
197
+    _onHardwareBackPress() {
198
+        let p;
199
+
200
+        if (this.props._pictureInPictureEnabled) {
201
+            const { PictureInPicture } = NativeModules;
202
+
203
+            p = PictureInPicture.enterPictureInPicture();
204
+        } else {
205
+            p = Promise.reject(new Error('PiP not enabled'));
206
+        }
207
+
208
+        p.catch(() => {
209
+            this.props.dispatch(appNavigate(undefined));
210
+        });
211
+
212
+        return true;
213
+    }
214
+
215
+    /**
216
+     * Renders the conference notification badge if the feature is enabled.
217
+     *
218
+     * @private
219
+     * @returns {React$Node}
220
+     */
221
+    _renderConferenceNotification() {
222
+        const { _calendarEnabled, _reducedUI } = this.props;
223
+
224
+        return (
225
+            _calendarEnabled && !_reducedUI
226
+                ? <ConferenceNotification />
227
+                : undefined);
228
+    }
229
+
230
+    /**
231
+     * Renders the content for the Conference container.
232
+     *
233
+     * @private
234
+     * @returns {React$Element}
235
+     */
236
+    _renderContent() {
165
         const {
237
         const {
166
             _connecting,
238
             _connecting,
167
             _filmstripVisible,
239
             _filmstripVisible,
173
         const showGradient = _toolboxVisible;
245
         const showGradient = _toolboxVisible;
174
         const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
246
         const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
175
 
247
 
176
-        return (
177
-            <Container style = { styles.conference }>
178
-                <StatusBar
179
-                    barStyle = 'light-content'
180
-                    hidden = { true }
181
-                    translucent = { true } />
248
+        if (_reducedUI) {
249
+            return this._renderContentForReducedUi();
250
+        }
182
 
251
 
252
+        return (
253
+            <>
183
                 <AddPeopleDialog />
254
                 <AddPeopleDialog />
184
                 <Chat />
255
                 <Chat />
185
                 <SharedDocument />
256
                 <SharedDocument />
195
                 {/*
266
                 {/*
196
                   * If there is a ringing call, show the callee's info.
267
                   * If there is a ringing call, show the callee's info.
197
                   */
268
                   */
198
-                    _reducedUI || <CalleeInfoContainer />
269
+                    <CalleeInfoContainer />
199
                 }
270
                 }
200
 
271
 
201
                 {/*
272
                 {/*
255
                     pointerEvents = 'box-none'
326
                     pointerEvents = 'box-none'
256
                     style = { styles.navBarSafeView }>
327
                     style = { styles.navBarSafeView }>
257
                     <NavigationBar />
328
                     <NavigationBar />
258
-                    { this.renderNotificationsContainer() }
329
+                    { this._renderNotificationsContainer() }
259
                 </SafeAreaView>
330
                 </SafeAreaView>
260
 
331
 
261
                 <TestConnectionInfo />
332
                 <TestConnectionInfo />
262
 
333
 
263
-                {
264
-                    this._renderConferenceNotification()
265
-                }
266
-
267
-            </Container>
334
+                { this._renderConferenceNotification() }
335
+            </>
268
         );
336
         );
269
     }
337
     }
270
 
338
 
271
-    _onClick: () => void;
272
-
273
-    /**
274
-     * Changes the value of the toolboxVisible state, thus allowing us to switch
275
-     * between Toolbox and Filmstrip and change their visibility.
276
-     *
277
-     * @private
278
-     * @returns {void}
279
-     */
280
-    _onClick() {
281
-        this._setToolboxVisible(!this.props._toolboxVisible);
282
-    }
283
-
284
-    _onHardwareBackPress: () => boolean;
285
-
286
-    /**
287
-     * Handles a hardware button press for back navigation. Enters Picture-in-Picture mode
288
-     * (if supported) or leaves the associated {@code Conference} otherwise.
289
-     *
290
-     * @returns {boolean} Exiting the app is undesired, so {@code true} is always returned.
291
-     */
292
-    _onHardwareBackPress() {
293
-        let p;
294
-
295
-        if (this.props._pictureInPictureEnabled) {
296
-            const { PictureInPicture } = NativeModules;
297
-
298
-            p = PictureInPicture.enterPictureInPicture();
299
-        } else {
300
-            p = Promise.reject(new Error('PiP not enabled'));
301
-        }
302
-
303
-        p.catch(() => {
304
-            this.props.dispatch(appNavigate(undefined));
305
-        });
306
-
307
-        return true;
308
-    }
309
-
310
     /**
339
     /**
311
-     * Renders the conference notification badge if the feature is enabled.
340
+     * Renders the content for the Conference container when in "reduced UI" mode.
312
      *
341
      *
313
      * @private
342
      * @private
314
-     * @returns {React$Node}
343
+     * @returns {React$Element}
315
      */
344
      */
316
-    _renderConferenceNotification() {
317
-        const { _calendarEnabled, _reducedUI } = this.props;
345
+    _renderContentForReducedUi() {
346
+        const { _connecting } = this.props;
318
 
347
 
319
         return (
348
         return (
320
-            _calendarEnabled && !_reducedUI
321
-                ? <ConferenceNotification />
322
-                : undefined);
349
+            <>
350
+                <LargeVideo onClick = { this._onClick } />
351
+
352
+                {
353
+                    _connecting
354
+                        && <TintedView>
355
+                            <LoadingIndicator />
356
+                        </TintedView>
357
+                }
358
+            </>
359
+        );
323
     }
360
     }
324
 
361
 
325
     /**
362
     /**
329
      * @private
366
      * @private
330
      * @returns {React$Element}
367
      * @returns {React$Element}
331
      */
368
      */
332
-    renderNotificationsContainer() {
369
+    _renderNotificationsContainer() {
333
         const notificationsStyle = {};
370
         const notificationsStyle = {};
334
 
371
 
335
         // In the landscape mode (wide) there's problem with notifications being
372
         // In the landscape mode (wide) there's problem with notifications being

Loading…
Cancel
Save