Dynamic message UI

Also, WIP: send and receive images.

src/components/Chat.vue

@@ -7,54 +7,10 @@
       v-on:scroll="onScroll"
     >
       <div v-for="event in events" :key="event.eventId">
-        <!-- Contact joined the chat -->
+        <component
-        <ContactJoin
+          :is="componentForEvent(event)"
-          class="messageJoin"
+          :room="room"
-          v-if="
+          :event="event" />
-            event.event.state_key != myUserId &&
-            event.getContent().membership == 'join' &&
-            event.getType() == 'm.room.member'
-          " :room="room" :event="event"
-        />
-
-        <!-- Contact left the chat -->
-        <ContactLeave
-          class="messageJoin"
-          v-if="
-            event.event.state_key != myUserId &&
-            event.getContent().membership == 'leave' &&
-            event.getType() == 'm.room.member'
-          " :room="room" :event="event"
-        />
-
-        <!-- Contact invited to the chat -->
-        <ContactInvited
-          class="messageJoin"
-          v-if="
-            event.event.state_key != myUserId &&
-            event.getContent().membership == 'invite' &&
-            event.getType() == 'm.room.member'
-          " :room="room" :event="event"
-        />
-
-        <MessageIncomingText
-          v-else-if="
-            event.getSender() != myUserId && event.getType() == 'm.room.message'
-          " :room="room" :event="event"
-        />
-
-        <MessageOutgoingText v-else-if="event.getType() == 'm.room.message'" :room="room" :event="event" />
-
-        <!-- ROOM NAME CHANGED -->
-        <RoomNameChanged v-else-if="event.getType() == 'm.room.name'" :room="room" :event="event" />
-
-        <!-- ROOM TOPIC CHANGED -->
-        <RoomTopicChanged v-else-if="event.getType() == 'm.room.topic'" :room="room" :event="event" />
-
-        <!-- ROOM AVATAR CHANGED -->
-        <RoomAvatarChanged v-else-if="event.getType() == 'm.room.avatar'" :room="room" :event="event" />
-
-        <DebugEvent v-else :room="room" :event="event" />
       </div>
     </div>
 
@@ -134,6 +90,8 @@ import RoomNameChanged from './messages/RoomNameChanged.vue';
 import RoomTopicChanged from './messages/RoomTopicChanged.vue';
 import RoomAvatarChanged from './messages/RoomAvatarChanged.vue';
 import DebugEvent from "./messages/DebugEvent.vue";
+import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
+import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
 
 // from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
 function ScrollPosition(node) {
@@ -174,7 +132,9 @@ export default {
     RoomNameChanged,
     RoomTopicChanged,
     RoomAvatarChanged,
-    DebugEvent
+    DebugEvent,
+    MessageOutgoingImage,
+    MessageIncomingImage
   },
 
   data() { return {
@@ -247,6 +207,45 @@ export default {
   },
 
   methods: {
+    componentForEvent(event) {
+      switch (event.getType()) {
+        case 'm.room.member':
+          if (event.event.state_key != this.myUserId) {
+            if (event.getContent().membership == 'join') {
+              return ContactJoin;
+            } else if (event.getContent().membership == 'leave') {
+              return ContactLeave;
+            } else if (event.getContent().membership == 'invite') {
+              return ContactInvited;
+            }
+          }
+          break;
+
+        case 'm.room.message':
+          if (event.getSender() != this.myUserId) {
+            if (event.getContent().msgtype == 'm.image') {
+              return MessageIncomingImage;
+            }
+            return MessageIncomingText;
+          } else {
+            if (event.getContent().msgtype == 'm.image') {
+              return MessageOutgoingImage;
+            }
+            return MessageOutgoingText;
+          }
+
+        case 'm.room.name':
+          return RoomNameChanged;
+
+        case 'm.room.topic':
+          return RoomTopicChanged;
+
+        case 'm.room.avatar':
+          return RoomAvatarChanged;
+      }
+      return DebugEvent;
+    },
+
     paginateBackIfNeeded() {
       this.$nextTick(() => {
         const container = this.$refs.chatContainer;
@@ -405,22 +404,6 @@ export default {
       );
     },
 
-    formatTime(time) {
-      const date = new Date();
-      date.setTime(time);
-
-      const today = new Date();
-      if (
-        date.getDate() == today.getDate() &&
-        date.getMonth() == today.getMonth() &&
-        date.getFullYear() == today.getFullYear()
-      ) {
-        // For today, skip the date part
-        return date.toLocaleTimeString();
-      }
-      return date.toLocaleString();
-    },
-
     handleScrolledToTop() {
       console.log("@top");
       if (
@@ -484,40 +467,6 @@ export default {
         }
       });
     },
-
-        /**
-     * Get a display name given an event.
-     */
-    stateEventDisplayName(event) {
-      if (this.room) {
-        const member = this.room.getMember(event.getSender());
-        if (member) {
-          return member.name;
-        }
-      }
-      return event.getContent().displayname || event.event.state_key;
-    },
-
-    messageEventDisplayName(event) {
-      return this.stateEventDisplayName(event);
-    },
-
-    messageEventAvatar(event) {
-      if (this.room) {
-        const member = this.room.getMember(event.getSender());
-        if (member) {
-          return member.getAvatarUrl(
-            this.$matrix.matrixClient.getHomeserverUrl(),
-            40,
-            40,
-            "scale",
-            true
-          );
-        }
-      }
-      return null;
-    },
-
   },
 };
 </script>

src/components/messages/ContactInvited.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- Contact invited to the chat -->
-  <div
+  <div class="messageJoin">
-    class="messageJoin"
-    v-if="
-      event.event.state_key != myUserId &&
-      event.getContent().membership == 'invite' &&
-      event.getType() == 'm.room.member'
-    "
-  >
     {{ stateEventDisplayName(event) }} was invited to the chat...
   </div>
 </template>

src/components/messages/ContactJoin.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- Contact joined the chat -->
-  <div
+  <div class="messageJoin">
-    class="messageJoin"
-    v-if="
-      event.event.state_key != myUserId &&
-      event.getContent().membership == 'join' &&
-      event.getType() == 'm.room.member'
-    "
-  >
     {{ stateEventDisplayName(event) }} joined the chat
   </div>
 </template>

src/components/messages/ContactLeave.vue

@@ -1,13 +1,6 @@
 <template>
   <!-- Contact left the chat -->
-  <div
+  <div class="messageJoin">
-    class="messageJoin"
-    v-if="
-      event.event.state_key != myUserId &&
-      event.getContent().membership == 'leave' &&
-      event.getType() == 'm.room.member'
-    "
-  >
     {{ stateEventDisplayName(event) }} left the chat
   </div>
 </template>

src/components/messages/MessageIncomingImage.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="messageIn">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <v-avatar class="avatar" size="40" color="grey">
+        <img
+          v-if="messageEventAvatar(event)"
+          :src="messageEventAvatar(event)"
+        />
+        <span v-else class="white--text headline">{{
+          messageEventDisplayName(event).substring(0, 1).toUpperCase()
+        }}</span>
+      </v-avatar>
+
+      <div class="bubble">
+        <v-img :aspect-ratio="16 / 9" ref="image" :src="src" contain />
+      </div>
+    </div>
+    <div class="time">
+      {{ formatTime(event.event.origin_server_ts) }}
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+  data() {
+    return {
+      src: null,
+    };
+  },
+  mounted() {
+    // const width = this.$refs.image.$el.clientWidth;
+    // const height = (width * 9) / 16;
+    const content = this.event.getContent();
+    if (
+      content &&
+      content.info &&
+      content.info.thumbnail_file &&
+      content.info.thumbnail_file.url
+    ) {
+      this.src = this.$matrix.matrixClient.mxcUrlToHttp(
+        content.info.thumbnail_file.url,
+        content.info.w,
+        content.info.h,
+        "scale",
+        true
+      );
+      console.log("SRC set to: ", this.src);
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/MessageOutgoingImage.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="messageOut">
+      <div class="sender">{{ "You" }}</div>
+      <div class="bubble">
+        <v-img :aspect-ratio="16/9" ref="image" :src="src" contain />
+      </div>
+      <div class="status">{{ event.status }}</div>
+    </div>
+    <div class="time">
+      {{ formatTime(event.event.origin_server_ts) }}
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+  data() {
+    return {
+      src: null
+    }
+  },
+  mounted() {
+    const width = this.$refs.image.$el.clientWidth;
+    const height = (width * 9) / 16;
+    this.src = this.$matrix.matrixClient.mxcUrlToHttp(this.event.getContent().url, width, height, 'scale', false);
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>