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

package/src/components/Participants/ParticipantsList.tsx

@@ -1,65 +1,213 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
-import type { HMSLocalPeer, HMSRemotePeer } from '@100mslive/react-native-hms';
+import type { HMSPeer } from '@100mslive/react-native-hms';
 
-import { useHMSRoomStyle } from '../../hooks-util';
-import type {
-  ListItemUI,
-  ParticipantHandRaisedHeaderData,
-  ParticipantHeaderData,
+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 { ParticipantsListFooter } from './ParticipantsListFooter';
 
 export type ParticipantsListProps = {
-  data: ListItemUI[];
-  searchTextExists: boolean;
-  setExpandedGroups: React.Dispatch<React.SetStateAction<string[]>>;
+  searchText: string;
+  selectedGroupId: string;
+  onBackPress(): void;
 };
 
+const stickyIndices = [0];
+
 export const ParticipantsList: React.FC<ParticipantsListProps> = ({
-  data,
-  searchTextExists,
-  setExpandedGroups,
+  searchText,
+  selectedGroupId,
+  onBackPress,
 }) => {
-  const emptyTextStyles = useHMSRoomStyle((theme, typography) => ({
-    color: theme.palette.on_surface_medium,
-    fontFamily: `${typography.font_family}-SemiBold`,
-  }));
+  const mountedRef = React.useRef(true);
+  const fetchedInitialDataRef = React.useRef(false);
+  const hmsInstance = useHMSInstance();
+
+  // 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 finalDataForGroupId = React.useMemo(() => {
+    if (Array.isArray(dataForGroupId)) {
+      return dataForGroupId;
+    }
+
+    if (dataForGroupId && selectedGroupId === 'hand-raised') {
+      return Object.values(dataForGroupId).flat().filter(peer  => peer.isHandRaised);
+    }
+
+    return null;
+  }, [dataForGroupId, selectedGroupId]);
+
+  // Creating Header Data
+  const headerData = React.useMemo(() => {
+    return {
+      id: selectedGroupId,
+      label:
+        selectedGroupId === 'hand-raised' ? 'Hand Raised' : selectedGroupId,
+    };
+  }, [selectedGroupId]);
+
+  // Created List with Header Data as first item in list
+  const dataWithHeader = React.useMemo(
+    () => [headerData, ...(finalDataForGroupId ?? [])],
+    [finalDataForGroupId, headerData]
+  );
+
+  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);
+
+      peerListIterator
+        .next()
+        .then((peers: HMSPeer[]) => {
+          if (mounted) {
+            setLoading(false);
+            setOffStageData([headerData, ...peers]);
+            fetchedInitialDataRef.current = true;
+          }
+        })
+        .catch(() => {
+          if (mounted) {
+            setLoading(false);
+          }
+        });
+    }
+
+    return () => {
+      mounted = false;
+      mountedRef.current = false;
+    };
+  }, [headerData, peerListIterator]);
 
-  const _keyExtractor = React.useCallback((item: ListItemUI) => item.key, []);
+  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: ListItemUI }) => {
-      if ('label' in data.item.data) {
+    (data: { item: HMSPeer | { id: string; label: string } }) => {
+      if ('id' in data.item) {
         return (
-          <ParticipantsGroupHeader
-            data={
-              data.item as ListItemUI<
-                ParticipantHeaderData | ParticipantHandRaisedHeaderData
-              >
-            }
-            setExpandedGroups={setExpandedGroups}
-          />
+          <View style={hmsRoomStyles.stickyHeader}>
+            <View style={[styles.headerWrapper, hmsRoomStyles.stickyHeader]}>
+              <ParticipantsGroupHeader
+                id={data.item.id}
+                label={data.item.label}
+                expanded={true}
+                onBackPress={onBackPress}
+              />
+            </View>
+          </View>
         );
       }
 
       return (
-        <ParticipantsItem
-          data={data.item as ListItemUI<HMSLocalPeer | HMSRemotePeer>}
-        />
+        <View style={[styles.itemWrapper, hmsRoomStyles.item]}>
+          <ParticipantsItem groupId={selectedGroupId} data={data.item} />
+        </View>
       );
     },
-    [setExpandedGroups]
+    [selectedGroupId]
   );
 
-  const _getItemType = React.useCallback((item: ListItemUI) => item.type, []);
+  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;
 
-  if (searchTextExists && data.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, emptyTextStyles]}>
+        <Text style={[styles.emptyText, hmsRoomStyles.emptyText]}>
           No results found...
         </Text>
       </View>
@@ -72,9 +220,15 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
       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}
     />
   );
 };
@@ -93,4 +247,13 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.25,
   },
+  headerWrapper: {
+    borderWidth: 1,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  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

@@ -13,7 +13,7 @@ type ParticipantsSearchInputProps = {
 export const ParticipantsSearchInput: React.FC<
   ParticipantsSearchInputProps
 > = ({ searchText, setSearchText }) => {
-  const { on_surface_low: onSurfaceLowColor } = useHMSRoomColorPalette();
+  const { on_surface_medium: onSurfaceMediumColor } = useHMSRoomColorPalette();
 
   const textInputStyle = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.surface_default,
@@ -28,7 +28,7 @@ export const ParticipantsSearchInput: React.FC<
       style={styles.input}
       containerStyle={[styles.textInputContainer, textInputStyle]}
       focusedContainerStyle={[styles.focusedTextInputContainer, textInputStyle]}
-      placeholderTextColor={onSurfaceLowColor}
+      placeholderTextColor={onSurfaceMediumColor}
       leftIcon={<SearchIcon style={styles.searchIcon} />}
     />
   );

package/src/components/Participants/index.ts

@@ -1,2 +1,3 @@
 export * from './ParticipantsList';
 export * from './ParticipantsSeachInput';
+export * from './MultiRoleParticipantsList';

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -33,7 +33,7 @@ export const _AvatarView: React.FC<AvatarViewProps> = ({
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

package/src/components/PeerVideoTile/PeerAudioIndicator.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import LottieView from 'lottie-react-native';
 
 import { MicIcon } from '../../Icons';
-import { useHMSRoomStyle } from '../../hooks-util';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
 import type { RootState } from '../../redux';
 
 export interface PeerAudioIndicatorProps {
@@ -24,21 +24,26 @@ export const PeerAudioIndicator: React.FC<PeerAudioIndicatorProps> = ({
       ) >= 0
   );
 
-  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: theme.palette.secondary_dim,
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    iconWrapper: {
+      backgroundColor: theme.palette.secondary_dim,
+    },
+    icon: {
+      tintColor: theme.palette.on_secondary_high,
+    },
   }));
 
   if (isMuted) {
     return (
-      <View style={[styles.iconWrapper, iconWrapperStyles]}>
-        <MicIcon muted={true} style={styles.icon} />
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <MicIcon muted={true} style={[styles.icon, hmsRoomStyles.icon]} />
       </View>
     );
   }
 
   if (activeSpeaker) {
     return (
-      <View style={[styles.speakerIconWrapper, iconWrapperStyles]}>
+      <View style={[styles.speakerIconWrapper, hmsRoomStyles.iconWrapper]}>
         <LottieView
           style={styles.speakerIcon}
           source={require('../../assets/audio-level-white.json')}

package/src/components/PeerVideoTile/PeerMetadata.tsx

@@ -3,31 +3,40 @@ import { StyleSheet, View } from 'react-native';
 
 import { parseMetadata } from '../../utils/functions';
 import { BRBIcon, HandIcon } from '../../Icons';
-import { useHMSRoomStyle } from '../../hooks-util';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
 
 export interface PeerMetadataProps {
   metadata: string | undefined;
+  isHandRaised: boolean;
 }
 
-export const PeerMetadata: React.FC<PeerMetadataProps> = ({ metadata }) => {
-  const parsedMetadata = parseMetadata(metadata);
-
-  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: theme.palette.secondary_dim,
+export const PeerMetadata: React.FC<PeerMetadataProps> = ({
+  metadata,
+  isHandRaised,
+}) => {
+  const isBRBOn = !!parseMetadata(metadata).isBRBOn;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    iconWrapper: {
+      backgroundColor: theme.palette.secondary_dim,
+    },
+    icon: {
+      tintColor: theme.palette.on_secondary_high,
+    },
   }));
 
-  if (parsedMetadata.isBRBOn) {
+  if (isBRBOn) {
     return (
-      <View style={[styles.iconWrapper, iconWrapperStyles]}>
-        <BRBIcon />
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <BRBIcon style={hmsRoomStyles.icon} />
       </View>
     );
   }
 
-  if (parsedMetadata.isHandRaised) {
+  if (isHandRaised) {
     return (
-      <View style={[styles.iconWrapper, iconWrapperStyles]}>
-        <HandIcon />
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <HandIcon style={hmsRoomStyles.icon} />
       </View>
     );
   }

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -18,6 +18,7 @@ import { ThreeDotsIcon } from '../../Icons';
 import { hexToRgbA } from '../../utils/theme';
 import { PeerNameAndNetwork } from './PeerNameAndNetwork';
 import { UnmountAfterDelay } from '../UnmountAfterDelay';
+import { PipModes } from '../../utils/types';
 import type { PeerTrackNode } from '../../utils/types';
 import { isTileOnSpotlight } from '../../utils/functions';
 import {
@@ -47,6 +48,10 @@ export const _PeerVideoTileView = React.forwardRef<
     > | null>(null);
     const [mounted, setMounted] = React.useState(true);
 
+    const isPipModeActive = useSelector(
+      (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+    );
+
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
         tileVideoTrack: peerTrackNode.track,
@@ -93,7 +98,11 @@ export const _PeerVideoTileView = React.forwardRef<
       return (allowed && allowed.length > 0) ?? false;
     });
 
-    const localPeerPermissions = useSelector((state: RootState) => {
+    const canTakeActionOnPeer = useSelector((state: RootState) => {
+      if (peer.isLocal) {
+        return true;
+      }
+
       const permissions = state.hmsStates.localPeer?.role?.permissions;
       return (
         permissions &&
@@ -126,6 +135,13 @@ export const _PeerVideoTileView = React.forwardRef<
       track.type === HMSTrackType.VIDEO &&
       track.isMute() === false;
 
+    const hide3DotsButton =
+      !onMoreOptionsPress || // If button press handler is not available, Or
+      isPipModeActive || // If Pip Window is active, Or
+      (track && track?.source !== HMSTrackSource.REGULAR) || // If track is non-regular, like screen share, Or
+      !canTakeActionOnPeer || // If local peer can't take action on peer, Or
+      !allowedToPublish; // If local peer can't publish tracks
+
     return (
       <View style={styles.container}>
         <AvatarView
@@ -133,7 +149,7 @@ export const _PeerVideoTileView = React.forwardRef<
           avatarContainerStyles={
             insetMode ? hmsRoomStyles.avatarContainer : null
           }
-          isInset={insetMode}
+          isInset={insetMode || isPipModeActive}
           videoView={
             showingVideoTrack ? (
               <VideoView
@@ -154,7 +170,10 @@ export const _PeerVideoTileView = React.forwardRef<
         />
 
         {/* Handling Peer Metadata */}
-        <PeerMetadata metadata={peer.metadata} />
+        <PeerMetadata
+          metadata={peer.metadata}
+          isHandRaised={peer.isHandRaised}
+        />
 
         {/* Handling Peer Audio Mute indicator */}
         {screenShareTile && showingVideoTrack ? (
@@ -164,7 +183,7 @@ export const _PeerVideoTileView = React.forwardRef<
         ) : null}
 
         {/* Handling showing Peer name */}
-        {insetMode ? null : (
+        {(insetMode || isPipModeActive) ? null : (
           <PeerNameAndNetwork
             name={peer.name}
             isLocal={peer.isLocal}
@@ -179,9 +198,7 @@ export const _PeerVideoTileView = React.forwardRef<
         ) : null}
 
         {/* 3 dots option menu */}
-        {!onMoreOptionsPress ||
-        (track &&
-          track?.source !== HMSTrackSource.REGULAR) ? null : insetMode ? (
+        {hide3DotsButton ? null : insetMode ? (
           <UnmountAfterDelay
             ref={unmountAfterDelayRef}
             visible={mounted}
@@ -196,7 +213,7 @@ export const _PeerVideoTileView = React.forwardRef<
               <ThreeDotsIcon stack="vertical" style={styles.icon} />
             </PressableIcon>
           </UnmountAfterDelay>
-        ) : !allowedToPublish || !localPeerPermissions ? null : (
+        ) : (
           <PressableIcon
             activeOpacity={0.7}
             style={[styles.iconWrapper, hmsRoomStyles.iconWrapperStyles]}

package/src/components/Preview.tsx

@@ -23,20 +23,17 @@ import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
 import { useCanPublishVideo } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
-import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+} from '../hooks-util';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+import { hexToRgbA } from '../utils/theme';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
 
-const gradientColorShades = [
-  '#000000',
-  'rgba(0, 0, 0, 0.9)',
-  'rgba(0, 0, 0, 0.7)',
-  'rgba(0, 0, 0, 0.1)',
-  'rgba(0, 0, 0, 0.05)',
-  'rgba(0, 0, 0, 0)',
-];
 const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
 
 export const Preview = ({
@@ -49,6 +46,23 @@ export const Preview = ({
   const canPublishVideo = useCanPublishVideo();
   const isHLSViewer = useIsHLSViewer();
 
+  const { background_dim } = useHMSRoomColorPalette();
+
+  const gradientColorShades = React.useMemo(
+    () =>
+      background_dim
+        ? [
+            hexToRgbA(background_dim, 1),
+            hexToRgbA(background_dim, 0.9),
+            hexToRgbA(background_dim, 0.7),
+            hexToRgbA(background_dim, 0.1),
+            hexToRgbA(background_dim, 0.05),
+            hexToRgbA(background_dim, 0),
+          ]
+        : [],
+    [background_dim]
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet(
     (theme) => ({
       container: {

package/src/components/PreviewForRoleChangeModal.tsx

@@ -138,12 +138,7 @@ const _PreviewForRoleChangeModal = () => {
       }
 
       // lower hand
-      const newMetadata = {
-        ...localPeerMetadata,
-        isHandRaised: false,
-        isBRBOn: localPeerMetadata.isBRBOn,
-      };
-      await hmsActions.changeMetadata(newMetadata);
+      await hmsActions.lowerLocalPeerHand();
     }
   };