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

package/lib/typescript/utils/functions.d.ts

@@ -1,5 +1,5 @@
-import { HMSPeer, HMSTrack, HMSVideoTrack, HMSRole } from '@100mslive/react-native-hms';
-import type { HMSPoll } from '@100mslive/react-native-hms';
+import { HMSPeer, HMSTrack, 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';
 export declare const getMeetingUrl: () => string;
 export declare const getMeetingCode: () => string;
@@ -58,4 +58,8 @@ export declare function groupIntoPairs(totalNumber: number): number[][];
 export declare function groupIntoTriplets<T>(list: T[], fill?: boolean): (T | undefined)[][];
 export declare const isParticipantHostOrBroadcaster: (role: HMSRole) => boolean;
 export declare const visiblePollsSelector: (polls: HMSPoll[], isHLSViewer: boolean, hlsCuedPollIds: HMSPoll['pollId'][]) => HMSPoll[];
+export declare function checkIsSelected(pollQuestion: HMSPollQuestion, option: HMSPollQuestionOption, selectedOptions: number | number[] | null): boolean;
+export declare function checkIsCorrectAnswer(questionType: HMSPollQuestionType, myResponses: HMSPollQuestionResponse[] | undefined, answer: HMSPollQuestionAnswer | undefined): boolean;
+export declare function checkIsCorrectOption(questionType: HMSPollQuestionType, option: HMSPollQuestionOption, answer: HMSPollQuestionAnswer | undefined): boolean;
+export declare function getLabelFromPollQuestionType(type: HMSPollQuestionType): string;
 //# sourceMappingURL=functions.d.ts.map

package/lib/typescript/utils/functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/utils/functions.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,QAAQ,EAGR,aAAa,EACb,OAAO,EAER,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,aAAa,cACmC,CAAC;AAG9D,eAAO,MAAM,cAAc,cAAsB,CAAC;AAElD,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,MAkB3C,CAAC;AAEF,eAAO,MAAM,aAAa,cACb,MAAM,KAChB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAWnB,CAAC;AAEF,eAAO,MAAM,gCAAgC,QAAa,QAAQ,OAAO,CAkCxE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAS,MAAM,OAAO,MAAM,WAE9D,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,MAAM,WAM7C,CAAC;AAEF,eAAO,MAAM,YAAY,mBACP,aAAa,EAAE,UACvB,MAAM,KACb,aAAa,EAQf,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBACZ,aAAa,EAAE,QACzB,OAAO,UACL,QAAQ,KACf,aAAa,EAaf,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBACd,aAAa,EAAE,cACnB,OAAO,KAClB,aAAa,EAOf,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBACf,aAAa,EAAE,QACzB,OAAO,SACN,QAAQ,KACd,aAAa,EAcf,CAAC;AAEF,eAAO,MAAM,eAAe,mBACV,aAAa,EAAE,QACzB,OAAO,KACZ,aAAa,EAUf,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,OAAO,UACL,QAAQ,KACf,aAgBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBACV,aAAa,EAAE,yBACd,aAAa,EAAE,KACrC,aAAa,EAWf,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,OAc1C,CAAC;AAEF,eAAO,MAAM,QAAQ,4BACM,aAAa,EAAE,SACjC,MAAM,0BACW,MAAM,GAAG,IAAI,sBAsCtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qBACV,MAAM,GAAG,SAAS,GAAG,IAAI,cAC/B;IACV,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,qBAAqB,CAAC,EAAE,QAAQ,CAAC;IACjC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC5B;;;;CAuBF,CAAC;AAEF,eAAO,MAAM,yBAAyB,gBACvB,MAAM,OACd,MAAM,UACH,MAAM,yBACS,OAAO;;;CAoC/B,CAAC;AAKF,eAAO,MAAM,kBAAkB,gBAAiB,aAAa,EAAE,EAAE,8BAwBhE,CAAC;AAEF,eAAO,MAAM,OAAO,cAAe,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAQlE,CAAC;AAEF,eAAO,MAAM,2BAA2B,SAAU,IAAI,WAWrD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,cAUjD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,uBAsB7D;AAED,eAAO,MAAM,8BAA8B,SAAU,OAAO,KAAG,OAK9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,UACxB,OAAO,EAAE,eACH,OAAO,kBACJ,OAAO,CAAC,QAAQ,CAAC,EAAE,cAOpC,CAAC"}
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/utils/functions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -79,7 +79,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.9.11",
+    "@100mslive/react-native-hms": "1.9.12",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",

package/src/HMSRoomSetup.tsx

@@ -1,6 +1,5 @@
 import {
   HMSException,
-  HMSPollType,
   HMSPollUpdateType,
   HMSRoom,
   HMSTrack,
@@ -404,15 +403,18 @@ export const HMSRoomSetup = () => {
   useEffect(() => {
     const subscription = hmsInstance.interactivityCenter.addPollUpdateListener(
       (poll, pollUpdateType) => {
-        if (poll.type !== HMSPollType.poll) {
-          return;
-        }
+        const reduxState = reduxStore.getState();
+        const pollsData = reduxState.polls.polls;
+
         batch(() => {
           // Update poll object in store
           dispatch(addPoll(poll));
 
           // when poll is started, show notification to user
-          if (pollUpdateType === HMSPollUpdateType.started) {
+          if (
+            pollUpdateType === HMSPollUpdateType.started &&
+            !pollsData[poll.pollId]
+          ) {
             // if user is a viewer
             if (isHLSViewer) {
               // Show notification only if poll is started 20 or more seconds ago
@@ -432,7 +434,6 @@ export const HMSRoomSetup = () => {
             }
             // if user is not a viewer, show notification
             else {
-              // TODO: Dont show notification if already voted
               dispatch(
                 addNotification({
                   id: `${poll.pollId}--${pollUpdateType}`,

package/src/Icons/Check/index.tsx

@@ -4,9 +4,12 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface CheckIconProps extends Omit<ImageProps, 'source'> {}
+interface CheckIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'normal' | 'in-circle';
+}
 
 export const CheckIcon: React.FC<CheckIconProps> = ({
+  type = 'normal',
   style,
   ...restProps
 }) => {
@@ -16,7 +19,11 @@ export const CheckIcon: React.FC<CheckIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/check.png')}
+      source={
+        type === 'in-circle'
+          ? require('./assets/check-in-circle.png')
+          : require('./assets/check.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/CheckBox/index.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
 interface CheckBoxIconProps extends Omit<ImageProps, 'source'> {
   type?: 'checked' | 'unchecked';
+  onChange?: (type: 'checked' | 'unchecked') => void;
 }
 
 export const CheckBoxIcon: React.FC<CheckBoxIconProps> = ({
   style,
   type = 'unchecked',
+  onChange,
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));
 
-  return (
+  const checkbox = (
     <Image
       source={
         type === 'unchecked'
@@ -28,6 +30,18 @@ export const CheckBoxIcon: React.FC<CheckBoxIconProps> = ({
       {...restProps}
     />
   );
+
+  if (typeof onChange !== 'function') {
+    return checkbox;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => onChange(type === 'unchecked' ? 'checked' : 'unchecked')}
+    >
+      {checkbox}
+    </TouchableOpacity>
+  );
 };
 
 const styles = StyleSheet.create({

package/src/components/CreatePoll.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, Switch } from 'react-native';
+import { View, Text, StyleSheet, Switch, TouchableOpacity } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
+import { HMSPollType } from '@100mslive/react-native-hms';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { BottomSheet } from './BottomSheet';
@@ -11,6 +12,7 @@ import type { RootState } from '../redux';
 import { setPollConfig, setPollName, setPollStage } from '../redux/actions';
 import { CreatePollStages } from '../redux/actionTypes';
 import type { PollConfig } from '../redux/actionTypes';
+import { PollIcon, QuizIcon } from '../Icons';
 
 export interface CreatePollProps {}
 
@@ -31,10 +33,17 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
     typeLabelContainer: {
       borderColor: theme.palette.border_bright,
     },
+    activeTypeLabelContainer: {
+      borderColor: theme.palette.primary_default,
+    },
     typeLabelIconContainer: {
       borderColor: theme.palette.border_bright,
       backgroundColor: theme.palette.surface_bright,
     },
+    activeTypeLabelIconContainer: {
+      borderColor: theme.palette.primary_default,
+      backgroundColor: theme.palette.surface_bright,
+    },
     pollNameLabel: {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
@@ -52,6 +61,10 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
     dispatch(setPollConfig({ [configKey]: configValue }));
   };
 
+  const handlePollTypeChange = (configValue: PollConfig['type']) => {
+    dispatch(setPollConfig({ type: configValue }));
+  };
+
   const addQuestions = () => {
     if (pollName.trim().length > 0) {
       dispatch(setPollStage(CreatePollStages.POLL_QUESTION_CONFIG));
@@ -60,8 +73,69 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
 
   return (
     <View style={styles.contentContainer}>
+      <Text
+        style={[styles.typeSelectionLabel, hmsRoomStyles.typeSelectionLabel]}
+      >
+        Select the type you want to continue with
+      </Text>
+
+      <View style={styles.typeContainer}>
+        {[
+          {
+            id: 'poll',
+            label: 'Poll',
+            icon: <PollIcon />,
+            pressHandler: () => handlePollTypeChange(HMSPollType.poll),
+            active: pollConfig.type === HMSPollType.poll,
+          },
+          {
+            id: 'quiz',
+            label: 'Quiz',
+            icon: <QuizIcon />,
+            pressHandler: () => handlePollTypeChange(HMSPollType.quiz),
+            active: pollConfig.type === HMSPollType.quiz,
+          },
+        ].map((item, idx) => {
+          const isFirst = idx === 0;
+          const isActive = item.active;
+          return (
+            <React.Fragment key={item.id}>
+              {isFirst ? null : <View style={{ width: 16 }} />}
+
+              <View style={{ flexGrow: 1 }}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  disabled={isActive}
+                  onPress={item.pressHandler}
+                  style={[
+                    styles.typeLabelContainer,
+                    isActive
+                      ? hmsRoomStyles.activeTypeLabelContainer
+                      : hmsRoomStyles.typeLabelContainer,
+                  ]}
+                >
+                  <View
+                    style={[
+                      styles.typeLabelIconContainer,
+                      isActive
+                        ? hmsRoomStyles.activeTypeLabelIconContainer
+                        : hmsRoomStyles.typeLabelIconContainer,
+                    ]}
+                  >
+                    {item.icon}
+                  </View>
+                  <Text style={[styles.typeLabel, hmsRoomStyles.typeLabel]}>
+                    {item.label}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </React.Fragment>
+          );
+        })}
+      </View>
+
       <Text style={[styles.pollNameLabel, hmsRoomStyles.pollNameLabel]}>
-        Poll Name
+        {pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'} Name
       </Text>
 
       <HMSTextInput
@@ -69,7 +143,7 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
         value={pollName}
         autoFocus={false}
         onChangeText={handlePollNameChange}
-        placeholder={'My Poll'}
+        placeholder={`My ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
       />
 
       <BottomSheet.Divider style={{ marginVertical: 24 }} />
@@ -79,85 +153,84 @@ export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
           id: 'voteCountHidden' as const,
           label: 'Hide vote count',
           enabled: pollConfig.voteCountHidden,
+          visible: pollConfig.type === HMSPollType.poll,
         },
-      ].map((item) => {
-        return (
-          <View key={item.id} style={{ marginTop: 4, flexDirection: 'row' }}>
-            <Text
-              style={[
-                styles.pollNameLabel,
-                hmsRoomStyles.typeSelectionLabel,
-                { flexGrow: 1 },
-              ]}
-            >
-              {item.label}
-            </Text>
-
-            <Switch
-              value={item.enabled}
-              thumbColor={COLORS.WHITE}
-              trackColor={{
-                true: COLORS.PRIMARY.DEFAULT,
-                false: COLORS.SECONDARY.DISABLED,
-              }}
-              onValueChange={(value) => handleConfigChange(item.id, value)}
-            />
-          </View>
-        );
-      })}
+        // {
+        //   id: 'resultsAnonymous' as const,
+        //   label: 'Make results anonymous',
+        //   enabled: pollConfig.resultsAnonymous,
+        //   visible: true
+        // },
+      ]
+        .filter((item) => item.visible)
+        .map((item) => {
+          return (
+            <View key={item.id} style={styles.switchWrapper}>
+              <Text
+                style={[
+                  styles.pollNameLabel,
+                  hmsRoomStyles.typeSelectionLabel,
+                  { flexGrow: 1 },
+                ]}
+              >
+                {item.label}
+              </Text>
+
+              <Switch
+                value={item.enabled}
+                thumbColor={COLORS.WHITE}
+                trackColor={{
+                  true: COLORS.PRIMARY.DEFAULT,
+                  false: COLORS.SECONDARY.DISABLED,
+                }}
+                onValueChange={(value) => handleConfigChange(item.id, value)}
+              />
+            </View>
+          );
+        })}
 
       <HMSPrimaryButton
         disabled={!pollName.trim()}
-        title="Create Poll"
+        title={`Create ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
         onPress={addQuestions}
         loading={false}
-        style={{ marginTop: 24 }}
+        style={styles.createPollBtn}
       />
     </View>
   );
 };
 
-// {/* <Text style={[styles.typeSelectionLabel, hmsRoomStyles.typeSelectionLabel]}>
-//   Select the type you want to continue with
-// </Text>
-// <View style={{ flexDirection: 'row', marginTop: 8, marginBottom: 24, }}>
-//   {[
-//     {
-//       id: 'poll',
-//       label: 'Poll',
-//       icon: <PollIcon />,
-//       pressHandler: undefined,
-//       active: true,
-//     },
-//     {
-//       id: 'quiz',
-//       label: 'Quiz',
-//       icon: <QuizIcon />,
-//       pressHandler: undefined,
-//       active: false,
-//     },
-//   ].map((item, idx) => {
-//     const isFirst = idx === 0;
-//     const isActive = item.active;
-//     return (
-//       <React.Fragment key={item.id}>
-//         {isFirst ? null : <View style={{ width: 16 }} />}
-
-//         <View style={{ flexGrow: 1 }}>
-//           <TouchableOpacity
-//             onPress={item.pressHandler}
-//             style={[{ flexDirection: 'row', padding: 8, borderRadius: 8, borderWidth: 1, alignItems: 'center', }, hmsRoomStyles.typeLabelContainer]}
-//           >
-//             <View style={[{ padding: 8, borderRadius: 4, borderWidth: 1, marginRight: 16 }, hmsRoomStyles.typeLabelIconContainer]}>{item.icon}</View>
-//             <Text style={[{ fontSize: 16, lineHeight: 24, letterSpacing: 0.15 }, hmsRoomStyles.typeLabel]}>{item.label}</Text>
-//           </TouchableOpacity>
-//         </View>
-//       </React.Fragment>
-//     )
-//   })}
-// </View> */}
-
 const styles = StyleSheet.create({
+  typeContainer: {
+    flexDirection: 'row',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  typeLabelContainer: {
+    flexDirection: 'row',
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: 'center',
+  },
+  typeLabelIconContainer: {
+    padding: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    marginRight: 16,
+  },
+  typeLabel: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  switchWrapper: {
+    marginTop: 4,
+    flexDirection: 'row',
+  },
+  createPollBtn: {
+    marginTop: 24,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },

package/src/components/GridView.tsx

@@ -1,15 +1,10 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import {
-  View,
-  FlatList,
-  StyleSheet,
-  useWindowDimensions,
-  Platform,
-} from 'react-native';
+import { View, FlatList, StyleSheet, Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import type { LayoutChangeEvent, ViewToken } from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 import { DefaultModal } from './DefaultModal';
 import { SaveScreenshot } from './Modals';
@@ -21,10 +16,6 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -303,8 +294,7 @@ const ScreenshareTiles = React.forwardRef<
   FlatList<PeerTrackNode>,
   ScreenshareTilesProps
 >(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
-  const { width } = useWindowDimensions();
-  const { left, right } = useSafeAreaInsets();
+  const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const [activePage, setActivePage] = useState(0);
   const screensharePeerTrackNodes = useSelector(
@@ -326,7 +316,7 @@ const ScreenshareTiles = React.forwardRef<
     },
     []
   );
-  const tileWidth = width + left + right;
+  const tileWidth = safeWidth;
 
   const _renderItem = React.useCallback(
     ({ item }) => {

package/src/components/HMSPollsQuizzesNotification.tsx

@@ -85,7 +85,7 @@ export const HMSPollsQuizzesNotification: React.FC<
             onPress={handleVotePress}
           >
             <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-              Vote
+              {poll.type === HMSPollType.quiz ? 'Answer' : 'Vote'}
             </Text>
           </TouchableHighlight>
         </GestureDetector>