@100mslive/roomkit-react 0.1.15 → 0.1.16

package/src/Prebuilt/components/Footer/{ParticipantList.jsx → ParticipantList.tsx}

@@ -1,6 +1,8 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
+  HMSPeer,
+  HMSRoleName,
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
   selectIsLargeRoom,
@@ -12,39 +14,45 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import {
-  ChangeRoleIcon,
-  HandIcon,
-  MicOffIcon,
-  PeopleIcon,
-  PeopleRemoveIcon,
-  SearchIcon,
-  VerticalMenuIcon,
-} from '@100mslive/react-icons';
+import { ChangeRoleIcon, HandIcon, MicOffIcon, PeopleIcon, SearchIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
-import { ToastManager } from '../Toast/ToastManager';
+import { RemoveParticipant } from '../RemoveParticipant';
 import { RoleAccordion } from './RoleAccordion';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import {
+  ConferencingScreenElements,
+  useRoomLayoutConferencingScreen,
+} from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
+// @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ParticipantList = ({ offStageRoles = [], onActive }) => {
-  const [filter, setFilter] = useState();
+export const ParticipantList = ({
+  offStageRoles = [],
+  onActive,
+}: {
+  offStageRoles: HMSRoleName[];
+  onActive: (role: string) => void;
+}) => {
+  const [filter, setFilter] = useState<{ search?: string } | undefined>();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
-  const peersOrderedByRoles = {};
+  const peersOrderedByRoles: Record<string, HMSPeer[]> = {};
 
   const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
 
   participants.forEach(participant => {
-    if (peersOrderedByRoles[participant.roleName] === undefined) {
-      peersOrderedByRoles[participant.roleName] = [];
+    if (participant.roleName) {
+      if (peersOrderedByRoles[participant.roleName] === undefined) {
+        peersOrderedByRoles[participant.roleName] = [];
+      }
+      peersOrderedByRoles[participant.roleName].push(participant);
     }
-    peersOrderedByRoles[participant.roleName].push(participant);
   });
 
   // prefill off_stage roles of large rooms to load more peers
@@ -56,7 +64,7 @@ export const ParticipantList = ({ offStageRoles = [], onActive }) => {
     });
   }
 
-  const onSearch = useCallback(value => {
+  const onSearch = useCallback((value: string) => {
     setFilter(filterValue => {
       if (!filterValue) {
         filterValue = {};
@@ -71,22 +79,34 @@ export const ParticipantList = ({ offStageRoles = [], onActive }) => {
 
   return (
     <Fragment>
-      <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
+      <Flex
+        direction="column"
+        css={{
+          size: '100%',
+          gap: '$4',
+        }}
+      >
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
-        {participants.length === 0 ? (
-          <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>
-            <Text variant="sm">{!filter ? 'No participants' : 'No matching participants'}</Text>
-          </Flex>
-        ) : null}
         <VirtualizedParticipants
           peersOrderedByRoles={peersOrderedByRoles}
           handRaisedList={handRaisedPeers}
-          isConnected={isConnected}
+          isConnected={!!isConnected}
           filter={filter}
           offStageRoles={offStageRoles}
           isLargeRoom={isLargeRoom}
           onActive={onActive}
-        />
+        >
+          {participants.length === 0 ? (
+            <Flex
+              align="center"
+              justify="center"
+              className="emptyParticipants"
+              css={{ w: '100%', p: '$8 0', display: 'none' }}
+            >
+              <Text variant="sm">{!filter ? 'No participants' : 'No matching participants'}</Text>
+            </Flex>
+          ) : null}
+        </VirtualizedParticipants>
       </Flex>
     </Fragment>
   );
@@ -123,6 +143,44 @@ export const ParticipantCount = () => {
   );
 };
 
+export const Participant = ({
+  peer,
+  isConnected,
+  style,
+}: {
+  peer: HMSPeer;
+  isConnected: boolean;
+  style: React.CSSProperties;
+}) => {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  return (
+    <Flex
+      key={peer.id}
+      css={{
+        w: '100%',
+        p: '$4 $8',
+        pr: '$6',
+        h: '$16',
+        '&:hover .participant_item': { display: 'flex' },
+      }}
+      align="center"
+      justify="between"
+      data-testid={'participant_' + peer.name}
+      style={style}
+    >
+      <Text
+        variant="sm"
+        css={{ ...textEllipsis('100%'), flex: '1 1 0', mr: '$8', fontWeight: '$semiBold', color: '$on_surface_high' }}
+      >
+        {peer.name} {localPeerId === peer.id ? '(You)' : ''}
+      </Text>
+      {isConnected && peer.roleName ? (
+        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
+      ) : null}
+    </Flex>
+  );
+};
+
 const VirtualizedParticipants = ({
   peersOrderedByRoles = {},
   isConnected,
@@ -131,6 +189,16 @@ const VirtualizedParticipants = ({
   offStageRoles,
   isLargeRoom,
   onActive,
+  children,
+}: {
+  peersOrderedByRoles: Record<string, HMSPeer[]>;
+  isConnected: boolean;
+  filter: undefined | { search?: string };
+  handRaisedList: HMSPeer[];
+  offStageRoles: HMSRoleName[];
+  isLargeRoom: boolean;
+  onActive: (role: string) => void;
+  children: React.ReactNode;
 }) => {
   return (
     <Flex
@@ -142,6 +210,9 @@ const VirtualizedParticipants = ({
         pr: '$10',
         mr: '-$10',
         flex: '1 1 0',
+        '& > div:empty ~ .emptyParticipants': {
+          display: 'flex',
+        },
       }}
     >
       <Accordion.Root type={isLargeRoom ? 'single' : 'multiple'} collapsible>
@@ -167,36 +238,7 @@ const VirtualizedParticipants = ({
           />
         ))}
       </Accordion.Root>
-    </Flex>
-  );
-};
-
-export const Participant = ({ peer, isConnected, style }) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  return (
-    <Flex
-      key={peer.id}
-      css={{
-        w: '100%',
-        p: '$4 $8',
-        pr: '$6',
-        h: '$16',
-        '&:hover .participant_item': { display: 'flex' },
-      }}
-      align="center"
-      justify="between"
-      data-testid={'participant_' + peer.name}
-      style={style}
-    >
-      <Text
-        variant="sm"
-        css={{ ...textEllipsis('100%'), flex: '1 1 0', mr: '$8', fontWeight: '$semiBold', color: '$on_surface_high' }}
-      >
-        {peer.name} {localPeerId === peer.id ? '(You)' : ''}
-      </Text>
-      {isConnected ? (
-        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
-      ) : null}
+      {children}
     </Flex>
   );
 };
@@ -204,78 +246,86 @@ export const Participant = ({ peer, isConnected, style }) => {
 /**
  * shows settings to change for a participant like changing their role
  */
-const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
-  const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
-  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_exp } = elements || {};
-  const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
-  const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
+const ParticipantActions = React.memo(
+  ({ peerId, role, isLocal }: { peerId: string; role: string; isLocal: boolean }) => {
+    const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
+    const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
+    const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+    const { elements } = useRoomLayoutConferencingScreen();
+    const { on_stage_exp } = elements || {};
+    const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
+    const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
 
-  return (
-    <Flex
-      align="center"
-      css={{
-        flexShrink: 0,
-        gap: '$8',
-      }}
-    >
-      <ConnectionIndicator peerId={peerId} />
-      {isHandRaised && (
-        <Flex
-          align="center"
-          justify="center"
-          css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        >
-          <HandIcon height={19} width={19} />
-        </Flex>
-      )}
-      {isAudioMuted ? (
-        <Flex
-          align="center"
-          justify="center"
-          css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        >
-          <MicOffIcon height={19} width={19} />
-        </Flex>
-      ) : null}
+    return (
+      <Flex
+        align="center"
+        css={{
+          flexShrink: 0,
+          gap: '$8',
+        }}
+      >
+        <ConnectionIndicator peerId={peerId} />
+        {isHandRaised && (
+          <Flex
+            align="center"
+            justify="center"
+            css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+          >
+            <HandIcon height={19} width={19} />
+          </Flex>
+        )}
+        {isAudioMuted ? (
+          <Flex
+            align="center"
+            justify="center"
+            css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+          >
+            <MicOffIcon height={19} width={19} />
+          </Flex>
+        ) : null}
 
-      {shouldShowMoreActions && !isLocal ? (
-        <ParticipantMoreActions
-          peerId={peerId}
-          role={role}
-          elements={elements}
-          canChangeRole={canChangeRole}
-          canRemoveOthers={canRemoveOthers}
-        />
-      ) : null}
-    </Flex>
-  );
-});
+        {shouldShowMoreActions && !isLocal ? (
+          <ParticipantMoreActions peerId={peerId} role={role} elements={elements} canChangeRole={!!canChangeRole} />
+        ) : null}
+      </Flex>
+    );
+  },
+);
 
-const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
+const ParticipantMoreActions = ({
+  peerId,
+  role,
+  elements,
+  canChangeRole,
+}: {
+  peerId: string;
+  role: string;
+  canChangeRole: boolean;
+  elements: ConferencingScreenElements;
+}) => {
   const hmsActions = useHMSActions();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = [],
+    skip_preview_for_role_change = false,
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange =
     canChangeRole &&
     ((isInStage && remove_from_stage_label) || (off_stage_roles?.includes(role) && bring_to_stage_label));
   const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isLocal = localPeerId === peerId;
   const [open, setOpen] = useState(false);
 
   const handleStageAction = async () => {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
-    } else {
-      await hmsActions.changeRoleOfPeer(peerId, on_stage_role);
+    } else if (on_stage_role) {
+      await hmsActions.changeRoleOfPeer(peerId, on_stage_role, skip_preview_for_role_change);
+      if (skip_preview_for_role_change) {
+        await hmsActions.lowerRemotePeerHand(peerId);
+      }
     }
     setOpen(false);
   };
@@ -315,30 +365,22 @@ const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemo
             </Dropdown.Item>
           ) : null}
 
-          {!isLocal && canRemoveOthers && (
-            <Dropdown.Item
-              css={{ color: '$alert_error_default', bg: '$surface_default' }}
-              onClick={async () => {
-                try {
-                  await hmsActions.removePeer(peerId, '');
-                } catch (error) {
-                  ToastManager.addToast({ title: error.message, variant: 'error' });
-                }
-              }}
-            >
-              <PeopleRemoveIcon />
-              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
-                Remove Participant
-              </Text>
-            </Dropdown.Item>
-          )}
+          <RemoveParticipant peerId={peerId} />
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
   );
 };
 
-export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
+export const ParticipantSearch = ({
+  onSearch,
+  placeholder = 'Search for participants',
+  inSidePane = false,
+}: {
+  inSidePane?: boolean;
+  placeholder?: string;
+  onSearch: (val: string) => void;
+}) => {
   const [value, setValue] = React.useState('');
   const isMobile = useMedia(cssConfig.media.md);
 
@@ -364,7 +406,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <SearchIcon style={{ position: 'absolute', left: '0.5rem' }} />
       <Input
         type="text"
-        placeholder={placeholder || 'Search for participants'}
+        placeholder={placeholder}
         css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -6,7 +6,6 @@ import { ChevronRightIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
 // @ts-ignore: No implicit Any
@@ -24,9 +23,18 @@ export function itemKey(index: number, data: ItemData) {
   return data.peerList[index]?.id;
 }
 
-export const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
-  return <Participant key={data.peerList[index].id} peer={data.peerList[index]} isConnected={data.isConnected} />;
-});
+export const VirtualizedParticipantItem = React.memo(
+  ({ index, data, style }: { index: number; data: ItemData; style: React.CSSProperties }) => {
+    return (
+      <Participant
+        key={data.peerList[index].id}
+        peer={data.peerList[index]}
+        isConnected={data.isConnected}
+        style={style}
+      />
+    );
+  },
+);
 
 export const RoleAccordion = ({
   peerList = [],
@@ -39,15 +47,22 @@ export const RoleAccordion = ({
 }: ItemData & {
   roleName: string;
   isHandRaisedAccordion?: boolean;
-  filter?: { search: string };
+  filter?: { search?: string };
   offStageRoles: string[];
   onActive?: (role: string) => void;
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
-  const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
   const isOffStageRole = roleName && offStageRoles.includes(roleName);
+  let peersInAccordion = peerList;
+  // for large rooms, peer list would be empty
+  if (isOffStageRole && isLargeRoom) {
+    peersInAccordion = peers;
+    if (filter?.search) {
+      peersInAccordion = peersInAccordion.filter(peer => peer.name.toLowerCase().includes(filter.search || ''));
+    }
+  }
 
   useEffect(() => {
     if (!isOffStageRole || !isLargeRoom) {
@@ -60,17 +75,12 @@ export const RoleAccordion = ({
     return () => clearInterval(interval);
   }, [isOffStageRole, isLargeRoom]); //eslint-disable-line
 
-  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
+  if (peersInAccordion.length === 0 || (isHandRaisedAccordion && filter?.search)) {
     return null;
   }
 
-  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
   const height = ROW_HEIGHT * peersInAccordion.length;
-  const hasNext = total > peersInAccordion.length;
-
-  if (peersInAccordion.length === 0) {
-    return null;
-  }
+  const hasNext = total > peersInAccordion.length && !filter?.search;
 
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>

package/src/Prebuilt/components/Footer/WhiteboardToggle.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useWhiteboard } from '@100mslive/react-sdk';
+import { PencilDrawIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
+import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+
+export const WhiteboardToggle = () => {
+  const { toggle, open, isOwner } = useWhiteboard();
+  if (!toggle) {
+    return null;
+  }
+
+  return (
+    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
+      <IconButton
+        onClick={async () => {
+          try {
+            await toggle();
+          } catch (error) {
+            ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
+          }
+        }}
+        active={!open}
+        disabled={open && !isOwner}
+        data-testid="whiteboard_btn"
+      >
+        <PencilDrawIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectHasPeerHandRaised,
+  selectRoomState,
+  useHMSNotifications,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { ToastBatcher } from '../Toast/ToastBatcher';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const HandRaisedNotifications = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
+  const roomState = useHMSStore(selectRoomState);
+  const vanillaStore = useHMSVanillaStore();
+  const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
+
+  useEffect(() => {
+    if (!notification?.data) {
+      return;
+    }
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp) {
+      return;
+    }
+    const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    if (hasPeerHandRaised) {
+      ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+    }
+  }, [notification, on_stage_exp, roomState, vanillaStore]);
+
+  return null;
+};

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -4,7 +4,6 @@ import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
-  selectHasPeerHandRaised,
   selectLocalPeerID,
   selectPeerNameByID,
   selectRoomState,
@@ -13,7 +12,8 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { Button } from '../../..';
+import { GroupIcon } from '@100mslive/react-icons';
+import { Box, Button } from '../../..';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
@@ -21,6 +21,7 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
+import { HandRaisedNotifications } from './HandRaisedNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
@@ -91,16 +92,6 @@ export function Notifications() {
       return;
     }
     switch (notification.type) {
-      case HMSNotificationTypes.HAND_RAISE_CHANGED: {
-        if (roomState !== HMSRoomState.Connected || notification.data.isLocal) {
-          return;
-        }
-        const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
-        if (hasPeerHandRaised) {
-          ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
-        }
-        break;
-      }
       case HMSNotificationTypes.METADATA_UPDATED:
         if (roomState !== HMSRoomState.Connected) {
           return;
@@ -123,6 +114,16 @@ export function Notifications() {
             ToastManager.addToast({
               title: `Error: ${notification.data?.message}`,
             });
+          } else if (notification.data?.message === 'role limit reached') {
+            ToastManager.addToast({
+              title: 'The room is currently full, try joining later',
+              close: true,
+              icon: (
+                <Box css={{ color: '$alert_error_default' }}>
+                  <GroupIcon />
+                </Box>
+              ),
+            });
           } else {
             ToastManager.addToast({
               title:
@@ -219,6 +220,7 @@ export function Notifications() {
       <PermissionErrorModal />
       <InitErrorModal />
       <ChatNotifications />
+      <HandRaisedNotifications />
     </>
   );
 }

package/src/Prebuilt/components/Notifications/PeerNotifications.tsx

@@ -3,9 +3,9 @@ import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 // @ts-ignore: No implicit Any
-import { useSubscribedNotifications } from '../AppData/useUISettings';
+import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
-import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
+import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 const notificationTypes = [
   HMSNotificationTypes.PEER_LIST,
@@ -17,6 +17,8 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
+  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
+
   useEffect(() => {
     if (!notification?.data) {
       return;
@@ -35,6 +37,9 @@ export const PeerNotifications = () => {
         }
         break;
       case HMSNotificationTypes.PEER_LEFT:
+        if (selectedPeer.id === notification.data.id) {
+          setPeerSelector({});
+        }
         if (!isPeerLeftSubscribed) {
           return;
         }