#757 trap image load and re-generate connkey

3 files changed, 22 insertions, 8 deletions

diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 2e70b127..90d9ee82 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -1762,12 +1762,15 @@ angular.module('zmApp.controllers')
     function getMode() {
 
       var mode = (simulStreaming && currentStreamState != streamState.SNAPSHOT && currentStreamState != streamState.STOPPED) ? 'jpeg' : 'single';
-      //console.log ("mode="+mode);
+    //console.log ("mode="+mode);
       return mode;
 
     }
 
-
+    $scope.processImageError = function(monitor) {
+      monitor.Monitor.connKey = (Math.floor((Math.random() * 999999) + 1)).toString();
+      NVRDataModel.debug ("Image load error for: "+monitor.Monitor.Id+" regenerated connKey is:"+monitor.Monitor.connKey);
+    };
 
     $scope.constructStream = function (monitor) {
 
diff --git a/www/js/app.js b/www/js/app.js
index 604912a0..9ca20c8e 100755
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -488,12 +488,13 @@ angular.module('zmApp', [
   // This directive is adapted from https://github.com/paveisistemas/ionic-image-lazy-load
   // I've removed lazyLoad and only made it show a spinner when an image is loading
   //--------------------------------------------------------------------------------------------
-  .directive('imageSpinnerSrc', ['$document', '$compile', 'imageLoadingDataShare', '$timeout',
-    function ($document, $compile, imageLoadingDataShare, $timeout) {
+  .directive('imageSpinnerSrc', ['$document', '$compile', 'imageLoadingDataShare', '$timeout', '$parse',
+    function ($document, $compile, imageLoadingDataShare, $timeout, $parse) {
       return {
         restrict: 'A',
         scope: {
-          imageSpinnerBackgroundImage: "@imageSpinnerBackgroundImage"
+          imageSpinnerBackgroundImage: "@imageSpinnerBackgroundImage",
+          imageOnError: '&'
         },
         link: function ($scope, $element, $attributes) {
 
@@ -519,7 +520,7 @@ angular.module('zmApp', [
 
           // show an image-missing image 
           $element.bind('error', function () {
-            // console.log ("DIRECTIVE: IMAGE ERROR");
+           
             loader.remove();
 
 
@@ -556,6 +557,16 @@ angular.module('zmApp', [
             // $element.prop('data-src', hurl);
 
             imageLoadingDataShare.set(0);
+
+            if ($attributes.imageOnError) {
+              //console.log (">>>>  ERROR CBK");
+              $scope.imageOnError();
+             // fn($scope, {});
+            }
+            else {
+              //console.log (">>>>>>>>>> NO ERROR CBK");
+            }
+              
           });
 
           function waitForFrame1() {
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 9555d0d8..73d3cb8d 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -126,14 +126,14 @@
             <div ng-if="!minimal">
               <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}"
                 ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);"
-                image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" />
+                image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" image-on-error="processImageError(monitor);" />
 
 
             </div>
 
             <div ng-if="minimal">
               <img id="img-{{$index}}" image-spinner-src="{{constructStream(monitor)}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);"
-                image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" />
+                image-spinner-loader="lines" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" image-on-error="processImageError(monitor);"/>
             </div>