@100mslive/react-native-room-kit 1.0.7 → 1.0.8

package/src/Icons/PauseCircle/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface PauseCircleIconProps extends Omit<ImageProps, 'source'> {}
+
+export const PauseCircleIcon: React.FC<PauseCircleIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/pause-circle.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Pin/index.tsx

@@ -4,16 +4,26 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface PinIconProps extends Omit<ImageProps, 'source'> {}
+interface PinIconProps extends Omit<ImageProps, 'source'> {
+  type: 'pin' | 'unpin';
+}
 
-export const PinIcon: React.FC<PinIconProps> = ({ style, ...restProps }) => {
+export const PinIcon: React.FC<PinIconProps> = ({
+  type = 'pin',
+  style,
+  ...restProps
+}) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));
 
   return (
     <Image
-      source={require('./assets/pin.png')}
+      source={
+        type === 'unpin'
+          ? require('./assets/unpin.png')
+          : require('./assets/pin.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/Recording/index.tsx

@@ -23,8 +23,8 @@ export const RecordingIcon: React.FC<RecordingIconProps> = ({
         type === 'on'
           ? require('./assets/recording.png')
           : type === 'pause'
-          ? require('./assets/recording-pause.png')
-          : require('./assets/recording-off.png')
+            ? require('./assets/recording-pause.png')
+            : require('./assets/recording-off.png')
       }
       style={[styles.icon, iconStyles, style]}
       {...restProps}

package/src/Icons/index.ts

@@ -39,3 +39,5 @@ export * from './Eye';
 export * from './Search';
 export * from './WelcomeHand';
 export * from './CrossCircle';
+export * from './PauseCircle';
+export * from './NoEntry';

package/src/components/BottomSheet.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import Modal from 'react-native-modal';
 import type { ReactNativeModal } from 'react-native-modal';
-import { KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import type {
   StyleProp,
   TextProps,
@@ -52,7 +59,10 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
 
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const Container = resetProps.avoidKeyboard && Platform.OS === 'android' ? KeyboardAvoidingView : View;
+  const Container =
+    resetProps.avoidKeyboard && Platform.OS === 'android'
+      ? KeyboardAvoidingView
+      : View;
 
   return (
     <Modal
@@ -76,7 +86,7 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
       statusBarTranslucent={true}
     >
       <Container
-        behavior='padding'
+        behavior="padding"
         style={[
           isLandscapeOrientation && !fullWidth
             ? styles.landscapeContainer

package/src/components/Chat/ChatFilterBottomSheet.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { BottomSheet } from '../BottomSheet';
+import { useHMSRoomStyleSheet, useModalType } from '../../hooks-util';
+import { ModalTypes } from '../../utils/types';
+import { ChatFilterView } from './ChatFilterView';
+
+const _ChatFilterBottomSheet = () => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      flex: 0.7,
+      backgroundColor: theme.palette.surface_default,
+    },
+  }));
+
+  const dismissModal = React.useCallback(
+    () => handleModalVisibleType(ModalTypes.DEFAULT),
+    [handleModalVisibleType]
+  );
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.CHAT_FILTER}
+      animationOutTiming={400}
+      containerStyle={hmsRoomStyles.contentContainer}
+    >
+      <ChatFilterView onDismiss={dismissModal} />
+    </BottomSheet>
+  );
+};
+
+export const ChatFilterBottomSheet = React.memo(_ChatFilterBottomSheet);

package/src/components/Chat/ChatFilterBottomSheetOpener.tsx

@@ -1,54 +1,168 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
-import { ChevronIcon } from '../../Icons';
+import {
+  ChevronIcon,
+  ParticipantsIcon,
+  PersonIcon,
+  SearchIcon,
+  ThreeDotsIcon,
+} from '../../Icons';
 import type { RootState } from '../../redux';
-import { useHMSRoomStyleSheet } from '../../hooks-util';
-import { setChatFilterSheetVisible } from '../../redux/actions';
+import {
+  useHMSCanDisableChat,
+  useHMSChatRecipientSelector,
+  useHMSRoomStyleSheet,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+  useModalType,
+} from '../../hooks-util';
+import {
+  setChatFilterSheetVisible,
+  setChatMoreActionsSheetVisible,
+} from '../../redux/actions';
+import { PressableIcon } from '../PressableIcon';
+import { ChatBroadcastFilter, ModalTypes } from '../../utils/types';
+import { hexToRgbA } from '../../utils/theme';
 
-interface ChatFilterBottomSheetOpenerProps {}
+interface ChatFilterBottomSheetOpenerProps {
+  insetMode?: boolean;
+}
 
 const _ChatFilterBottomSheetOpener: React.FC<
   ChatFilterBottomSheetOpenerProps
-> = () => {
+> = ({ insetMode = false }) => {
   const dispatch = useDispatch();
-  const filter = useSelector(
-    (state: RootState) => state.chatWindow.sendTo.name as string
+  const canDisableChat = useHMSCanDisableChat();
+  const chatRecipients = useHMSChatRecipientSelector();
+  const allowedToSendMessage = useIsAllowedToSendMessage();
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+  const selectedChatRecipient = useSelector(
+    (state: RootState) => state.chatWindow.sendTo
   );
+  const { handleModalVisibleType } = useModalType();
 
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    label: {
-      color: theme.palette.on_surface_medium,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-    button: {
-      borderColor: theme.palette.border_bright,
-    },
-    buttonText: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-  }));
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      label: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      button: {
+        backgroundColor: insetMode
+          ? theme.palette.background_dim &&
+            hexToRgbA(theme.palette.background_dim, 0.64)
+          : theme.palette.primary_default,
+      },
+      buttonText: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      moreAction: {
+        backgroundColor:
+          theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64),
+      },
+      moreActionIcon: {
+        tintColor: insetMode
+          ? theme.palette.on_surface_low
+          : theme.palette.on_surface_medium,
+      },
+    }),
+    [insetMode]
+  );
 
   const openChatFiltersSheet = () => {
-    dispatch(setChatFilterSheetVisible(true));
+    if (insetMode) {
+      handleModalVisibleType(ModalTypes.CHAT_FILTER);
+    } else {
+      dispatch(setChatFilterSheetVisible(true));
+    }
+  };
+
+  const openChatMoreActionsSheet = () => {
+    if (insetMode) {
+      handleModalVisibleType(ModalTypes.CHAT_MORE_ACTIONS);
+    } else {
+      dispatch(setChatMoreActionsSheetVisible(true));
+    }
   };
 
+  const filterSheetDisabled =
+    !chatRecipients.privateChat && // filter Sheet can't be diabled when privateChat is 'on'
+    (chatRecipients.publicChat
+      ? chatRecipients.roles.length === 0
+      : chatRecipients.roles.length <= 1);
+
+  const showActionButtons =
+    (allowedToSendMessage && !isLocalPeerBlockedFromChat) || canDisableChat;
+
+  if (!showActionButtons) {
+    return null;
+  }
+
+  const tapGesture = Gesture.Tap();
+
   return (
     <View style={styles.container}>
-      <Text style={[styles.label, hmsRoomStyles.label]}>SEND TO</Text>
-
-      <TouchableOpacity
-        onPress={openChatFiltersSheet}
-        style={[styles.button, hmsRoomStyles.button]}
-      >
-        <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-          {filter}
-        </Text>
-
-        <ChevronIcon direction="down" style={styles.buttonIcon} />
-      </TouchableOpacity>
+      {allowedToSendMessage && !isLocalPeerBlockedFromChat ? (
+        <View style={styles.sendToContainer}>
+          <Text style={[styles.label, hmsRoomStyles.label]}>
+            {selectedChatRecipient !== null
+              ? 'To'
+              : `Choose ${
+                  chatRecipients.privateChat
+                    ? 'Participant'
+                    : chatRecipients.roles.length > 0
+                      ? 'Role'
+                      : ''
+                }`}
+          </Text>
+
+          <GestureDetector gesture={tapGesture}>
+            <TouchableOpacity
+              disabled={filterSheetDisabled}
+              onPress={openChatFiltersSheet}
+              style={[
+                styles.button,
+                { paddingRight: filterSheetDisabled ? 8 : undefined },
+                hmsRoomStyles.button,
+              ]}
+            >
+              {selectedChatRecipient ? (
+                selectedChatRecipient === ChatBroadcastFilter ? (
+                  <ParticipantsIcon style={styles.buttonIcon} />
+                ) : (
+                  <PersonIcon style={styles.buttonIcon} />
+                )
+              ) : (
+                <SearchIcon style={styles.buttonIcon} />
+              )}
+
+              <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+                {selectedChatRecipient ? selectedChatRecipient.name : 'Search'}
+              </Text>
+
+              {filterSheetDisabled || !selectedChatRecipient ? null : (
+                <ChevronIcon direction="down" style={styles.buttonIcon} />
+              )}
+            </TouchableOpacity>
+          </GestureDetector>
+        </View>
+      ) : (
+        <View />
+      )}
+
+      {canDisableChat && insetMode ? (
+        <PressableIcon
+          onPress={openChatMoreActionsSheet}
+          style={[styles.moreAction, hmsRoomStyles.moreAction]}
+        >
+          <ThreeDotsIcon stack="vertical" style={styles.moreActionIcon} />
+        </PressableIcon>
+      ) : null}
     </View>
   );
 };
@@ -57,30 +171,44 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     marginBottom: 8,
-    marginLeft: 16,
+  },
+  sendToContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  moreAction: {
+    padding: 4,
+    borderRadius: 4,
+  },
+  moreActionIcon: {
+    width: 16,
+    height: 16,
   },
   label: {
-    fontSize: 10,
+    fontSize: 12,
     lineHeight: 16,
-    letterSpacing: 1.5,
+    letterSpacing: 0.4,
   },
   button: {
     padding: 4,
-    paddingLeft: 8,
     flexDirection: 'row',
     marginLeft: 8,
-    borderWidth: 1,
     borderRadius: 4,
     alignItems: 'center',
   },
   buttonText: {
-    fontSize: 10,
-    textTransform: 'uppercase',
+    fontSize: 12,
+    textTransform: 'capitalize',
     lineHeight: 16,
-    letterSpacing: 1.5,
+    letterSpacing: 0.4,
+    marginHorizontal: 4,
+  },
+  buttonIcon: {
+    width: 16,
+    height: 16,
   },
-  buttonIcon: { width: 16, height: 16, marginLeft: 4 },
 });
 
 export const ChatFilterBottomSheetOpener = React.memo(

package/src/components/Chat/ChatFilterItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { HMSRemotePeer, HMSRole } from '@100mslive/react-native-hms';
 
@@ -13,6 +13,7 @@ interface ChatFilterItemProps {
   disabled?: boolean;
   active?: boolean;
   icon?: React.ReactElement;
+  onDismiss?: () => void;
 }
 
 const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
@@ -20,6 +21,7 @@ const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
   disabled,
   active,
   icon,
+  onDismiss,
 }) => {
   const dispatch = useDispatch();
 
@@ -29,10 +31,12 @@ const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
   }));
 
   const handleFilterSelect = () => {
-    batch(() => {
+    dispatch({ type: 'SET_SENDTO', sendTo: item });
+    if (onDismiss) {
+      onDismiss();
+    } else {
       dispatch(setChatFilterSheetVisible(false));
-      dispatch({ type: 'SET_SENDTO', sendTo: item });
-    });
+    }
   };
 
   return (