diff --git a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
index 013ce34f2..84fde4fd2 100644
--- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
+++ b/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)
}
- {
- isChatButtonEnabled
- &&
-
-
- { t('toolbar.accessibilityLabel.privateMessage') }
-
-
- }
+
+
+
+ { t('toolbar.accessibilityLabel.privateMessage') }
+
+
{ t('participantsPane.actions.networkStats') }
-
+
);
};
diff --git a/react/features/participants-pane/components/native/ContextMenuMore.js b/react/features/participants-pane/components/native/ContextMenuMore.js
index 8e67b4874..03a9bbc61 100644
--- a/react/features/participants-pane/components/native/ContextMenuMore.js
+++ b/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) => {
{t('participantsPane.actions.stopEveryonesVideo')}
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();
diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js
index acf8cc713..079cd4ab6 100644
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/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 {
-
-
-
+ style = { styles.volumeIcon } />
+
);
@@ -111,6 +109,9 @@ class VolumeSlider extends Component {
* @returns {void}
*/
_onVolumeChange(volumeLevel) {
+ const { onChange } = this.props;
+
+ onChange(volumeLevel / VOLUME_SLIDER_SCALE);
this.setState({ volumeLevel });
}
}
diff --git a/react/features/video-menu/components/native/styles.js b/react/features/video-menu/components/native/styles.js
index 219ca149f..4de866ec6 100644
--- a/react/features/video-menu/components/native/styles.js
+++ b/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%'
}
});