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

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,
+  },
+});

package/src/components/CreatePoll.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, Switch } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { HMSTextInput } from './HMSTextInput';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { setPollConfig, setPollName, setPollStage } from '../redux/actions';
+import { CreatePollStages } from '../redux/actionTypes';
+import type { PollConfig } from '../redux/actionTypes';
+
+export interface CreatePollProps {}
+
+export const CreatePoll: React.FC<CreatePollProps> = ({}) => {
+  const dispatch = useDispatch();
+  const pollName = useSelector((state: RootState) => state.polls.pollName);
+  const pollConfig = useSelector((state: RootState) => state.polls.pollConfig);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    typeSelectionLabel: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    typeLabel: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    typeLabelContainer: {
+      borderColor: theme.palette.border_bright,
+    },
+    typeLabelIconContainer: {
+      borderColor: theme.palette.border_bright,
+      backgroundColor: theme.palette.surface_bright,
+    },
+    pollNameLabel: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const handlePollNameChange = (name: string) => {
+    dispatch(setPollName(name));
+  };
+
+  const handleConfigChange = (
+    configKey: keyof PollConfig,
+    configValue: boolean
+  ) => {
+    dispatch(setPollConfig({ [configKey]: configValue }));
+  };
+
+  const addQuestions = () => {
+    if (pollName.trim().length > 0) {
+      dispatch(setPollStage(CreatePollStages.POLL_QUESTION_CONFIG));
+    }
+  };
+
+  return (
+    <View style={styles.contentContainer}>
+      <Text style={[styles.pollNameLabel, hmsRoomStyles.pollNameLabel]}>
+        Poll Name
+      </Text>
+
+      <HMSTextInput
+        style={styles.textInput}
+        value={pollName}
+        autoFocus={false}
+        onChangeText={handlePollNameChange}
+        placeholder={'My Poll'}
+      />
+
+      <BottomSheet.Divider style={{ marginVertical: 24 }} />
+
+      {[
+        {
+          id: 'voteCountHidden' as const,
+          label: 'Hide vote count',
+          enabled: pollConfig.voteCountHidden,
+        },
+      ].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>
+        );
+      })}
+
+      <HMSPrimaryButton
+        disabled={!pollName.trim()}
+        title="Create Poll"
+        onPress={addQuestions}
+        loading={false}
+        style={{ marginTop: 24 }}
+      />
+    </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({
+  contentContainer: {
+    marginHorizontal: 24,
+  },
+  typeSelectionLabel: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  pollNameLabel: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  textInput: {
+    flex: undefined,
+    marginTop: 8,
+  },
+});

package/src/components/Footer.tsx

@@ -55,6 +55,11 @@ export const _Footer: React.FC<FooterProps> = () => {
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
 
+  const canReadOrWritePoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead || permissions?.pollWrite;
+  });
+
   const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
 
   const canShowHandRaiseInFooter = !isOnStage && isViewer; // on_stage_exp object undefined && viewer -> show in footer
@@ -66,7 +71,8 @@ export const _Footer: React.FC<FooterProps> = () => {
     canShowBRB ||
     canShowHandRaiseInRoomModal ||
     canStartRecording ||
-    canEditUsernameFromRoomModal;
+    canEditUsernameFromRoomModal ||
+    canReadOrWritePoll;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];

package/src/components/GridView.tsx

@@ -21,7 +21,10 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -144,7 +147,7 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     );
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container]}>
         <View onLayout={_handleLayoutChange} style={styles.measureLayoutView} />
 
         {screenshareTilesAvailable ? (
@@ -258,7 +261,11 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
-        style={Platform.OS === 'ios' ? { maxHeight: safeHeight - 16 } : null}
+        style={
+          Platform.OS === 'ios'
+            ? { maxHeight: safeHeight - (isLandscapeOrientation ? 0 : 16) }
+            : null
+        }
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -297,6 +304,7 @@ const ScreenshareTiles = React.forwardRef<
   ScreenshareTilesProps
 >(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
   const { width } = useWindowDimensions();
+  const { left, right } = useSafeAreaInsets();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const [activePage, setActivePage] = useState(0);
   const screensharePeerTrackNodes = useSelector(
@@ -318,20 +326,21 @@ const ScreenshareTiles = React.forwardRef<
     },
     []
   );
+  const tileWidth = width + left + right;
 
   const _renderItem = React.useCallback(
     ({ item }) => {
       return (
         <Tile
           height={'100%'}
-          width={width}
+          width={tileWidth}
           peerTrackNode={item}
           onPeerTileMorePress={onPeerTileMorePress}
           setHmsViewRefs={setHmsViewRefs}
         />
       );
     },
-    [width, onPeerTileMorePress, setHmsViewRefs]
+    [tileWidth, onPeerTileMorePress, setHmsViewRefs]
   );
 
   return (

package/src/components/HLSPlayerEmoticons.tsx

@@ -34,9 +34,8 @@ export const HLSPlayerEmoticons = () => {
           );
         }
       } catch (error) {
-        const message = `HLS Cue Payload is not JSON: ${error}`;
-        console.warn(message);
-        Toast.showWithGravity(message, Toast.LONG, Toast.TOP);
+        const message = `HLSPlayerEmoticons: HLS Cue Payload is not JSON: ${error}`;
+        console.log(message);
       }
     }
   }, []);

package/src/components/HMSBaseButton.tsx

@@ -4,6 +4,7 @@ import {
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -18,7 +19,7 @@ import type {
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
-  onPress(): void;
+  onPress(e: any): void;
   wrapWithGestureDetector?: boolean;
   testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
@@ -27,6 +28,7 @@ export interface HMSBaseButtonProps {
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  useTouchableOpacity?: boolean;
 }
 
 export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
@@ -41,9 +43,12 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
   disabled,
   leftComponent,
   wrapWithGestureDetector,
+  useTouchableOpacity,
 }) => {
+  const Touchable = useTouchableOpacity ? TouchableOpacity : TouchableHighlight;
+
   const button = (
-    <TouchableHighlight
+    <Touchable
       testID={testID}
       underlayColor={underlayColor}
       style={[styles.button, style]}
@@ -70,7 +75,7 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
           <Text style={[styles.text, textStyle]}>{title}</Text>
         </View>
       </>
-    </TouchableHighlight>
+    </Touchable>
   );
 
   if (wrapWithGestureDetector) {

package/src/components/HMSNotification.tsx

@@ -73,7 +73,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
           </View>
         ) : null}
 
-        <View>
+        <View style={{ flexShrink: 1 }}>
           {typeof text === 'string' ? (
             <Text
               testID={textTestID}

package/src/components/HMSNotifications.tsx

@@ -12,6 +12,7 @@ import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
 
 export interface HMSNotificationsProps {}
 
@@ -149,6 +150,12 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
                 autoDismiss={true}
                 dismissable={true}
               />
+            ) : notification.type === NotificationTypes.POLLS_AND_QUIZZES &&
+              'payload' in notification ? (
+              <HMSPollsQuizzesNotification
+                id={notification.id}
+                payload={notification.payload}
+              />
             ) : null}
           </View>
         );