diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
new file mode 100644
index 0000000..b4436d9
--- /dev/null
+++ b/src/components/messages/MessageOperations.vue
@@ -0,0 +1,40 @@
+
+
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue
index 113fb85..6932509 100644
--- a/src/components/messages/MessageOutgoingText.vue
+++ b/src/components/messages/MessageOutgoingText.vue
@@ -4,6 +4,7 @@
+
+ mood
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue
index 03ddb27..00e4dc4 100644
--- a/src/components/messages/MessageOutgoingImage.vue
+++ b/src/components/messages/MessageOutgoingImage.vue
@@ -4,6 +4,7 @@
{{ "You" }}
{{ event.status }}
{{ "You" }}
+
{{ event.status }}
@@ -20,7 +21,6 @@ export default {
mixins: [messageMixin],
};
-
\ No newline at end of file
diff --git a/src/components/messages/QuickReactions.vue b/src/components/messages/QuickReactions.vue
new file mode 100644
index 0000000..4c59909
--- /dev/null
+++ b/src/components/messages/QuickReactions.vue
@@ -0,0 +1,81 @@
+
+
+
+ {{ name }} {{ value.length }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 2d049d2..82e3101 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -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();
},
- }
+ },
}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9b7bf94..ac23b9f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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,
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 96681af..d06d0e3 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -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);
diff --git a/src/services/matrix.service.js b/src/services/matrix.service.js
index 37d7318..2f1a963 100644
--- a/src/services/matrix.service.js
+++ b/src/services/matrix.service.js
@@ -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;
},