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

package/src/redux/reducers/polls.ts

@@ -0,0 +1,328 @@
+import { HMSPollQuestionType } 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() {
+  return {
+    title: '',
+    responseEditable: false,
+    saved: false,
+    skippable: false,
+    type: HMSPollQuestionType.singleChoice,
+    options: ['', ''],
+  };
+}
+
+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: {
+    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,
+        },
+        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.ADD_QUESTION_OPTION:
+      return {
+        ...state,
+        questions: state.questions.map((question, idx) =>
+          idx === action.questionIndex
+            ? {
+                ...question,
+                options: [...(question.options || []), ''],
+              }
+            : 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 ? action.option : option
+                  ),
+              }
+            : 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,7 +12,9 @@ import {
   HMSTrackSource,
   HMSVideoTrack,
   HMSRole,
+  HMSPollType,
 } from '@100mslive/react-native-hms';
+import type { HMSPoll } from '@100mslive/react-native-hms';
 
 import type { PeerTrackNode } from './types';
 
@@ -471,3 +473,15 @@ 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) =>
+      poll.type !== HMSPollType.quiz &&
+      (isHLSViewer ? hlsCuedPollIds.includes(poll.pollId) : true) // Hiding quizzes from UI
+  );
+};

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 = '',
 }