diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index ed7a875..2ad24a6 100644 --- a/src/assets/css/chat.scss +++ b/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 { diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss index bf7302c..4ded415 100644 --- a/src/assets/css/join.scss +++ b/src/assets/css/join.scss @@ -42,7 +42,7 @@ .join-user-info { display: flex; flex-wrap: nowrap; - max-width: 40%; + max-width: 300px; } } diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index cb0793f..02e8803 100644 --- a/src/assets/css/main.scss +++ b/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; } \ No newline at end of file diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 7dbeb0f..fafcf28 100644 --- a/src/components/Chat.vue +++ b/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) { - if (room && room == oldRoom) { + handler(value, oldValue) { + 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 && - this.timelineWindow.canPaginate(EventTimeline.BACKWARDS)) { - return this.timelineWindow.paginate(EventTimeline.BACKWARDS, 10, true) + self.timelineWindow && + self.timelineWindow.canPaginate(EventTimeline.BACKWARDS)) { + return self.timelineWindow.paginate(EventTimeline.BACKWARDS, 10, true) .then(success => { if (success) { - this.events = this.timelineWindow.getEvents(); - return _getMoreIfNeeded.call(this); + self.events = self.timelineWindow.getEvents(); + 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); diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue index 3992253..c6bcd29 100644 --- a/src/components/ChatHeader.vue +++ b/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); - }); - } }, }; diff --git a/src/components/Join.vue b/src/components/Join.vue index 869b1c8..cc9061d 100644 --- a/src/components/Join.vue +++ b/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( - { name: "Chat", params: { roomId: this.roomId } }, - -1 - ); + this.$nextTick(() => { + this.$navigation.push( + { + 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 ); }); diff --git a/src/components/LeaveRoomDialog.vue b/src/components/LeaveRoomDialog.vue index 0593299..6018b01 100644 --- a/src/components/LeaveRoomDialog.vue +++ b/src/components/LeaveRoomDialog.vue @@ -1,9 +1,9 @@