feat(native-participants-panel) renamed ParticipantsPanel to ParticipantsPane and created modal

ios/Podfile.lock

@@ -1,9 +1,9 @@
 PODS:
-  - AppAuth (1.2.0):
-    - AppAuth/Core (= 1.2.0)
-    - AppAuth/ExternalUserAgent (= 1.2.0)
-  - AppAuth/Core (1.2.0)
-  - AppAuth/ExternalUserAgent (1.2.0)
+  - AppAuth (1.4.0):
+    - AppAuth/Core (= 1.4.0)
+    - AppAuth/ExternalUserAgent (= 1.4.0)
+  - AppAuth/Core (1.4.0)
+  - AppAuth/ExternalUserAgent (1.4.0)
   - boost-for-react-native (1.63.0)
   - CocoaLumberjack (3.5.3):
     - CocoaLumberjack/Core (= 3.5.3)
@@ -48,7 +48,7 @@ PODS:
     - GoogleUtilities/Environment (~> 6.7)
     - GoogleUtilities/Logger (~> 6.7)
     - nanopb (~> 1.30906.0)
-  - FirebaseCrashlytics (4.6.1):
+  - FirebaseCrashlytics (4.6.2):
     - FirebaseCore (~> 6.10)
     - FirebaseInstallations (~> 1.6)
     - GoogleDataTransport (~> 7.2)
@@ -77,9 +77,9 @@ PODS:
     - GoogleUtilities/Network (~> 6.7)
     - "GoogleUtilities/NSData+zlib (~> 6.7)"
     - nanopb (~> 1.30906.0)
-  - GoogleDataTransport (7.4.0):
+  - GoogleDataTransport (7.5.1):
     - nanopb (~> 1.30906.0)
-  - GoogleSignIn (5.0.1):
+  - GoogleSignIn (5.0.2):
     - AppAuth (~> 1.2)
     - GTMAppAuth (~> 1.0)
     - GTMSessionFetcher/Core (~> 1.1)
@@ -102,21 +102,17 @@ PODS:
     - GoogleUtilities/Logger
   - GoogleUtilities/UserDefaults (6.7.2):
     - GoogleUtilities/Logger
-  - GTMAppAuth (1.0.0):
-    - AppAuth/Core (~> 1.0)
-    - GTMSessionFetcher (~> 1.1)
-  - GTMSessionFetcher (1.2.2):
-    - GTMSessionFetcher/Full (= 1.2.2)
-  - GTMSessionFetcher/Core (1.2.2)
-  - GTMSessionFetcher/Full (1.2.2):
-    - GTMSessionFetcher/Core (= 1.2.2)
+  - GTMAppAuth (1.2.2):
+    - AppAuth/Core (~> 1.4)
+    - GTMSessionFetcher/Core (~> 1.5)
+  - GTMSessionFetcher/Core (1.5.0)
   - nanopb (1.30906.0):
     - nanopb/decode (= 1.30906.0)
     - nanopb/encode (= 1.30906.0)
   - nanopb/decode (1.30906.0)
   - nanopb/encode (1.30906.0)
   - ObjectiveDropboxOfficial (3.9.4)
-  - PromisesObjC (1.2.10)
+  - PromisesObjC (1.2.12)
   - RCTRequired (0.61.5-jitsi.2)
   - RCTTypeSafety (0.61.5-jitsi.2):
     - FBLazyVector (= 0.61.5-jitsi.2)
@@ -519,7 +515,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
+  AppAuth: 31bcec809a638d7bd2f86ea8a52bd45f6e81e7c7
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
@@ -529,20 +525,20 @@ SPEC CHECKSUMS:
   FirebaseAnalytics: 5dd088bd2e67bb9d13dbf792d1164ceaf3052193
   FirebaseCore: d889d9e12535b7f36ac8bfbf1713a0836a3012cd
   FirebaseCoreDiagnostics: 770ac5958e1372ce67959ae4b4f31d8e127c3ac1
-  FirebaseCrashlytics: 5777d3462fb8c3ab9e80a2473bd7d667a2e8411c
+  FirebaseCrashlytics: 1a747c9cc084a24dc6d9511c991db1cd078154eb
   FirebaseDynamicLinks: 6eac37d86910382eafb6315d952cc44c9e176094
   FirebaseInstallations: 466c7b4d1f58fe16707693091da253726a731ed2
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   GoogleAppMeasurement: 966e88df9d19c15715137bb2ddaf52373f111436
-  GoogleDataTransport: b7f406340a291370045a270c599e53c6fa6ec20f
-  GoogleSignIn: 3a51b9bb8e48b635fd7f4272cee06ca260345b86
+  GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
+  GoogleSignIn: 7137d297ddc022a7e0aa4619c86d72c909fa7213
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
-  GTMAppAuth: 4deac854479704f348309e7b66189e604cf5e01e
-  GTMSessionFetcher: 61bb0f61a4cb560030f1222021178008a5727a23
+  GTMAppAuth: ad5c2b70b9a8689e1a04033c9369c4915bfcbe89
+  GTMSessionFetcher: b3503b20a988c4e20cc189aa798fd18220133f52
   nanopb: 59317e09cf1f1a0af72f12af412d54edf52603fc
   ObjectiveDropboxOfficial: a5afefc83f6467c42c45f2253f583f2ad1ffc701
-  PromisesObjC: b14b1c6b68e306650688599de8a45e49fae81151
+  PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
   RCTRequired: a686731276578c125dff205f08b6ec9cee6ede32
   RCTTypeSafety: 88e5500e801c00d16a3d1895e3470d13beed6584
   React: 8b2bcf6a93846e47a7a365a54ec6edeb78b37701

react/features/app/components/App.native.js

@@ -11,7 +11,6 @@ import { getFeatureFlag } from '../../base/flags/functions';
 import { Platform } from '../../base/react';
 import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
-import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
 import logger from '../logger';
 
 import { AbstractApp } from './AbstractApp';
@@ -128,12 +127,10 @@ export class App extends AbstractApp {
      */
     _createMainElement(component, props) {
         return (
-            <JitsiThemePaperProvider>
-                <DimensionsDetector
-                    onDimensionsChanged = { this._onDimensionsChanged }>
-                    { super._createMainElement(component, props) }
-                </DimensionsDetector>
-            </JitsiThemePaperProvider>
+            <DimensionsDetector
+                onDimensionsChanged = { this._onDimensionsChanged }>
+                { super._createMainElement(component, props) }
+            </DimensionsDetector>
         );
     }
 

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

@@ -0,0 +1,49 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import { Button, Text, withTheme } from 'react-native-paper';
+import { useDispatch } from 'react-redux';
+
+
+import { translate } from '../../../base/i18n';
+import { JitsiModal } from '../../../base/modal';
+import { close } from '../../actions';
+
+/**
+ * {@code ParticipantsPane}'s React {@code Component} prop types.
+ */
+type Props = {
+
+    /**
+     * Theme used for styles.
+     */
+    theme: Object
+}
+
+/**
+ * Participant pane.
+ *
+ * @returns {React$Element<any>}
+ */
+function ParticipantsPane({ theme }: Props) {
+    const dispatch = useDispatch();
+    const closePane = useCallback(
+        () => dispatch(close()),
+        [ dispatch ]);
+
+    return (
+        <JitsiModal
+            headerProps = {{
+                onPressBack: closePane()
+            }}>
+            {/* eslint-disable-next-line react/jsx-no-bind */}
+            <Button onPress = { closePane }> X</Button>
+            <Text>
+                OLE
+            </Text>
+        </JitsiModal>
+    );
+}
+
+
+export default translate(withTheme(ParticipantsPane));

react/features/participants-pane/components/native/ParticipantsPanelButton.js → react/features/participants-pane/components/native/ParticipantsPaneButton.js

@@ -2,11 +2,14 @@
 
 import type { Dispatch } from 'redux';
 
+import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { IconParticipants } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 
+import { ParticipantsPane } from './';
+
 type Props = AbstractButtonProps & {
 
     /**
@@ -19,7 +22,7 @@ type Props = AbstractButtonProps & {
 /**
  * Implements an {@link AbstractButton} to open the participants panel.
  */
-class ParticipantsPanelButton extends AbstractButton<Props, *> {
+class ParticipantsPaneButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.participants';
     icon = IconParticipants;
     label = 'toolbar.participants';
@@ -30,6 +33,9 @@ class ParticipantsPanelButton extends AbstractButton<Props, *> {
      * @private
      * @returns {void}
      */
+    _handleClick() {
+        this.props.dispatch(openDialog(ParticipantsPane));
+    }
 }
 
 /**
@@ -45,4 +51,4 @@ function mapStateToProps(state: Object) {
     };
 }
 
-export default translate(connect(mapStateToProps)(ParticipantsPanelButton));
+export default translate(connect(mapStateToProps)(ParticipantsPaneButton));

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

@@ -1,3 +1,4 @@
 // @flow
 
-export { default as ParticipantsPanelButton } from './ParticipantsPanelButton';
+export { default as ParticipantsPane } from './ParticipantsPane';
+export { default as ParticipantsPaneButton } from './ParticipantsPaneButton';

react/index.native.js

@@ -9,6 +9,8 @@ import { AppRegistry } from 'react-native';
 
 import { App } from './features/app/components';
 import { _initLogging } from './features/base/logging/functions';
+import JitsiThemePaperProvider
+    from './features/base/ui/components/JitsiThemeProvider';
 import { IncomingCallApp } from './features/mobile/incoming-call';
 
 declare var __DEV__;
@@ -40,8 +42,10 @@ class Root extends PureComponent<Props> {
      */
     render() {
         return (
-            <App
-                { ...this.props } />
+            <JitsiThemePaperProvider>
+                <App
+                    { ...this.props } />
+            </JitsiThemePaperProvider>
         );
     }
 }