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

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -0,0 +1,262 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import type { HMSLocalPeer, HMSRemotePeer } from '@100mslive/react-native-hms';
+
+import {
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import { CameraIcon, MicIcon, PersonIcon } from '../../Icons';
+import { ParticipantsItemOption } from './ParticipantsItemOption';
+import type { RootState } from '../../redux';
+import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
+import { parseMetadata } from '../../utils/functions';
+
+interface ParticipantsItemOptionsProps {
+  insideHandRaiseGroup: boolean;
+  peer: HMSLocalPeer | HMSRemotePeer;
+  onItemPress(): void;
+}
+
+const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
+  peer,
+  onItemPress,
+  insideHandRaiseGroup = false,
+}) => {
+  const hmsInstance = useHMSInstance();
+
+  // Local Peer Permissions related states
+  const localPeerPermissions = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions
+  );
+
+  const localPeerCanMuteTrack =
+    localPeerPermissions && localPeerPermissions.mute;
+  const localPeerCanUnmuteTrack =
+    localPeerPermissions && localPeerPermissions.unmute;
+  const localPeerCanRemove =
+    localPeerPermissions && localPeerPermissions.removeOthers;
+
+  // Selected Peer Permissions related states
+  const peerCanPublishAudio = selectCanPublishTrackForRole(peer.role!, 'audio');
+  const peerCanPublishVideo = selectCanPublishTrackForRole(peer.role!, 'video');
+
+  // On Stage related states
+  const onStageRoleStr = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.on_stage_role
+  );
+  const onStageRole = useSelector((state: RootState) => {
+    const roles = state.hmsStates.roles;
+    return roles.find((role) => role.name === onStageRoleStr);
+  });
+  const offStageRoles = useHMSLayoutConfig((layoutConfig) => {
+    return layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+      ?.off_stage_roles;
+  });
+  const firstOffStageRoleStr =
+    offStageRoles && offStageRoles.length > 0 ? offStageRoles[0] : undefined;
+  const prevRoleStr = parseMetadata(peer.metadata).prevRole;
+
+  const offStageRole = useSelector((state: RootState) => {
+    const roles = state.hmsStates.roles;
+    const offStageRoleStr = prevRoleStr || firstOffStageRoleStr;
+    return roles.find((role) => role.name === offStageRoleStr);
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    divider: {
+      backgroundColor: theme.palette.border_bright,
+    },
+    removeParticipant: {
+      color: theme.palette.alert_error_default,
+    },
+  }));
+
+  const handleBringOnStagePress = () => {
+    if (onStageRole) {
+      hmsInstance
+        .changeRoleOfPeer(peer, onStageRole)
+        .then((d) => console.log('Bring on Stage Success: ', d))
+        .catch((e) => console.log('Bring on Stage Error: ', e));
+    } else {
+      console.warn(`onStageRole '${onStageRoleStr}' is ${onStageRole}`);
+    }
+    onItemPress();
+  };
+
+  const handleAudioTogglePress = () => {
+    if (peer.audioTrack) {
+      hmsInstance
+        .changeTrackState(peer.audioTrack, !peer.audioTrack.isMute())
+        .then((d) => console.log('Toggle Video Success: ', d))
+        .catch((e) => console.log('Toggle Video Error: ', e));
+    }
+    onItemPress();
+  };
+
+  const handleVideoTogglePress = () => {
+    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));
+    }
+    onItemPress();
+  };
+
+  const handleRemoveFromStagePress = () => {
+    if (offStageRole) {
+      hmsInstance
+        .changeRoleOfPeer(peer, offStageRole, true)
+        .then((d) => console.log('Remove from Stage Success: ', d))
+        .catch((e) => console.log('Remove from Stage Error: ', e));
+    } else {
+      console.warn(
+        `offStageRole '${
+          prevRoleStr || firstOffStageRoleStr
+        }' is ${offStageRole}`
+      );
+    }
+    onItemPress();
+  };
+
+  const handleRemoveParticipantPress = () => {
+    hmsInstance
+      .removePeer(peer, 'removed from room')
+      .then((d) => console.log('Remove Peer Success: ', d))
+      .catch((e) => console.log('Remove Peer Error: ', e));
+    onItemPress();
+  };
+
+  const showMuteAudioOption =
+    !insideHandRaiseGroup &&
+    localPeerCanMuteTrack &&
+    peerCanPublishAudio &&
+    peer.audioTrack?.isMute() === false;
+
+  const showUnmuteAudioOption =
+    !insideHandRaiseGroup &&
+    localPeerCanUnmuteTrack &&
+    peerCanPublishAudio &&
+    peer.audioTrack?.isMute();
+
+  const showMuteVideoOption =
+    !insideHandRaiseGroup &&
+    localPeerCanMuteTrack &&
+    peerCanPublishVideo &&
+    peer.videoTrack?.isMute() === false;
+
+  const showUnmuteVideoOption =
+    !insideHandRaiseGroup &&
+    localPeerCanUnmuteTrack &&
+    peerCanPublishVideo &&
+    peer.videoTrack?.isMute();
+
+  const showBringOnStageOptions =
+    insideHandRaiseGroup &&
+    offStageRoles &&
+    offStageRoles.includes(peer.role?.name || '') &&
+    parseMetadata(peer.metadata).isHandRaised;
+
+  return (
+    <>
+      {[
+        {
+          id: 'bring-on-stage',
+          icon: (
+            <PersonIcon type="rectangle" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Bring on Stage',
+          pressHandler: handleBringOnStagePress,
+          isActive: false,
+          hide: !showBringOnStageOptions,
+        },
+        {
+          id: 'mute-audio',
+          icon: <MicIcon muted={true} style={{ width: 20, height: 20 }} />,
+          label: 'Mute Audio',
+          pressHandler: handleAudioTogglePress,
+          isActive: false,
+          hide: !showMuteAudioOption,
+        },
+        {
+          id: 'unmute-audio',
+          icon: <MicIcon muted={false} style={{ width: 20, height: 20 }} />,
+          label: 'Unmute Audio',
+          pressHandler: handleAudioTogglePress,
+          isActive: false,
+          hide: !showUnmuteAudioOption,
+        },
+        {
+          id: 'mute-video',
+          icon: <CameraIcon muted={true} style={{ width: 20, height: 20 }} />,
+          label: 'Mute Video',
+          pressHandler: handleVideoTogglePress,
+          isActive: false,
+          hide: !showMuteVideoOption,
+        },
+        {
+          id: 'unmute-video',
+          icon: <CameraIcon muted={false} style={{ width: 20, height: 20 }} />,
+          label: 'Unmute Video',
+          pressHandler: handleVideoTogglePress,
+          isActive: false,
+          hide: !showUnmuteVideoOption,
+        },
+        {
+          id: 'remove-from-stage',
+          icon: (
+            <PersonIcon type="rectangle" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Remove from Stage',
+          pressHandler: handleRemoveFromStagePress,
+          isActive: false,
+          hide: Boolean(!onStageRoleStr || peer.role?.name !== onStageRoleStr),
+        },
+        {
+          id: 'remove-participant',
+          icon: <PersonIcon type="left" style={{ width: 20, height: 20 }} />,
+          label: 'Remove Participant',
+          pressHandler: handleRemoveParticipantPress,
+          style: null,
+          labelStyle: hmsRoomStyles.removeParticipant,
+          isActive: false,
+          hide: !localPeerCanRemove,
+        },
+      ]
+        .filter((item) => !item.hide)
+        .map((item, idx) => {
+          const isFirst = idx === 0;
+
+          return (
+            <React.Fragment key={item.id}>
+              {isFirst ? null : (
+                <View style={[styles.divider, hmsRoomStyles.divider]} />
+              )}
+
+              <ParticipantsItemOption
+                label={item.label}
+                onPress={item.pressHandler}
+                icon={item.icon}
+                style={item.style}
+                labelStyle={item.labelStyle}
+              />
+            </React.Fragment>
+          );
+        })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: '100%',
+  },
+});
+
+export const ParticipantsItemOptions = React.memo(_ParticipantsItemOptions);

package/src/components/Participants/ParticipantsList.tsx

@@ -1,306 +1,96 @@
 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 { HMSLocalPeer, HMSRemotePeer } 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 type { RootState } from '../../redux';
-import { useHMSInstance, useModalType } from '../../hooks-util';
-import { setPeerToUpdate } from '../../redux/actions';
-import { ModalTypes } from '../../utils/types';
+import { useHMSRoomStyle } from '../../hooks-util';
+import type {
+  ListItemUI,
+  ParticipantHandRaisedHeaderData,
+  ParticipantHeaderData,
+} from '../../hooks-util';
+import { ParticipantsItem } from './ParticipantsItem';
+import { ParticipantsGroupHeader } from './ParticipantsGroupHeader';
 
 export type ParticipantsListProps = {
-  data: (HMSLocalPeer | HMSRemotePeer)[];
+  data: ListItemUI[];
+  searchTextExists: boolean;
+  setExpandedGroups: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
-export const ParticipantsList: React.FC<ParticipantsListProps> = ({ data }) => {
-  const hmsInstance = useHMSInstance();
-  const dispatch = useDispatch();
-  const localPeerPermissions = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.role?.permissions
-  );
-  const { handleModalVisibleType: setModalVisible } = useModalType();
-
-  const [visible, setVisible] = React.useState(-1);
+export const ParticipantsList: React.FC<ParticipantsListProps> = ({
+  data,
+  searchTextExists,
+  setExpandedGroups,
+}) => {
+  const emptyTextStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_medium,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
 
-  const hideMenu = () => setVisible(-1);
-  const showMenu = (index: number) => setVisible(index);
+  const _keyExtractor = React.useCallback((item: ListItemUI) => item.key, []);
 
-  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);
-      });
-  };
-
-  const onChangeNamePress = (peer: HMSPeer) => {
-    hideMenu();
-    setTimeout(() => {
-      batch(() => {
-        dispatch(setPeerToUpdate(peer));
-        setModalVisible(ModalTypes.CHANGE_NAME, true);
-      });
-    }, 500);
-  };
+  const _renderItem = React.useCallback(
+    (data: { item: ListItemUI }) => {
+      if ('label' in data.item.data) {
+        return (
+          <ParticipantsGroupHeader
+            data={
+              data.item as ListItemUI<
+                ParticipantHeaderData | ParticipantHandRaisedHeaderData
+              >
+            }
+            setExpandedGroups={setExpandedGroups}
+          />
+        );
+      }
 
-  const onChangeRolePress = (peer: HMSPeer) => {
-    hideMenu();
-    setTimeout(() => {
-      batch(() => {
-        dispatch(setPeerToUpdate(peer));
-        setModalVisible(ModalTypes.CHANGE_ROLE, true);
-      });
-    }, 500);
-  };
+      return (
+        <ParticipantsItem
+          data={data.item as ListItemUI<HMSLocalPeer | HMSRemotePeer>}
+        />
+      );
+    },
+    [setExpandedGroups]
+  );
 
-  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 _getItemType = React.useCallback((item: ListItemUI) => item.type, []);
 
-  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));
-    }
-  };
+  if (searchTextExists && data.length <= 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={[styles.emptyText, emptyTextStyles]}>
+          No results found...
+        </Text>
+      </View>
+    );
+  }
 
   return (
-    <FlatList
+    <FlashList
       data={data}
-      initialNumToRender={2}
-      maxToRenderPerBatch={3}
+      estimatedItemSize={56}
+      contentContainerStyle={styles.list}
       keyboardShouldPersistTaps="always"
-      windowSize={11}
-      renderItem={({ item, index }) => {
-        const peer = 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>
-            <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}
+      keyExtractor={_keyExtractor}
+      renderItem={_renderItem}
+      getItemType={_getItemType}
     />
   );
 };
 
 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',
-  },
-  participantAvatarText: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    fontFamily: 'Inter-Medium',
+  list: {
+    paddingBottom: 32,
   },
-  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',
-  },
-  error: {
-    color: COLORS.INDICATORS.ERROR,
+    letterSpacing: 0.25,
   },
 });