Improve jump to unread button (#396)

* Improve jump to unread button

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Remove unused cod

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fix mark as read not hidding jump to unread btn

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Add notification mark as read action

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Add esc as hotkey to mark room as read

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Add message icons

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Change jump to unread icon

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/client/action/notifications.js

@@ -0,0 +1,26 @@
+import initMatrix from '../initMatrix';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function markAsRead(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  if (!room) return;
+  initMatrix.notifications.deleteNoti(roomId);
+
+  const timeline = room.getLiveTimeline().getEvents();
+  const readEventId = room.getEventReadUpTo(mx.getUserId());
+
+  const getLatestValidEvent = () => {
+    for (let i = timeline.length - 1; i >= 0; i -= 1) {
+      const latestEvent = timeline[i];
+      if (latestEvent.getId() === readEventId) return null;
+      if (!latestEvent.isSending()) return latestEvent;
+    }
+    return null;
+  };
+  if (timeline.length === 0) return;
+  const latestEvent = getLatestValidEvent();
+  if (latestEvent === null) return;
+
+  await mx.sendReadReceipt(latestEvent);
+}

src/client/event/hotkeys.js

@@ -1,5 +1,6 @@
 import { openSearch, toggleRoomSettings } from '../action/navigation';
 import navigation from '../state/navigation';
+import { markAsRead } from '../action/notifications';
 
 function listenKeyboard(event) {
   // Ctrl/Cmd +
@@ -18,11 +19,19 @@ function listenKeyboard(event) {
       return;
     }
 
-    // esc - close room settings panel
-    if (event.keyCode === 27 && navigation.isRoomSettings) {
-      toggleRoomSettings();
+    // esc
+    if (event.keyCode === 27) {
+      if (navigation.isRoomSettings) {
+        toggleRoomSettings();
+        return;
+      }
+      if (navigation.selectedRoomId) {
+        markAsRead(navigation.selectedRoomId);
+        return;
+      }
     }
 
+    // Don't allow these keys to type/focus message field
     if ((event.keyCode !== 8 && event.keyCode < 48)
       || (event.keyCode >= 91 && event.keyCode <= 93)
       || (event.keyCode >= 112 && event.keyCode <= 183)) {

src/client/state/RoomTimeline.js

@@ -77,7 +77,7 @@ function isTimelineLinked(tm1, tm2) {
 }
 
 class RoomTimeline extends EventEmitter {
-  constructor(roomId, notifications) {
+  constructor(roomId) {
     super();
     // These are local timelines
     this.timeline = [];
@@ -88,7 +88,6 @@ class RoomTimeline extends EventEmitter {
     this.matrixClient = initMatrix.matrixClient;
     this.roomId = roomId;
     this.room = this.matrixClient.getRoom(roomId);
-    this.notifications = notifications;
 
     this.liveTimeline = this.room.getLiveTimeline();
     this.activeTimeline = this.liveTimeline;
@@ -228,25 +227,6 @@ class RoomTimeline extends EventEmitter {
     return Promise.allSettled(decryptionPromises);
   }
 
-  markAllAsRead() {
-    const readEventId = this.getReadUpToEventId();
-    const getLatestValidEvent = () => {
-      for (let i = this.timeline.length - 1; i >= 0; i -= 1) {
-        const latestEvent = this.timeline[i];
-        if (latestEvent.getId() === readEventId) return null;
-        if (!latestEvent.isSending()) return latestEvent;
-      }
-      return null;
-    };
-    this.notifications.deleteNoti(this.roomId);
-    if (this.timeline.length === 0) return;
-    const latestEvent = getLatestValidEvent();
-    if (latestEvent === null) return;
-    if (readEventId === latestEvent.getId()) return;
-    this.matrixClient.sendReadReceipt(latestEvent);
-    this.emit(cons.events.roomTimeline.MARKED_AS_READ, latestEvent);
-  }
-
   hasEventInTimeline(eventId, timeline = this.activeTimeline) {
     const timelineSet = this.getUnfilteredTimelineSet();
     const eventTimeline = timelineSet.getTimelineForEvent(eventId);

src/client/state/cons.js

@@ -116,7 +116,6 @@ const cons = {
       PAGINATED: 'PAGINATED',
       TYPING_MEMBERS_UPDATED: 'TYPING_MEMBERS_UPDATED',
       LIVE_RECEIPT: 'LIVE_RECEIPT',
-      MARKED_AS_READ: 'MARKED_AS_READ',
       EVENT_REDACTED: 'EVENT_REDACTED',
       AT_BOTTOM: 'AT_BOTTOM',
       SCROLL_TO_LIVE: 'SCROLL_TO_LIVE',