feat(native-participants-pane) fixed slider and hid dialog when chat is open

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

@@ -1,13 +1,12 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
 import { Text } from 'react-native-paper';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
-import { isToolbarButtonEnabled } from '../../../base/config';
 import { hideDialog, openDialog } from '../../../base/dialog';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import {
@@ -37,11 +36,14 @@ type Props = {
 };
 
 export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) => {
+    const [ volume, setVolume ] = useState(undefined);
+    const store = useStore();
+    const startSilent = store.getState['features/base/config'];
     const dispatch = useDispatch();
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
+    const changeVolume = useCallback(() => setVolume(volume), [ volume ]);
     const displayName = p.name;
     const isLocalModerator = useSelector(isLocalParticipantModerator);
-    const isChatButtonEnabled = useSelector(isToolbarButtonEnabled('chat'));
     const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(p));
     const kickRemoteParticipant = useCallback(() => {
         dispatch(openDialog(KickRemoteParticipantDialog, {
@@ -63,7 +65,9 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
             participantID: p.id
         }));
     }, [ dispatch, p ]);
+    const onVolumeChange = startSilent ? undefined : changeVolume;
     const sendPrivateMessage = useCallback(() => {
+        dispatch(hideDialog());
         dispatch(openChat(p));
     }, [ dispatch, p ]);
     const { t } = useTranslation();
@@ -142,20 +146,17 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     </Text>
                 </TouchableOpacity>
             }
-            {
-                isChatButtonEnabled
-                && <TouchableOpacity
-                    onPress = { sendPrivateMessage }
-                    style = { styles.contextMenuItem }>
-                    <Icon
-                        size = { 24 }
-                        src = { IconMessage }
-                        style = { styles.contextMenuItemIcon } />
-                    <Text style = { styles.contextMenuItemText }>
-                        { t('toolbar.accessibilityLabel.privateMessage') }
-                    </Text>
-                </TouchableOpacity>
-            }
+            <TouchableOpacity
+                onPress = { sendPrivateMessage }
+                style = { styles.contextMenuItem }>
+                <Icon
+                    size = { 24 }
+                    src = { IconMessage }
+                    style = { styles.contextMenuItemIcon } />
+                <Text style = { styles.contextMenuItemText }>
+                    { t('toolbar.accessibilityLabel.privateMessage') }
+                </Text>
+            </TouchableOpacity>
             <TouchableOpacity
                 style = { styles.contextMenuItemSection }>
                 <Icon
@@ -164,7 +165,9 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
                     style = { styles.contextMenuItemIcon } />
                 <Text style = { styles.contextMenuItemText }>{ t('participantsPane.actions.networkStats') }</Text>
             </TouchableOpacity>
-            <VolumeSlider />
+            <VolumeSlider
+                initialValue = { volume }
+                onChange = { onVolumeChange } />
         </BottomSheet>
     );
 };

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

@@ -13,7 +13,10 @@ import {
     IconVideoOff
 } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
-import { muteAllParticipants } from '../../../video-menu/actions.any';
+import {
+    muteAllParticipants,
+    unmuteDisabled
+} from '../../../video-menu/actions.any';
 
 import styles from './styles';
 type Props = {
@@ -32,6 +35,7 @@ type Props = {
 export const ContextMenuMore = ({ exclude }: Props) => {
     const dispatch = useDispatch();
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
+    const unMuteDisabled = useCallback(() => dispatch(unmuteDisabled()), [ dispatch ]);
     const muteEveryoneVideo = useCallback(() => dispatch(muteAllParticipants(exclude, MEDIA_TYPE.VIDEO)), [ dispatch ]);
     const { t } = useTranslation();
 
@@ -48,6 +52,7 @@ export const ContextMenuMore = ({ exclude }: Props) => {
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
             </TouchableOpacity>
             <TouchableOpacity
+                onPress = { unMuteDisabled }
                 style = { styles.contextMenuItem }>
                 <Icon
                     size = { 24 }

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

@@ -25,9 +25,7 @@ import styles from './styles';
 export function ParticipantsPane() {
     const dispatch = useDispatch();
     const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)));
-    const closePane = useCallback(
-        () => dispatch(hideDialog()),
-        [ dispatch ]);
+    const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
     const muteAll = useCallback(() => dispatch(openDialog(MuteEveryoneDialog)),
         [ dispatch ]);
     const { t } = useTranslation();

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

@@ -30,7 +30,7 @@ type Props = {
     /**
      * Theme used for styles.
      */
-    theme: Object
+    theme?: Object
 };
 
 /**
@@ -84,17 +84,15 @@ class VolumeSlider extends Component<Props, State> {
                 <Icon
                     size = { 24 }
                     src = { IconVolumeEmpty }
-                    style = { styles.volumeSliderIcon } />
-                <View style = { styles.sliderContainer }>
-                    <Slider
-                        maximumTrackTintColor = { palette.field02 }
-                        maximumValue = { VOLUME_SLIDER_SCALE }
-                        minimumTrackTintColor = { palette.action01 }
-                        minimumValue = { 0 }
-                        onValueChange = { this._onVolumeChange }
-                        /* eslint-disable-next-line react-native/no-inline-styles */
-                        value = { volumeLevel } />
-                </View>
+                    style = { styles.volumeIcon } />
+                <Slider
+                    maximumTrackTintColor = { palette.field02 }
+                    maximumValue = { VOLUME_SLIDER_SCALE }
+                    minimumTrackTintColor = { palette.action01 }
+                    minimumValue = { 0 }
+                    onValueChange = { this._onVolumeChange }
+                    style = { styles.sliderContainer }
+                    value = { volumeLevel } />
             </View>
 
         );
@@ -111,6 +109,9 @@ class VolumeSlider extends Component<Props, State> {
      * @returns {void}
      */
     _onVolumeChange(volumeLevel) {
+        const { onChange } = this.props;
+
+        onChange(volumeLevel / VOLUME_SLIDER_SCALE);
         this.setState({ volumeLevel });
     }
 }

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

@@ -55,16 +55,15 @@ export default createStyleSheet({
         alignItems: 'center',
         flexDirection: 'row',
         marginBottom: BaseTheme.spacing[3],
-        marginTop: BaseTheme.spacing[3],
-        width: '100%'
+        marginTop: BaseTheme.spacing[3]
     },
 
-    volumeSliderIcon: {
+    volumeIcon: {
         marginLeft: BaseTheme.spacing[1]
     },
 
     sliderContainer: {
         marginLeft: BaseTheme.spacing[3],
-        width: 342
+        minWidth: '88%'
     }
 });