use holderjs to set error placeholder dimensions correctly #528

5 files changed, 32 insertions, 10 deletions

diff --git a/bower.json b/bower.json
index d22699e1..3383d070 100644
--- a/bower.json
+++ b/bower.json
@@ -47,7 +47,8 @@
     "videogular-cuepoints": "~2.1.0",
     "videogular-overlay-play": "~1.4.4",
     "videogular-themes-default": "~1.4.4",
-    "vis": "~4.20.0"
+    "vis": "~4.20.0",
+    "holderjs": "^2.9.4"
   },
   "resolutions": {
     "angular-sanitize": "1.5.3",
diff --git a/www/index.html b/www/index.html
index bc79ad6d..c820a97e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -61,6 +61,7 @@
     <script src="lib/moment/min/moment-with-locales.min.js"></script>
     <script src="lib/ng-mfb/src/mfb-directive.js"></script>
     <script src="lib/angular-touch/angular-touch.min.js"></script>
+    <script src="lib/holderjs/holder.min.js"></script>
    
 
 
diff --git a/www/js/app.js b/www/js/app.js
index 018d020a..b126230d 100755
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -488,9 +488,32 @@ angular.module('zmApp', [
 
             
             var url = 'img/novideo.png';
+
+
+            var w = $attributes.imgSpinnerW;
+            var h = $attributes.imgSpinnerH;
+
+         /*   $element.css({
+             //width: w+'px',
+            // height: h+'px',
+              display: ($attributes.imgSpinnerW && $attributes.imgSpinnerH? 'inline-block' : null),
+              background:'red',
+              objectFit: 'fill'
+          });*/
+          
+
+            console.log ("**********"+w+"X"+h);
           //  var hurl = "holder.js/2000x$2000?auto=yes&theme=sky&text=...";
 
-           $element.prop('src', url);
+           $attributes.$set('data-src', 'holder.js/'+w+'x'+h+'?auto=yes&theme=industrial&text=...');
+           Holder.run({images:$element[0], nocss:false});
+
+          // $element.prop ('width', w+'px');
+          // $element.prop ('height', h+'px');
+
+           
+          // $element.css({backgroundImage: 'url("' + url + '")'});
+           //$attributes.$set('src', url);
           // $element.prop('data-src', hurl);
 
             imageLoadingDataShare.set(0);
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 785a348d..2bbd799c 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -24,7 +24,7 @@
                              or we lose the handle for cleanup forever!-->
 						<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 height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
-								<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?noop():toggleSelectItem($index)" >
+								<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?noop():toggleSelectItem($index)"  img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}>
 									<figcaption class="normal-figcaption" >
 
                                         &nbsp;
@@ -41,7 +41,7 @@
 						<div  ng-if = "monitor.Monitor.eventUrl != 'img/noevent.png' && monitor.Monitor.connKey !=''">
 							<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 height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
-									<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}{{$root.authSession}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?togglePause(monitor.Monitor.Id):toggleSelectItem($index)"  on-swipe-left="toggleControls()" on-swipe-right="toggleControls()" />
+									<img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{monitor.Monitor.eventUrl}}{{$root.authSession}}"  image-spinner-loader="lines" on-tap="!isDragabillyOn?togglePause(monitor.Monitor.Id):toggleSelectItem($index)"  on-swipe-left="toggleControls()" on-swipe-right="toggleControls()"  img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}/>
 									<figcaption class="normal-figcaption" >
 
                                         &nbsp;
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 5036c820..3f6dcb5d 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -104,18 +104,15 @@
                     <!--<div ng-if="!isModalActive" >-->
                             <!--<div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading">-->
                             <div ng-if="$root.authSession!='undefined' && !isBackground() ">
-                                <div ng-if = "!minimal">
-                                    
-                                 
-                                    
-                                    <img    class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{getMode()}}&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{randToAvoidCacheMem}}" 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"  />
+                                <div ng-if = "!minimal"  >
+                                    <img    class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{getMode()}}&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{randToAvoidCacheMem}}" 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}}"    />
                                        
                                    
 
                                     </div> 
 
                                     <div ng-if = "minimal">
-                                        <img  id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode={{getMode()}}&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{randToAvoidCacheMem}}"  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  id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode={{getMode()}}&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{randToAvoidCacheMem}}"  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}}   />
                                     </div>
                             </div>