Don't show desktop notifications for messages entering the channel th… (#4216)

* 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/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 = {