From 21ec2facac27f77e398679c456f3479cb9a7de12 Mon Sep 17 00:00:00 2001
From: Thomas Steur <thomas.steur@googlemail.com>
Date: Mon, 10 Nov 2014 00:17:55 +0100
Subject: refs #6545 do not request live information in case tab is not active

At first I used the window.blur/focus events but noticed it would also
stop refreshing if tab is active but browser window is not active. I
reckon many people might want to leave the browser open in one window
and follow the live visitors while working on something else. That's
why we should use the page visibility API which is supported by most
browsers (I think not in <= IE9). I used a different library first
but noticed it adds many event listeners like mousemove etc and it can
make Piwik slow so used the visibility.js library in the end. If someone
uses an old browser nothing will change compared to before so that
should be ok. In a next version we could initiate a refresh immediately
once the browser tab becomes active again.
---
 plugins/Live/Live.php            |  1 +
 plugins/Live/javascripts/live.js | 56 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 2 deletions(-)

(limited to 'plugins/Live')

diff --git a/plugins/Live/Live.php b/plugins/Live/Live.php
index ff5bb72985..aaddca1f22 100644
--- a/plugins/Live/Live.php
+++ b/plugins/Live/Live.php
@@ -38,6 +38,7 @@ class Live extends \Piwik\Plugin
 
     public function getJsFiles(&$jsFiles)
     {
+        $jsFiles[] = "libs/bower_components/visibilityjs/lib/visibility.core.js";
         $jsFiles[] = "plugins/Live/javascripts/live.js";
         $jsFiles[] = "plugins/Live/javascripts/visitorProfile.js";
         $jsFiles[] = "plugins/Live/javascripts/visitorLog.js";
diff --git a/plugins/Live/javascripts/live.js b/plugins/Live/javascripts/live.js
index 59913b8b02..17e08cded3 100644
--- a/plugins/Live/javascripts/live.js
+++ b/plugins/Live/javascripts/live.js
@@ -188,6 +188,14 @@
             window.clearTimeout(this.updateInterval);
         },
 
+        /**
+         * Return true in case widget is started.
+         * @returns {boolean}
+         */
+        started: function() {
+            return this.isStarted;
+        },
+
         /**
          * Set the interval for refresh
          *
@@ -207,6 +215,16 @@ $(function() {
             return;
         }
 
+        function scheduleAnotherRequest()
+        {
+            setTimeout(function () { refreshWidget(element, refreshAfterXSecs); }, refreshAfterXSecs * 1000);
+        }
+
+        if (Visibility.hidden()) {
+            scheduleAnotherRequest();
+            return;
+        }
+
         var lastMinutes = $(element).attr('data-last-minutes') || 3,
           translations = JSON.parse($(element).attr('data-translations'));
 
@@ -248,8 +266,7 @@ $(function() {
               ? translations['one_minute'] : translations['minutes'].replace('%s', lastMinutes);
             $(metrics[2]).text(lastMinutesText);
 
-            // schedule another request
-            setTimeout(function () { refreshWidget(element, refreshAfterXSecs); }, refreshAfterXSecs * 1000);
+            scheduleAnotherRequest();
         });
         ajaxRequest.send(true);
     };
@@ -280,3 +297,38 @@ function onClickPlay() {
     $('#pauseImage').show();
     return $('#visitsLive').liveWidget('start');
 }
+
+(function () {
+    if (!Visibility.isSupported()) {
+        return;
+    }
+
+    var isStoppedByBlur = false;
+
+    function isStarted()
+    {
+        return $('#visitsLive').liveWidget('started');
+    }
+
+    function onTabBlur() {
+        if (isStarted()) {
+            isStoppedByBlur = true;
+            onClickPause();
+        }
+    }
+
+    function onTabFocus() {
+        if (isStoppedByBlur && !isStarted()) {
+            isStoppedByBlur = false;
+            onClickPlay();
+        }
+    }
+
+    Visibility.change(function (event, state) {
+        if (Visibility.hidden()) {
+            onTabBlur();
+        } else {
+            onTabFocus();
+        }
+    });
+})();
\ No newline at end of file
-- 
cgit v1.2.3