Merge pull request #4047 from matrix-org/t3chguy/hide_typing_notifs

Add setting to allow hiding of typing indicator

src/components/structures/MessagePanel.js

@@ -115,6 +115,7 @@ export default class MessagePanel extends React.Component {
             // previous positions the read marker has been in, so we can
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -164,6 +165,9 @@ export default class MessagePanel extends React.Component {
         this._readMarkerNode = createRef();
         this._whoIsTyping = createRef();
         this._scrollPanel = createRef();
+
+        this._showTypingNotificationsWatcherRef =
+            SettingsStore.watchSetting("showTypingNotifications", this.onShowTypingNotificationsChange);
     }
 
     componentDidMount() {
@@ -172,6 +176,7 @@ export default class MessagePanel extends React.Component {
 
     componentWillUnmount() {
         this._isMounted = false;
+        SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -184,6 +189,12 @@ export default class MessagePanel extends React.Component {
         }
     }
 
+    onShowTypingNotificationsChange = () => {
+        this.setState({
+            showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
+        });
+    };
+
     /* get the DOM node representing the given event */
     getNodeForEventId(eventId) {
         if (!this.eventNodes) {
@@ -921,7 +932,7 @@ export default class MessagePanel extends React.Component {
         );
 
         let whoIsTyping;
-        if (this.props.room && !this.props.tileShape) {
+        if (this.props.room && !this.props.tileShape && this.state.showTypingNotifications) {
             whoIsTyping = (<WhoIsTypingTile
                 room={this.props.room}
                 onShown={this._onTypingShown}

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

@@ -32,6 +32,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
     ];
 
     static TIMELINE_SETTINGS = [
+        'showTypingNotifications',
         'autoplayGifsAndVideos',
         'urlPreviewsEnabled',
         'TextualBody.enableBigEmoji',

src/i18n/strings/en_EN.json

@@ -397,6 +397,7 @@
     "Show avatars in user and room mentions": "Show avatars in user and room mentions",
     "Enable big emoji in chat": "Enable big emoji in chat",
     "Send typing notifications": "Send typing notifications",
+    "Show typing notifications": "Show typing notifications",
     "Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
     "Mirror local video feed": "Mirror local video feed",
     "Enable Community Filter Panel": "Enable Community Filter Panel",

src/settings/Settings.js

@@ -263,6 +263,11 @@ export const SETTINGS = {
         default: true,
         invertedSettingName: 'dontSendTypingNotifications',
     },
+    "showTypingNotifications": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Show typing notifications"),
+        default: true,
+    },
     "MessageComposerInput.autoReplaceEmoji": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Automatically replace plain text Emoji'),