@100mslive/react-native-room-kit 0.1.0 → 1.0.0

package/src/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { BottomSheet } from '../BottomSheet';
+import { useShowChatAndParticipants } from '../../hooks-util';
+import { ChatAndParticipantsView } from './ChatAndParticipantsView';
+import { HEADER_HEIGHT } from '../Header';
+
+export const ChatAndParticipantsBottomSheet = () => {
+  const { top: topSafeArea } = useSafeAreaInsets();
+
+  const { modalVisible, hide } = useShowChatAndParticipants();
+
+  const closeChatWindow = () => hide('modal');
+
+  return (
+    <BottomSheet
+      dismissModal={closeChatWindow}
+      isVisible={modalVisible}
+      avoidKeyboard={true}
+      containerStyle={[
+        styles.bottomSheet,
+        { marginTop: topSafeArea + HEADER_HEIGHT },
+      ]}
+    >
+      <ChatAndParticipantsView />
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomSheet: {
+    flex: 1,
+    backgroundColor: undefined,
+    paddingBottom: 0,
+  },
+});

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { CloseIcon } from '../../Icons';
+import {
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { COLORS } from '../../utils/theme';
+import { ChatBottomSheetTabs } from '../../utils/types';
+import { setActiveChatBottomSheetTab } from '../../redux/actions';
+
+interface WebrtcChatHeaderProps {
+  onClosePress?: () => void;
+}
+
+const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
+  onClosePress,
+}) => {
+  const dispatch = useDispatch();
+  const peersCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    tab: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    headerTitle: {
+      color: theme.palette.on_surface_low,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    activeHeaderTitle: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const activeChatBottomSheetTab = useSelector(
+    (state: RootState) => state.app.activeChatBottomSheetTab
+  );
+  const { canShowParticipants, canShowChat, overlayChatLayout } =
+    useShowChatAndParticipants();
+
+  const visibleChatBottomSheetTabs = ChatBottomSheetTabs.filter((tab) => {
+    if (tab === 'Participants') return canShowParticipants;
+    if (tab === 'Chat') return canShowChat && !overlayChatLayout;
+    return true;
+  });
+
+  return (
+    <View
+      style={
+        visibleChatBottomSheetTabs.length > 1
+          ? styles.tabsHeader
+          : styles.header
+      }
+    >
+      {visibleChatBottomSheetTabs.length === 1 ? (
+        <Text style={[styles.headerTitle, hmsRoomStyles.activeHeaderTitle]}>
+          {visibleChatBottomSheetTabs[0]}
+          {visibleChatBottomSheetTabs[0] === 'Participants' &&
+          typeof peersCount === 'number'
+            ? ` (${peersCount})`
+            : null}
+        </Text>
+      ) : (
+        <View style={styles.headerTitleWrapper}>
+          {visibleChatBottomSheetTabs.map((tab) => {
+            const isActive = activeChatBottomSheetTab === tab;
+
+            return (
+              <TouchableOpacity
+                key={tab}
+                style={[styles.tab, isActive ? hmsRoomStyles.tab : null]}
+                onPress={() => dispatch(setActiveChatBottomSheetTab(tab))}
+              >
+                <Text
+                  style={[
+                    styles.headerTitle,
+                    hmsRoomStyles.headerTitle,
+                    isActive ? hmsRoomStyles.activeHeaderTitle : null,
+                  ]}
+                >
+                  {tab}
+                  {tab === 'Participants' && typeof peersCount === 'number'
+                    ? ` (${peersCount})`
+                    : null}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      )}
+
+      <TouchableOpacity onPress={onClosePress}>
+        <CloseIcon />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  tabsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 4,
+  },
+  headerTitleWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 4,
+    borderRadius: 8,
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+    marginRight: 16,
+  },
+  tab: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    borderRadius: 4,
+  },
+  headerTitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+});
+
+export const ChatAndParticipantsHeader = React.memo(_ChatAndParticipantsHeader);

package/src/components/ChatAndParticipants/ChatAndParticipantsView.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  useHMSRoomStyleSheet,
+  useShowChatAndParticipants,
+} from '../../hooks-util';
+import { ChatAndParticipantsHeader } from './ChatAndParticipantsHeader';
+import { ChatFilterBottomSheetView } from '../Chat/ChatFilterBottomSheetView';
+import type { RootState } from '../../redux';
+import { ParticipantsView } from './ParticipantsView';
+import { ChatView } from './ChatView';
+
+const _ChatAndParticipantsView: React.FC = () => {
+  const activeChatBottomSheetTab = useSelector(
+    (state: RootState) => state.app.activeChatBottomSheetTab
+  );
+
+  const { hide, canShowParticipants, canShowChat, overlayChatLayout } =
+    useShowChatAndParticipants();
+
+  const closeBottomSheet = () => hide('modal');
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const showParticipants =
+    activeChatBottomSheetTab === 'Participants' && canShowParticipants;
+
+  const showChat =
+    activeChatBottomSheetTab === 'Chat' && canShowChat && !overlayChatLayout;
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.contentContainer,
+          hmsRoomStyles.contentContainer,
+          showParticipants ? styles.participantsContainer : null,
+        ]}
+      >
+        <ChatAndParticipantsHeader onClosePress={closeBottomSheet} />
+
+        {showParticipants ? (
+          <View style={styles.participantsWrapper}>
+            <ParticipantsView />
+          </View>
+        ) : showChat ? (
+          <ChatView />
+        ) : null}
+      </View>
+
+      <ChatFilterBottomSheetView />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  contentContainer: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 32,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  participantsContainer: {
+    paddingBottom: 0,
+  },
+  participantsWrapper: {
+    flex: 1,
+    marginTop: 16,
+  },
+});
+
+export const ChatAndParticipantsView = React.memo(_ChatAndParticipantsView);

package/src/components/ChatAndParticipants/ChatView.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { ChatList } from '../Chat/ChatList';
+import { HMSSendMessageInput } from '../HMSSendMessageInput';
+import { ChatFilterBottomSheetOpener } from '../Chat/ChatFilterBottomSheetOpener';
+
+interface ChatViewProps {}
+
+const _ChatView: React.FC<ChatViewProps> = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+  }));
+
+  return (
+    <>
+      <ChatList />
+
+      <ChatFilterBottomSheetOpener />
+
+      <HMSSendMessageInput
+        containerStyle={[styles.input, hmsRoomStyles.input]}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 0,
+    height: 40,
+    marginHorizontal: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+});
+
+export const ChatView = React.memo(_ChatView);

package/src/components/ChatAndParticipants/ParticipantsView.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useFilteredParticipants } from '../../hooks-util';
+import { ParticipantsList, ParticipantsSearchInput } from '../Participants';
+
+type ParticipantsViewProps = {};
+
+export const ParticipantsView: React.FC<ParticipantsViewProps> = () => {
+  const {
+    data,
+    searchText,
+    formattedSearchText,
+    setSearchText,
+    setExpandedGroups,
+  } = useFilteredParticipants();
+
+  return (
+    <>
+      <ParticipantsSearchInput
+        searchText={searchText}
+        setSearchText={setSearchText}
+      />
+
+      <View style={styles.listWrapper}>
+        <ParticipantsList
+          data={data}
+          setExpandedGroups={setExpandedGroups}
+          searchTextExists={formattedSearchText.length > 0}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  listWrapper: {
+    flex: 1,
+    marginTop: 8,
+  },
+});

package/src/components/ChatAndParticipants/index.ts

@@ -0,0 +1 @@
+export * from './ChatAndParticipantsBottomSheet';

package/src/components/CompanyLogo.tsx

@@ -10,9 +10,10 @@ export const CompanyLogo: React.FC<CompanyLogoProps> = ({
   style,
   ...restProps
 }) => {
-  const layoutConfig = useHMSLayoutConfig();
+  const logoSource = useHMSLayoutConfig(
+    (layoutConfig) => layoutConfig?.logo?.url
+  );
 
-  const logoSource = layoutConfig?.logo?.url;
   if (!logoSource) {
     return null;
   }
@@ -28,7 +29,7 @@ export const CompanyLogo: React.FC<CompanyLogoProps> = ({
 
 const styles = StyleSheet.create({
   icon: {
-    width: '100%',
+    aspectRatio: 1,
     height: 32,
     resizeMode: 'contain',
   },

package/src/components/DefaultModal.tsx

@@ -3,11 +3,11 @@ import { StyleSheet, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Modal from 'react-native-modal';
 import type { SupportedAnimation } from 'react-native-modal';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { COLORS } from '../utils/theme';
 import { CustomButton } from './CustomButton';
+import { CloseIcon } from '../Icons';
 
 export interface DefaultModalProps {
   modalVisible: boolean;
@@ -62,11 +62,9 @@ export const DefaultModal: React.FC<DefaultModalProps> = ({
             onPress={setModalVisible}
             viewStyle={styles.crossButton}
             LeftIcon={
-              <MaterialCommunityIcons
-                name="close"
-                style={styles.crossButtonIcon}
-                size={24}
-              />
+              <View>
+                <CloseIcon />
+              </View>
             }
           />
         )}

package/src/components/DisplayView.tsx

@@ -8,14 +8,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { styles } from './styles';
 import { DefaultModal } from './DefaultModal';
 import { ModalTypes, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import { requestExternalStoragePermission } from '../utils/functions';
 import {
   ChangeAspectRatio,
-  ChangeRoleAccepteModal,
   ChangeRoleModal,
   ChangeTrackStateModal,
   SaveScreenshot,
@@ -33,9 +31,11 @@ import {
   useIsHLSViewer,
   useModalType,
 } from '../hooks-util';
-import { ParticipantsModal } from './ParticipantsModal';
 import { WebrtcView } from './WebrtcView';
 import { BottomSheet } from './BottomSheet';
+import { FullScreenVideoView } from './FullScreenVideoView';
+import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
+import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -79,9 +79,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
     setModalVisible(ModalTypes.CHANGE_TRACK, true);
   });
 
-  const roleChangeRequest = useHMSRoleChangeRequest(() => {
-    setModalVisible(ModalTypes.CHANGE_ROLE_ACCEPT, true);
-  });
+  useHMSRoleChangeRequest();
 
   // functions
 
@@ -139,7 +137,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
   }, []);
 
   return (
-    <Animated.View style={[styles.container, animatedStyles]}>
+    <Animated.View style={[{ flex: 1 }, animatedStyles]}>
       {isHLSViewer ? (
         <HLSView />
       ) : (
@@ -152,6 +150,12 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
       {isPipModeActive ? null : (
         <>
+          <PreviewForRoleChangeModal />
+
+          <FullScreenVideoView />
+
+          <ChatAndParticipantsBottomSheet />
+
           <BottomSheet
             isVisible={modalVisible === ModalTypes.PEER_SETTINGS}
             dismissModal={() => setModalVisible(ModalTypes.DEFAULT)}
@@ -218,27 +222,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.CHANGE_ROLE_ACCEPT}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            {roleChangeRequest ? (
-              <ChangeRoleAccepteModal
-                instance={hmsInstance}
-                roleChangeRequest={roleChangeRequest}
-                cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
-              />
-            ) : null}
-          </DefaultModal>
-          <DefaultModal
-            animationIn={'slideInUp'}
-            animationOut={'slideOutDown'}
-            modalVisible={modalVisible === ModalTypes.PARTICIPANTS}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ParticipantsModal />
-          </DefaultModal>
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_ROLE}

package/src/components/EndRoomModalContent.tsx

@@ -4,6 +4,8 @@ import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import { AlertTriangleIcon, CloseIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -12,7 +14,7 @@ export interface EndRoomModalContentProps {
 export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
   dismissModal,
 }) => {
-  const { endRoom } = useLeaveMethods();
+  const { endRoom, leave } = useLeaveMethods(false);
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
@@ -25,6 +27,20 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
     },
   }));
 
+  const canEndRoom = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
+  );
+
+  const canStream = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
+  );
+
+  const isStreaming = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState?.running ?? false
+  );
+
   return (
     <View style={styles.container}>
       <View style={styles.header}>
@@ -32,7 +48,11 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
           <AlertTriangleIcon />
 
           <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
-            End Session
+            {canStream && isStreaming
+              ? 'End Stream'
+              : canEndRoom
+              ? 'End Session'
+              : 'Leave'}
           </Text>
         </View>
 
@@ -43,13 +63,18 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
           <CloseIcon />
         </TouchableOpacity>
       </View>
-
       <Text style={[styles.text, hmsRoomStyles.text]}>
-        The session will end for everyone and all the activities will stop. You
-        can't undo this action.
+        {canStream && isStreaming
+          ? '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.'}
       </Text>
-
-      <HMSDangerButton loading={false} onPress={endRoom} title="End Session" />
+      <HMSDangerButton
+        loading={false}
+        onPress={canStream && isStreaming ? () => leave(true) : endRoom}
+        title={canStream && isStreaming ? 'End Stream' : 'End Session'}
+      />
     </View>
   );
 };