fix: consider display avatar pref in video conf message

Author: dougfabris

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

@@ -1,7 +1,9 @@
 import {
   useGoToRoom,
+  useSetting,
   useTranslation,
   useUserId,
+  useUserPreference,
 } from '@rocket.chat/ui-contexts';
 import type * as UiKit from '@rocket.chat/ui-kit';
 import {
@@ -38,6 +40,8 @@ const VideoConferenceBlock = ({
   const surfaceType = useSurfaceType();
   const userId = useUserId();
   const goToRoom = useGoToRoom();
+  const displayAvatars = useUserPreference<boolean>('displayAvatars');
+  const showRealName = useSetting<boolean>('UI_Use_Real_Name');
 
   const { action, viewId = undefined, rid } = useContext(UiKitContext);
 
@@ -141,13 +145,19 @@ const VideoConferenceBlock = ({
           {data.type !== 'direct' &&
             (data.users.length ? (
               <>
-                <VideoConfMessageUserStack users={data.users} />
+                <VideoConfMessageUserStack
+                  displayAvatars={displayAvatars}
+                  showRealName={showRealName}
+                  users={data.users}
+                />
                 <VideoConfMessageFooterText>
-                  {data.users.length > MAX_USERS
+                  {data.users.length > MAX_USERS || !displayAvatars
                     ? t('__usersCount__member_joined', {
-                        usersCount: data.users.length - MAX_USERS,
+                        count: displayAvatars
+                          ? data.users.length - MAX_USERS
+                          : data.users.length,
                       })
-                    : t('joined')}
+                    : t('Joined')}
                 </VideoConfMessageFooterText>
               </>
             ) : (
@@ -194,13 +204,19 @@ const VideoConferenceBlock = ({
         </VideoConfMessageButton>
         {Boolean(data.users.length) && (
           <>
-            <VideoConfMessageUserStack users={data.users} />
+            <VideoConfMessageUserStack
+              displayAvatars={displayAvatars}
+              showRealName={showRealName}
+              users={data.users}
+            />
             <VideoConfMessageFooterText>
-              {data.users.length > MAX_USERS
+              {data.users.length > MAX_USERS || !displayAvatars
                 ? t('__usersCount__member_joined', {
-                    count: data.users.length - MAX_USERS,
+                    count: displayAvatars
+                      ? data.users.length - MAX_USERS
+                      : data.users.length,
                   })
-                : t('joined')}
+                : t('Joined')}
             </VideoConfMessageFooterText>
           </>
         )}

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx

@@ -118,4 +118,23 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 	</VideoConfMessage>
 );
 
+export const NoAvatars: ComponentStory<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={Array(3).fill('')} />
+			<VideoConfMessageFooterText>3 joined</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
+	</VideoConfMessage>
+);
+
 export const Loading: ComponentStory<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;

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>
 );

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 { Avatar, Box, Icon } from '@rocket.chat/fuselage';
 import { useUserAvatarPath } from '@rocket.chat/ui-contexts';
 import { ReactElement, memo } from 'react';
 
 const MAX_USERS = 3;
 
-const VideoConfMessageUserStack = ({ users }: { users: Serialized<IVideoConferenceUser>[] }): ReactElement => {
+type VideoConfMessageUserStackProps = {
+	users: Serialized<IVideoConferenceUser>[];
+	displayAvatars?: boolean;
+	showRealName?: boolean;
+};
+
+const VideoConfMessageUserStack = ({ users, showRealName, displayAvatars = true }: VideoConfMessageUserStackProps): ReactElement => {
 	const getUserAvatarPath = useUserAvatarPath();
+	const usersTooltip = users.map(({ name, username }) => (showRealName ? name : username)).join(', ');
 
 	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={usersTooltip} name='user' />}
 		</Box>
 	);
 };