feat: handle sip peer in ui

100mslive · Mar 27, 2024 · 036c6d8 · 036c6d8
1 parent 1088fe8
commit 036c6d8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/packages/roomkit-react/src/Avatar/Avatar.tsx b/packages/roomkit-react/src/Avatar/Avatar.tsx
@@ -47,14 +47,14 @@ type Props = VariantProps<typeof StyledAvatar> &
   };
 
 export const Avatar: React.FC<Props> = ({ name, css, ...props }) => {
-  const { initials } = getAvatarBg(name);
-  let { color } = getAvatarBg(name);
+  const info = getAvatarBg(name);
+  let { color } = info;
   if (!name) {
     color = '#7E47EB';
   }
   return (
     <StyledAvatar css={{ bg: color, ...css }} {...props}>
-      {initials || <PersonIcon height={40} width={40} />}
+      {info.initials || <PersonIcon height={40} width={40} />}
     </StyledAvatar>
   );
 };
diff --git a/packages/roomkit-react/src/Avatar/getAvatarBg.ts b/packages/roomkit-react/src/Avatar/getAvatarBg.ts
@@ -2,13 +2,17 @@ const getInitials = (name: string | undefined) => {
   if (!name) {
     return undefined;
   } else {
-    return name
-      .trim()
-      .match(/(^\S\S?|\b\S)?/g)
-      ?.join('')
-      ?.match(/(^\S|\S$)?/g)
-      ?.join('')
-      .toUpperCase();
+    return (
+      name
+        .trim()
+        // remove non chars/digits
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .match(/(^\S\S?|\b\S)?/g)
+        ?.join('')
+        ?.match(/(^\S|\S$)?/g)
+        ?.join('')
+        .toUpperCase()
+    );
   }
 };
 

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx
@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
   HMSPeer,
+  HMSPeerType,
   HMSRoleName,
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
@@ -14,6 +15,7 @@ import {
 } from '@100mslive/react-sdk';
 import {
   AddIcon,
+  CallIcon,
   ChangeRoleIcon,
   CrossIcon,
   HandIcon,
@@ -184,6 +186,7 @@ export const Participant = ({
       {isConnected && peer.roleName ? (
         <ParticipantActions
           peerId={peer.id}
+          peerType={peer.type}
           isLocal={peer.id === localPeerId}
           role={peer.roleName}
           isHandRaisedAccordion={isHandRaisedAccordion}
@@ -261,6 +264,7 @@ const VirtualizedParticipants = ({
 const ParticipantActions = React.memo(
   ({
     peerId,
+    peerType,
     role,
     isLocal,
     isHandRaisedAccordion,
@@ -269,6 +273,7 @@ const ParticipantActions = React.memo(
     role: string;
     isLocal: boolean;
     isHandRaisedAccordion?: boolean;
+    peerType: HMSPeerType;
   }) => {
     const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
     const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
@@ -290,7 +295,16 @@ const ParticipantActions = React.memo(
           <HandRaisedAccordionParticipantActions peerId={peerId} role={role} />
         ) : (
           <>
-            <ConnectionIndicator peerId={peerId} />
+            {peerType === HMSPeerType.REGULAR && <ConnectionIndicator peerId={peerId} />}
+            {peerType === HMSPeerType.SIP && (
+              <Flex
+                align="center"
+                justify="center"
+                css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+              >
+                <CallIcon width={19} height={19} />
+              </Flex>
+            )}
             {isHandRaised && (
               <Flex
                 align="center"