From 22c61707879891db048aed1bcace5db6a44fa153 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Fri, 9 Apr 2021 01:02:18 +0200
Subject: [PATCH 01/18] extract event from timeline.vue to message.vue &
 message.vue -> event.vue

---
 src/components/event.vue    | 134 ++++++++++++++++++++++++++++++++++++
 src/components/message.vue  |  91 ------------------------
 src/components/timeline.vue |  65 +++--------------
 3 files changed, 145 insertions(+), 145 deletions(-)
 create mode 100644 src/components/event.vue
 delete mode 100644 src/components/message.vue

diff --git a/src/components/event.vue b/src/components/event.vue
new file mode 100644
index 0000000..1d33677
--- /dev/null
+++ b/src/components/event.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="event">
+    <div v-if="event.content.msgtype==='m.text'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
+      <div v-if="replyEvent" class="reply">
+        <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(event.content.body)"></div>
+      <div class="time">{{getTime(event.origin_server_ts)}}</div>
+    </div>
+    <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](event)}}
+      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    </div>
+    <div v-else class="info">unknown event
+      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {matrix} from '@/main';
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';
+import {getTime} from '@/lib/getTimeStrings';
+
+export default {
+  name: 'message',
+  props: {
+    type: String,
+    event: Object,
+    onUpdate: Function
+  },
+  methods:{
+    async getReplyEvent(event){
+      let replyId = this.getReplyId(event.content);
+      return replyId && await matrix.client.fetchRoomEvent(this.event.room_id, replyId);
+    },
+    getReplyId(content){
+      return content['m.relates_to']
+        && content['m.relates_to']['m.in_reply_to']
+        && content['m.relates_to']['m.in_reply_to'].event_id
+    },
+    calcMembershipEvents(){
+
+    },
+    calcUserName,
+    parseMessage,
+    getTime
+  },
+  data(){
+    return{
+      replyEvent: undefined,
+      membershipEvents:{
+        invite(event){ return `invited ${calcUserName(event.target.userId)}` },
+        join(event){
+          if (event.content.displayname !== null) return `changed username to ${event.content.displayname}`
+          return 'joined the room'
+        },
+        leave(){ return 'left the room' },
+        ban(event){return `banned ${calcUserName(event.target.userId)}` }
+      }
+    }
+  },
+  created(){
+    this.getReplyEvent(this.event).then((res) => this.replyEvent = res);
+  },
+  updated(){
+    this.onUpdate();
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.event{
+  .info {
+    font-style: italic;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    margin-left: 0.5rem;
+    .time {
+      font-size: 0.7rem;
+    }
+  }
+  .message{
+    position: relative;
+    width: max-content;
+    min-width: 2rem;
+    max-width: calc(100% - 5rem);
+    padding: 0.7rem 1rem 0.45rem 1rem;
+    background-color: #42a7b9;
+    border-radius: 1rem 1rem 0 1rem;
+    text-align: left;
+    word-break: break-word;
+    white-space: pre-line;
+    margin-top: 0.25rem;
+    .reply{
+      border-left:  2px solid #fff;
+      padding-left: 0.5rem;
+      margin-bottom: 0.5rem;
+      .username{
+        font-weight: bold;
+      }
+    }
+    .time{
+      position: relative;
+      bottom: -0.2rem;
+      font-size: 0.7rem;
+      text-align: right;
+    }
+  }
+  .messageReceive{
+    background-color: #424141;
+    border-radius: 1rem 1rem 1rem 0;
+  }
+  .messageSend{
+    margin-left:auto;
+    margin-right:0;
+    background-color: #357882;
+    border-radius: 1rem 1rem 0 1rem;
+  }
+  .notice{
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    .time{
+      font-size: 0.7rem;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/message.vue b/src/components/message.vue
deleted file mode 100644
index 5186bf6..0000000
--- a/src/components/message.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <div v-if="replyEvent" class="reply">
-        <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>
-    </div>
-</template>
-
-<script>
-import {matrix} from '@/main';
-import {calcUserName} from '@/lib/matrixUtils';
-import {parseMessage} from '@/lib/eventUtils';
-
-export default {
-  name: 'message',
-  props: {
-    msg: String,
-    time: String,
-    type: String,
-    content: Object,
-    roomId: String
-  },
-  methods:{
-    async getReplyEvent(content) {
-      let replyId = this.getReplyId(content);
-      if (replyId === undefined) return undefined;
-      await matrix.client.fetchRoomEvent(this.roomId, replyId).then((res) => {
-        this.replyEvent = res;
-      });
-    },
-    getReplyId(content){
-      if(!content['m.relates_to']) return undefined;
-      if(!content['m.relates_to']['m.in_reply_to']) return undefined;
-      return content['m.relates_to']['m.in_reply_to'].event_id;
-    },
-    calcUserName,
-    parseMessage
-  },
-  data(){
-    return{
-      replyEvent: undefined
-    }
-  },
-  created() {
-    this.getReplyEvent(this.content);
-  }
-}
-</script>
-
-<style scoped>
-  .message{
-    position: relative;
-    width: max-content;
-    min-width: 2rem;
-    max-width: calc(100% - 5rem);
-    padding: 0.7rem 1rem 0.45rem 1rem;
-    background-color: #42a7b9;
-    border-radius: 1rem 1rem 0 1rem;
-    text-align: left;
-    word-break: break-word;
-    white-space: pre-line;
-    margin-top: 0.25rem;
-  }
-  .messageReceive{
-    background-color: #424141;
-    border-radius: 1rem 1rem 1rem 0;
-  }
-  .messageSend{
-    margin-left:auto;
-    margin-right:0;
-    background-color: #357882;
-    border-radius: 1rem 1rem 0 1rem;
-  }
-  .time{
-    position: relative;
-    bottom: -0.2rem;
-    font-size: 0.7rem;
-    text-align: right;
-  }
-  .reply{
-    border-left:  2px solid #fff;
-    padding-left: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .username{
-    font-weight: bold;
-  }
-</style>
\ No newline at end of file
diff --git a/src/components/timeline.vue b/src/components/timeline.vue
index 78f70bc..661dc22 100644
--- a/src/components/timeline.vue
+++ b/src/components/timeline.vue
@@ -24,38 +24,23 @@
         >
           {{calcUserName(group[0].sender)}}
         </div>
-        <div
-          :class="groupTimeline?'indent event':'event'"
-           v-for="event in group"
+        <event
+          v-for="event in group"
           :key="event.origin_server_ts"
+          :class="groupTimeline?'indent event':'event'"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
           @contextmenu.prevent="setReplyTo(event)"
-        >
-          <message
-            v-if="event.content.msgtype==='m.text'"
-            :type="event.sender === user?'send':'receive'"
-            :msg=event.content.body :time=getTime(event.origin_server_ts)
-            :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>
-          </div>
-          <div v-else class="info">unknown event
-            <span class="time">{{getTime(event.origin_server_ts)}}</span></div>
-        </div>
+          :type="event.sender === user?'send':'receive'"
+          :event="event"
+          :on-update="()=>onUpdate()"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import message from '@/components/message';
+import event from '@/components/event';
 import avatar from '@/components/avatar';
 import splitArray from '@/lib/splitArray';
 import {getDate, getTime} from '@/lib/getTimeStrings';
@@ -64,15 +49,15 @@ import {getUser, calcUserName} from '@/lib/matrixUtils';
 export default {
   name: 'eventGroup',
   components: {
-    message,
+    event,
     avatar
   },
   props: {
     timeline: Array,
     user: String,
     groupTimeline: Boolean,
-    roomId: String,
-    setReplyTo: Function
+    setReplyTo: Function,
+    onUpdate: Function
   },
   methods: {
     getUser,
@@ -80,16 +65,6 @@ export default {
     splitArray,
     getDate,
     getTime
-  },
-  data(){
-    return {
-      membershipEvents:{
-        invite: 'was invented',
-        join: 'joined the room',
-        leave: 'left the room',
-        ban: 'was banned'
-      }
-    }
   }
 }
 </script>
@@ -137,24 +112,6 @@ export default {
         margin-left: 1rem;
         font-weight: bold;
       }
-      .event{
-        .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;
-          }
-        }
-      }
       .indent{
         margin-left: 2.5rem;
       }

From 30a7e4da81ebabf59a7fd650009b494d415dee8d Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Fri, 9 Apr 2021 01:03:11 +0200
Subject: [PATCH 02/18] fix login userid regex

---
 src/views/login.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index 713ab5d..45570ee 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -42,7 +42,7 @@ export default {
       } if (this.password === '') {
         this.loginError = 'password is empty';
         return;
-      } if (!(this.user.match(/^@[a-zA-Z0-9]+:[a-z0-9]+\.[a-z]/))) {
+      } if (!(this.user.match(/^@[a-zA-Z0-9_.+-]+:[a-z0-9.-]+\.[a-z]+$/))) {
         this.loginError = 'username is in wrong style';
         return;
       }

From 8a9b5a478ba68ad5bc9cdc76eaecad09bcf7ab37 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Fri, 9 Apr 2021 21:05:33 +0200
Subject: [PATCH 03/18] fix setReply / add manageScrollBottom

---
 src/components/timeline.vue |  4 ++--
 src/views/chat.vue          | 29 +++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/timeline.vue b/src/components/timeline.vue
index 661dc22..6dd2444 100644
--- a/src/components/timeline.vue
+++ b/src/components/timeline.vue
@@ -29,10 +29,10 @@
           :key="event.origin_server_ts"
           :class="groupTimeline?'indent event':'event'"
           :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
-          @contextmenu.prevent="setReplyTo(event)"
+          @contextmenu.prevent.native="setReplyTo(event)"
           :type="event.sender === user?'send':'receive'"
           :event="event"
-          :on-update="()=>onUpdate()"
+          :on-update="onUpdate"
         />
       </div>
     </div>
diff --git a/src/views/chat.vue b/src/views/chat.vue
index df6c343..faeaee0 100644
--- a/src/views/chat.vue
+++ b/src/views/chat.vue
@@ -7,16 +7,17 @@
         <timeline
           :timeline="room.timeline" :group-timeline="isGroup()"
           :user="user" :roomId="room.roomId"
-          :setReplyTo="event=>{replyTo=event; resize();}"
+          :setReplyTo="setReplyTo"
+          :on-update="()=>$nextTick(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" ref="newMessage"
-      :replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
+      :onResize="resize" :roomId="room.roomId" ref="newMessage"
+      :replyTo="replyTo" :resetReplyTo="resetReplyTo"
     />
-    <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
+    <topBanner :room="room" :close-chat="closeChat" :open-chat-info="openChatInfo"/>
   </div>
 </template>
 
@@ -28,6 +29,7 @@ import {matrix} from '@/main';
 import splitArray from '@/lib/splitArray.js'
 import timeline from '@/components/timeline';
 import scrollHandler from '@/lib/scrollHandler';
+import {getUser} from "@/lib/matrixUtils";
 
 export default {
   name: 'chat',
@@ -48,8 +50,9 @@ export default {
       if (this.$refs.timelineContainer.scrollTop < 400 && this.loadingStatus !== 'loading') this.loadEvents();
       this.showScrollBtn = this.scroll.getScrollBottom() > 500;
     },
-    resize(height = this.$refs.newMessage.clientHeight){
+    resize(height = this.$refs.newMessage.$refs.newMessageBanner.clientHeight){
       this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
+      this.manageScrollBottom();
     },
     isGroup(){
       return Object.keys(this.room.currentState.members).length > 2;
@@ -61,9 +64,19 @@ export default {
       this.loadingStatus = 'load more';
       this.scroll.setScrollBottom(scrollBottom)
     },
-    getUser(userId){
-      return matrix.client.getUser(userId);
+    setReplyTo(event){
+      this.replyTo=event;
+      this.$refs.newMessage.focusInput();
+      this.$nextTick(this.resize);
     },
+    resetReplyTo(){
+      this.replyTo=undefined;
+      this.$nextTick(this.resize);
+    },
+    manageScrollBottom(){
+      if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
+    },
+    getUser,
     splitArray
   },
   data(){
@@ -76,7 +89,7 @@ export default {
     }
   },
   updated(){
-    if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
+    this.manageScrollBottom();
   },
   mounted(){
     this.scroll = new scrollHandler(this.$refs.timelineContainer);

From dfaa87f5e773be9fc2331aa44106928ef38ae3b8 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 11 Apr 2021 00:22:13 +0200
Subject: [PATCH 04/18] fix getMXC add getMediaUrl / fix link color

---
 src/App.vue               | 3 +++
 src/components/avatar.vue | 6 +++---
 src/lib/getMxc.js         | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index da08dba..79a747d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,6 +39,9 @@ input:focus{
   color: #000;
   background-color: #fff;
 }
+a{
+  color: #00BCD4;
+}
 *{
   scrollbar-width: thin;
   scrollbar-color: #42b983 #2220;
diff --git a/src/components/avatar.vue b/src/components/avatar.vue
index 04ba8cf..a447cd5 100644
--- a/src/components/avatar.vue
+++ b/src/components/avatar.vue
@@ -1,11 +1,11 @@
 <template>
-  <img v-if="mxcURL" :src="getAvatarUrl(mxcURL)" class="userThumbnail image"/>
+  <img v-if="mxcURL" :src="getPreviewUrl(mxcURL)" class="userThumbnail image"/>
   <div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
 </template>
 
 <script>
 import {toSvg} from 'jdenticon';
-import {getAvatarUrl} from '@/lib/getMxc';
+import {getPreviewUrl} from '@/lib/getMxc';
 
 export default {
   name: 'userThumbnail.vue',
@@ -24,7 +24,7 @@ export default {
     getJdenticon(){
       return toSvg(this.fallback, this.getFontSize()*this.size);
     },
-    getAvatarUrl
+    getPreviewUrl
   },
   data(){
     return {
diff --git a/src/lib/getMxc.js b/src/lib/getMxc.js
index 8ccdb93..c3d0297 100644
--- a/src/lib/getMxc.js
+++ b/src/lib/getMxc.js
@@ -19,8 +19,14 @@ export function getMxcFromRoomId(roomId){
   return getMxcFromRoom(matrix.client.getRoom(roomId));
 }
 
-export function getAvatarUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
+export function getPreviewUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
   let mxc = parseMXC.parse(mxcUrl);
   return `${matrix.baseUrl}/_matrix/media/v1/thumbnail/${
     mxc.homeserver}/${mxc.id}?width=${size}&height=${size}&method=${resizeMethod}`;
+}
+
+export function getMediaUrl(mxcUrl){
+  let mxc = parseMXC.parse(mxcUrl);
+  return `${matrix.baseUrl}/_matrix/media/r0/download/${
+    mxc.homeserver}/${mxc.id}`;
 }
\ No newline at end of file

From 64d52b071db2621a4e7efb8f16ed71350215226c Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 11 Apr 2021 00:24:12 +0200
Subject: [PATCH 05/18] show m.audio, m.image, m.video, m.file / add
 replyEvent.vue

---
 src/components/event.vue      | 83 ++++++++++++++++++++++++++---------
 src/components/newMessage.vue |  7 ++-
 src/components/replyEvent.vue | 44 +++++++++++++++++++
 3 files changed, 110 insertions(+), 24 deletions(-)
 create mode 100644 src/components/replyEvent.vue

diff --git a/src/components/event.vue b/src/components/event.vue
index 1d33677..9b632e6 100644
--- a/src/components/event.vue
+++ b/src/components/event.vue
@@ -1,23 +1,41 @@
 <template>
   <div class="event">
-    <div v-if="event.content.msgtype==='m.text'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <div v-if="replyEvent" class="reply">
-        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
-        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
+    <div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
+      <reply-event :event="replyEvent"/>
+
+      <div v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
+      <div v-else-if="event.content.msgtype==='m.notice'" class="notice" v-html="parseMessage(event.content.body)"/>
+      <div v-else-if="event.content.msgtype==='m.image'" class="image">
+        <img :src="getMediaUrl(event.content.url)" :alt="event.content.body"/><br>
+        {{event.content.body}}
+      </div>
+      <div v-else-if="event.content.msgtype==='m.file'" class="file">
+        file: <a :href="getMediaUrl(event.content.url)">
+          {{event.content.filename || getMediaUrl(event.content.url)}}
+        </a><br>{{event.content.body}}
+      </div>
+      <div v-else-if="event.content.msgtype==='m.audio'" class="audio">
+        <audio controls>
+          <source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
+          your browser doesn't support audio
+        </audio><br>
+        {{event.content.body}}
+      </div>
+      <div v-else-if="event.content.msgtype==='m.video'" class="video">
+        <video controls>
+          <source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
+          your browser doesn't support video
+        </video><br>
+        {{event.content.body}}
       </div>
-      <div v-html="parseMessage(event.content.body)"></div>
+      <div v-else class="italic">unsupported message type {{event.content.msgtype}}</div>
+
       <div class="time">{{getTime(event.origin_server_ts)}}</div>
     </div>
-    <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](event)}}
-      <span class="time">{{getTime(event.origin_server_ts)}}</span>
-    </div>
-    <div v-else class="info">unknown event
-      <span class="time">{{getTime(event.origin_server_ts)}}</span>
+    <div v-else class="info">
+      <span v-if="event.type==='m.room.member'">{{membershipEvents[event.content.membership](event)}}</span>
+      <span v-else>unsupported event</span>
+      <span class="time"> {{getTime(event.origin_server_ts)}}</span>
     </div>
   </div>
 </template>
@@ -27,9 +45,12 @@ import {matrix} from '@/main';
 import {calcUserName} from '@/lib/matrixUtils';
 import {parseMessage} from '@/lib/eventUtils';
 import {getTime} from '@/lib/getTimeStrings';
+import {getMediaUrl} from '@/lib/getMxc';
+import ReplyEvent from '@/components/replyEvent';
 
 export default {
   name: 'message',
+  components: {ReplyEvent},
   props: {
     type: String,
     event: Object,
@@ -44,13 +65,11 @@ export default {
       return content['m.relates_to']
         && content['m.relates_to']['m.in_reply_to']
         && content['m.relates_to']['m.in_reply_to'].event_id
-    },
-    calcMembershipEvents(){
-
     },
     calcUserName,
     parseMessage,
-    getTime
+    getTime,
+    getMediaUrl
   },
   data(){
     return{
@@ -91,7 +110,7 @@ export default {
     width: max-content;
     min-width: 2rem;
     max-width: calc(100% - 5rem);
-    padding: 0.7rem 1rem 0.45rem 1rem;
+    padding: 0.8rem 1rem 0.45rem 1rem;
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
@@ -112,6 +131,30 @@ export default {
       font-size: 0.7rem;
       text-align: right;
     }
+    .notice{
+      font-style: italic;
+    }
+    .image{
+      width: 100%;
+      img{
+        width: 100%;
+        height: auto;
+        max-height: 35rem;
+        border-radius: 0.5rem;
+      }
+    }
+    .video{
+      width: 100%;
+      video{
+        width: 100%;
+        height: auto;
+        max-height: 35rem;
+        border-radius: 0.5rem;
+      }
+    }
+    .italic{
+      font-style: italic;
+    }
   }
   .messageReceive{
     background-color: #424141;
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 8d3fbd8..24b930d 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,9 +1,6 @@
 <template>
   <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>
+    <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
     <form v-on:submit.prevent="sendMessage()">
       <textarea
         @keyup.enter.exact="sendMessage()"
@@ -27,10 +24,12 @@ import icon from '@/components/icon.vue';
 import {matrix} from '@/main.js';
 import {parseMessage} from '@/lib/eventUtils';
 import {calcUserName} from '@/lib/matrixUtils';
+import ReplyEvent from '@/components/replyEvent';
 
 export default {
   name: 'newMessage',
   components: {
+    ReplyEvent,
     icon
   },
   props: {
diff --git a/src/components/replyEvent.vue b/src/components/replyEvent.vue
new file mode 100644
index 0000000..7e1a35e
--- /dev/null
+++ b/src/components/replyEvent.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="reply">
+    <span class="username">{{calcUserName(event.sender)}}</span><br>
+    <span v-if="event.type==='m.room.message'">
+      <span v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body).substr(0,200)"/>
+      <span v-else-if="event.content.msgtype==='m.notice'" class="italic" v-html="parseMessage(event.content.body).substr(0,200)"/>
+      <span v-else>
+        <span class="italic">{{event.content.msgtype}}</span><br>
+        <span>{{event.content.body}}</span>
+      </span>
+    </span>
+    <span v-else>unsupported event</span>
+  </div>
+</template>
+
+<script>
+import {calcUserName} from '@/lib/matrixUtils';
+import {parseMessage} from '@/lib/eventUtils';
+
+export default {
+  name: 'replyEvent',
+  props:{
+    event: Object
+  },
+  methods:{
+    calcUserName,
+    parseMessage
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.reply{
+  border-left:  2px solid #fff;
+  padding-left: 0.5rem;
+  margin-bottom: 0.5rem;
+  .username{
+    font-weight: bold;
+  }
+}
+.italic{
+  font-style: italic;
+}
+</style>
\ No newline at end of file

From 01fe023d0688c32b5b84218bf8789d682b29918c Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 11 Apr 2021 01:39:25 +0200
Subject: [PATCH 06/18] fix if prop undefined for getMxc and event

---
 src/components/event.vue | 2 +-
 src/lib/getMxc.js        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/event.vue b/src/components/event.vue
index 9b632e6..86657f4 100644
--- a/src/components/event.vue
+++ b/src/components/event.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="event">
     <div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <reply-event :event="replyEvent"/>
+      <reply-event :event="replyEvent" v-if="replyEvent"/>
 
       <div v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
       <div v-else-if="event.content.msgtype==='m.notice'" class="notice" v-html="parseMessage(event.content.body)"/>
diff --git a/src/lib/getMxc.js b/src/lib/getMxc.js
index c3d0297..0a26b89 100644
--- a/src/lib/getMxc.js
+++ b/src/lib/getMxc.js
@@ -26,6 +26,7 @@ export function getPreviewUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
 }
 
 export function getMediaUrl(mxcUrl){
+  if (!mxcUrl) return undefined;
   let mxc = parseMXC.parse(mxcUrl);
   return `${matrix.baseUrl}/_matrix/media/r0/download/${
     mxc.homeserver}/${mxc.id}`;

From 1dea2f76addf8008679be6c210d17ca40f0ca697 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 11 Apr 2021 01:40:05 +0200
Subject: [PATCH 07/18] add solveMarkdownLinks to eventUtils

---
 src/lib/eventUtils.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/eventUtils.js b/src/lib/eventUtils.js
index 60e635d..e119616 100644
--- a/src/lib/eventUtils.js
+++ b/src/lib/eventUtils.js
@@ -8,12 +8,21 @@ export function solveTextLinks(text){
       }
       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')
+export function solveMarkdownLinks(text){
+  return (text || '').replace(
+    /\[([\w\s\d/\\._+-]+)]\(((?:\/|https?:\/\/)[\w\d/.?=#_+-]+)\)/gi,
+    (match, text, url)=>{
+      return `<a href="${url}" target="_blank">${text}</a>`;
+    }
   );
+}
+export function fixHtml(text){
+  return text.replace(/>.*\n/gm, '').trim()
+    .replace(/</g, '&lt')
+    .replace(/>/g, '&gt');
+}
+export function parseMessage(text){
+  return solveMarkdownLinks(solveTextLinks(fixHtml(text)));
 }
\ No newline at end of file

From 7d9535457fd9aaffc4b5802f504a80ad066de464 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 11 Apr 2021 22:40:36 +0200
Subject: [PATCH 08/18] fix media width

---
 src/components/event.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/event.vue b/src/components/event.vue
index 86657f4..85d9c07 100644
--- a/src/components/event.vue
+++ b/src/components/event.vue
@@ -137,7 +137,7 @@ export default {
     .image{
       width: 100%;
       img{
-        width: 100%;
+        max-width: 100%;
         height: auto;
         max-height: 35rem;
         border-radius: 0.5rem;
@@ -146,12 +146,17 @@ export default {
     .video{
       width: 100%;
       video{
-        width: 100%;
+        max-width: 100%;
         height: auto;
         max-height: 35rem;
         border-radius: 0.5rem;
       }
     }
+    .audio{
+      audio{
+        max-width: 100%;
+      }
+    }
     .italic{
       font-style: italic;
     }

From 1d50bae1352c19b21777cb07b4ba8e716cb01296 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 14 Apr 2021 02:09:48 +0200
Subject: [PATCH 09/18] fix event overflow

---
 src/components/replyEvent.vue | 9 +++++++--
 src/components/timeline.vue   | 5 +++++
 src/lib/eventUtils.js         | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/replyEvent.vue b/src/components/replyEvent.vue
index 7e1a35e..c15a18e 100644
--- a/src/components/replyEvent.vue
+++ b/src/components/replyEvent.vue
@@ -2,8 +2,8 @@
   <div class="reply">
     <span class="username">{{calcUserName(event.sender)}}</span><br>
     <span v-if="event.type==='m.room.message'">
-      <span v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body).substr(0,200)"/>
-      <span v-else-if="event.content.msgtype==='m.notice'" class="italic" v-html="parseMessage(event.content.body).substr(0,200)"/>
+      <span v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
+      <span v-else-if="event.content.msgtype==='m.notice'" class="italic" v-html="parseMessage(event.content.body)"/>
       <span v-else>
         <span class="italic">{{event.content.msgtype}}</span><br>
         <span>{{event.content.body}}</span>
@@ -34,6 +34,11 @@ export default {
   border-left:  2px solid #fff;
   padding-left: 0.5rem;
   margin-bottom: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
   .username{
     font-weight: bold;
   }
diff --git a/src/components/timeline.vue b/src/components/timeline.vue
index 6dd2444..f559dc7 100644
--- a/src/components/timeline.vue
+++ b/src/components/timeline.vue
@@ -109,8 +109,13 @@ export default {
         }
       }
       .username{
+        position: relative;
         margin-left: 1rem;
         font-weight: bold;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
       }
       .indent{
         margin-left: 2.5rem;
diff --git a/src/lib/eventUtils.js b/src/lib/eventUtils.js
index e119616..a79e811 100644
--- a/src/lib/eventUtils.js
+++ b/src/lib/eventUtils.js
@@ -19,7 +19,7 @@ export function solveMarkdownLinks(text){
   );
 }
 export function fixHtml(text){
-  return text.replace(/>.*\n/gm, '').trim()
+  return text.replace(/> .*\n/gm, '').trim()
     .replace(/</g, '&lt')
     .replace(/>/g, '&gt');
 }

From 337a8410cbd4cc006f806ac3430bbca2314ab500 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 14 Apr 2021 10:32:37 +0000
Subject: [PATCH 10/18] add screenshot and description to README.md

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index b63d91d..6f0118c 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,13 @@
 
 a simple matrix webapp for mobile and desktop
 
+
+<img src="https://chat.adb.sh/media/screenshot-desktop.png" alt="screenshot-desktop">
+
+`matrix-chat` or in short `[chat]` is a simple matrix webclient designed for mobile and desktop use with a clean UI.
+It's written with Vue in JavaScript. The webapp is still under development and more features will be added gradually.
+To stay tuned or give some input just join the matrix room. [#matrix-chat-public:adb.sh](https://matrix.to/#/#matrix-chat-public:adb.sh)
+
 ### setup
 ```
 npm install

From 286bc25446faddcf00416d2ec4ace3704abd7582 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 28 Apr 2021 05:56:50 +0200
Subject: [PATCH 11/18] some fixes

---
 src/components/roomListElement.vue | 14 +++++++-------
 src/components/userListElement.vue |  4 ++--
 src/lib/getMxc.js                  | 10 ++--------
 src/lib/matrixHandler.js           |  2 +-
 src/lib/matrixUtils.js             |  6 ++++++
 src/views/login.vue                | 17 +++++++++--------
 6 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/roomListElement.vue b/src/components/roomListElement.vue
index 73b481f..d2ddd6a 100644
--- a/src/components/roomListElement.vue
+++ b/src/components/roomListElement.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import avatar from "@/components/avatar";
-import {getMxcFromRoom} from "@/lib/getMxc";
-import {getTime} from "@/lib/getTimeStrings";
-import {calcUserName} from "@/lib/matrixUtils";
+import avatar from '@/components/avatar';
+import {getMxcFromRoom} from '@/lib/getMxc';
+import {getTime} from '@/lib/getTimeStrings';
+import {calcUserName} from '@/lib/matrixUtils';
 
 export default {
-  name: "userListElement",
+  name: 'roomListElement',
   components:{
     avatar
   },
@@ -34,8 +34,8 @@ export default {
       return `${this.calcUserName(event.sender)}: ${event.content.body||'unknown event'} ${getTime(event.origin_server_ts)}`;
     },
     getLatestEvent(room){
-      if (!room.timeline[room.timeline.length-1]) return undefined;
-      return room.timeline[room.timeline.length-1].event;
+      return room.timeline[room.timeline.length-1]
+        && room.timeline[room.timeline.length-1].event;
     },
     calcUserName,
     getMxcFromRoom
diff --git a/src/components/userListElement.vue b/src/components/userListElement.vue
index 0ebaa3c..831662a 100644
--- a/src/components/userListElement.vue
+++ b/src/components/userListElement.vue
@@ -15,10 +15,10 @@
 </template>
 
 <script>
-import avatar from "@/components/avatar";
+import avatar from '@/components/avatar';
 
 export default {
-  name: "userListElement",
+  name: 'userListElement',
   components:{
     avatar
   },
diff --git a/src/lib/getMxc.js b/src/lib/getMxc.js
index 0a26b89..5d25704 100644
--- a/src/lib/getMxc.js
+++ b/src/lib/getMxc.js
@@ -1,6 +1,5 @@
 import sdk from 'matrix-js-sdk'
 import {matrix} from '@/main';
-import parseMXC from '@modular-matrix/parse-mxc';
 
 export function getMxcFromUser(user){
   return user.avatarUrl;
@@ -20,14 +19,9 @@ export function getMxcFromRoomId(roomId){
 }
 
 export function getPreviewUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
-  let mxc = parseMXC.parse(mxcUrl);
-  return `${matrix.baseUrl}/_matrix/media/v1/thumbnail/${
-    mxc.homeserver}/${mxc.id}?width=${size}&height=${size}&method=${resizeMethod}`;
+  return matrix.client.mxcUrlToHttp(mxcUrl, size, size, resizeMethod);
 }
 
 export function getMediaUrl(mxcUrl){
-  if (!mxcUrl) return undefined;
-  let mxc = parseMXC.parse(mxcUrl);
-  return `${matrix.baseUrl}/_matrix/media/r0/download/${
-    mxc.homeserver}/${mxc.id}`;
+  return matrix.client.mxcUrlToHttp(mxcUrl);
 }
\ No newline at end of file
diff --git a/src/lib/matrixHandler.js b/src/lib/matrixHandler.js
index 3bd68a0..1865f44 100644
--- a/src/lib/matrixHandler.js
+++ b/src/lib/matrixHandler.js
@@ -67,7 +67,7 @@ export class MatrixHandler {
       this.rooms = this.client.getRooms();
       this.loading = false;
       callback();
-      this.listenToPushEvents()
+      this.listenToPushEvents();
     });
   }
   listenToPushEvents(){
diff --git a/src/lib/matrixUtils.js b/src/lib/matrixUtils.js
index 0d4c7ef..070115b 100644
--- a/src/lib/matrixUtils.js
+++ b/src/lib/matrixUtils.js
@@ -9,4 +9,10 @@ export function calcUserName(userId){
 }
 export function getRoom(roomId){
   return matrix.client.getRoom(roomId);
+}
+export function isValidUserId(id){
+  return id.match(/^@[a-zA-Z0-9_.+-]+:[a-z0-9.-]+\.[a-z]+$/);
+}
+export function isValidRoomId(id){
+  return id.match(/^(#|!)[a-zA-Z0-9_.+-]+:[a-z0-9.-]+\.[a-z]+$/);
 }
\ No newline at end of file
diff --git a/src/views/login.vue b/src/views/login.vue
index 45570ee..065bd7d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -22,11 +22,12 @@
 <script>
 import textbtn from '@/components/textbtn';
 import {matrix} from '@/main.js';
-import {cookieHandler} from "@/lib/cookieHandler";
-import ThrobberOverlay from "@/components/throbberOverlay";
+import {cookieHandler} from '@/lib/cookieHandler';
+import ThrobberOverlay from '@/components/throbberOverlay';
+import {isValidUserId} from '@/lib/matrixUtils';
 
 export default {
-  name: "login.vue",
+  name: 'login.vue',
   components: {
     ThrobberOverlay,
     textbtn
@@ -42,7 +43,7 @@ export default {
       } if (this.password === '') {
         this.loginError = 'password is empty';
         return;
-      } if (!(this.user.match(/^@[a-zA-Z0-9_.+-]+:[a-z0-9.-]+\.[a-z]+$/))) {
+      } if (!isValidUserId(this.user)) {
         this.loginError = 'username is in wrong style';
         return;
       }
@@ -83,10 +84,10 @@ export default {
   },
   data(){
     return {
-      user: "",
-      password: "",
-      homeServer: "https://adb.sh",
-      loginError: "",
+      user: '',
+      password: '',
+      homeServer: 'https://adb.sh',
+      loginError: '',
       cookie: new cookieHandler(),
       loading: false
     }

From d3031a1e7020fa0e59e87feab710c4d2d5f62026 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 28 Apr 2021 05:59:13 +0200
Subject: [PATCH 12/18] add popupQuestion.vue, search for users, join rooms

---
 src/components/popupQuestion.vue | 34 +++++++++++
 src/views/rooms.vue              | 99 +++++++++++++++++++++++++-------
 2 files changed, 112 insertions(+), 21 deletions(-)
 create mode 100644 src/components/popupQuestion.vue

diff --git a/src/components/popupQuestion.vue b/src/components/popupQuestion.vue
new file mode 100644
index 0000000..a643d45
--- /dev/null
+++ b/src/components/popupQuestion.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="questionBox">
+    <p class="text">{{question}}</p>
+    <textbtn text="yes" @click.native="callback(true)"/>
+    <textbtn text="no" @click.native="callback(false)"/>
+  </div>
+</template>
+
+<script>
+import textbtn from '@/components/textbtn';
+export default {
+  name: 'popupQuestion',
+  components: {textbtn},
+  props:{
+    question: String,
+    callback: Function
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.questionBox{
+  position: absolute;
+  width: auto;
+  background-color: #1d1d1d;
+  box-shadow: 6px 6px 10px #111;
+  border-radius: 1.5rem;
+  .text{
+    position: relative;
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/rooms.vue b/src/views/rooms.vue
index 3a9bc23..494d7f5 100644
--- a/src/views/rooms.vue
+++ b/src/views/rooms.vue
@@ -6,16 +6,35 @@
     <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 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"
-            class="roomListElement"
+      <p class="wideElement">rooms ↴</p>
+      <room-list-element
+        v-for="room in Object.assign([], matrix.client.getRooms())
+          .sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)
+          .filter(prop=>matchResults(prop.name, search))"
+        :key="room.roomId" @click.native="openChat(room)"
+        :room="room"
+        class="roomListElement"
+      />
+      <div v-if="search">
+        <p class="wideElement">users ↴</p><p class="smallElement">—</p>
+        <user-list-element
+          v-for="user in matrix.client.getUsers()
+            .filter(prop=>matchResults(prop.displayName, search)||matchResults(prop.userId, search))
+            .slice(0,10)"
+          :user="user" :key="user.userId"
+          @click.native="setQuestion(`create private chat with '${search}'?`,()=>search='cool')"
         />
+        <p class="wideElement">suggestions ↴</p><p class="smallElement">…</p>
+        <div class="wideElement">
+          <p v-if="isValidUserId(search)">create chat: {{search}} ➤</p>
+          <p v-if="isValidRoomId(search)"
+             @click="setQuestion(`join room '${search}'?`, ()=>joinRoom(search))"
+          >join room: {{search}} ➤</p>
+          <p v-if="search.match(/^[a-zA-Z0-9_.+-]+$/)"
+            @click="setQuestion(`create room '${search}'?`,()=>search='cool')"
+          >create room: {{search}} ➤</p>
+          <room-list-element v-if="isValidRoomId(search) && getRoom(search)" :room="getRoom(search)"/>
+        </div>
       </div>
     </div>
     <chat
@@ -28,21 +47,27 @@
     />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
     <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
+    <popup-question v-if="popup.question" :callback="popup.callback" :question="popup.question" class="center"/>
   </div>
 </template>
 
 <script>
 import chat from '@/views/chat.vue';
-import chatInformation from "@/components/chatInformation";
-import {matrix} from "@/main";
-import ThrobberOverlay from "@/components/throbberOverlay";
-import {getMxcFromRoom} from "@/lib/getMxc";
-import roomListElement from "@/components/roomListElement";
-import {getRoom} from "@/lib/matrixUtils";
+import chatInformation from '@/components/chatInformation';
+import {matrix} from '@/main';
+import ThrobberOverlay from '@/components/throbberOverlay';
+import {getMxcFromRoom} from '@/lib/getMxc';
+import roomListElement from '@/components/roomListElement';
+import {getRoom, getUser} from '@/lib/matrixUtils';
+import {isValidUserId, isValidRoomId} from '@/lib/matrixUtils';
+import userListElement from '@/components/userListElement';
+import PopupQuestion from '@/components/popupQuestion';
 
 export default {
-  name: "rooms",
+  name: 'rooms',
   components:{
+    PopupQuestion,
+    userListElement,
     ThrobberOverlay,
     chat,
     chatInformation,
@@ -56,21 +81,45 @@ export default {
       this.$nextTick(() => this.showRoom = true);
       this.search = '';
     },
-    getMxcFromRoom,
-    getRoom,
     getCurrentRoom(){
       return getRoom(this.$route.path.split('/')[2]);
     },
     closeChat(){
       this.$router.push('/rooms');
-    }
+    },
+    matchResults(prop, search){
+      return prop.toLowerCase().includes(search.toLowerCase().trim());
+    },
+    setQuestion(question, callback){
+      this.popup = {
+        question,
+        callback:(res)=>{
+          this.popup = false;
+          if (res) callback();
+        }
+      }
+    },
+    joinRoom(room){
+      this.matrix.client.join(room).then(()=>{
+        this.openChat(room);
+      });
+    },
+    getMxcFromRoom,
+    getRoom,
+    getUser,
+    isValidUserId,
+    isValidRoomId
   },
   data(){
     return {
       matrix,
       showChatInfo: false,
       showRoom: true,
-      search: ''
+      search: '',
+      popup:{
+        question: '',
+        callback: ()=>{}
+      }
     }
   },
   mounted() {
@@ -89,6 +138,8 @@ export default {
   background-color: #222;
   text-align: center;
   overflow-y: auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 }
 .chat{
   position: absolute;
@@ -122,6 +173,13 @@ input{
 .smallElement{
   display: none;
 }
+.center{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 50;
+}
 
 @media (max-width: 48rem) and (min-width: 30rem) {
   .wideElement{
@@ -134,7 +192,6 @@ input{
     z-index: 30;
     width: 4rem;
     overflow-y: auto;
-    overflow-x: hidden;
     scrollbar-width: none;
   }
   .roomList:hover{

From fb707fcde398f91c13def1d2cc681d0924ca155e Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 28 Apr 2021 18:55:11 +0200
Subject: [PATCH 13/18] add emojiPicker and microphone

---
 package.json                            |   1 +
 public/sym/ic_insert_emoticon_white.svg |   1 +
 public/sym/ic_mic_white.svg             |   1 +
 src/components/newMessage.vue           | 156 +++++++++++++++++++++---
 4 files changed, 140 insertions(+), 19 deletions(-)
 create mode 100644 public/sym/ic_insert_emoticon_white.svg
 create mode 100644 public/sym/ic_mic_white.svg

diff --git a/package.json b/package.json
index c57fd22..8706b37 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.5.0",
     "node-sass": "^5.0.0",
+    "recorder-js": "*",
     "sass-loader": "^10.1.1",
     "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.11"
diff --git a/public/sym/ic_insert_emoticon_white.svg b/public/sym/ic_insert_emoticon_white.svg
new file mode 100644
index 0000000..438740f
--- /dev/null
+++ b/public/sym/ic_insert_emoticon_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
\ No newline at end of file
diff --git a/public/sym/ic_mic_white.svg b/public/sym/ic_mic_white.svg
new file mode 100644
index 0000000..4c29695
--- /dev/null
+++ b/public/sym/ic_mic_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
\ No newline at end of file
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 24b930d..73f0dd4 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,22 +1,57 @@
 <template>
-  <div class="newMessageBanner" ref="newMessageBanner">
-    <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
-    <form v-on:submit.prevent="sendMessage()">
-      <textarea
-        @keyup.enter.exact="sendMessage()"
-        @input="resizeMessageBanner(); sendTyping(2000);"
-        v-model="event.content.body"
-        ref="newMessageInput" class="newMessageInput"
-        rows="1" placeholder="type a message ..."
-      />
+    <div class="newMessageBanner" ref="newMessageBanner">
+      <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
+      <form v-on:submit.prevent="sendMessage()">
+        <textarea
+          @keyup.enter.exact="sendMessage()"
+          @input="resizeMessageBanner(); sendTyping(2000);"
+          v-model="event.content.body"
+          ref="newMessageInput" class="newMessageInput"
+          rows="1" placeholder="type a message ..."
+        />
+        <icon
+          v-if="event.content.body && !isRecording"
+          type="submit"
+          title="press enter to submit"
+          class="sendMessageBtn"
+          ic="./sym/ic_send_white.svg"
+        />
+        <div v-else class="recorder">
+          <icon
+            v-if="!isRecording"
+            title="record voice"
+            class="recordBtn start"
+            ic="./sym/ic_mic_white.svg"
+            @click.native="startRecording()"
+            ref="startRecord"
+          />
+          <div v-else class="voiceMeterContainer">
+            <div class="voiceMeter" ref="voiceMeter"></div>
+            <icon
+              title="record voice"
+              class="recordBtn stop"
+              ic="./sym/ic_mic_white.svg"
+              @click.native="stopRecording()"
+              ref="stopRecord"
+            />
+          </div>
+        </div>
+      </form>
       <icon
-        type="submit"
-        title="press enter to submit"
-        class="sendMessageBtn"
-        ic="./sym/ic_send_white.svg"
+        title="toggle emoji"
+        class="emojiToggle"
+        ic="./sym/ic_insert_emoticon_white.svg"
+        @click.native="toggleEmojiPicker()"
+
       />
-    </form>
-  </div>
+      <v-emoji-picker
+        v-if="showEmojiPicker"
+        class="emojiPicker"
+        @select="onSelectEmoji"
+        :dark="true"
+        :continuousList="true"
+      />
+    </div>
 </template>
 
 <script>
@@ -25,12 +60,16 @@ import {matrix} from '@/main.js';
 import {parseMessage} from '@/lib/eventUtils';
 import {calcUserName} from '@/lib/matrixUtils';
 import ReplyEvent from '@/components/replyEvent';
+import {VEmojiPicker} from 'v-emoji-picker';
+import Recorder from 'recorder-js';
+const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
 
 export default {
   name: 'newMessage',
   components: {
     ReplyEvent,
-    icon
+    icon,
+    VEmojiPicker
   },
   props: {
     onResize: Function,
@@ -69,6 +108,26 @@ export default {
     onSelectEmoji(emoji) {
       this.event.content.body += emoji.data;
     },
+    startRecording(){
+      navigator.mediaDevices.getUserMedia({audio: true})
+        .then(stream => {
+          this.recorder.init(stream);
+          this.recorder.start().then(()=>this.isRecording=true);
+        })
+        .catch(err => console.log('unable to get stream', err));
+    },
+    stopRecording(){
+      this.recorder.stop()
+        .then(({blob}) => {
+          this.recBlob = blob;
+          this.isRecording=false;
+        });
+    },
+    setVoiceMeter(value){
+      if (!this.$refs.stopRecord) return;
+      this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
+      this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
+    },
     parseMessage,
     calcUserName
   },
@@ -87,7 +146,12 @@ export default {
         }
       },
       showEmojiPicker: false,
-      waitForSendTyping: false
+      waitForSendTyping: false,
+      recorder:  new Recorder(audioContext, {
+        onAnalysed: data => this.setVoiceMeter(data.lineTo)
+      }),
+      isRecording: false,
+      recBlob: undefined
     }
   }
 }
@@ -109,7 +173,7 @@ export default {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
   padding: 0;
-  left: 1rem;
+  left: 3rem;
   min-height: 1.5rem;
   max-height: 10rem;
   width: calc(100% - 7rem);
@@ -144,4 +208,58 @@ export default {
 .username{
   font-weight: bold;
 }
+.emojiPicker{
+  position: absolute;
+  bottom: calc(100% + 0.25rem);
+  left: 0.25rem;
+  z-index: 10;
+  max-width: calc(100% - 0.5rem - 2px);
+}
+.emojiToggle{
+  position: absolute;
+  left: 0.25rem;
+  bottom: 0.5rem;
+  background-color: unset;
+  height: 2.5rem;
+  width: 2.5rem;
+  box-shadow: none;
+}
+.recordBtn{
+  position: absolute;
+  right: 1rem;
+  bottom: 0.25rem;
+  background-color: #1d1d1d;
+  border-radius: 50%;
+}
+.recordBtn.stop{
+  right: 0;
+  bottom: 0;
+  background-color: #c63e3e;
+  box-shadow: none;
+}
+.voiceMeter{
+  position: absolute;
+  background-color: #fff;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 50%;
+  box-shadow: 3px 3px 10px #111;
+}
+.voiceMeterContainer{
+  position: absolute;
+  height: 3rem;
+  width: 3rem;
+  bottom: 0.25rem;
+  right: 1rem;
+}
+.recorder{
+  position: absolute;
+  height: 100%;
+  width: 8rem;
+  bottom: 0;
+  right: 0;
+  border-radius: 0 1rem 0 0;
+  overflow: hidden;
+}
 </style>
\ No newline at end of file

From cce7af2178b1b69179465a68acd4e1d33e2b6819 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Fri, 30 Apr 2021 00:33:47 +0200
Subject: [PATCH 14/18] add fileInput, refactor eventContent

---
 public/sym/ic_attach_file_white.svg |   1 +
 src/components/event.vue            |  58 +----------
 src/components/eventContent.vue     |  91 +++++++++++++++++
 src/components/newMessage.vue       | 145 +++++++++++++++++++---------
 src/lib/NotificationHandler.js      |   4 +-
 5 files changed, 198 insertions(+), 101 deletions(-)
 create mode 100644 public/sym/ic_attach_file_white.svg
 create mode 100644 src/components/eventContent.vue

diff --git a/public/sym/ic_attach_file_white.svg b/public/sym/ic_attach_file_white.svg
new file mode 100644
index 0000000..0029471
--- /dev/null
+++ b/public/sym/ic_attach_file_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>
\ No newline at end of file
diff --git a/src/components/event.vue b/src/components/event.vue
index 85d9c07..aa45258 100644
--- a/src/components/event.vue
+++ b/src/components/event.vue
@@ -2,34 +2,7 @@
   <div class="event">
     <div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
       <reply-event :event="replyEvent" v-if="replyEvent"/>
-
-      <div v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
-      <div v-else-if="event.content.msgtype==='m.notice'" class="notice" v-html="parseMessage(event.content.body)"/>
-      <div v-else-if="event.content.msgtype==='m.image'" class="image">
-        <img :src="getMediaUrl(event.content.url)" :alt="event.content.body"/><br>
-        {{event.content.body}}
-      </div>
-      <div v-else-if="event.content.msgtype==='m.file'" class="file">
-        file: <a :href="getMediaUrl(event.content.url)">
-          {{event.content.filename || getMediaUrl(event.content.url)}}
-        </a><br>{{event.content.body}}
-      </div>
-      <div v-else-if="event.content.msgtype==='m.audio'" class="audio">
-        <audio controls>
-          <source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
-          your browser doesn't support audio
-        </audio><br>
-        {{event.content.body}}
-      </div>
-      <div v-else-if="event.content.msgtype==='m.video'" class="video">
-        <video controls>
-          <source :src="getMediaUrl(event.content.url)" :type="event.content.mimetype">
-          your browser doesn't support video
-        </video><br>
-        {{event.content.body}}
-      </div>
-      <div v-else class="italic">unsupported message type {{event.content.msgtype}}</div>
-
+      <event-content :content="event.content"/>
       <div class="time">{{getTime(event.origin_server_ts)}}</div>
     </div>
     <div v-else class="info">
@@ -47,10 +20,11 @@ import {parseMessage} from '@/lib/eventUtils';
 import {getTime} from '@/lib/getTimeStrings';
 import {getMediaUrl} from '@/lib/getMxc';
 import ReplyEvent from '@/components/replyEvent';
+import EventContent from '@/components/eventContent';
 
 export default {
   name: 'message',
-  components: {ReplyEvent},
+  components: {EventContent, ReplyEvent},
   props: {
     type: String,
     event: Object,
@@ -134,32 +108,6 @@ export default {
     .notice{
       font-style: italic;
     }
-    .image{
-      width: 100%;
-      img{
-        max-width: 100%;
-        height: auto;
-        max-height: 35rem;
-        border-radius: 0.5rem;
-      }
-    }
-    .video{
-      width: 100%;
-      video{
-        max-width: 100%;
-        height: auto;
-        max-height: 35rem;
-        border-radius: 0.5rem;
-      }
-    }
-    .audio{
-      audio{
-        max-width: 100%;
-      }
-    }
-    .italic{
-      font-style: italic;
-    }
   }
   .messageReceive{
     background-color: #424141;
diff --git a/src/components/eventContent.vue b/src/components/eventContent.vue
new file mode 100644
index 0000000..f3261c2
--- /dev/null
+++ b/src/components/eventContent.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-if="content.msgtype==='m.text'" v-html="parseMessage(content.body)"/>
+  <div v-else-if="content.msgtype==='m.notice'" class="notice" v-html="parseMessage(content.body)"/>
+  <div v-else-if="content.msgtype==='m.image'" class="image">
+    <img :src="getSource(content.url)" :alt="content.body"/><br>
+    {{content.body}}
+  </div>
+  <div v-else-if="content.msgtype==='m.file'" class="file">
+    <icon
+      title="file"
+      ic="./sym/ic_attach_file_white.svg"
+    />
+    <div class="text">
+      <a :href="getSource(content.url)">
+        {{content.filename || getSource(content.url)}}
+      </a><br>{{content.body}}
+    </div>
+  </div>
+  <div v-else-if="content.msgtype==='m.audio'" class="audio">
+    <audio controls>
+      <source :src="getSource(content.url)" :type="content.mimetype">
+      your browser doesn't support audio
+    </audio><br>
+    {{content.body}}
+  </div>
+  <div v-else-if="content.msgtype==='m.video'" class="video">
+    <video controls>
+      <source :src="getSource(content.url)" :type="content.mimetype">
+      your browser doesn't support video
+    </video><br>
+    {{content.body}}
+  </div>
+  <div v-else class="italic">unsupported message type {{content.msgtype}}</div>
+</template>
+
+<script>
+import {getMediaUrl} from '@/lib/getMxc';
+import {parseMessage} from '@/lib/eventUtils';
+import Icon from '@/components/icon';
+
+export default {
+  name: 'eventContent',
+  components: {Icon},
+  props: {
+    content: Object
+  },
+  methods: {
+    getSource(url){
+      return url.includes('mxc')?getMediaUrl(url):url;
+    },
+    parseMessage
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.file{
+  .text{
+    position: relative;
+    left: 4rem;
+    top: 0;
+    width: 100%;
+  }
+}
+.image{
+  width: 100%;
+  img{
+    max-width: 100%;
+    height: auto;
+    max-height: 35rem;
+    border-radius: 0.5rem;
+  }
+}
+.video{
+  width: 100%;
+  video{
+    max-width: 100%;
+    height: auto;
+    max-height: 35rem;
+    border-radius: 0.5rem;
+  }
+}
+.audio{
+  audio{
+    max-width: 100%;
+  }
+}
+.italic{
+  font-style: italic;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 73f0dd4..d9f61bd 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,57 +1,69 @@
 <template>
-    <div class="newMessageBanner" ref="newMessageBanner">
-      <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
-      <form v-on:submit.prevent="sendMessage()">
-        <textarea
-          @keyup.enter.exact="sendMessage()"
-          @input="resizeMessageBanner(); sendTyping(2000);"
-          v-model="event.content.body"
-          ref="newMessageInput" class="newMessageInput"
-          rows="1" placeholder="type a message ..."
-        />
+  <div class="newMessageBanner" ref="newMessageBanner">
+    <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
+    <event-content v-if="attachment" :content="attachment" class="attachment"/>
+    <form v-on:submit.prevent="sendMessage()">
+      <textarea
+        @keyup.enter.exact="sendMessage()"
+        @input="resizeMessageBanner(); sendTyping(2000);"
+        v-model="event.content.body"
+        ref="newMessageInput" class="newMessageInput"
+        rows="1" placeholder="type a message ..."
+      />
+      <icon
+        v-if="event.content.body && !isRecording"
+        type="submit"
+        title="press enter to submit"
+        class="sendMessageBtn"
+        ic="./sym/ic_send_white.svg"
+      />
+      <div v-else class="recorder">
         <icon
-          v-if="event.content.body && !isRecording"
-          type="submit"
-          title="press enter to submit"
-          class="sendMessageBtn"
-          ic="./sym/ic_send_white.svg"
+          v-if="!isRecording"
+          title="record voice"
+          class="recordBtn start"
+          ic="./sym/ic_mic_white.svg"
+          @click.native="startRecording()"
+          ref="startRecord"
         />
-        <div v-else class="recorder">
+        <div v-else class="voiceMeterContainer">
+          <div class="voiceMeter" ref="voiceMeter"></div>
           <icon
-            v-if="!isRecording"
             title="record voice"
-            class="recordBtn start"
+            class="recordBtn stop"
             ic="./sym/ic_mic_white.svg"
-            @click.native="startRecording()"
-            ref="startRecord"
+            @click.native="stopRecording()"
+            ref="stopRecord"
           />
-          <div v-else class="voiceMeterContainer">
-            <div class="voiceMeter" ref="voiceMeter"></div>
-            <icon
-              title="record voice"
-              class="recordBtn stop"
-              ic="./sym/ic_mic_white.svg"
-              @click.native="stopRecording()"
-              ref="stopRecord"
-            />
-          </div>
         </div>
-      </form>
+      </div>
+    </form>
+    <div class="mediaButtons">
       <icon
         title="toggle emoji"
-        class="emojiToggle"
+        class="leftBtn emojiToggle"
         ic="./sym/ic_insert_emoticon_white.svg"
         @click.native="toggleEmojiPicker()"
-
       />
-      <v-emoji-picker
-        v-if="showEmojiPicker"
-        class="emojiPicker"
-        @select="onSelectEmoji"
-        :dark="true"
-        :continuousList="true"
+      <icon
+        title="upload media"
+        class="leftBtn attachFile"
+        ic="./sym/ic_attach_file_white.svg"
+        @click.native="$refs.fileInput.click()"
       />
+      <input
+        type="file" id="fileInput" ref="fileInput"
+        @change="setAttachment($refs.fileInput.files[0])"
+      >
     </div>
+    <v-emoji-picker
+      v-if="showEmojiPicker"
+      class="emojiPicker"
+      @select="onSelectEmoji"
+      :dark="true"
+      :continuousList="true"
+    />
+  </div>
 </template>
 
 <script>
@@ -62,11 +74,13 @@ import {calcUserName} from '@/lib/matrixUtils';
 import ReplyEvent from '@/components/replyEvent';
 import {VEmojiPicker} from 'v-emoji-picker';
 import Recorder from 'recorder-js';
+import EventContent from '@/components/eventContent';
 const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
 
 export default {
   name: 'newMessage',
   components: {
+    EventContent,
     ReplyEvent,
     icon,
     VEmojiPicker
@@ -128,6 +142,26 @@ 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);
+    },
+    getMsgType(fileType){
+      return {
+        'image': 'm.image',
+        'audio': 'm.audio',
+        'video': 'm.video'
+      }[fileType.split('/', 1)[0]] || 'm.file';
+    },
     parseMessage,
     calcUserName
   },
@@ -147,12 +181,16 @@ export default {
       },
       showEmojiPicker: false,
       waitForSendTyping: false,
-      recorder:  new Recorder(audioContext, {
+      recorder: new Recorder(audioContext, {
         onAnalysed: data => this.setVoiceMeter(data.lineTo)
       }),
       isRecording: false,
-      recBlob: undefined
+      recBlob: undefined,
+      attachment: undefined
     }
+  },
+  updated() {
+    this.resizeMessageBanner();
   }
 }
 </script>
@@ -173,10 +211,10 @@ export default {
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;
   padding: 0;
-  left: 3rem;
+  left: 5.5rem;
   min-height: 1.5rem;
   max-height: 10rem;
-  width: calc(100% - 7rem);
+  width: calc(100% - 10rem);
   height: 1.25rem;
   background-color: #fff0;
   border: 0 solid #fff0;
@@ -215,8 +253,15 @@ export default {
   z-index: 10;
   max-width: calc(100% - 0.5rem - 2px);
 }
-.emojiToggle{
+.mediaButtons{
   position: absolute;
+  left: 0;
+  bottom: 0;
+  height: fit-content;
+  width: fit-content;
+}
+.leftBtn{
+  position: relative;
   left: 0.25rem;
   bottom: 0.5rem;
   background-color: unset;
@@ -262,4 +307,16 @@ export default {
   border-radius: 0 1rem 0 0;
   overflow: hidden;
 }
+#fileInput{
+  display: none;
+}
+.attachment{
+  max-width: 5rem;
+}
+img{
+  max-width: 10rem;
+  height: auto;
+  max-height: 4rem;
+  border-radius: 0.5rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/lib/NotificationHandler.js b/src/lib/NotificationHandler.js
index 3d17dfe..0979821 100644
--- a/src/lib/NotificationHandler.js
+++ b/src/lib/NotificationHandler.js
@@ -1,4 +1,4 @@
-import {getMxcFromUserId, getAvatarUrl} from '@/lib/getMxc';
+import {getMxcFromUserId, getPreviewUrl} from '@/lib/getMxc';
 import {calcUserName} from '@/lib/matrixUtils';
 import {getRoom} from '@/lib/matrixUtils';
 import {router} from '@/router';
@@ -22,7 +22,7 @@ export class NotificationHandler{
     let mxc = getMxcFromUserId(event.sender);
     new Notification(`${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`, {
       body: event.content.body,
-      icon: mxc?getAvatarUrl(mxc):undefined
+      icon: mxc?getPreviewUrl(mxc):undefined
     }).onclick = ()=>router.push(`/rooms/${event.room_id}`);
   }
 }
\ No newline at end of file

From 64d6273a52b7c1fd97d1c1cf9de6e1690bb079e1 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sat, 1 May 2021 01:05:14 +0200
Subject: [PATCH 15/18] send attachments and recordings

---
 src/components/eventContent.vue |  30 ++++--
 src/components/newMessage.vue   | 170 ++++++++++++++++++++++----------
 src/lib/matrixHandler.js        |  15 ++-
 3 files changed, 149 insertions(+), 66 deletions(-)

diff --git a/src/components/eventContent.vue b/src/components/eventContent.vue
index f3261c2..76bc6fa 100644
--- a/src/components/eventContent.vue
+++ b/src/components/eventContent.vue
@@ -2,10 +2,10 @@
   <div v-if="content.msgtype==='m.text'" v-html="parseMessage(content.body)"/>
   <div v-else-if="content.msgtype==='m.notice'" class="notice" v-html="parseMessage(content.body)"/>
   <div v-else-if="content.msgtype==='m.image'" class="image">
-    <img :src="getSource(content.url)" :alt="content.body"/><br>
+    <img :src="getSource(content.url)" :alt="content.body" :class="`${compact?'compact':''}`"/><br>
     {{content.body}}
   </div>
-  <div v-else-if="content.msgtype==='m.file'" class="file">
+  <div v-else-if="content.msgtype==='m.file'" :class="`file ${compact?'compact':''}`">
     <icon
       title="file"
       ic="./sym/ic_attach_file_white.svg"
@@ -16,15 +16,15 @@
       </a><br>{{content.body}}
     </div>
   </div>
-  <div v-else-if="content.msgtype==='m.audio'" class="audio">
-    <audio controls>
+  <div v-else-if="content.msgtype==='m.audio'" :class="`audio ${compact?'compact':''}`">
+    <audio controls :class="`${compact?'compact':''}`">
       <source :src="getSource(content.url)" :type="content.mimetype">
       your browser doesn't support audio
     </audio><br>
     {{content.body}}
   </div>
-  <div v-else-if="content.msgtype==='m.video'" class="video">
-    <video controls>
+  <div v-else-if="content.msgtype==='m.video'" :class="`video ${compact?'compact':''}`">
+    <video controls :class="`${compact?'compact':''}`">
       <source :src="getSource(content.url)" :type="content.mimetype">
       your browser doesn't support video
     </video><br>
@@ -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 @@
 <template>
   <div class="newMessageBanner" ref="newMessageBanner">
     <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
-    <event-content v-if="attachment" :content="attachment" class="attachment"/>
-    <form v-on:submit.prevent="sendMessage()">
-      <textarea
-        @keyup.enter.exact="sendMessage()"
-        @input="resizeMessageBanner(); sendTyping(2000);"
-        v-model="event.content.body"
-        ref="newMessageInput" class="newMessageInput"
-        rows="1" placeholder="type a message ..."
+    <div v-if="attachment" class="attachment">
+      <event-content :content="attachment" class="attachmentContent" :compact="true"/>
+      <icon
+        title="remove"
+        class="remove"
+        ic="./sym/ic_close_white.svg"
+        @click.native="resetAttachment()"
       />
+    </div>
+    <textarea
+      @keyup.enter.exact="onSubmit(event)"
+      @input="resizeMessageBanner(); sendTyping(2000);"
+      v-model="event.content.body"
+      ref="newMessageInput" class="newMessageInput"
+      rows="1" placeholder="type a message ..."
+    />
+    <icon
+      v-if="event.content.body && !isRecording || attachment"
+      type="submit"
+      title="press enter to submit"
+      class="sendMessageBtn"
+      ic="./sym/ic_send_white.svg"
+      @click.native="onSubmit(event)"
+    />
+    <div v-else class="recorder">
       <icon
-        v-if="event.content.body && !isRecording"
-        type="submit"
-        title="press enter to submit"
-        class="sendMessageBtn"
-        ic="./sym/ic_send_white.svg"
+        v-if="!isRecording"
+        title="record voice"
+        class="recordBtn start"
+        ic="./sym/ic_mic_white.svg"
+        @click.native="startRecording()"
+        ref="startRecord"
       />
-      <div v-else class="recorder">
+      <div v-else class="voiceMeterContainer">
+        <div class="voiceMeter" ref="voiceMeter"></div>
         <icon
-          v-if="!isRecording"
           title="record voice"
-          class="recordBtn start"
+          class="recordBtn stop"
           ic="./sym/ic_mic_white.svg"
-          @click.native="startRecording()"
-          ref="startRecord"
+          @click.native="stopRecording()"
+          ref="stopRecord"
         />
-        <div v-else class="voiceMeterContainer">
-          <div class="voiceMeter" ref="voiceMeter"></div>
-          <icon
-            title="record voice"
-            class="recordBtn stop"
-            ic="./sym/ic_mic_white.svg"
-            @click.native="stopRecording()"
-            ref="stopRecord"
-          />
-        </div>
       </div>
-    </form>
+    </div>
     <div class="mediaButtons">
       <icon
         title="toggle emoji"
@@ -53,7 +60,7 @@
       />
       <input
         type="file" id="fileInput" ref="fileInput"
-        @change="setAttachment($refs.fileInput.files[0])"
+        @change="setAttachment({file: $refs.fileInput.files[0]})"
       >
     </div>
     <v-emoji-picker
@@ -92,16 +99,27 @@ export default {
     resetReplyTo: Function
   },
   methods: {
-    sendMessage(){
-      let content = this.event.content;
-      if (!content.body.trim()) return;
-      matrix.sendEvent(this.event, this.roomId, this.replyTo);
-      content.body = '';
+    onSubmit(event){
+      console.log(event)
+      event.content.msgtype==='m.text'?this.sendEvent(event):this.sendMediaEvent(event);
+    },
+    async sendEvent(event){
+      if (!event.content.body.trim()) return;
+      await matrix.sendEvent(this.event, this.roomId, this.replyTo);
+      //await matrix.sendEvent(new Proxy(this.event, this.eventProxy), this.roomId, this.replyTo);
+      event.content.body = '';
+      this.resetAttachment();
       this.resetReplyTo();
       let id = this.$refs.newMessageInput;
       id.style.height = '1.25rem';
       this.onResize(id.parentElement.clientHeight);
     },
+    sendMediaEvent(event){
+      matrix.client.uploadContent(this.attachment.blob).then(mxc => {
+        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 {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .newMessageBanner{
   position: absolute;
   bottom: 0;
@@ -269,6 +313,8 @@ export default {
   width: 2.5rem;
   box-shadow: none;
 }
+.emojiToggle{
+}
 .recordBtn{
   position: absolute;
   right: 1rem;
@@ -311,7 +357,23 @@ export default {
   display: none;
 }
 .attachment{
-  max-width: 5rem;
+  top: 0.5rem;
+  left: 0.5rem;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  .attachmentContent{
+    position: relative;
+    width: fit-content;
+  }
+  .remove{
+    position: absolute;
+    top: 0;
+    right: -3rem;
+    background-color: unset;
+    height: 2.5rem;
+    width: 2.5rem;
+  }
 }
 img{
   max-width: 10rem;
diff --git a/src/lib/matrixHandler.js b/src/lib/matrixHandler.js
index 1865f44..1a8031b 100644
--- a/src/lib/matrixHandler.js
+++ b/src/lib/matrixHandler.js
@@ -1,5 +1,5 @@
 import matrix from 'matrix-js-sdk';
-import {NotificationHandler} from "@/lib/NotificationHandler";
+import {NotificationHandler} from '@/lib/NotificationHandler';
 
 export class MatrixHandler {
   constructor(clientDisplayName = 'matrix-chat') {
@@ -78,16 +78,21 @@ export class MatrixHandler {
     });
   }
   async sendEvent({content, type}, roomId, replyTo = undefined){
+    console.log(replyTo, content)
     await this.client.sendEvent(roomId, type, {
       body: content.body.trim(),
       msgtype: content.msgtype,
+      mimetype: content.mimetype,
+      url: content.url,
       '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}`)
-      );
+      .catch((err) => console.log(`error while sending message => ${err}`));
+    /*return await this.client.sendEvent(roomId, type, content)
+      .then(() => console.log('message sent successfully'))
+      .catch((err) => console.log(`error while sending message => ${err}`));*/
   }
 }
\ No newline at end of file

From c35b5ba44628b0aa5016b5e7254d73085662bb09 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sat, 1 May 2021 23:02:11 +0200
Subject: [PATCH 16/18] fix sendEvent, update eventContent file

---
 src/components/eventContent.vue | 43 ++++++++++++++++++++++++---------
 src/components/newMessage.vue   | 21 ++++++++++------
 src/lib/matrixHandler.js        | 19 +++------------
 3 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/components/eventContent.vue b/src/components/eventContent.vue
index 76bc6fa..80a6980 100644
--- a/src/components/eventContent.vue
+++ b/src/components/eventContent.vue
@@ -6,14 +6,20 @@
     {{content.body}}
   </div>
   <div v-else-if="content.msgtype==='m.file'" :class="`file ${compact?'compact':''}`">
-    <icon
-      title="file"
-      ic="./sym/ic_attach_file_white.svg"
-    />
+    <a :href="getSource(content.url)" target="_blank">
+    <div class="fileContent">
+      <icon
+        title="file"
+        ic="./sym/ic_attach_file_white.svg"
+        class="download"
+      />
+      <div class="filename">
+          {{content.filename || getSource(content.url)}}
+      </div>
+    </div>
+    </a>
     <div class="text">
-      <a :href="getSource(content.url)">
-        {{content.filename || getSource(content.url)}}
-      </a><br>{{content.body}}
+      {{content.body}}
     </div>
   </div>
   <div v-else-if="content.msgtype==='m.audio'" :class="`audio ${compact?'compact':''}`">
@@ -59,11 +65,26 @@ export default {
 
 <style scoped lang="scss">
 .file{
-  .text{
+  max-width: 30rem;
+  .fileContent{
     position: relative;
-    left: 4rem;
-    top: 0;
-    width: 100%;
+    background-color: #1d1d1d;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    min-height: 3rem;
+    .filename{
+      display: inline-block;
+      position: relative;
+      margin-left: 4rem;
+      top: 0;
+      height: 100%;
+    }
+    .download{
+      position: absolute;
+    }
+  }
+  .compact{
+    max-width: 20rem;
   }
 }
 .image{
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index dc94f0c..530e172 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -105,8 +105,8 @@ export default {
     },
     async sendEvent(event){
       if (!event.content.body.trim()) return;
-      await matrix.sendEvent(this.event, this.roomId, this.replyTo);
-      //await matrix.sendEvent(new Proxy(this.event, this.eventProxy), this.roomId, this.replyTo);
+      if (this.replyTo) this.setReplyTo(this.replyTo);
+      matrix.sendEvent(new Proxy(this.event, this.eventProxyHandler), this.roomId);
       event.content.body = '';
       this.resetAttachment();
       this.resetReplyTo();
@@ -125,6 +125,11 @@ export default {
       matrix.client.sendTyping(this.roomId, true, timeout+100);
       setTimeout(()=>this.waitForSendTyping=false, timeout);
     },
+    setReplyTo(event){
+      this.event.content['m.relates_to'] = {
+        'm.in_reply_to': event
+      }
+    },
     resizeMessageBanner(){
       let id = this.$refs.newMessageInput;
       id.style.height = '1.25rem';
@@ -177,12 +182,14 @@ export default {
         mimetype: file.type,
         url: window.URL.createObjectURL(file),
         blob: blob || await this.readFile(file),
+        filename: file.name,
         file
       };
       this.event.content = {
         body: file.name,
         msgtype: this.attachment.msgtype,
-        mimetype: this.attachment.mimetype
+        mimetype: this.attachment.mimetype,
+        filename: file.name
       };
     },
     resetAttachment(){
@@ -212,7 +219,7 @@ export default {
           body: '',
           msgtype: 'm.text',
           'm.relates_to': {
-            'm.in_reply_to': this.replyTo
+            'm.in_reply_to': undefined
           }
         }
       },
@@ -224,10 +231,10 @@ export default {
       isRecording: false,
       recBlob: undefined,
       attachment: undefined,
-      eventProxy: {
-        set: ()=>{},
+      eventProxyHandler: {
+        set: () => true,
         get: (target, key) => {
-          if (typeof target[key] === 'object') return new Proxy(target[key], this.eventProxy);
+          if (typeof target[key] === 'object') return new Proxy(Object.assign({}, target[key]), this.eventProxyHandler);
           return target[key];
         }
       }
diff --git a/src/lib/matrixHandler.js b/src/lib/matrixHandler.js
index 1a8031b..c277f43 100644
--- a/src/lib/matrixHandler.js
+++ b/src/lib/matrixHandler.js
@@ -77,22 +77,9 @@ export class MatrixHandler {
       }
     });
   }
-  async sendEvent({content, type}, roomId, replyTo = undefined){
-    console.log(replyTo, content)
-    await this.client.sendEvent(roomId, type, {
-      body: content.body.trim(),
-      msgtype: content.msgtype,
-      mimetype: content.mimetype,
-      url: content.url,
-      '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}`));
-    /*return await this.client.sendEvent(roomId, type, content)
+  async sendEvent({content, type}, roomId){
+    return await this.client.sendEvent(roomId, type, content)
       .then(() => console.log('message sent successfully'))
-      .catch((err) => console.log(`error while sending message => ${err}`));*/
+      .catch((err) => console.log(`error while sending message => ${err}`));
   }
 }
\ No newline at end of file

From c57c1d348f7366cf0cf92d12cdc6ec32950a948f Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Sun, 2 May 2021 00:28:50 +0200
Subject: [PATCH 17/18] refactor newMessage, add fileUpload and soundRecorder

---
 src/components/fileUpload.vue    |  62 ++++++++++++++++
 src/components/newMessage.vue    | 117 +++----------------------------
 src/components/soundRecorder.vue | 114 ++++++++++++++++++++++++++++++
 3 files changed, 187 insertions(+), 106 deletions(-)
 create mode 100644 src/components/fileUpload.vue
 create mode 100644 src/components/soundRecorder.vue

diff --git a/src/components/fileUpload.vue b/src/components/fileUpload.vue
new file mode 100644
index 0000000..5c779c8
--- /dev/null
+++ b/src/components/fileUpload.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="fileUpload">
+    <icon
+      title="upload media"
+      class="leftBtn attachFile"
+      ic="./sym/ic_attach_file_white.svg"
+      @click.native="$refs.fileInput.click()"
+    />
+    <input
+      type="file" id="fileInput" ref="fileInput"
+      @change="setFile({file: $refs.fileInput.files[0]})"
+    >
+  </div>
+</template>
+
+<script>
+import icon from '@/components/icon';
+
+export default {
+  name: 'soundRecorder',
+  components: {
+    icon
+  },
+  props:{
+    onChange: Function
+  },
+  methods: {
+    setFile({file}){
+      this.readFile(file).then(blob => {
+        blob.name = file.name;
+        this.onChange({blob})
+      });
+    },
+    readFile(file){
+      return 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);
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+.fileUpload{
+  display: inline-block;
+  position: relative;
+}
+.leftBtn{
+  background-color: unset;
+  height: 2.5rem;
+  width: 2.5rem;
+  box-shadow: none;
+}
+#fileInput{
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 530e172..93a8d6c 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -18,33 +18,14 @@
       rows="1" placeholder="type a message ..."
     />
     <icon
-      v-if="event.content.body && !isRecording || attachment"
+      v-if="event.content.body && !getRecordingState() || attachment"
       type="submit"
       title="press enter to submit"
       class="sendMessageBtn"
       ic="./sym/ic_send_white.svg"
       @click.native="onSubmit(event)"
     />
-    <div v-else class="recorder">
-      <icon
-        v-if="!isRecording"
-        title="record voice"
-        class="recordBtn start"
-        ic="./sym/ic_mic_white.svg"
-        @click.native="startRecording()"
-        ref="startRecord"
-      />
-      <div v-else class="voiceMeterContainer">
-        <div class="voiceMeter" ref="voiceMeter"></div>
-        <icon
-          title="record voice"
-          class="recordBtn stop"
-          ic="./sym/ic_mic_white.svg"
-          @click.native="stopRecording()"
-          ref="stopRecord"
-        />
-      </div>
-    </div>
+    <sound-recorder v-else class="recorder" :on-stop="setAttachment" ref="recorder"/>
     <div class="mediaButtons">
       <icon
         title="toggle emoji"
@@ -52,16 +33,7 @@
         ic="./sym/ic_insert_emoticon_white.svg"
         @click.native="toggleEmojiPicker()"
       />
-      <icon
-        title="upload media"
-        class="leftBtn attachFile"
-        ic="./sym/ic_attach_file_white.svg"
-        @click.native="$refs.fileInput.click()"
-      />
-      <input
-        type="file" id="fileInput" ref="fileInput"
-        @change="setAttachment({file: $refs.fileInput.files[0]})"
-      >
+     <fileUpload class="leftBtn" :on-change="setAttachment"/>
     </div>
     <v-emoji-picker
       v-if="showEmojiPicker"
@@ -80,13 +52,15 @@ import {parseMessage} from '@/lib/eventUtils';
 import {calcUserName} from '@/lib/matrixUtils';
 import ReplyEvent from '@/components/replyEvent';
 import {VEmojiPicker} from 'v-emoji-picker';
-import Recorder from 'recorder-js';
 import EventContent from '@/components/eventContent';
-const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
+import SoundRecorder from '@/components/soundRecorder';
+import FileUpload from '@/components/fileUpload';
 
 export default {
   name: 'newMessage',
   components: {
+    FileUpload,
+    SoundRecorder,
     EventContent,
     ReplyEvent,
     icon,
@@ -145,44 +119,16 @@ export default {
     onSelectEmoji(emoji) {
       this.event.content.body += emoji.data;
     },
-    startRecording(){
-      navigator.mediaDevices.getUserMedia({audio: true})
-        .then(stream => {
-          this.recorder.init(stream);
-          this.recorder.start().then(()=>this.isRecording=true);
-        })
-        .catch(err => console.log('unable to get stream', err));
-    },
-    stopRecording(){
-      this.recorder.stop()
-        .then(({blob}) => {
-          this.isRecording=false;
-          blob.name = `Recording-${new Date().toISOString()}.${blob.type.split('/')[1]}`;
-          this.setAttachment({blob});
-        });
-    },
-    setVoiceMeter(value){
-      if (!this.$refs.stopRecord) return;
-      this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
-      this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
-    },
-    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);
-      });
+    getRecordingState(){
+      return this.$refs.recorder && this.$refs.recorder.isRecording
     },
     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),
         filename: file.name,
+        blob,
         file
       };
       this.event.content = {
@@ -196,7 +142,7 @@ export default {
       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, ''):'',
+        body: this.attachment?this.event.content.body.replace(this.attachment.filename, ''):'',
         msgtype: 'm.text'
       };
       this.attachment = undefined;
@@ -225,11 +171,6 @@ export default {
       },
       showEmojiPicker: false,
       waitForSendTyping: false,
-      recorder: new Recorder(audioContext, {
-        onAnalysed: data => this.setVoiceMeter(data.lineTo)
-      }),
-      isRecording: false,
-      recBlob: undefined,
       attachment: undefined,
       eventProxyHandler: {
         set: () => true,
@@ -320,48 +261,12 @@ export default {
   width: 2.5rem;
   box-shadow: none;
 }
-.emojiToggle{
-}
-.recordBtn{
-  position: absolute;
-  right: 1rem;
-  bottom: 0.25rem;
-  background-color: #1d1d1d;
-  border-radius: 50%;
-}
-.recordBtn.stop{
-  right: 0;
-  bottom: 0;
-  background-color: #c63e3e;
-  box-shadow: none;
-}
-.voiceMeter{
-  position: absolute;
-  background-color: #fff;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  border-radius: 50%;
-  box-shadow: 3px 3px 10px #111;
-}
-.voiceMeterContainer{
-  position: absolute;
-  height: 3rem;
-  width: 3rem;
-  bottom: 0.25rem;
-  right: 1rem;
-}
 .recorder{
   position: absolute;
   height: 100%;
-  width: 8rem;
   bottom: 0;
   right: 0;
   border-radius: 0 1rem 0 0;
-  overflow: hidden;
-}
-#fileInput{
-  display: none;
 }
 .attachment{
   top: 0.5rem;
diff --git a/src/components/soundRecorder.vue b/src/components/soundRecorder.vue
new file mode 100644
index 0000000..52bef27
--- /dev/null
+++ b/src/components/soundRecorder.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="recorder">
+    <icon
+      v-if="!isRecording"
+      title="record voice"
+      class="recordBtn start"
+      ic="./sym/ic_mic_white.svg"
+      @click.native="startRecording()"
+      ref="startRecord"
+    />
+    <div v-else class="voiceMeterContainer">
+      <div class="voiceMeter" ref="voiceMeter"></div>
+      <icon
+        title="record voice"
+        class="recordBtn stop"
+        ic="./sym/ic_mic_white.svg"
+        @click.native="stopRecording()"
+        ref="stopRecord"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import icon from '@/components/icon';
+import Recorder from 'recorder-js';
+const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
+
+export default {
+  name: 'soundRecorder',
+  components: {
+    icon
+  },
+  props: {
+    onStart: {
+      type: Function,
+      default: ()=>{}
+    },
+    onStop: {
+      type: Function,
+      default: ()=>{}
+    }
+  },
+  methods: {
+    startRecording(){
+      this.onStart();
+      navigator.mediaDevices.getUserMedia({audio: true})
+        .then(stream => {
+          this.recorder.init(stream);
+          this.recorder.start().then(()=>this.isRecording=true);
+        })
+        .catch(err => console.log('unable to get stream', err));
+    },
+    stopRecording(){
+      this.recorder.stop()
+        .then(({blob}) => {
+          blob.name = `Recording-${new Date().toISOString()}.${blob.type.split('/')[1]}`;
+          this.onStop({blob});
+          this.isRecording=false;
+        });
+    },
+    setVoiceMeter(value){
+      if (!this.$refs.stopRecord) return;
+      this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
+      this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
+    },
+  },
+  data(){
+    return{
+      recorder: new Recorder(audioContext, {
+        onAnalysed: data => this.setVoiceMeter(data.lineTo)
+      }),
+      isRecording: false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.recordBtn{
+  position: absolute;
+  right: 1rem;
+  bottom: 0.25rem;
+  background-color: #1d1d1d;
+  border-radius: 50%;
+}
+.recordBtn.stop{
+  right: 0;
+  bottom: 0;
+  background-color: #c63e3e;
+  box-shadow: none;
+}
+.voiceMeter{
+  position: absolute;
+  background-color: #fff;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 50%;
+  box-shadow: 3px 3px 10px #111;
+}
+.voiceMeterContainer{
+  position: absolute;
+  height: 3rem;
+  width: 3rem;
+  bottom: 0.25rem;
+  right: 1rem;
+}
+.recorder{
+  height: 100%;
+  width: 8rem;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file

From 40812fc4a23f50bf5ff8518ec84a58a87e4b36cf Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Mon, 3 May 2021 23:00:47 +0200
Subject: [PATCH 18/18] add createRooms from search

---
 src/views/rooms.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/rooms.vue b/src/views/rooms.vue
index 494d7f5..0cb9c64 100644
--- a/src/views/rooms.vue
+++ b/src/views/rooms.vue
@@ -10,7 +10,7 @@
       <room-list-element
         v-for="room in Object.assign([], matrix.client.getRooms())
           .sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)
-          .filter(prop=>matchResults(prop.name, search))"
+          .filter(prop=>matchResults(prop.name, search)||prop.roomId===search)"
         :key="room.roomId" @click.native="openChat(room)"
         :room="room"
         class="roomListElement"
@@ -22,7 +22,7 @@
             .filter(prop=>matchResults(prop.displayName, search)||matchResults(prop.userId, search))
             .slice(0,10)"
           :user="user" :key="user.userId"
-          @click.native="setQuestion(`create private chat with '${search}'?`,()=>search='cool')"
+          @click.native="setQuestion(`create private chat with '${user.displayName}'?`,()=>createRoom({user}))"
         />
         <p class="wideElement">suggestions ↴</p><p class="smallElement">…</p>
         <div class="wideElement">
@@ -31,9 +31,8 @@
              @click="setQuestion(`join room '${search}'?`, ()=>joinRoom(search))"
           >join room: {{search}} ➤</p>
           <p v-if="search.match(/^[a-zA-Z0-9_.+-]+$/)"
-            @click="setQuestion(`create room '${search}'?`,()=>search='cool')"
+            @click="setQuestion(`create room '${search}'?`,()=>createRoom({name: search}))"
           >create room: {{search}} ➤</p>
-          <room-list-element v-if="isValidRoomId(search) && getRoom(search)" :room="getRoom(search)"/>
         </div>
       </div>
     </div>
@@ -101,7 +100,14 @@ export default {
     },
     joinRoom(room){
       this.matrix.client.join(room).then(()=>{
-        this.openChat(room);
+        this.openChat(getRoom(room.room_id));
+      });
+    },
+    async createRoom({name = '', user = undefined}){
+      return this.matrix.client.createRoom({name}).then(room => {
+        if (user) this.matrix.client.invite(room.room_id, user.userId);
+        this.openChat(getRoom(room.room_id));
+        return room;
       });
     },
     getMxcFromRoom,