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

Related to issue #40.
This commit is contained in:
N-Pex 2021-01-29 21:41:43 +01:00
parent 8555436bc7
commit bdd6977728
7 changed files with 94 additions and 33 deletions

View file

@ -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) {

View file

@ -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 = [];

View file

@ -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) {
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;
},
},

View file

@ -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);

View file

@ -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',

View file

@ -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;
}

View file

@ -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);
}
}