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

package/src/components/HMSOverlayChatView.tsx

@@ -1,13 +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)',
@@ -16,26 +32,83 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export const HLSChatView = () => {
+export interface HLSChatViewProps {
+  offset?: SharedValue<number>;
+}
+
+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) {
+      return (
+        interpolate(offset.value, [0, 1], [0, footerHeight]) +
+        hmsNotificationsHeight
+      );
+    }
+    return footerHeight + hmsNotificationsHeight;
+  }, [offset, footerHeight, hmsNotificationsHeight]);
 
   return (
-    <HMSKeyboardAvoidingView bottomOffset={footerHeight + hmsNotificationsHeight}>
-      <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,11 +13,22 @@ 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 handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
     updateConfig({ username: name });
   };
 
-  return <HMSTextInput testID={TestIds.enter_name} value={userName} onChangeText={handleNameChange} />;
+  return (
+    <HMSTextInput
+      editable={!editUsernameDisabled}
+      testID={TestIds.enter_name}
+      value={userName}
+      onChangeText={handleNameChange}
+      style={editUsernameDisabled ? { opacity: 0.5 } : null}
+    />
+  );
 };

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
 
-import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { COLORS } from '../utils/theme';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export const HMSPreviewHLSLiveIndicator = () => {
-  const isHLSStreaming = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     container: {

package/src/components/HMSPrimaryButton.tsx

@@ -13,6 +13,7 @@ export interface HMSPrimaryButtonProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
 }
 
 export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
@@ -23,6 +24,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
   style,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
   const { primary_dim: primaryDarkColor, on_primary_high: onPrimaryHighColor } =
     useHMSRoomColorPalette();
@@ -62,6 +64,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
         hmsRoomStyles.buttonText,
         disabled ? hmsRoomStyles.disabledText : null,
       ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
     />
   );
 };

package/src/components/HMSRecordingIndicator.tsx

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { ActivityIndicator, StyleSheet } from 'react-native';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { RecordingIcon } from '../Icons';
 import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
-import { HMSRecordingState } from '@100mslive/react-native-hms';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
 
 export const HMSRecordingIndicator = () => {
-  const isRecordingOn = useSelector(
-    (state: RootState) =>
-      !!state.hmsStates.room?.browserRecordingState?.running ||
-      !!state.hmsStates.room?.serverRecordingState?.running ||
-      !!state.hmsStates.room?.hlsRecordingState?.running
-  );
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
       state.app.startingOrStoppingRecording ||
@@ -41,6 +38,12 @@ export const HMSRecordingIndicator = () => {
     );
   }
 
+  if (isRecordingPaused) {
+    return (
+      <RecordingIcon type="pause" style={[styles.icon, styles.rightSpace]} />
+    );
+  }
+
   if (isRecordingOn) {
     return (
       <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />

package/src/components/HMSRoomOptions.tsx

@@ -47,14 +47,16 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
   return (
     <View>
-      <PressableIcon testID={TestIds.room_options_btn} onPress={onSettingsPress}>
+      <PressableIcon
+        testID={TestIds.room_options_btn}
+        onPress={onSettingsPress}
+      >
         <HamburgerIcon />
       </PressableIcon>
 
       <BottomSheet
         isVisible={modalVisible === ModalTypes.SETTINGS}
         dismissModal={dismissModal}
-        animationOutTiming={700}
       >
         <RoomSettingsModalContent
           newAudioMixingMode={newAudioMixingMode}
@@ -73,7 +75,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}
         avoidKeyboard={true}
-        animationOutTiming={700}
       >
         <ChangeNameModalContent dismissModal={dismissModal} />
       </BottomSheet>
@@ -81,7 +82,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       <BottomSheet
         isVisible={modalVisible === ModalTypes.STOP_RECORDING}
         dismissModal={dismissModal}
-        animationOutTiming={800}
       >
         <StopRecordingModalContent dismissModal={dismissModal} />
       </BottomSheet>

package/src/components/HMSTerminalErrorNotification.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { HMSException } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
@@ -34,6 +35,8 @@ export const HMSTerminalErrorNotification: React.FC<
     leave(OnLeaveReason.NETWORK_ISSUES);
   };
 
+  const tapGesture = Gesture.Tap();
+
   return (
     <HMSNotification
       id={id}
@@ -41,16 +44,18 @@ export const HMSTerminalErrorNotification: React.FC<
       text={exception.description || 'Something went wrong!'}
       dismissDelay={dismissDelay}
       autoDismiss={autoDismiss}
-      cta={(
-        <TouchableOpacity
-          style={[styles.button, hmsRoomStyles.button]}
-          onPress={handleLeaveRoomPress}
-        >
-          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-            Leave
-          </Text>
-        </TouchableOpacity>
-      )}
+      cta={
+        <GestureDetector gesture={tapGesture}>
+          <TouchableOpacity
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={handleLeaveRoomPress}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              Leave
+            </Text>
+          </TouchableOpacity>
+        </GestureDetector>
+      }
     />
   );
 };

package/src/components/Header.tsx

@@ -1,6 +1,9 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
 import { useHMSRoomStyle } from '../hooks-util';
@@ -8,6 +11,7 @@ import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSRecordingIndicator } from './HMSRecordingIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import { HMSLiveIndicator } from './HMSLiveIndicator';
+import { HMSLiveViewerCount } from './HMSLiveViewerCount';
 
 interface HeaderProps {
   transparent?: boolean;
@@ -19,6 +23,11 @@ const BOTTOM_PADDING = 16;
 const CONTENT_HEIGHT = 42;
 export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
 
+export const useHeaderHeight = (excludeSafeArea: boolean = false) => {
+  const { top } = useSafeAreaInsets();
+  return (excludeSafeArea ? 0 : top) + HEADER_HEIGHT;
+};
+
 export const _Header: React.FC<HeaderProps> = ({
   transparent = false,
   showControls = true,
@@ -28,14 +37,19 @@ export const _Header: React.FC<HeaderProps> = ({
   }));
 
   return (
-    <SafeAreaView style={transparent ? null : containerStyles} edges={['top']}>
+    <SafeAreaView
+      style={transparent ? null : containerStyles}
+      edges={['top', 'left', 'right']}
+    >
       <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />
 
+          <HMSLiveIndicator />
+
           <HMSRecordingIndicator />
 
-          <HMSLiveIndicator />
+          <HMSLiveViewerCount />
         </View>
 
         {showControls ? (

package/src/components/LeaveRoomBottomSheet.tsx

@@ -3,12 +3,17 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { LeaveIcon } from '../Icons';
-import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
+import {
+  useHMSRoomStyleSheet,
+  useLeaveMethods,
+  useModalType,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { ModalTypes, OnLeaveReason } from '../utils/types';
 import { TestIds } from '../utils/constants';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 // const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
 // const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
@@ -24,10 +29,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     text: {
@@ -105,10 +107,9 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
   return (
     <BottomSheet
       isVisible={modalVisibleType === ModalTypes.LEAVE_ROOM}
-      containerStyle={styles.container}
+      bottomOffsetSpace={0}
       dismissModal={onPopupDismiss}
       onModalHide={handlePopupHide}
-      animationOutTiming={700}
     >
       <View>
         <TouchableOpacity
@@ -119,17 +120,18 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
           <LeaveIcon style={styles.icon} />
 
           <View style={styles.textContainer}>
-            <Text style={[styles.text, hmsRoomStyles.text]}>
-              Leave
-            </Text>
-            <Text testID={TestIds.leave_description} style={[styles.subtext, hmsRoomStyles.subtext]}>
+            <Text style={[styles.text, hmsRoomStyles.text]}>Leave</Text>
+            <Text
+              testID={TestIds.leave_description}
+              style={[styles.subtext, hmsRoomStyles.subtext]}
+            >
               Others will continue after you leave. You can join the session
               again.
             </Text>
           </View>
         </TouchableOpacity>
 
-        {canStream && isStreaming ? (
+        {canStream && isHLSStreaming ? (
           <TouchableOpacity
             testID={TestIds.end_stream_cta}
             style={[styles.button, hmsRoomStyles.endButton]}
@@ -176,9 +178,6 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    paddingBottom: 0,
-  },
   button: {
     flexDirection: 'row',
     padding: 24,

package/src/components/Meeting.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { PeerTrackNode } from '../utils/types';
 import { useRTCStatsListeners } from '../utils/hooks';
@@ -16,8 +15,8 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
-  useIsHLSViewer,
   usePIPListener,
+  useSetDefaultChatRecipient,
 } from '../hooks-util';
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
@@ -32,12 +31,13 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
-  const isHLSViewer = useIsHLSViewer();
-
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
 
+  // Handle selected (default) Chat Recipient as per dashboard config
+  useSetDefaultChatRecipient();
+
   useHMSMessages();
 
   useHMSReconnection();
@@ -76,23 +76,10 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     return <HMSHLSStreamLoading />;
   }
 
-  const Container = isHLSViewer ? View : SafeAreaView;
-
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Container
-      style={[styles.container, containerStyles]}
-      edges={['left', 'right']}
-    >
+    <View style={[styles.container, containerStyles]}>
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
-
-      {/* {landscapeChatViewVisible ? <ChatView /> : null} */}
-    </Container>
+    </View>
   );
 };