@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.
263 lines (262 loc) • 9.65 kB
JavaScript
import * as React from 'react';
import { Text, StyleSheet, ScrollView, findNodeHandle, UIManager, View, Keyboard, TouchableOpacity } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { HMSPollState, HMSPollType } from '@100mslive/react-native-hms';
import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
import { HMSDangerButton } from './HMSDangerButton';
import { PollAndQuizQuestionResponseCards } from './PollAndQuizQuestionResponseCards';
import { popFromNavigationStack, pushToNavigationStack } from '../redux/actions';
import { BottomSheet } from './BottomSheet';
import { ChevronIcon, CloseIcon } from '../Icons';
import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
import { HMSPrimaryButton } from './HMSPrimaryButton';
import { CreatePollStages } from '../redux/actionTypes';
import { VoterParticipationSummary } from './VoterParticipationSummary';
export const PollAndQuizVoting = ({
currentIdx,
dismissModal,
unmountScreenWithAnimation
}) => {
var _selectedPoll$created;
const scrollViewRef = React.useRef(null);
const hmsInstance = useHMSInstance();
const dispatch = useDispatch();
const selectedPoll = useSelector(state => {
const pollsData = state.polls;
if (pollsData.selectedPollId !== null) {
return pollsData.polls[pollsData.selectedPollId] || null;
}
return null;
});
const pollId = selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.pollId;
const localPeerPollInitiator = useSelector(state => {
var _state$hmsStates$loca, _state$polls$polls$po;
if (!pollId) return null;
const localPeerUserId = (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.customerUserID;
const pollInitiatorUserID = (_state$polls$polls$po = state.polls.polls[pollId]) === null || _state$polls$polls$po === void 0 || (_state$polls$polls$po = _state$polls$polls$po.createdBy) === null || _state$polls$polls$po === void 0 ? void 0 : _state$polls$polls$po.customerUserID;
return localPeerUserId && pollInitiatorUserID && localPeerUserId === pollInitiatorUserID;
});
const canCreateOrEndPoll = useSelector(state => {
var _state$hmsStates$loca2;
const permissions = (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.permissions;
return permissions === null || permissions === void 0 ? void 0 : permissions.pollWrite;
});
const headerTitle = useSelector(state => {
const pollsData = state.polls;
if (pollsData.selectedPollId !== null) {
var _pollsData$polls$poll;
return ((_pollsData$polls$poll = pollsData.polls[pollsData.selectedPollId]) === null || _pollsData$polls$poll === void 0 ? void 0 : _pollsData$polls$poll.title) || null;
}
return null;
});
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
regularMediumText: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-Regular`
},
semiBoldHighText: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
semiBoldMediumText: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-SemiBold`
},
headerText: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
container: {
backgroundColor: theme.palette.surface_dim
}
}));
const endPoll = async () => {
if (!selectedPoll || !canCreateOrEndPoll) {
return;
}
const result = await hmsInstance.interactivityCenter.stop(selectedPoll.pollId);
console.log('Poll ended', result);
};
const handleVote = e => {
const handle = findNodeHandle(e.nativeEvent.target);
const scrollHandle = findNodeHandle(scrollViewRef.current);
if (!handle) {
return;
}
if (scrollHandle === null) {
return;
}
UIManager.measureLayout(handle, scrollHandle, () => {
console.log('Failed', e);
}, (_left, top, _width, _height) => {
var _scrollViewRef$curren;
(_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 || _scrollViewRef$curren.scrollTo({
y: top + 400,
animated: true
});
});
};
const viewLeaderboard = () => {
dispatch(pushToNavigationStack(CreatePollStages.QUIZ_LEADERBOARD));
};
const handleBackPress = () => {
Keyboard.dismiss();
if (typeof unmountScreenWithAnimation === 'function') {
unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
} else {
dispatch(popFromNavigationStack());
}
};
const handleClosePress = () => {
Keyboard.dismiss();
dismissModal();
};
return /*#__PURE__*/React.createElement(View, {
style: [styles.fullView, hmsRoomStyles.container]
}, /*#__PURE__*/React.createElement(View, {
style: styles.header
}, /*#__PURE__*/React.createElement(View, {
style: styles.headerControls
}, currentIdx > 0 ? /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: handleBackPress,
hitSlop: styles.closeIconHitSlop,
style: styles.backIcon
}, /*#__PURE__*/React.createElement(ChevronIcon, {
direction: "left"
})) : null, /*#__PURE__*/React.createElement(Text, {
numberOfLines: 2,
style: [styles.headerText, {
flexShrink: 1
}, hmsRoomStyles.headerText]
}, headerTitle), selectedPoll !== null && selectedPoll !== void 0 && selectedPoll.state ? /*#__PURE__*/React.createElement(PollAndQuizzStateLabel, {
state: selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.state
}) : null), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: handleClosePress,
hitSlop: styles.closeIconHitSlop,
style: {
marginLeft: 16
}
}, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(BottomSheet.Divider, {
style: styles.halfDivider
}), /*#__PURE__*/React.createElement(ScrollView, {
ref: scrollViewRef,
style: styles.contentContainer,
contentContainerStyle: {
flexGrow: 1,
paddingVertical: 24
}
}, selectedPoll && selectedPoll.type === HMSPollType.quiz && selectedPoll.state === HMSPollState.stopped && !localPeerPollInitiator ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VoterParticipationSummary, {
pollId: selectedPoll.pollId
}), /*#__PURE__*/React.createElement(Text, {
style: [styles.normalText, hmsRoomStyles.semiBoldHighText]
}, "Questions")) : /*#__PURE__*/React.createElement(Text, {
style: [styles.normalText, hmsRoomStyles.semiBoldMediumText]
}, selectedPoll === null || selectedPoll === void 0 || (_selectedPoll$created = selectedPoll.createdBy) === null || _selectedPoll$created === void 0 ? void 0 : _selectedPoll$created.name, " started a", ' ', (selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.type) === HMSPollType.quiz ? 'quiz' : 'poll'), selectedPoll ? /*#__PURE__*/React.createElement(PollAndQuizQuestionResponseCards, {
poll: selectedPoll,
onVote: handleVote
}) : null), selectedPoll && selectedPoll.state === HMSPollState.started && canCreateOrEndPoll ? /*#__PURE__*/React.createElement(HMSDangerButton, {
disabled: !selectedPoll,
title: (selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.type) === HMSPollType.quiz ? 'End Quiz' : 'End Poll',
loading: false,
onPress: endPoll,
style: {
marginTop: 16,
marginBottom: 16,
marginRight: 24,
alignSelf: 'flex-end'
}
}) : null, selectedPoll && selectedPoll.state === HMSPollState.stopped && selectedPoll.type === HMSPollType.quiz ? /*#__PURE__*/React.createElement(HMSPrimaryButton, {
title: 'View Leaderboard',
loading: false,
onPress: viewLeaderboard,
style: {
marginTop: 16,
marginBottom: 16,
marginRight: 24,
alignSelf: 'flex-end'
}
}) : null);
};
const styles = StyleSheet.create({
smallText: {
fontSize: 14,
lineHeight: 20
},
normalText: {
fontSize: 16,
lineHeight: 24,
marginBottom: 16
},
contentContainer: {
paddingHorizontal: 24
},
typeSelectionLabel: {
fontSize: 12,
lineHeight: 16
},
pollNameLabel: {
fontSize: 14,
lineHeight: 20,
marginBottom: 8
},
textInput: {
flex: undefined
},
addOptionWrapper: {
alignSelf: 'flex-start'
},
addOptionContainer: {
flexDirection: 'row',
alignItems: 'center'
},
addOptionIconWrapper: {
marginRight: 8,
padding: 8
},
// -----------------
// Utilities
fullView: {
flex: 1
},
// Header
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: 24,
marginHorizontal: 24
},
headerControls: {
flexDirection: 'row',
alignItems: 'center',
flexShrink: 1
},
headerText: {
fontSize: 20,
lineHeight: 24,
letterSpacing: 0.15,
marginRight: 12
},
closeIconHitSlop: {
bottom: 16,
left: 16,
right: 16,
top: 16
},
backIcon: {
marginRight: 8
},
// Divider
halfDivider: {
marginHorizontal: 24,
marginVertical: 0,
marginTop: 24,
width: undefined
},
divider: {
marginHorizontal: 24,
marginVertical: 24,
width: undefined
}
});
//# sourceMappingURL=PollAndQuizVoting.js.map