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

package/src/components/HMSHLSMessage.tsx

@@ -1,14 +1,51 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, Platform } from 'react-native';
-import { HMSMessage } from '@100mslive/react-native-hms';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { PinIcon, ThreeDotsIcon } from '../Icons';
+import { setSelectedMessageForAction } from '../redux/actions';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
 
 interface HMSHLSMessageProps {
   message: HMSMessage;
 }
 
 const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const canRemoveOthers = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.removeOthers
+  );
+
+  const isPinned = useSelector(
+    (state: RootState) =>
+      state.messages.pinnedMessages.findIndex(
+        (pinnedMessage) => pinnedMessage.id === message.messageId
+      ) >= 0
+  );
+
   const messageSender = message.sender;
 
   const hmsRoomStyles = useHMSRoomStyleSheet(
@@ -23,22 +60,70 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         fontFamily: `${typography.font_family}-Regular`,
         textShadowColor: 'rgba(0, 0, 0, 0.5)',
       },
+      threeDots: {
+        tintColor: '#ffffff',
+      },
+      pinnedLabel: {
+        color: '#ffffff',
+      },
     }),
     []
   );
 
+  const onThreeDotsPress = () => {
+    dispatch(setSelectedMessageForAction(message));
+    handleModalVisibleType(ModalTypes.MESSAGE_OPTIONS);
+  };
+
+  const canTakeAction =
+    allowPinningMessage || // can pin message, OR
+    (allowPeerBlocking &&
+      message.sender &&
+      message.sender.peerID !== localPeerId) || // can block peers, OR
+    (canRemoveOthers &&
+      message.sender &&
+      message.sender.peerID !== localPeerId); // can remove participants
+
   return (
     <View style={styles.container}>
-      <Text
-        style={[styles.senderName, hmsRoomStyles.senderName]}
-        numberOfLines={1}
-      >
-        {messageSender
-          ? messageSender.isLocal
-            ? 'You'
-            : messageSender.name
-          : 'Anonymous'}
-      </Text>
+      {isPinned ? (
+        <View style={styles.pinLabelContainer}>
+          <PinIcon
+            type="pin"
+            style={[styles.pinIcon, hmsRoomStyles.threeDots]}
+          />
+          <Text style={[styles.pinnedLabel, hmsRoomStyles.pinnedLabel]}>
+            PINNED
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nameWrapper}>
+        <Text
+          style={[styles.senderName, hmsRoomStyles.senderName]}
+          numberOfLines={1}
+        >
+          {messageSender
+            ? messageSender.isLocal
+              ? 'You'
+              : messageSender.name
+            : 'Anonymous'}
+        </Text>
+
+        {canTakeAction ? (
+          <GestureDetector gesture={Gesture.Tap()}>
+            <TouchableOpacity
+              hitSlop={styles.threeDotsHitSlop}
+              onPress={onThreeDotsPress}
+            >
+              <ThreeDotsIcon
+                stack="vertical"
+                style={[styles.threeDots, hmsRoomStyles.threeDots]}
+              />
+            </TouchableOpacity>
+          </GestureDetector>
+        ) : null}
+      </View>
 
       <Text style={[styles.message, hmsRoomStyles.message]}>
         {message.message}
@@ -54,7 +139,12 @@ const styles = StyleSheet.create({
     marginTop: 8,
     width: '100%',
   },
+  nameWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   senderName: {
+    flexGrow: 1,
     fontSize: 14,
     lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.1,
@@ -69,4 +159,31 @@ const styles = StyleSheet.create({
     textShadowOffset: { height: 0.5, width: 0.5 },
     textShadowRadius: 2,
   },
+  threeDots: {
+    width: 20,
+    height: 20,
+    marginLeft: 4,
+  },
+  threeDotsHitSlop: {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+  },
+  pinLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  pinIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+  },
+  pinnedLabel: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
 });

package/src/components/HMSHLSMessageList.tsx

@@ -26,7 +26,7 @@ export const HMSHLSMessageList: React.FC = () => {
     return null;
   }
 
-  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.45 : 0.2;
+  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.42 : 0.25;
 
   return (
     <View
@@ -37,7 +37,7 @@ export const HMSHLSMessageList: React.FC = () => {
           height:
             messages.length > 3
               ? windowHeight * HEIGHT_MULTIPLIER
-              : messages.length * 54,
+              : messages.length * 66,
         },
       ]}
     >

package/src/components/HMSHandRaiseNotification.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableHighlight } from 'react-native';
 import type { HMSPeer } from '@100mslive/react-native-hms';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { HandIcon } from '../Icons';
 import {
@@ -61,7 +62,11 @@ export const HMSHandRaiseNotification: React.FC<
       );
     }
     dispatch(removeNotification(id));
-    await hmsInstance.changeRoleOfPeer(peer, onStageRole, false);
+    await hmsInstance.changeRoleOfPeer(
+      peer,
+      onStageRole,
+      onStageExpData?.skip_preview_for_role_change || false
+    );
   };
 
   return (
@@ -72,15 +77,17 @@ export const HMSHandRaiseNotification: React.FC<
       dismissDelay={dismissDelay}
       autoDismiss={autoDismiss}
       cta={
-        <TouchableHighlight
-          underlayColor={secondaryDimColor}
-          style={[styles.button, hmsRoomStyles.button]}
-          onPress={bringPeerToStage}
-        >
-          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-            {onStageExpData?.bring_to_stage_label || 'Bring to Stage'}
-          </Text>
-        </TouchableHighlight>
+        <GestureDetector gesture={Gesture.Tap()}>
+          <TouchableHighlight
+            underlayColor={secondaryDimColor}
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={bringPeerToStage}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              {onStageExpData?.bring_to_stage_label || 'Bring to Stage'}
+            </Text>
+          </TouchableHighlight>
+        </GestureDetector>
       }
     />
   );

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
+  KeyboardState,
   useAnimatedKeyboard,
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useKeyboardState } from '../hooks-util';
+
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
   bottomOffset?: number | SharedValue<number>;
@@ -16,6 +19,7 @@ export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
 > = ({ children, style, bottomOffset = 0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
+  const { keyboardState } = useKeyboardState();
 
   const initialPageY = useDerivedValue(() => {
     return typeof bottomOffset === 'number' ? bottomOffset : bottomOffset.value;
@@ -27,7 +31,8 @@ export const HMSKeyboardAvoidingView: React.FC<
       transform: [
         {
           translateY:
-            keyboardHeight <= initialPageY.value
+            keyboardHeight <= initialPageY.value ||
+            keyboardState.value === KeyboardState.CLOSED
               ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
               : -(keyboardHeight - initialPageY.value),
         },

package/src/components/HMSLiveIndicator.tsx

@@ -1,22 +1,13 @@
 import * as React from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Platform,
-} from 'react-native';
-import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
+import { StyleSheet, View, Text, Platform } from 'react-native';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { COLORS } from '../utils/theme';
-import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
+import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveIndicator = () => {
-  const live = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const live = useIsAnyStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     live: {
@@ -34,7 +25,12 @@ const _HMSLiveIndicator = () => {
 
   return (
     <View style={[styles.live, hmsRoomStyles.live]}>
-      <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
+      <Text
+        testID={TestIds.live_text}
+        style={[styles.liveText, hmsRoomStyles.liveText]}
+      >
+        LIVE
+      </Text>
     </View>
   );
 };

package/src/components/HMSLiveViewerCount.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {
-  StyleSheet,
-  Text,
-  Platform,
-  TouchableOpacity,
-} from 'react-native';
+import { StyleSheet, Text, Platform, TouchableOpacity } from 'react-native';
 import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useHMSRoomStyleSheet,
@@ -17,15 +12,14 @@ import { EyeIcon } from '../Icons';
 import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
+import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveViewerCount = () => {
   const isHLSViewer = useIsHLSViewer();
   const previewPeerCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
-  const live = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const live = useIsAnyStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     viewers: {
@@ -44,6 +38,8 @@ const _HMSLiveViewerCount = () => {
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
 
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
   const showParticipantsSheet = () => {
     show('participants');
   };
@@ -53,17 +49,22 @@ const _HMSLiveViewerCount = () => {
   }
 
   return (
-    <TouchableOpacity
-      style={[styles.viewers, hmsRoomStyles.viewers]}
-      onPress={showParticipantsSheet}
-      disabled={!canShowParticipants}
-    >
-      <EyeIcon testID={TestIds.peer_count_icon} />
+    <GestureDetector gesture={tapGesture}>
+      <TouchableOpacity
+        style={[styles.viewers, hmsRoomStyles.viewers]}
+        onPress={showParticipantsSheet}
+        disabled={!canShowParticipants}
+      >
+        <EyeIcon testID={TestIds.peer_count_icon} />
 
-      <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
-        {previewPeerCount}
-      </Text>
-    </TouchableOpacity>
+        <Text
+          testID={TestIds.peer_count}
+          style={[styles.count, hmsRoomStyles.count]}
+        >
+          {previewPeerCount}
+        </Text>
+      </TouchableOpacity>
+    </GestureDetector>
   );
 };
 

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -37,6 +37,7 @@ export const HMSLocalScreenshareNotification: React.FC<
           loading={false}
           onPress={stopScreenshare}
           title="Stop"
+          wrapWithGestureDetector={true}
         />
       }
     />

package/src/components/HMSNotification.tsx

@@ -2,19 +2,21 @@ import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
-import { CloseIcon } from '../Icons';
+import { ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
 
 export interface HMSNotificationProps {
   id: string;
   text: string | React.ReactElement;
+  description?: string | React.ReactElement;
   textTestID?: TextProps['testID'];
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
-  icon?: React.ReactElement;
+  icon?: string | React.ReactElement;
   onDismiss?: () => void;
   autoDismiss?: boolean;
   dismissDelay?: number;
@@ -25,6 +27,7 @@ export interface HMSNotificationProps {
 export const HMSNotification: React.FC<HMSNotificationProps> = ({
   id,
   text,
+  description = null,
   icon,
   style,
   textStyle,
@@ -45,6 +48,10 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
+    description: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
   }));
 
   const dismissNotification =
@@ -55,27 +62,47 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
         }
       : null);
 
+  const tapGesture = Gesture.Tap();
+
   const notification = (
     <View style={[styles.container, hmsRoomStyles.container, style]}>
       <View style={styles.leftWrapper}>
-        {icon ? <View style={styles.icon}>{icon}</View> : null}
+        {icon ? (
+          <View style={styles.icon}>
+            {typeof icon === 'string' ? getIcon(icon) : icon}
+          </View>
+        ) : null}
 
-        {typeof text === 'string' ? (
-          <Text testID={textTestID} style={[styles.text, hmsRoomStyles.text, textStyle]}>
-            {text}
-          </Text>
-        ) : (
-          text
-        )}
+        <View>
+          {typeof text === 'string' ? (
+            <Text
+              testID={textTestID}
+              style={[styles.text, hmsRoomStyles.text, textStyle]}
+            >
+              {text}
+            </Text>
+          ) : (
+            text
+          )}
+          {typeof description === 'string' ? (
+            <Text style={[styles.description, hmsRoomStyles.description]}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
+        </View>
       </View>
 
       <View style={styles.rightWrapper}>
         {cta}
 
         {dismissNotification ? (
-          <TouchableOpacity onPress={dismissNotification}>
-            <CloseIcon />
-          </TouchableOpacity>
+          <GestureDetector gesture={tapGesture}>
+            <TouchableOpacity onPress={dismissNotification}>
+              <CloseIcon />
+            </TouchableOpacity>
+          </GestureDetector>
         ) : null}
       </View>
     </View>
@@ -127,4 +154,20 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.1,
   },
+  description: {
+    flexShrink: 1,
+    fontSize: 12,
+    lineHeight: 16,
+  },
 });
+
+function getIcon(icon: string) {
+  switch (icon) {
+    case 'chat-off':
+    case 'chat-on':
+      return <ChatIcon type={icon === 'chat-on' ? 'on' : 'off'} />;
+
+    default:
+      return null;
+  }
+}

package/src/components/HMSNotifications.tsx

@@ -131,14 +131,24 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
                 autoDismiss={false}
               />
             ) : notification.type === NotificationTypes.ERROR &&
-              'message' in notification ? (
+              ('message' in notification || 'title' in notification) ? (
               <HMSNotification
                 icon={<AlertTriangleIcon type="line" />}
                 id={notification.id}
-                text={notification.message}
+                text={notification.title}
                 autoDismiss={false}
                 dismissable={true}
               />
+            ) : notification.type === NotificationTypes.INFO &&
+              ('message' in notification || 'title' in notification) ? (
+              <HMSNotification
+                id={notification.id}
+                icon={notification.icon}
+                description={notification.message}
+                text={notification.title}
+                autoDismiss={true}
+                dismissable={true}
+              />
             ) : null}
           </View>
         );

package/src/components/HMSOverlayChatView.tsx

@@ -1,15 +1,29 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { useDerivedValue, interpolate } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import type { RootState } from '../redux';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { HMSSendMessageInput } from './HMSSendMessageInput';
 import { HMSHLSMessageList } from './HMSHLSMessageList';
 import { useFooterHeight } from './Footer';
 import { useHMSNotificationsHeight } from './HMSNotifications';
+import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
+import { ChatMoreActionsModal } from './Chat/ChatMoreActionsModal';
+import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
+import { ChatPaused } from './Chat/ChatPaused';
+import {
+  useHMSChatState,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+} from '../hooks-util';
+import { PinnedMessages } from './Chat';
+import { MessageOptionsBottomSheet } from './Chat/MessageOptionsBottomSheet';
+import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
 
 const colors = [
   'rgba(0, 0, 0, 0)',
@@ -25,6 +39,12 @@ export interface HLSChatViewProps {
 export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
+  const { chatState } = useHMSChatState();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+  const isSelectedChatRecipient = useSelector(
+    (state: RootState) => state.chatWindow.sendTo !== null
+  );
 
   const chatBottomOffset = useDerivedValue(() => {
     if (offset) {
@@ -37,21 +57,58 @@ export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   }, [offset, footerHeight, hmsNotificationsHeight]);
 
   return (
-    <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
-      <MaskedView
-        maskElement={
-          <LinearGradient
-            pointerEvents="box-none"
-            style={StyleSheet.absoluteFill}
-            colors={colors}
-            locations={colorLocations}
-          />
-        }
-      >
-        <HMSHLSMessageList />
-      </MaskedView>
-
-      <HMSSendMessageInput />
-    </HMSKeyboardAvoidingView>
+    <>
+      <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
+        <MaskedView
+          maskElement={
+            <LinearGradient
+              pointerEvents="box-none"
+              style={StyleSheet.absoluteFill}
+              colors={colors}
+              locations={colorLocations}
+            />
+          }
+        >
+          <HMSHLSMessageList />
+        </MaskedView>
+
+        <PinnedMessages insetMode={true} />
+
+        {chatState.enabled ? (
+          <>
+            <View style={styles.filterSheetWrapper}>
+              <ChatFilterBottomSheetOpener insetMode={true} />
+            </View>
+
+            {isLocalPeerBlockedFromChat ? (
+              <PeerBlockedFromChat style={styles.peerBlocked} />
+            ) : isAllowedToSendMessage && isSelectedChatRecipient ? (
+              <HMSSendMessageInput />
+            ) : null}
+          </>
+        ) : (
+          <ChatPaused insetMode={true} style={styles.chatPaused} />
+        )}
+      </HMSKeyboardAvoidingView>
+
+      <MessageOptionsBottomSheet />
+      <ChatFilterBottomSheet />
+      <ChatMoreActionsModal offset={offset} />
+    </>
   );
 };
+
+const styles = StyleSheet.create({
+  filterSheetWrapper: {
+    marginHorizontal: 8,
+    marginTop: 8,
+  },
+  chatPaused: {
+    marginHorizontal: 8,
+    marginBottom: 38,
+  },
+  peerBlocked: {
+    marginHorizontal: 8,
+    marginBottom: 8,
+  },
+});

package/src/components/HMSPreviewEditName.tsx

@@ -13,7 +13,9 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));