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%' } });