fix: fallback to userId when name is not set (#1126)

Fallback to `participant.userId` when `participant.name` is not set.
GetStream · Oct 4, 2023 · d0a9661 · d0a9661
1 parent 80f7da9
commit d0a9661
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 10 deletions.
diff --git a/sample-apps/react/react-video-demo/src/components/Header/Header.tsx b/sample-apps/react/react-video-demo/src/components/Header/Header.tsx
@@ -132,7 +132,7 @@ export const Participants = ({
   const rootClassName = classnames(styles.participants, className);
   const maxDisplayParticipants = participants.slice(0, 3);
   const names = maxDisplayParticipants.map(
-    (participant: any) => participant?.name,
+    (participant: any) => participant?.name ?? participant.userId,
   );
   const last = names.pop();
 
@@ -143,13 +143,18 @@ export const Participants = ({
         <ul className={styles.avatars}>
           {maxDisplayParticipants.map((participant: any) => {
             return (
-              <li key={participant?.name} className={styles.participant}>
+              <li
+                key={participant?.name ?? participant.userId}
+                className={styles.participant}
+              >
                 <Img
                   className={styles.avatar}
                   src={participant?.image}
                   placeholder={
                     <div className={styles.placeholder}>
-                      {String(participant?.name)?.charAt(0)}
+                      {String(participant?.name ?? participant.userId)?.charAt(
+                        0,
+                      )}
                     </div>
                   }
                 />

diff --git a/...act/react-video-demo/src/components/ParticipantsControlModal/ParticipantsControlModal.tsx b/...act/react-video-demo/src/components/ParticipantsControlModal/ParticipantsControlModal.tsx
@@ -30,7 +30,10 @@ export const ParticipantsControlModal = ({
   );
 
   return (
-    <Panel className={styles.root} title={participant.name}>
+    <Panel
+      className={styles.root}
+      title={participant.name || participant.userId}
+    >
       <ul className={styles.controls}>
         {isAudioOn && (
           <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>

diff --git a/sample-apps/react/react-video-demo/src/components/ParticipantsPanel/ParticipantListItem.tsx b/sample-apps/react/react-video-demo/src/components/ParticipantsPanel/ParticipantListItem.tsx
@@ -46,7 +46,8 @@ export const ParticipantListItem = ({
   return (
     <>
       <span className={styles.name}>
-        {participant?.name} {isLocalParticipant ? '(You)' : null}
+        {participant?.name || participant?.userId}{' '}
+        {isLocalParticipant ? '(You)' : null}
       </span>
       <div className={styles.media}>
         <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>

diff --git a/sample-apps/react/react-video-demo/src/components/ParticipantsPanel/ParticipantsPanel.tsx b/sample-apps/react/react-video-demo/src/components/ParticipantsPanel/ParticipantsPanel.tsx
@@ -48,7 +48,7 @@ export const ParticipantsPanel = ({
       const queryRegExp = new RegExp(queryString, 'i');
       return Promise.resolve(
         (participants || []).filter((participant) => {
-          return participant.name.match(queryRegExp);
+          return (participant.name || participant.userId).match(queryRegExp);
         }),
       );
     },
@@ -116,7 +116,7 @@ export const ParticipantsPanelSmallScreen = ({
       const queryRegExp = new RegExp(queryString, 'i');
       return Promise.resolve(
         (participants || []).filter((participant) => {
-          return participant.name.match(queryRegExp);
+          return (participant.name || participant.userId).match(queryRegExp);
         }),
       );
     },

diff --git a/sample-apps/react/react-video-demo/src/hooks/useParticipantNotification.tsx b/sample-apps/react/react-video-demo/src/hooks/useParticipantNotification.tsx
@@ -30,7 +30,9 @@ export const useParticipantNotification = () => {
 
       addNotification({
         id: uuid(),
-        message: `${newParticipant.name} has joined the call`,
+        message: `${
+          newParticipant.name || newParticipant.userId
+        } has joined the call`,
         icon: <People />,
       });
     }
@@ -45,7 +47,9 @@ export const useParticipantNotification = () => {
 
       addNotification({
         id: uuid(),
-        message: `${leavingParticipant.name} has left the call`,
+        message: `${
+          leavingParticipant.name || leavingParticipant.userId
+        } has left the call`,
         icon: <People />,
       });
     }

diff --git a/sample-apps/react/react-video-demo/src/hooks/useScreenShareNotification.tsx b/sample-apps/react/react-video-demo/src/hooks/useScreenShareNotification.tsx
@@ -37,7 +37,10 @@ export const useScreenShareNotification = () => {
         firstScreenSharingParticipant?.sessionId ===
         localParticipant?.sessionId;
 
-      const name = isLocal ? 'You' : firstScreenSharingParticipant?.name;
+      const name = isLocal
+        ? 'You'
+        : firstScreenSharingParticipant?.name ||
+          firstScreenSharingParticipant?.userId;
       const message = isLocal
         ? 'You are presenting your screen'
         : `${name} is presenting their screen`;