Merge pull request #3450 from matrix-org/matthew/read-marker-timings

make the lifetimes of the RM configurable

src/components/structures/TimelinePanel.js

@@ -42,8 +42,6 @@ import EditorStateTransfer from '../../utils/EditorStateTransfer';
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
-const READ_MARKER_INVIEW_THRESHOLD_MS = 1 * 1000;
-const READ_MARKER_OUTOFVIEW_THRESHOLD_MS = 30 * 1000;
 const READ_RECEIPT_INTERVAL_MS = 500;
 
 const DEBUG = false;
@@ -191,6 +189,12 @@ const TimelinePanel = createReactClass({
 
             // always show timestamps on event tiles?
             alwaysShowTimestamps: SettingsStore.getValue("alwaysShowTimestamps"),
+
+            // how long to show the RM for when it's visible in the window
+            readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"),
+
+            // how long to show the RM for when it's scrolled off-screen
+            readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"),
         };
     },
 
@@ -593,8 +597,8 @@ const TimelinePanel = createReactClass({
 
     _readMarkerTimeout(readMarkerPosition) {
         return readMarkerPosition === 0 ?
-            READ_MARKER_INVIEW_THRESHOLD_MS :
+            this.state.readMarkerInViewThresholdMs :
-            READ_MARKER_OUTOFVIEW_THRESHOLD_MS;
+            this.state.readMarkerOutOfViewThresholdMs;
     },
 
     updateReadMarkerOnUserActivity: async function() {

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -69,7 +69,12 @@ export default class PreferencesUserSettingsTab extends React.Component {
             alwaysShowMenuBarSupported: false,
             minimizeToTray: true,
             minimizeToTraySupported: false,
-            autocompleteDelay: SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
+            autocompleteDelay:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
+            readMarkerInViewThresholdMs:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'readMarkerInViewThresholdMs').toString(10),
+            readMarkerOutOfViewThresholdMs:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'readMarkerOutOfViewThresholdMs').toString(10),
         };
     }
 
@@ -124,6 +129,16 @@ export default class PreferencesUserSettingsTab extends React.Component {
         SettingsStore.setValue("autocompleteDelay", null, SettingLevel.DEVICE, e.target.value);
     };
 
+    _onReadMarkerInViewThresholdMs = (e) => {
+        this.setState({readMarkerInViewThresholdMs: e.target.value});
+        SettingsStore.setValue("readMarkerInViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
+    };
+
+    _onReadMarkerOutOfViewThresholdMs = (e) => {
+        this.setState({readMarkerOutOfViewThresholdMs: e.target.value});
+        SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
+    };
+
     _renderGroup(settingIds) {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
         return settingIds.map(i => <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />);
@@ -178,6 +193,18 @@ export default class PreferencesUserSettingsTab extends React.Component {
                         type='number'
                         value={this.state.autocompleteDelay}
                         onChange={this._onAutocompleteDelayChange} />
+                    <Field
+                        id={"readMarkerInViewThresholdMs"}
+                        label={_t('Read Marker lifetime (ms)')}
+                        type='number'
+                        value={this.state.readMarkerInViewThresholdMs}
+                        onChange={this._onReadMarkerInViewThresholdMs} />
+                    <Field
+                        id={"readMarkerOutOfViewThresholdMs"}
+                        label={_t('Read Marker off-screen lifetime (ms)')}
+                        type='number'
+                        value={this.state.readMarkerOutOfViewThresholdMs}
+                        onChange={this._onReadMarkerOutOfViewThresholdMs} />
                 </div>
             </div>
         );

src/i18n/strings/en_EN.json

@@ -636,6 +636,8 @@
     "Timeline": "Timeline",
     "Room list": "Room list",
     "Autocomplete delay (ms)": "Autocomplete delay (ms)",
+    "Read Marker lifetime (ms)": "Read Marker lifetime (ms)",
+    "Read Marker off-screen lifetime (ms)": "Read Marker off-screen lifetime (ms)",
     "Unignore": "Unignore",
     "<not supported>": "<not supported>",
     "Import E2E room keys": "Import E2E room keys",

src/settings/Settings.js

@@ -284,6 +284,14 @@ export const SETTINGS = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         default: 200,
     },
+    "readMarkerInViewThresholdMs": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
+        default: 3000,
+    },
+    "readMarkerOutOfViewThresholdMs": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
+        default: 30000,
+    },
     "blacklistUnverifiedDevices": {
         // We specifically want to have room-device > device so that users may set a device default
         // with a per-room override.