Use document focus instead of page visibility API (#644)

For marking messages as unread and for triggering notifications, use
`document.hasFocus()` instead of the page visibility API.

This means that messages are only marked as read if the browser is in
the foreground and focussed. Otherwise, a notification is triggered.

Refs #211 and #17.

public/libs/angular-inview/angular-inview.js

@@ -69,6 +69,11 @@ function inViewDirective ($parse) {
         viewportEventSignal = viewportEventSignal.merge(signalFromEvent(document, 'visibilitychange'));
       }
 
+      // Merged with the page focus/blur events
+      if (options.considerPageFocus) {
+        viewportEventSignal = viewportEventSignal.merge(signalFromEvent(window, 'focus blur'));
+      }
+
       // Merge with container's events signal
       if (container) {
         viewportEventSignal = viewportEventSignal.merge(container.eventsSignal);
@@ -100,8 +105,9 @@ function inViewDirective ($parse) {
         var elementRect = offsetRect(element[0].getBoundingClientRect(), options.offset);
         var isVisible = !!(element[0].offsetWidth || element[0].offsetHeight || element[0].getClientRects().length);
         var documentVisible = !options.considerPageVisibility || document.visibilityState === 'visible' || document.hidden === false;
+        var documentFocussed = !options.considerPageFocus || document.hasFocus();
         var info = {
-          inView: documentVisible && isVisible && intersectRect(elementRect, viewportRect),
+          inView: documentVisible && documentFocussed && isVisible && intersectRect(elementRect, viewportRect),
           event: event,
           element: element,
           elementRect: elementRect,

src/partials/messenger.conversation.html

@@ -61,7 +61,7 @@
             <li ng-repeat="message in ctrl.messages" id="message-{{message.id}}">
                 <eee-message eee-receiver="ctrl.receiver" eee-type="ctrl.type" eee-message="message"
                              in-view="$inview  && !ctrl.locked && ctrl.msgRead(message)"
-                             in-view-options="{ considerPageVisibility: true }"></eee-message>
+                             in-view-options="{ considerPageFocus: true }"></eee-message>
             </li>
             <li ng-if="ctrl.isTyping()" class="typing-indicator">
                 <!-- Non status messages -->

src/services/browser.ts

@@ -25,7 +25,6 @@ export class BrowserService {
     private browser: BrowserInfo;
     private $log: ng.ILogService;
     private $window: ng.IWindowService;
-    private isPageVisible = true;
     private supportsExtendedLocaleCompareCache: boolean;
 
     public static $inject = ['$log', '$window'];
@@ -33,59 +32,6 @@ export class BrowserService {
         // Angular services
         this.$log = $log;
         this.$window = $window;
-        this.initializePageVisibility();
-    }
-
-    private initializePageVisibility() {
-        const onChange = (isVisible: any) => {
-            if (this.isPageVisible !== isVisible) {
-                this.isPageVisible = isVisible;
-            }
-        };
-
-        let pageHiddenKey = 'hidden';
-
-        // add default visibility change listener
-        let defaultListener;
-        if (pageHiddenKey in document) {
-            defaultListener = 'visibilitychange';
-        } else if ('mozHidden' in document) {
-            pageHiddenKey = 'mozHidden';
-            defaultListener = 'mozvisibilitychange';
-        } else if ('webkitHidden' in document) {
-            pageHiddenKey = 'webkitHidden';
-            defaultListener = 'webkitvisibilitychange';
-        } else if ('msHidden' in document) {
-            pageHiddenKey = 'msHidden';
-            defaultListener = 'msvisibilitychange';
-        }
-
-        document.addEventListener(defaultListener, function() {
-            onChange(!this[pageHiddenKey]);
-        });
-
-        // configure other document and window events
-        const map = {
-            focus: true,
-            blur: false,
-        };
-
-        for (const event in map) {
-            if (map[event] !== undefined) {
-                document.addEventListener(event, () => {
-                    onChange(map[event]);
-                }, false);
-
-                window.addEventListener(event, () => {
-                    onChange(map[event]);
-                }, false);
-            }
-        }
-
-        // initial visible state set
-        if (document[pageHiddenKey] !== undefined ) {
-            onChange(!document[pageHiddenKey]);
-        }
     }
 
     public getBrowser(): BrowserInfo {
@@ -183,10 +129,6 @@ export class BrowserService {
         return this.browser;
     }
 
-    public isVisible() {
-        return this.isPageVisible;
-    }
-
     /**
      * Return whether the current browser supports the WebRTC task or not.
      */

src/services/webclient.ts

@@ -3212,7 +3212,7 @@ export class WebClientService {
         sender: threema.Receiver,
     ): void {
         // Ignore message from active receivers (and if the browser tab is visible)
-        if (this.browserService.isVisible()
+        if (document.hasFocus()
                 && this.receiverService.compare(conversation, this.receiverService.getActive())) {
             return;
         }