Improved navigation and room handling

src/assets/css/chat.scss

@@ -531,7 +531,7 @@ $admin-fg: white;
     .user-info {
         display: flex;
         flex-wrap: nowrap;
-        max-width: 40%;
+        max-width: 80%;
     }
 
     .show-all {

src/assets/css/join.scss

@@ -42,7 +42,7 @@
     .join-user-info {
         display: flex;
         flex-wrap: nowrap;
-        max-width: 40%;
+        max-width: 300px;
     }
 }
 

src/assets/css/main.scss

@@ -52,4 +52,12 @@ $chat-button-height: 50px;
     height: $chat-standard-padding;
     margin-top: $chat-standard-padding-xs;
     margin-bottom: $chat-standard-padding-xs;
+}
+
+.dialog-title {
+    word-break: break-word;
+}
+
+.dialog-text {
+    word-break: break-word;
 }

src/components/Chat.vue

@@ -321,6 +321,12 @@ export default {
       }
       return this.$matrix.currentRoomId;
     },
+    roomAliasOrId() {
+      if (this.room) {
+        return this.room.getCanonicalAlias() || this.room.roomId;
+      }
+      return this.$matrix.currentRoomId;
+    },
     readMarker() {
       if (this.lastRR) {
         // If we have sent a RR, use that as read marker (so we don't have to wait for server round trip)
@@ -371,10 +377,10 @@ export default {
   },
 
   watch: {
-    room: {
+    roomId: {
       immediate: true,
-      handler(room, oldRoom) {
+      handler(value, oldValue) {
-        if (room && room == oldRoom) {
+        if (value && value == oldValue) {
           return; // No change.
         }
         console.log("Chat: Current room changed");
@@ -389,7 +395,7 @@ export default {
         this.stopRRTimer();
         this.lastRR = null;
 
-        if (!room) {
+        if (!this.room) {
           // Public room?
           if (this.roomId && this.roomId.startsWith('#')) {
             this.onRoomNotJoined();
@@ -398,7 +404,7 @@ export default {
         }
 
           // Joined?
-          if (room.hasMembershipState(this.currentUser.user_id, "join")) {
+          if (this.room.hasMembershipState(this.currentUser.user_id, "join")) {
             // Yes, load everything
             this.onRoomJoined();
           } else {
@@ -414,24 +420,28 @@ export default {
       var initialEventId = this.readMarker;
       console.log("Read up to " + initialEventId);
 
+      //initialEventId = null;
+      
       this.timelineWindow = new TimelineWindow(
           this.$matrix.matrixClient,
           this.room.getUnfilteredTimelineSet(),
           {}
       );
+      const self = this;
       this.timelineWindow.load(initialEventId, 20).then(() => {
-          this.events = this.timelineWindow.getEvents();
+        console.log("This is", self);
+          self.events = self.timelineWindow.getEvents();
 
           const getMoreIfNeeded = function _getMoreIfNeeded() {
-            const container = this.$refs.chatContainer;
+            const container = self.$refs.chatContainer;
             if (container.scrollHeight <= container.clientHeight && 
-              this.timelineWindow &&
+              self.timelineWindow &&
-              this.timelineWindow.canPaginate(EventTimeline.BACKWARDS)) {
+              self.timelineWindow.canPaginate(EventTimeline.BACKWARDS)) {
-                return this.timelineWindow.paginate(EventTimeline.BACKWARDS, 10, true)
+                return self.timelineWindow.paginate(EventTimeline.BACKWARDS, 10, true)
                   .then(success => {
                     if (success) {
-                      this.events = this.timelineWindow.getEvents();
+                      self.events = self.timelineWindow.getEvents();
-                      return _getMoreIfNeeded.call(this);
+                      return _getMoreIfNeeded.call(self);
                     } else {
                         return Promise.reject("Failed to paginate");
                       }
@@ -439,24 +449,24 @@ export default {
             } else {
               return Promise.resolve("Done");
             }            
-          }.bind(this);
+          }.bind(self);
 
           getMoreIfNeeded()
           .catch(err => {
             console.log("ERROR " + err);
           })
           .finally(() => {
-            this.initialLoadDone = true;
+            self.initialLoadDone = true;
           if (initialEventId) {
-            this.scrollToEvent(initialEventId);
+            self.scrollToEvent(initialEventId);
           }
-          this.restartRRTimer();
+          self.restartRRTimer();
           });
         });
     },
 
     onRoomNotJoined() {
-      this.$navigation.push({ name: "Join", params: { roomId: this.roomId }}, 0);
+      this.$navigation.push({ name: "Join", params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) }}, 0);
     },
 
     touchX(event) {
@@ -819,6 +829,7 @@ export default {
         .then((url) => {
           const link = document.createElement("a");
           link.href = url;
+          link.target = "_blank";
           link.download = event.getContent().body || "Download";
           link.click();
           URL.revokeObjectURL(url);

src/components/ChatHeader.vue

@@ -90,20 +90,6 @@ export default {
     leaveRoom() {
       this.showLeaveConfirmation = true;
     },
-
-    doLeaveRoom() {
-      //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
-      const roomId = this.room.roomId;
-      this.$matrix.matrixClient.leave(roomId, undefined)
-      .then(() => {
-        console.log("Left room");
-        this.$matrix.matrixClient.store.removeRoom(roomId);
-        this.$navigation.push({name:'Chat', params:{roomId:null}}, -1);
-      })
-      .catch(err => {
-        console.log("Error leaving", err);
-      });
-    }
   },
 };
 </script>

src/components/Join.vue

@@ -131,7 +131,6 @@ export default {
   name: "Join",
   data() {
     return {
-      roomId: null,
       roomName: null,
       roomAvatar: null,
       guestUser: new User("https://neo.keanu.im", "", "", true),
@@ -150,39 +149,6 @@ export default {
     this.$matrix.on("Room.myMembership", this.onMyMembership);
     this.availableAvatars = util.getDefaultAvatars();
     this.userAvatar = this.availableAvatars[0];
-
-    this.roomId = this.$matrix.currentRoomId;
-    this.roomName = this.roomId;
-    if (this.currentUser) {
-      this.waitingForMembership = true;
-      const self = this;
-      this.$matrix
-        .login(this.currentUser)
-        .then(() => {
-          self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
-
-          // Already joined?
-          const room = self.$matrix.getRoom(self.roomId);
-          if (
-            room &&
-            room.hasMembershipState(self.currentUser.user_id, "join")
-          ) {
-            // Yes, go to room
-            self.$navigation.push(
-              {
-                name: "Chat",
-                params: { roomId: util.sanitizeRoomId(self.roomId) },
-              },
-              -1
-            );
-            return;
-          }
-          this.waitingForMembership = false;
-        })
-        .catch((ignoredErr) => {
-          this.waitingForMembership = false;
-        });
-    }
     if (!this.currentUser || this.currentUser.is_guest) {
       var values = require("!!raw-loader!../assets/usernames.txt")
         .default.split("\n")
@@ -192,28 +158,6 @@ export default {
       this.displayName = values[Math.floor(Math.random() * values.length)];
       this.defaultDisplayNames = values;
     }
-
-    if (this.roomId.startsWith("#")) {
-      this.$matrix
-        .getPublicRoomInfo(this.roomId)
-        .then((room) => {
-          console.log("Found room:", room);
-          this.roomName = room.name;
-          this.roomAvatar = room.avatar;
-          this.waitingForInfo = false;
-        })
-        .catch((err) => {
-          console.log("Could not find room info", err);
-          this.waitingForInfo = false;
-        });
-    } else {
-      // Private room, try to get name
-      const room = this.$matrix.getRoom(this.roomId);
-      if (room) {
-        this.roomName = room.name || this.roomName;
-      }
-      this.waitingForInfo = false;
-    }
   },
   destroyed() {
     this.$matrix.off("Room.myMembership", this.onMyMembership);
@@ -222,14 +166,98 @@ export default {
     currentUser() {
       return this.$store.state.auth.user;
     },
+    room() {
+      return this.$matrix.currentRoom;
+    },
+    roomId() {
+      if (this.room) {
+        return this.room.roomId;
+      }
+      return this.$matrix.currentRoomId;
+    },
+    roomAliasOrId() {
+      if (this.room) {
+        return this.room.getCanonicalAlias() || this.room.roomId;
+      }
+      return this.$matrix.currentRoomId;
+    },
   },
+  watch: {
+    roomId: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val && val == oldVal) {
+          return; // No change.
+        }
+        console.log("Join: Current room changed");
+        this.roomName = this.roomId;
+        if (this.currentUser) {
+          this.waitingForMembership = true;
+          const self = this;
+          this.$matrix
+            .login(this.currentUser)
+            .then(() => {
+              self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
+              const room = self.$matrix.getRoom(self.roomAliasOrId);
+
+              // Already joined?
+              if (
+                room &&
+                room.hasMembershipState(self.currentUser.user_id, "join")
+              ) {
+                // Yes, go to room
+                self.$navigation.push(
+                  {
+                    name: "Chat",
+                    params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
+                  },
+                  -1
+                );
+                return;
+              }
+              this.waitingForMembership = false;
+            })
+            .catch((ignoredErr) => {
+              this.waitingForMembership = false;
+            });
+        }
+        if (this.roomId.startsWith("#")) {
+          this.$matrix
+            .getPublicRoomInfo(this.roomId)
+            .then((room) => {
+              console.log("Found room:", room);
+              this.roomName = room.name;
+              this.roomAvatar = room.avatar;
+              this.waitingForInfo = false;
+            })
+            .catch((err) => {
+              console.log("Could not find room info", err);
+              this.waitingForInfo = false;
+            });
+        } else {
+          // Private room, try to get name
+          const room = this.$matrix.getRoom(this.roomId);
+          if (room) {
+            this.roomName = room.name || this.roomName;
+          }
+          this.waitingForInfo = false;
+        }
+      },
+    },
+  },
+
   methods: {
     onMyMembership(room, membership, ignoredprevMembership) {
       if (room && room.roomId == this.roomId && membership == "join") {
-        this.$navigation.push(
+        this.$nextTick(() => {
-          { name: "Chat", params: { roomId: this.roomId } },
+          this.$navigation.push(
-          -1
+            {
-        );
+              name: "Chat",
+              params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
+            },
+            -1
+          );
+        });
       }
     },
 
@@ -290,12 +318,15 @@ export default {
             return this.$matrix.matrixClient.joinRoom(this.roomId);
           }.bind(this)
         )
-        .then((room) => {
+        .then((ignoredRoom) => {
           this.loading = false;
           this.loadingMessage = null;
           this.$nextTick(() => {
             this.$navigation.push(
-              { name: "Chat", params: { roomId: room.roomId } },
+              {
+                name: "Chat",
+                params: { roomId: util.sanitizeRoomId(this.roomAliasOrId) },
+              },
               -1
             );
           });

src/components/LeaveRoomDialog.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="50%">
+  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
     <v-card>
-      <v-card-title>Are you sure you want to leave?</v-card-title>
+      <v-card-title class="dialog-title">Are you sure you want to leave?</v-card-title>
       <v-card-text>
-        <div>You may not be able to rejoin.</div>
+        <div class="dialog-text">You may not be able to rejoin.</div>
       </v-card-text>
       <v-divider></v-divider>
       <v-card-actions>
@@ -13,7 +13,7 @@
           color="primary"
           text
           @click="
-            doLeaveRoom();
+            onLeaveRoom();
             showDialog = false;
           "
           >Next</v-btn
@@ -58,19 +58,17 @@ export default {
   },
 
   methods: {
-    doLeaveRoom() {
+    onLeaveRoom() {
       //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
       const roomId = this.room.roomId;
-      this.$matrix.matrixClient
+      this.$matrix.leaveRoom(roomId)
-        .leave(roomId, undefined)
+      .then(() => {
-        .then(() => {
+        console.log("Left room");
-          console.log("Left room");
+        this.$navigation.push({name:'Chat', params:{roomId:null}}, -1);
-          this.$matrix.matrixClient.store.removeRoom(roomId);
+      })
-          this.$navigation.push({ name: "Chat", params: { roomId: null } }, -1);
+      .catch(err => {
-        })
+        console.log("Error leaving", err);
-        .catch((err) => {
+      });
-          console.log("Error leaving", err);
-        });
     },
   },
 };

src/components/Profile.vue

@@ -30,7 +30,8 @@
             <div class="h1">{{ displayName }}</div>
             <div v-if="$matrix.currentUser.is_guest">
               This identity is temporary. Set a password to use it again.
-          </div>
+            </div>
+            <v-btn block class="outlined-button" @click.stop="logout">Logout</v-btn>
           </v-col>
         </v-row>
       </v-container>
@@ -177,6 +178,14 @@ export default {
       return null;
     },
 
+    logout() {
+      //TODO - For guest accounts, show warning about not being able to rejoin.
+      this.$store.dispatch("auth/logout");
+      this.$nextTick(() => {
+        this.$navigation.push({path: "/login"}, -1);
+      })
+    },
+
     setDisplayName(name) {
       this.$matrix.matrixClient.setDisplayName(name);
     },

src/services/matrix.service.js

@@ -76,7 +76,7 @@ export default {
                         promiseLogin = tempMatrixClient
                             .register(user, pass, null, {
                                 type: "m.login.dummy",
-                              })
+                            })
                             .then((response) => {
                                 console.log("Response", response);
                                 response.password = pass;
@@ -133,7 +133,7 @@ export default {
                     const self = this;
                     return this.matrixClient.register(this.matrixClient.getUserIdLocalpart(), randomPassword, null, {
                         type: "m.login.dummy",
-                      }, undefined, this.currentUser.access_token)
+                    }, undefined, this.currentUser.access_token)
                         .then((response) => {
                             console.log("Response", response);
                             response.is_guest = false;
@@ -148,7 +148,6 @@ export default {
                 initClient() {
                     this.reloadRooms();
                     this.matrixClientReady = true;
-                    this.currentRoom = this.getRoom(this.currentRoomId);
                     this.matrixClient.emit('Matrix.initialized', this.matrixClient);
                 },
 
@@ -279,7 +278,7 @@ export default {
                         this.matrixClientReady = false;
                     }
                     this.$store.commit("setCurrentRoomId", null);
-                    
+
                     // Clear the access token
                     var user = JSON.parse(localStorage.getItem('user'));
                     if (user) {
@@ -290,36 +289,56 @@ export default {
                 },
 
                 reloadRooms() {
-                    this.rooms = this.matrixClient.getVisibleRooms();
+                    // TODO - do incremental update instead of replacing the whole array
-                    this.rooms.forEach(room => {
+                    // each time!
-                        Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
+                    var updatedRooms = this.matrixClient.getVisibleRooms();
+                    updatedRooms = updatedRooms.filter(room => {
+                        return room._selfMembership;
                     });
-                    if (this.currentRoom == null && this.currentRoomId) {
+                    updatedRooms.forEach(room => {
-                        // Try to set it!
+                        if (!room.avatar) {
-                        this.currentRoom = this.getRoom(this.currentRoomId);
+                            Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
+                        }
+                    });
+                    Vue.set(this, "rooms", updatedRooms);
+                    const currentRoom = this.getRoom(this.currentRoomId);
+                    if (this.currentRoom != currentRoom) {
+                        this.currentRoom = currentRoom;
                     }
                 },
 
                 setCurrentRoomId(roomId) {
                     this.$store.commit("setCurrentRoomId", roomId);
+                    this.currentRoom = this.getRoom(roomId);
                 },
 
                 getRoom(roomId) {
                     if (!roomId) {
                         return null;
                     }
-                    var room = this.rooms.find(room => {
+                    var room = null;
-                        if (roomId.startsWith("#")) {
+                    if (this.matrixClient) {
-                            return room.getCanonicalAlias() == roomId;
+                        const visibleRooms = this.matrixClient.getRooms();
-                        }
+                        room = visibleRooms.find(room => {
-                        return room.roomId == roomId;
+                            if (roomId.startsWith("#")) {
-                    });
+                                return room.getCanonicalAlias() == roomId;
-                    if (!room && this.matrixClient) {
+                            }
-                        room = this.matrixClient.getRoom(roomId);
+                            return room.roomId == roomId;
+                        });
                     }
                     return room || null;
                 },
 
+                leaveRoom(roomId) {
+                    return this.matrixClient.leave(roomId, undefined)
+                        .then(() => {
+                            this.rooms = this.rooms.filter(room => {
+                                room.roomId != roomId;
+                            });
+                            this.matrixClient.forget(roomId, true, undefined);
+                        })
+                },
+
                 on(event, handler) {
                     if (this.matrixClient) {
                         this.matrixClient.on(event, handler);
@@ -351,33 +370,33 @@ export default {
 
                     const findOrGetMore = function _findOrGetMore(response) {
                         for (var room of response.chunk) {
-                            if ((roomId.startsWith("#") && room.canonical_alias == roomId) || (roomId.startsWith("!") && room.room_id == roomId)){
+                            if ((roomId.startsWith("#") && room.canonical_alias == roomId) || (roomId.startsWith("!") && room.room_id == roomId)) {
                                 room.avatar = tempMatrixClient.mxcUrlToHttp(room.avatar_url, 80, 80, 'scale', true);
                                 return Promise.resolve(room);
                             }
                         }
                         if (response.next_batch) {
-                            return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000, since:response.next_batch})
+                            return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", { limit: 1000, since: response.next_batch })
-                            //return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
+                                //return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
-                            .then(response => {
+                                .then(response => {
-                                return _findOrGetMore(response);
+                                    return _findOrGetMore(response);
-                            })
+                                })
-                            .catch(err => {
+                                .catch(err => {
-                                return Promise.reject("Failed to find room: " + err);
+                                    return Promise.reject("Failed to find room: " + err);
-                            });
+                                });
                         } else {
                             return Promise.reject("No more data");
                         }
                     };
 
-                    return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", {limit:1000})
+                    return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", { limit: 1000 })
-                    //return tempMatrixClient.publicRooms({limit:1})
+                        //return tempMatrixClient.publicRooms({limit:1})
-                    .then(response => {
+                        .then(response => {
-                        return findOrGetMore(response);
+                            return findOrGetMore(response);
-                    })
+                        })
-                    .catch(err => {
+                        .catch(err => {
-                        return Promise.reject("Failed to find room: " + err);
+                            return Promise.reject("Failed to find room: " + err);
-                    });
+                        });
                 }
             }
         })

src/services/navigation.service.js

@@ -1,6 +1,7 @@
 export default {
     install(Vue, router) {
         var routes = [];
+        var nextRoutes = null;
         var zeroIndex = undefined;
 
         router.beforeResolve((to, ignoredfrom, next) => {
@@ -12,20 +13,15 @@ export default {
         })
 
         router.beforeEach((to, from, next) => {
-            const index = routes.findIndex((item) => {
+            if (this.nextRoutes) {
-                return item.path == to.path || item.name == to.name;
+                console.log("Nav: next routes set, going:", this.routes, this.nextRoutes);
-            });
+                this.routes = this.nextRoutes;
-            if (index < 0 && routes.length > 0) {
+                this.nextRoutes = null;
-                next(routes[0]);
+                if (this.routes.length > 0) {
-                return;
+                    console.log("Redirecting to", this.routes.lastItem());
-            }
+                    next(this.routes.lastItem());
-            // If we have a room id param, it needs to be the same, else we call "next" with the correct one
+                    return;
-            if (index >= 0 && routes[index].params && to.params && routes[index].params.roomId != to.params.roomId) {
+                }
-                next(routes[0]);
-                return;
-            }
-            if (index >= 0) {
-                routes.splice(index + 1);
             }
             next();
         })
@@ -40,7 +36,7 @@ export default {
                 }
                 if (mode == -1) {
                     const i = routes.length - 1;
-                    routes = [route];
+                    nextRoutes = [route];
                     if (i > 0) {
                         router.go(-i);
                     } else {
@@ -48,20 +44,27 @@ export default {
                     }
                 } else if (mode == 0) {
                     // Replace
-                    routes.pop()
+                    nextRoutes = [...routes];
-                    routes.push(route);
+                    nextRoutes.pop();
+                    nextRoutes.push(route);
                     router.replace(route).catch((ignoredErr) => {});
                 } else {
-                    routes.push(route);
+                    nextRoutes = [...routes];
+                    nextRoutes.push(route);
                     router.push(route).catch((ignoredErr) => {});
                 }
             },
 
             canPop() {
+                if (nextRoutes) {
+                    return nextRoutes.length > 1;
+                }
                 return routes.length > 1;
             },
 
             pop() {
+                nextRoutes = [...routes];
+                nextRoutes.pop();
                 router.go(-1);
             }
         }