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

Add matrix service to $matrix and move room handling to that

Browse source
This commit is contained in:
N-Pex 2020-11-09 15:08:36 +01:00
parent 2ca7dd3655
commit c88931e00c
7 changed files with 239 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/components/Chat.vue
View file

@ -10,7 +10,7 @@
<div
class="messageJoin"
v-if="
event.event.state_key != myAddress &&
event.event.state_key != myUserId &&
event.getContent().membership == 'join' &&
event.getType() == 'm.room.member'
"
@ -22,7 +22,7 @@
<div
class="messageJoin"
v-if="
event.event.state_key != myAddress &&
event.event.state_key != myUserId &&
event.getContent().membership == 'leave' &&
event.getType() == 'm.room.member'
"
@ -34,7 +34,7 @@
<div
class="messageJoin"
v-if="
event.event.state_key != myAddress &&
event.event.state_key != myUserId &&
event.getContent().membership == 'invite' &&
event.getType() == 'm.room.member'
"
@ -44,7 +44,7 @@
<div
v-else-if="
event.getSender() != myAddress &&
event.getSender() != myUserId &&
event.getType() == 'm.room.message'
"
>
@ -108,81 +108,76 @@ export default {
}),
computed: {
room() {
return this.$store.state.currentRoom;
myUserId() {
return this.$store.state.auth.user.user_id;
},
roomId() {
return this.room != null ? this.room.roomId : null;
return this.$matrix.currentRoomId;
},
sendButtonDisabled() {
return this.currentInput.length == 0;
},
myAddress() {
// TODO
return "@npex2:neo.keanu.im";
},
},
watch: {
room() {
roomId() {
console.log("Chat: Current room changed");
// Clear old events
this.events = [];
// Remove all old room listeners
this.$matrixClient.removeAllListeners("Room.timeline");
this.$matrixClient.removeAllListeners("RoomMember.typing");
this.$matrix.off("Room.timeline", this.onEvent);
this.$matrix.off("RoomMember.typing", this.onUserTyping);
this.contactIsTyping = false;
if (!this.room) {
if (!this.roomId) {
return; // no room
}
const room = this.$matrix.getRoom(this.roomId);
if (!room) {
return; // Not found
}
this.room.timeline.forEach((event) => {
room.timeline.forEach((event) => {
this.handleMatrixEvent(event);
});
// Add event listener for this room
this.$matrixClient.on(
"Room.timeline",
function (event, ignoredroom, ignoredtoStartOfTimeline) {
if (event.getRoomId() !== this.roomId) {
return; // Not for this room
}
if (this.handleMatrixEvent(event)) {
this.$nextTick(function () {
const container = this.$refs.chatContainer;
if (container.children.length > 0) {
const lastChild =
container.children[container.children.length - 1];
console.log("Scroll into view", lastChild);
window.requestAnimationFrame(() => {
lastChild.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest",
});
});
}
});
}
}.bind(this)
);
this.$matrixClient.on(
"RoomMember.typing",
function (event, member) {
if (member.userId == this.contactAddress) {
this.contactIsTyping = member.typing;
}
}.bind(this)
);
this.$matrix.on("Room.timeline", this.onEvent);
this.$matrix.on("RoomMember.typing", this.onUserTyping);
},
},
methods: {
onEvent(event) {
if (event.getRoomId() !== this.roomId) {
return; // Not for this room
}
if (this.handleMatrixEvent(event)) {
this.$nextTick(function () {
const container = this.$refs.chatContainer;
if (container.children.length > 0) {
const lastChild = container.children[container.children.length - 1];
console.log("Scroll into view", lastChild);
window.requestAnimationFrame(() => {
lastChild.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest",
});
});
}
});
}
},
onUserTyping(event) {
//TODO
console.log("Typing:", event);
},
/**
* Handle a matrix event. Add it to our array if valid type.
* @returns True if the event was added, false otherwise.

69
src/components/RoomList.vue
View file

@ -1,8 +1,8 @@
<template>
<v-list flat>
<v-subheader>ROOMS</v-subheader>
<v-list-item-group v-model="currentRoomIndex" color="primary">
<v-list-item v-for="(room, i) in rooms" :key="i">
<v-list-item-group v-model="currentRoomId" color="primary">
<v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
<v-list-item-icon>
<v-icon v-text="room.icon"></v-icon>
</v-list-item-icon>
@ -11,12 +11,11 @@
v-text="room.summary.info.title"
></v-list-item-title>
<v-list-item-content
>Topic: {{ room.summary.info.desc }}</v-list-item-content
>Topic: {{ room.topic }}</v-list-item-content
>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
<v-btn @click="reloadRooms">Refresh</v-btn>
</v-list>
</template>
@ -25,68 +24,12 @@ export default {
name: "RoomList",
data: () => ({
rooms: [],
currentRoomIndex: -1,
currentRoomId: -1,
}),
mounted() {
this.reloadRooms();
this.$matrixClient.on("Room.name", this.onRoomNameChanged);
this.$matrixClient.on("event", this.onEvent);
},
destroyed() {
this.$matrixClient.off("Room.name", this.onRoomNameChanged);
this.$matrixClient.off("event", this.onEvent);
},
watch: {
currentRoomIndex() {
var currentRoom =
this.currentRoomIndex >= 0 && this.currentRoomIndex < this.rooms.length
? this.rooms[this.currentRoomIndex]
: null;
this.$emit("onCurrentRoomChanged", currentRoom);
},
},
methods: {
onEvent(event) {
if (event.getType() == "m.room.topic") {
const room = this.rooms.find((r) => {
return (r.roomId == event.getRoomId());
})
if (room) {
room.summary.info.desc = event.getContent().topic;
}
return;
}
const allowedEvents = [
"m.room.message"
];
if (allowedEvents.includes(event.getType())) {
// TODO - find "last message"...
}
},
onRoomNameChanged(room) {
console.log("New name for room: " + room.name);
},
reloadRooms() {
var rooms = this.$matrixClient.getVisibleRooms();
rooms.forEach((room) => {
console.log("Room", room);
});
this.rooms = rooms;
// Default to first room if available
if (this.rooms.length > 0 && this.currentRoomIndex == -1) {
this.currentRoomIndex = 0;
} else if (this.rooms.length == 0) {
this.currentRoomIndex = -1;
}
currentRoomId() {
this.$matrix.setCurrentRoomId(this.currentRoomId);
},
},
};