Add matrix service to $matrix and move room handling to that
This commit is contained in:
N-Pex
parent
2ca7dd3655
commit
c88931e00c
7 changed files with 239 additions and 213 deletions
21
src/App.vue
21
src/App.vue
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-app-bar app dark>
|
||||
<v-app-bar app dark flat color="#008860">
|
||||
<v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
|
||||
<v-icon>menu</v-icon>
|
||||
</v-app-bar-nav-icon>
|
||||
|
||||
<v-toolbar-title
|
||||
>Keanu{{ room ? " - " + room.name : "" }}</v-toolbar-title
|
||||
>Keanu{{ $matrix.currentRoom ? (" - " + $matrix.currentRoom.summary.info.title) : "" }}</v-toolbar-title
|
||||
>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
|
@ -39,8 +39,7 @@
|
|||
<v-navigation-drawer app v-model="openDrawer">
|
||||
<v-list nav dense>
|
||||
<RoomList
|
||||
v-if="$matrixClient != null"
|
||||
v-on:onCurrentRoomChanged="onCurrentRoomChanged"
|
||||
v-if="$matrix.ready"
|
||||
/>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
|
@ -54,7 +53,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import RoomList from "./components/RoomList";
|
||||
|
||||
export default {
|
||||
|
|
@ -64,7 +62,6 @@ export default {
|
|||
},
|
||||
data: () => ({
|
||||
openDrawer: false,
|
||||
currentRoom: null,
|
||||
}),
|
||||
mounted() {
|
||||
this.$router.replace("/");
|
||||
|
|
@ -76,28 +73,22 @@ export default {
|
|||
logOut() {
|
||||
this.$store.dispatch("auth/logout");
|
||||
this.$router.replace("/login");
|
||||
this.$store.commit("setCurrentRoom", null);
|
||||
},
|
||||
onCurrentRoomChanged(room) {
|
||||
this.$store.commit("setCurrentRoom", room);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
},
|
||||
room() {
|
||||
return this.$store.state.currentRoom;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentUser: {
|
||||
immediate: true,
|
||||
handler(ignorednewVal, ignoredoldVal) {
|
||||
if (this.loggedIn) {
|
||||
const self = this;
|
||||
this.$matrix.getMatrixClient(this.currentUser)
|
||||
.then((matrixClient) => {
|
||||
Vue.prototype.$matrixClient = matrixClient;
|
||||
.then(() => {
|
||||
self.$matrix.initClient();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error creating client", error);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$chat-background: #f5fdf5;
|
||||
$chat-background: #008860;
|
||||
$chat-standard-padding: 32px;
|
||||
$chat-standard-padding-s: 16px;
|
||||
$chat-standard-padding-xs: 8px;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css'
|
|||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(matrix, {store: store});
|
||||
|
||||
new Vue({
|
||||
vuetify,
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
global.Olm = require("olm");
|
||||
import sdk from "matrix-js-sdk";
|
||||
import Vue from 'vue';
|
||||
|
||||
const LocalStorageCryptoStore = require("matrix-js-sdk/lib/crypto/store/localStorage-crypto-store")
|
||||
.LocalStorageCryptoStore;
|
||||
|
|
@ -8,88 +7,184 @@ sdk.setCryptoStoreFactory(
|
|||
() => new LocalStorageCryptoStore(window.localStorage)
|
||||
);
|
||||
|
||||
class MatrixService {
|
||||
constructor() {
|
||||
this.matrixClient = null;
|
||||
}
|
||||
|
||||
login(user) {
|
||||
const tempMatrixClient = sdk.createClient(user.server);
|
||||
return tempMatrixClient
|
||||
.login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
|
||||
.then((response) => {
|
||||
localStorage.setItem('user', JSON.stringify(response));
|
||||
return response;
|
||||
})
|
||||
}
|
||||
|
||||
logout() {
|
||||
localStorage.removeItem('user');
|
||||
}
|
||||
|
||||
async getMatrixClient(user) {
|
||||
const matrixStore = new sdk.MemoryStore(window.localStorage);
|
||||
const webStorageSessionStore = new sdk.WebStorageSessionStore(
|
||||
window.localStorage
|
||||
);
|
||||
|
||||
var homeServer = user.home_server;
|
||||
if (!homeServer.startsWith("https://")) {
|
||||
homeServer = "https://" + homeServer;
|
||||
export default {
|
||||
install(Vue, options) {
|
||||
if (!options || !options.store) {
|
||||
throw new Error('Please initialise plugin with a Vuex store.')
|
||||
}
|
||||
|
||||
var opts = {
|
||||
baseUrl: homeServer,
|
||||
userId: user.user_id,
|
||||
store: matrixStore,
|
||||
sessionStore: webStorageSessionStore,
|
||||
deviceId: user.device_id,
|
||||
accessToken: user.access_token
|
||||
}
|
||||
user.matrixClient = sdk.createClient(opts);
|
||||
return user.matrixClient
|
||||
.initCrypto()
|
||||
.then(() => {
|
||||
console.log("Crypto initialized");
|
||||
user.matrixClient.startClient();
|
||||
return user.matrixClient;
|
||||
})
|
||||
.then(matrixClient => {
|
||||
if (matrixClient.isInitialSyncComplete()) {
|
||||
console.log("Initial sync done already!");
|
||||
return matrixClient;
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
matrixClient.once(
|
||||
"sync",
|
||||
function (state, ignoredprevState, ignoredres) {
|
||||
console.log(state); // state will be 'PREPARED' when the client is ready to use
|
||||
if (state == "PREPARED") {
|
||||
resolve(matrixClient);
|
||||
} else if (state == "ERROR") {
|
||||
reject("Error syncing");
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
const store = options.store;
|
||||
|
||||
const matrixService = new Vue({
|
||||
store,
|
||||
|
||||
data() {
|
||||
return {
|
||||
matrixClient: null,
|
||||
rooms: [],
|
||||
}
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
console.log("Matrix service mounted");
|
||||
},
|
||||
|
||||
computed: {
|
||||
ready() {
|
||||
return this.matrixClient != null;
|
||||
},
|
||||
|
||||
currentUser() {
|
||||
return this.$store.state.auth.user;
|
||||
},
|
||||
|
||||
currentRoomId() {
|
||||
return this.$store.state.currentRoomId;
|
||||
},
|
||||
|
||||
currentRoom() {
|
||||
return this.getRoom(this.currentRoomId);
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
login(user) {
|
||||
const tempMatrixClient = sdk.createClient(user.server);
|
||||
var retUser;
|
||||
return tempMatrixClient
|
||||
.login("m.login.password", { user: user.username, password: user.password, type: "m.login.password" })
|
||||
.then((response) => {
|
||||
localStorage.setItem('user', JSON.stringify(response));
|
||||
return response;
|
||||
})
|
||||
.then(user => {
|
||||
retUser = user;
|
||||
return this.getMatrixClient(user);
|
||||
})
|
||||
.then(() => {
|
||||
// Ready to use! Start by loading rooms.
|
||||
this.initClient();
|
||||
return retUser;
|
||||
})
|
||||
},
|
||||
|
||||
logout() {
|
||||
if (this.matrixClient) {
|
||||
this.removeMatrixClientListeners(this.matrixClient);
|
||||
this.matrixClient.stopClient();
|
||||
this.matrixClient = null;
|
||||
localStorage.removeItem('user');
|
||||
}
|
||||
this.$store.commit("setCurrentRoomId", null);
|
||||
},
|
||||
|
||||
initClient() {
|
||||
this.reloadRooms();
|
||||
},
|
||||
|
||||
async getMatrixClient(user) {
|
||||
const matrixStore = new sdk.MemoryStore(window.localStorage);
|
||||
const webStorageSessionStore = new sdk.WebStorageSessionStore(
|
||||
window.localStorage
|
||||
);
|
||||
|
||||
var homeServer = user.home_server;
|
||||
if (!homeServer.startsWith("https://")) {
|
||||
homeServer = "https://" + homeServer;
|
||||
}
|
||||
|
||||
var opts = {
|
||||
baseUrl: homeServer,
|
||||
userId: user.user_id,
|
||||
store: matrixStore,
|
||||
sessionStore: webStorageSessionStore,
|
||||
deviceId: user.device_id,
|
||||
accessToken: user.access_token
|
||||
}
|
||||
this.matrixClient = sdk.createClient(opts);
|
||||
return this.matrixClient
|
||||
.initCrypto()
|
||||
.then(() => {
|
||||
console.log("Crypto initialized");
|
||||
|
||||
this.addMatrixClientListeners(this.matrixClient);
|
||||
|
||||
this.matrixClient.startClient();
|
||||
return this.matrixClient;
|
||||
})
|
||||
.then(matrixClient => {
|
||||
if (matrixClient.isInitialSyncComplete()) {
|
||||
console.log("Initial sync done already!");
|
||||
return matrixClient;
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
matrixClient.once(
|
||||
"sync",
|
||||
function (state, ignoredprevState, ignoredres) {
|
||||
console.log(state); // state will be 'PREPARED' when the client is ready to use
|
||||
if (state == "PREPARED") {
|
||||
resolve(matrixClient);
|
||||
} else if (state == "ERROR") {
|
||||
reject("Error syncing");
|
||||
}
|
||||
}
|
||||
)
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addMatrixClientListeners(client) {
|
||||
if (client) {
|
||||
client.on("event", this.onEvent);
|
||||
}
|
||||
},
|
||||
|
||||
removeMatrixClientListeners(client) {
|
||||
if (client) {
|
||||
client.off("event", this.onEvent);
|
||||
}
|
||||
},
|
||||
|
||||
onEvent(event) {
|
||||
if (event.getType() == "m.room.topic") {
|
||||
const room = this.matrixClient.getRoom(event.getRoomId());
|
||||
if (room) {
|
||||
Vue.set(room, "topic", event.getContent().topic);
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
reloadRooms() {
|
||||
this.rooms = this.matrixClient.getVisibleRooms();
|
||||
},
|
||||
|
||||
setCurrentRoomId(roomId) {
|
||||
this.$store.commit("setCurrentRoomId", roomId);
|
||||
},
|
||||
|
||||
getRoom(roomId) {
|
||||
if (this.matrixClient) {
|
||||
return this.matrixClient.getRoom(roomId);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
on(event, handler) {
|
||||
if (this.matrixClient) {
|
||||
this.matrixClient.on(event, handler);
|
||||
}
|
||||
},
|
||||
|
||||
off(event, handler) {
|
||||
if (this.matrixClient) {
|
||||
this.matrixClient.off(event, handler);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Vue.prototype.$matrix = matrixService;
|
||||
}
|
||||
}
|
||||
|
||||
const matrixService = new MatrixService();
|
||||
const matrixServicePlugin = {}
|
||||
matrixServicePlugin.install = function (Vue, ignoredOptions) {
|
||||
Vue.prototype.$matrix = matrixService;
|
||||
|
||||
Vue.mixin({
|
||||
mounted: function () {
|
||||
// Store the VUE instance root in our own $root variable.
|
||||
matrixService.$root = this.$root;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Vue.use(matrixServicePlugin);
|
||||
|
||||
export default MatrixService;
|
||||
|
|
@ -7,11 +7,11 @@ Vue.use(Vuex)
|
|||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
currentRoom: null
|
||||
currentRoomId: null
|
||||
},
|
||||
mutations: {
|
||||
setCurrentRoom(state, room) {
|
||||
state.currentRoom = room;
|
||||
setCurrentRoomId(state, roomId) {
|
||||
state.currentRoomId = roomId;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue