Don't set avatar and display name if they haven't changed.

Related to issue #40.

src/App.vue

@@ -81,6 +81,20 @@ export default {
     },
   },
   watch: {
+    '$route' (to, ignoredFrom) {
+      var title = "Keanu Weblite";
+      if (to.meta.title) {
+        title += "  - " + to.meta.title;
+      }
+      if (to.meta.includeRoom) {
+        if (this.$matrix.currentRoom) {
+          title += " - " + (this.$matrix.currentRoom.summary.info.title || this.$matrix.currentRoom.roomId);
+        } else if (this.$matrix.currentRoomId) {
+          title += " - " + (this.$matrix.currentRoomId);
+        }
+      }
+      document.title = title;
+    },
     currentUser: {
       immediate: true,
       handler(ignorednewVal, ignoredoldVal) {

src/components/Chat.vue

@@ -383,7 +383,7 @@ export default {
         if (value && value == oldValue) {
           return; // No change.
         }
-        console.log("Chat: Current room changed");
+        console.log("Chat: Current room changed to " + (value ? value : "null"));
 
         // Clear old events
         this.events = [];

src/components/Join.vue

@@ -25,7 +25,7 @@
         <v-row>
           <v-col class="flex-grow-0 flex-shrink-0">
             <v-avatar @click="showAvatarPicker = true">
-              <v-img v-if="userAvatar" :src="userAvatar.image" />
+              <v-img v-if="avatar" :src="avatar.image" />
             </v-avatar>
           </v-col>
           <v-col class="flex-shrink-1 flex-grow-1">
@@ -33,7 +33,7 @@
               v-if="!currentUser || currentUser"
               @update:search-input="updateDisplayName"
               :items="defaultDisplayNames"
-              :value="displayName"
+              :value="userDisplayName || displayName"
               label="User name"
               outlined
               dense
@@ -109,7 +109,7 @@
                     size="48"
                     @click="selectAvatar(avatar)"
                     class="avatar-picker-avatar"
-                    :class="{ current: avatar === userAvatar }"
+                    :class="{ current: avatar === selectedAvatar }"
                   >
                     <img :src="avatar.image" />
                   </v-avatar>
@@ -138,17 +138,18 @@ export default {
       loadingMessage: null,
       waitingForInfo: true,
       waitingForMembership: false,
-      userAvatar: null,
+      selectedAvatar: null,
       displayName: null,
       defaultDisplayNames: [],
       availableAvatars: [],
       showAvatarPicker: false,
+      shouldSetAvatar: false,
     };
   },
   mounted() {
     this.$matrix.on("Room.myMembership", this.onMyMembership);
     this.availableAvatars = util.getDefaultAvatars();
-    this.userAvatar = this.availableAvatars[0];
+    this.selectedAvatar = this.userAvatar || this.availableAvatars[0];
     if (!this.currentUser || this.currentUser.is_guest) {
       var values = require("!!raw-loader!../assets/usernames.txt")
         .default.split("\n")
@@ -181,15 +182,30 @@ export default {
       }
       return this.$matrix.currentRoomId;
     },
+    userDisplayName() {
+      return this.$matrix.userDisplayName;
+    },
+    userAvatar() {
+      if (!this.$matrix.userAvatar) {
+        return null;
+      }
+      return { id: 'user', image: this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, 'scale', true) };
+    },
+    avatar() {
+      if (!this.shouldSetAvatar) {
+        return this.userAvatar || this.selectedAvatar; // TODO - Use random
+      }
+      return this.selectedAvatar;
+    }
   },
   watch: {
     roomId: {
       immediate: true,
-      handler(val, oldVal) {
+      handler(value, oldVal) {
-        if (val && val == oldVal) {
+        if (!value || (value && value == oldVal)) {
           return; // No change.
         }
-        console.log("Join: Current room changed");
+        console.log("Join: Current room changed to " + (value ? value : "null"));
         this.roomName = this.roomId;
         if (this.currentUser) {
           this.waitingForMembership = true;
@@ -283,7 +299,7 @@ export default {
           function (user) {
             if (
               (this.currentUser && !this.currentUser.is_guest) ||
-              !this.displayName
+              !this.displayName || this.displayName == this.userDisplayName /* No change */
             ) {
               return Promise.resolve(user);
             } else {
@@ -298,13 +314,13 @@ export default {
           function () {
             if (
               (this.currentUser && !this.currentUser.is_guest) ||
-              !this.userAvatar
+              !this.shouldSetAvatar
             ) {
               return Promise.resolve("no avatar");
             } else {
               return util.setAvatar(
                 this.$matrix.matrixClient,
-                this.userAvatar.image,
+                this.selectedAvatar.image,
                 function (progress) {
                   console.log("Progress: " + JSON.stringify(progress));
                 }
@@ -344,7 +360,10 @@ export default {
     },
 
     selectAvatar(avatar) {
-      this.userAvatar = avatar;
+      if (avatar && (!this.userAvatar || this.userAvatar.image != avatar.image)) {
+        this.selectedAvatar = avatar;
+        this.shouldSetAvatar = true;
+      }
       this.showAvatarPicker = false;
     },
   },

src/plugins/utils.js

@@ -405,7 +405,7 @@ class Util {
                     matrixClient.uploadContent(response.data, opts)
                         .then((response) => {
                             const uri = response.content_uri;
-                            return matrixClient.setProfileInfo('avatar_url', { avatar_url: uri });
+                            return matrixClient.setAvatarUrl(uri);
                         })
                         .then(result => {
                             resolve(result);

src/router/index.js

@@ -18,18 +18,28 @@ const routes = [
   {
     path: '/room/:roomId?',
     name: 'Chat',
-    component: Chat
+    component: Chat,
+    meta: {
+      includeRoom: true
+    }
   },
   {
     path: '/info',
     name: 'RoomInfo',
     component: () => import('../components/RoomInfo.vue'),
     props: true,
+    meta: {
+      title: 'Info',
+      includeRoom: true
+    }
   },
   {
     path: '/profile',
     name: 'Profile',
-    component: Profile
+    component: Profile,
+    meta: {
+      title: 'Profile'
+    }
   },
   {
     path: '/login',

src/services/matrix.service.js

@@ -25,6 +25,8 @@ export default {
                     matrixClient: null,
                     matrixClientReady: false,
                     rooms: [],
+                    userDisplayName: null,
+                    userAvatar: null,
                     currentRoom: null,
                 }
             },
@@ -149,6 +151,15 @@ export default {
                     this.reloadRooms();
                     this.matrixClientReady = true;
                     this.matrixClient.emit('Matrix.initialized', this.matrixClient);
+                    this.matrixClient.getProfileInfo(this.currentUserId)
+                    .then(info => {
+                        console.log("Got user profile: " + JSON.stringify(info));
+                        this.userDisplayName = info.displayname;
+                        this.userAvatar = info.avatar_url;
+                    })
+                    .catch(err => {
+                        console.log("Failed to get user profile: ", err);
+                    })
                 },
 
                 async getMatrixClient(user) {
@@ -266,6 +277,7 @@ export default {
                 },
 
                 onRoom(ignoredroom) {
+                    console.log("Got room: " + ignoredroom);
                     this.reloadRooms();
                 },
 
@@ -300,8 +312,9 @@ export default {
                             Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
                         }
                     });
+                    console.log("Reload rooms", updatedRooms);
                     Vue.set(this, "rooms", updatedRooms);
-                    const currentRoom = this.getRoom(this.currentRoomId);
+                    const currentRoom = this.getRoom(this.$store.state.currentRoomId);
                     if (this.currentRoom != currentRoom) {
                         this.currentRoom = currentRoom;
                     }

src/services/navigation.service.js

@@ -13,13 +13,13 @@ export default {
         })
 
         router.beforeEach((to, from, next) => {
-            if (this.nextRoutes) {
+            if (nextRoutes) {
-                console.log("Nav: next routes set, going:", this.routes, this.nextRoutes);
+                console.log("Nav: next routes set, going:", routes, nextRoutes);
-                this.routes = this.nextRoutes;
+                routes = nextRoutes;
-                this.nextRoutes = null;
+                nextRoutes = null;
-                if (this.routes.length > 0) {
+                if (routes.length > 0) {
-                    console.log("Redirecting to", this.routes.lastItem());
+                    console.log("Redirecting to", routes[routes.length - 1]);
-                    next(this.routes.lastItem());
+                    next(routes[routes.length - 1]);
                     return;
                 }
             }
@@ -35,22 +35,28 @@ export default {
                     mode = 1;
                 }
                 if (mode == -1) {
-                    const i = routes.length - 1;
                     nextRoutes = [route];
-                    if (i > 0) {
-                        router.go(-i);
-                    } else {
-                        router.replace(route).catch((ignoredErr) => {});
-                    }
                 } else if (mode == 0) {
                     // Replace
                     nextRoutes = [...routes];
                     nextRoutes.pop();
                     nextRoutes.push(route);
-                    router.replace(route).catch((ignoredErr) => {});
                 } else {
                     nextRoutes = [...routes];
                     nextRoutes.push(route);
+                }
+
+                const index = nextRoutes.length - routes.length;
+                const targetIndex = nextRoutes.length - 1;
+                console.log("Nav - index " + index + " Target " + targetIndex);
+                if (index < 0) {
+                    console.log("Nav - go " + index);
+                    router.go(index);
+                } else if (index == 0) {
+                    console.log("Nav - replace");
+                    router.replace(route).catch((ignoredErr) => {});
+                } else {
+                    console.log("Nav - push");
                     router.push(route).catch((ignoredErr) => {});
                 }
             },
@@ -63,8 +69,7 @@ export default {
             },
 
             pop() {
-                nextRoutes = [...routes];
+                routes.pop();
-                nextRoutes.pop();
                 router.go(-1);
             }
         }