From 5962c8aedc2992b88d657cc2238611d3e9f71ee6 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 25 Jun 2023 17:12:29 +0300
Subject: [PATCH 1/2] Show member list of seenby

---
 src/assets/css/chat.scss                    |  1 -
 src/assets/translations/en.json             |  3 +-
 src/components/BottomSheet.vue              |  2 +-
 src/components/SeenByListBottomSheet.vue    | 50 +++++++++++++
 src/components/messages/MessageIncoming.vue |  2 +-
 src/components/messages/MessageOutgoing.vue |  2 +-
 src/components/messages/SeenBy.vue          | 77 ++++++++++++++++-----
 src/components/messages/messageMixin.js     | 19 +----
 src/plugins/utils.js                        | 28 ++++++--
 9 files changed, 141 insertions(+), 43 deletions(-)
 create mode 100644 src/components/SeenByListBottomSheet.vue

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index d878270..393fdbe 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -208,7 +208,6 @@ body {
     @media #{map-get($display-breakpoints, 'sm-and-down')} {
       margin-top: 72px;
       margin-bottom: 70px;
-      z-index: 9;
     }
   }
 
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 190277d..f1cd205 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -96,7 +96,8 @@
     "incoming_message_deleted_text": "This message was deleted.",
     "not_allowed_to_send": "Only admins and moderators are allowed to send to the room",
     "reaction_count_more": "{reactionCount} more",
-    "seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members",
+    "seen_by_count": "Seen by no members | Seen by 1 member | Seen by {count} members",
+    "seen_by": "Seen by",
     "file": "File",
     "files": "Files",
     "images": "Images",
diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index aa43dba..ecdb989 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -182,7 +182,7 @@ export default {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: hidden;
-  z-index: 10;
+  z-index: 20;
 }
 
 .bottom-sheet-bg {
diff --git a/src/components/SeenByListBottomSheet.vue b/src/components/SeenByListBottomSheet.vue
new file mode 100644
index 0000000..c376e34
--- /dev/null
+++ b/src/components/SeenByListBottomSheet.vue
@@ -0,0 +1,50 @@
+<template>
+  <BottomSheet
+    class="room-info-bottom-sheet"
+    :halfY="0.12"
+    ref="sheet"
+    :showCloseButton="false"
+  >
+    <div class="room-info-sheet" ref="roomInfoSheetContent">
+      <room-list v-on:close="close" v-on:newroom="createRoom" :showCreate="true" />
+    </div>
+  </BottomSheet>
+</template>
+
+<script>
+import BottomSheet from "./BottomSheet";
+import RoomList from "./RoomList";
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "RoomInfoBottomSheet",
+  mixins: [roomInfoMixin],
+  components: {
+    BottomSheet,
+    RoomList,
+  },
+  methods: {
+    open() {
+      this.$refs.sheet.open();
+    },
+
+    close() {
+      this.$refs.sheet.close();
+    },
+
+    showDetails() {
+      this.close();
+      this.$navigation.push({ name: "RoomInfo" });
+    },
+
+    createRoom() {
+      this.close();
+      this.$navigation.push({ name: "CreateRoom" });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>
diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
index 2f34c50..236c3de 100644
--- a/src/components/messages/MessageIncoming.vue
+++ b/src/components/messages/MessageIncoming.vue
@@ -4,7 +4,7 @@
     <div v-if="showSenderAndTime" class="senderAndTime">
       <div class="sender">{{ eventSenderDisplayName(event) }}</div>
       <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
+        {{ utils.formatTime(event.event.origin_server_ts) }}
       </div>
     </div>
     <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
index 644641d..2f4fee1 100644
--- a/src/components/messages/MessageOutgoing.vue
+++ b/src/components/messages/MessageOutgoing.vue
@@ -3,7 +3,7 @@
   <div class="messageOut">
     <div class="senderAndTime">
       <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
+        {{ utils.formatTime(event.event.origin_server_ts) }}
       </div>
       <div class="status">{{ event.status }}</div>
     </div>
diff --git a/src/components/messages/SeenBy.vue b/src/components/messages/SeenBy.vue
index 9069e7f..70480a1 100644
--- a/src/components/messages/SeenBy.vue
+++ b/src/components/messages/SeenBy.vue
@@ -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: {
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 7fde69e..1e93cf5 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -1,6 +1,8 @@
 import QuickReactions from "./QuickReactions.vue";
 import * as linkify from 'linkifyjs';
 import linkifyHtml from 'linkify-html';
+import utils from "../../plugins/utils"
+
 linkify.options.defaults.className = "link";
 linkify.options.defaults.target = { url: "_blank" };
 
@@ -39,6 +41,7 @@ export default {
       event: {},
       inReplyToEvent: null,
       inReplyToSender: null,
+      utils
     };
   },
   mounted() {
@@ -231,22 +234,6 @@ export default {
       return false;
     },
 
-    formatTime(time) {
-      const date = new Date();
-      date.setTime(time);
-
-      const today = new Date();
-      if (
-        date.getDate() == today.getDate() &&
-        date.getMonth() == today.getMonth() &&
-        date.getFullYear() == today.getFullYear()
-      ) {
-        // For today, skip the date part
-        return date.toLocaleTimeString();
-      }
-      return date.toLocaleString();
-    },
-
     formatTimeAgo(time) {
       const date = new Date();
       date.setTime(time);
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 05dbbff..d7ed570 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -67,7 +67,7 @@ class Util {
           }
         });
       }
-      
+
     getAttachment(matrixClient, event, progressCallback, asBlob = false, abortController = undefined) {
         return new Promise((resolve, reject) => {
             const content = event.getContent();
@@ -317,7 +317,7 @@ class Util {
                                             // Find the exact match (= object equality)
                                             return e.error === err
                                         });
-                                    }                                   
+                                    }
                                 }
                                 matrixClient.resendEvent(event, matrixClient.getRoom(event.getRoomId()))
                                     .then((result) => {
@@ -353,7 +353,7 @@ class Util {
                     mimetype: file.type,
                     size: file.size
                 };
-                
+
                 // If audio, send duration in ms as well
                 if (file.duration) {
                     info.duration = file.duration;
@@ -463,11 +463,11 @@ class Util {
 
     /**
      * Return 'true' if we should use voice mode for the given room.
-     * 
+     *
      * The default value is given by the room itself. If the "type" of the
      * room is set to 'im.keanu.room_type_voice' then we default to voice mode,
      * else not. The user can then override this default by flipping the "voice mode"
-     * swicth on room settings (it will be persisted as a user specific tag on the room) 
+     * swicth on room settings (it will be persisted as a user specific tag on the room)
      */
     useVoiceMode(roomOrNull) {
         if (roomOrNull) {
@@ -478,7 +478,7 @@ class Util {
             if (tags && tags["ui_options"]) {
               return tags["ui_options"]["voice_mode"] === 1;
             }
-  
+
             // Was the room created with a voice mode type?
             const createEvent = room.currentState.getStateEvents(
               "m.room.create",
@@ -779,6 +779,22 @@ class Util {
         return then.format('L');
     }
 
+    formatTime(time) {
+        const date = new Date();
+        date.setTime(time);
+
+        const today = new Date();
+        if (
+            date.getDate() == today.getDate() &&
+            date.getMonth() == today.getMonth() &&
+            date.getFullYear() == today.getFullYear()
+        ) {
+            // For today, skip the date part
+            return date.toLocaleTimeString();
+        }
+        return date.toLocaleString();
+    }
+
     formatRecordDuration(ms) {
         return dayjs.duration(ms).format("HH:mm:ss");
     }

From 43ada38268abb683bbb11cc9f025a5ef0cae2e37 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 25 Jun 2023 17:24:06 +0300
Subject: [PATCH 2/2] cleanup

---
 src/components/SeenByListBottomSheet.vue | 50 ------------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 src/components/SeenByListBottomSheet.vue

diff --git a/src/components/SeenByListBottomSheet.vue b/src/components/SeenByListBottomSheet.vue
deleted file mode 100644
index c376e34..0000000
--- a/src/components/SeenByListBottomSheet.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <BottomSheet
-    class="room-info-bottom-sheet"
-    :halfY="0.12"
-    ref="sheet"
-    :showCloseButton="false"
-  >
-    <div class="room-info-sheet" ref="roomInfoSheetContent">
-      <room-list v-on:close="close" v-on:newroom="createRoom" :showCreate="true" />
-    </div>
-  </BottomSheet>
-</template>
-
-<script>
-import BottomSheet from "./BottomSheet";
-import RoomList from "./RoomList";
-import roomInfoMixin from "./roomInfoMixin";
-
-export default {
-  name: "RoomInfoBottomSheet",
-  mixins: [roomInfoMixin],
-  components: {
-    BottomSheet,
-    RoomList,
-  },
-  methods: {
-    open() {
-      this.$refs.sheet.open();
-    },
-
-    close() {
-      this.$refs.sheet.close();
-    },
-
-    showDetails() {
-      this.close();
-      this.$navigation.push({ name: "RoomInfo" });
-    },
-
-    createRoom() {
-      this.close();
-      this.$navigation.push({ name: "CreateRoom" });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-@import "@/assets/css/chat.scss";
-</style>