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

Audio attachments

Browse source 
And touch events for mobile quick reactions.
This commit is contained in:
N-Pex 2020-12-03 10:00:23 +01:00
parent 3ad4083312
commit a19082e2ea
10 changed files with 1324 additions and 1172 deletions
Download patch file Download diff file Expand all files Collapse all files

2214
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -21,6 +21,7 @@
"roboto-fontface": "*",
"v-emoji-picker": "^2.3.1",
"vue": "^2.6.11",
"vue-mobile-event": "^1.2.6",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.5.1"

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

@ -167,6 +167,7 @@ $chat-text-size: 0.7pt;
font-weight: 400;
font-size: 22 * $chat-text-size;
color: #000000;
overflow-wrap: break-word;
.edit-marker {
font-size: 0.8rem;
color: #888888;

43
src/components/Chat.vue
View file

@ -7,8 +7,8 @@
v-on:scroll="onScroll"
>
<div v-for="event in events" :key="event.getId()">
<v-hover v-slot="{ hover }" v-if="!event.isRelation() && !event.isRedacted() && !event.isRedaction()">
<div style="position: relative">
<div v-event:tap.self="(e) => { touchTap(event); } " v-event:longTap="(e) => { touchLongTap(event); } " v-if="!event.isRelation() && !event.isRedacted() && !event.isRedaction()">
<div style="position:relative;user-select:none">
<component
:is="componentForEvent(event)"
:room="room"
@ -23,13 +23,13 @@
v-on:send-quick-reaction="sendQuickReaction"
/>
<message-operations
v-if="hover"
v-if="selectedEvent == event && showContextMenu"
v-on:addreaction="addReaction"
:event="event"
:incoming="event.getSender() != $matrix.currentUserId"
/>
</div>
</v-hover>
</div>
</div>
</div>
@ -55,7 +55,7 @@
type="file"
name="attachment"
@change="pickAttachment($event)"
accept="image/*"
accept="image/*|audio/*|video/*|application/pdf"
style="display: none"
/>
</label>
@ -113,7 +113,11 @@
<script>
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
import MessageIncomingText from "./messages/MessageIncomingText";
import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
import MessageIncomingAudio from "./messages/MessageIncomingAudio.vue";
import MessageOutgoingText from "./messages/MessageOutgoingText";
import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
import MessageOutgoingAudio from "./messages/MessageOutgoingAudio.vue";
import ContactJoin from "./messages/ContactJoin.vue";
import ContactLeave from "./messages/ContactLeave.vue";
import ContactInvited from "./messages/ContactInvited.vue";
@ -121,8 +125,6 @@ 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";
import util from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
@ -158,7 +160,11 @@ export default {
components: {
MessageIncomingText,
MessageIncomingImage,
MessageIncomingAudio,
MessageOutgoingText,
MessageOutgoingImage,
MessageOutgoingAudio,
ContactJoin,
ContactLeave,
ContactInvited,
@ -166,8 +172,6 @@ export default {
RoomTopicChanged,
RoomAvatarChanged,
DebugEvent,
MessageOutgoingImage,
MessageIncomingImage,
MessageOperations,
},
@ -186,6 +190,7 @@ export default {
currentSendError: null,
showEmojiPicker: false,
selectedEvent: null,
showContextMenu: false
};
},
@ -246,6 +251,19 @@ export default {
},
methods: {
touchTap(ignoredEvent) {
if (this.selectedEvent && this.showContextMenu) {
// If anything is selected, unselect
this.selectedEvent = null;
this.showContextMenu = false;
}
},
touchLongTap(event) {
this.selectedEvent = event;
this.showContextMenu = true;
},
componentForEvent(event) {
switch (event.getType()) {
case "m.room.member":
@ -262,11 +280,15 @@ export default {
if (event.getSender() != this.$matrix.currentUserId) {
if (event.getContent().msgtype == "m.image") {
return MessageIncomingImage;
} else if (event.getContent().msgtype == "m.audio") {
return MessageIncomingAudio;
}
return MessageIncomingText;
} else {
if (event.getContent().msgtype == "m.image") {
return MessageOutgoingImage;
} else if (event.getContent().msgtype == "m.audio") {
return MessageOutgoingAudio;
}
return MessageOutgoingText;
}
@ -394,7 +416,10 @@ export default {
if (this.currentSendOperation) {
this.currentSendOperation.reject("Canceled");
}
this.currentSendOperation = null;
this.currentImageInput = null;
this.currentSendProgress = 0;
this.currentSendError = null;
},
handleScrolledToTop() {

36
src/components/messages/MessageIncomingAudio.vue Normal file
View file

@ -0,0 +1,36 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-avatar class="avatar" size="40" color="grey">
<img
v-if="messageEventAvatar(event)"
:src="messageEventAvatar(event)"
/>
<span v-else class="white--text headline">{{
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
</div>
</template>
<script>
import messageMixin from "./messageMixin";
import attachmentMixin from "./attachmentMixin";
export default {
mixins: [messageMixin, attachmentMixin],
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

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

@ -1,6 +1,6 @@
<template>
<div :class="{'messageOperations':true,'incoming':incoming,'outgoing':!incoming}">
<v-btn icon @click="addReaction" class="ma-0 pa-0">
<v-btn icon v-event:tap.self="(e) => { addReaction() }" class="ma-0 pa-0">
<v-icon>mood</v-icon>
</v-btn>
</div>

28
src/components/messages/MessageOutgoingAudio.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
</div>
</template>
<script>
import messageMixin from "./messageMixin";
import attachmentMixin from "./attachmentMixin";
export default {
mixins: [messageMixin, attachmentMixin],
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

27
src/components/messages/attachmentMixin.js Normal file
View file

@ -0,0 +1,27 @@
import util from "../../plugins/utils";
export default {
data() {
return {
src: null
}
},
mounted() {
console.log("Mounted with event:", JSON.stringify(this.event.getContent()))
util
.getAttachment(this.$matrix.matrixClient, this.event)
.then((url) => {
this.src = url;
})
.catch((err) => {
console.log("Failed to fetch attachment: ", err);
});
},
beforeDestroy() {
if (this.src) {
const objectUrl = this.src;
this.src = null;
URL.revokeObjectURL(objectUrl);
}
},
}

2
src/main.js
View file

@ -7,9 +7,11 @@ 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';
import VueMobileEvent from 'vue-mobile-event';
Vue.config.productionTip = false
Vue.use(VueMobileEvent);
Vue.use(VEmojiPicker);
Vue.use(matrix, {store: store});

100
src/plugins/utils.js
View file

@ -5,6 +5,39 @@ var aesjs = require('aes-js');
var base64Url = require('json-web-key/lib/base64url');
class Util {
getAttachment(matrixClient, event) {
return new Promise((resolve, reject) => {
const content = event.getContent();
if (content.url != null) {
// Unencrypted, just return!
resolve(matrixClient.mxcUrlToHttp(content.url));
return;
}
var url = null;
var file = null;
if (content.file && content.file.url) {
file = content.file;
url = matrixClient.mxcUrlToHttp(file.url);
}
if (url == null) {
reject("No url found!");
}
axios.get(url, { responseType: 'arraybuffer' })
.then(response => {
return this.decryptIfNeeded(file, response);
})
.then(bytes => {
resolve(URL.createObjectURL(new Blob([bytes.buffer], { type: file.mimetype })));
})
.catch(err => {
console.log("Download error: ", err);
reject(err);
});
});
}
getThumbnail(matrixClient, event, ignoredw, ignoredh) {
return new Promise((resolve, reject) => {
const content = event.getContent();
@ -46,7 +79,20 @@ class Util {
}
axios.get(url, { responseType: 'arraybuffer' })
.then(response => {
return new Promise((resolve, ignoredReject) => {
return this.decryptIfNeeded(file, response);
})
.then(bytes => {
resolve(URL.createObjectURL(new Blob([bytes.buffer], { type: file.mimetype })));
})
.catch(err => {
console.log("Download error: ", err);
reject(err);
});
});
}
decryptIfNeeded(file, response) {
return new Promise((resolve, reject) => {
var key = base64Url.decode(file.key.k);
var iv = base64Url.decode(file.iv);
var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(iv));
@ -64,15 +110,6 @@ class Util {
var decryptedBytes = aesCtr.decrypt(data);
resolve(decryptedBytes);
});
})
.then(bytes => {
resolve(URL.createObjectURL(new Blob([bytes.buffer], { type: file.mimetype })));
})
.catch(err => {
console.log("Download error: ", err);
reject(err);
});
});
}
sendTextMessage(matrixClient, roomId, text) {
@ -150,23 +187,39 @@ class Util {
size: file.size
};
var description = file.name;
var msgtype = 'm.image';
if (file.type.startsWith("audio/")) {
msgtype = 'm.audio';
} else if (file.type.startsWith("video/")) {
msgtype = 'm.video';
} else if (file.type.startsWith("application/pdf")) {
msgtype = 'm.file';
}
const opts = {
type: file.type,
name: 'Image',
name: description,
progressHandler: onUploadProgress,
onlyContentUri: false
};
var messageContent = {
body: description,
info: info,
msgtype: msgtype
}
// Set filename for files
if (msgtype == 'm.file') {
messageContent.filename = file.name;
}
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'
}
messageContent.url = response.content_uri;
return this.sendMessage(matrixClient, roomId, "m.room.message", messageContent)
})
.then(result => {
@ -180,7 +233,7 @@ class Util {
const crypto = require('crypto');
let key = crypto.randomBytes(256 / 8);
let iv = Buffer.concat([crypto.randomBytes(8),Buffer.alloc(8)]); // Initialization vector.
let iv = Buffer.concat([crypto.randomBytes(8), Buffer.alloc(8)]); // Initialization vector.
// Encrypt
var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(iv));
@ -201,17 +254,12 @@ class Util {
const encryptedFile = {
mimetype: file.type,
key: jwk,
iv: Buffer.from(iv).toString('base64').replace( /=/g, '' ),
hashes: { sha256: Buffer.from(hash).toString('base64').replace( /=/g, '' )},
iv: Buffer.from(iv).toString('base64').replace(/=/g, ''),
hashes: { sha256: Buffer.from(hash).toString('base64').replace(/=/g, '') },
v: 'v2'
};
const messageContent = {
body: 'Image',
file: encryptedFile,
info: info,
msgtype: 'm.image'
}
messageContent.file = encryptedFile;
matrixClient.uploadContent(data, opts)
.then((response) => {