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

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.android.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import Animated, {
-  // useAnimatedKeyboard,
-  // useAnimatedStyle,
-  // useDerivedValue,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated'; // useDerivedValue, // useAnimatedStyle, // useAnimatedKeyboard,
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -1,22 +1,29 @@
 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;
+  bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset=0 }) => {
+> = ({ children, style, bottomOffset = 0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
+  const { keyboardState } = useKeyboardState();
 
-  const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
+  const initialPageY = useDerivedValue(() => {
+    return typeof bottomOffset === 'number' ? bottomOffset : bottomOffset.value;
+  }, [bottomOffset]);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;
@@ -24,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,31 +1,13 @@
 import * as React from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Platform,
-  TouchableOpacity,
-} from 'react-native';
-import { useSelector } from 'react-redux';
+import { StyleSheet, View, Text, Platform } from 'react-native';
 
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useShowChatAndParticipants,
-} from '../hooks-util';
-import { EyeIcon } from '../Icons';
-import { COLORS, hexToRgbA } from '../utils/theme';
-import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 import { TestIds } from '../utils/constants';
+import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveIndicator = () => {
-  const isHLSViewer = useIsHLSViewer();
-  const previewPeerCount = useSelector(
-    (state: RootState) => state.hmsStates.room?.peerCount
-  );
-  const live = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
-  );
+  const live = useIsAnyStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     live: {
@@ -35,51 +17,20 @@ const _HMSLiveIndicator = () => {
       color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
-    viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
-      borderColor: theme.palette.border_bright,
-    },
-    count: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typograhy.font_family}-SemiBold`,
-    },
   }));
 
-  const { canShowParticipants, show } = useShowChatAndParticipants();
-
-  const showParticipantsSheet = () => {
-    show('participants');
-  };
-
   if (!live) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
-      {/* Live */}
-      <View style={[styles.live, hmsRoomStyles.live]}>
-        <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
-      </View>
-
-      {/* Viewer Count */}
-      {typeof previewPeerCount === 'number' ? (
-        <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>
-      ) : null}
+    <View style={[styles.live, hmsRoomStyles.live]}>
+      <Text
+        testID={TestIds.live_text}
+        style={[styles.liveText, hmsRoomStyles.liveText]}
+      >
+        LIVE
+      </Text>
     </View>
   );
 };
@@ -87,13 +38,11 @@ const _HMSLiveIndicator = () => {
 export const HMSLiveIndicator = React.memo(_HMSLiveIndicator);
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-  },
   live: {
     paddingHorizontal: 8,
-    paddingVertical: 4,
+    paddingVertical: 6,
     borderRadius: 4,
+    marginRight: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -104,22 +53,4 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center',
   },
-  viewers: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 4,
-    paddingRight: 8,
-    paddingLeft: 6,
-    marginLeft: 8,
-    borderRadius: 4,
-  },
-  count: {
-    fontSize: 10,
-    lineHeight: Platform.OS === 'android' ? 16 : undefined,
-    letterSpacing: 1.5,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-
-    marginLeft: 4,
-  },
 });

package/src/components/HMSLiveViewerCount.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { StyleSheet, Text, Platform, TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useShowChatAndParticipants,
+} from '../hooks-util';
+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 = useIsAnyStreamingOn();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
+    viewers: {
+      backgroundColor: isHLSViewer
+        ? theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64)
+        : undefined,
+      borderWidth: isHLSViewer ? 0 : 1,
+      borderColor: theme.palette.border_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typograhy.font_family}-SemiBold`,
+    },
+  }));
+
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
+  const showParticipantsSheet = () => {
+    show('participants');
+  };
+
+  if (!live || typeof previewPeerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <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>
+    </GestureDetector>
+  );
+};
+
+export const HMSLiveViewerCount = React.memo(_HMSLiveViewerCount);
+
+const styles = StyleSheet.create({
+  viewers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4,
+    paddingRight: 8,
+    paddingLeft: 6,
+    borderRadius: 4,
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: Platform.OS === 'android' ? 16 : undefined,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+
+    marginLeft: 4,
+  },
+});

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>
         );