90 lines
No EOL
2.4 KiB
Vue
90 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<div class="quick-reaction-container" v-show="reactions">
|
|
<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 {}
|
|
}
|
|
},
|
|
timelineSet: {
|
|
type: Object,
|
|
default: function () {
|
|
return null
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
reactionMap: {},
|
|
reactions: null
|
|
}
|
|
},
|
|
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);
|
|
}
|
|
},
|
|
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();
|
|
},
|
|
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> |