@100mslive/react-native-room-kit 0.0.1

package/src/components/PIPView.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import type { PeerTrackNode } from '../utils/types';
+
+import PeerDisplayView from './PeerDisplayView';
+import { getTrackForPIPView } from '../utils/functions';
+
+type PIPViewProps = {
+  pairedPeers: PeerTrackNode[][];
+};
+
+const PIPView: React.FC<PIPViewProps> = ({ pairedPeers }) => {
+  const preferedPeerTrack = getTrackForPIPView(pairedPeers);
+
+  // If no Peer is available
+  if (!preferedPeerTrack?.peer) {
+    return null;
+  }
+
+  return (
+    <PeerDisplayView
+      isLocal={preferedPeerTrack?.peer?.isLocal}
+      peer={preferedPeerTrack?.peer}
+      videoTrack={preferedPeerTrack?.track}
+      isDegraded={preferedPeerTrack?.isDegraded}
+    />
+  );
+};
+
+export default PIPView;

package/src/components/Participants/ParticipantsFilter.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+import { Menu, MenuItem, MenuDivider } from '../MenuModal';
+import { COLORS } from '../../utils/theme';
+import type { RootState } from '../../redux';
+import { Platform } from 'react-native';
+
+export const ParticipantFilter = ({
+  filter,
+  setFilter,
+}: {
+  filter?: string;
+  setFilter: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  const roles = useSelector((state: RootState) => state.hmsStates.roles);
+
+  const [visible, setVisible] = React.useState(false);
+
+  const hideMenu = () => setVisible(false);
+  const showMenu = () => setVisible(true);
+
+  return (
+    <Menu
+      visible={visible}
+      anchor={
+        <TouchableOpacity
+          style={styles.participantFilterContainer}
+          onPress={showMenu}
+        >
+          <Text style={styles.participantFilterText} numberOfLines={1}>
+            {filter}
+          </Text>
+          <MaterialIcons
+            name={visible ? 'arrow-drop-up' : 'arrow-drop-down'}
+            style={styles.participantFilterIcon}
+            size={24}
+          />
+        </TouchableOpacity>
+      }
+      onRequestClose={hideMenu}
+      style={styles.participantsMenuContainer}
+    >
+      <MenuItem
+        onPress={() => {
+          hideMenu();
+          setFilter('everyone');
+        }}
+      >
+        <View style={styles.participantMenuItem}>
+          <Ionicons
+            name="people-outline"
+            style={styles.participantMenuItemIcon}
+            size={20}
+          />
+          <Text style={styles.participantMenuItemName}>Everyone</Text>
+        </View>
+      </MenuItem>
+      <MenuItem
+        onPress={() => {
+          hideMenu();
+          setFilter('raised hand');
+        }}
+      >
+        <View style={styles.participantMenuItem}>
+          <Ionicons
+            name="hand-left-outline"
+            style={styles.participantMenuItemIcon}
+            size={20}
+          />
+          <Text style={styles.participantMenuItemName}>Raised Hand</Text>
+        </View>
+      </MenuItem>
+      <MenuDivider color={COLORS.BORDER.LIGHT} />
+      {roles?.map((knownRole: any) => {
+        return (
+          <MenuItem
+            onPress={() => {
+              hideMenu();
+              setFilter(knownRole?.name!);
+            }}
+            key={knownRole.name}
+          >
+            <View style={styles.participantMenuItem}>
+              <Text style={styles.participantMenuItemName}>
+                {knownRole?.name}
+              </Text>
+            </View>
+          </MenuItem>
+        );
+      })}
+    </Menu>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantFilterContainer: {
+    padding: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: 120,
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.LIGHT,
+    borderRadius: 8,
+  },
+  participantFilterText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginRight: 12,
+    textTransform: 'capitalize',
+  },
+  participantFilterIcon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    position: 'absolute',
+    right: 0,
+  },
+  participantsMenuContainer: {
+    backgroundColor: COLORS.SURFACE.LIGHT,
+  },
+  participantMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: Platform.OS === 'ios' ? 16 : 0,
+  },
+  participantMenuItemIcon: {
+    color: COLORS.WHITE,
+    paddingRight: 16,
+    height: 24,
+  },
+  participantMenuItemName: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+});

package/src/components/Participants/ParticipantsHeader.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { COLORS } from '../../utils/theme';
+import { ParticipantFilter } from './ParticipantsFilter';
+
+type ParticipantsHeaderProps = {
+  participantsCount: number;
+  filter: string;
+  setFilter: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const ParticipantsHeader: React.FC<ParticipantsHeaderProps> = ({
+  participantsCount,
+  filter,
+  setFilter,
+}) => {
+  return (
+    <View style={styles.participantsHeaderContainer}>
+      <Text style={styles.participantsHeading}>Participants</Text>
+
+      <ParticipantFilter filter={filter} setFilter={setFilter} />
+
+      <View style={styles.peerCountContainer}>
+        <Text style={styles.peerCount}>{participantsCount}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantsHeaderContainer: {
+    height: 48,
+    width: '80%',
+    marginBottom: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  participantsHeading: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    paddingRight: 12,
+  },
+  peerCountContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: COLORS.BORDER.ACCENT,
+    borderWidth: 2,
+    borderRadius: 30,
+    marginLeft: 12,
+    height: 30,
+    paddingHorizontal: 6,
+  },
+  peerCount: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+});

package/src/components/Participants/ParticipantsList.tsx

@@ -0,0 +1,331 @@
+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 { 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';
+
+export type ParticipantsListProps = {
+  data: (HMSLocalPeer | HMSRemotePeer)[];
+};
+
+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);
+
+  const hideMenu = () => setVisible(-1);
+  const showMenu = (index: number) => setVisible(index);
+
+  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 onChangeRolePress = (peer: HMSPeer) => {
+    hideMenu();
+    setTimeout(() => {
+      batch(() => {
+        dispatch(setPeerToUpdate(peer));
+        setModalVisible(ModalTypes.CHANGE_ROLE, true);
+      });
+    }, 500);
+  };
+
+  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 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));
+    }
+  };
+
+  const onSetVolumePress = (peer: HMSPeer) => {
+    hideMenu();
+    setTimeout(() => {
+      batch(() => {
+        dispatch(setPeerToUpdate(peer));
+        setModalVisible(ModalTypes.VOLUME, true);
+      });
+    }, 500);
+  };
+
+  return (
+    <FlatList
+      data={data}
+      initialNumToRender={2}
+      maxToRenderPerBatch={3}
+      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}
+                {peer.isLocal && ' (You)'}
+              </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}
+              {peer.isLocal === false && !!peer.audioTrack ? (
+                <MenuItem onPress={() => onSetVolumePress(peer)}>
+                  <View style={styles.participantMenuItem}>
+                    <Ionicons
+                      name="volume-high-outline"
+                      style={styles.participantMenuItemIcon}
+                      size={24}
+                    />
+                    <Text style={styles.participantMenuItemName}>
+                      Set Volume
+                    </Text>
+                  </View>
+                </MenuItem>
+              ) : null}
+            </Menu>
+          </View>
+        );
+      }}
+      keyExtractor={(item) => item.peerID}
+    />
+  );
+};
+
+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',
+  },
+  participantDescription: {
+    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,
+  },
+  participantMenuItemName: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+  error: {
+    color: COLORS.INDICATORS.ERROR,
+  },
+});

package/src/components/Participants/ParticipantsSeachInput.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import { CustomInput } from '../CustomInput';
+import { COLORS } from '../../utils/theme';
+
+type ParticipantsSearchInputProps = {
+  searchText: string;
+  setSearchText(text: string): void;
+};
+
+export const ParticipantsSearchInput: React.FC<
+  ParticipantsSearchInputProps
+> = ({ searchText, setSearchText }) => {
+  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>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantsSearchInput: {
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+    borderColor: COLORS.BORDER.LIGHT,
+    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,
+  },
+});

package/src/components/Participants/SearchableParticipantsView.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { useFilteredParticipants } from '../../hooks-util';
+import { ParticipantsList } from './ParticipantsList';
+import { ParticipantsSearchInput } from './ParticipantsSeachInput';
+
+export const SearchableParticipantsView: React.FC = () => {
+  const { filteredParticipants, searchText, setSearchText } =
+    useFilteredParticipants();
+
+  return (
+    <>
+      <ParticipantsSearchInput
+        searchText={searchText}
+        setSearchText={setSearchText}
+      />
+
+      <ParticipantsList data={filteredParticipants} />
+    </>
+  );
+};

package/src/components/Participants/index.ts

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

package/src/components/ParticipantsModal.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useFilteredParticipants } from '../hooks-util';
+import {
+  ParticipantsHeader,
+  ParticipantsList,
+  ParticipantsSearchInput,
+} from './Participants';
+
+type ParticipantsModalProps = {};
+
+export const ParticipantsModal: React.FC<ParticipantsModalProps> = ({}) => {
+  const {
+    selectedFilter,
+    changeFilter,
+    allParticipants,
+    filteredParticipants,
+    searchText,
+    setSearchText,
+  } = useFilteredParticipants();
+
+  return (
+    <View style={styles.participantContainer}>
+      <ParticipantsHeader
+        filter={selectedFilter}
+        setFilter={changeFilter}
+        participantsCount={allParticipants.length}
+      />
+
+      <ParticipantsSearchInput
+        searchText={searchText}
+        setSearchText={setSearchText}
+      />
+
+      <ParticipantsList data={filteredParticipants} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantContainer: {
+    height: '100%',
+    width: '100%',
+  },
+});