Get avatar image for non-icon room avatars

The "custom" room avatars are the conversation picture set by the room
participants, so they need to be got from the avatar endpoint. As it is
an OCS endpoint the "OCS-APIRequest" header must be set, so the endpoint
can not be directly used as the URL of a CSS image. Instead a request
with the right headers is performed to the OCS endpoint, the response is
treated as a blob, and then a URL to that blob is used.

The "user" room avatars (those for one-to-one conversations) can be got
in the same way, so othe avatar component is dropped in favour of the
room avatar endpoint.

Besides being more consistent it also removes the user menu that was
shown on the avatar component and felt out of place in the room list
(and also did not properly work, as it was not possible to show the menu
without also changing to the one-to-one conversation).

Signed-off-by: Daniel Calviño Sánchez <[email protected]>

src/components/ConversationIcon.vue

@@ -24,12 +24,9 @@
 		<div v-if="iconClass"
 			class="avatar icon"
 			:class="iconClass" />
-		<Avatar v-else
-			:size="44"
-			:user="item.name"
-			:display-name="item.displayName"
-			menu-position="left"
-			class="conversation-icon__avatar" />
+		<div v-else
+			class="avatar icon"
+			:style="avatarImageStyle" />
 		<div v-if="showCall"
 			class="overlap-icon">
 			<span class="icon icon-active-call" />
@@ -44,13 +41,11 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
 
 export default {
 	name: 'ConversationIcon',
-	components: {
-		Avatar,
-	},
 	props: {
 		/**
 		 * Allow to hide the favorite icon, e.g. on mentions
@@ -75,6 +70,11 @@ export default {
 			},
 		},
 	},
+	data: function() {
+		return {
+			avatarImage: null,
+		}
+	},
 	computed: {
 		showCall() {
 			return !this.hideCall && this.item.hasCall
@@ -89,6 +89,39 @@ export default {
 
 			return this.item.avatarId
 		},
+		avatarImageId() {
+			if (this.iconClass) {
+				return null
+			}
+
+			return this.item.avatarId + '-' + this.item.avatarVersion
+		},
+		avatarImageStyle() {
+			return {
+				'background-image': 'url(' + this.avatarImage + ')',
+				'background-size': '44px',
+			}
+		},
+	},
+	watch: {
+		avatarImageId: {
+			immediate: true,
+			async handler() {
+				if (!this.avatarImageId) {
+					this.avatarImage = null
+					return
+				}
+
+				try {
+					const avatar = await axios.get(generateOcsUrl('apps/spreed/api/v3/avatar', 2) + this.item.token + '/44?version=' + this.item.avatarVersion, {
+						responseType: 'blob',
+					})
+					this.avatarImage = URL.createObjectURL(avatar.data)
+				} catch (exception) {
+					console.error('Failed to load avatar image for conversation with token ' + this.item.token, exception)
+				}
+			},
+		},
 	},
 }
 </script>