add fileInput, refactor eventContent

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>

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"/>
-
+      <event-content :content="event.content"/>
-      <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>
-
       <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;

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>

src/components/newMessage.vue

@@ -1,57 +1,69 @@
 <template>
-    <div class="newMessageBanner" ref="newMessageBanner">
+  <div class="newMessageBanner" ref="newMessageBanner">
-      <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
+    <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
-      <form v-on:submit.prevent="sendMessage()">
+    <event-content v-if="attachment" :content="attachment" class="attachment"/>
-        <textarea
+    <form v-on:submit.prevent="sendMessage()">
-          @keyup.enter.exact="sendMessage()"
+      <textarea
-          @input="resizeMessageBanner(); sendTyping(2000);"
+        @keyup.enter.exact="sendMessage()"
-          v-model="event.content.body"
+        @input="resizeMessageBanner(); sendTyping(2000);"
-          ref="newMessageInput" class="newMessageInput"
+        v-model="event.content.body"
-          rows="1" placeholder="type a message ..."
+        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"
+          v-if="!isRecording"
-          type="submit"
+          title="record voice"
-          title="press enter to submit"
+          class="recordBtn start"
-          class="sendMessageBtn"
+          ic="./sym/ic_mic_white.svg"
-          ic="./sym/ic_send_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()"
+            @click.native="stopRecording()"
-            ref="startRecord"
+            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
+      <icon
-        v-if="showEmojiPicker"
+        title="upload media"
-        class="emojiPicker"
+        class="leftBtn attachFile"
-        @select="onSelectEmoji"
+        ic="./sym/ic_attach_file_white.svg"
-        :dark="true"
+        @click.native="$refs.fileInput.click()"
-        :continuousList="true"
       />
+      <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>

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