Lots of channel related fixes and updates

src/components/messages/channel/MessageOperationsChannel.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
+    <v-btn id="btn-pin" icon @click.stop="pin" class="ma-0 pa-0" v-if="userCanPin && !event.isPinned">
+      <v-icon small>$vuetify.icons.ic_pin_filled</v-icon>
+    </v-btn>
+    <v-btn id="btn-unpin" icon @click.stop="unpin" class="ma-0 pa-0" v-if="userCanPin && event.isPinned">
+      <v-icon small>$vuetify.icons.ic_pin</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import messageMixin from "../messageMixin";
+import messageOperationsMixin from "../messageOperationsMixin";
+
+export default {
+  mixins: [messageMixin, messageOperationsMixin],
+  data() {
+    return {}
+  },
+  props: {
+    userCanPin: {
+      type: Boolean,
+      default: function () {
+        return false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/channel/QuickReactionsChannel.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="quick-reaction-container">
+    <div
+      class="emoji"
+      v-for="(value, name) in reactionMap"
+      :key="name"
+      v-show="name == '❤️'"
+    >
+      <v-tooltip top v-if="value.includes($matrix.currentUserId)">
+        <template v-slot:activator="{ on, attrs }">
+          <v-icon class="ma-1 ml-0 clickable" v-bind="attrs" v-on="on" @click="onClickEmoji(name)">$vuetify.icons.ic_like_filled</v-icon>
+        </template>
+        <span>{{ $t("global.click_to_remove") }}</span>
+      </v-tooltip>
+      <v-icon v-else class="ma-1 ml-0 clickable" @click="onClickEmoji(name)">$vuetify.icons.ic_like</v-icon> {{ value.length }}
+    </div>
+  </div>
+</template>
+
+<script>
+import messageOperationsMixin from "../messageOperationsMixin";
+
+export default {
+  mixins: [messageOperationsMixin],
+  props: {
+    event: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+        timelineSet: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    },
+  },
+  data() {
+    return {
+      reactionMap: {"❤️": []},
+      reactions: null,
+      REACTION_LIMIT: 5,
+      showAllReaction: false
+    }
+  },
+  mounted() {
+    this.reactions = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    this.event.on("Event.relationsCreated", this.onRelationsCreated);
+  },
+  beforeDestroy() {
+    this.event.off("Event.relationsCreated", this.onRelationsCreated);
+    if (this.reactions) {
+      this.reactions.off('Relations.add', this.onAddRelation);
+    }
+  },
+  computed: {
+    totalReaction() {
+      return Object.keys(this.reactionMap).length
+    },
+    otherReactionText() {
+      return this.showAllReaction ? this.$t("global.show_less") : this.$t("message.reaction_count_more", { reactionCount: this.totalReaction - this.REACTION_LIMIT })
+    }
+  },
+  methods: {
+    onRelationsCreated() {
+      this.reactions = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    },
+    onClickEmoji(emoji) {
+      this.$bubble('send-quick-reaction', {reaction:emoji, event:this.event});
+    },
+    onAddRelation(ignoredevent) {
+      this.processReactions();
+    },
+    onRemoveRelation(ignoredevent) {
+      this.processReactions();
+    },
+    onRedactRelation(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 (r.isRedacted()) {
+              delete array[sender];
+            }
+            if (!array.includes(sender)) {
+              array.push(sender)
+            }
+          } else if (!r.isRedacted()) {
+            reactionMap[emoji] = [sender];
+          }
+        }
+      }
+      this.reactionMap = reactionMap;
+    }
+  },
+  watch: {
+     reactions: {
+       handler(newValue, oldValue) {
+         if (oldValue) {
+           oldValue.off('Relations.add', this.onAddRelation);
+           oldValue.off('Relations.remove', this.onRemoveRelation);
+           oldValue.off('Relations.redaction', this.onRedactRelation);
+         }
+         if (newValue) {
+          newValue.on('Relations.add', this.onAddRelation);
+          newValue.on('Relations.remove', this.onRemoveRelation);
+          newValue.on('Relations.redaction', this.onRedactRelation);
+         }
+         this.processReactions();
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>