From 6d2882f6e70bc1c8794e0193a574dfe254b57d79 Mon Sep 17 00:00:00 2001
From: Pepijn <pepijnfens@gmail.com>
Date: Thu, 17 Nov 2016 19:46:07 +0100
Subject: =?UTF-8?q?Don't=20show=20desktop=20notifications=20for=20messages?=
 =?UTF-8?q?=20entering=20the=20channel=20th=E2=80=A6=20(#4216)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Don't show desktop notifications for messages entering the channel the user is currently on

Coding style fixes

Allow notifications if browser tab is not focussed

* Don't show desktop notifications for messages entering the channel the user is currently on

Coding style fixes

Allow notifications if browser tab is not focussed

* Mute sound when a user doesn't get a desktop notification

* Also play sound on desktop notifications

* Fixed reviewer's remarks:
 * Removed double notification check
 * Removed direct links to browser store, created separate actions
---
 webapp/actions/global_actions.jsx    |  7 +++++++
 webapp/components/logged_in.jsx      | 16 ++++++++++++++++
 webapp/stores/notification_store.jsx | 22 +++++++++++++++++++---
 webapp/utils/constants.jsx           |  4 +++-
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx
index a70462295..9337595af 100644
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -535,3 +535,10 @@ export function toggleSideBarAction(visible) {
         });
     }
 }
+
+export function emitBrowserFocus(focus) {
+    AppDispatcher.handleViewAction({
+        type: ActionTypes.BROWSER_CHANGE_FOCUS,
+        focus
+    });
+}
diff --git a/webapp/components/logged_in.jsx b/webapp/components/logged_in.jsx
index ec4ca2a6a..841061d48 100644
--- a/webapp/components/logged_in.jsx
+++ b/webapp/components/logged_in.jsx
@@ -109,6 +109,10 @@ export default class LoggedIn extends React.Component {
         // Listen for user
         UserStore.addChangeListener(this.onUserChanged);
 
+        // Listen for focussed tab/window state
+        window.addEventListener('focus', this.onFocusListener);
+        window.addEventListener('blur', this.onBlurListener);
+
         // ???
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
@@ -166,6 +170,10 @@ export default class LoggedIn extends React.Component {
         $('.modal').off('show.bs.modal');
 
         $(window).off('keydown.preventBackspace');
+
+        // Listen for focussed tab/window state
+        window.removeEventListener('focus', this.onFocusListener);
+        window.removeEventListener('blur', this.onBlurListener);
     }
 
     render() {
@@ -177,6 +185,14 @@ export default class LoggedIn extends React.Component {
             user: this.state.user
         });
     }
+
+    onFocusListener() {
+        GlobalActions.emitBrowserFocus(true);
+    }
+
+    onBlurListener() {
+        GlobalActions.emitBrowserFocus(false);
+    }
 }
 
 LoggedIn.propTypes = {
diff --git a/webapp/stores/notification_store.jsx b/webapp/stores/notification_store.jsx
index dc707b50e..d5e8acb4d 100644
--- a/webapp/stores/notification_store.jsx
+++ b/webapp/stores/notification_store.jsx
@@ -26,6 +26,9 @@ class NotificationStoreClass extends EventEmitter {
     removeChangeListener(callback) {
         this.removeListener(CHANGE_EVENT, callback);
     }
+    setFocus(focus) {
+        this.inFocus = focus;
+    }
 
     handleRecievedPost(post, msgProps) {
         // Send desktop notification
@@ -98,11 +101,21 @@ class NotificationStoreClass extends EventEmitter {
                 duration = parseInt(user.notify_props.desktop_duration, 10) * 1000;
             }
 
+            //Play a sound if explicitly set in settings
             const sound = !user.notify_props || user.notify_props.desktop_sound === 'true';
-            Utils.notifyMe(title, body, channel, teamId, duration, !sound);
 
-            if (sound && !UserAgent.isWindowsApp() && !UserAgent.isMacApp()) {
-                Utils.ding();
+            // Notify if you're not looking in the right channel or when
+            // the window itself is not active
+            const activeChannel = ChannelStore.getCurrent();
+            const notify = activeChannel.id !== channel.id || !this.inFocus;
+
+            if (notify) {
+                Utils.notifyMe(title, body, channel, teamId, duration, !sound);
+
+                //Don't add extra sounds on native desktop clients
+                if (sound && !UserAgent.isWindowsApp() && !UserAgent.isMacApp() && !UserAgent.isMobileApp()) {
+                    Utils.ding();
+                }
             }
         }
     }
@@ -118,6 +131,9 @@ NotificationStore.dispatchToken = AppDispatcher.register((payload) => {
         NotificationStore.handleRecievedPost(action.post, action.websocketMessageProps);
         NotificationStore.emitChange();
         break;
+    case ActionTypes.BROWSER_CHANGE_FOCUS:
+        NotificationStore.setFocus(action.focus);
+        break;
     }
 });
 
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 611f8ccd0..a90c4c502 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -156,7 +156,9 @@ export const ActionTypes = keyMirror({
     SUGGESTION_CLEAR_SUGGESTIONS: null,
     SUGGESTION_COMPLETE_WORD: null,
     SUGGESTION_SELECT_NEXT: null,
-    SUGGESTION_SELECT_PREVIOUS: null
+    SUGGESTION_SELECT_PREVIOUS: null,
+
+    BROWSER_CHANGE_FOCUS: null
 });
 
 export const WebrtcActionTypes = keyMirror({
-- 
cgit v1.2.3-1-g7c22