Restore pause function

emhttp/plugins/dynamix.docker.manager/DockerContainers.page

@@ -192,7 +192,7 @@ $(function() {
   });
   $.removeCookie('lockbutton');
   loadlist(true);
-  dockerload.start();
+  dockerload.start().monitor();
 });
 
 </script>

emhttp/plugins/dynamix/ArrayOperation.page

@@ -114,7 +114,7 @@ function toggle_state(device,name,action) {
     button = '[id^=button-]';
   }
   devices.stop();
-  $.post('/webGui/include/ToggleState.php',{device:device,name:name,action:action},function(){setTimeout(function(){devices.start();},1000);if (button) $(button).prop('disabled',false);});
+  $.post('/webGui/include/ToggleState.php',{device:device,name:name,action:action},function(){setTimeout(function(){devices.start().monitor();},1000);if (button) $(button).prop('disabled',false);});
 }
 
 function display_diskio() {
@@ -420,7 +420,7 @@ devices.on('message', function(msg,meta) {
     break;
   }
 });
-devices.start();
+devices.start().monitor();
 
 <?if (substr(_var($var,'fsState'),-3)=='ing'):?>
 var fsState = new NchanSubscriber('/sub/fsState',{subscriber:'websocket', reconnectTimeout:5000});

emhttp/plugins/dynamix/DashStats.page

@@ -1795,12 +1795,12 @@ $(function() {
 <?endif;?>
   dropdown('enter_view');
   startup = false;
-  dashboard.start();
+  dashboard.start().monitor();
 <?if ($vmusage == "Y"):?>
-  vmdashusage.start();
+  vmdashusage.start().monitor();
 <?endif;?>
 <?if ($apcupsd):?>
-  apcups.start();
+  apcups.start().monitor();
 <?endif;?>
   update900();
   toggleChart(true);

emhttp/plugins/dynamix/DisplaySettings.page

@@ -323,6 +323,12 @@ _(Favorites enabled)_:
 
 :display_favorites_enabled_help:
 
+_(Allow realtime updates on inactive browsers)_:
+: <select name='liveUpdate'>
+  <?=mk_option($display['liveUpdate'],"no",_('No'))?>
+  <?=mk_option($display['liveUpdate'],"yes",_('Yes'))?>
+  </select>
+
 <input type="submit" name="#default" value="_(Default)_" onclick="filename='reset'">
 : <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
 </form>

emhttp/plugins/dynamix/default.cfg

@@ -35,6 +35,7 @@ headermetacolor=""
 headerdescription="yes"
 showBannerGradient="yes"
 favorites="yes"
+liveUpdate="no"
 [parity]
 mode="0"
 hour="0 0"

emhttp/plugins/dynamix/include/DefaultPageLayout.php

@@ -105,10 +105,14 @@ if (!file_exists($notes)) file_put_contents($notes,shell_exec("$docroot/plugins/
 <script>
 String.prototype.actionName = function(){return this.split(/[\\/]/g).pop();}
 String.prototype.channel = function(){return this.split(':')[1].split(',').findIndex((e)=>/\[\d\]/.test(e));}
+NchanSubscriber.prototype.monitor = function(){subscribers.push(this);}
 
 Shadowbox.init({skipSetup:true});
 context.init();
 
+// list of nchan subscribers to start/stop at focus change
+var subscribers = [];
+
 // server uptime
 var uptime = <?=strtok(exec("cat /proc/uptime"),' ')?>;
 var expiretime = <?=_var($var,'regTy')=='Trial'||strstr(_var($var,'regTy'),'expired')?_var($var,'regTm2'):0?>;
@@ -118,11 +122,6 @@ var before = new Date();
 const timers = {};
 timers.bannerWarning = null;
 
-// Reload page every X minutes during extended viewing
-<?if (isset($myPage['Load']) && $myPage['Load'] > 0):?>
-timers.reload = setInterval(function(){location.reload();},<?=$myPage['Load']*60000?>);
-<?endif;?>
-
 // tty window
 var tty_window = null;
 
@@ -758,6 +757,8 @@ foreach ($buttons as $button) {
 unset($buttons,$button);
 
 // Build page content
+// Reload page every X minutes during extended viewing?
+if (isset($myPage['Load']) && $myPage['Load'] > 0) echo "\n<script>timers.reload = setInterval(function(){if (nchanPaused === false)location.reload();},".($myPage['Load']*60000).");</script>\n";
 echo "<div class='tabs'>";
 $tab = 1;
 $pages = [];
@@ -1270,6 +1271,76 @@ $('body').on('click','a,.ca_href', function(e) {
     }
   }
 });
+
+// Start & stop live updates when window loses focus
+var nchanPaused = false;
+var blurTimer = false;
+
+$(window).focus(function() {
+  nchanFocusStart();
+});
+
+// Stop nchan on loss of focus
+<? if ( $display['liveUpdate'] == "no" ):?>
+$(window).blur(function() {
+  blurTimer = setTimeout(function(){
+    nchanFocusStop();
+  },30000);
+});
+<?endif;?>
+
+document.addEventListener("visibilitychange", (event) => {
+  <? if ( $display['liveUpdate'] == "no" ):?>
+  if (document.hidden) {
+    nchanFocusStop();
+  } 
+<?else:?>
+  if (document.hidden) {
+    nchanFocusStop();
+  } else {
+    nchanFocusStart();
+  }
+<?endif;?>
+});
+
+function nchanFocusStart() {
+  if ( blurTimer !== false ) {
+    clearTimeout(blurTimer);
+    blurTimer = false;
+  }
+
+  if (nchanPaused !== false ) {
+    removeBannerWarning(nchanPaused);
+    nchanPaused = false;
+    
+    try {
+      pageFocusFunction();
+    } catch(error) {}
+    
+    subscribers.forEach(function(e) {
+      e.start();
+    });
+  }   
+}
+
+function nchanFocusStop(banner=true) {
+  if ( subscribers.length ) {
+    if ( nchanPaused === false ) {
+      var newsub = subscribers;
+      subscribers.forEach(function(e) {
+        try {
+          e.stop();
+        } catch(err) {
+          newsub.splice(newsub.indexOf(e,1));
+        }
+      });
+      subscribers = newsub;
+      if ( banner && subscribers.length ) {
+        nchanPaused = addBannerWarning("<?=_('Live Updates Paused');?>",false,true );
+      }
+    }
+  }
+}
 </script>
 </body>
 </html>