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

Quick reactions

Browse source
This commit is contained in:
N-Pex 2020-11-25 14:42:50 +01:00
parent 5589131c86
commit 29acde8604
15 changed files with 454 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -185,4 +185,35 @@ $chat-text-size: 0.7pt;
color: #1c242a;
text-align: center;
margin: 20px;
}
.messageOperations {
position: absolute;
bottom: 10px;
&.incoming {
left: -20px;
}
&.outgoing {
right: 20px;
}
}
.quick-reaction-container {
.quick-reaction {
border: 1px solid #e2e2e2;
border-radius: 9px;
margin: 0px 2px;
padding: 2px;
&:hover {
border: 1px solid #888888;
background-color: #e2e2e2;
}
.quick-reaction-count {
color: #888888;
font-size: 0.7rem;
}
}
.sent {
background-color: palegreen;
}
}

218
src/components/Chat.vue
View file

@ -7,7 +7,29 @@
v-on:scroll="onScroll"
>
<div v-for="event in events" :key="event.getId()">
<component :is="componentForEvent(event)" :room="room" :event="event" />
<v-hover v-slot="{ hover }" v-if="!event.isRelation()">
<div style="position: relative">
<component
:is="componentForEvent(event)"
:room="room"
:event="event"
:reactions="
timelineWindow._timelineSet.getRelationsForEvent(
event.getId(),
'm.annotation',
'm.reaction'
)
"
v-on:send-quick-reaction="sendQuickReaction"
/>
<message-operations
v-if="hover"
v-on:addreaction="addReaction"
:event="event"
:incoming="event.getSender() != $matrix.currentUserId"
/>
</div>
</v-hover>
</div>
</div>
@ -68,11 +90,23 @@
<v-btn color="primary" text @click="cancelSendAttachment"
>Cancel</v-btn
>
<v-btn color="primary" text @click="sendAttachment" :disabled="currentSendOperation != null">Send</v-btn>
<v-btn
color="primary"
text
@click="sendAttachment"
:disabled="currentSendOperation != null"
>Send</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<div>
<v-dialog v-model="showEmojiPicker" class="ma-0 pa-0" width="50%">
<VEmojiPicker style="width: 100%" @select="emojiSelected" />
</v-dialog>
</div>
</div>
</template>
@ -90,6 +124,7 @@ import DebugEvent from "./messages/DebugEvent.vue";
import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
import util from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
// from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
function ScrollPosition(node) {
@ -133,6 +168,7 @@ export default {
DebugEvent,
MessageOutgoingImage,
MessageIncomingImage,
MessageOperations,
},
data() {
@ -148,37 +184,24 @@ export default {
currentSendOperation: null,
currentSendProgress: null,
currentSendError: null,
joinRoom: null,
showEmojiPicker: false,
selectedEvent: null,
};
},
mounted() {
const container = this.$refs.chatContainer;
this.scrollPosition = new ScrollPosition(container);
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: {
myUserId() {
return this.$store.state.auth.user.user_id;
},
roomId() {
return this.$matrix.currentRoomId;
},
@ -188,69 +211,55 @@ export default {
},
watch: {
roomId() {
console.log("Chat: Current room changed");
roomId: {
handler(ignoredNewVal, ignoredOldVal) {
console.log("Chat: Current room changed");
// Clear old events
this.events = [];
this.timelineWindow = null;
this.contactIsTyping = false;
// Clear old events
this.events = [];
this.timelineWindow = null;
this.contactIsTyping = false;
if (!this.roomId) {
return; // no room
}
if (!this.roomId) {
return; // no room
}
this.room = this.$matrix.getRoom(this.roomId);
if (!this.room) {
return; // Not found
}
this.room = this.$matrix.getRoom(this.roomId);
if (!this.room) {
return; // Not found
}
this.timelineWindow = new TimelineWindow(
this.$matrix.matrixClient,
this.room.getUnfilteredTimelineSet(),
{}
);
this.timelineWindow.load(null, 20).then(() => {
this.events = this.timelineWindow.getEvents();
this.$nextTick(() => {
this.paginateBackIfNeeded();
this.timelineWindow = new TimelineWindow(
this.$matrix.matrixClient,
this.room.getUnfilteredTimelineSet(),
{}
);
this.timelineWindow.load(null, 20).then(() => {
this.events = this.timelineWindow.getEvents();
this.$nextTick(() => {
this.paginateBackIfNeeded();
});
});
});
},
immediate: true,
},
},
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":
if (event.event.state_key != this.myUserId) {
if (event.getContent().membership == "join") {
return ContactJoin;
} else if (event.getContent().membership == "leave") {
return ContactLeave;
} else if (event.getContent().membership == "invite") {
return ContactInvited;
}
if (event.getContent().membership == "join") {
return ContactJoin;
} else if (event.getContent().membership == "leave") {
return ContactLeave;
} else if (event.getContent().membership == "invite") {
return ContactInvited;
}
break;
break;
case "m.room.message":
if (event.getSender() != this.myUserId) {
if (event.getSender() != this.$matrix.currentUserId) {
if (event.getContent().msgtype == "m.image") {
return MessageIncomingImage;
}
@ -319,13 +328,18 @@ export default {
sendMessage() {
if (this.currentInput.length > 0) {
util.sendTextMessage(this.$matrix.matrixClient, this.roomId, this.currentInput)
.then(() => {
console.log("Sent message");
})
.catch(err => {
console.log("Failed to send:", err);
})
util
.sendTextMessage(
this.$matrix.matrixClient,
this.roomId,
this.currentInput
)
.then(() => {
console.log("Sent message");
})
.catch((err) => {
console.log("Failed to send:", err);
});
this.currentInput = "";
}
},
@ -356,18 +370,23 @@ export default {
sendAttachment() {
if (this.currentImageInputPath) {
this.currentSendProgress = 0;
this.currentSendOperation = util.sendEncyptedImage(this.$matrix.matrixClient, this.roomId, this.currentImageInputPath, this.onUploadProgress);
this.currentSendOperation = util.sendImage(
this.$matrix.matrixClient,
this.roomId,
this.currentImageInputPath,
this.onUploadProgress
);
this.currentSendOperation
.then(() => {
this.currentSendOperation = null;
this.currentImageInput = null;
this.currentSendProgress = 0;
})
.catch(err => {
this.currentSendError = err.toLocaleString();
this.currentSendOperation = null;
this.currentSendProgress = 0;
});
.then(() => {
this.currentSendOperation = null;
this.currentImageInput = null;
this.currentSendProgress = 0;
})
.catch((err) => {
this.currentSendError = err.toLocaleString();
this.currentSendOperation = null;
this.currentSendProgress = 0;
});
}
},
@ -441,6 +460,39 @@ export default {
}
});
},
addReaction(e) {
const event = e.event;
// Store the event we are reacting to, so that we know where to
// send when the picker closes.
this.selectedEvent = event;
this.showEmojiPicker = true;
},
emojiSelected(e) {
this.showEmojiPicker = false;
if (this.selectedEvent) {
const event = this.selectedEvent;
this.selectedEvent = null;
this.sendQuickReaction({reaction:e.data, event: event});
}
},
sendQuickReaction(e) {
util
.sendQuickReaction(
this.$matrix.matrixClient,
this.roomId,
e.reaction,
e.event
)
.then(() => {
console.log("Quick reaction message");
})
.catch((err) => {
console.log("Failed to send quick reaction:", err);
});
}
},
};
</script>

49
src/components/Join.vue
View file

@ -38,38 +38,29 @@ export default {
handleJoin() {
this.loading = true;
this.loadingMessage = "Logging in...";
var clientPromise;
if (this.currentUser) {
this.$matrix
.getMatrixClient(this.currentUser)
.then((ignoreduser) => {
this.loadingMessage = "Joining room...";
return this.$matrix.matrixClient.joinRoom(this.roomId);
})
.then((room) => {
this.$matrix.setCurrentRoomId(room.roomId);
this.loading = false;
this.loadingMessage = null;
this.$router.replace({ name: "Chat" });
})
.catch((err) => {
// TODO - handle error
console.log("Failed to join room", err);
this.loading = false;
this.loadingMessage = err.toString();
});
clientPromise = this.$matrix.getMatrixClient(this.currentUser);
} else {
this.$store.dispatch("auth/login", this.guestUser).then(
() => {
this.loading = false;
this.loadingMessage = null;
this.$router.replace({ name: "Chat" });
},
(error) => {
this.loading = false;
this.loadingMessage = error.toString();
}
);
clientPromise = this.$store.dispatch("auth/login", this.guestUser);
}
return clientPromise
.then((ignoreduser) => {
this.loadingMessage = "Joining room...";
return this.$matrix.matrixClient.joinRoom(this.roomId);
})
.then((room) => {
this.$matrix.setCurrentRoomId(room.roomId);
this.loading = false;
this.loadingMessage = null;
this.$router.replace({ name: "Chat" });
})
.catch((err) => {
// TODO - handle error
console.log("Failed to join room", err);
this.loading = false;
this.loadingMessage = err.toString();
});
},
},
};

1
src/components/messages/MessageIncomingImage.vue
View file

@ -4,6 +4,7 @@
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-avatar class="avatar" size="40" color="grey">
<img

1
src/components/messages/MessageIncomingText.vue
View file

@ -14,6 +14,7 @@
<div class="bubble">
<div class="message">{{ event.getContent().body }}</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
</div>
<div class="time">

40
src/components/messages/MessageOperations.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div :class="{'messageOperations':true,'incoming':incoming,'outgoing':!incoming}">
<v-btn icon @click="addReaction" class="ma-0 pa-0">
<v-icon>mood</v-icon>
</v-btn>
</div>
</template>
<script>
import messageMixin from "./messageMixin";
export default {
mixins: [messageMixin],
props: {
incoming: {
type: Boolean,
default: function () {
return true
}
},
event: {
type: Object,
default: function () {
return {}
}
},
},
methods: {
addReaction() {
this.$emit("addreaction", {event:this.event});
}
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

1
src/components/messages/MessageOutgoingImage.vue
View file

@ -4,6 +4,7 @@
<div class="sender">{{ "You" }}</div>
<div class="bubble image-bubble">
<v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>

2
src/components/messages/MessageOutgoingText.vue
View file

@ -4,6 +4,7 @@
<div class="sender">{{ "You" }}</div>
<div class="bubble">
<div class="message">{{ event.getContent().body }}</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
@ -20,7 +21,6 @@ export default {
mixins: [messageMixin],
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

81
src/components/messages/QuickReactions.vue Normal file
View file

@ -0,0 +1,81 @@
<template>
<div class="quick-reaction-container">
<span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)">
{{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
</span>
</div>
</template>
<script>
export default {
props: {
event: {
type: Object,
default: function () {
return {}
}
},
reactions: {
type: Object,
default: function () {
return null
}
}
},
data() {
return {
reactionMap: {}
}
},
beforeDestroy() {
if (this.reactions) {
this.reactions.off('Relations.add', this.onAddRelation);
}
},
methods: {
onClickEmoji(emoji) {
this.$bubble('send-quick-reaction', {reaction:emoji, event:this.event});
},
onAddRelation(ignoredevent) {
this.processReactions();
},
processReactions() {
var reactionMap = {};
if (this.reactions && this.reactions._eventsCount > 0) {
const relations = this.reactions.getRelations();
for (const r of relations) {
const emoji = r.getRelation().key;
const sender = r.getSender();
if (reactionMap[emoji]) {
const array = reactionMap[emoji];
if (!array.includes(sender)) {
array.push(sender)
}
} else {
reactionMap[emoji] = [sender];
}
}
}
this.reactionMap = reactionMap;
}
},
watch: {
reactions: {
handler(newValue, oldValue) {
if (oldValue) {
oldValue.off('Relations.add', this.onAddRelation);
}
if (newValue) {
newValue.on('Relations.add', this.onAddRelation);
}
this.processReactions();
},
immediate: true
}
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

16
src/components/messages/messageMixin.js
View file

@ -1,4 +1,9 @@
import QuickReactions from './QuickReactions.vue';
export default {
components: {
QuickReactions
},
props: {
room: {
type: Object,
@ -12,6 +17,12 @@ export default {
return {}
}
},
reactions: {
type: Object,
default: function () {
return null
}
}
},
computed: {
},
@ -20,6 +31,9 @@ export default {
* Get a display name given an event.
*/
stateEventDisplayName(event) {
if (event.getSender() == this.$matrix.currentUserId) {
return "You";
}
if (this.room) {
const member = this.room.getMember(event.getSender());
if (member) {
@ -64,5 +78,5 @@ export default {
}
return date.toLocaleString();
},
}
},
}

15
src/main.js
View file

@ -6,11 +6,26 @@ import store from './store'
import matrix from './services/matrix.service'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import VEmojiPicker from 'v-emoji-picker';
Vue.config.productionTip = false
Vue.use(VEmojiPicker);
Vue.use(matrix, {store: store});
// Add bubble functionality to custom events.
// From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events
Vue.use((Vue) => {
Vue.prototype.$bubble = function $bubble(eventName, ...args) {
// Emit the event on all parent components
let component = this;
do {
component.$emit(eventName, ...args);
component = component.$parent;
} while (component);
};
});
new Vue({
vuetify,
router,

79
src/plugins/utils.js
View file

@ -76,12 +76,23 @@ class Util {
}
sendTextMessage(matrixClient, roomId, text) {
return this.sendMessage(matrixClient, roomId, ContentHelpers.makeTextMessage(text));
return this.sendMessage(matrixClient, roomId, "m.room.message", ContentHelpers.makeTextMessage(text));
}
sendMessage(matrixClient, roomId, content) {
sendQuickReaction(matrixClient, roomId, emoji, event) {
const content = {
'm.relates_to': {
key: emoji,
rel_type: 'm.annotation',
event_id: event.getId()
}
};
return this.sendMessage(matrixClient, roomId, "m.reaction", content);
}
sendMessage(matrixClient, roomId, eventType, content) {
return new Promise((resolve, reject) => {
matrixClient.sendMessage(roomId, content, undefined, undefined)
matrixClient.sendEvent(roomId, eventType, content, undefined, undefined)
.then((result) => {
console.log("Message sent: ", result);
resolve(true);
@ -127,22 +138,57 @@ class Util {
});
}
sendEncyptedImage(matrixClient, roomId, file, onUploadProgress) {
sendImage(matrixClient, roomId, file, onUploadProgress) {
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onload = (e) => {
const fileContents = e.target.result;
var data = new Uint8Array(fileContents);
const info = {
mimetype: file.type,
size: file.size
};
const opts = {
type: file.type,
name: 'Image',
progressHandler: onUploadProgress,
onlyContentUri: false
};
if (!matrixClient.isRoomEncrypted(roomId)) {
// Not encrypted.
matrixClient.uploadContent(data, opts)
.then((response) => {
const messageContent = {
body: 'Image',
url: response.content_uri,
info: info,
msgtype: 'm.image'
}
return this.sendMessage(matrixClient, roomId, "m.room.message", messageContent)
})
.then(result => {
resolve(result);
})
.catch(err => {
reject(err);
});
return; // Don't fall through
}
const crypto = require('crypto');
let key = crypto.randomBytes(256 / 8);
let iv = Buffer.concat([crypto.randomBytes(8),Buffer.alloc(8)]); // Initialization vector.
// Encrypt
var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(iv));
const data = new Uint8Array(fileContents);
var encryptedBytes = aesCtr.encrypt(data);
data = encryptedBytes;
// Calculate sha256
var hash = new Uint8Array(sha256.create().update(encryptedBytes).arrayBuffer());
var hash = new Uint8Array(sha256.create().update(data).arrayBuffer());
const jwk = {
kty: 'oct',
@ -159,20 +205,7 @@ class Util {
hashes: { sha256: Buffer.from(hash).toString('base64').replace( /=/g, '' )},
v: 'v2'
};
console.log("Encrypted file:", encryptedFile);
const info = {
mimetype: file.type,
size: file.size
};
const opts = {
type: file.type,
name: 'Image',
progressHandler: onUploadProgress,
};
const messageContent = {
body: 'Image',
file: encryptedFile,
@ -180,10 +213,10 @@ class Util {
msgtype: 'm.image'
}
matrixClient.uploadContent(encryptedBytes, opts)
.then((uri) => {
encryptedFile.url = uri;
return this.sendMessage(matrixClient, roomId, messageContent)
matrixClient.uploadContent(data, opts)
.then((response) => {
encryptedFile.url = response.content_uri;
return this.sendMessage(matrixClient, roomId, "m.room.message", messageContent)
})
.then(result => {
resolve(result);

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

@ -38,6 +38,11 @@ export default {
return this.$store.state.auth.user;
},
currentUserId() {
const user = this.currentUser || {}
return user.user_id;
},
currentRoomId() {
return this.$store.state.currentRoomId;
},