#606 - I think I finally understand DOM render logic

6 files changed, 193 insertions, 125 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 5b32a033..c850fb41 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -125,6 +125,14 @@ ion-popover-view.fit ion-content {
     width: 100%
 }
 
+/*.modal {
+    top: 100;
+ 
+    left: 100;
+
+    width: 10%
+}*/
+
 
 /* I am using flexboxes to dynamicall adapt content
 in montage view.
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 1fda628c..61d78d86 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -1531,34 +1531,72 @@ angular.module('zmApp.controllers')
           return monitors;
         },
 
-        killLiveStream: function (ck,url) {
+        pauseLiveStream: function (ck,url) {
+          if (!url) url = loginData.url;
+       
+          var myauthtoken = $rootScope.authSession.replace("&auth=", "");
+          var req = url+'/index.php';
+          req = req + "?view=request&request=stream";
+          req = req + "&connkey="+ck;
+          req = req + "&auth="+myauthtoken;
+         // req = req + "&command=17";
 
-          
-         // monitors[i].Monitor.mportControlURL = controlURL;
-         if (!url) url = loginData.url;
-        //  var url = mon.Monitor.mportControlURL;
-       // console.log (JSON.stringify(mon));
-         // return;
+          debug ("DataModel: Pausing live stream ck:"+ck);
+          return $http.get(req+"&command=1")
+          .then (
+            function (s) {
+              debug ("pause success for ck:"+ck+" with:"+JSON.stringify(s));
+              
+            },
+            function (e) {debug ("pause success for ck:"+ck+" with:"+JSON.stringify(e));}
+          );
 
-        
+        },
+
+        resumeLiveStream: function (ck,url) {
+          if (!url) url = loginData.url;
+       
           var myauthtoken = $rootScope.authSession.replace("&auth=", "");
           var req = url+'/index.php';
           req = req + "?view=request&request=stream";
           req = req + "&connkey="+ck;
           req = req + "&auth="+myauthtoken;
-          req = req + "&command=1";
+         // req = req + "&command=17";
 
-          debug ("DataModel: Killing live stream ck:"+ck+ " with:"+req);
-          $http.get(req)
+          debug ("DataModel: Resuming live stream ck:"+ck);
+          return $http.get(req+"&command=2")
           .then (
             function (s) {
-              debug ("success with:"+JSON.stringify(s));
+              debug ("play success for ck:"+ck+" with:"+JSON.stringify(s));
+              
             },
-            function (e) {debug ("error with:"+JSON.stringify(e));}
+            function (e) {debug ("play success for ck:"+ck+" with:"+JSON.stringify(e));}
           );
 
         },
 
+        killLiveStream: function (ck,url,name) {
+
+         if (!url) url = loginData.url;
+       
+          var myauthtoken = $rootScope.authSession.replace("&auth=", "");
+          var req = url+'/index.php';
+          req = req + "?view=request&request=stream";
+          req = req + "&connkey="+ck;
+          req = req + "&auth="+myauthtoken;
+         // req = req + "&command=17";
+          if (name==undefined) name="";
+          debug ("DataModel: killing "+name+" live stream ck:"+ck);
+          return $http.get(req+"&command=17")
+          .then (
+            function (s) {
+              debug ("kill success for ck:"+ck+" with:"+JSON.stringify(s));
+              
+            },
+            function (e) {ebug ("kill success for ck:"+ck+" with:"+JSON.stringify(e));}
+          );
+        },
+
         /*killStream: function (ck) {
           debug ("Killing connKey: "+ck);
           var myauthtoken = $rootScope.authSession.replace("&auth=", "");
@@ -1605,7 +1643,7 @@ angular.module('zmApp.controllers')
 
         regenConnKeys: function () {
 
-          debug ("Regenerating connkeys...");
+          debug ("DataModel: Regenerating connkeys...");
           for (var i=0; i < monitors.length; i++){
             monitors[i].Monitor.connKey = (Math.floor((Math.random() * 999999) + 1)).toString();
           }
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js
index 887d3328..415812b9 100644
--- a/www/js/MonitorModalCtrl.js
+++ b/www/js/MonitorModalCtrl.js
@@ -10,7 +10,6 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
   $scope.isModalActive = true;
   var intervalModalHandle;
   var cycleHandle;
-  var nphTimer;
   var ld = NVRDataModel.getLogin();
   $scope.svgReady = false;
   $scope.zoneArray = [];
@@ -20,6 +19,8 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
   var targetID = "";
   $scope.imageZoomable = true;
   $scope.ptzButtonsShown = true;
+  
+  
 
 
 
@@ -73,11 +74,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
     //  console.log ("Refreshing Image...");
   }.bind(this), 5000);
 
-  $timeout.cancel(nphTimer);
-  nphTimer = $timeout(function () {
-    $scope.currentStreamMode = 'jpeg';
-    NVRDataModel.log("Switching playback via nphzms");
-  }, zm.nphSwitchTimer);
+ 
 
   // This is the PTZ menu
 
@@ -882,18 +879,6 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
       NVRDataModel.log("New image loaded in");
       var ld = NVRDataModel.getLogin();
       carouselUtils.setStop(false);
-      if (ld.useNphZms == true) {
-        $scope.currentStreamMode = 'single';
-        NVRDataModel.log("Setting timer to play nph-zms mode");
-        // first 5 seconds, load a snapshot, then switch to real FPS display
-        // this is to avoid initial image load delay
-        // FIXME: 5 seconds fair?
-        $timeout.cancel(nphTimer);
-        nphTimer = $timeout(function () {
-          $scope.currentStreamMode = 'jpeg';
-          NVRDataModel.log("Switching playback via nphzms");
-        }, zm.nphSwitchTimer);
-      }
 
     }
 
@@ -1114,6 +1099,33 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
     }
   }
 
+
+  $scope.constructSingleStream = function() {
+    var stream;
+    stream = $scope.monitor.Monitor.streamingURL + 
+                    "/nph-zms?mode="+getSingleStreamMode() +
+                    "&monitor="+$scope.monitorId +
+                    "&scale="+$scope.quality + 
+                    $rootScope.authSession + 
+                    "&rand="+$rootScope.modalRand +
+                    appendSingleStreamConnKey();
+                
+
+        return stream;
+
+
+  };
+
+
+  function getSingleStreamMode() {
+    return $scope.isModalStreamPaused ? 'single': 'jpeg';
+  }
+
+function appendSingleStreamConnKey()  {
+   return $scope.isModalStreamPaused ? "": "&connkey="+$scope.connKey;
+
+  };
+
   //-------------------------------------------------------------
   //reloaads mon - do we need it?
   //-------------------------------------------------------------
@@ -1171,10 +1183,8 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
   $scope.$on('modal.removed', function () {
 
     $scope.isModalActive = false;
-    NVRDataModel.debug("Single monitor exited, killing stream");
-    NVRDataModel.killLiveStream($scope.connKey, $scope.controlURL);
-
-
+    NVRDataModel.debug("Single monitor exited killing stream");
+    NVRDataModel.killLiveStream($scope.connKey, $scope.controlURL);  
 
     //console.log("**MODAL REMOVED: Stopping modal timer");
     $interval.cancel(intervalModalHandle);
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index d0afd358..6a466740 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -30,11 +30,12 @@ angular.module('zmApp.controllers')
     var reloadPage = zm.forceMontageReloadDelay;
     var viewCleaned = false;
 
-    var isKilled = false;
+    var areStreamsStopped = false;
+    $scope.isModalStreamPaused = false; // used in Monitor Modal
     
     //var reloadPage = 30;
 
-    var simulStreaming = 0; // will be 1 if you  multiport
+    var simulStreaming = false; // will be true if you  multiport
 
     var broadcastHandles = [];
 
@@ -115,8 +116,7 @@ angular.module('zmApp.controllers')
             // switch off awake, as liveview is finished
             NVRDataModel.debug("Modal is open, closing it");
             NVRDataModel.setAwake(false);
-            $scope.isModalActive = false;
-            cleanupOnClose();
+            cleanupOnCloseModal();
         }
         else
         {
@@ -611,7 +611,7 @@ angular.module('zmApp.controllers')
 
     function loadNotifications()
     {
-        if (simulStreaming=='1') {
+        if (simulStreaming) {
          // console.log ("Skipping timer as simulStreaming");
             return;
         }
@@ -1120,12 +1120,17 @@ angular.module('zmApp.controllers')
     $scope.openModal = function(mid, controllable, controlid, connKey, monitor)
     {
         
-        if (simulStreaming=='1') {
-            NVRDataModel.debug ("Killing all streams in montage to save memory/nw...");
-            for (var i=0; i < $scope.MontageMonitors.length; i++) {
-                NVRDataModel.killLiveStream($scope.MontageMonitors[i].Monitor.connKey, $scope.MontageMonitors[i].Monitor.controlURL);
-            }
-        }
+       areStreamsStopped = true;
+       $scope.isModalStreamPaused = false; // we stop montage and start modal stream
+       $timeout (function () { // after render
+        if (simulStreaming) {
+           NVRDataModel.debug ("Killing all streams in montage to save memory/nw...");
+           for (var i=0; i < $scope.MontageMonitors.length; i++) {
+               NVRDataModel.killLiveStream($scope.MontageMonitors[i].Monitor.connKey, $scope.MontageMonitors[i].Monitor.controlURL, $scope.MontageMonitors[i].Monitor.Name );
+           }
+       }
+
+       });
         
 
         $scope.controlURL = monitor.Monitor.controlURL;
@@ -1208,35 +1213,14 @@ angular.module('zmApp.controllers')
     }
 
     //---------------------------------------------------------------------
-    //
+    // This is ONLY called when we exit modal to montage
     //---------------------------------------------------------------------
 
-    function cleanupOnClose()
+    function cleanupOnCloseModal()
     {
-       
-       // single connkey is removed in monitorModal
-
-        NVRDataModel.debug ("Regenerating connkeys for montage...");
-        NVRDataModel.regenConnKeys();
-        $scope.monitors = NVRDataModel.getMonitorsNow();
-        $scope.MontageMonitors = angular.copy($scope.monitors);
-        $scope.modal.remove();
-        // we did the montage, so redo flow
-        $timeout (function() {initPackery();},zm.packeryTimer);
-
-
-       /* $timeout(function()
-        {
-            NVRDataModel.log("MontageCtrl:Stopping network pull...");
-            if (NVRDataModel.isForceNetworkStop()) NVRDataModel.stopNetwork();
-        }, 50);*/
-
 
 
-        $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
-        $scope.isModalActive = false;
-
-        NVRDataModel.log("Restarting montage timer, closing Modal...");
+        NVRDataModel.log("Restarting montage timers...");
         var ld = NVRDataModel.getLogin();
         // console.log ("closeModal: Cancelling timer");
         $interval.cancel(intervalHandleMontage);
@@ -1245,7 +1229,6 @@ angular.module('zmApp.controllers')
         $interval.cancel(intervalHandleReloadPage);
 
         
-
         intervalHandleMontage = $interval(function()
         {
             loadNotifications();
@@ -1268,18 +1251,46 @@ angular.module('zmApp.controllers')
         {
             forceReloadPage();
         }.bind(this), reloadPage * 1000);
-                    
 
-        // $timeout (function() {pckry.shiftLayout();},zm.packeryTimer);
+    
+
+        $scope.isModalStreamPaused = true;
+        // let modal go to snapshot mode in render
+        $timeout (function () {
+            $scope.modal.remove();
+        })
+
+        // We now need to regen connkeys
+        // once regenerated 
+        if (simulStreaming) {
+            NVRDataModel.debug ("Re-creating all stream connkeys in montage ...");
+            NVRDataModel.regenConnKeys();
+            $scope.monitors = NVRDataModel.getMonitorsNow();
+            $scope.MontageMonitors = angular.copy($scope.monitors);
+
+            areStreamsStopped = false;
+            $timeout(function() // after render
+            {
+                initPackery();
+            }, zm.packeryTimer);
+
+     
+        }
+        
+
 
     }
 
+    // for some reason, double tap calls this twice
     $scope.closeModal = function()
     {
+        NVRDataModel.debug("MontageCtrl: Close & Destroy Monitor Modal");
+
         if ($scope.singleMonitorModalOpen) {
             $scope.singleMonitorModalOpen = false;
-            NVRDataModel.debug("MontageCtrl: Close & Destroy Monitor Modal");
-            cleanupOnClose();
+           
+            cleanupOnCloseModal();
+            
         }
         else {
             NVRDataModel.debug ("Ignoring double-invocation");
@@ -1299,21 +1310,7 @@ angular.module('zmApp.controllers')
     //---------------------------------------------------------------------
 
 
-    // so when we go to pause, 
-    // doing connkey kills is a bad idea
-    // because root window stop messes up return
-
-    function pauseViewCleanup() {
-        viewCleaned = true;
-        if (pckry) pckry.destroy();
-        $interval.cancel(intervalHandleMontage);
-        $interval.cancel(intervalHandleMontageCycle);
-        $interval.cancel(intervalHandleAlarmStatus);
-        $interval.cancel(intervalHandleReloadPage);
-
-
-    }
-
+  
     function viewCleanup() {
 
         if (viewCleaned) {
@@ -1333,15 +1330,21 @@ angular.module('zmApp.controllers')
         }
         broadcastHandles = [];
         
-
+        areStreamsStopped = true;
         // if modal is open stream gets killed
         // inside monitorModal
-        if (!$scope.singleMonitorModalOpen && simulStreaming=='1')  {
-            NVRDataModel.debug ("Killing all streams in montage to save memory/nw...");
-            for (i=0; i < $scope.MontageMonitors.length; i++) {
-                NVRDataModel.killLiveStream($scope.MontageMonitors[i].Monitor.connKey, $scope.MontageMonitors[i].Monitor.controlURL);
+
+        $timeout (function () {
+            if (!$scope.singleMonitorModalOpen && simulStreaming)  {
+                NVRDataModel.debug ("Killing all streams in montage to save memory/nw...");
+                for (i=0; i < $scope.MontageMonitors.length; i++) {
+                    NVRDataModel.killLiveStream($scope.MontageMonitors[i].Monitor.connKey, $scope.MontageMonitors[i].Monitor.controlURL);
+                    
+                }
             }
-        }
+
+        });
+      
 
 
     }
@@ -1711,31 +1714,44 @@ angular.module('zmApp.controllers')
     };
 
 
-       $scope.getMode = function() {
-
-       // console.log ("SIMUL="+simulStreaming);
-           var mode =  (simulStreaming == '1' && !$scope.areImagesLoading) ? 'jpeg': 'single';
-           //console.log ("mode="+mode);
-           return mode;
-     };
-
      function getMode() {
-        var mode =  (simulStreaming == '1' && !$scope.areImagesLoading) ? 'jpeg': 'single';
+
+        var mode =  (simulStreaming  && !areStreamsStopped) ? 'jpeg': 'single';
         //console.log ("mode="+mode);
         return mode;
 
      }
         
 
+     // only for testing
      $scope.killAllImages= function() {
-         //isKilled = !isKilled;
-
-         if (simulStreaming=='1') {
+        areStreamsStopped = !areStreamsStopped; // inside timeout, because we need DOM to hide
+        $timeout (function () {
+         if (simulStreaming && areStreamsStopped) {
             NVRDataModel.debug ("Killing all streams in montage to save memory/nw...");
-            for (var i=0; i < $scope.MontageMonitors.length; i++) {
+            for (var i=0;
+                 i < $scope.MontageMonitors.length; i++) {
                 NVRDataModel.killLiveStream($scope.MontageMonitors[i].Monitor.connKey, $scope.MontageMonitors[i].Monitor.controlURL);
             }
         }
+
+        });
+         
+
+        if (simulStreaming && !areStreamsStopped) {
+            NVRDataModel.debug ("Re-creating all streams in montage to save memory/nw...");
+            NVRDataModel.regenConnKeys();
+
+            $scope.monitors = NVRDataModel.getMonitorsNow();
+            $scope.MontageMonitors = angular.copy($scope.monitors);
+
+            $timeout(function()
+            {
+                initPackery();
+            }, zm.packeryTimer);
+
+     
+        }
          
         
 
@@ -1743,8 +1759,8 @@ angular.module('zmApp.controllers')
 
      $scope.constructStream = function(monitor) {
 
-        var stream = '';
-        if (!isKilled)
+        var stream;
+        //if (areStreamsStopped) return ""; //getmode doing snapshot now
         stream = monitor.Monitor.streamingURL + 
                     "/nph-zms?mode="+getMode() +
                     "&monitor="+monitor.Monitor.Id +
@@ -1758,7 +1774,7 @@ angular.module('zmApp.controllers')
      };
 
      function appendConnKey (ck) {
-        if (simulStreaming == '1' && !$scope.areImagesLoading)
+        if (simulStreaming)
         return "&connkey="+ck;
     else   
         return "";
@@ -1766,7 +1782,7 @@ angular.module('zmApp.controllers')
  
      // using connkey in snapshot results in error
      $scope.appendConnKey =function(ck) {
-         if (simulStreaming == '1' && !$scope.areImagesLoading)
+         if (simulStreaming  && !areStreamsStopped )
             return "&connkey="+ck;
         else   
             return "";
@@ -1790,9 +1806,6 @@ angular.module('zmApp.controllers')
 
        // NVRDataModel.regenConnKeys();
         $scope.monitors = NVRDataModel.getMonitorsNow();
-
-       
-
         $scope.MontageMonitors = angular.copy($scope.monitors);
 
         for (var ck=0; ck < $scope.MontageMonitors.length; ck++) {
@@ -1809,7 +1822,7 @@ angular.module('zmApp.controllers')
         NVRDataModel.getZmsMultiPortSupport()
            .then ( function (data) { 
             //multiPortZms = data;
-            simulStreaming = data > 0 ? '1':'0';
+            simulStreaming = data > 0 ? true:false;
             //console.log ("****** MULTIPORT="+multiPortZms);
             NVRDataModel.debug ("Multiport="+data);
 
@@ -1819,14 +1832,14 @@ angular.module('zmApp.controllers')
             }
 */
             if (ld.disableSimulStreaming) {
-                simulStreaming = '0';
+                simulStreaming = false;
                 NVRDataModel.debug ("Forcing simulStreams off as you have disabled it");
 
             }
         },
         function (err) {
             NVRDataModel.debug("******* SHOULD NEVER HAPPEN - MULTIPORT ERROR");
-            simulStreaming = '0';
+            simulStreaming = false;
 
         }
     );
@@ -1896,7 +1909,6 @@ angular.module('zmApp.controllers')
         $scope.imageStyle = true;
         intervalHandleMontage = "";
         intervalHandleMontageCycle = "";
-        $scope.isModalActive = false;
         $scope.isReorder = false;
 
         $ionicSideMenuDelegate.canDragContent($scope.minimal ? true : true);
@@ -2027,7 +2039,7 @@ angular.module('zmApp.controllers')
     $scope.$on('$ionicView.beforeLeave', function()
     {
 
-        isKilled =true;
+        areStreamsStopped =true;
         viewCleanup();
 
     });
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 79f443da..12d3708c 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -15,7 +15,7 @@
               <div ng-if="!animationInProgress && !isBackground() && connKey">
                 <!--<span style="color:white">{{currentStreamMode}}</span>-->
 
-                <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}"
+                <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{constructSingleStream()}}"
                   ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)"
                   on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" imageonload="imageLoaded()" />
               </div>
@@ -43,7 +43,7 @@
               <div ng-if="!animationInProgress && !isBackground() && connKey">
                 <!--<span style="color:white">{{currentStreamMode}}</span>-->
 
-                <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}"
+                <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{constructSingleStream()}}"
                   ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-swipe-left="onSwipe(monitorId,1)"
                   on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" imageonload="imageLoaded()" />
               </div>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 2434ae5a..eba049bf 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -90,7 +90,7 @@
 
                   
 
-            <span ng-if="!singleMonitorModalOpen" ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit">
+            <span ng-repeat="monitor in MontageMonitors | onlyEnabled |limitTo: monLimit">
                <div  class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}} ">
 
                   <!--  <figure>