Show/detect avatar and display name changes

Issue #72.

src/components/Chat.vue

@@ -299,6 +299,7 @@ import MessageOutgoingAudio from "./messages/MessageOutgoingAudio.vue";
 import ContactJoin from "./messages/ContactJoin.vue";
 import ContactLeave from "./messages/ContactLeave.vue";
 import ContactInvited from "./messages/ContactInvited.vue";
+import ContactChanged from "./messages/ContactChanged.vue";
 import RoomNameChanged from "./messages/RoomNameChanged.vue";
 import RoomTopicChanged from "./messages/RoomTopicChanged.vue";
 import RoomAvatarChanged from "./messages/RoomAvatarChanged.vue";
@@ -352,6 +353,7 @@ export default {
     ContactJoin,
     ContactLeave,
     ContactInvited,
+    ContactChanged,
     RoomNameChanged,
     RoomTopicChanged,
     RoomAvatarChanged,
@@ -691,7 +693,12 @@ export default {
       switch (event.getType()) {
         case "m.room.member":
           if (event.getContent().membership == "join") {
-            return ContactJoin;
+            if (event.getPrevContent() && event.getPrevContent().membership == "join") {
+              // We we already joined, so this must be a display name and/or avatar update!
+              return ContactChanged;
+            } else {
+              return ContactJoin;
+            }
           } else if (event.getContent().membership == "leave") {
             return ContactLeave;
           } else if (event.getContent().membership == "invite") {

src/components/messages/ContactChanged.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- Contact joined the chat -->
+  <div class="messageJoin">
+    <div v-if="displayNameChange">
+    {{ changer }} changed display name to {{ event.getContent().displayname }}
+    </div>
+    <div v-if="avatarChange">
+    {{ changer }} changed the avatar
+    </div>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+  computed: {
+    displayNameChange() {
+      const content = this.event.getContent();
+      const prevContent = this.event.getPrevContent();
+      return content.displayname != prevContent.displayname;
+    },
+    avatarChange() {
+      const content = this.event.getContent();
+      const prevContent = this.event.getPrevContent();
+      return content.avatar_url != prevContent.avatar_url;
+    },
+    changer() {
+      if (this.event.getSender() == this.$matrix.currentUserId) {
+        return "You";
+      }
+      if (this.displayNameChange) {
+        return this.event.getPrevContent().displayname;
+      }
+      return this.stateEventDisplayName(this.event);
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>