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

package/src/components/Chat/index.ts

@@ -1,4 +1,4 @@
 export * from './ChatBanner';
 export * from './ChatList';
 export * from './ChatMessage';
-export * from './PinnedMessage';
+export * from './PinnedMessages';

package/src/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.tsx

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { BottomSheet } from '../BottomSheet';
-import { useHMSRoomStyleSheet, useShowChatAndParticipants } from '../../hooks-util';
+import {
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} from '../../hooks-util';
 import { ChatAndParticipantsView } from './ChatAndParticipantsView';
 import { useHeaderHeight } from '../Header';
 import { useIsLandscapeOrientation } from '../../utils/dimension';

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -2,14 +2,18 @@ import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { CloseIcon } from '../../Icons';
+import { CloseIcon, SettingsIcon } from '../../Icons';
 import {
+  useHMSCanDisableChat,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import type { RootState } from '../../redux';
 import { ChatBottomSheetTabs } from '../../utils/types';
-import { setActiveChatBottomSheetTab } from '../../redux/actions';
+import {
+  setActiveChatBottomSheetTab,
+  setChatMoreActionsSheetVisible,
+} from '../../redux/actions';
 import { TestIds } from '../../utils/constants';
 
 interface WebrtcChatHeaderProps {
@@ -23,6 +27,7 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
   const peersCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
+  const canDisableChat = useHMSCanDisableChat();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerTitleWrapper: {
@@ -53,6 +58,15 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
     return true;
   });
 
+  const onSettingsPress = () => {
+    dispatch(setChatMoreActionsSheetVisible(true));
+  };
+
+  const hideSettigsButton =
+    !canDisableChat || // can't disable chat, OR
+    (visibleChatBottomSheetTabs.length === 1 &&
+      visibleChatBottomSheetTabs[0] === 'Participants'); // Only Participants Header is visible
+
   return (
     <View
       style={
@@ -67,8 +81,8 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             visibleChatBottomSheetTabs[0] === 'Participants'
               ? TestIds.participants_heading
               : visibleChatBottomSheetTabs[0] === 'Chat'
-              ? TestIds.chat_heading
-              : undefined
+                ? TestIds.chat_heading
+                : undefined
           }
           style={[styles.headerTitle, hmsRoomStyles.activeHeaderTitle]}
         >
@@ -90,8 +104,8 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
                 key={tab}
                 testID={
                   tab === 'Participants'
-                      ? TestIds.participants_heading_btn
-                      : tab === 'Chat'
+                    ? TestIds.participants_heading_btn
+                    : tab === 'Chat'
                       ? TestIds.chat_heading_btn
                       : undefined
                 }
@@ -101,10 +115,14 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
                 <Text
                   testID={
                     tab === 'Participants'
-                      ? (isActive ? TestIds.participants_heading_active : TestIds.participants_heading)
+                      ? isActive
+                        ? TestIds.participants_heading_active
+                        : TestIds.participants_heading
                       : tab === 'Chat'
-                      ? (isActive ? TestIds.chat_heading_active : TestIds.chat_heading)
-                      : undefined
+                        ? isActive
+                          ? TestIds.chat_heading_active
+                          : TestIds.chat_heading
+                        : undefined
                   }
                   style={[
                     styles.headerTitle,
@@ -123,9 +141,27 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
         </View>
       )}
 
-      <TouchableOpacity testID={TestIds.participants_close_btn} onPress={onClosePress}>
-        <CloseIcon />
-      </TouchableOpacity>
+      <View style={{ flexDirection: 'row' }}>
+        {hideSettigsButton ? null : (
+          <TouchableOpacity
+            disabled={activeChatBottomSheetTab === 'Participants'}
+            onPress={onSettingsPress}
+            style={{
+              marginRight: 16,
+              opacity: activeChatBottomSheetTab === 'Participants' ? 0.5 : 1,
+            }}
+          >
+            <SettingsIcon />
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity
+          testID={TestIds.participants_close_btn}
+          onPress={onClosePress}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
     </View>
   );
 };

package/src/components/ChatAndParticipants/ChatAndParticipantsView.tsx

@@ -12,6 +12,8 @@ import { ChatFilterBottomSheetView } from '../Chat/ChatFilterBottomSheetView';
 import type { RootState } from '../../redux';
 import { ParticipantsView } from './ParticipantsView';
 import { ChatView } from './ChatView';
+import { ChatMoreActionsSheetView } from '../Chat/ChatMoreActionsSheetView';
+import { MessageOptionsBottomSheetView } from '../Chat/MessageOptionsBottomSheetView';
 
 const _ChatAndParticipantsView: React.FC = () => {
   const activeChatBottomSheetTab = useSelector(
@@ -55,7 +57,13 @@ const _ChatAndParticipantsView: React.FC = () => {
         ) : null}
       </View>
 
-      <ChatFilterBottomSheetView />
+      {canShowChat && !overlayChatLayout ? (
+        <>
+          <MessageOptionsBottomSheetView />
+          <ChatFilterBottomSheetView />
+          <ChatMoreActionsSheetView />
+        </>
+      ) : null}
     </SafeAreaView>
   );
 };

package/src/components/ChatAndParticipants/ChatView.tsx

@@ -1,14 +1,30 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
 
-import { useHMSRoomStyleSheet } from '../../hooks-util';
+import {
+  useHMSChatState,
+  useHMSRoomStyleSheet,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+} from '../../hooks-util';
 import { ChatList } from '../Chat/ChatList';
 import { HMSSendMessageInput } from '../HMSSendMessageInput';
 import { ChatFilterBottomSheetOpener } from '../Chat/ChatFilterBottomSheetOpener';
+import { ChatPaused } from '../Chat/ChatPaused';
+import type { RootState } from '../../redux';
+import { PeerBlockedFromChat } from '../Chat/PeerBlockedFromChat';
 
 interface ChatViewProps {}
 
 const _ChatView: React.FC<ChatViewProps> = () => {
+  const { chatState } = useHMSChatState();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isChatRecipientSelected = useSelector(
+    (state: RootState) => state.chatWindow.sendTo !== null
+  );
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     input: {
       backgroundColor: theme.palette.surface_default,
@@ -20,11 +36,21 @@ const _ChatView: React.FC<ChatViewProps> = () => {
     <>
       <ChatList />
 
-      <ChatFilterBottomSheetOpener />
+      {isLocalPeerBlockedFromChat ? (
+        <PeerBlockedFromChat style={styles.peerBlocked} />
+      ) : chatState.enabled ? (
+        <>
+          <ChatFilterBottomSheetOpener />
 
-      <HMSSendMessageInput
-        containerStyle={[styles.input, hmsRoomStyles.input]}
-      />
+          {isAllowedToSendMessage && isChatRecipientSelected ? (
+            <HMSSendMessageInput
+              containerStyle={[styles.input, hmsRoomStyles.input]}
+            />
+          ) : null}
+        </>
+      ) : isAllowedToSendMessage ? (
+        <ChatPaused style={styles.chatPaused} />
+      ) : null}
     </>
   );
 };
@@ -37,6 +63,12 @@ const styles = StyleSheet.create({
     marginTop: 0,
     marginBottom: 0,
   },
+  chatPaused: {
+    marginTop: 18, // Applied margin so that content does not shift when this component mounts or unmounts
+  },
+  peerBlocked: {
+    marginTop: 18, // Applied margin so that content does not shift when this component mounts or unmounts
+  },
 });
 
 export const ChatView = React.memo(_ChatView);

package/src/components/EndRoomModalContent.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import { AlertTriangleIcon, CloseIcon } from '../Icons';
@@ -9,6 +8,7 @@ import { HMSDangerButton } from './HMSDangerButton';
 import type { RootState } from '../redux';
 import { OnLeaveReason } from '../utils/types';
 import { TestIds } from '../utils/constants';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -39,10 +39,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   return (
     <View style={styles.container}>
@@ -54,11 +51,11 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
             testID={TestIds.end_confirmation_heading}
             style={[styles.headerText, hmsRoomStyles.headerText]}
           >
-            {canStream && isStreaming
+            {canStream && isHLSStreaming
               ? 'End Stream'
               : canEndRoom
-              ? 'End Session'
-              : 'Leave'}
+                ? 'End Session'
+                : 'Leave'}
           </Text>
         </View>
 
@@ -75,23 +72,23 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         testID={TestIds.end_confirmation_description}
         style={[styles.text, hmsRoomStyles.text]}
       >
-        {canStream && isStreaming
+        {canStream && isHLSStreaming
           ? 'The stream will end for everyone after they’ve watched it.'
           : canEndRoom
-          ? 'The session will end for everyone in the room immediately. '
-          : 'Others will continue after you leave. You can join the session again.'}
+            ? 'The session will end for everyone in the room immediately. '
+            : 'Others will continue after you leave. You can join the session again.'}
       </Text>
       <HMSDangerButton
         testID={TestIds.end_confirmation_cta}
         loading={false}
         onPress={() => {
-          if (canStream && isStreaming) {
-            leave(OnLeaveReason.LEAVE, true)
+          if (canStream && isHLSStreaming) {
+            leave(OnLeaveReason.LEAVE, true);
           } else {
             endRoom(OnLeaveReason.ROOM_END);
           }
         }}
-        title={canStream && isStreaming ? 'End Stream' : 'End Session'}
+        title={canStream && isHLSStreaming ? 'End Stream' : 'End Session'}
       />
     </View>
   );

package/src/components/Footer.tsx

@@ -32,7 +32,9 @@ export const _Footer: React.FC<FooterProps> = () => {
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 

package/src/components/GridView.tsx

@@ -1,11 +1,14 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList, StyleSheet, useWindowDimensions, Platform } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
-import type {
-  LayoutChangeEvent,
-  ViewToken,
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  useWindowDimensions,
+  Platform,
 } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import type { LayoutChangeEvent, ViewToken } from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
 
 import { DefaultModal } from './DefaultModal';
@@ -62,14 +65,20 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     // On Orientation change, scroll to first page of list
     React.useEffect(() => {
       if (screenshareTilesAvailable) {
-        screenshareTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+        screenshareTilesFlatlistRef.current?.scrollToOffset({
+          offset: 0,
+          animated: false,
+        });
       }
     }, [screenshareTilesAvailable, isLandscapeOrientation]);
 
     // On Orientation change, scroll to first page of list
     React.useEffect(() => {
       if (regularTilesAvailable) {
-        regularTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+        regularTilesFlatlistRef.current?.scrollToOffset({
+          offset: 0,
+          animated: false,
+        });
       }
     }, [regularTilesAvailable, isLandscapeOrientation]);
 
@@ -249,7 +258,7 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
-        style={Platform.OS === 'ios' ? {maxHeight: (safeHeight - 16)} : null}
+        style={Platform.OS === 'ios' ? { maxHeight: safeHeight - 16 } : null}
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}

package/src/components/HLSView.tsx

@@ -6,7 +6,6 @@ import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
-  HMSStreamingState,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -18,10 +17,15 @@ import { COLORS, hexToRgbA } from '../utils/theme';
 import { HMSHLSNotStarted } from './HMSHLSNotStarted';
 import { CrossCircleIcon } from '../Icons';
 import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export const _HLSView: React.FC = () => {
   const dispatch = useDispatch();
-  const room = useSelector((state: RootState) => state.hmsStates.room);
+  const isHLSStreaming = useIsHLSStreamingOn();
+  const isStreamUrlPresent = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  );
   const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
   const showHLSStats = useSelector(
     (state: RootState) => state.app.joinConfig.showHLSStats
@@ -129,49 +133,45 @@ export const _HLSView: React.FC = () => {
 
   return (
     <View style={styles.hlsView}>
-      {room?.hlsStreamingState?.state === HMSStreamingState.STARTED ? (
-        room?.hlsStreamingState?.variants?.slice(0, 1)?.map((variant, index) =>
-          variant?.hlsStreamUrl ? (
-            <View key={index} style={styles.hlsPlayerContainer}>
-              <HMSHLSPlayer
-                key={playerKey}
-                ref={hmsHlsPlayerRef}
-                enableStats={showHLSStats}
-                enableControls={enableHLSPlayerControls}
-              />
-
-              <HLSPlayerEmoticons />
-
-              {showHLSStats ? (
-                <HLSPlayerStatsView onClosePress={handleClosePress} />
-              ) : null}
-
-              {showCustomHLSPlayerControls ? (
-                <CustomControls handleControlPress={hlsPlayerActions} />
-              ) : null}
-
-              {isPlaybackFailed ? (
-                <View
-                  style={[
-                    styles.playbackFailedContainer,
-                    hmsRoomStyles.failedContainer,
-                  ]}
-                >
-                  <CrossCircleIcon />
-
-                  <Text
-                    style={[styles.playbackFailed, hmsRoomStyles.failedText]}
-                  >
-                    Playback Failed
-                  </Text>
-                </View>
-              ) : null}
-            </View>
-          ) : (
-            <View key={index} style={styles.textContainer}>
-              <Text style={styles.warningSubtitle}>Stream URL not found!</Text>
-            </View>
-          )
+      {isHLSStreaming ? (
+        isStreamUrlPresent ? (
+          <View style={styles.hlsPlayerContainer}>
+            <HMSHLSPlayer
+              key={playerKey}
+              ref={hmsHlsPlayerRef}
+              enableStats={showHLSStats}
+              enableControls={enableHLSPlayerControls}
+            />
+
+            <HLSPlayerEmoticons />
+
+            {showHLSStats ? (
+              <HLSPlayerStatsView onClosePress={handleClosePress} />
+            ) : null}
+
+            {showCustomHLSPlayerControls ? (
+              <CustomControls handleControlPress={hlsPlayerActions} />
+            ) : null}
+
+            {isPlaybackFailed ? (
+              <View
+                style={[
+                  styles.playbackFailedContainer,
+                  hmsRoomStyles.failedContainer,
+                ]}
+              >
+                <CrossCircleIcon />
+
+                <Text style={[styles.playbackFailed, hmsRoomStyles.failedText]}>
+                  Playback Failed
+                </Text>
+              </View>
+            ) : null}
+          </View>
+        ) : (
+          <View style={styles.textContainer}>
+            <Text style={styles.warningSubtitle}>Stream URL not found!</Text>
+          </View>
         )
       ) : (
         <HMSHLSNotStarted />

package/src/components/HMSBaseButton.tsx

@@ -6,12 +6,20 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle, ColorValue, TouchableHighlightProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import type {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ColorValue,
+  TouchableHighlightProps,
+} from 'react-native';
 
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  wrapWithGestureDetector?: boolean;
   testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
   loaderColor?: ColorValue | undefined;
@@ -32,8 +40,9 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
   textStyle,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
-  return (
+  const button = (
     <TouchableHighlight
       testID={testID}
       underlayColor={underlayColor}
@@ -63,6 +72,12 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
       </>
     </TouchableHighlight>
   );
+
+  if (wrapWithGestureDetector) {
+    return <GestureDetector gesture={Gesture.Tap()}>{button}</GestureDetector>;
+  }
+
+  return button;
 };
 
 const styles = StyleSheet.create({

package/src/components/HMSDangerButton.tsx

@@ -14,6 +14,7 @@ export interface HMSDangerButtonProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
 }
 
 export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
@@ -24,6 +25,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
   style,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
   const {
     alert_error_dim: alertErrorDimColor,
@@ -65,6 +67,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
         hmsRoomStyles.buttonText,
         disabled ? hmsRoomStyles.disabledText : null,
       ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
     />
   );
 };