From c339062fbadeae8dda7cd8c41fc316282658c06b Mon Sep 17 00:00:00 2001
From: Christopher Charbonneau Wells <chris@chrxs.net>
Date: Fri, 27 Oct 2017 22:28:38 -0400
Subject: [PATCH] Use visibilityjs and momentjs to update a running timer when
 it's detail page becomes visible.

This commit is intended to improve the mobile experience by updating the timer detail page with the correct, current duration when, for example, a phone is unlocked after having been locked for a while with the timer detail page open.
---
 core/static_src/js/timer.js | 31 ++++++++++++++++++++++++++++---
 gulpfile.js/config.js       |  3 ++-
 package-lock.json           |  5 +++++
 package.json                |  3 ++-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/core/static_src/js/timer.js b/core/static_src/js/timer.js
index e0c98449..da22211e 100644
--- a/core/static_src/js/timer.js
+++ b/core/static_src/js/timer.js
@@ -8,11 +8,14 @@
  */
 BabyBuddy.Timer = function ($) {
     var runIntervalId = null;
+    var timerId = null;
     var timerElement = null;
+    var lastUpdate = moment();
 
     var Timer = {
-        run: function(id) {
-            timerElement = $('#' + id);
+        run: function(timer_id, element_id) {
+            timerId = timer_id;
+            timerElement = $('#' + element_id);
 
             if (timerElement.length == 0) {
                 console.error('BBTimer: Timer element not found.');
@@ -27,7 +30,17 @@ BabyBuddy.Timer = function ($) {
             }
 
             runIntervalId = setInterval(this.tick, 1000);
-            return runIntervalId;
+
+            // If the page just came in to view, update the timer data with the
+            // current actual duration. This will (potentially) help mobile
+            // phones that lock with the timer page open.
+            Visibility.change(function (e, state) {
+                if (state == 'visible' && moment().diff(lastUpdate) > 2000) {
+                    clearInterval(runIntervalId);
+                    Timer.update();
+                    runIntervalId = setInterval(Timer.tick, 1000);
+                }
+            });
         },
 
         tick: function() {
@@ -54,6 +67,18 @@ BabyBuddy.Timer = function ($) {
             var h = timerElement.find('.timer-hours');
             var hours = Number(h.text());
             h.text(hours + 1);
+        },
+
+        update: function() {
+            $.get('/api/timers/' + timerId + '/', function(data) {
+                if (data && 'duration' in data) {
+                    var duration = moment.duration(data.duration);
+                    timerElement.find('.timer-hours').text(duration.hours());
+                    timerElement.find('.timer-minutes').text(duration.minutes());
+                    timerElement.find('.timer-seconds').text(duration.seconds());
+                    lastUpdate = moment();
+                }
+            });
         }
     };
 
diff --git a/gulpfile.js/config.js b/gulpfile.js/config.js
index e48e2390..ae946c7f 100644
--- a/gulpfile.js/config.js
+++ b/gulpfile.js/config.js
@@ -27,7 +27,8 @@ module.exports = {
             'node_modules/popper.js/dist/umd/popper.js',
             'node_modules/bootstrap/dist/js/bootstrap.js',
             'node_modules/moment/moment.js',
-            'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js'
+            'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js',
+            'node_modules/visibilityjs/lib/visibility.core.js'
         ],
         graph: [
             'node_modules/plotly.js/dist/plotly-cartesian.js'
diff --git a/package-lock.json b/package-lock.json
index 7ca4c74e..5c0623cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8048,6 +8048,11 @@
         "source-map": "0.5.6"
       }
     },
+    "visibilityjs": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.5.tgz",
+      "integrity": "sha512-6FrRTnSvw0FrxzEOnxAJzuJ4Emy8Vw9tnwMfqxsKLmR41NFO5nJh972WeWnSh0Y434q4ThTM7l+oHast5Hqcvw=="
+    },
     "vt-pbf": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-2.1.4.tgz",
diff --git a/package.json b/package.json
index d798bdd4..a14ec6b2 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "pump": "^1.0.2",
     "require-dir": "^0.3.2",
     "run-sequence": "^2.2.0",
-    "tempusdominus-bootstrap-4": "^5.0.0-alpha9"
+    "tempusdominus-bootstrap-4": "^5.0.0-alpha9",
+    "visibilityjs": "^1.2.5"
   },
   "scripts": {
     "heroku-postbuild": "npm rebuild node-sass && gulp build"