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

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/DisplayView.tsx

@@ -1,11 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, View } from 'react-native';
 import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
 import { DefaultModal } from './DefaultModal';
@@ -132,19 +128,14 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
     setModalVisible(ModalTypes.STREAMING_QUALITY_SETTING, true);
   };
 
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: interpolate(offset.value, [0, 1], [4, 0]) }],
-    };
-  }, []);
-
   return (
-    <Animated.View style={[{ flex: 1 }, animatedStyles]}>
+    <View style={{ flex: 1 }}>
       {isHLSViewer ? (
         <HLSView />
       ) : (
         <WebrtcView
           ref={gridViewRef}
+          offset={offset}
           peerTrackNodes={peerTrackNodes}
           handlePeerTileMorePress={handlePeerTileMorePress}
         />
@@ -239,6 +230,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
           </DefaultModal>
         </>
       )}
-    </Animated.View>
+    </View>
   );
 };

package/src/components/EndRoomModal.tsx

@@ -16,7 +16,6 @@ export const EndRoomModal: React.FC<EndRoomModalProps> = () => {
     <BottomSheet
       dismissModal={dismissModal}
       isVisible={modalVisibleType === ModalTypes.END_ROOM}
-      animationOutTiming={700}
     >
       <EndRoomModalContent dismissModal={dismissModal} />
     </BottomSheet>

package/src/components/EndRoomModalContent.tsx

@@ -8,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;
@@ -38,10 +39,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   return (
     <View style={styles.container}>
@@ -53,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>
 
@@ -74,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

@@ -24,7 +24,6 @@ import {
 } from '../hooks-sdk';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
-import { useIsLandscapeOrientation } from '../utils/dimension';
 
 interface FooterProps {}
 
@@ -33,7 +32,9 @@ export const _Footer: React.FC<FooterProps> = () => {
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 
@@ -54,12 +55,18 @@ export const _Footer: React.FC<FooterProps> = () => {
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
 
+  const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
+
+  const canShowHandRaiseInFooter = !isOnStage && isViewer; // on_stage_exp object undefined && viewer -> show in footer
+  const canShowHandRaiseInRoomModal = !isOnStage && !isViewer; // on_stage_exp object undefined && publisher -> show in room modal
+
   const canShowOptions =
-    isViewer ||
-    canPublishScreen ||
     canShowParticipants ||
+    canPublishScreen ||
     canShowBRB ||
-    canStartRecording;
+    canShowHandRaiseInRoomModal ||
+    canStartRecording ||
+    canEditUsernameFromRoomModal;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];
@@ -68,7 +75,7 @@ export const _Footer: React.FC<FooterProps> = () => {
       actions.push('chat');
     }
 
-    if (!isOnStage && isViewer) {
+    if (canShowHandRaiseInFooter) {
       actions.unshift('hand-raise');
     }
 
@@ -88,10 +95,9 @@ export const _Footer: React.FC<FooterProps> = () => {
 
     return actions;
   }, [
-    isOnStage,
+    canShowHandRaiseInFooter,
     canShowOptions,
     canShowChat,
-    isViewer,
     canPublishAudio,
     canPublishVideo,
   ]);
@@ -103,11 +109,11 @@ export const _Footer: React.FC<FooterProps> = () => {
   return (
     <SafeAreaView
       style={isHLSViewer ? null : containerStyles}
-      edges={['bottom']}
+      edges={['bottom', 'left', 'right']}
     >
       <View
         style={[
-          isLandscapeOrientation ? styles.landscapeContainer : styles.container,
+          styles.container,
           isHLSViewer ? styles.hlsContainer : containerStyles,
         ]}
       >
@@ -138,15 +144,14 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 };
 
-export const useFooterHeight = () => {
+export const useFooterHeight = (excludeSafeArea: boolean = false) => {
   const isHLSViewer = useIsHLSViewer();
-  const isLandscapeOrientation = useIsLandscapeOrientation();
   const { bottom } = useSafeAreaInsets();
 
   return (
-    bottom +
-    (isHLSViewer ? 8 : isLandscapeOrientation ? 4 : 16) +
-    (Platform.OS === 'android' ? (isLandscapeOrientation ? 4 : 16) : 0) +
+    (excludeSafeArea ? 0 : bottom) +
+    (isHLSViewer ? 8 : 16) +
+    (Platform.OS === 'android' ? 16 : 0) +
     40
   ); // bottomSafeArea + paddingTop + marginBottom + content
 };
@@ -160,14 +165,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
   },
-  landscapeContainer: {
-    paddingTop: 4,
-    paddingHorizontal: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: Platform.OS === 'android' ? 4 : 0,
-  },
   hlsContainer: {
     paddingTop: 8,
   },

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 } 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';
@@ -18,6 +21,7 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -46,12 +50,38 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
     const regularTilesFlatlistRef = useRef<FlatList<PeerTrackNode[]>>(null);
     const screenshareTilesFlatlistRef = useRef<FlatList<PeerTrackNode>>(null);
-    const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{ width: number | null, height: number | null }>({ width: null, height: null });
+    const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{
+      width: number | null;
+      height: number | null;
+    }>({ width: null, height: null });
 
-    const isLandscapeOrientation = useIsLandscapeOrientation();
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const regularTilesAvailable = pairedPeers.length > 0;
+
+    const isLandscapeOrientation = useIsLandscapeOrientation();
+
+    // On Orientation change, scroll to first page of list
+    React.useEffect(() => {
+      if (screenshareTilesAvailable) {
+        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,
+        });
+      }
+    }, [regularTilesAvailable, isLandscapeOrientation]);
+
     const miniviewPeerTrackNodeExists = useSelector(
       (state: RootState) => !!state.app.miniviewPeerTrackNode
     );
@@ -105,7 +135,10 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
 
     const _handleLayoutChange = React.useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
-        setInsetTileBoundingBox({ width: nativeEvent.layout.width, height: nativeEvent.layout.height });
+        setInsetTileBoundingBox({
+          width: nativeEvent.layout.width,
+          height: nativeEvent.layout.height,
+        });
       },
       []
     );
@@ -180,6 +213,8 @@ const RegularTiles = React.forwardRef<
   RegularTilesProps
 >(({ pairedPeers, onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
   const dispatch = useDispatch();
+  const { height: safeHeight } = useSafeAreaFrame();
+
   const screenshareTilesAvailable = useSelector(
     (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
   );
@@ -223,6 +258,7 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
+        style={Platform.OS === 'ios' ? { maxHeight: safeHeight - 16 } : null}
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}

package/src/components/HLSFooter.tsx

@@ -17,7 +17,7 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
 
   return (
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
 

package/src/components/HLSView.tsx

@@ -17,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
@@ -128,49 +133,45 @@ export const _HLSView: React.FC = () => {
 
   return (
     <View style={styles.hlsView}>
-      {room?.hlsStreamingState?.running ? (
-        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}
     />
   );
 };