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

package/src/redux/reducers/polls.ts

@@ -0,0 +1,378 @@
+import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+
+import {
+  PollsStateActionTypes,
+  CreatePollStages,
+  HmsStateActionTypes,
+} from '../actionTypes';
+import type {
+  PollConfig,
+  PollQuestionUI,
+  PollsActionType,
+} from '../actionTypes';
+
+function getDefaultQuestionObj(): PollQuestionUI {
+  return {
+    title: '',
+    responseEditable: false,
+    saved: false,
+    skippable: false,
+    pointWeightage: '10',
+    type: HMSPollQuestionType.singleChoice,
+    options: [
+      [false, ''],
+      [false, ''],
+    ],
+  };
+}
+
+type IntialStateType = {
+  pollName: string;
+  pollConfig: PollConfig;
+  stage: CreatePollStages;
+  questions: PollQuestionUI[];
+  deleteConfirmationVisible: boolean;
+  selectedPollQuestionIndex: number | null;
+  launchingPoll: boolean;
+  selectedPollId: string | null;
+  cuedPollIds: HMSPoll['pollId'][]; // In case of HLSViewer, pollIds should be aligned with onCue event
+  polls: Record<string, HMSPoll>;
+  pollsResponses: Record<string, Record<number, number | number[]>>;
+};
+
+const INITIAL_STATE: IntialStateType = {
+  pollName: '',
+  pollConfig: {
+    type: HMSPollType.poll,
+    voteCountHidden: false,
+    resultsAnonymous: false,
+  },
+  stage: CreatePollStages.POLL_CONFIG,
+  questions: [getDefaultQuestionObj()],
+  deleteConfirmationVisible: false,
+  selectedPollQuestionIndex: null,
+  launchingPoll: false,
+  selectedPollId: null,
+  cuedPollIds: [],
+  polls: {},
+  pollsResponses: {},
+};
+
+const hmsStatesReducer = (
+  state = INITIAL_STATE,
+  action: PollsActionType
+): IntialStateType => {
+  switch (action.type) {
+    case PollsStateActionTypes.SET_DELETE_CONFIRMATION_VISIBLE:
+      return {
+        ...state,
+        deleteConfirmationVisible: action.deleteConfirmationVisible,
+      };
+    case PollsStateActionTypes.SET_POLL_NAME:
+      return {
+        ...state,
+        pollName: action.pollName,
+      };
+    case PollsStateActionTypes.SET_POLL_CONFIG:
+      return {
+        ...state,
+        pollConfig: {
+          ...state.pollConfig,
+          ...action.pollConfig,
+        },
+        questions:
+          'type' in action.pollConfig
+            ? state.questions.map((ques) => ({ ...ques, saved: false }))
+            : state.questions,
+        selectedPollQuestionIndex: null,
+      };
+    case PollsStateActionTypes.SET_POLL_STAGE:
+      return {
+        ...state,
+        stage: action.pollStage,
+        selectedPollQuestionIndex: null,
+      };
+    case PollsStateActionTypes.ADD_POLL_QUESTION:
+      return {
+        ...state,
+        questions: [...state.questions, getDefaultQuestionObj()],
+        selectedPollQuestionIndex: null,
+      };
+    case PollsStateActionTypes.DELETE_POLL_QUESTION:
+      let updatedQuestions = state.questions;
+
+      if (state.selectedPollQuestionIndex === null) {
+        return state;
+      }
+
+      if (updatedQuestions.length > state.selectedPollQuestionIndex) {
+        updatedQuestions = updatedQuestions.filter(
+          (_, idx) => idx !== state.selectedPollQuestionIndex
+        );
+      }
+      if (updatedQuestions === state.questions) {
+        return state;
+      }
+      return {
+        ...state,
+        questions: updatedQuestions,
+        selectedPollQuestionIndex: null,
+      };
+    case PollsStateActionTypes.SET_SELECTED_QUESTION_INDEX:
+      return {
+        ...state,
+        selectedPollQuestionIndex: action.index,
+      };
+    case PollsStateActionTypes.SET_QUESTION_TYPE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options:
+                  action.questionType === HMSPollQuestionType.shortAnswer ||
+                  action.questionType === HMSPollQuestionType.longAnswer
+                    ? undefined
+                    : question.options,
+                type: action.questionType,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_QUESTION_TITLE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                title: action.title,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_POINT_WEIGHTAGE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                pointWeightage: action.pointWeightage,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.ADD_QUESTION_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options: [...(question.options || []), [false, '']],
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.DELETE_QUESTION_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options:
+                  question.options &&
+                  question.options.filter((_, idx) => idx !== action.index),
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.EDIT_QUESTION_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options:
+                  question.options &&
+                  question.options.map((option, idx) =>
+                    idx === action.optionIndex
+                      ? [option[0], action.option]
+                      : option
+                  ),
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_QUESTION_CORRECT_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options:
+                  question.options &&
+                  question.options.map((option, idx) => {
+                    if (
+                      action.correctOption === false ||
+                      question.type === HMSPollQuestionType.multipleChoice
+                    ) {
+                      return idx === action.optionIndex
+                        ? [action.correctOption, option[1]]
+                        : option;
+                    }
+                    return [
+                      idx === action.optionIndex ? true : false,
+                      option[1],
+                    ];
+                  }),
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_QUESTION_SKIPPABLE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                skippable: action.skippable,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_QUESTION_RES_EDITABLE:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                responseEditable: action.responseEditable,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_QUESTION_SAVED:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                saved: action.saved,
+              }
+            : question
+        ),
+      };
+    case PollsStateActionTypes.SET_LAUNCHING_POLL:
+      return {
+        ...state,
+        launchingPoll: action.launching,
+        questions: action.launching
+          ? state.questions.map((question) => ({ ...question, saved: true }))
+          : state.questions,
+      };
+    case PollsStateActionTypes.SET_SELECTED_POLL_ID:
+      return {
+        ...state,
+        selectedPollId: action.pollId,
+      };
+    case PollsStateActionTypes.ADD_POLL:
+      return {
+        ...state,
+        polls: {
+          ...state.polls,
+          [action.poll.pollId]: action.poll,
+        },
+      };
+    case PollsStateActionTypes.UPDATE_POLL:
+      return {
+        ...state,
+        polls: {
+          ...state.polls,
+          [action.poll.pollId]: {
+            ...state.polls[action.poll.pollId],
+            ...action.poll,
+          },
+        },
+      };
+    case PollsStateActionTypes.SET_POLL_QUESTION_RESPONSE:
+      return {
+        ...state,
+        pollsResponses: {
+          ...state.pollsResponses,
+          [action.pollId]: {
+            ...state.pollsResponses[action.pollId],
+            [action.questionIndex]: action.response,
+          },
+        },
+      };
+    case PollsStateActionTypes.ADD_POLL_QUESTION_RESPONSE:
+      const prevResponses =
+        state.pollsResponses[action.pollId]?.[action.questionIndex];
+      const newResponses = prevResponses
+        ? Array.isArray(prevResponses)
+          ? [...prevResponses, action.response]
+          : [prevResponses, action.response]
+        : [action.response];
+      return {
+        ...state,
+        pollsResponses: {
+          ...state.pollsResponses,
+          [action.pollId]: {
+            ...state.pollsResponses[action.pollId],
+            [action.questionIndex]: newResponses,
+          },
+        },
+      };
+    case PollsStateActionTypes.REMOVE_POLL_QUESTION_RESPONSE: {
+      const prevResponses =
+        state.pollsResponses[action.pollId]?.[action.questionIndex];
+      const newResponses = prevResponses
+        ? Array.isArray(prevResponses)
+          ? prevResponses.filter((res) => res !== action.response)
+          : prevResponses === action.response
+            ? []
+            : action.response
+        : [];
+      return {
+        ...state,
+        pollsResponses: {
+          ...state.pollsResponses,
+          [action.pollId]: {
+            ...state.pollsResponses[action.pollId],
+            [action.questionIndex]: newResponses,
+          },
+        },
+      };
+    }
+    case PollsStateActionTypes.ADD_CUED_POLL_ID: {
+      return {
+        ...state,
+        cuedPollIds: [...state.cuedPollIds, action.pollId],
+      };
+    }
+    case PollsStateActionTypes.CLEAR_POLL_FORM_STATE: {
+      return {
+        ...INITIAL_STATE,
+        polls: state.polls,
+        selectedPollId: state.selectedPollId,
+      };
+    }
+    case PollsStateActionTypes.CLEAR_POLLS_STATE:
+    case HmsStateActionTypes.CLEAR_STATES:
+      return INITIAL_STATE;
+    default:
+      return state;
+  }
+};
+
+export default hmsStatesReducer;

package/src/types.ts

@@ -71,6 +71,7 @@ export enum NotificationTypes {
   LOCAL_SCREENSHARE = 'local_screenshare',
   ERROR = 'error',
   TERMINAL_ERROR = 'terminal_error',
+  POLLS_AND_QUIZZES = 'polls_and_quizzes',
 }
 
 export type Notification =
@@ -81,6 +82,7 @@ export type Notification =
       icon?: string;
       message?: string;
       title: string;
+      payload?: any;
     }
   | { id: string; type: NotificationTypes; icon?: string; peer: HMSPeer }
   | {

package/src/utils/functions.ts

@@ -12,6 +12,14 @@ import {
   HMSTrackSource,
   HMSVideoTrack,
   HMSRole,
+  HMSPollQuestionType,
+} from '@100mslive/react-native-hms';
+import type {
+  HMSPoll,
+  HMSPollQuestionAnswer,
+  HMSPollQuestionResponse,
+  HMSPollQuestion,
+  HMSPollQuestionOption,
 } from '@100mslive/react-native-hms';
 
 import type { PeerTrackNode } from './types';
@@ -471,3 +479,93 @@ export const isParticipantHostOrBroadcaster = (role: HMSRole): boolean => {
 
   return Boolean(allowed && allowed.length > 0 && canChangeRole);
 };
+
+export const visiblePollsSelector = (
+  polls: HMSPoll[],
+  isHLSViewer: boolean,
+  hlsCuedPollIds: HMSPoll['pollId'][]
+) => {
+  return polls.filter((poll) =>
+    isHLSViewer ? hlsCuedPollIds.includes(poll.pollId) : true
+  );
+};
+
+export function checkIsSelected(
+  pollQuestion: HMSPollQuestion,
+  option: HMSPollQuestionOption,
+  selectedOptions: number | number[] | null
+) {
+  return pollQuestion.myResponses.length > 0
+    ? pollQuestion.type === HMSPollQuestionType.singleChoice
+      ? !!pollQuestion.myResponses.find((r) => r.option === option.index)
+      : !!pollQuestion.myResponses.find((r) =>
+          r.options ? r.options.includes(option.index) : false
+        )
+    : Array.isArray(selectedOptions)
+      ? selectedOptions.includes(option.index)
+      : selectedOptions === option.index;
+}
+
+export function checkIsCorrectAnswer(
+  questionType: HMSPollQuestionType,
+  myResponses: HMSPollQuestionResponse[] | undefined,
+  answer: HMSPollQuestionAnswer | undefined
+) {
+  if (!myResponses || myResponses.length < 0 || !answer) {
+    return false;
+  }
+  const correctAnswer =
+    questionType === HMSPollQuestionType.multipleChoice
+      ? answer.options
+      : answer.option;
+
+  if (correctAnswer === undefined) {
+    return false;
+  }
+  if (Array.isArray(correctAnswer)) {
+    return myResponses.every(
+      (r) =>
+        r.options &&
+        r.options.length === correctAnswer.length &&
+        r.options.every((o) => correctAnswer.includes(o))
+    );
+  }
+  return myResponses.every((r) => r.option === correctAnswer);
+}
+
+export function checkIsCorrectOption(
+  questionType: HMSPollQuestionType,
+  option: HMSPollQuestionOption,
+  answer: HMSPollQuestionAnswer | undefined
+) {
+  if (!answer) {
+    return false;
+  }
+  const correctAnswer =
+    questionType === HMSPollQuestionType.multipleChoice
+      ? answer.options
+      : answer.option;
+
+  if (correctAnswer === undefined) {
+    return false;
+  }
+  if (Array.isArray(correctAnswer)) {
+    return correctAnswer.includes(option.index);
+  }
+  return option.index === correctAnswer;
+}
+
+export function getLabelFromPollQuestionType(
+  type: HMSPollQuestionType
+): string {
+  switch (type) {
+    case HMSPollQuestionType.singleChoice:
+      return 'Single Choice';
+    case HMSPollQuestionType.multipleChoice:
+      return 'Multiple Choice';
+    case HMSPollQuestionType.longAnswer:
+      return 'Long Answer';
+    case HMSPollQuestionType.shortAnswer:
+      return 'Short Answer';
+  }
+}

package/src/utils/types.ts

@@ -58,6 +58,7 @@ export enum ModalTypes {
   CHAT_FILTER = 'chatFilter',
   CHAT_MORE_ACTIONS = 'chatMoreActions',
   MESSAGE_OPTIONS = 'messageOptions',
+  POLLS_AND_QUIZZES = 'pollsAndQuizzes',
   DEFAULT = '',
 }