feat(participants-pane) updates

- Fixed react native community slider to work on both android and ios
- Removed InviteButton from native menus
- Fixed buttons spacing in native OverflowMenu
- Participant context menu details are shown only for remote participants

android/sdk/build.gradle

@@ -70,11 +70,12 @@ dependencies {
     implementation project(':react-native-default-preference')
     implementation project(':react-native-immersive')
     implementation project(':react-native-keep-awake')
+    implementation project(':react-native-slider')
     implementation project(':react-native-sound')
+    implementation project(':react-native-splash-screen')
     implementation project(':react-native-svg')
     implementation project(':react-native-webrtc')
     implementation project(':react-native-webview')
-    implementation project(':react-native-splash-screen')
 
     testImplementation 'junit:junit:4.12'
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java

@@ -187,6 +187,7 @@ class ReactInstanceManagerHolder {
                 new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
                 new com.reactnativecommunity.netinfo.NetInfoPackage(),
+                new com.reactnativecommunity.slider.ReactSliderPackage(),
                 new com.reactnativecommunity.webview.RNCWebViewPackage(),
                 new com.rnimmersive.RNImmersivePackage(),
                 new com.zmxv.RNSound.RNSoundPackage(),

android/settings.gradle

@@ -19,6 +19,8 @@ include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':react-native-slider'
+project(':react-native-slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/android')
 include ':react-native-sound'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-splash-screen'

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

@@ -30,18 +30,19 @@ export const MeetingParticipantList = () => {
     const { t } = useTranslation();
 
     // eslint-disable-next-line react/no-multi-comp
-    const renderParticipant = id => (
+    const renderParticipant = p => (
+
         <MeetingParticipantItem
-            key = { id }
+            key = { p.id }
             /* eslint-disable-next-line react/jsx-no-bind */
-            onPress = { () => dispatch(showContextMenuDetails(id)) }
+            onPress = { () => !p.local && dispatch(showContextMenuDetails(p.id)) }
-            participantID = { id } />
+            participantID = { p.id } />
     );
 
-    localParticipant && items.push(renderParticipant(localParticipant?.id));
+    items.push(renderParticipant(localParticipant));
 
     participants.forEach(p => {
-        items.push(renderParticipant(p?.id));
+        items.push(renderParticipant(p));
     });
 
     return (

react/features/toolbox/components/native/OverflowMenu.js

@@ -8,7 +8,6 @@ import { getFeatureFlag, REACTIONS_ENABLED } from '../../../base/flags';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { SharedDocumentButton } from '../../../etherpad';
-import { InviteButton } from '../../../invite';
 import { AudioRouteButton } from '../../../mobile/audio-mode';
 import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
 import { ReactionMenu } from '../../../reactions/components';
@@ -126,8 +125,7 @@ class OverflowMenu extends PureComponent<Props, State> {
                 style: {
                     ..._bottomSheetStyles.buttons.style,
                     borderTopLeftRadius: 16,
-                    borderTopRightRadius: 16,
+                    borderTopRightRadius: 16
-                    paddingTop: 16
                 }
             }
         };
@@ -140,7 +138,6 @@ class OverflowMenu extends PureComponent<Props, State> {
                     : null }>
                 <AudioRouteButton { ...topButtonProps } />
                 <ParticipantsPaneButton { ...buttonProps } />
-                {!toolbarButtons.has('invite') && <InviteButton { ...buttonProps } />}
                 <AudioOnlyButton { ...buttonProps } />
                 {!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
                 <SecurityDialogButton { ...buttonProps } />

react/features/toolbox/components/native/Toolbox.js

@@ -8,7 +8,7 @@ import { getFeatureFlag, REACTIONS_ENABLED } from '../../../base/flags';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import { ChatButton } from '../../../chat';
-import { InviteButton } from '../../../invite';
+import { ParticipantsPaneButton } from '../../../participants-pane/components/native';
 import { ReactionsMenuButton } from '../../../reactions/components';
 import { TileViewButton } from '../../../video-layout';
 import { isToolboxVisible, getMovableButtons } from '../../functions.native';
@@ -101,7 +101,10 @@ function Toolbox(props: Props) {
                         styles = { buttonStylesBorderless }
                         toggledStyles = { backgroundToggledStyle } />)}
                 {additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
-                {additionalButtons.has('invite') && <InviteButton styles = { buttonStylesBorderless } />}
+                {additionalButtons.has('participantspane')
+                && <ParticipantsPaneButton
+                    styles = { buttonStylesBorderless } />
+                }
                 {additionalButtons.has('togglecamera')
                       && <ToggleCameraButton
                           styles = { buttonStylesBorderless }

react/features/toolbox/functions.native.js

@@ -25,7 +25,7 @@ export function getMovableButtons(width: number): Set<string> {
 
     switch (true) {
     case width >= WIDTH.FIT_9_ICONS: {
-        buttons = [ 'togglecamera', 'chat', 'invite', 'raisehand', 'tileview' ];
+        buttons = [ 'togglecamera', 'chat', 'participantspane', 'raisehand', 'tileview' ];
         break;
     }
     case width >= WIDTH.FIT_8_ICONS: {

react/features/video-menu/components/native/VolumeSlider.js

@@ -1,8 +1,9 @@
 // @flow
 
+import Slider from '@react-native-community/slider';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
-import { Slider, View } from 'react-native';
+import { View } from 'react-native';
 import { withTheme } from 'react-native-paper';
 
 import { Icon, IconVolumeEmpty } from '../../../base/icons';