@100mslive/react-native-room-kit 1.1.4 → 1.1.6

package/src/Icons/Minimize/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface MinimizeIconProps extends Omit<ImageProps, 'source'> {}
+interface MinimizeIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'normal' | 'medium';
+}
 
 export const MinimizeIcon: React.FC<MinimizeIconProps> = ({
   style,
+  size = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,8 +19,17 @@ export const MinimizeIcon: React.FC<MinimizeIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/minimize.png')}
-      style={[styles.icon, iconStyles, style]}
+      source={
+        size === 'medium'
+          ? require('./assets/minimize-med.png')
+          : require('./assets/minimize.png')
+      }
+      style={[
+        styles.icon,
+        iconStyles,
+        size === 'medium' ? styles.medSize : null,
+        style,
+      ]}
       {...restProps}
     />
   );
@@ -30,4 +42,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  medSize: {
+    width: 32,
+    height: 32,
+  },
 });

package/src/Icons/index.ts

@@ -47,3 +47,4 @@ export * from './TrashBin';
 export * from './Add';
 export * from './PollVote';
 export * from './CheckBox';
+export * from './CC';

package/src/components/AnimatedHeader.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import type { SharedValue } from 'react-native-reanimated';
 
 import { useHeaderHeight } from './Header';
-import { useIsHLSViewer } from '../hooks-util';
 
 export interface AnimatedHeaderProps {
   offset: SharedValue<number>;
@@ -18,23 +17,16 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   children,
   offset,
 }) => {
-  const isHLSViewer = useIsHLSViewer();
   const headerHeight = useHeaderHeight();
 
   const animatedStyles = useAnimatedStyle(() => {
-    if (isHLSViewer) {
-      return {
-        opacity: offset.value,
-        transform: [{ translateY: 0 }],
-      };
-    }
     return {
       opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
       transform: [
         { translateY: interpolate(offset.value, [0, 1], [-headerHeight, 0]) },
       ],
     };
-  }, [headerHeight, isHLSViewer]);
+  }, [headerHeight]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';

package/src/components/Chat/ChatBanner.tsx

@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
     // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
   },
   landscapeCoverImage: {
+    height: '30%',
     flexShrink: 1,
     resizeMode: 'contain',
   },

package/src/components/Chat/ChatFilterBottomSheetOpener.tsx

@@ -28,12 +28,20 @@ import { ChatBroadcastFilter, ModalTypes } from '../../utils/types';
 import { hexToRgbA } from '../../utils/theme';
 
 interface ChatFilterBottomSheetOpenerProps {
-  insetMode?: boolean;
+  overlay?: boolean;
+  useFilterModal?: boolean;
+  showActionBtn?: boolean;
+  useActionModal?: boolean;
 }
 
 const _ChatFilterBottomSheetOpener: React.FC<
   ChatFilterBottomSheetOpenerProps
-> = ({ insetMode = false }) => {
+> = ({
+  overlay = false,
+  useFilterModal = false,
+  showActionBtn = false,
+  useActionModal = false,
+}) => {
   const dispatch = useDispatch();
   const canDisableChat = useHMSCanDisableChat();
   const chatRecipients = useHMSChatRecipientSelector();
@@ -51,7 +59,7 @@ const _ChatFilterBottomSheetOpener: React.FC<
         fontFamily: `${typography.font_family}-Regular`,
       },
       button: {
-        backgroundColor: insetMode
+        backgroundColor: overlay
           ? theme.palette.background_dim &&
             hexToRgbA(theme.palette.background_dim, 0.64)
           : theme.palette.primary_default,
@@ -66,16 +74,16 @@ const _ChatFilterBottomSheetOpener: React.FC<
           hexToRgbA(theme.palette.background_dim, 0.64),
       },
       moreActionIcon: {
-        tintColor: insetMode
+        tintColor: overlay
           ? theme.palette.on_surface_low
           : theme.palette.on_surface_medium,
       },
     }),
-    [insetMode]
+    [overlay]
   );
 
   const openChatFiltersSheet = () => {
-    if (insetMode) {
+    if (useFilterModal) {
       handleModalVisibleType(ModalTypes.CHAT_FILTER);
     } else {
       dispatch(setChatFilterSheetVisible(true));
@@ -83,7 +91,7 @@ const _ChatFilterBottomSheetOpener: React.FC<
   };
 
   const openChatMoreActionsSheet = () => {
-    if (insetMode) {
+    if (useActionModal) {
       handleModalVisibleType(ModalTypes.CHAT_MORE_ACTIONS);
     } else {
       dispatch(setChatMoreActionsSheetVisible(true));
@@ -155,7 +163,7 @@ const _ChatFilterBottomSheetOpener: React.FC<
         <View />
       )}
 
-      {canDisableChat && insetMode ? (
+      {canDisableChat && showActionBtn ? (
         <PressableIcon
           onPress={openChatMoreActionsSheet}
           style={[styles.moreAction, hmsRoomStyles.moreAction]}

package/src/components/Chat/ChatFilterView.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import type { HMSRemotePeer } from '@100mslive/react-native-hms';
-import { FlashList, type ListRenderItem } from '@shopify/flash-list';
+import type { ListRenderItem } from '@shopify/flash-list';
+import { FlashList } from '@shopify/flash-list';
 import { StyleSheet, Text, View } from 'react-native';
+import { HMSPeerType } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
@@ -61,7 +63,9 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = ({ onDismiss }) => {
         const fetchedRemotePeers = await hmsInstance.getRemotePeers();
         if (mounted) {
           setLoadingPeersList(false);
-          setRemotePeers(fetchedRemotePeers);
+          setRemotePeers(
+            fetchedRemotePeers.filter((rp) => rp.type !== HMSPeerType.SIP)
+          );
         }
       };
 

package/src/components/Chat/ChatList.tsx

@@ -5,6 +5,7 @@ import {
   // FlashListProps
 } from '@shopify/flash-list';
 import { Platform, StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../../redux';
@@ -14,10 +15,11 @@ import { PinnedMessages } from './PinnedMessages';
 import { useIsAllowedToSendMessage } from '../../hooks-util';
 
 type ChatListProps = {
+  style?: StyleProp<ViewStyle>;
   // estimatedListSize?: FlashListProps<HMSMessage>['estimatedListSize'];
 };
 
-const _ChatList: React.FC<ChatListProps> = () => {
+const _ChatList: React.FC<ChatListProps> = ({ style }) => {
   const flashlistRef = React.useRef<null | FlashList<HMSMessage>>(null);
   const isAllowedToSendMessage = useIsAllowedToSendMessage();
   const messages = useSelector((state: RootState) => state.messages.messages);
@@ -36,6 +38,7 @@ const _ChatList: React.FC<ChatListProps> = () => {
       style={[
         chatListStyle.list,
         isAllowedToSendMessage ? chatListStyle.bottomSpace : null,
+        style,
       ]}
     >
       <PinnedMessages />

package/src/components/ChatAndParticipants/ChatAndParticipantsView.tsx

@@ -5,6 +5,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import {
   useHMSRoomStyleSheet,
+  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import { ChatAndParticipantsHeader } from './ChatAndParticipantsHeader';
@@ -19,6 +20,7 @@ const _ChatAndParticipantsView: React.FC = () => {
   const activeChatBottomSheetTab = useSelector(
     (state: RootState) => state.app.activeChatBottomSheetTab
   );
+  const isHLSViewer = useIsHLSViewer();
 
   const { hide, canShowParticipants, canShowChat, overlayChatLayout } =
     useShowChatAndParticipants();
@@ -35,7 +37,10 @@ const _ChatAndParticipantsView: React.FC = () => {
     activeChatBottomSheetTab === 'Participants' && canShowParticipants;
 
   const showChat =
-    activeChatBottomSheetTab === 'Chat' && canShowChat && !overlayChatLayout;
+    !isHLSViewer &&
+    activeChatBottomSheetTab === 'Chat' &&
+    canShowChat &&
+    !overlayChatLayout;
 
   return (
     <SafeAreaView style={styles.container} edges={['left', 'right']}>

package/src/components/DisplayView.tsx

@@ -9,14 +9,12 @@ import { ModalTypes, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import { requestExternalStoragePermission } from '../utils/functions';
 import {
-  ChangeAspectRatio,
   ChangeRoleModal,
   ChangeTrackStateModal,
   SaveScreenshot,
 } from './Modals';
 import type { RootState } from '../redux';
 import { GridView } from './GridView';
-import { HLSView } from './HLSView';
 import { PeerSettingsModalContent } from '../components/PeerSettingsModalContent';
 import { StreamingQualityModalContent } from '../components/StreamingQualityModalContent';
 import {
@@ -24,7 +22,6 @@ import {
   useHMSInstance,
   useHMSRoleChangeRequest,
   useHMSSessionStoreListeners,
-  useIsHLSViewer,
   useModalType,
 } from '../hooks-util';
 import { WebrtcView } from './WebrtcView';
@@ -48,7 +45,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 }) => {
   // --- 100ms SDK Instance ---
   const hmsInstance = useHMSInstance();
-  const isHLSViewer = useIsHLSViewer();
 
   const {
     modalVisibleType: modalVisible,
@@ -130,16 +126,12 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
   return (
     <View style={{ flex: 1 }}>
-      {isHLSViewer ? (
-        <HLSView />
-      ) : (
-        <WebrtcView
-          ref={gridViewRef}
-          offset={offset}
-          peerTrackNodes={peerTrackNodes}
-          handlePeerTileMorePress={handlePeerTileMorePress}
-        />
-      )}
+      <WebrtcView
+        ref={gridViewRef}
+        offset={offset}
+        peerTrackNodes={peerTrackNodes}
+        handlePeerTileMorePress={handlePeerTileMorePress}
+      />
 
       {isPipModeActive ? null : (
         <>
@@ -171,15 +163,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
             ) : null}
           </BottomSheet>
 
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ChangeAspectRatio
-              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
-            />
-          </DefaultModal>
           {/* Save Image Captured from Local Camera */}
           <DefaultModal
             modalPosiion="center"
@@ -193,6 +176,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.STREAMING_QUALITY_SETTING}
@@ -207,6 +191,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_TRACK}
@@ -219,6 +204,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_ROLE}

package/src/components/Footer.tsx

@@ -6,9 +6,10 @@ import {
 } from 'react-native-safe-area-context';
 
 import {
+  useCanShowRoomOptionsButton,
+  useHMSConferencingScreenConfig,
   useHMSLayoutConfig,
   useHMSRoomStyle,
-  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { HMSManageLeave } from './HMSManageLeave';
@@ -22,57 +23,28 @@ import {
   useCanPublishScreen,
   useCanPublishVideo,
 } from '../hooks-sdk';
-import { useSelector } from 'react-redux';
-import type { RootState } from '../redux';
 
 interface FooterProps {}
 
 export const _Footer: React.FC<FooterProps> = () => {
-  const isHLSViewer = useIsHLSViewer();
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const editUsernameDisabled = useSelector(
-    (state: RootState) => state.app.editUsernameDisabled
-  );
+  const canShowOptions = useCanShowRoomOptionsButton();
+  const { canShowChat } = useShowChatAndParticipants();
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 
-  const { canShowParticipants, canShowChat } = useShowChatAndParticipants();
-
-  const canShowBRB = useHMSLayoutConfig(
-    (layoutConfig) =>
-      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
-  );
-
   const isOnStage = useHMSLayoutConfig((layoutConfig) => {
     return !!layoutConfig?.screens?.conferencing?.default?.elements
       ?.on_stage_exp;
   });
 
-  const canStartRecording = useSelector(
-    (state: RootState) =>
-      !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
+  const canRaiseHand = useHMSConferencingScreenConfig(
+    (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
   );
 
-  const canReadOrWritePoll = useSelector((state: RootState) => {
-    const permissions = state.hmsStates.localPeer?.role?.permissions;
-    return permissions?.pollRead || permissions?.pollWrite;
-  });
-
-  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 =
-    canShowParticipants ||
-    canPublishScreen ||
-    canShowBRB ||
-    canShowHandRaiseInRoomModal ||
-    canStartRecording ||
-    canEditUsernameFromRoomModal ||
-    canReadOrWritePoll;
+  const canShowHandRaiseInFooter = canRaiseHand && !isOnStage && isViewer;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];
@@ -113,16 +85,8 @@ export const _Footer: React.FC<FooterProps> = () => {
   }));
 
   return (
-    <SafeAreaView
-      style={isHLSViewer ? null : containerStyles}
-      edges={['bottom', 'left', 'right']}
-    >
-      <View
-        style={[
-          styles.container,
-          isHLSViewer ? styles.hlsContainer : containerStyles,
-        ]}
-      >
+    <SafeAreaView style={containerStyles} edges={['bottom', 'left', 'right']}>
+      <View style={[styles.container, containerStyles]}>
         {footerActionButtons.map((actionType, index) => {
           return (
             <View
@@ -151,15 +115,11 @@ export const _Footer: React.FC<FooterProps> = () => {
 };
 
 export const useFooterHeight = (excludeSafeArea: boolean = false) => {
-  const isHLSViewer = useIsHLSViewer();
   const { bottom } = useSafeAreaInsets();
 
   return (
-    (excludeSafeArea ? 0 : bottom) +
-    (isHLSViewer ? 8 : 16) +
-    (Platform.OS === 'android' ? 16 : 0) +
-    40
-  ); // bottomSafeArea + paddingTop + marginBottom + content
+    (excludeSafeArea ? 0 : bottom) + (Platform.OS === 'android' ? 16 : 0) + 40
+  ); // bottomSafeArea + marginBottom + content
 };
 
 const styles = StyleSheet.create({
@@ -171,9 +131,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
   },
-  hlsContainer: {
-    paddingTop: 8,
-  },
   iconWrapper: {
     marginLeft: 24,
   },

package/src/components/HLSAnimatedDescriptionPane.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+
+export interface HLSAnimatedDescriptionPaneProps {
+  sharedValue: SharedValue<number>;
+  height: number;
+  style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+}
+
+export const HLSAnimatedDescriptionPane: React.FC<
+  HLSAnimatedDescriptionPaneProps
+> = ({ children, style, sharedValue, height }) => {
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      // opacity: interpolate(sharedValue.value, [0, 0.3, 1], [0, 1, 1]),
+      transform: [
+        {
+          translateY: interpolate(sharedValue.value, [0, 1], [-height, 0]),
+        },
+      ],
+    }),
+    [height]
+  );
+
+  return (
+    <Animated.View style={[{ flex: 1 }, animatedStyles, style]}>
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/HLSChatFooterView.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { HLSHandRaiseButton } from './HLSHandRaiseButton';
+import { HLSRoomOptionsButton } from './HLSRoomOptionsButton';
+import { HLSManageChatTextInput } from './HLSManageChatTextInput';
+
+export const HLSChatFooterView = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+      borderBottomColor: theme.palette.border_bright,
+    },
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+  }));
+
+  return (
+    <SafeAreaView
+      edges={['bottom']}
+      style={[styles.container, hmsRoomStyles.container]}
+    >
+      <HLSManageChatTextInput />
+
+      <HLSHandRaiseButton />
+
+      <HLSRoomOptionsButton />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    // alignItems: 'center',
+    alignItems: 'flex-end',
+  },
+  input: {
+    flex: 0,
+    height: 40,
+    marginHorizontal: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  chatPaused: {
+    flexShrink: 1,
+  },
+});