Improve read marker

Fix login from sidebar (issue #31), initial message sending (issue #30), remove "open keanu app" (issue #29).

src/components/Chat.vue

@@ -282,8 +282,8 @@ export default {
       /** A timer for read receipts. */
       rrTimer: null,
 
-      /** Timestamp of last send Read Receipt */
-      lastRRTimestamp: null,
+      /** Last event we sent a Read Receipt/Read Marker for */
+      lastRR: null,
     };
   },
 
@@ -295,6 +295,10 @@ export default {
     this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
   },
 
+  beforeDestroy() {
+    this.stopRRTimer();
+  },
+
   destroyed() {
     this.$matrix.off("Room.timeline", this.onEvent);
     this.$matrix.off("RoomMember.typing", this.onUserTyping);
@@ -308,9 +312,16 @@ export default {
       return this.$matrix.currentRoom;
     },
     roomId() {
+      if (this.room) {
+        return this.room.roomId;
+      }
       return this.$matrix.currentRoomId;
     },
     readMarker() {
+      if (this.lastRR) {
+        // If we have sent a RR, use that as read marker (so we don't have to wait for server round trip)
+        return this.lastRR.getId();
+      }
       return this.fullyReadMarker || this.room.getEventReadUpTo(this.$matrix.currentUserId, false);
     },
     fullyReadMarker() {
@@ -370,6 +381,10 @@ export default {
         this.typingMembers = [];
         this.initialLoadDone = false;
 
+        // Stop RR timer
+        this.stopRRTimer();
+        this.lastRR = null;
+
         if (!room) {
           // Public room?
           if (this.roomId && this.roomId.startsWith('#')) {
@@ -552,6 +567,9 @@ export default {
     },
     onScroll(ignoredevent) {
       const container = this.$refs.chatContainer;
+      if (!container) {
+        return;
+      }
       if (container.scrollTop == 0) {
         // Scrolled to top
         this.handleScrolledToTop();
@@ -855,14 +873,19 @@ export default {
       }
     },
 
-    /**
-    * Start/restart the timer to Read Receipts.
-    */
-    restartRRTimer() {
+    /** Stop Read Receipt timer */
+    stopRRTimer() {
       if (this.rrTimer) {
         clearInterval(this.rrTimer);
         this.rrTimer = null;
       }
+    },
+    
+    /**
+    * Start/restart the timer to Read Receipts.
+    */
+    restartRRTimer() {
+      this.stopRRTimer();
       this.rrTimer = setInterval(this.rrTimerElapsed, READ_RECEIPT_TIMEOUT);
     },
 
@@ -873,7 +896,7 @@ export default {
         const eventId = el.getAttribute('eventId');
         if (eventId && this.room) {
           const event = this.room.findEventById(eventId);
-          if (event && event.getTs() > this.lastRRTimestamp) {
+          if (event && (!this.lastRR || event.getTs() > this.lastRR.getTs())) {
             
             // Disable timer while we are sending
             clearInterval(this.rrTimer);
@@ -886,7 +909,7 @@ export default {
             })
             .then(() => {
               console.log("RR sent for event: " + eventId);
-              this.lastRRTimestamp = event.getTs();
+              this.lastRR = event;             
             })
             .catch(err => {
               console.log("Failed to update read marker: ", err);

src/components/Join.vue

@@ -19,9 +19,9 @@
       </v-avatar>
       <div class="join-title">Welcome to {{ roomName }}</div>
       <div class="join-message">
-        Join the group chat in a web browser or with the Keanu app.
+        <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
-      <v-btn
+      <!--<v-btn
         class="btn-light"
         large
         block
@@ -30,7 +30,7 @@
         >Open Keanu app</v-btn
       >
 
-      <div class="join-or-divider">OR</div>
+      <div class="join-or-divider">OR</div> -->
 
       <v-btn
         class="btn-dark"