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

@@ -8,11 +8,14 @@
  */
 BabyBuddy.Timer = function ($) {
     var runIntervalId = null;
+    var timerId = null;
     var timerElement = null;
+    var lastUpdate = moment();
 
     var Timer = {
-        run: function(id) {
+        run: function(timer_id, element_id) {
-            timerElement = $('#' + 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();
+                }
+            });
         }
     };
 

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'

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",

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"