@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
183 lines • 8.29 kB
JavaScript
import React from 'react';
import { InteractionManager, LayoutAnimation, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { HMSPeerType } from '@100mslive/react-native-hms';
import { ModalTypes } from '../utils/types';
import { setInsetViewMinimized, setPeerToUpdate } from '../redux/actions';
import { useHMSRoomStyle, useModalType } from '../hooks-util';
import { CameraIcon, MicIcon, MinimizeIcon, PencilIcon, PersonIcon } from '../Icons';
import { BottomSheet } from './BottomSheet';
import { TestIds } from '../utils/constants';
export const PeerSettingsModalContent = ({
peerTrackNode,
peerTrackNodesListEmpty,
cancelModal
}) => {
var _localPeer$role, _peer$audioTrack, _peer$videoTrack, _peer$role;
const dispatch = useDispatch();
const hmsInstance = useSelector(state => state.user.hmsInstance);
const allRoles = useSelector(state => state.hmsStates.roles);
const localPeer = useSelector(state => state.hmsStates.localPeer);
const settingsForMiniview = useSelector(state => {
const mininode = state.app.miniviewPeerTrackNode;
return mininode && mininode.id === peerTrackNode.id;
});
const editUsernameDisabled = useSelector(state => state.app.editUsernameDisabled);
const removeTextStyle = useHMSRoomStyle(theme => ({
color: theme.palette.alert_error_default
}));
const {
handleModalVisibleType: setModalVisible
} = useModalType();
const removePeer = () => {
hmsInstance === null || hmsInstance === void 0 || hmsInstance.removePeer(peerTrackNode.peer, 'removed from room').then(d => console.log('Remove Peer Success: ', d)).catch(e => console.log('Remove Peer Error: ', e));
cancelModal();
};
const toggleMuteAudio = () => {
cancelModal();
if (peerTrackNode.peer.isLocal) {
return;
}
hmsInstance === null || hmsInstance === void 0 || hmsInstance.changeTrackState(peerTrackNode.peer.audioTrack, !peerTrackNode.peer.audioTrack.isMute());
};
const toggleMuteVideo = () => {
cancelModal();
if (peerTrackNode.peer.isLocal) {
return;
}
hmsInstance === null || hmsInstance === void 0 || hmsInstance.changeTrackState(peerTrackNode.peer.videoTrack, !peerTrackNode.peer.videoTrack.isMute());
};
const switchRole = () => {
setModalVisible(ModalTypes.CHANGE_ROLE, true);
dispatch(setPeerToUpdate(peerTrackNode.peer));
};
const changeName = () => {
setModalVisible(ModalTypes.CHANGE_NAME, true);
};
const handleMinimizeVideoPress = () => {
cancelModal();
InteractionManager.runAfterInteractions(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
dispatch(setInsetViewMinimized(true));
});
};
const {
peer
} = peerTrackNode;
const localPeerPermissions = localPeer === null || localPeer === void 0 || (_localPeer$role = localPeer.role) === null || _localPeer$role === void 0 ? void 0 : _localPeer$role.permissions;
const isPeerAudioMute = peer.isLocal ? null : (_peer$audioTrack = peer.audioTrack) === null || _peer$audioTrack === void 0 ? void 0 : _peer$audioTrack.isMute();
const isPeerVideoMute = peer.isLocal ? null : (_peer$videoTrack = peer.videoTrack) === null || _peer$videoTrack === void 0 ? void 0 : _peer$videoTrack.isMute();
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(BottomSheet.Header, {
dismissModal: cancelModal,
heading: peer.name + (peer.isLocal ? ' (You)' : ''),
headingTestID: TestIds.tile_modal_heading,
subheading: (_peer$role = peer.role) === null || _peer$role === void 0 ? void 0 : _peer$role.name,
subheadingTestID: TestIds.tile_modal_subheading,
closeIconTestID: TestIds.tile_modal_close_btn
}), /*#__PURE__*/React.createElement(BottomSheet.Divider, null), /*#__PURE__*/React.createElement(View, {
style: styles.contentContainer
}, peer.isLocal && !editUsernameDisabled ? /*#__PURE__*/React.createElement(SettingItem, {
testID: TestIds.tile_modal_change_name_btn,
text: 'Change Name',
icon: /*#__PURE__*/React.createElement(PencilIcon, {
style: styles.customIcon
}),
onPress: changeName
}) : null, settingsForMiniview ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Minimize Your Video',
icon: /*#__PURE__*/React.createElement(MinimizeIcon, {
style: styles.customIcon
}),
onPress: handleMinimizeVideoPress,
disabled: peerTrackNodesListEmpty
}) : null, !peer.isLocal && (localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.mute || localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.unmute) ? /*#__PURE__*/React.createElement(React.Fragment, null, isPeerAudioMute && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.unmute ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Request Audio Unmute',
icon: /*#__PURE__*/React.createElement(MicIcon, {
muted: false,
style: styles.customIcon
}),
onPress: toggleMuteAudio
}) : null, !isPeerAudioMute && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.mute && peer.type === HMSPeerType.REGULAR ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Mute Audio',
icon: /*#__PURE__*/React.createElement(MicIcon, {
muted: true,
style: styles.customIcon
}),
onPress: toggleMuteAudio
}) : null) : null, !peer.isLocal && (localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.mute || localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.unmute) ? /*#__PURE__*/React.createElement(React.Fragment, null, isPeerVideoMute && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.unmute ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Request Video Unmute',
icon: /*#__PURE__*/React.createElement(CameraIcon, {
muted: false,
style: styles.customIcon
}),
onPress: toggleMuteVideo
}) : null, !isPeerVideoMute && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.mute && peer.type === HMSPeerType.REGULAR ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Mute Video',
icon: /*#__PURE__*/React.createElement(CameraIcon, {
muted: true,
style: styles.customIcon
}),
onPress: toggleMuteVideo
}) : null) : null, allRoles.length > 1 && !peer.isLocal && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.changeRole ? /*#__PURE__*/React.createElement(SettingItem, {
text: 'Switch Role',
icon: /*#__PURE__*/React.createElement(PersonIcon, {
type: "rectangle",
style: styles.customIcon
}),
onPress: switchRole
}) : null, !peer.isLocal && localPeerPermissions !== null && localPeerPermissions !== void 0 && localPeerPermissions.removeOthers ? /*#__PURE__*/React.createElement(SettingItem, {
text: "Remove Participant",
textStyle: removeTextStyle,
icon: /*#__PURE__*/React.createElement(PersonIcon, {
type: "left",
style: styles.customIcon
}),
onPress: removePeer
}) : null));
};
const SettingItem = ({
testID,
onPress,
text,
icon,
textStyle,
disabled = false
}) => {
const textStyles = useHMSRoomStyle((theme, typography) => ({
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
}));
return /*#__PURE__*/React.createElement(TouchableOpacity, {
testID: testID,
disabled: disabled,
style: [styles.button, disabled ? {
opacity: 0.6
} : null],
onPress: onPress
}, icon, /*#__PURE__*/React.createElement(Text, {
style: [styles.text, textStyles, textStyle]
}, text));
};
const styles = StyleSheet.create({
contentContainer: {
marginBottom: 8
},
customIcon: {
width: 20,
height: 20,
marginRight: 8
},
button: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 16,
paddingHorizontal: 24,
marginBottom: 8
},
text: {
fontSize: 14,
lineHeight: 20,
letterSpacing: 0.1
}
});
//# sourceMappingURL=PeerSettingsModalContent.js.map