From 8e7e6cf3f7651b0c5d5c4fd78068279d68bb0194 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 31 Mar 2025 17:30:12 +0200
Subject: [PATCH] Fix room avatars

---
 src/components/AuthedImage.vue      | 59 ++++++++++++++++++-----------
 src/components/RoomAvatarPicker.vue |  5 +--
 src/services/matrix.service.js      |  6 +--
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/AuthedImage.vue b/src/components/AuthedImage.vue
index d2a85ae..3cf4e49 100644
--- a/src/components/AuthedImage.vue
+++ b/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) {
-      const url = this.imageSrc;
-      this.imageSrc = null;
-      URL.revokeObjectURL(url);
+    this.unloadSrc();
+  },
+  watch: {
+    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>
diff --git a/src/components/RoomAvatarPicker.vue b/src/components/RoomAvatarPicker.vue
index 4ed4d2a..d768b2f 100644
--- a/src/components/RoomAvatarPicker.vue
+++ b/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]) {
diff --git a/src/services/matrix.service.js b/src/services/matrix.service.js
index dfb93c7..28d31b8 100644
--- a/src/services/matrix.service.js
+++ b/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);
               }