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

package/src/components/QuizLeaderboardSummary.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface QuizLeaderboardSummaryProps {
+  data: { label: string; value: any }[][];
+}
+
+export const QuizLeaderboardSummary: React.FC<QuizLeaderboardSummaryProps> = ({
+  data,
+}) => {
+  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,
+    },
+  }));
+
+  return (
+    <View style={{}}>
+      <Text
+        style={[
+          styles.normalText,
+          styles.marginBottom16,
+          hmsRoomStyles.semiBoldHighText,
+        ]}
+      >
+        Participation Summary
+      </Text>
+
+      <View style={styles.marginBottom16}>
+        {data.map((summaryMap, index) => (
+          <View key={index} style={{ marginBottom: 8, flexDirection: 'row' }}>
+            {summaryMap.map((summary, index) => (
+              <React.Fragment key={summary.label}>
+                {index > 0 ? <View style={{ width: 8 }} /> : null}
+
+                <View
+                  style={[
+                    styles.summaryWrapper,
+                    hmsRoomStyles.summaryContainer,
+                  ]}
+                >
+                  <Text
+                    style={[
+                      styles.tinyText,
+                      styles.marginBottom8,
+                      hmsRoomStyles.semiBoldMediumText,
+                    ]}
+                  >
+                    {summary.label}
+                  </Text>
+
+                  <Text
+                    style={[styles.normalText, hmsRoomStyles.semiBoldHighText]}
+                  >
+                    {summary.value}
+                  </Text>
+                </View>
+              </React.Fragment>
+            ))}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+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 },
+});

package/src/components/RadioInput.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import type { ColorValue } from 'react-native';
 
 export interface RadioInputProps {
   selected: boolean;
   size?: number;
   color?: ColorValue;
+  onChange?: (selected: boolean) => void;
 }
 
 export const RadioInput: React.FC<RadioInputProps> = ({
   selected,
   size = 24,
   color = 'white',
+  onChange,
 }) => {
   const outerCircleStyle = {
     width: size,
@@ -28,11 +30,21 @@ export const RadioInput: React.FC<RadioInputProps> = ({
     backgroundColor: color,
   };
 
-  return (
+  const radio = (
     <View style={[styles.outerCircle, outerCircleStyle]}>
       {selected ? <View style={innerCircleStyle} /> : null}
     </View>
   );
+
+  if (typeof onChange !== 'function') {
+    return radio;
+  }
+
+  return (
+    <TouchableOpacity onPress={() => onChange(!selected)}>
+      {radio}
+    </TouchableOpacity>
+  );
 };
 
 const styles = StyleSheet.create({

package/src/components/RoomSettingsModalContent.tsx

@@ -316,7 +316,7 @@ export const RoomSettingsModalContent: React.FC<
             {
               id: 'polls-and-quizes',
               icon: <PollVoteIcon style={{ width: 20, height: 20 }} />,
-              label: 'Polls',
+              label: 'Polls and Quizzes',
               pressHandler: openPollsQuizzesModal,
               isActive: false,
               hide: !canReadOrWritePoll,

package/src/components/TilesContainer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 import type { ViewStyle } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
 
 import { Tile } from './Tile';
@@ -22,7 +22,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   setHmsViewRefs,
   onPeerTileMorePress,
 }) => {
-  const { left, right } = useSafeAreaInsets();
+  const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const screenshareTilesAvailable = useSelector(
@@ -55,7 +55,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
               ? 'row'
               : 'column',
         },
-        { width: Dimensions.get('window').width + left + right },
+        { width: safeWidth },
       ]}
     >
       {peerTrackNodes.length <= 3 ? (

package/src/components/VoterParticipationSummary.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { QuizLeaderboardSummary } from './QuizLeaderboardSummary';
+import { useFetchLeaderboardResponse } from '../utils/hooks';
+
+export interface VoterParticipationSummaryProps {
+  pollId: HMSPoll['pollId'];
+}
+
+export const VoterParticipationSummary: React.FC<
+  VoterParticipationSummaryProps
+> = ({ pollId }) => {
+  const localPeerUserId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.customerUserID
+  );
+  const leaderboardData = useFetchLeaderboardResponse(pollId);
+  const totalQuestions = useSelector(
+    (state: RootState) => state.polls.polls[pollId]?.questions?.length
+  );
+
+  const localLeaderboardEntry =
+    localPeerUserId && leaderboardData && Array.isArray(leaderboardData.entries)
+      ? leaderboardData.entries.find(
+          (entry) => entry.peer?.customerUserId === localPeerUserId
+        )
+      : null;
+
+  const data = React.useMemo(() => {
+    return [
+      [
+        {
+          label: 'ANSWERED',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.totalResponses === 'number' &&
+            typeof totalQuestions === 'number'
+              ? `${Math.round((localLeaderboardEntry.totalResponses / totalQuestions) * 100)}% (${localLeaderboardEntry.totalResponses}/${totalQuestions})`
+              : '-',
+        },
+        {
+          label: 'CORRECT ANSWERS',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.correctResponses === 'number' &&
+            typeof totalQuestions === 'number'
+              ? `${Math.round((localLeaderboardEntry.correctResponses / totalQuestions) * 100)}% (${localLeaderboardEntry.correctResponses}/${totalQuestions})`
+              : '-',
+        },
+      ],
+      [
+        {
+          label: 'TIME TAKEN',
+          value:
+            localLeaderboardEntry &&
+            typeof localLeaderboardEntry.duration === 'number'
+              ? `${(localLeaderboardEntry.duration / 1000).toFixed(2)}s`
+              : '-',
+        },
+      ],
+    ];
+  }, [localLeaderboardEntry]);
+
+  return <QuizLeaderboardSummary data={data} />;
+};

package/src/hooks-util.ts

@@ -24,8 +24,6 @@ import {
   WindowController,
   useHMSHLSPlayerCue,
   HMSPollUpdateType,
-  HMSPollType,
-  // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import { SoftInputModes } from '@100mslive/react-native-hms';
@@ -2572,7 +2570,7 @@ export const useHLSCuedPolls = () => {
             ? store.getState().polls.polls[pollId]
             : null;
 
-        if (poll && poll.type === HMSPollType.poll) {
+        if (poll) {
           console.log('HLS Cued Poll ID: ', pollId);
           dispatch(addCuedPollId(poll.pollId));
           dispatch(

package/src/redux/actionTypes.ts

@@ -2,6 +2,8 @@ import type {
   HMSPoll,
   HMSPollQuestion,
   HMSPollQuestionType,
+  HMSPollType,
+  PollLeaderboardResponse,
 } from '@100mslive/react-native-hms';
 
 const createRequests = (base: String) => {
@@ -194,9 +196,12 @@ export enum CreatePollStages {
   POLL_CONFIG,
   POLL_QUESTION_CONFIG,
   POLL_VOTING,
+  QUIZ_LEADERBOARD,
+  QUIZ_LEADERBOARD_ENTRIES,
 }
 
 export type PollConfig = {
+  type: HMSPollType;
   voteCountHidden: boolean;
   resultsAnonymous: boolean;
 };
@@ -206,7 +211,8 @@ export type PollQuestionUI = {
   title: string;
   skippable: boolean;
   responseEditable: boolean;
-  options?: string[];
+  pointWeightage: string;
+  options?: [boolean, string][];
   saved: boolean;
 };
 
@@ -214,15 +220,20 @@ export type PollsActionType =
   | SetDeleteConfirmationVisible
   | SetPollNameAction
   | SetPollConfigAction
-  | SetPollStageAction
+  | PushToNavigationStackAction
+  | ResetNavigationStackAction
+  | PopFromNavigationStackAction
+  | ReplaceTopOfNavigationStackAction
   | AddPollQuestionAction
   | DeletePollQuestionAction
   | SetSelectedQuestionIndexAction
   | SetQuestionTypeAction
   | SetQuestionTitleAction
+  | SetQuestionPointWeightageAction
   | AddQuestionOptionAction
   | DeleteQuestionOptionAction
   | EditQuestionOptionAction
+  | SetQuestionCorrectOptionAction
   | SetQuestionSkippable
   | SetQuestionResponseEditable
   | SetQuestionSavedAction
@@ -236,6 +247,7 @@ export type PollsActionType =
   | AddPollQuestionResponseAction
   | RemovePollQuestionResponseAction
   | AddCuedPollIdAction
+  | AddLeaderboardAction
   | { type: HmsStateActionTypes.CLEAR_STATES };
 
 export type ClearPollFormStateAction = {
@@ -257,9 +269,22 @@ export type SetPollConfigAction = {
   pollConfig: Partial<PollConfig>;
 };
 
-export type SetPollStageAction = {
-  type: PollsStateActionTypes.SET_POLL_STAGE;
-  pollStage: CreatePollStages;
+export type PushToNavigationStackAction = {
+  type: PollsStateActionTypes.PUSH_TO_NAVIGATION_STACK;
+  screen: CreatePollStages;
+};
+
+export type ResetNavigationStackAction = {
+  type: PollsStateActionTypes.RESET_NAVIGATION_STACK;
+};
+
+export type PopFromNavigationStackAction = {
+  type: PollsStateActionTypes.POP_FROM_NAVIGATION_STACK;
+};
+
+export type ReplaceTopOfNavigationStackAction = {
+  type: PollsStateActionTypes.REPLACE_TOP_OF_NAVIGATION_STACK;
+  screen: CreatePollStages;
 };
 
 export type AddPollQuestionAction = {
@@ -287,6 +312,12 @@ export type SetQuestionTitleAction = {
   title: string;
 };
 
+export type SetQuestionPointWeightageAction = {
+  type: PollsStateActionTypes.SET_POINT_WEIGHTAGE;
+  questionIndex: number;
+  pointWeightage: string;
+};
+
 export type AddQuestionOptionAction = {
   type: PollsStateActionTypes.ADD_QUESTION_OPTION;
   questionIndex: number;
@@ -305,6 +336,13 @@ export type EditQuestionOptionAction = {
   option: string;
 };
 
+export type SetQuestionCorrectOptionAction = {
+  type: PollsStateActionTypes.SET_QUESTION_CORRECT_OPTION;
+  questionIndex: number;
+  optionIndex: number;
+  correctOption: boolean;
+};
+
 export type SetQuestionSkippable = {
   type: PollsStateActionTypes.SET_QUESTION_SKIPPABLE;
   questionIndex: number;
@@ -373,20 +411,31 @@ export type AddCuedPollIdAction = {
   pollId: HMSPoll['pollId'];
 };
 
+export type AddLeaderboardAction = {
+  type: PollsStateActionTypes.ADD_LEADERBOARD;
+  pollId: HMSPoll['pollId'];
+  leaderboard: PollLeaderboardResponse;
+};
+
 export enum PollsStateActionTypes {
   CLEAR_POLL_FORM_STATE = 'CLEAR_POLL_FORM_STATE',
   SET_DELETE_CONFIRMATION_VISIBLE = 'SET_DELETE_CONFIRMATION_VISIBLE',
   SET_POLL_NAME = 'SET_POLL_NAME',
   SET_POLL_CONFIG = 'SET_POLL_CONFIG',
-  SET_POLL_STAGE = 'SET_POLL_STAGE',
+  PUSH_TO_NAVIGATION_STACK = 'PUSH_TO_NAVIGATION_STACK',
+  RESET_NAVIGATION_STACK = 'RESET_NAVIGATION_STACK',
+  POP_FROM_NAVIGATION_STACK = 'POP_FROM_NAVIGATION_STACK',
+  REPLACE_TOP_OF_NAVIGATION_STACK = 'REPLACE_TOP_OF_NAVIGATION_STACK',
   ADD_POLL_QUESTION = 'ADD_POLL_QUESTION',
   DELETE_POLL_QUESTION = 'DELETE_POLL_QUESTION',
   SET_SELECTED_QUESTION_INDEX = 'SET_SELECTED_QUESTION_INDEX',
   SET_QUESTION_TYPE = 'SET_QUESTION_TYPE',
   SET_QUESTION_TITLE = 'SET_QUESTION_TITLE',
+  SET_POINT_WEIGHTAGE = 'SET_POINT_WEIGHTAGE',
   ADD_QUESTION_OPTION = 'ADD_QUESTION_OPTION',
   DELETE_QUESTION_OPTION = 'DELETE_QUESTION_OPTION',
   EDIT_QUESTION_OPTION = 'EDIT_QUESTION_OPTION',
+  SET_QUESTION_CORRECT_OPTION = 'SET_QUESTION_CORRECT_OPTION',
   SET_QUESTION_SKIPPABLE = 'SET_QUESTION_SKIPPABLE',
   SET_QUESTION_RES_EDITABLE = 'SET_QUESTION_RES_EDITABLE',
   SET_QUESTION_SAVED = 'SET_QUESTION_SAVED',
@@ -399,4 +448,5 @@ export enum PollsStateActionTypes {
   REMOVE_POLL_QUESTION_RESPONSE = 'REMOVE_POLL_QUESTION_RESPONSE',
   ADD_POLL_QUESTION_RESPONSE = 'ADD_POLL_QUESTION_RESPONSE',
   ADD_CUED_POLL_ID = 'ADD_CUED_POLL_ID',
+  ADD_LEADERBOARD = 'ADD_LEADERBOARD',
 }

package/src/redux/actions/index.ts

@@ -32,7 +32,6 @@ import type {
   AddPollQuestionAction,
   SetPollConfigAction,
   SetPollNameAction,
-  SetPollStageAction,
   DeletePollQuestionAction,
   SetDeleteConfirmationVisible,
   SetSelectedQuestionIndexAction,
@@ -52,6 +51,13 @@ import type {
   AddPollQuestionResponseAction,
   SetPollQuestionResponseAction,
   RemovePollQuestionResponseAction,
+  SetQuestionPointWeightageAction,
+  SetQuestionCorrectOptionAction,
+  PushToNavigationStackAction,
+  PopFromNavigationStackAction,
+  ReplaceTopOfNavigationStackAction,
+  AddLeaderboardAction,
+  ResetNavigationStackAction,
 } from '../actionTypes';
 import { MeetingState } from '../../types';
 import type { ChatState, Notification, PinnedMessage } from '../../types';
@@ -489,11 +495,26 @@ export const setPollConfig = (
   pollConfig,
 });
 
-export const setPollStage = (
-  pollStage: SetPollStageAction['pollStage']
-): SetPollStageAction => ({
-  type: PollsStateActionTypes.SET_POLL_STAGE,
-  pollStage,
+export const pushToNavigationStack = (
+  screen: PushToNavigationStackAction['screen']
+): PushToNavigationStackAction => ({
+  type: PollsStateActionTypes.PUSH_TO_NAVIGATION_STACK,
+  screen,
+});
+
+export const resetNavigationStack = (): ResetNavigationStackAction => ({
+  type: PollsStateActionTypes.RESET_NAVIGATION_STACK,
+});
+
+export const popFromNavigationStack = (): PopFromNavigationStackAction => ({
+  type: PollsStateActionTypes.POP_FROM_NAVIGATION_STACK,
+});
+
+export const replaceTopOfNavigationStack = (
+  screen: ReplaceTopOfNavigationStackAction['screen']
+): ReplaceTopOfNavigationStackAction => ({
+  type: PollsStateActionTypes.REPLACE_TOP_OF_NAVIGATION_STACK,
+  screen,
 });
 
 export const addPollQuestion = (): AddPollQuestionAction => ({
@@ -529,6 +550,15 @@ export const setPollQuestionTitle = (
   title,
 });
 
+export const setPollQuestionPointWeightage = (
+  questionIndex: SetQuestionPointWeightageAction['questionIndex'],
+  pointWeightage: SetQuestionPointWeightageAction['pointWeightage']
+): SetQuestionPointWeightageAction => ({
+  type: PollsStateActionTypes.SET_POINT_WEIGHTAGE,
+  questionIndex,
+  pointWeightage,
+});
+
 export const addPollQuestionOption = (
   questionIndex: AddQuestionOptionAction['questionIndex']
 ): AddQuestionOptionAction => ({
@@ -556,6 +586,17 @@ export const editPollQuestionOption = (
   option,
 });
 
+export const setPollQuestionCorrectOption = (
+  questionIndex: SetQuestionCorrectOptionAction['questionIndex'],
+  optionIndex: SetQuestionCorrectOptionAction['optionIndex'],
+  correctOption: SetQuestionCorrectOptionAction['correctOption']
+): SetQuestionCorrectOptionAction => ({
+  type: PollsStateActionTypes.SET_QUESTION_CORRECT_OPTION,
+  questionIndex,
+  optionIndex,
+  correctOption,
+});
+
 export const setPollQuestionSkippable = (
   questionIndex: SetQuestionSkippable['questionIndex'],
   skippable: boolean
@@ -650,3 +691,12 @@ export const addCuedPollId = (pollId: string) => ({
   type: PollsStateActionTypes.ADD_CUED_POLL_ID,
   pollId,
 });
+
+export const addLeaderboard = (
+  pollId: AddLeaderboardAction['pollId'],
+  leaderboard: AddLeaderboardAction['leaderboard']
+): AddLeaderboardAction => ({
+  type: PollsStateActionTypes.ADD_LEADERBOARD,
+  pollId,
+  leaderboard,
+});