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

This commit is contained in:
Calin Chitu 2021-06-08 17:10:49 +03:00 committed by Hristo Terezov
parent 8d4cf7165e
commit ba9398a1e2
5 changed files with 45 additions and 39 deletions

View File

@ -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>
);
};

View File

@ -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 }

View File

@ -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();

View File

@ -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 });
}
}

View File

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