+
@@ -42,7 +42,11 @@ export default {
name: 'eventContent',
components: {Icon},
props: {
- content: Object
+ content: Object,
+ compact: {
+ type: Boolean,
+ default: false
+ }
},
methods: {
getSource(url){
@@ -70,6 +74,10 @@ export default {
max-height: 35rem;
border-radius: 0.5rem;
}
+ .compact{
+ max-width: 8rem;
+ max-height: 8rem;
+ }
}
.video{
width: 100%;
@@ -79,11 +87,19 @@ export default {
max-height: 35rem;
border-radius: 0.5rem;
}
+ .compact{
+ max-width: 8rem;
+ max-height: 8rem;
+ }
}
.audio{
audio{
max-width: 100%;
}
+ .compact{
+ max-width: 16rem;
+ max-height: 8rem;
+ }
}
.italic{
font-style: italic;
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index d9f61bd..dc94f0c 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,43 +1,50 @@
-
-
+
+
+
-
{
+ event.content.url = mxc;
+ this.sendEvent(event);
+ });
+ },
sendTyping(timeout){
if (this.waitForSendTyping) return;
matrix.client.sendTyping(this.roomId, true, timeout+100);
@@ -133,8 +151,9 @@ export default {
stopRecording(){
this.recorder.stop()
.then(({blob}) => {
- this.recBlob = blob;
this.isRecording=false;
+ blob.name = `Recording-${new Date().toISOString()}.${blob.type.split('/')[1]}`;
+ this.setAttachment({blob});
});
},
setVoiceMeter(value){
@@ -142,18 +161,38 @@ export default {
this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
},
- setAttachment(file){
- let reader = new FileReader();
- reader.onerror = console.error;
- reader.onload = event => {
- this.attachment = {
- msgtype: this.getMsgType(file.type),
- mimetype: file.type,
- url: event.target.result
- };
- this.event.content.body = file.name;
- }
- reader.readAsDataURL(file);
+ async readFile(file){
+ return await new Promise(resolve => {
+ let reader = new FileReader();
+ reader.onerror = console.error;
+ reader.onload = async event => {
+ resolve(await (await fetch(event.target.result)).blob());
+ }
+ reader.readAsDataURL(file);
+ });
+ },
+ async setAttachment({blob, file = blob}){
+ this.attachment = {
+ msgtype: this.getMsgType(file.type),
+ mimetype: file.type,
+ url: window.URL.createObjectURL(file),
+ blob: blob || await this.readFile(file),
+ file
+ };
+ this.event.content = {
+ body: file.name,
+ msgtype: this.attachment.msgtype,
+ mimetype: this.attachment.mimetype
+ };
+ },
+ resetAttachment(){
+ if (!this.attachment) return;
+ window.URL.revokeObjectURL(this.attachment.file);
+ this.event.content = {
+ body: this.attachment?this.event.content.body.replace(this.attachment.file.name, ''):'',
+ msgtype: 'm.text'
+ };
+ this.attachment = undefined;
},
getMsgType(fileType){
return {
@@ -173,9 +212,7 @@ export default {
body: '',
msgtype: 'm.text',
'm.relates_to': {
- 'm.in_reply_to': {
- event_id: undefined
- }
+ 'm.in_reply_to': this.replyTo
}
}
},
@@ -186,7 +223,14 @@ export default {
}),
isRecording: false,
recBlob: undefined,
- attachment: undefined
+ attachment: undefined,
+ eventProxy: {
+ set: ()=>{},
+ get: (target, key) => {
+ if (typeof target[key] === 'object') return new Proxy(target[key], this.eventProxy);
+ return target[key];
+ }
+ }
}
},
updated() {
@@ -195,7 +239,7 @@ export default {
}
-