#618 add token for basic auth as "fyi" for all images

9 files changed, 201 insertions, 26 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 38fd95d5..455e4c0a 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -882,6 +882,7 @@ angular.module('zmApp.controllers')
                     loginData.basicAuthUser = '';
                     loginData.basicAuthPassword = '';
                     $rootScope.basicAuthHeader='';
+                    $rootScope.basicAuthToken='';
                   }
 
                   if (loginData.url.indexOf('@') != -1) {
@@ -905,7 +906,8 @@ angular.module('zmApp.controllers')
                     if (components.port) loginData.apiurl = loginData.apiurl + ":" + components.port;
                     if (components.path) loginData.apiurl = loginData.apiurl + components.path;
                     
-                    $rootScope.basicAuthHeader = 'Basic ' + btoa(components.userinfo);
+                    $rootScope.basicAuthToken = btoa(components.userinfo);
+                    $rootScope.basicAuthHeader = 'Basic ' + $rootScope.basicAuthToken;
                     //console.log (">>>> SET BASIC AUTH TO  " + $rootScope.basicAuthHeader);
 
                     var up = components.userinfo.split(':');
@@ -916,7 +918,8 @@ angular.module('zmApp.controllers')
                   }
 
                   if (loginData.isUseBasicAuth) {
-                    $rootScope.basicAuthHeader = 'Basic ' + btoa(loginData.basicAuthUser+':'+loginData.basicAuthPassword);
+                    $rootScope.basicAuthToken = btoa(loginData.basicAuthUser+':'+loginData.basicAuthPassword);
+                    $rootScope.basicAuthHeader = 'Basic ' + $rootScope.basicAuthToken;
                     debug ("Basic authentication detected, constructing Authorization Header");
 
                    // console.log ("BASIC AUTH SET TO:"+$rootScope.basicAuthHeader);
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 5e228077..b158b915 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -960,6 +960,17 @@ angular.module('zmApp.controllers')
 
         //$rootScope.zmPopup = $ionicPopup.alert({title: kFrame+':'+fid+'/'+kEvent+':'+e,template:img,  cssClass:'popup80'});
 
+        if ($rootScope.authSession !='undefined'){
+            $scope.imgsrc +=$rootScope.authSession;
+            $scope.fallbackImgSrc +=$rootScope.authSession;
+        } 
+
+        if ($rootScope.basicAuthToken) {
+            $scope.imgsrc +="&basicauth="+$rootScope.basicAuthToken;
+            $scope.fallbackImgSrc +="&basicauth="+$rootScope.basicAuthToken;
+        } 
+
+
         $rootScope.zmPopup = $ionicPopup.show(
         {
             template: '<center>' + $translate.instant('kFrame') + ':{{parray[ndx].frameid}}@{{prettifyTimeSec(parray[ndx].time)}}</center><br/><img ng-src="{{imgsrc}}" fallback-src="{{fallbackImgSrc}}" width="100%"  />',
@@ -3139,6 +3150,61 @@ angular.module('zmApp.controllers')
 
     };
 
+    $scope.constructThumbnail = function(event) {
+        var stream = "";
+        stream = event.Event.baseURL+
+        "/index.php?view=image&fid=" +event.Event.MaxScoreFrameId +
+        "&width="+event.Event.thumbWidth*2 +
+        "&height="+event.Event.thumbHeight*2;
+        if ($rootScope.authSession !='undefined') stream+=$rootScope.authSession;
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+        return stream;
+      
+    };
+
+    $scope.constructScrubFrame = function (event,slide) {
+
+        var stream = "";
+        if (event.Event.imageMode=='path') {
+            stream = event.Event.baseURL+"/index.php?view=image"+
+                "&path="+event.Event.relativePath+slide.img+"&height=380";
+
+        }
+        else if (event.Event.imageMode == 'fid') {
+            stream = event.Event.baseURL+"/index.php?view=image"+
+            "&fid="+slide.id;
+        }
+        if ($rootScope.authSession !='undefined') stream+=$rootScope.authSession;
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+        
+        return stream;
+    }
+
+    $scope.constructAlarmFrame = function(event, alarm, motion) {
+        var stream = "";
+
+        if (event.Event.imageMode=='fid') {
+            stream = event.Event.baseURL+
+            "/index.php?view=image&fid=" +alarm.id;
+            if (motion) stream+=$scope.outlineMotionParam;
+
+        }
+        else if (event.Event.imageMode=='path') {
+            st
+            ream = event.Event.baseURL+
+            "/index.php?view=image&path=" +event.Event.relativePath +
+            motion? alarm.aname:alarm.fname +
+            "&height=380";
+
+
+        }
+        if ($rootScope.authSession !='undefined') stream+=$rootScope.authSession;
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+        
+        return stream;
+      
+    };
+
     $scope.toggleMinAlarmFrameCount = function()
     {
 
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index 6d4444a2..41fb2727 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -732,7 +732,25 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
         // for alarms only
         if (onlyAlarms) $scope.mycarousel.index = 0;
-        var url = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.mycarousel.index].img;
+        var url;
+
+        if ($scope.event.Event.imageMode == 'path') {
+            url = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.mycarousel.index].img;
+        }
+        else {
+            url = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand +
+            "&eid=" + $scope.eventId +
+            "&fid=" +  $scope.slides[$scope.mycarousel.index].id;
+        }
+        
+        if ($rootScope.authSession !='undefined'){
+           url +=$rootScope.authSession;
+          
+        } 
+        if ($rootScope.basicAuthToken) {
+            url +="&basicauth="+$rootScope.basicAuthToken;
+          
+        } 
 
         $scope.selectEventUrl = url;
         $scope.slideIndex = $scope.mycarousel.index;
@@ -756,7 +774,22 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     onTap: function(e)
                     {
                         if ($scope.slideIndex > 0) $scope.slideIndex--;
-                        $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+
+                        if ($scope.event.Event.imageMode=='path') {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+                        }
+                        else {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&eid=" + $scope.eventId + "&fid="  + $scope.slides[$scope.slideIndex].id;
+                        }
+                        if ($rootScope.authSession !='undefined'){
+                            $scope.selectEventUrl +=$rootScope.authSession;
+                           
+                         } 
+                         if ($rootScope.basicAuthToken) {
+                             $scope.selectEventUrl +="&basicauth="+$rootScope.basicAuthToken;
+                           
+                         } 
+                        
                         //NVRDataModel.log("selected frame is " + $scope.slideIndex);
 
                         //console.log("URL TO DISPLAY " + $scope.slides[$scope.slideIndex].img);
@@ -771,7 +804,22 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     onTap: function(e)
                     {
                         if ($scope.slideIndex < $scope.slideLastIndex) $scope.slideIndex++;
-                        $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+
+                        if ($scope.event.Event.imageMode=='path') {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+                        }
+                        else {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&eid=" + $scope.eventId + "&fid="  + $scope.slides[$scope.slideIndex].id;
+                        }
+                        if ($rootScope.authSession !='undefined'){
+                            $scope.selectEventUrl +=$rootScope.authSession;
+                           
+                         } 
+                         if ($rootScope.basicAuthToken) {
+                             $scope.selectEventUrl +="&basicauth="+$rootScope.basicAuthToken;
+                           
+                         } 
+              
                         //NVRDataModel.log("selected frame is " + $scope.slideIndex);
                         //console.log("URL TO DISPLAY " + $scope.slides[$scope.slideIndex].img);
                         e.preventDefault();
@@ -787,8 +835,21 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                         tempVar -= 10;
                         if (tempVar < 0) tempVar = 0;
                         $scope.slideIndex = tempVar;
-
-                        $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+                        
+                        if ($scope.event.Event.imageMode=='path') {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+                        }
+                        else {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&eid=" + $scope.eventId + "&fid="  + $scope.slides[$scope.slideIndex].id;
+                        }
+                        if ($rootScope.authSession !='undefined'){
+                            $scope.selectEventUrl +=$rootScope.authSession;
+                           
+                         } 
+                         if ($rootScope.basicAuthToken) {
+                             $scope.selectEventUrl +="&basicauth="+$rootScope.basicAuthToken;
+                           
+                         } 
                         //NVRDataModel.log("selected frame is " + $scope.slideIndex);
 
                         e.preventDefault();
@@ -805,7 +866,21 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                         if (tempVar > $scope.slideLastIndex) tempVar = $scope.slideLastIndex;
                         $scope.slideIndex = tempVar;
                         if ($scope.slideIndex < $scope.slideLastIndex) $scope.slideIndex++;
-                        $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+
+                       if ($scope.event.Event.imageMode=='path') {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&path=" + $scope.relativePath + $scope.slides[$scope.slideIndex].img;
+                        }
+                        else {
+                            $scope.selectEventUrl = $scope.playbackURL + '/index.php?view=image&rand=' + $rootScope.rand + "&eid=" + $scope.eventId + "&fid="  + $scope.slides[$scope.slideIndex].id;
+                        }
+                        if ($rootScope.authSession !='undefined'){
+                            $scope.selectEventUrl +=$rootScope.authSession;
+                           
+                         } 
+                         if ($rootScope.basicAuthToken) {
+                             $scope.selectEventUrl +="&basicauth="+$rootScope.basicAuthToken;
+                           
+                         } 
                         //NVRDataModel.log("selected frame is " + $scope.slideIndex);
                         e.preventDefault();
                     }
@@ -935,6 +1010,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         }
     
        //console.log ("STREAM="+stream);
+       if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
         return stream;
 
     };
diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js
index a2fd1ff1..9a21f654 100644
--- a/www/js/LoginCtrl.js
+++ b/www/js/LoginCtrl.js
@@ -553,10 +553,12 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r
 
     if (!$scope.loginData.isUseBasicAuth) {
       $rootScope.basicAuthHeader = '';
+      $rootScope.basicAuthToken = '';
      // console.log ("CLEARING AUTH");
     }
     else {
-      $rootScope.basicAuthHeader = 'Basic ' + btoa($scope.loginData.basicAuthUser+':'+$scope.loginData.basicAuthPassword);
+      $rootScope.basicAuthToken = btoa($scope.loginData.basicAuthUser+':'+$scope.loginData.basicAuthPassword);
+      $rootScope.basicAuthHeader = 'Basic ' + $rootScope.basicAuthToken ;
 
     }
 
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js
index b5bfdd92..ed81cd4e 100644
--- a/www/js/MonitorModalCtrl.js
+++ b/www/js/MonitorModalCtrl.js
@@ -225,6 +225,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
   //----------------------------------
   // toggles monitor cycling
   //----------------------------------
+
   $scope.toggleCycle = function () {
     //console.log ("HERE");
     $scope.isCycle = !$scope.isCycle;
@@ -1079,8 +1080,17 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
     var canvas, context, imageDataUrl, imageData;
     var loginData = NVRDataModel.getLogin();
     var url = loginData.streamingurl +
-      '/zms?mode=single&monitor=' + mid +
-      $rootScope.authSession;
+      '/zms?mode=single&monitor=' + mid;
+
+      if ($rootScope.authSession !='undefined'){
+        url +=$rootScope.authSession;
+       
+     } 
+     if ($rootScope.basicAuthToken) {
+         url +="&basicauth="+$rootScope.basicAuthToken;
+       
+     } 
+
     NVRDataModel.log("SavetoPhone:Trying to save image from " + url);
 
     var img = new Image();
@@ -1143,6 +1153,8 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
                 
         //console.log ("STREAM="+stream);
 
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+
         return stream;
 
 
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 40497af7..be20a340 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -1713,6 +1713,10 @@ angular.module('zmApp.controllers')
         "&buffer=1000" +
         $rootScope.authSession +
         appendConnKey(monitor.Monitor.connKey);
+      
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+
+      
 //"&rand=" + randToAvoidCacheMem;
       //"&rand="+$scope.randToAvoidCacheMem +
       
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index e7a7e2cd..d442b47d 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -49,6 +49,25 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         }
     };
 
+
+    $scope.constructFrames = function (event,alarm) {
+
+        var stream = "";
+        if (event.Event.imageMode=='path') {
+            stream = event.Event.baseURL + "/index.php?view=image" +
+                    "&path="+event.Event.relativePath+alarm.fname +
+                    "&height=380";
+        }
+        else if (event.Event.imageMode == 'fid') {
+            stream = event.Event.baseURL + "/index.php?view=image" +
+                    "&fid="+alarm.id;
+
+        }
+        if ($rootScope.authSession !='undefined') stream+=$rootScope.authSession;
+        if ($rootScope.basicAuthToken) stream +="&basicauth="+$rootScope.basicAuthToken;
+        return stream;
+    };
+
     //-------------------------------------------------------
     // we use this to reload the connkey if authkey changed
     //------------------------------------------------------
diff --git a/www/templates/events.html b/www/templates/events.html
index 711c2633..c9ec2815 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -102,7 +102,7 @@
               <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->
 
               <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#6C7A89" width="{{event.Event.thumbWidth}}px"
-                height="{{event.Event.thumbHeight}}px" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{event.Event.MaxScoreFrameId}}&width={{event.Event.thumbWidth*2}}&height={{event.Event.thumbHeight*2}}"
+                height="{{event.Event.thumbHeight}}px" ng-src="{{constructThumbnail(event)}}"
                 on-tap="closeIfOpen(event);openModalWithSnapshot(event)" />
               <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->
 
@@ -171,15 +171,12 @@
                         <span translate="kFrame"></span>:{{alarm.frameid}},
                         <span translate="kScore"></span>:{{alarm.score}},
                         <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption>
-                      <img ng-if="event.Event.imageMode=='path'" ng-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{outlineMotion? alarm.aname:alarm.fname}}&height=380"
-                        fallback-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"
+                      <img ng-src="{{constructAlarmFrame(event,alarm,true)}}" 
+                        fallback-src="{{constructAlarmFrame(event,alarm,false)}}"
                         style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
                       />
 
-                      <img ng-if="event.Event.imageMode=='fid'" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}{{outlineMotionParam}}"
-                        fallback-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px"
-                        on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)"
-                      />
+                
                     </figure>
                   </span>
                 </ion-scroll>
@@ -202,10 +199,9 @@
                   <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index"
                     rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
                     <li ng-repeat="slide in slides">
-                      <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380"
-                        image-spinner-loader="lines" height="190px" ;/>
-                      <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}"
+                      <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{constructScrubFrame(event,slide)}}"
                         image-spinner-loader="lines" height="190px" ;/>
+                    
                       <br/>
                     </li>
                   </ul>
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index afed79f5..d3e4592e 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -25,12 +25,9 @@
                                 
                             <figure style="display:inline-block">
                                 <figcaption class="smallnote">f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</figcaption>       
-                                <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)" image-spinner-loader="lines"/>
+                                <img image-spinner-src="{{constructFrames(event,alarm)}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)" image-spinner-loader="lines"/>
                                                 
-                                <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.fid, event.Event.Id, event.Event.imageMode, alarm.id)" image-spinner-loader="lines"/>
-                                                  
-
-
+                              
                                 </figure>
 
                         </span>