Merge branch 'master' into matrix-chat-native

src/App.vue

@@ -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;

src/components/chatInformation.vue

@@ -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(){

src/components/message.vue

@@ -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>

src/components/newMessage.vue

@@ -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>

src/components/roomListElement.vue

@@ -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
   }
 }

src/components/timeline.vue

@@ -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
@@ -141,6 +147,13 @@ export default {
             font-size: 0.7rem;
           }
         }
+        .notice{
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+          .time{
+            font-size: 0.7rem;
+          }
+        }
       }
       .indent{
         margin-left: 2.5rem;

src/components/topBanner.vue

@@ -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>

src/lib/eventUtils.js

@@ -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')
+  );
+}

src/lib/matrixHandler.js

@@ -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}`)
+      );
   }
 }

src/lib/matrixUtils.js

@@ -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);
+}

src/views/chat.vue

@@ -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;
   }

src/views/rooms.vue

@@ -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;