src/App.vue

@@ -39,9 +39,6 @@ input:focus{
   color: #000;
   background-color: #fff;
 }
-a{
-  color: #00BCD4;
-}
 *{
   scrollbar-width: thin;
   scrollbar-color: #42b983 #2220;

src/components/avatar.vue

@@ -1,11 +1,11 @@
 <template>
-  <img v-if="mxcURL" :src="getPreviewUrl(mxcURL)" class="userThumbnail image"/>
+  <img v-if="mxcURL" :src="getAvatarUrl(mxcURL)" class="userThumbnail image"/>
   <div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
 </template>
 
 <script>
 import {toSvg} from 'jdenticon';
-import {getPreviewUrl} from '@/lib/getMxc';
+import {getAvatarUrl} from '@/lib/getMxc';
 
 export default {
   name: 'userThumbnail.vue',
@@ -24,7 +24,7 @@ export default {
     getJdenticon(){
       return toSvg(this.fallback, this.getFontSize()*this.size);
     },
-    getPreviewUrl
+    getAvatarUrl
   },
   data(){
     return {

src/components/event.vue

@@ -1,40 +1,22 @@
 <template>
   <div class="event">
-    <div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
+    <div v-if="event.content.msgtype==='m.text'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
-      <reply-event :event="replyEvent"/>
+      <div v-if="replyEvent" class="reply">
-
+        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
-      <div v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
+        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
-      <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">
+      <div v-html="parseMessage(event.content.body)"></div>
-        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">
+    <div v-else-if="event.content.msgtype==='m.notice'" class="notice">
-      <span v-if="event.type==='m.room.member'">{{membershipEvents[event.content.membership](event)}}</span>
+      {{event.content.body}}
-      <span v-else>unsupported event</span>
+      <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>
@@ -45,12 +27,9 @@ 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,
@@ -65,11 +44,13 @@ 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{
@@ -110,7 +91,7 @@ export default {
     width: max-content;
     min-width: 2rem;
     max-width: calc(100% - 5rem);
-    padding: 0.8rem 1rem 0.45rem 1rem;
+    padding: 0.7rem 1rem 0.45rem 1rem;
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
     text-align: left;
@@ -131,30 +112,6 @@ 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;

src/components/newMessage.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="newMessageBanner" ref="newMessageBanner">
-    <reply-event v-if="replyTo" :event="replyTo" @click.native="resetReplyTo()"/>
+    <div class="reply" v-if="replyTo" @click="resetReplyTo">
+      <span class="username">{{calcUserName(replyTo.sender)}}</span><br>
+      {{parseMessage(replyTo.content.body)}}
+    </div>
     <form v-on:submit.prevent="sendMessage()">
       <textarea
         @keyup.enter.exact="sendMessage()"
@@ -24,12 +27,10 @@ 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: {

src/components/replyEvent.vue

@@ -1,44 +0,0 @@
-<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>

src/lib/getMxc.js

@@ -19,14 +19,8 @@ export function getMxcFromRoomId(roomId){
   return getMxcFromRoom(matrix.client.getRoom(roomId));
 }
 
-export function getPreviewUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
+export function getAvatarUrl(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}`;
-}