@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.
270 lines • 8.96 kB
JavaScript
import * as React from 'react';
import { Text, StyleSheet, ScrollView, View, Keyboard, TouchableOpacity } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { popFromNavigationStack, pushToNavigationStack } from '../redux/actions';
import { BottomSheet } from './BottomSheet';
import { ChevronIcon, CloseIcon } from '../Icons';
import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
import { LeaderboardEntry } from './LeaderboardEntry';
import { CreatePollStages } from '../redux/actionTypes';
import { QuizLeaderboardSummary } from './QuizLeaderboardSummary';
import { useFetchLeaderboardResponse, useLeaderboardSummaryData } from '../utils/hooks';
export const QuizLeaderboardScreen = ({
currentIdx,
dismissModal,
unmountScreenWithAnimation
}) => {
var _selectedPoll$questio;
const dispatch = useDispatch();
const selectedPoll = useSelector(state => {
const pollsData = state.polls;
if (pollsData.selectedPollId !== null) {
return pollsData.polls[pollsData.selectedPollId] || null;
}
return null;
});
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) => ({
regularHighText: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-Regular`
},
regularMediumText: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-Regular`
},
semiBoldMediumText: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-SemiBold`
},
semiBoldHighText: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
headerText: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
container: {
backgroundColor: theme.palette.surface_dim
},
summaryContainer: {
backgroundColor: theme.palette.surface_default
},
entriesCard: {
backgroundColor: theme.palette.surface_default
},
divider: {
backgroundColor: theme.palette.border_bright
}
}));
const handleBackPress = () => {
Keyboard.dismiss();
if (typeof unmountScreenWithAnimation === 'function') {
unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
} else {
dispatch(popFromNavigationStack());
}
};
const handleClosePress = () => {
Keyboard.dismiss();
dismissModal();
};
const viewAllLeaderboardEntries = () => {
dispatch(pushToNavigationStack(CreatePollStages.QUIZ_LEADERBOARD_ENTRIES));
};
const leaderboardData = useFetchLeaderboardResponse(selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.pollId);
const leaderboardEntries = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.entries;
const summaryData = useLeaderboardSummaryData(selectedPoll === null || selectedPoll === void 0 ? void 0 : selectedPoll.pollId);
const totalPoints = (selectedPoll === null || selectedPoll === void 0 || (_selectedPoll$questio = selectedPoll.questions) === null || _selectedPoll$questio === void 0 ? void 0 : _selectedPoll$questio.reduce((acc, curr) => {
acc += curr.weight;
return acc;
}, 0)) ?? 0;
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, {
style: styles.contentContainer,
contentContainerStyle: styles.scrollViewContentContainer
}, summaryData ? /*#__PURE__*/React.createElement(QuizLeaderboardSummary, {
data: summaryData
}) : null, selectedPoll && Array.isArray(selectedPoll.questions) && Array.isArray(leaderboardEntries) && leaderboardEntries.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
style: [styles.normalText, hmsRoomStyles.semiBoldHighText]
}, "Leaderboard"), /*#__PURE__*/React.createElement(Text, {
style: [styles.smallerText, hmsRoomStyles.regularMediumText, styles.marginBottom16]
}, "Based on time taken to cast the correct answer"), /*#__PURE__*/React.createElement(View, {
style: [styles.entriesCard, hmsRoomStyles.entriesCard]
}, leaderboardEntries.map((entry, index) => {
var _selectedPoll$questio2;
return /*#__PURE__*/React.createElement(LeaderboardEntry, {
key: index,
entry: entry,
totalPoints: totalPoints,
totalQuestions: ((_selectedPoll$questio2 = selectedPoll.questions) === null || _selectedPoll$questio2 === void 0 ? void 0 : _selectedPoll$questio2.length) ?? 0,
style: styles.leaderboardEntry
});
}), leaderboardData !== null && leaderboardData !== void 0 && leaderboardData.hasNext && leaderboardEntries.length >= 5 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
style: [styles.divider, hmsRoomStyles.divider]
}), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: viewAllLeaderboardEntries,
style: styles.viewAllBtn
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.smallText, hmsRoomStyles.regularHighText, {
marginRight: 4
}]
}, "View All"), /*#__PURE__*/React.createElement(ChevronIcon, {
direction: "right"
}))) : null)) : null));
};
const styles = StyleSheet.create({
tinyText: {
fontSize: 10,
lineHeight: 16,
letterSpacing: 1.5
},
smallerText: {
fontSize: 12,
lineHeight: 16
},
smallText: {
fontSize: 14,
lineHeight: 20
},
normalText: {
fontSize: 16,
lineHeight: 24
},
marginBottom8: {
marginBottom: 8
},
marginBottom16: {
marginBottom: 16
},
contentContainer: {
paddingHorizontal: 24
},
scrollViewContentContainer: {
flexGrow: 1,
paddingVertical: 24
},
summaryWrapper: {
flexBasis: '50%',
flexGrow: 1,
flexShrink: 1,
padding: 16,
borderRadius: 12
},
position: {
width: 24,
height: 24,
borderRadius: 12,
textAlign: 'center',
textAlignVertical: 'center',
marginRight: 12
},
firstPosition: {
backgroundColor: '#D69516' // '#FFD700'
},
secondPosition: {
backgroundColor: '#3E3E3E' // '#C0C0C0'
},
thirdPosition: {
backgroundColor: '#583B0F' // '#CD7F32'
},
iconWrapper: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 12
},
// 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: {
height: 1,
width: '100%'
},
viewAllBtn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
paddingVertical: 12,
paddingHorizontal: 16
},
leaderboardEntry: {
marginBottom: 16,
marginHorizontal: 16
},
entriesCard: {
paddingTop: 12,
borderRadius: 8
}
});
//# sourceMappingURL=QuizLeaderboardScreen.js.map