Make the read-marker less annoying

We considered the user active if there had been a user_activity event within
the last 500ms, but those events were only raised every 500ms, so it was
possible that we would be considered inactive immediately. Use
UserActivity.userCurrentlyActive() instead, which fixes this.

Also increase CURRENTLY_ACTIVE_THRESHOLD_MS to 2 seconds.

src/UserActivity.js

@@ -17,7 +17,7 @@ limitations under the License.
 var dis = require("./dispatcher");
 
 var MIN_DISPATCH_INTERVAL_MS = 500;
-var CURRENTLY_ACTIVE_THRESHOLD_MS = 500;
+var CURRENTLY_ACTIVE_THRESHOLD_MS = 2000;
 
 /**
  * This class watches for user activity (moving the mouse or pressing a key)

src/components/structures/TimelinePanel.js

@@ -26,16 +26,12 @@ var MatrixClientPeg = require("../../MatrixClientPeg");
 var dis = require("../../dispatcher");
 var ObjectUtils = require('../../ObjectUtils');
 var Modal = require("../../Modal");
+var UserActivity = require("../../UserActivity");
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
 var TIMELINE_CAP = 500; // the most events to show in a timeline
 
-// consider that the user remains "active" for this many milliseconds after a
-// user_activity event (and thus don't make the read-marker visible on new
-// events)
-var CONSIDER_USER_ACTIVE_FOR_MS = 500;
-
 var DEBUG = false;
 
 if (DEBUG) {
@@ -114,7 +110,6 @@ var TimelinePanel = React.createClass({
         debuglog("TimelinePanel: mounting");
 
         this.last_rr_sent_event_id = undefined;
-        this._resetActivityTimer();
 
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
@@ -210,10 +205,6 @@ var TimelinePanel = React.createClass({
     onAction: function(payload) {
         switch (payload.action) {
             case 'user_activity':
-                this._resetActivityTimer();
-
-                // fall-through!
-
             case 'user_activity_end':
                 // we could treat user_activity_end differently and not
                 // send receipts for messages that have arrived between
@@ -226,10 +217,6 @@ var TimelinePanel = React.createClass({
         }
     },
 
-    _resetActivityTimer: function() {
-        this.user_last_active = Date.now();
-    },
-
     onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
         // ignore events for other rooms
         if (room !== this.props.room) return;
@@ -245,17 +232,13 @@ var TimelinePanel = React.createClass({
         // when a new event arrives when the user is not watching the window, but the
         // window is in its auto-scroll mode, make sure the read marker is visible.
         //
-        // We consider the user to be watching the window if they performed an action
-        // less than CONSIDER_USER_ACTIVE_FOR_MS ago.
-        //
         // We ignore events we have sent ourselves; we don't want to see the
         // read-marker when a remote echo of an event we have just sent takes
-        // more than CONSIDER_USER_ACTIVE_FOR_MS.
+        // more than the timeout on userCurrentlyActive.
         //
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var sender = ev.sender ? ev.sender.userId : null;
-        var activity_age = Date.now() - this.user_last_active;
+        if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
-        if (sender != myUserId && activity_age > CONSIDER_USER_ACTIVE_FOR_MS) {
             this.setState({readMarkerVisible: true});
         }