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

package/src/HMSRoomSetup.tsx

@@ -1,5 +1,6 @@
 import {
   HMSException,
+  HMSPollUpdateType,
   HMSRoom,
   HMSTrack,
   HMSUpdateListenerActions,
@@ -11,7 +12,9 @@ import { batch, useDispatch, useSelector, useStore } from 'react-redux';
 
 import { Preview } from './components';
 import {
+  addCuedPollId,
   addNotification,
+  addPoll,
   changeMeetingState,
   changeStartingHLSStream,
   setHMSLocalPeerState,
@@ -36,6 +39,8 @@ import {
   useLeaveMethods,
   isPublishingAllowed,
   useAndroidSoftInputAdjustResize,
+  useHLSCuedPolls,
+  useIsHLSViewer,
 } from './hooks-util';
 import {
   peerTrackNodeExistForPeerAndTrack,
@@ -78,6 +83,8 @@ export const HMSRoomSetup = () => {
   const [peerTrackNodes, setPeerTrackNodes] = useState<PeerTrackNode[]>([]);
   const [loading, setLoading] = useState(false);
 
+  const isHLSViewer = useIsHLSViewer();
+
   const joinMeeting = useCallback(async () => {
     try {
       setLoading(true);
@@ -393,6 +400,61 @@ export const HMSRoomSetup = () => {
     }
   }, [meetingEnded]);
 
+  useEffect(() => {
+    const subscription = hmsInstance.interactivityCenter.addPollUpdateListener(
+      (poll, pollUpdateType) => {
+        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 &&
+            !pollsData[poll.pollId]
+          ) {
+            // if user is a viewer
+            if (isHLSViewer) {
+              // Show notification only if poll is started 20 or more seconds ago
+              if (
+                poll.startedAt &&
+                Date.now() - poll.startedAt.getTime() >= 20_000
+              ) {
+                dispatch(
+                  addNotification({
+                    id: `${poll.pollId}--${pollUpdateType}`,
+                    type: NotificationTypes.POLLS_AND_QUIZZES,
+                    payload: { poll, pollUpdateType },
+                  })
+                );
+                dispatch(addCuedPollId(poll.pollId));
+              }
+            }
+            // if user is not a viewer, show notification
+            else {
+              dispatch(
+                addNotification({
+                  id: `${poll.pollId}--${pollUpdateType}`,
+                  type: NotificationTypes.POLLS_AND_QUIZZES,
+                  payload: { poll, pollUpdateType },
+                })
+              );
+            }
+          }
+        });
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [isHLSViewer]);
+
+  // Syncs showing Polls with HLS Player onCue event
+  useHLSCuedPolls();
+
   useEffect(() => {
     return () => {
       ignoreHLSStreamPromise.current = true;

package/src/Icons/Add/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface AddIconProps extends Omit<ImageProps, 'source'> {
+  type: 'circle';
+}
+
+export const AddIcon: React.FC<AddIconProps> = ({
+  style,
+  type,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/add-circle.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    resizeMode: 'contain',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

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

@@ -0,0 +1,54 @@
+import React from 'react';
+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,
+  }));
+
+  const checkbox = (
+    <Image
+      source={
+        type === 'unchecked'
+          ? require('./assets/checkbox.png')
+          : require('./assets/checkbox-checked.png')
+      }
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+
+  if (typeof onChange !== 'function') {
+    return checkbox;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => onChange(type === 'unchecked' ? 'checked' : 'unchecked')}
+    >
+      {checkbox}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Poll/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface PollIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PollIcon: React.FC<PollIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/poll.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/PollVote/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface PollVoteIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PollVoteIcon: React.FC<PollVoteIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/poll-vote.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Quiz/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface QuizIconProps extends Omit<ImageProps, 'source'> {}
+
+export const QuizIcon: React.FC<QuizIconProps> = ({ style, ...restProps }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/quiz.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/TrashBin/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface TrashBinIconProps extends Omit<ImageProps, 'source'> {}
+
+export const TrashBinIcon: React.FC<TrashBinIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/trash-bin.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    resizeMode: 'contain',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -41,3 +41,9 @@ export * from './WelcomeHand';
 export * from './CrossCircle';
 export * from './PauseCircle';
 export * from './NoEntry';
+export * from './Poll';
+export * from './Quiz';
+export * from './TrashBin';
+export * from './Add';
+export * from './PollVote';
+export * from './CheckBox';

package/src/components/CheckboxInputRow.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckBoxIcon } from '../Icons';
+
+interface CheckboxInputRowProps {
+  text: string;
+  selected: boolean;
+  onChange(value: boolean): void;
+  disabled?: boolean;
+  textStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const CheckboxInputRow: React.FC<CheckboxInputRowProps> = ({
+  text,
+  containerStyle,
+  selected,
+  disabled,
+  textStyle,
+  onChange,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[styles.container, containerStyle]}
+      onPress={() => onChange(!selected)}
+    >
+      <View style={styles.radioWrapper}>
+        <CheckBoxIcon type={selected ? 'checked' : 'unchecked'} />
+      </View>
+
+      <Text
+        style={[
+          styles.normalText,
+          hmsRoomStyles.surfaceHighRegularText,
+          textStyle,
+        ]}
+      >
+        {text}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  radioWrapper: {
+    padding: 8,
+    marginRight: 8,
+  },
+  normalText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});