From bdd6977728d60b1a42553d82456c0dca9c2f2323 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Fri, 29 Jan 2021 21:41:43 +0100 Subject: [PATCH] Don't set avatar and display name if they haven't changed. Related to issue #40. --- src/App.vue | 14 ++++++++++ src/components/Chat.vue | 2 +- src/components/Join.vue | 43 +++++++++++++++++++++--------- src/plugins/utils.js | 2 +- src/router/index.js | 14 ++++++++-- src/services/matrix.service.js | 15 ++++++++++- src/services/navigation.service.js | 37 ++++++++++++++----------- 7 files changed, 94 insertions(+), 33 deletions(-) diff --git a/src/App.vue b/src/App.vue index 977910b..3c56204 100644 --- a/src/App.vue +++ b/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) { diff --git a/src/components/Chat.vue b/src/components/Chat.vue index fafcf28..6035293 100644 --- a/src/components/Chat.vue +++ b/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 = []; diff --git a/src/components/Join.vue b/src/components/Join.vue index cc9061d..922af50 100644 --- a/src/components/Join.vue +++ b/src/components/Join.vue @@ -25,7 +25,7 @@ - + @@ -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 }" > @@ -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) { - if (val && val == oldVal) { + handler(value, 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; }, }, diff --git a/src/plugins/utils.js b/src/plugins/utils.js index 22e56c5..2d3d137 100644 --- a/src/plugins/utils.js +++ b/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); diff --git a/src/router/index.js b/src/router/index.js index 1af2610..132516f 100644 --- a/src/router/index.js +++ b/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', diff --git a/src/services/matrix.service.js b/src/services/matrix.service.js index cd36f9b..820b841 100644 --- a/src/services/matrix.service.js +++ b/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; } diff --git a/src/services/navigation.service.js b/src/services/navigation.service.js index 842ef0d..cf2b658 100644 --- a/src/services/navigation.service.js +++ b/src/services/navigation.service.js @@ -13,13 +13,13 @@ export default { }) router.beforeEach((to, from, next) => { - if (this.nextRoutes) { - console.log("Nav: next routes set, going:", this.routes, this.nextRoutes); - this.routes = this.nextRoutes; - this.nextRoutes = null; - if (this.routes.length > 0) { - console.log("Redirecting to", this.routes.lastItem()); - next(this.routes.lastItem()); + if (nextRoutes) { + console.log("Nav: next routes set, going:", routes, nextRoutes); + routes = nextRoutes; + nextRoutes = null; + if (routes.length > 0) { + console.log("Redirecting to", routes[routes.length - 1]); + 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]; - nextRoutes.pop(); + routes.pop(); router.go(-1); } }