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

Merge branch 'master' into matrix-chat-native

Browse Source
matrix-chat-native
adb 3 years ago
parent 4a28e22b82 8dd34b58ee
commit 57d6238ed6
12 changed files with 187 additions and 106 deletions
Show Stats Download Patch File Download Diff File

2
src/App.vue
Unescape View File

@ -28,7 +28,7 @@ input{
color: #fff;
background-color: #1d1d1d;
border-radius: 1.25rem;
border: 1px solid #fff;
border: 0.1rem solid #fff;
text-align: center;
font-size: 1.1rem;
margin: 0.5rem;

8
src/components/chatInformation.vue
Unescape View File

@ -18,15 +18,15 @@
<p v-if="members.length>20">and {{members.length-20}} other members</p>
</div>
</div>
<icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
<icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.svg" />
</div>
</template>
<script>
import icon from './icon.vue';
import {matrix} from "@/main";
import UserListElement from "@/components/userListElement";
import avatar from "@/components/avatar";
import {getMxcFromRoom} from "@/lib/getMxc";
import {getUser} from "@/lib/matrixUtils";
export default {
name: "chatInformation",
@ -40,12 +40,10 @@ export default {
closeChatInfo: Function
},
methods: {
getUser(userId){
return matrix.client.getUser(userId);
},
getMembers(){
return Object.keys(this.room.currentState.members)
},
getUser,
getMxcFromRoom
},
data(){

41
src/components/message.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<div :class="type==='send'?'messageSend':'messageReceive'" class="message">
<div v-if="replyEvent" class="reply">
{{replyEvent.sender}}<br>
{{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
<span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
<span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
</div>
<div v-html="parseMessage(msg)"></div>
<div class="time">{{time}}</div>
@ -10,10 +10,12 @@
</template>
<script>
import {matrix} from "@/main";
import {matrix} from '@/main';
import {calcUserName} from '@/lib/matrixUtils';
import {parseMessage} from '@/lib/eventUtils';
export default {
name: "message",
name: 'message',
props: {
msg: String,
time: String,
@ -22,18 +24,6 @@ export default {
roomId: String
},
methods:{
solveTextLinks(text){
return (text || "").replace(
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
(match, space, url)=>{
let hyperlink = url;
if (!hyperlink.match('^https?://')) {
hyperlink = 'http://' + hyperlink;
}
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
}
)
},
async getReplyEvent(content) {
let replyId = this.getReplyId(content);
if (replyId === undefined) return undefined;
@ -43,15 +33,11 @@ export default {
},
getReplyId(content){
if(!content['m.relates_to']) return undefined;
return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
if(!content['m.relates_to']['m.in_reply_to']) return undefined;
return content['m.relates_to']['m.in_reply_to'].event_id;
},
parseMessage(msg){
return this.solveTextLinks(
msg.replace(/>.*\n/gm, '').trim()
.replace(/</g, '&lt')
.replace(/>/g, '&gt')
);
}
calcUserName,
parseMessage
},
data(){
return{
@ -79,13 +65,13 @@ export default {
margin-top: 0.25rem;
}
.messageReceive{
background-color: #42b983;
background-color: #424141;
border-radius: 1rem 1rem 1rem 0;
}
.messageSend{
margin-left:auto;
margin-right:0;
background-color: #42a7b9;
background-color: #357882;
border-radius: 1rem 1rem 0 1rem;
}
.time{
@ -99,4 +85,7 @@ export default {
padding-left: 0.5rem;
margin-bottom: 0.5rem;
}
.username{
font-weight: bold;
}
</style>

77
src/components/newMessage.vue
Unescape View File

@ -1,16 +1,16 @@
<template>
<form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
<label for="newMessageInput"></label>
<div class="newMessageBanner" ref="newMessageBanner">
<div class="reply" v-if="replyTo" @click="resetReplyTo">
<span class="username">{{calcUserName(replyTo.sender)}}</span><br>
{{parseMessage(replyTo.content.body)}}
</div>
<form v-on:submit.prevent="sendMessage()">
<textarea
@keyup.enter.exact="sendMessage()"
@input="resizeMessageBanner()"
v-model="msg.content.body"
ref="newMessageInput"
id="newMessageInput"
class="newMessageInput"
autocomplete="off"
rows="1"
placeholder="type a message ..."
v-model="event.content.body"
ref="newMessageInput" class="newMessageInput"
rows="1" placeholder="type a message ..."
/>
<icon
type="submit"
@ -19,52 +19,67 @@
ic="./sym/ic_send_white.svg"
/>
</form>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
import {matrix} from '@/main.js';
import {parseMessage} from '@/lib/eventUtils';
import {calcUserName} from '@/lib/matrixUtils';
export default {
name: "newMessage",
name: 'newMessage',
components: {
icon
},
props: {
onResize: Function,
roomId: String
roomId: String,
replyTo: Object,
resetReplyTo: Function
},
methods: {
sendMessage(){
let content = this.msg.content;
let content = this.event.content;
if (!content.body.trim()) return;
let msgSend = Object.assign({}, this.msg);
matrix.sendEvent(msgSend, this.roomId);
content.body = "";
matrix.sendEvent(this.event, this.roomId, this.replyTo);
content.body = '';
this.resetReplyTo();
let id = this.$refs.newMessageInput;
id.style.height = "1.25rem";
id.style.height = '1.25rem';
this.onResize(id.parentElement.clientHeight);
},
resizeMessageBanner(){
let id = this.$refs.newMessageInput;
id.style.height = '1.25rem';
id.style.height = `${id.scrollHeight}px`;
this.onResize(id.parentElement.clientHeight);
this.onResize(this.$refs.newMessageBanner.clientHeight);
},
focusInput(){
this.$refs.newMessageInput.focus();
},
toggleEmojiPicker() {
this.showEmojiPicker = !this.showEmojiPicker;
},
onSelectEmoji(emoji) {
this.msg.content.body += emoji.data;
}
this.event.content.body += emoji.data;
},
parseMessage,
calcUserName
},
data(){
return {
msg: {
type: "m.room.message",
event: {
type: 'm.room.message',
content: {
body: "",
msgtype: "m.text"
body: '',
msgtype: 'm.text',
'm.relates_to': {
'm.in_reply_to': {
event_id: undefined
}
}
}
},
showEmojiPicker: false
@ -89,7 +104,7 @@ export default {
margin-top: 1.25rem;
margin-bottom: 0.75rem;
padding: 0;
left: 2rem;
left: 1rem;
min-height: 1.5rem;
max-height: 10rem;
width: calc(100% - 7rem);
@ -110,4 +125,18 @@ export default {
bottom: 0.25rem;
background-color: unset;
}
.reply{
position: relative;
width: calc(100% - 7rem);
left: 1rem;
border-left: 2px solid #fff;
padding-left: 0.5rem;
margin-top: 0.75rem;
margin-right: 0.5rem;
word-break: break-word;
white-space: pre-line;
}
.username{
font-weight: bold;
}
</style>

7
src/components/roomListElement.vue
Unescape View File

@ -17,7 +17,7 @@
import avatar from "@/components/avatar";
import {getMxcFromRoom} from "@/lib/getMxc";
import {getTime} from "@/lib/getTimeStrings";
import {matrix} from "@/main";
import {calcUserName} from "@/lib/matrixUtils";
export default {
name: "userListElement",
@ -37,10 +37,7 @@ export default {
if (!room.timeline[room.timeline.length-1]) return undefined;
return room.timeline[room.timeline.length-1].event;
},
calcUserName(userId) {
if (matrix.user === userId) return 'you';
return matrix.client.getUser(userId).displayName || userId;
},
calcUserName,
getMxcFromRoom
}
}

35
src/components/timeline.vue
Unescape View File

@ -22,13 +22,14 @@
:class="groupTimeline?'indent username':'username'"
v-if="group[0].sender !== user && groupTimeline"
>
{{getUser(group[0].sender).displayName || group[0].sender}}
{{calcUserName(group[0].sender)}}
</div>
<div
:class="groupTimeline?'indent event':'event'"
v-for="event in group"
:key="event.origin_server_ts"
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
@contextmenu.prevent="setReplyTo(event)"
>
<message
v-if="event.content.msgtype==='m.text'"
@ -37,6 +38,10 @@
:content="event.content"
:roomId="roomId"
/>
<div v-else-if="event.content.msgtype==='m.notice'" class="notice">
{{event.content.body}}
<span class="time">{{getTime(event.origin_server_ts)}}</span>
</div>
<div v-else-if="event.type==='m.room.member'" class="info">
{{membershipEvents[event.content.membership]}}
<span class="time">{{getTime(event.origin_server_ts)}}</span>
@ -50,11 +55,12 @@
</template>
<script>
import message from "@/components/message";
import avatar from "@/components/avatar";
import {matrix} from "@/main";
import splitArray from "@/lib/splitArray";
import {getDate, getTime} from "@/lib/getTimeStrings";
import message from '@/components/message';
import avatar from '@/components/avatar';
import splitArray from '@/lib/splitArray';
import {getDate, getTime} from '@/lib/getTimeStrings';
import {getUser, calcUserName} from '@/lib/matrixUtils';
export default {
name: 'eventGroup',
components: {
@ -65,12 +71,12 @@ export default {
timeline: Array,
user: String,
groupTimeline: Boolean,
roomId: String
roomId: String,
setReplyTo: Function
},
methods: {
getUser(userId) {
return matrix.client.getUser(userId);
},
getUser,
calcUserName,
splitArray,
getDate,
getTime
@ -132,11 +138,18 @@ export default {
font-weight: bold;
}
.event{
.info{
.info {
font-style: italic;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
.time {
font-size: 0.7rem;
}
}
.notice{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
.time{
font-size: 0.7rem;
}

2
src/components/topBanner.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<div class="topBanner">
<div>
<icon @click.native="closeChat()" class="topIcon" ic="./sym/arrow_back-24px.svg" />
<icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.svg" />
<div @click="openChatInfo()" class="container">
<avatar class="topIcon avatar" :mxcURL="getMxcFromRoom(room)" :fallback="room.roomId" :size="3"/>
<div class="chatName">{{room.name}}</div>

19
src/lib/eventUtils.js
Unescape View File

@ -0,0 +1,19 @@
export function solveTextLinks(text){
return (text || '').replace(
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
(match, space, url)=>{
let hyperlink = url;
if (!hyperlink.match('^https?://')) {
hyperlink = 'http://' + hyperlink;
}
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
}
)
}
export function parseMessage(msg){
return solveTextLinks(
msg.replace(/>.*\n/gm, '').trim()
.replace(/</g, '&lt')
.replace(/>/g, '&gt')
);
}

25
src/lib/matrixHandler.js
Unescape View File

@ -68,18 +68,17 @@ export class MatrixHandler {
callback();
});
}
async sendEvent(msg, roomId){
const msgSend = {
type: msg.type,
content: {
body: msg.content.body.trim(),
msgtype: msg.content.msgtype,
},
};
await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => {
console.log('message sent successfully');
}).catch((err) => {
console.log(`error while sending message => ${err}`);
});
async sendEvent({content, type}, roomId, replyTo = undefined){
await this.client.sendEvent(roomId, type, {
body: content.body.trim(),
msgtype: content.msgtype,
'm.relates_to': {
'm.in_reply_to': {
event_id: replyTo?replyTo.event_id:undefined
}
}
}).then(() => console.log('message sent successfully'))
.catch((err) => console.log(`error while sending message => ${err}`)
);
}
}

12
src/lib/matrixUtils.js
Unescape View File

@ -0,0 +1,12 @@
import {matrix} from '@/main';
export function getUser(userId) {
return matrix.client.getUser(userId);
}
export function calcUserName(userId){
if (matrix.user === userId) return 'you';
return matrix.client.getUser(userId).displayName || userId;
}
export function getRoom(roomId){
return matrix.client.getRoom(roomId);
}

33
src/views/chat.vue
Unescape View File

@ -1,14 +1,21 @@
<template>
<div>
<div ref="chatContainer" class="chatContainer">
<div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
<timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" />
<timeline
:timeline="room.timeline" :group-timeline="isGroup()"
:user="user" :roomId="room.roomId"
:setReplyTo="event=>{replyTo=event; resize();}"
/>
</div>
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
</div>
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
<newMessage
:onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
:replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
/>
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
</div>
</template>
@ -20,7 +27,7 @@ import Icon from '@/components/icon';
import {matrix} from '@/main';
import splitArray from '@/lib/splitArray.js'
import timeline from '@/components/timeline';
import scrollHandler from "@/lib/scrollHandler";
import scrollHandler from '@/lib/scrollHandler';
export default {
name: 'chat',
@ -38,10 +45,10 @@ export default {
},
methods:{
onScroll(){
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
if (this.$refs.timelineContainer.scrollTop === 0) this.loadEvents();
this.showScrollBtn = this.scroll.getScrollBottom() > 400;
},
resize(height){
resize(height = this.$refs.newMessage.clientHeight){
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
},
isGroup(){
@ -52,7 +59,7 @@ export default {
this.loadingStatus = 'loading ...';
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
.then(state => this.loadingStatus = state?'load more':false);
this.scroll.setScrollBottom(scrollBottom);
if (this.loadingStatus) this.scroll.setScrollBottom(scrollBottom);
},
getUser(userId){
return matrix.client.getUser(userId);
@ -64,15 +71,21 @@ export default {
showScrollBtn: false,
scrollOnUpdate: true,
loadingStatus: 'load more',
scroll: ()=>{}
scroll: ()=>{},
replyTo: undefined
}
},
updated(){
if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
},
mounted(){
this.scroll = new scrollHandler(this.$refs.msgContainer);
this.scroll = new scrollHandler(this.$refs.timelineContainer);
this.scroll.scrollToBottom();
},
watch: {
'$route'(){
this.scroll.scrollToBottom();
}
}
}
</script>
@ -85,7 +98,7 @@ export default {
top: 3.5rem;
width: 100%;
height: calc(100% - 7rem);
.messagesContainer{
.timelineContainer{
height: 100%;
overflow-y: auto;
}

32
src/views/rooms.vue
Unescape View File

@ -6,7 +6,11 @@
<div id="roomList" class="roomList">
<h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
<input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
<div
v-for="room in Object.assign([], matrix.rooms)
.sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)"
:key="room.roomId" @click="openChat(room)"
>
<room-list-element
v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())"
:room="room"
@ -16,14 +20,14 @@
</div>
<chat
class="chat"
v-if="currentRoom"
:room="currentRoom"
v-if="showRoom && getCurrentRoom()"
:room="getCurrentRoom()"
:user="matrix.user"
:close-chat="()=>currentRoom=undefined"
:close-chat="closeChat"
:open-chat-info="()=>showChatInfo=true"
/>
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
<chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
<chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
</div>
</template>
@ -34,6 +38,7 @@ import {matrix} from "@/main";
import ThrobberOverlay from "@/components/throbberOverlay";
import {getMxcFromRoom} from "@/lib/getMxc";
import roomListElement from "@/components/roomListElement";
import {getRoom} from "@/lib/matrixUtils";
export default {
name: "rooms",
@ -46,18 +51,25 @@ export default {
methods:{
openChat(room){
this.showChatInfo = false;
this.currentRoom = undefined
this.$nextTick(() => this.currentRoom = room);
this.showRoom = false;
this.$router.push(`/rooms/${room.roomId}`);
this.$nextTick(() => this.showRoom = true);
this.search = '';
},
getMxcFromRoom
getMxcFromRoom,
getRoom,
getCurrentRoom(){
return getRoom(this.$route.path.split('/')[2]);
},
closeChat(){
this.$router.push('/rooms');
}
},
data(){
return {
matrix,
currentRoom: undefined,
showChatInfo: false,
showRoom: true,
search: ''
}
},
@ -102,7 +114,7 @@ export default {
text-align: center;
}
input{
width: calc(100% - 5rem);
width: calc(100% - 5.2rem);
}
.wideElement{
display: block;

Write Preview
Loading…
Cancel
Save