@100mslive/react-native-room-kit 1.1.2 → 1.1.3

package/src/components/PollAndQuizVoting.tsx

@@ -6,22 +6,42 @@ import {
   findNodeHandle,
   UIManager,
   View,
+  Keyboard,
+  TouchableOpacity,
 } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { HMSPollState, HMSPollType } from '@100mslive/react-native-hms';
 
 import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import type { RootState } from '../redux';
 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 interface PollAndQuizVotingProps {
+  currentIdx: number;
   dismissModal(): void;
+  unmountScreenWithAnimation?(cb: Function): void;
 }
 
-export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
+export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
+  currentIdx,
+  dismissModal,
+  unmountScreenWithAnimation,
+}) => {
   const scrollViewRef = React.useRef<ScrollView>(null);
   const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+
   const selectedPoll = useSelector((state: RootState) => {
     const pollsData = state.polls;
     if (pollsData.selectedPollId !== null) {
@@ -33,16 +53,34 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
   });
+  const headerTitle = useSelector((state: RootState) => {
+    const pollsData = state.polls;
+    if (pollsData.selectedPollId !== null) {
+      return pollsData.polls[pollsData.selectedPollId]?.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 () => {
@@ -79,17 +117,90 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
     );
   };
 
+  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 (
-    <View style={{ flex: 1 }}>
+    <View style={[styles.fullView, hmsRoomStyles.container]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {currentIdx > 0 ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              hitSlop={styles.closeIconHitSlop}
+              style={styles.backIcon}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
+
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle}
+          </Text>
+
+          {selectedPoll?.state ? (
+            <PollAndQuizzStateLabel state={selectedPoll?.state} />
+          ) : null}
+        </View>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      {/* Content */}
       <ScrollView
         ref={scrollViewRef}
         style={styles.contentContainer}
         contentContainerStyle={{ flexGrow: 1, paddingVertical: 24 }}
       >
-        <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
-          {selectedPoll?.createdBy?.name} started a{' '}
-          {selectedPoll?.type === HMSPollType.quiz ? 'quiz' : 'poll'}
-        </Text>
+        {selectedPoll &&
+        selectedPoll.type === HMSPollType.quiz &&
+        selectedPoll.state === HMSPollState.stopped &&
+        !canCreateOrEndPoll ? (
+          <React.Fragment>
+            <VoterParticipationSummary pollId={selectedPoll.pollId} />
+
+            <Text style={[styles.normalText, hmsRoomStyles.semiBoldHighText]}>
+              Questions
+            </Text>
+          </React.Fragment>
+        ) : (
+          <Text style={[styles.normalText, hmsRoomStyles.semiBoldMediumText]}>
+            {selectedPoll?.createdBy?.name} started a{' '}
+            {selectedPoll?.type === HMSPollType.quiz ? 'quiz' : 'poll'}
+          </Text>
+        )}
 
         {selectedPoll ? (
           <PollAndQuizQuestionResponseCards
@@ -117,6 +228,22 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = () => {
           }}
         />
       ) : null}
+
+      {selectedPoll &&
+      selectedPoll.state === HMSPollState.stopped &&
+      selectedPoll.type === HMSPollType.quiz ? (
+        <HMSPrimaryButton
+          title={'View Leaderboard'}
+          loading={false}
+          onPress={viewLeaderboard}
+          style={{
+            marginTop: 16,
+            marginBottom: 16,
+            marginRight: 24,
+            alignSelf: 'flex-end',
+          }}
+        />
+      ) : null}
     </View>
   );
 };
@@ -158,4 +285,51 @@ const styles = StyleSheet.create({
     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,
+  },
 });

package/src/components/PollQuestions.tsx

@@ -5,14 +5,15 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Keyboard,
 } from 'react-native';
 import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
+import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
-import { AddIcon } from '../Icons';
+import { AddIcon, ChevronIcon, CloseIcon } from '../Icons';
 import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { PollQuestion } from './PollQuestion';
-import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 import type { RootState } from '../redux';
 import {
   addPollQuestion,
@@ -20,6 +21,7 @@ import {
   cleaPollFormState,
   deletePollQuestionOption,
   editPollQuestionOption,
+  popFromNavigationStack,
   setLaunchingPoll,
   setPollQDeleteConfirmationVisible,
   setPollQuestionCorrectOption,
@@ -32,12 +34,20 @@ import {
   setSelectedPollQuestionIndex,
 } from '../redux/actions';
 import type { PollQuestionUI } from '../redux/actionTypes';
+import { PollQDeleteConfirmationSheetView } from './PollQDeleteConfirmationSheetView';
+import { BottomSheet } from './BottomSheet';
 
 export interface PollQuestionsProps {
+  currentIdx: number;
   dismissModal(): void;
+  unmountScreenWithAnimation?: (cb: Function) => void;
 }
 
-export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
+export const PollQuestions: React.FC<PollQuestionsProps> = ({
+  currentIdx,
+  dismissModal,
+  unmountScreenWithAnimation,
+}) => {
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const reduxStore = useStore<RootState>();
@@ -50,6 +60,7 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
   const pollType = useSelector(
     (state: RootState) => state.polls.pollConfig.type
   );
+  const headerTitle = useSelector((state: RootState) => state.polls.pollName);
   const questions = useSelector((state: RootState) => state.polls.questions);
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -57,6 +68,13 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
   }));
 
   const disableLaunchPoll =
@@ -185,60 +203,117 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
     []
   );
 
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+    if (typeof unmountScreenWithAnimation === 'function') {
+      unmountScreenWithAnimation(() => dispatch(popFromNavigationStack()));
+    } else {
+      dispatch(popFromNavigationStack());
+    }
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
   return (
-    <ScrollView
-      style={styles.contentContainer}
-      contentContainerStyle={{ paddingTop: 24 }}
-    >
-      {questions.map((pollQuestion, idx, arr) => {
-        const isFirst = idx === 0;
-        return (
-          <React.Fragment key={idx}>
-            {isFirst ? null : <View style={{ height: 16 }} />}
+    <View style={[styles.fullView, hmsRoomStyles.container]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          {currentIdx > 0 ? (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              disabled={launchingPoll}
+              hitSlop={styles.closeIconHitSlop}
+              style={[styles.backIcon, launchingPoll ? { opacity: 0.4 } : null]}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          ) : null}
 
-            <PollQuestion
-              totalQuestions={arr.length}
-              currentQuestionIndex={idx}
-              pollQuestion={pollQuestion}
-              onAddPollQuestionOption={handleAddPollQuestionOption}
-              onDeletePollQuestionOption={handleDeletePollQuestionOption}
-              onEditPollQuestionOption={handleEditPollQuestionOption}
-              onSetPollQuestionCorrectOption={
-                handleSetPollQuestionCorrectOption
-              }
-              onQuestionFieldChange={onQuestionFieldChange}
-              onDelete={deleteQuestion}
-            />
-          </React.Fragment>
-        );
-      })}
+          <Text
+            numberOfLines={2}
+            style={[
+              styles.headerText,
+              { flexShrink: 1 },
+              hmsRoomStyles.headerText,
+            ]}
+          >
+            {headerTitle}
+          </Text>
+        </View>
 
-      <View style={[styles.addOptionWrapper, { marginTop: 16 }]}>
         <TouchableOpacity
-          onPress={addQuestion}
-          disabled={launchingPoll}
-          style={[
-            styles.addOptionContainer,
-            launchingPoll ? { opacity: 0.4 } : null,
-          ]}
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={{ marginLeft: 16 }}
         >
-          <View style={styles.addOptionIconWrapper}>
-            <AddIcon type="circle" />
-          </View>
-          <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
-            Add another question
-          </Text>
+          <CloseIcon />
         </TouchableOpacity>
       </View>
 
-      <HMSPrimaryButton
-        disabled={disableLaunchPoll || launchingPoll}
-        title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
-        loading={launchingPoll}
-        onPress={launchPoll}
-        style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}
-      />
-    </ScrollView>
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.halfDivider} />
+
+      <ScrollView
+        style={styles.contentContainer}
+        contentContainerStyle={{ paddingTop: 24 }}
+      >
+        {questions.map((pollQuestion, idx, arr) => {
+          const isFirst = idx === 0;
+          return (
+            <React.Fragment key={idx}>
+              {isFirst ? null : <View style={{ height: 16 }} />}
+
+              <PollQuestion
+                totalQuestions={arr.length}
+                currentQuestionIndex={idx}
+                pollQuestion={pollQuestion}
+                onAddPollQuestionOption={handleAddPollQuestionOption}
+                onDeletePollQuestionOption={handleDeletePollQuestionOption}
+                onEditPollQuestionOption={handleEditPollQuestionOption}
+                onSetPollQuestionCorrectOption={
+                  handleSetPollQuestionCorrectOption
+                }
+                onQuestionFieldChange={onQuestionFieldChange}
+                onDelete={deleteQuestion}
+              />
+            </React.Fragment>
+          );
+        })}
+
+        <View style={[styles.addOptionWrapper, { marginTop: 16 }]}>
+          <TouchableOpacity
+            onPress={addQuestion}
+            disabled={launchingPoll}
+            style={[
+              styles.addOptionContainer,
+              launchingPoll ? { opacity: 0.4 } : null,
+            ]}
+          >
+            <View style={styles.addOptionIconWrapper}>
+              <AddIcon type="circle" />
+            </View>
+            <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
+              Add another question
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <HMSPrimaryButton
+          disabled={disableLaunchPoll || launchingPoll}
+          title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
+          loading={launchingPoll}
+          onPress={launchPoll}
+          style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}
+        />
+      </ScrollView>
+
+      {/* Modal */}
+      <PollQDeleteConfirmationSheetView />
+    </View>
   );
 };
 
@@ -274,4 +349,51 @@ const styles = StyleSheet.create({
     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,
+  },
 });

package/src/components/PollsAndQuizBottomSheet.tsx

@@ -1,22 +1,17 @@
 import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import { BottomSheet } from './BottomSheet';
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useModalType,
-} from '../hooks-util';
+import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
 import { useHeaderHeight } from './Header';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { PollsAndQuizzesModalContent } from './PollsAndQuizzesModalContent';
 import { ModalTypes } from '../utils/types';
-import type { RootState } from '../redux';
-import { CreatePollStages } from '../redux/actionTypes';
-import { visiblePollsSelector } from '../utils/functions';
+import { resetNavigationStack } from '../redux/actions';
 
 export const PollsAndQuizBottomSheet = () => {
+  const dispatch = useDispatch();
   const headerHeight = useHeaderHeight();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const {
@@ -24,40 +19,26 @@ export const PollsAndQuizBottomSheet = () => {
     handleModalVisibleType: setModalVisible,
   } = useModalType();
 
-  const isPollQuestionStage = useSelector(
-    (state: RootState) =>
-      state.polls.stage === CreatePollStages.POLL_QUESTION_CONFIG
-  );
-  const isHLSViewer = useIsHLSViewer();
-  const havePolls = useSelector(
-    (state: RootState) =>
-      visiblePollsSelector(
-        Object.values(state.polls.polls),
-        isHLSViewer,
-        state.polls.cuedPollIds
-      ).length > 0
-  );
-
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     contentContainer: {
       backgroundColor: theme.palette.surface_dim,
     },
   }));
 
-  const dismissModal = () => setModalVisible(ModalTypes.DEFAULT);
-
-  const fullHeight = isPollQuestionStage || havePolls;
-  const containerStyles = fullHeight
-    ? [
-        styles.bottomSheet,
-        {
-          marginTop: isLandscapeOrientation
-            ? 0
-            : headerHeight + (Platform.OS === 'android' ? 24 : 0),
-        },
-        hmsRoomStyles.contentContainer,
-      ]
-    : [hmsRoomStyles.contentContainer];
+  const dismissModal = () => {
+    setModalVisible(ModalTypes.DEFAULT);
+    dispatch(resetNavigationStack());
+  };
+
+  const containerStyles = [
+    styles.bottomSheet,
+    {
+      marginTop: isLandscapeOrientation
+        ? 0
+        : headerHeight + (Platform.OS === 'android' ? 24 : 0),
+    },
+    hmsRoomStyles.contentContainer,
+  ];
 
   return (
     <BottomSheet
@@ -66,12 +47,9 @@ export const PollsAndQuizBottomSheet = () => {
       isVisible={modalVisible === ModalTypes.POLLS_AND_QUIZZES}
       avoidKeyboard={true}
       containerStyle={containerStyles}
-      bottomOffsetSpace={fullHeight ? 0 : undefined}
+      bottomOffsetSpace={0}
     >
-      <PollsAndQuizzesModalContent
-        fullHeight={fullHeight}
-        dismissModal={dismissModal}
-      />
+      <PollsAndQuizzesModalContent dismissModal={dismissModal} />
     </BottomSheet>
   );
 };

package/src/components/PollsAndQuizzesCard.tsx

@@ -5,7 +5,7 @@ import type { HMSPoll } from '@100mslive/react-native-hms';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
-import { setPollStage, setSelectedPollId } from '../redux/actions';
+import { pushToNavigationStack, setSelectedPollId } from '../redux/actions';
 import { CreatePollStages } from '../redux/actionTypes';
 import { PollAndQuizzStateLabel } from './PollAndQuizzStateLabel';
 
@@ -36,7 +36,7 @@ export const PollsAndQuizzesCard: React.FC<PollsAndQuizzesCardProps> = ({
 
   const viewPoll = () => {
     batch(() => {
-      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(pushToNavigationStack(CreatePollStages.POLL_VOTING));
       dispatch(setSelectedPollId(poll.pollId));
     });
   };