@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/components/Participants/ParticipantsList.tsx

@@ -1,306 +1,259 @@
 import * as React from 'react';
-import { View, Text, FlatList, StyleSheet, Platform } from 'react-native';
-import { batch, useDispatch, useSelector } from 'react-redux';
-import Toast from 'react-native-simple-toast';
-import Feather from 'react-native-vector-icons/Feather';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import type {
-  HMSLocalPeer,
-  HMSPeer,
-  HMSRemotePeer,
-} from '@100mslive/react-native-hms';
+import { StyleSheet, Text, View } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import type { HMSPeer } from '@100mslive/react-native-hms';
 
-import { CustomButton } from '../CustomButton';
-import { Menu, MenuItem } from '../MenuModal';
-import { getInitials } from '../../utils/functions';
-import { COLORS } from '../../utils/theme';
+import {
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import { ParticipantsItem } from './ParticipantsItem';
+import { ParticipantsGroupHeader } from './ParticipantsGroupHeader';
+import { useSelector } from 'react-redux';
 import type { RootState } from '../../redux';
-import { useHMSInstance, useModalType } from '../../hooks-util';
-import { setPeerToUpdate } from '../../redux/actions';
-import { ModalTypes } from '../../utils/types';
+import { ParticipantsListFooter } from './ParticipantsListFooter';
 
 export type ParticipantsListProps = {
-  data: (HMSLocalPeer | HMSRemotePeer)[];
+  searchText: string;
+  selectedGroupId: string;
+  onBackPress(): void;
 };
 
-export const ParticipantsList: React.FC<ParticipantsListProps> = ({ data }) => {
+const stickyIndices = [0];
+
+export const ParticipantsList: React.FC<ParticipantsListProps> = ({
+  searchText,
+  selectedGroupId,
+  onBackPress,
+}) => {
+  const mountedRef = React.useRef(true);
+  const fetchedInitialDataRef = React.useRef(false);
   const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  const localPeerPermissions = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.role?.permissions
+
+  // Currect is current selected group and off-stage gorup
+  const isOffStageGroup = useHMSLayoutConfig((layoutConfig) => {
+    const offStageRoles =
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.off_stage_roles || null;
+    return offStageRoles ? offStageRoles.includes(selectedGroupId) : false;
+  });
+
+  // Getting initial data for the selected group Id
+  const dataForGroupId = useSelector(
+    (state: RootState) => {
+      return selectedGroupId === 'hand-raised' ? state.hmsStates.groupedParticipants : state.hmsStates.groupedParticipants[selectedGroupId]
+    }
   );
-  const { handleModalVisibleType: setModalVisible } = useModalType();
 
-  const [visible, setVisible] = React.useState(-1);
+  const finalDataForGroupId = React.useMemo(() => {
+    if (Array.isArray(dataForGroupId)) {
+      return dataForGroupId;
+    }
 
-  const hideMenu = () => setVisible(-1);
-  const showMenu = (index: number) => setVisible(index);
+    if (dataForGroupId && selectedGroupId === 'hand-raised') {
+      return Object.values(dataForGroupId).flat().filter(peer  => peer.isHandRaised);
+    }
 
-  const removePeer = (peer: HMSPeer) => {
-    hideMenu();
-    hmsInstance
-      ?.removePeer(peer, 'removed from room')
-      .then((d) => console.log('Remove Peer Success: ', d))
-      .catch((e) => {
-        console.log('Remove Peer Error: ', e);
-        Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
-      });
-  };
+    return null;
+  }, [dataForGroupId, selectedGroupId]);
 
-  const onChangeNamePress = (peer: HMSPeer) => {
-    hideMenu();
-    setTimeout(() => {
-      batch(() => {
-        dispatch(setPeerToUpdate(peer));
-        setModalVisible(ModalTypes.CHANGE_NAME, true);
-      });
-    }, 500);
-  };
+  // Creating Header Data
+  const headerData = React.useMemo(() => {
+    return {
+      id: selectedGroupId,
+      label:
+        selectedGroupId === 'hand-raised' ? 'Hand Raised' : selectedGroupId,
+    };
+  }, [selectedGroupId]);
 
-  const onChangeRolePress = (peer: HMSPeer) => {
-    hideMenu();
-    setTimeout(() => {
-      batch(() => {
-        dispatch(setPeerToUpdate(peer));
-        setModalVisible(ModalTypes.CHANGE_ROLE, true);
-      });
-    }, 500);
-  };
+  // Created List with Header Data as first item in list
+  const dataWithHeader = React.useMemo(
+    () => [headerData, ...(finalDataForGroupId ?? [])],
+    [finalDataForGroupId, headerData]
+  );
 
-  const toggleAudio = (peer: HMSPeer) => {
-    hideMenu();
-    if (peer?.audioTrack) {
-      hmsInstance
-        ?.changeTrackState(peer?.audioTrack, !peer?.audioTrack?.isMute())
-        .then((d) => console.log('Toggle Audio Success: ', d))
-        .catch((e) => console.log('Toggle Audio Error: ', e));
+  const [offStageData, setOffStageData] = React.useState(dataWithHeader);
+  const [loading, setLoading] = React.useState(false);
+
+  // Created Peer List Iterator for current selected group if it is an 'off-stage' group
+  const peerListIterator = React.useMemo(() => {
+    if (!isOffStageGroup) {
+      return null;
     }
-  };
+    return hmsInstance.getPeerListIterator({
+      limit: 20,
+      byRoleName: selectedGroupId,
+    });
+  }, [selectedGroupId, isOffStageGroup, hmsInstance]);
+
+  // #Effect: Fetching first page from Peer List Iterator
+  React.useEffect(() => {
+    let mounted = true;
+    mountedRef.current = true;
+
+    if (peerListIterator) {
+      setLoading(true);
 
-  const toggleVideo = (peer: HMSPeer) => {
-    hideMenu();
-    if (peer?.videoTrack) {
-      hmsInstance
-        ?.changeTrackState(peer?.videoTrack, !peer?.videoTrack?.isMute())
-        .then((d) => console.log('Toggle Video Success: ', d))
-        .catch((e) => console.log('Toggle Video Error: ', e));
+      peerListIterator
+        .next()
+        .then((peers: HMSPeer[]) => {
+          if (mounted) {
+            setLoading(false);
+            setOffStageData([headerData, ...peers]);
+            fetchedInitialDataRef.current = true;
+          }
+        })
+        .catch(() => {
+          if (mounted) {
+            setLoading(false);
+          }
+        });
     }
-  };
 
-  return (
-    <FlatList
-      data={data}
-      initialNumToRender={2}
-      maxToRenderPerBatch={3}
-      keyboardShouldPersistTaps="always"
-      windowSize={11}
-      renderItem={({ item, index }) => {
-        const peer = item;
+    return () => {
+      mounted = false;
+      mountedRef.current = false;
+    };
+  }, [headerData, peerListIterator]);
+
+  const filteredSearchText = searchText.trim().toLowerCase();
+
+  //#region Flaslist props
+  const data = React.useMemo(() => {
+    return (isOffStageGroup ? offStageData : dataWithHeader).filter((item) =>
+      'id' in item ? true : item.name.toLowerCase().includes(filteredSearchText)
+    );
+  }, [filteredSearchText, offStageData, dataWithHeader, isOffStageGroup]);
+
+  const _keyExtractor = React.useCallback(
+    (item: HMSPeer | { id: string; label: string }) =>
+      'id' in item ? item.id : item.peerID,
+    []
+  );
+
+  const _renderItem = React.useCallback(
+    (data: { item: HMSPeer | { id: string; label: string } }) => {
+      if ('id' in data.item) {
         return (
-          <View style={styles.participantItem} key={peer.peerID}>
-            <View style={styles.participantAvatar}>
-              <Text style={styles.participantAvatarText}>
-                {getInitials(peer.name)}
-              </Text>
-            </View>
-            <View style={styles.participantDescription}>
-              <Text style={styles.participantName} numberOfLines={1}>
-                {peer.name}
-              </Text>
-              <Text style={styles.participantRole} numberOfLines={1}>
-                {peer.role?.name}
-              </Text>
+          <View style={hmsRoomStyles.stickyHeader}>
+            <View style={[styles.headerWrapper, hmsRoomStyles.stickyHeader]}>
+              <ParticipantsGroupHeader
+                id={data.item.id}
+                label={data.item.label}
+                expanded={true}
+                onBackPress={onBackPress}
+              />
             </View>
-            <Menu
-              visible={visible === index}
-              anchor={
-                <CustomButton
-                  onPress={() => showMenu(index)}
-                  viewStyle={styles.participantSettings}
-                  LeftIcon={
-                    <MaterialCommunityIcons
-                      name="dots-vertical"
-                      style={styles.icon}
-                      size={28}
-                    />
-                  }
-                />
-              }
-              onRequestClose={hideMenu}
-              style={styles.participantsMenuContainer}
-            >
-              {peer.isLocal === false && localPeerPermissions?.removeOthers && (
-                <MenuItem onPress={() => removePeer(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <MaterialCommunityIcons
-                      name="account-remove-outline"
-                      style={[styles.participantMenuItemIcon, styles.error]}
-                      size={24}
-                    />
-                    <Text
-                      style={[styles.participantMenuItemName, styles.error]}
-                    >
-                      Remove Peer
-                    </Text>
-                  </View>
-                </MenuItem>
-              )}
-              {peer.isLocal && (
-                <MenuItem onPress={() => onChangeNamePress(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <Ionicons
-                      name="person-outline"
-                      style={styles.participantMenuItemIcon}
-                      size={24}
-                    />
-                    <Text style={styles.participantMenuItemName}>
-                      Change Name
-                    </Text>
-                  </View>
-                </MenuItem>
-              )}
-              {localPeerPermissions?.changeRole && (
-                <MenuItem onPress={() => onChangeRolePress(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <Ionicons
-                      name="people-outline"
-                      style={styles.participantMenuItemIcon}
-                      size={24}
-                    />
-                    <Text style={styles.participantMenuItemName}>
-                      Change Role
-                    </Text>
-                  </View>
-                </MenuItem>
-              )}
-              {peer.isLocal === false &&
-              !!peer.audioTrack &&
-              peer.role?.publishSettings?.allowed?.includes('audio') ? (
-                <MenuItem onPress={() => toggleAudio(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <Feather
-                      name={
-                        peer.audioTrack?.isMute() === false ? 'mic' : 'mic-off'
-                      }
-                      style={styles.participantMenuItemIcon}
-                      size={24}
-                    />
-                    <Text style={styles.participantMenuItemName}>
-                      {peer.audioTrack?.isMute() === false
-                        ? 'Mute audio'
-                        : 'Unmute audio'}
-                    </Text>
-                  </View>
-                </MenuItem>
-              ) : null}
-              {peer.isLocal === false &&
-              !!peer.videoTrack &&
-              peer.role?.publishSettings?.allowed?.includes('video') ? (
-                <MenuItem onPress={() => toggleVideo(peer)}>
-                  <View style={styles.participantMenuItem}>
-                    <Feather
-                      name={
-                        peer.videoTrack?.isMute() === false
-                          ? 'video'
-                          : 'video-off'
-                      }
-                      style={styles.participantMenuItemIcon}
-                      size={24}
-                    />
-                    <Text style={styles.participantMenuItemName}>
-                      {peer.videoTrack?.isMute() === false
-                        ? 'Mute video'
-                        : 'Unmute video'}
-                    </Text>
-                  </View>
-                </MenuItem>
-              ) : null}
-            </Menu>
           </View>
         );
-      }}
-      keyExtractor={(item) => item.peerID}
+      }
+
+      return (
+        <View style={[styles.itemWrapper, hmsRoomStyles.item]}>
+          <ParticipantsItem groupId={selectedGroupId} data={data.item} />
+        </View>
+      );
+    },
+    [selectedGroupId]
+  );
+
+  const _getItemType = React.useCallback(
+    (item: HMSPeer | { id: string; label: string }) =>
+      'id' in item ? 'header' : 'item',
+    []
+  );
+
+  const _onEndReached = React.useCallback(() => {
+    if (loading || !fetchedInitialDataRef.current || !mountedRef.current) {
+      return;
+    }
+
+    if (peerListIterator) {
+      setLoading(true);
+      peerListIterator
+        .next()
+        .then((peers: HMSPeer[]) => {
+          if (mountedRef.current) {
+            setLoading(false);
+            setOffStageData((prev) => [...prev, ...peers]);
+          }
+        })
+        .catch(() => {
+          if (mountedRef.current) {
+            setLoading(false);
+          }
+        });
+    }
+  }, [loading, peerListIterator]);
+  //#endregion Flaslist props
+
+  const searchTextExists = searchText.length > 0;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    emptyText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    stickyHeader: {
+      backgroundColor: theme.palette.surface_dim,
+      borderColor: theme.palette.border_bright,
+    },
+    item: {
+      borderColor: theme.palette.border_bright,
+    },
+  }));
+
+  if (!data || (searchTextExists && data.length <= 1)) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={[styles.emptyText, hmsRoomStyles.emptyText]}>
+          No results found...
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlashList
+      data={data}
+      estimatedItemSize={56}
+      contentContainerStyle={styles.list}
+      keyboardShouldPersistTaps="always"
+      ListFooterComponent={<ParticipantsListFooter loading={loading} />}
+      stickyHeaderIndices={stickyIndices}
+      keyExtractor={_keyExtractor}
+      renderItem={_renderItem}
+      getItemType={_getItemType}
+      onEndReached={
+        searchTextExists || !peerListIterator ? null : _onEndReached
+      }
+      onEndReachedThreshold={0.8}
     />
   );
 };
 
 const styles = StyleSheet.create({
-  participantItem: {
-    height: 68,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 4,
-  },
-  participantAvatar: {
-    height: 32,
-    width: 32,
-    borderRadius: 32,
-    backgroundColor: COLORS.PRIMARY.DEFAULT,
-    marginRight: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
+  list: {
+    paddingBottom: 32,
   },
-  participantAvatarText: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    fontFamily: 'Inter-Medium',
-  },
-  participantDescription: {
+  emptyContainer: {
     flex: 1,
-    flexDirection: 'column',
-  },
-  participantName: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 16,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    fontFamily: 'Inter-Medium',
-    textTransform: 'capitalize',
-  },
-  participantRole: {
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    fontFamily: 'Inter-Regular',
-    textTransform: 'capitalize',
-  },
-  participantSettings: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 12,
-    marginHorizontal: 6,
-  },
-  icon: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
-  participantsMenuContainer: {
-    backgroundColor: COLORS.SURFACE.LIGHT,
-  },
-  participantMenuItem: {
-    flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: Platform.OS === 'ios' ? 16 : 0,
-  },
-  participantMenuItemIcon: {
-    color: COLORS.WHITE,
-    paddingRight: 16,
-    height: 24,
+    justifyContent: 'center',
   },
-  participantMenuItemName: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
+  emptyText: {
     fontSize: 14,
     lineHeight: 20,
-    letterSpacing: 0.1,
-    fontFamily: 'Inter-Medium',
-    textTransform: 'capitalize',
+    letterSpacing: 0.25,
+  },
+  headerWrapper: {
+    borderWidth: 1,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
   },
-  error: {
-    color: COLORS.INDICATORS.ERROR,
+  itemWrapper: {
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
   },
 });

package/src/components/Participants/ParticipantsListFooter.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+
+export type ParticipantsListFooterProps = {
+  loading: boolean;
+};
+
+const _ParticipantsListFooter: React.FC<ParticipantsListFooterProps> = ({
+  loading
+}) => {
+  const { on_surface_high: onSurfaceHigh } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    footer: {
+      borderColor: theme.palette.border_bright,
+    },
+  }));
+
+  return (
+    <View style={[styles.footer, hmsRoomStyles.footer]}>
+      {loading ? (
+        <ActivityIndicator size={'small'} color={onSurfaceHigh} />
+      ) : null}
+    </View>
+  );
+};
+
+export const ParticipantsListFooter = React.memo(_ParticipantsListFooter);
+
+const styles = StyleSheet.create({
+  footer: {
+    width: '100%',
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
+    borderBottomRightRadius: 8,
+    borderBottomLeftRadius: 8,
+  },
+});

package/src/components/Participants/ParticipantsSeachInput.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { StyleSheet, Platform } from 'react-native';
 
-import { CustomInput } from '../CustomInput';
-import { COLORS } from '../../utils/theme';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../../hooks-util';
+import { SearchIcon } from '../../Icons';
+import { HMSTextInput } from '../HMSTextInput';
 
 type ParticipantsSearchInputProps = {
   searchText: string;
@@ -13,43 +13,45 @@ type ParticipantsSearchInputProps = {
 export const ParticipantsSearchInput: React.FC<
   ParticipantsSearchInputProps
 > = ({ searchText, setSearchText }) => {
+  const { on_surface_medium: onSurfaceMediumColor } = useHMSRoomColorPalette();
+
+  const textInputStyle = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+    borderColor: theme.palette.surface_default,
+  }));
+
   return (
-    <View>
-      <CustomInput
-        value={searchText}
-        onChangeText={setSearchText}
-        inputStyle={styles.participantsSearchInput}
-        placeholderTextColor={COLORS.TEXT.DISABLED}
-        placeholder="Find what you're looking for"
-      />
-      <Ionicons
-        name="search"
-        style={styles.participantsSearchInputIcon}
-        size={24}
-      />
-    </View>
+    <HMSTextInput
+      value={searchText}
+      onChangeText={setSearchText}
+      placeholder="Search for participants"
+      style={styles.input}
+      containerStyle={[styles.textInputContainer, textInputStyle]}
+      focusedContainerStyle={[styles.focusedTextInputContainer, textInputStyle]}
+      placeholderTextColor={onSurfaceMediumColor}
+      leftIcon={<SearchIcon style={styles.searchIcon} />}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  participantsSearchInput: {
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    borderColor: COLORS.BORDER.LIGHT,
+  focusedTextInputContainer: {
     borderWidth: 1,
-    width: '100%',
-    borderRadius: 8,
-    paddingVertical: 12,
-    paddingLeft: 48,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontFamily: 'Inter-Medium',
   },
-  participantsSearchInputIcon: {
-    position: 'absolute',
-    top: 12,
-    bottom: 12,
-    left: 16,
-    right: 16,
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
-    width: 24,
+  textInputContainer: {
+    borderWidth: 1,
+    flex: 0,
+    height: 40,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  input: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+  },
+  searchIcon: {
+    marginRight: 8,
+    alignSelf: 'center',
   },
 });

package/src/components/Participants/index.ts

@@ -1,5 +1,3 @@
-export * from './ParticipantsFilter';
-export * from './ParticipantsHeader';
 export * from './ParticipantsList';
 export * from './ParticipantsSeachInput';
-export * from './SearchableParticipantsView';
+export * from './MultiRoleParticipantsList';

package/src/components/PeerMinimizedView.tsx

@@ -13,7 +13,7 @@ export const usePeerMinimizedViewDimensions = () => {
   const canPublishVideo = useCanPublishVideo();
 
   const iconTakesSpace = 20 + 6; // Width + Right Margin
-  const totalWidth = 148;
+  const totalWidth = 128;
   const widthLessIconsWidth = totalWidth - 2 * iconTakesSpace;
 
   return {