Improved navigation and room handling
This commit is contained in:
N-Pex
parent
8d652767be
commit
8555436bc7
10 changed files with 229 additions and 164 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue