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

Join public room

Browse source 
Work on issue #9
This commit is contained in:
N-Pex 2020-11-19 22:48:08 +01:00
parent e7cd5db831
commit 43e876ba80
6 changed files with 92 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -10,6 +10,7 @@
"aes-js": "^3.1.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"intersection-observer": "^0.11.0",
"json-web-key": "^0.4.0",
"material-design-icons-iconfont": "^5.0.1",
"matrix-js-sdk": "^9.0.1",
@ -7410,6 +7411,11 @@
"node": ">= 0.10"
}
},
"node_modules/intersection-observer": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.11.0.tgz",
"integrity": "sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ=="
},
"node_modules/ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@ -20706,6 +20712,11 @@
"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
"dev": true
},
"intersection-observer": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.11.0.tgz",
"integrity": "sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ=="
},
"ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",

1
package.json
View file

@ -11,6 +11,7 @@
"aes-js": "^3.1.2",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"intersection-observer": "^0.11.0",
"json-web-key": "^0.4.0",
"material-design-icons-iconfont": "^5.0.1",
"matrix-js-sdk": "^9.0.1",

97
src/components/Chat.vue
View file

@ -7,10 +7,7 @@
v-on:scroll="onScroll"
>
<div v-for="event in events" :key="event.getId()">
<component
:is="componentForEvent(event)"
:room="room"
:event="event" />
<component :is="componentForEvent(event)" :room="room" :event="event" />
</div>
</div>
@ -81,14 +78,14 @@
<script>
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
import MessageIncomingText from './messages/MessageIncomingText';
import MessageOutgoingText from './messages/MessageOutgoingText';
import ContactJoin from './messages/ContactJoin.vue';
import ContactLeave from './messages/ContactLeave.vue';
import ContactInvited from './messages/ContactInvited.vue';
import RoomNameChanged from './messages/RoomNameChanged.vue';
import RoomTopicChanged from './messages/RoomTopicChanged.vue';
import RoomAvatarChanged from './messages/RoomAvatarChanged.vue';
import MessageIncomingText from "./messages/MessageIncomingText";
import MessageOutgoingText from "./messages/MessageOutgoingText";
import ContactJoin from "./messages/ContactJoin.vue";
import ContactLeave from "./messages/ContactLeave.vue";
import ContactInvited from "./messages/ContactInvited.vue";
import RoomNameChanged from "./messages/RoomNameChanged.vue";
import RoomTopicChanged from "./messages/RoomTopicChanged.vue";
import RoomAvatarChanged from "./messages/RoomAvatarChanged.vue";
import DebugEvent from "./messages/DebugEvent.vue";
import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
@ -134,22 +131,25 @@ export default {
RoomAvatarChanged,
DebugEvent,
MessageOutgoingImage,
MessageIncomingImage
MessageIncomingImage,
},
data() { return {
room: null,
events: [],
currentInput: "",
contactIsTyping: false,
timelineWindow: null,
scrollPosition: null,
currentImageInput: null,
currentImageInputPath: null,
currentSendOperation: null,
currentSendProgress: null,
currentSendError: null,
}},
data() {
return {
room: null,
events: [],
currentInput: "",
contactIsTyping: false,
timelineWindow: null,
scrollPosition: null,
currentImageInput: null,
currentImageInputPath: null,
currentSendOperation: null,
currentSendProgress: null,
currentSendError: null,
joinRoom: null,
};
},
mounted() {
const container = this.$refs.chatContainer;
@ -157,11 +157,21 @@ export default {
this.$matrix.on("Room.timeline", this.onEvent);
this.$matrix.on("RoomMember.typing", this.onUserTyping);
this.$matrix.on("Matrix.initialized", this.onInitialized);
if (this.$route.params && this.$route.params.joinRoom) {
this.joinRoom = this.$route.params.joinRoom;
}
if (this.$matrix.matrixClientReady) {
this.onInitialized(this.$matrix.matrixClient);
}
},
destroyed() {
this.$matrix.off("Room.timeline", this.onEvent);
this.$matrix.off("RoomMember.typing", this.onUserTyping);
this.$matrix.off("Matrix.initialized", this.onInitialized);
},
computed: {
@ -207,40 +217,55 @@ export default {
},
methods: {
onInitialized(matrixClient) {
if (this.joinRoom) {
const roomId = this.joinRoom;
this.joinRoom = null;
matrixClient
.joinRoom(roomId)
.then((room) => {
this.$matrix.setCurrentRoomId(room.roomId);
})
.catch((err) => {
// TODO - handle error
console.log("Failed to join room", err);
});
}
},
componentForEvent(event) {
switch (event.getType()) {
case 'm.room.member':
case "m.room.member":
if (event.event.state_key != this.myUserId) {
if (event.getContent().membership == 'join') {
if (event.getContent().membership == "join") {
return ContactJoin;
} else if (event.getContent().membership == 'leave') {
} else if (event.getContent().membership == "leave") {
return ContactLeave;
} else if (event.getContent().membership == 'invite') {
} else if (event.getContent().membership == "invite") {
return ContactInvited;
}
}
break;
case 'm.room.message':
case "m.room.message":
if (event.getSender() != this.myUserId) {
if (event.getContent().msgtype == 'm.image') {
if (event.getContent().msgtype == "m.image") {
return MessageIncomingImage;
}
return MessageIncomingText;
} else {
if (event.getContent().msgtype == 'm.image') {
if (event.getContent().msgtype == "m.image") {
return MessageOutgoingImage;
}
return MessageOutgoingText;
}
case 'm.room.name':
case "m.room.name":
return RoomNameChanged;
case 'm.room.topic':
case "m.room.topic":
return RoomTopicChanged;
case 'm.room.avatar':
case "m.room.avatar":
return RoomAvatarChanged;
}
return DebugEvent;

4
src/plugins/utils.js
View file

@ -39,9 +39,7 @@ class Util {
.then(response => {
return new Promise((resolve, ignoredReject) => {
var aesjs = require('aes-js');
//var JSONWebKey = require( 'json-web-key' );
var base64Url = require('json-web-key/lib/base64url');
//var tou8 = require('buffer-to-uint8array');
var key = base64Url.decode(file.key.k);
var iv = base64Url.decode(file.iv);
var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(iv));
@ -52,7 +50,7 @@ class Util {
});
})
.then(bytes => {
resolve(URL.createObjectURL(new Blob([bytes.buffer], { type: 'image/png' })));
resolve(URL.createObjectURL(new Blob([bytes.buffer], { type: file.mimetype })));
})
.catch(err => {
console.log("Download error: ", err);

10
src/router/index.js
View file

@ -15,6 +15,16 @@ const routes = [
path: '/login',
component: Login
},
{
path: '/join/:room?',
redirect: from => {
const room = from.hash;
if (room) {
return { name: 'Chat', params: { joinRoom: room }};
}
return '/';
}
},
]
const router = new VueRouter({

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

@ -21,6 +21,7 @@ export default {
data() {
return {
matrixClient: null,
matrixClientReady: false,
rooms: [],
}
},
@ -73,6 +74,7 @@ export default {
this.removeMatrixClientListeners(this.matrixClient);
this.matrixClient.stopClient();
this.matrixClient = null;
this.matrixClientReady = false;
localStorage.removeItem('user');
}
this.$store.commit("setCurrentRoomId", null);
@ -80,6 +82,8 @@ export default {
initClient() {
this.reloadRooms();
this.matrixClientReady = true;
this.matrixClient.emit('Matrix.initialized', this.matrixClient);
},
async getMatrixClient(user) {
@ -179,10 +183,10 @@ export default {
},
getRoom(roomId) {
if (this.matrixClient) {
return this.matrixClient.getRoom(roomId);
}
return null;
// if (this.matrixClient) {
// return this.matrixClient.getRoom(roomId);
// }
return this.rooms.find(room => room.roomId == roomId);
},
on(event, handler) {