Quick reactions

src/components/Chat.vue

@@ -7,7 +7,29 @@
       v-on:scroll="onScroll"
     >
       <div v-for="event in events" :key="event.getId()">
-        <component :is="componentForEvent(event)" :room="room" :event="event" />
+        <v-hover v-slot="{ hover }" v-if="!event.isRelation()">
+          <div style="position: relative">
+            <component
+              :is="componentForEvent(event)"
+              :room="room"
+              :event="event"
+              :reactions="
+                timelineWindow._timelineSet.getRelationsForEvent(
+                  event.getId(),
+                  'm.annotation',
+                  'm.reaction'
+                )
+              "
+              v-on:send-quick-reaction="sendQuickReaction"
+            />
+            <message-operations
+              v-if="hover"
+              v-on:addreaction="addReaction"
+              :event="event"
+              :incoming="event.getSender() != $matrix.currentUserId"
+            />
+          </div>
+        </v-hover>
       </div>
     </div>
 
@@ -68,11 +90,23 @@
             <v-btn color="primary" text @click="cancelSendAttachment"
               >Cancel</v-btn
             >
-            <v-btn color="primary" text @click="sendAttachment" :disabled="currentSendOperation != null">Send</v-btn>
+            <v-btn
+              color="primary"
+              text
+              @click="sendAttachment"
+              :disabled="currentSendOperation != null"
+              >Send</v-btn
+            >
           </v-card-actions>
         </v-card>
       </v-dialog>
     </div>
+
+    <div>
+      <v-dialog v-model="showEmojiPicker" class="ma-0 pa-0" width="50%">
+        <VEmojiPicker style="width: 100%" @select="emojiSelected" />
+      </v-dialog>
+    </div>
   </div>
 </template>
 
@@ -90,6 +124,7 @@ import DebugEvent from "./messages/DebugEvent.vue";
 import MessageOutgoingImage from "./messages/MessageOutgoingImage.vue";
 import MessageIncomingImage from "./messages/MessageIncomingImage.vue";
 import util from "../plugins/utils";
+import MessageOperations from "./messages/MessageOperations.vue";
 
 // from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
 function ScrollPosition(node) {
@@ -133,6 +168,7 @@ export default {
     DebugEvent,
     MessageOutgoingImage,
     MessageIncomingImage,
+    MessageOperations,
   },
 
   data() {
@@ -148,37 +184,24 @@ export default {
       currentSendOperation: null,
       currentSendProgress: null,
       currentSendError: null,
-      joinRoom: null,
+      showEmojiPicker: false,
+      selectedEvent: null,
     };
   },
 
   mounted() {
     const container = this.$refs.chatContainer;
     this.scrollPosition = new ScrollPosition(container);
-
     this.$matrix.on("Room.timeline", this.onEvent);
     this.$matrix.on("RoomMember.typing", this.onUserTyping);
-    this.$matrix.on("Matrix.initialized", this.onInitialized);
-
-    if (this.$route.params && this.$route.params.joinRoom) {
-      this.joinRoom = this.$route.params.joinRoom;
-    }
-
-    if (this.$matrix.matrixClientReady) {
-      this.onInitialized(this.$matrix.matrixClient);
-    }
   },
 
   destroyed() {
     this.$matrix.off("Room.timeline", this.onEvent);
     this.$matrix.off("RoomMember.typing", this.onUserTyping);
-    this.$matrix.off("Matrix.initialized", this.onInitialized);
   },
 
   computed: {
-    myUserId() {
-      return this.$store.state.auth.user.user_id;
-    },
     roomId() {
       return this.$matrix.currentRoomId;
     },
@@ -188,69 +211,55 @@ export default {
   },
 
   watch: {
-    roomId() {
-      console.log("Chat: Current room changed");
+    roomId: {
+      handler(ignoredNewVal, ignoredOldVal) {
+        console.log("Chat: Current room changed");
 
-      // Clear old events
-      this.events = [];
-      this.timelineWindow = null;
-      this.contactIsTyping = false;
+        // Clear old events
+        this.events = [];
+        this.timelineWindow = null;
+        this.contactIsTyping = false;
 
-      if (!this.roomId) {
-        return; // no room
-      }
+        if (!this.roomId) {
+          return; // no room
+        }
 
-      this.room = this.$matrix.getRoom(this.roomId);
-      if (!this.room) {
-        return; // Not found
-      }
+        this.room = this.$matrix.getRoom(this.roomId);
+        if (!this.room) {
+          return; // Not found
+        }
 
-      this.timelineWindow = new TimelineWindow(
-        this.$matrix.matrixClient,
-        this.room.getUnfilteredTimelineSet(),
-        {}
-      );
-      this.timelineWindow.load(null, 20).then(() => {
-        this.events = this.timelineWindow.getEvents();
-        this.$nextTick(() => {
-          this.paginateBackIfNeeded();
+        this.timelineWindow = new TimelineWindow(
+          this.$matrix.matrixClient,
+          this.room.getUnfilteredTimelineSet(),
+          {}
+        );
+        this.timelineWindow.load(null, 20).then(() => {
+          this.events = this.timelineWindow.getEvents();
+          this.$nextTick(() => {
+            this.paginateBackIfNeeded();
+          });
         });
-      });
+      },
+      immediate: true,
     },
   },
 
   methods: {
-    onInitialized(matrixClient) {
-      if (this.joinRoom) {
-        const roomId = this.joinRoom;
-        this.joinRoom = null;
-        matrixClient
-          .joinRoom(roomId)
-          .then((room) => {
-            this.$matrix.setCurrentRoomId(room.roomId);
-          })
-          .catch((err) => {
-            // TODO - handle error
-            console.log("Failed to join room", err);
-          });
-      }
-    },
     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;
-            }
+          if (event.getContent().membership == "join") {
+            return ContactJoin;
+          } else if (event.getContent().membership == "leave") {
+            return ContactLeave;
+          } else if (event.getContent().membership == "invite") {
+            return ContactInvited;
           }
-          break;
+        break;
 
         case "m.room.message":
-          if (event.getSender() != this.myUserId) {
+          if (event.getSender() != this.$matrix.currentUserId) {
             if (event.getContent().msgtype == "m.image") {
               return MessageIncomingImage;
             }
@@ -319,13 +328,18 @@ export default {
 
     sendMessage() {
       if (this.currentInput.length > 0) {
-        util.sendTextMessage(this.$matrix.matrixClient, this.roomId, this.currentInput)
-        .then(() => {
-          console.log("Sent message");
-        })
-        .catch(err => {
-          console.log("Failed to send:", err);
-        })
+        util
+          .sendTextMessage(
+            this.$matrix.matrixClient,
+            this.roomId,
+            this.currentInput
+          )
+          .then(() => {
+            console.log("Sent message");
+          })
+          .catch((err) => {
+            console.log("Failed to send:", err);
+          });
         this.currentInput = "";
       }
     },
@@ -356,18 +370,23 @@ export default {
     sendAttachment() {
       if (this.currentImageInputPath) {
         this.currentSendProgress = 0;
-        this.currentSendOperation = util.sendEncyptedImage(this.$matrix.matrixClient, this.roomId, this.currentImageInputPath, this.onUploadProgress);
+        this.currentSendOperation = util.sendImage(
+          this.$matrix.matrixClient,
+          this.roomId,
+          this.currentImageInputPath,
+          this.onUploadProgress
+        );
         this.currentSendOperation
-        .then(() => {
-          this.currentSendOperation = null;
-          this.currentImageInput = null;
-          this.currentSendProgress = 0;
-        })
-        .catch(err => {
-          this.currentSendError = err.toLocaleString();
-          this.currentSendOperation = null;
-          this.currentSendProgress = 0;
-        });
+          .then(() => {
+            this.currentSendOperation = null;
+            this.currentImageInput = null;
+            this.currentSendProgress = 0;
+          })
+          .catch((err) => {
+            this.currentSendError = err.toLocaleString();
+            this.currentSendOperation = null;
+            this.currentSendProgress = 0;
+          });
       }
     },
 
@@ -441,6 +460,39 @@ export default {
         }
       });
     },
+
+    addReaction(e) {
+      const event = e.event;
+      // Store the event we are reacting to, so that we know where to
+      // send when the picker closes.
+      this.selectedEvent = event;
+      this.showEmojiPicker = true;
+    },
+
+    emojiSelected(e) {
+      this.showEmojiPicker = false;
+      if (this.selectedEvent) {
+        const event = this.selectedEvent;
+        this.selectedEvent = null;
+        this.sendQuickReaction({reaction:e.data, event: event});
+      }
+    },
+
+    sendQuickReaction(e) {
+      util
+          .sendQuickReaction(
+            this.$matrix.matrixClient,
+            this.roomId,
+            e.reaction,
+            e.event
+          )
+          .then(() => {
+            console.log("Quick reaction message");
+          })
+          .catch((err) => {
+            console.log("Failed to send quick reaction:", err);
+          });
+    }
   },
 };
 </script>

src/components/Join.vue

@@ -38,38 +38,29 @@ export default {
     handleJoin() {
       this.loading = true;
       this.loadingMessage = "Logging in...";
+      var clientPromise;
       if (this.currentUser) {
-        this.$matrix
-          .getMatrixClient(this.currentUser)
-          .then((ignoreduser) => {
-            this.loadingMessage = "Joining room...";
-            return this.$matrix.matrixClient.joinRoom(this.roomId);
-          })
-          .then((room) => {
-            this.$matrix.setCurrentRoomId(room.roomId);
-            this.loading = false;
-            this.loadingMessage = null;
-            this.$router.replace({ name: "Chat" });
-          })
-          .catch((err) => {
-            // TODO - handle error
-            console.log("Failed to join room", err);
-            this.loading = false;
-            this.loadingMessage = err.toString();
-          });
+        clientPromise = this.$matrix.getMatrixClient(this.currentUser);
       } else {
-        this.$store.dispatch("auth/login", this.guestUser).then(
-          () => {
-            this.loading = false;
-            this.loadingMessage = null;
-            this.$router.replace({ name: "Chat" });
-          },
-          (error) => {
-            this.loading = false;
-            this.loadingMessage = error.toString();
-          }
-        );
+        clientPromise = this.$store.dispatch("auth/login", this.guestUser);
       }
+      return clientPromise
+        .then((ignoreduser) => {
+          this.loadingMessage = "Joining room...";
+          return this.$matrix.matrixClient.joinRoom(this.roomId);
+        })
+        .then((room) => {
+          this.$matrix.setCurrentRoomId(room.roomId);
+          this.loading = false;
+          this.loadingMessage = null;
+          this.$router.replace({ name: "Chat" });
+        })
+        .catch((err) => {
+          // TODO - handle error
+          console.log("Failed to join room", err);
+          this.loading = false;
+          this.loadingMessage = err.toString();
+        });
     },
   },
 };

src/components/messages/MessageIncomingImage.vue

@@ -4,6 +4,7 @@
       <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
+        <QuickReactions :event="event" :reactions="reactions" />
       </div>
       <v-avatar class="avatar" size="40" color="grey">
         <img

src/components/messages/MessageIncomingText.vue

@@ -14,6 +14,7 @@
 
       <div class="bubble">
         <div class="message">{{ event.getContent().body }}</div>
+        <QuickReactions :event="event" :reactions="reactions" />
       </div>
     </div>
     <div class="time">

src/components/messages/MessageOperations.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="{'messageOperations':true,'incoming':incoming,'outgoing':!incoming}">
+    <v-btn icon @click="addReaction" class="ma-0 pa-0">
+      <v-icon>mood</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+
+  props: {
+    incoming: {
+      type: Boolean,
+      default: function () {
+        return true
+      }
+    },
+    event: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+  },
+
+  methods: {
+    addReaction() {
+      this.$emit("addreaction", {event:this.event});
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/MessageOutgoingImage.vue

@@ -4,6 +4,7 @@
       <div class="sender">{{ "You" }}</div>
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
+        <QuickReactions :event="event" :reactions="reactions" />
       </div>
       <div class="status">{{ event.status }}</div>
     </div>

src/components/messages/MessageOutgoingText.vue

@@ -4,6 +4,7 @@
       <div class="sender">{{ "You" }}</div>
       <div class="bubble">
         <div class="message">{{ event.getContent().body }}</div>
+        <QuickReactions :event="event" :reactions="reactions" />
       </div>
       <div class="status">{{ event.status }}</div>
     </div>
@@ -20,7 +21,6 @@ export default {
   mixins: [messageMixin],
 };
 </script>
-
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 </style>

src/components/messages/QuickReactions.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="quick-reaction-container">
+    <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)">
+      {{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    event: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    reactions: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      reactionMap: {}
+    }
+  },
+  beforeDestroy() {
+    if (this.reactions) {
+      this.reactions.off('Relations.add', this.onAddRelation);
+    }
+  },
+  methods: {
+    onClickEmoji(emoji) {
+      this.$bubble('send-quick-reaction', {reaction:emoji, event:this.event});
+    },
+    onAddRelation(ignoredevent) {
+      this.processReactions();
+    },
+    processReactions() {
+        var reactionMap = {};
+      if (this.reactions && this.reactions._eventsCount > 0) {
+        const relations = this.reactions.getRelations();
+        for (const r of relations) {
+          const emoji = r.getRelation().key;
+          const sender = r.getSender();
+          if (reactionMap[emoji]) {
+            const array = reactionMap[emoji];
+            if (!array.includes(sender)) {
+              array.push(sender)
+            }
+          } else {
+            reactionMap[emoji] = [sender];
+          }
+        }
+      }
+      this.reactionMap = reactionMap;
+    }
+  },
+  watch: {
+     reactions: {
+       handler(newValue, oldValue) {
+         if (oldValue) {
+           oldValue.off('Relations.add', this.onAddRelation);
+         }
+         if (newValue) {
+          newValue.on('Relations.add', this.onAddRelation);           
+         }
+         this.processReactions();
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/messageMixin.js

@@ -1,4 +1,9 @@
+import QuickReactions from './QuickReactions.vue';
+
 export default {
+  components: {
+    QuickReactions
+  },
   props: {
     room: {
       type: Object,
@@ -12,6 +17,12 @@ export default {
         return {}
       }
     },
+    reactions: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    }
   },
   computed: {
   },
@@ -20,6 +31,9 @@ export default {
      * Get a display name given an event.
      */
     stateEventDisplayName(event) {
+      if (event.getSender() == this.$matrix.currentUserId) {
+        return "You";
+      }
       if (this.room) {
         const member = this.room.getMember(event.getSender());
         if (member) {
@@ -64,5 +78,5 @@ export default {
       }
       return date.toLocaleString();
     },
-  }
+  },
 }