fix: consider display avatar pref in video conf message

dougfabris · dougfabris · commit 2cbdc5248f70 · 2025-01-23T16:26:27.000-03:00
diff --git a/packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx b/packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx
@@ -1,8 +1,10 @@
 import { VideoConferenceStatus } from '@rocket.chat/core-typings';
 import {
   useGoToRoom,
+  useSetting,
   useTranslation,
   useUserId,
+  useUserPreference,
 } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import {
@@ -20,7 +22,7 @@ import {
   VideoConfMessageAction,
 } from '@rocket.chat/ui-video-conf';
 import type { MouseEventHandler, ReactElement } from 'react';
-import { useContext, memo } from 'react';
+import { useContext, memo, useCallback } from 'react';
 
 import { UiKitContext } from '../..';
 import { useVideoConfDataStream } from './hooks/useVideoConfDataStream';
@@ -39,6 +41,8 @@ const VideoConferenceBlock = ({
   const surfaceType = useSurfaceType();
   const userId = useUserId();
   const goToRoom = useGoToRoom();
+  const displayAvatars = useUserPreference<boolean>('displayAvatars');
+  const showRealName = useSetting('UI_Use_Real_Name');
 
   const { action, viewId = undefined, rid } = useContext(UiKitContext);
 
@@ -97,6 +101,23 @@ const VideoConferenceBlock = ({
     }
   };
 
+  const getMessageFooterText = useCallback(
+    (usersCount: number): string => {
+      if (!displayAvatars) {
+        return t('__usersCount__joined', {
+          count: usersCount,
+        });
+      }
+
+      return usersCount > MAX_USERS
+        ? t('plus__usersCount__joined', {
+            count: usersCount - MAX_USERS,
+          })
+        : t('joined');
+    },
+    [displayAvatars, t],
+  );
+
   if (result.isPending || result.isError) {
     // TODO: error handling
     return <VideoConfMessageSkeleton />;
@@ -105,6 +126,21 @@ const VideoConferenceBlock = ({
   const { data } = result;
   const isUserCaller = data.createdBy._id === userId;
 
+  const messageFooterText = getMessageFooterText(data.users.length);
+
+  const joinedUsernames = [...data.users]
+    .splice(0, MAX_USERS)
+    .map(({ name, username }) => (showRealName ? name : username))
+    .join(', ');
+
+  const iconTitle =
+    data.users.length > MAX_USERS
+      ? t('__usernames__and__count__more_joined', {
+          usernames: joinedUsernames,
+          count: data.users.length - MAX_USERS,
+        })
+      : t('__usernames__joined', { usernames: joinedUsernames });
+
   const actions = (
     <VideoConfMessageActions>
       {data.discussionRid && (
@@ -147,13 +183,14 @@ const VideoConferenceBlock = ({
           {data.type !== 'direct' &&
             (data.users.length ? (
               <>
-                <VideoConfMessageUserStack users={data.users} />
+                <VideoConfMessageUserStack
+                  displayAvatars={displayAvatars}
+                  showRealName={showRealName}
+                  iconTitle={iconTitle}
+                  users={data.users}
+                />
                 <VideoConfMessageFooterText>
-                  {data.users.length > MAX_USERS
-                    ? t('__usersCount__member_joined', {
-                        usersCount: data.users.length - MAX_USERS,
-                      })
-                    : t('joined')}
+                  {messageFooterText}
                 </VideoConfMessageFooterText>
               </>
             ) : (
@@ -205,13 +242,14 @@ const VideoConferenceBlock = ({
         </VideoConfMessageButton>
         {Boolean(data.users.length) && (
           <>
-            <VideoConfMessageUserStack users={data.users} />
+            <VideoConfMessageUserStack
+              displayAvatars={displayAvatars}
+              showRealName={showRealName}
+              users={data.users}
+              iconTitle={iconTitle}
+            />
             <VideoConfMessageFooterText>
-              {data.users.length > MAX_USERS
-                ? t('__usersCount__member_joined', {
-                    count: data.users.length - MAX_USERS,
-                  })
-                : t('joined')}
+              {messageFooterText}
             </VideoConfMessageFooterText>
           </>
         )}
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -45,6 +45,14 @@ export default {
 const avatarUrl =
 	'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';
 
+const fakeUsers = Array.from({ length: 10 }).map((_, i) => ({
+	username: `user${i}`,
+	ts: new Date().toISOString(),
+	name: `User ${i}`,
+	_id: `id${i}`,
+	avatarETag: '',
+}));
+
 export const CallingDM: StoryFn<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
@@ -94,8 +102,8 @@ export const CallOngoing: StoryFn<typeof VideoConfMessage> = () => (
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
 			<VideoConfMessageButton primary>Join</VideoConfMessageButton>
-			<VideoConfMessageUserStack users={Array(3).fill('')} />
-			<VideoConfMessageFooterText>Joined</VideoConfMessageFooterText>
+			<VideoConfMessageUserStack users={fakeUsers} />
+			<VideoConfMessageFooterText>joined</VideoConfMessageFooterText>
 		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
@@ -112,10 +120,29 @@ export const CallEnded: StoryFn<typeof VideoConfMessage> = () => (
 			</VideoConfMessageActions>
 		</VideoConfMessageRow>
 		<VideoConfMessageFooter>
-			<VideoConfMessageUserStack users={Array(3).fill('')} />
-			<VideoConfMessageFooterText>Joined</VideoConfMessageFooterText>
+			<VideoConfMessageUserStack users={fakeUsers} />
+			<VideoConfMessageFooterText>joined</VideoConfMessageFooterText>
 		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
 
 export const Loading: StoryFn<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
+
+export const NoAvatars: StoryFn<typeof VideoConfMessage> = () => (
+	<VideoConfMessage>
+		<VideoConfMessageRow>
+			<VideoConfMessageContent>
+				<VideoConfMessageIcon variant='outgoing' />
+				<VideoConfMessageText>Call ongoing</VideoConfMessageText>
+			</VideoConfMessageContent>
+			<VideoConfMessageActions>
+				<VideoConfMessageAction aria-label='info' icon='info' />
+			</VideoConfMessageActions>
+		</VideoConfMessageRow>
+		<VideoConfMessageFooter>
+			<VideoConfMessageButton primary>Join</VideoConfMessageButton>
+			<VideoConfMessageUserStack displayAvatars={false} users={fakeUsers} />
+			<VideoConfMessageFooterText>{fakeUsers.length} joined</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
+	</VideoConfMessage>
+);
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
@@ -4,7 +4,7 @@ import type { AllHTMLAttributes, ReactElement } from 'react';
 type VideoConfMessageFooterTextProps = Omit<AllHTMLAttributes<HTMLParagraphElement>, 'is'>;
 
 const VideoConfMessageFooterText = ({ children, ...props }: VideoConfMessageFooterTextProps): ReactElement => (
-	<Box {...props} is='p' fontScale='c1' mi={4}>
+	<Box {...props} is='p' fontScale='micro' mi={4}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
@@ -1,22 +1,32 @@
-import type { IVideoConferenceUser, Serialized } from '@rocket.chat/core-typings';
-import { Avatar, Box } from '@rocket.chat/fuselage';
+import type { ISetting, IVideoConferenceUser, Serialized } from '@rocket.chat/core-typings';
+import { Avatar, Box, Icon } from '@rocket.chat/fuselage';
 import { useUserAvatarPath } from '@rocket.chat/ui-contexts';
 import { memo, type ReactElement } from 'react';
 
 const MAX_USERS = 3;
 
-const VideoConfMessageUserStack = ({ users }: { users: Serialized<IVideoConferenceUser>[] }): ReactElement => {
+type VideoConfMessageUserStackProps = {
+	users: Serialized<IVideoConferenceUser>[];
+	displayAvatars?: boolean;
+	iconTitle?: string;
+	showRealName?: ISetting['value'];
+};
+
+const VideoConfMessageUserStack = ({ users, showRealName, iconTitle, displayAvatars }: VideoConfMessageUserStackProps): ReactElement => {
 	const getUserAvatarPath = useUserAvatarPath();
 
 	return (
 		<Box mi={4}>
-			<Box display='flex' alignItems='center' mi='neg-x2'>
-				{users.slice(0, MAX_USERS).map(({ username }, index) => (
-					<Box mi={2} key={index}>
-						<Avatar size='x28' alt={username || ''} data-tooltip={username} url={getUserAvatarPath(username as string)} />
-					</Box>
-				))}
-			</Box>
+			{displayAvatars && (
+				<Box display='flex' alignItems='center' mi='neg-x2'>
+					{users.slice(0, MAX_USERS).map(({ name, username }, index) => (
+						<Box mi={2} key={index}>
+							<Avatar size='x28' alt={username || ''} title={showRealName ? name : username} url={getUserAvatarPath(username as string)} />
+						</Box>
+					))}
+				</Box>
+			)}
+			{!displayAvatars && <Icon size='x20' title={iconTitle} name='user' />}
 		</Box>
 	);
 };
