butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Show member list of seenby

Browse source
This commit is contained in:
10G Meow 2023-06-25 17:12:29 +03:00
parent 37c254f8e1
commit 5962c8aedc
9 changed files with 141 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/components/messages/SeenBy.vue
View file

@ -1,27 +1,57 @@
<template>
<div class="seen-by-container">
<v-tooltip top open-delay="500" v-if="seenBy.length > 0">
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" class="clickable">
<div class="more" v-if="seenBy.length > 0">{{ moreItems }}</div>
<transition-group name="list" tag="div" v-if="seenBy.length > 0">
<v-avatar v-for="(member, index) in seenBy" :key="member.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<div>
<div class="seen-by-container">
<v-tooltip top open-delay="500" v-if="seenBy.length > 0">
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" class="clickable">
<div class="more" v-if="seenBy.length > 0">{{ moreItems }}</div>
<transition-group name="list" tag="div" v-if="seenBy.length > 0">
<v-avatar v-for="(member, index) in seenBy" :key="member.roomMember.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT" @click="open">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</transition-group>
</div>
</template>
<span>{{ $tc("message.seen_by_count", seenBy.length) }}</span>
</v-tooltip>
</div>
<BottomSheet
:halfY="0.12"
ref="seenByListBottomSheet"
>
<v-list>
<v-subheader class="text-uppercase"> {{ $tc("message.seen_by") }}</v-subheader>
<v-list-item v-for="(member, index) in seenBy" :key="index">
<v-list-item-icon>
<v-avatar size="40" color="grey">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</transition-group>
</div>
</template>
<span>{{ $tc("message.seen_by", seenBy.length) }}</span>
</v-tooltip>
</v-list-item-icon>
<v-list-item-content class="text-left">
<v-list-item-title>{{member.roomMember.name}}</v-list-item-title>
<v-list-item-subtitle>{{ seenByTimeStamp(member.readTimestamp) }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</BottomSheet>
</div>
</template>
<script>
import BottomSheet from "../BottomSheet.vue"
import utils from "../../plugins/utils.js";
export default {
components: {
BottomSheet
},
props: {
room: {
type: Object,
@ -40,6 +70,7 @@ export default {
return {
seenBy: [],
SHOW_LIMIT: 5,
utils
}
},
mounted() {
@ -62,6 +93,17 @@ export default {
}
},
methods: {
seenByTimeStamp(timestamp) {
let dayDiff = utils.dayDiffToday(timestamp);
if (dayDiff < 3) {
return this.$tc("message.time_ago", dayDiff) + ' '+utils.formatTime(timestamp);
} else {
return utils.formatTime(timestamp);
}
},
open() {
this.$refs.seenByListBottomSheet.open();
},
onReceipt(ignoredevent) {
this.update();
},
@ -80,7 +122,10 @@ export default {
update() {
this.seenBy = ((this.room && this.event) ? this.room.getReceiptsForEvent(this.event) : [])
.filter(receipt => receipt.type == 'm.read' && receipt.userId !== this.$matrix.currentUserId)
.map(receipt => this.room.getMember(receipt.userId));
.map(receipt => {
return { readTimestamp: receipt.data.ts, roomMember: this.room.getMember(receipt.userId) }
}
);
},
},
watch: {