feat(native-participants-pane) fixed slider and hid dialog when chat is open
This commit is contained in:
parent
8d4cf7165e
commit
ba9398a1e2
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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%'
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue