butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improved navigation and room handling

Browse source
This commit is contained in:
N-Pex 2021-01-28 22:13:08 +01:00
parent 8d652767be
commit 8555436bc7
10 changed files with 229 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/chat.scss
View file

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

2
src/assets/css/join.scss
View file

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

8
src/assets/css/main.scss
View file

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

45
src/components/Chat.vue
View file

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

14
src/components/ChatHeader.vue
View file

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

155
src/components/Join.vue
View file

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

28
src/components/LeaveRoomDialog.vue
View file

@ -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
.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);
});
this.$matrix.leaveRoom(roomId)
.then(() => {
console.log("Left room");
this.$navigation.push({name:'Chat', params:{roomId:null}}, -1);
})
.catch(err => {
console.log("Error leaving", err);
});
},
},
};

11
src/components/Profile.vue
View file

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

89
src/services/matrix.service.js
View file

@ -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();
this.rooms.forEach(room => {
Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
// TODO - do incremental update instead of replacing the whole array
// each time!
var updatedRooms = this.matrixClient.getVisibleRooms();
updatedRooms = updatedRooms.filter(room => {
return room._selfMembership;
});
if (this.currentRoom == null && this.currentRoomId) {
// Try to set it!
this.currentRoom = this.getRoom(this.currentRoomId);
updatedRooms.forEach(room => {
if (!room.avatar) {
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 => {
if (roomId.startsWith("#")) {
return room.getCanonicalAlias() == roomId;
}
return room.roomId == roomId;
});
if (!room && this.matrixClient) {
room = this.matrixClient.getRoom(roomId);
var room = null;
if (this.matrixClient) {
const visibleRooms = this.matrixClient.getRooms();
room = visibleRooms.find(room => {
if (roomId.startsWith("#")) {
return room.getCanonicalAlias() == 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.publicRooms({limit:1,next_batch:response.next_batch})
.then(response => {
return _findOrGetMore(response);
})
.catch(err => {
return Promise.reject("Failed to find room: " + err);
});
return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", { limit: 1000, since: response.next_batch })
//return tempMatrixClient.publicRooms({limit:1,next_batch:response.next_batch})
.then(response => {
return _findOrGetMore(response);
})
.catch(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.publicRooms({limit:1})
.then(response => {
return findOrGetMore(response);
})
.catch(err => {
return Promise.reject("Failed to find room: " + err);
});
return tempMatrixClient._http.request(undefined, "GET", "/publicRooms", { limit: 1000 })
//return tempMatrixClient.publicRooms({limit:1})
.then(response => {
return findOrGetMore(response);
})
.catch(err => {
return Promise.reject("Failed to find room: " + err);
});
}
}
})

39
src/services/navigation.service.js
View file

@ -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) => {
return item.path == to.path || item.name == to.name;
});
if (index < 0 && routes.length > 0) {
next(routes[0]);
return;
}
// If we have a room id param, it needs to be the same, else we call "next" with the correct one
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);
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());
return;
}
}
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()
routes.push(route);
nextRoutes = [...routes];
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);
}
}