Merge pull request #2471 from nextcloud/fix/2449/contact-avatars

Fix contact avatars not loading

3 files changed, 36 insertions, 35 deletions

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 9a1bd3f5..9411fb70 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -32,15 +32,12 @@
 			@change="processFile">
 
 		<!-- Avatar display -->
-		<div v-if="photoUrl"
-			:style="{ 'backgroundImage': `url(${photoUrl})` }"
-			class="contact-header-avatar__photo"
-			@click="toggleModal" />
-		<Avatar v-else
+		<Avatar
 			:disable-tooltip="true"
 			:display-name="contact.displayName"
 			:is-no-user="true"
 			:size="75"
+			:url="photoUrl"
 			class="contact-header-avatar__photo" />
 
 		<!-- attention, this menu exists twice in this file -->
@@ -178,18 +175,12 @@ export default {
 		},
 	},
 
-	watch: {
-		contact() {
-			this.loadPhotoUrl()
-		},
-	},
-
 	data() {
 		return {
 			maximizeAvatar: false,
 			opened: false,
 			loading: false,
-			photoUrl: false,
+			photoUrl: undefined,
 			root: generateRemoteUrl(`dav/files/${getCurrentUser().uid}`),
 		}
 	},
@@ -217,8 +208,14 @@ export default {
 		},
 	},
 
-	mounted() {
-		this.loadPhotoUrl()
+	watch: {
+		async contact() {
+			await this.loadPhotoUrl()
+		},
+	},
+
+	async mounted() {
+		await this.loadPhotoUrl()
 	},
 
 	methods: {
@@ -366,13 +363,17 @@ export default {
 		},
 
 		async loadPhotoUrl() {
-			this.photoUrl = false
-			const photoUrl = await this.contact.getPhotoUrl()
-			if (!photoUrl) {
-				console.warn('contact has an invalid photo')
-				return
+			this.photoUrl = undefined
+			if (this.contact.photo) {
+				const photoUrl = await this.contact.getPhotoUrl()
+				if (!photoUrl) {
+					console.warn('contact has an invalid photo')
+					return
+				}
+				this.photoUrl = photoUrl
+			} else if (this.contact.url) {
+				this.photoUrl = `${this.contact.url}?photo`
 			}
-			this.photoUrl = photoUrl
 		},
 
 		/**
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index c5d1aee3..0a17c83e 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -40,11 +40,6 @@ export default {
 			avatarUrl: undefined,
 		}
 	},
-	watch: {
-		source() {
-			this.loadAvatarUrl()
-		}
-	},
 	computed: {
 		selectedGroup() {
 			return this.$route.params.selectedGroup
@@ -58,8 +53,13 @@ export default {
 			return window.btoa(this.source.key).slice(0, -2)
 		},
 	},
-	mounted() {
-		this.loadAvatarUrl()
+	watch: {
+		async source() {
+			await this.loadAvatarUrl()
+		},
+	},
+	async mounted() {
+		await this.loadAvatarUrl()
 	},
 	methods: {
 		async loadAvatarUrl() {
@@ -72,8 +72,7 @@ export default {
 					return
 				}
 				this.avatarUrl = photoUrl
-			}
-			if (this.source.url) {
+			} else if (this.source.url) {
 				this.avatarUrl = `${this.source.url}?photo`
 			}
 		},
diff --git a/src/models/contact.js b/src/models/contact.js
index b87e295d..1f33343a 100644
--- a/src/models/contact.js
+++ b/src/models/contact.js
@@ -239,20 +239,21 @@ export default class Contact {
 		}
 		const encoding = photo.getFirstParameter('encoding')
 		let photoType = photo.getFirstParameter('type')
-		let photoB64 = this.photo
+		const photoB64 = this.photo
 
 		const isBinary = photo.type === 'binary' || encoding === 'b'
 
+		let photoB64Data = photoB64
 		if (photo && photoB64.startsWith('data') && !isBinary) {
 			// get the last part = base64
-			photoB64 = photoB64.split(',').pop()
-			// 'data:image/png' => 'png'
-			photoType = photoB64.split(';')[0].split('/')
+			photoB64Data = photoB64.split(',').pop()
+			// 'data:image/png;base64' => 'png'
+			photoType = photoB64.split(';')[0].split('/').pop()
 		}
 
 		// Verify if SVG is valid
 		if (photoType.startsWith('svg')) {
-			const imageSvg = atob(photoB64)
+			const imageSvg = atob(photoB64Data)
 			const cleanSvg = await sanitizeSVG(imageSvg)
 
 			if (!cleanSvg) {
@@ -263,7 +264,7 @@ export default class Contact {
 
 		try {
 			// Create blob from url
-			const blob = b64toBlob(photoB64, `image/${photoType}`)
+			const blob = b64toBlob(photoB64Data, `image/${photoType}`)
 			return URL.createObjectURL(blob)
 		} catch {
 			console.error('Invalid photo for the following contact. Ignoring...', this.contact, { photoB64, photoType })