Merge pull request #13733 from nextcloud/fix/13716/deleted-users-icon

src/components/AvatarWrapper/AvatarWrapper.spec.js

@@ -98,6 +98,7 @@ describe('AvatarWrapper.vue', () => {
 			[null, 'guest/id', '', ATTENDEE.ACTOR_TYPE.GUESTS, 'icon-user'],
 			[null, 'guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.GUESTS, 'icon-user'],
 			[null, 'guest/id', t('spreed', 'Guest'), ATTENDEE.ACTOR_TYPE.EMAILS, 'icon-user'],
+			[null, 'deleted_users', '', ATTENDEE.ACTOR_TYPE.DELETED_USERS, 'icon-user'],
 			['new', 'guest/id', '[email protected]', ATTENDEE.ACTOR_TYPE.EMAILS, 'icon-mail'],
 			[null, 'sha-phone', '+12345...', ATTENDEE.ACTOR_TYPE.PHONES, 'icon-phone'],
 			[null, 'team/id', 'Team', ATTENDEE.ACTOR_TYPE.CIRCLES, 'icon-team'],
@@ -119,7 +120,6 @@ describe('AvatarWrapper.vue', () => {
 		const testCases = [
 			['guest/id', USER_NAME, ATTENDEE.ACTOR_TYPE.GUESTS, USER_NAME.charAt(0)],
 			['guest/id', USER_NAME, ATTENDEE.ACTOR_TYPE.EMAILS, USER_NAME.charAt(0)],
-			['deleted_users', USER_NAME, ATTENDEE.ACTOR_TYPE.DELETED_USERS, 'X'],
 			['bot-id', USER_NAME, ATTENDEE.ACTOR_TYPE.BOTS, '>_'],
 		]
 

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -6,7 +6,7 @@
 <template>
 	<div class="avatar-wrapper" :class="avatarClass" :style="avatarStyle">
 		<div v-if="iconClass" class="avatar icon" :class="[iconClass]" />
-		<div v-else-if="isGuestOrDeletedUser" class="avatar guest">
+		<div v-else-if="isGuestUser" class="avatar guest">
 			{{ firstLetterOfGuestName }}
 		</div>
 		<div v-else-if="isBot" class="avatar bot">
@@ -150,14 +150,15 @@ export default {
 			switch (this.source) {
 			case ATTENDEE.ACTOR_TYPE.USERS:
 			case ATTENDEE.ACTOR_TYPE.BRIDGED:
-			case ATTENDEE.ACTOR_TYPE.DELETED_USERS:
 				return ''
 			case ATTENDEE.ACTOR_TYPE.FEDERATED_USERS:
 				return this.token ? '' : 'icon-user'
 			case ATTENDEE.ACTOR_TYPE.EMAILS:
 				return this.token === 'new' ? 'icon-mail' : (this.hasCustomName ? '' : 'icon-user')
 			case ATTENDEE.ACTOR_TYPE.GUESTS:
 				return this.hasCustomName ? '' : 'icon-user'
+			case ATTENDEE.ACTOR_TYPE.DELETED_USERS:
+				return 'icon-user'
 			case ATTENDEE.ACTOR_TYPE.PHONES:
 				return 'icon-phone'
 			case ATTENDEE.ACTOR_TYPE.BOTS:
@@ -189,19 +190,14 @@ export default {
 		isBot() {
 			return this.source === ATTENDEE.ACTOR_TYPE.BOTS && this.id !== ATTENDEE.CHANGELOG_BOT_ID
 		},
-		isGuestOrDeletedUser() {
-			return [ATTENDEE.ACTOR_TYPE.GUESTS, ATTENDEE.ACTOR_TYPE.EMAILS, ATTENDEE.ACTOR_TYPE.DELETED_USERS]
-				.includes(this.source)
+		isGuestUser() {
+			return [ATTENDEE.ACTOR_TYPE.GUESTS, ATTENDEE.ACTOR_TYPE.EMAILS].includes(this.source)
 		},
 		hasCustomName() {
 			return this.name?.trim() && this.name !== t('spreed', 'Guest')
 		},
 		firstLetterOfGuestName() {
-			if (this.source === ATTENDEE.ACTOR_TYPE.DELETED_USERS) {
-				return 'X'
-			} else {
-				return this.name.toUpperCase().charAt(0)
-			}
+			return this.name?.trim()?.toUpperCase()?.charAt(0) ?? '?'
 		},
 		avatarUrl() {
 			return getUserProxyAvatarOcsUrl(this.token, this.id, this.isDarkTheme, this.size > AVATAR.SIZE.MEDIUM ? 512 : 64)

src/components/CallView/shared/VideoVue.vue

@@ -49,10 +49,10 @@
 			<div v-if="showBackgroundAndAvatar"
 				:key="'backgroundAvatar'"
 				class="avatar-container">
-				<VideoBackground :display-name="participantName" :user="participantUserId" />
+				<VideoBackground :display-name="displayName" :user="participantUserId" />
 				<AvatarWrapper :id="participantUserId"
 					:token="token"
-					:name="participantName"
+					:name="displayName"
 					:source="participantActorType"
 					:size="avatarSize"
 					:loading="isLoading"
@@ -104,6 +104,7 @@ import { EventBus } from '../../../services/EventBus.ts'
 import { useCallViewStore } from '../../../stores/callView.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
+import { getDisplayNameWithFallback } from '../../../utils/getDisplayName.ts'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 import { placeholderImage } from '../Grid/gridPlaceholders.ts'
 
@@ -411,7 +412,7 @@ export default {
 			return null
 		},
 
-		participantName() {
+		displayName() {
 			if (this.model.attributes.name) {
 				return this.model.attributes.name
 			}
@@ -434,12 +435,13 @@ export default {
 
 			if (!participantName) {
 				participantName = this.peerData.displayName
-				if (!participantName && this.peerData.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
-					participantName = t('spreed', 'Guest')
-				}
 			}
 
-			return participantName
+			return participantName?.trim() ?? ''
+		},
+
+		participantName() {
+			return getDisplayNameWithFallback(this.displayName, this.participantActorType)
 		},
 
 		isSpeaking() {

src/components/MessagesList/MessagesGroup/Message/MessagePart/Reactions.vue

@@ -91,6 +91,7 @@ import ReactionsList from './ReactionsList.vue'
 import { ATTENDEE } from '../../../../../constants.js'
 import { useGuestNameStore } from '../../../../../stores/guestName.js'
 import { useReactionsStore } from '../../../../../stores/reactions.js'
+import { getDisplayNameWithFallback } from '../../../../../utils/getDisplayName.ts'
 
 export default {
 	name: 'Reactions',
@@ -230,12 +231,7 @@ export default {
 				return this.guestNameStore.getGuestNameWithGuestSuffix(this.token, reactingParticipant.actorId)
 			}
 
-			const displayName = reactingParticipant.actorDisplayName.trim()
-			if (displayName === '') {
-				return t('spreed', 'Deleted user')
-			}
-
-			return displayName
+			return getDisplayNameWithFallback(reactingParticipant.actorDisplayName, reactingParticipant.actorType)
 		},
 
 		reactionsCount(reaction) {

src/components/MessagesList/MessagesGroup/Message/MessagePart/ReactionsList.vue

@@ -32,7 +32,7 @@
 							:source="item.actorType"
 							:size="AVATAR.SIZE.SMALL"
 							disable-menu />
-						<span class="reactions-item__name">{{ item.actorDisplayName }}</span>
+						<span class="reactions-item__name">{{ item.actorDisplayNameWithFallback }}</span>
 						<span class="reactions-item__emojis">
 							{{ item.reaction?.join('') ?? reactionFilter }}
 						</span>
@@ -57,6 +57,7 @@ import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
 
 import { ATTENDEE, AVATAR } from '../../../../../constants.js'
 import { useGuestNameStore } from '../../../../../stores/guestName.js'
+import { getDisplayNameWithFallback } from '../../../../../utils/getDisplayName.ts'
 
 export default {
 
@@ -112,17 +113,20 @@ export default {
 				actors.forEach(actor => {
 					const key = `${actor.actorId}-${actor.actorType}`
 					const actorDisplayName = this.getDisplayNameForReaction(actor)
+					const actorDisplayNameWithFallback = getDisplayNameWithFallback(actorDisplayName, actor.actorType)
 
 					modifiedDetailedReactions[reaction].push({
 						...actor,
-						actorDisplayName
+						actorDisplayName,
+						actorDisplayNameWithFallback,
 					})
 
 					if (mergedReactionsMap[key]) {
 						mergedReactionsMap[key].reaction.push(reaction)
 					} else {
 						mergedReactionsMap[key] = {
 							actorDisplayName,
+							actorDisplayNameWithFallback,
 							actorId: actor.actorId,
 							actorType: actor.actorType,
 							reaction: [reaction]
@@ -150,12 +154,7 @@ export default {
 				return this.guestNameStore.getGuestNameWithGuestSuffix(this.token, reactingParticipant.actorId)
 			}
 
-			const displayName = reactingParticipant.actorDisplayName.trim()
-			if (displayName === '') {
-				return t('spreed', 'Deleted user')
-			}
-
-			return displayName
+			return reactingParticipant.actorDisplayName.trim()
 		},
 
 		handleTabClick(reaction) {