adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

update/debug newMessage and chat

Browse Source
This commit is contained in:
adb 2021-03-15 16:38:37 +01:00
parent 4963bec650
commit 7e611a96f5
4 changed files with 96 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -12,7 +12,6 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"matrix-js-sdk": "^9.1.0", "matrix-js-sdk": "^9.1.0",
"sass": "^1.29.0", "sass": "^1.29.0",
"sass-loader": "^10.1.0",
"v-emoji-picker": "^2.3.1", "v-emoji-picker": "^2.3.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"ws": "^7.3.1" "ws": "^7.3.1"

38
src/components/newMessage.vue
View File

@ -1,44 +1,42 @@
<template> <template>
<div class="newMessageBanner"> <form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
<form v-on:submit.prevent="sendMessage()">
<label for="newMessageInput"></label> <label for="newMessageInput"></label>
<textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" <textarea @keyup.enter.exact="sendMessage()" @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
autocomplete="off" rows="1" placeholder="type a message ..." v-model="msg.content.body" /> autocomplete="off" rows="1" placeholder="type a message ..." v-model="msg.content.body" />
<icon type="submit" title="press enter to submit" id="sendMessageBtn" <icon type="submit" title="press enter to submit" id="sendMessageBtn"
ic="./sym/ic_send_white_24px.svg" /> ic="./sym/ic_send_white_24px.svg" />
</form> </form>
</div>
</template> </template>
<script> <script>
import icon from '@/components/icon.vue'; import icon from '@/components/icon.vue';
import main from '@/main.js'; import {matrix} from '@/main.js';
import matrix from '@/matrix.js';
export default { export default {
name: "newMessage", name: "newMessage",
components: { components: {
icon icon
}, },
props: {
onResize: Function,
roomId: String
},
methods: { methods: {
sendMessage(){ async sendMessage(){
if (this.msg.content.body !== "") { if (this.msg.content.body !== "") {
let msgSend = Object.assign({}, this.msg) let msgSend = Object.assign({}, this.msg);
matrix.methods.sendMessage(msgSend) await matrix.sendEvent(msgSend, this.roomId);
this.msg.content.body = "" this.msg.content.body = "";
document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)" let id = this.$refs.newMessageInput;
document.getElementById("newMessageInput").style.height = "1.25rem" id.style.height = "1.25rem";
//let msgContainer = document.getElementById("messagesContainer") this.onResize(id.parentElement.clientHeight);
//msgContainer.scrollTo(0, msgContainer.scrollHeight)
} }
}, },
resizeMessageBanner(){ resizeMessageBanner(){
let id = this.$refs.newMessageInput let id = this.$refs.newMessageInput;
id.style.height = '1.25rem' id.style.height = '1.25rem';
id.style.height = `${id.scrollHeight}px` id.style.height = `${id.scrollHeight}px`;
let msgContainer = document.getElementById("messagesContainer") this.onResize(id.parentElement.clientHeight);
msgContainer.style.height
= `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
}, },
toggleEmojiPicker() { toggleEmojiPicker() {
this.showEmojiPicker = !this.showEmojiPicker; this.showEmojiPicker = !this.showEmojiPicker;
@ -56,8 +54,6 @@ export default {
msgtype: "m.text" msgtype: "m.text"
} }
}, },
chatroom: main.data().chatroom,
session: matrix.data().session,
showEmojiPicker: false showEmojiPicker: false
} }
} }

7
src/lib/matrixHandler.js
View File

@ -62,4 +62,11 @@ export class MatrixHandler {
} }
}) })
} }
async sendEvent(msg, roomId){
await this.client.sendEvent(roomId, msg.type, msg.content, '').then(() => {
console.log('message sent successfully');
}).catch((err) => {
console.log(`error while sending message => ${err}`);
});
}
} }

97
src/views/chat.vue
View File

@ -1,22 +1,11 @@
<template> <template>
<div> <div>
<div ref="chatContainer" class="chatContainer">
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages"> <div id="messages" class="messages" ref="messages">
<p v-if="room.timeline.length === 0" class="info">this room is empty</p> <p v-if="room.timeline.length === 0" class="info">this room is empty</p>
<!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event"> <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)" obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
</div>
<div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
style="margin-left: 3rem; margin-top: 1rem">{{message.sender}}
</div>
<message :type="message.sender === session.user?'send':'receive'"
:group="session.currentRoom.members.length > 2"
:msg=message.content.body :time=getTime(message.origin_server_ts) />
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
:userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>-->
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline, obj => getDate(obj.event.origin_server_ts), obj => obj.event)" :key="timeGroup[0].origin_server_ts">
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div> <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts"> <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
<div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div> <div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
@ -24,7 +13,7 @@
<userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" /> <userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div> </div>
<div class="event" v-for="event in group" :key="event.origin_server_ts"> <div class="event" v-for="event in group" :key="event.origin_server_ts">
<message :type="event.sender === user?'send':'receive'" <message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
:group="room._membersPromise.length > 2" :group="room._membersPromise.length > 2"
:msg=event.content.body :time=getTime(event.origin_server_ts) /> :msg=event.content.body :time=getTime(event.origin_server_ts) />
</div> </div>
@ -32,15 +21,16 @@
</div> </div>
</div> </div>
</div> </div>
<!--<newMessage />-->
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" /> <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
</div>
<newMessage :onResize="(height)=>resize(height)" :roomId="room.roomId"/>
<!--<topBanner />--> <!--<topBanner />-->
</div> </div>
</template> </template>
<script> <script>
import message from '@/components/message.vue'; import message from '@/components/message.vue';
//import newMessage from '@/components/newMessage.vue'; import newMessage from '@/components/newMessage.vue';
//import topBanner from '@/components/topBanner.vue'; //import topBanner from '@/components/topBanner.vue';
import Icon from "@/components/icon"; import Icon from "@/components/icon";
import userThumbnail from '@/components/userThumbnail'; import userThumbnail from '@/components/userThumbnail';
@ -50,7 +40,7 @@ export default {
components: { components: {
Icon, Icon,
message, message,
//newMessage, newMessage,
//topBanner, //topBanner,
userThumbnail userThumbnail
}, },
@ -75,8 +65,8 @@ export default {
if (this.$refs.msgContainer.scrollTop === 0){ if (this.$refs.msgContainer.scrollTop === 0){
console.log("load messages") console.log("load messages")
} }
let msgContainer = document.getElementById("messagesContainer") let msg = this.$refs.msgContainer;
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200; this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
}, },
splitArray(arr, key, get=obj=>obj){ splitArray(arr, key, get=obj=>obj){
let payload = [[]]; let payload = [[]];
@ -87,6 +77,9 @@ export default {
if (key(obj) !== key(nextObj)) payload.push([]); if (key(obj) !== key(nextObj)) payload.push([]);
}) })
return payload; return payload;
},
resize(height){
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3rem)`;
} }
}, },
data(){ data(){
@ -101,38 +94,56 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.messagesContainer{ .chatContainer{
position: absolute; position: absolute;
margin: 0; margin: 0;
left: 0; left: 0;
top: 3rem; top: 3rem;
height: calc(100% - 7rem);
width: 100%; width: 100%;
height: calc(100% - 7rem);
.messagesContainer{
height: 100%;
overflow-y: auto; overflow-y: auto;
}
.messages{ .messages{
position: relative; position: relative;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} .eventGroup{
#scrollDown{ position: relative;
position: absolute; width: 100%;
background-color: #fff; height: fit-content;
bottom: 5rem; margin-top: 0.75rem;
right: 1rem;
display: block;
} }
.info{ .info{
text-align: center; text-align: center;
font-style: italic; font-style: italic;
margin: 1rem; margin: 1rem;
} }
.eventGroup{ .time{
position: relative; top: 0.25rem;
width: 100%; position: sticky;
height: fit-content; z-index: 100;
margin-top: 0.75rem; background-color: #2d2d2d;
padding: 0.5rem;
border-radius: 0.5rem;
width: fit-content;
left: 50%;
transform: translate(-50%,0);
margin-top: 0.5rem;
}
}
}
#scrollDown{
position: absolute;
background-color: #fff;
bottom: 1rem;
right: 1rem;
display: block;
height: 2rem;
width: 2rem;
}
} }
.userThumbnail{ .userThumbnail{
position: absolute; position: absolute;
@ -152,16 +163,4 @@ export default {
.username{ .username{
margin-left: 1rem; margin-left: 1rem;
} }
.time{
top: 0.25rem;
position: sticky;
z-index: 100;
background-color: #2d2d2d;
padding: 0.5rem;
border-radius: 0.5rem;
width: fit-content;
left: 50%;
transform: translate(-50%,0);
margin-top: 0.5rem;
}
</style> </style>