Merge branch 'master' into matrix-chat-native

2021-04-06 03:34:04 +02:00 · 2021-04-06 03:34:04 +02:00 · 57d6238ed6
commit 57d6238ed6
parent 4a28e22b82 8dd34b58ee
12 changed files with 187 additions and 106 deletions
--- a/src/App.vue
+++ b/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;
--- a/src/components/chatInformation.vue
+++ b/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(){
--- a/src/components/message.vue
+++ b/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>
--- a/src/components/newMessage.vue
+++ b/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>
--- a/src/components/roomListElement.vue
+++ b/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
  }
 }
--- a/src/components/timeline.vue
+++ b/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
@ -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;
          }
--- a/src/components/topBanner.vue
+++ b/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>
--- a/src/lib/eventUtils.js
+++ b/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')
+  );
+}
--- a/src/lib/matrixHandler.js
+++ b/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}`)
+      );
  }
 }
--- a/src/lib/matrixUtils.js
+++ b/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);
+}
--- a/src/views/chat.vue
+++ b/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;
  }
--- a/src/views/rooms.vue
+++ b/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;