Fix room avatars

src/components/AuthedImage.vue

@@ -15,30 +15,16 @@ export default {
       },
     },
   },
-  mounted() {
-    if (this.src) {
-      console.error("GOT URL", this.src);
-      if (this.$matrix.useAuthedMedia) {
-        axios
-        .get(this.src, { responseType: "blob", headers: {
-          Authorization: `Bearer ${this.$matrix.matrixClient.getAccessToken()}`,
-        }})
-        .then((response) => {
-          this.imageSrc = URL.createObjectURL(response.data);
-        })
-        .catch((err) => {
-          console.log("Download error: ", err);
-        });
-      } else {
-        this.imageSrc = this.src;
-      }
-    }
-  },
   destroyed() {
-    if (this.imageSrc && this.src != this.imageSrc) {
+    this.unloadSrc();
-      const url = this.imageSrc;
+  },
-      this.imageSrc = null;
+  watch: {
-      URL.revokeObjectURL(url);
+    src: {
+      immediate: true,
+      handler(newValue) {
+        this.unloadSrc();
+        this.loadSrc();
+      }
     }
   },
   data() {
@@ -47,6 +33,33 @@ export default {
     }
   },
   methods: {
+    loadSrc() {
+      if (this.src) {
+        if (this.$matrix.useAuthedMedia) {
+          axios
+            .get(this.src, {
+              responseType: "blob", headers: {
+                Authorization: `Bearer ${this.$matrix.matrixClient.getAccessToken()}`,
+              }
+            })
+            .then((response) => {
+              this.imageSrc = URL.createObjectURL(response.data);
+            })
+            .catch((err) => {
+              console.log("Download error: ", err);
+            });
+        } else {
+          this.imageSrc = this.src;
+        }
+      }
+    },
+    unloadSrc() {
+      if (this.imageSrc && this.src != this.imageSrc) {
+        const url = this.imageSrc;
+        this.imageSrc = null;
+        URL.revokeObjectURL(url);
+      }
+    }
   }
 };
 </script>

src/components/RoomAvatarPicker.vue

@@ -58,10 +58,7 @@ export default {
             self.isRoomAvatarLoaded = true;
           }
         }
-      ).then((url) => {
+      )
-        console.error("UPDATE AVATAR", url);
-        this.room.avatar = url;
-      })
     },
     handleRoomPickedAvatar(event) {
       if (event.target.files && event.target.files[0]) {

src/services/matrix.service.js

@@ -524,9 +524,7 @@ export default {
             return room.selfMembership && (room.selfMembership == "invite" || room.selfMembership == "join") && room.currentState.getStateEvents(STATE_EVENT_ROOM_DELETED).length == 0;
           });
           updatedRooms.forEach((room) => {
-            if (!room.avatar) {
+            Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true, this.useAuthedMedia));
-              Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true, this.useAuthedMedia));
-            }
           });
           Vue.set(this, "rooms", updatedRooms);
 
@@ -1236,7 +1234,7 @@ export default {
                 (roomId.startsWith("!") && room.room_id == roomId)
               ) {
                 if (room.avatar_url) {
-                  room.avatar = client.mxcUrlToHttp(room.avatar_url, 80, 80, "scale", true, undefined, useAuthedMedia);
+                  Vue.set(room, "avatar", client.mxcUrlToHttp(room.avatar_url, 80, 80, "scale", false, undefined, useAuthedMedia));
                 }
                 return Promise.resolve(room);
               }