select event view thumbnails type, replaces enableThumbs in dev options.

Enables selection of different thumbnail types.
If gif is selected limit the number of events returned to 5 to improve load time.

5 files changed, 50 insertions, 21 deletions

diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index 2ad40bfa..d735f967 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -181,6 +181,35 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
     });
   };
 
+  $scope.selectEventViewThumbs = function() {
+
+    var buttons = [
+      { text: $translate.instant('kNone').toLowerCase(), value:'none' },
+      { text: 'snapshot', value:'snapshot' },
+      { text: 'objdetect', value:'objdetect' },
+      { text: 'objdetect_jpg', value:'objdetect_jpg' },
+      { text: 'objdetect_gif', value:'objdetect_gif' },
+
+    ];
+
+    $ionicActionSheet.show({
+      titleText: $translate.instant('kSelect'),
+      buttons: buttons,
+
+      cancelText: $translate.instant('kButtonCancel'),
+      cancel: function() {
+       NVR.debug ('obfuscation actionsheet cancelled');
+      },
+      buttonClicked: function(index) {
+
+        $scope.loginData.eventViewThumbs = buttons[index].value;
+        NVR.debug ('changed event view thumbs to:'+$scope.loginData.eventViewThumbs );
+        return true;
+      },
+
+    });
+  };
+
   $scope.saveDevOptions = function () {
 
     saveDevOptions();
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 7f0aeb5d..359db3d5 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -458,6 +458,11 @@ angular.module('zmApp.controllers')
       NVR.debug("EventCtrl: grabbing events for: id=" + $scope.id + " Date/Time:" + $rootScope.fromString +
         "-" + $rootScope.toString);
 
+      if ($scope.loginData.eventViewThumbs != 'objdetect_gif') {
+          maxEventsToLoad = 50; //limit to 5 to minimise memory usage when displaying gifs
+      }
+      NVR.debug("maxEventsToLoad: " + maxEventsToLoad);
+
       NVR.getEvents($scope.id, currEventsPage, "", nolangFrom, nolangTo, false, $rootScope.monitorsFilter)
         .then(function (data) {
          // console.log(JSON.stringify(data.pagination));
@@ -475,13 +480,12 @@ angular.module('zmApp.controllers')
           //$scope.events = data.events;
           // we only need to stop the template from loading when the list is empty
           // so this can be false once we have _some_ content
-          // FIXME: check reload
           $scope.eventsBeingLoaded = false;
           moreEvents = true;
           // to avoid only few events being displayed
           // if last page has less events
           //console.log("**Loading Next Page ***");
-          if ($scope.events < 5) {
+          if ($scope.events < maxEventsToLoad) {
             //console.log ("EVENTS LOADED="+JSON.stringify($scope.events));
             NVR.debug("EventCtrl:loading one more page just in case we don't have enough to display");
             loadMore();
@@ -2861,6 +2865,7 @@ angular.module('zmApp.controllers')
         currentPageLength = myevents.length;
         var eventsLoaded = 0;
         var prevPagePosition = currentPagePosition;
+        NVR.debug("maxEventsToLoad: " + maxEventsToLoad);
         for (currentPagePosition; currentPagePosition < myevents.length && eventsLoaded < maxEventsToLoad; currentPagePosition++) {
             var idfound = true;
             if (loginData.persistMontageOrder) {
@@ -3014,14 +3019,14 @@ angular.module('zmApp.controllers')
       var stream = "";
       //console.log(event.Event.Notes);
       var snapshotFrame = NVR.getSnapshotFrame();
-      if (NVR.getSnapshotFrame() == 'objdetect' && !event.Event.Notes.includes("detected:")) {
-          snapshotFrame = 'snapshot';
+      if (($scope.loginData.eventViewThumbs.substring(0, 9) == 'objdetect') && event.Event.Notes.includes("detected:")) {
+          snapshotFrame = $scope.loginData.eventViewThumbs;
       }
       stream = event.Event.recordingURL +
         "/index.php?view=image&fid=" +
         snapshotFrame+"&eid="+event.Event.Id  +
-        "&width=" + event.Event.thumbWidth +
-        "&height=" + event.Event.thumbHeight;
+        "&width=" + event.Event.thumbWidth * 2 +
+        "&height=" + event.Event.thumbHeight * 2;
       stream += $rootScope.authSession;
 
       stream += NVR.insertSpecialTokens();
diff --git a/www/js/NVR.js b/www/js/NVR.js
index a9b552e7..5bdc23b9 100644
--- a/www/js/NVR.js
+++ b/www/js/NVR.js
@@ -188,7 +188,6 @@ angular.module('zmApp.controllers')
         'timelineScale': -1,
         'hideArchived': false,
         'videoPlaybackSpeed': 2,
-        'enableThumbs': true,
         'enableStrictSSL': false,
         'enableSlowLoading': false,
         'isFullScreen': false,
@@ -1562,10 +1561,9 @@ angular.module('zmApp.controllers')
         }
 
 
+        if (typeof loginData.eventViewThumbs == 'undefined') {
 
-        if (typeof loginData.enableThumbs == 'undefined') {
-
-          loginData.enableThumbs = true;
+          loginData.eventViewThumbs = 'snapshot';
 
         }
 
@@ -2674,10 +2672,7 @@ angular.module('zmApp.controllers')
                   //console.log("API VERSION RETURNED: " + JSON.stringify(success));
                   $rootScope.apiValid = true;
 
-                  if (versionCompare(success.data.version, '1.34.0') != -1) {
-                    debug("objdetect supported in image.php");
-                    snapshotFrame = 'objdetect';
-                  } else if (versionCompare(success.data.version, '1.32.0') != -1) {
+                  if (versionCompare(success.data.version, '1.32.0') != -1) {
                     debug("snapshot  supported in image.php");
                     snapshotFrame = 'snapshot';
                   } else {
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 435c4c40..00361460 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -189,12 +189,13 @@
         </ion-toggle>
       </label>
 
-
       <label>
-        <ion-toggle ng-model="loginData.enableThumbs" toggle-class="toggle-calm">
-          <span class="item-text-wrap">{{'kEnableThumbs' | translate}}
-          </span>
-        </ion-toggle>
+        <div class="item item-button-right">
+          {{'kEnableThumbs' | translate}}: <button class="button button-calm" ng-click="selectEventViewThumbs()">
+            <i class="icon ion-gear-b"></i>
+          </button>
+          <p>{{loginData.eventViewThumbs}}</p>
+        </div>
       </label>
 
       <label>
diff --git a/www/templates/events.html b/www/templates/events.html
index 83ee4f00..00fd0951 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -45,7 +45,7 @@
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
           <div class="row" style="font-size:90%;">
-            <div ng-if="loginData.enableThumbs" style="margin-left: auto;margin-right: auto;">
+            <div ng-if="loginData.eventViewThumbs!='none'" style="margin-left: auto;margin-right: auto;">
 
 
               <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
@@ -86,7 +86,6 @@
 
               <b>
                 <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
-              <span ng-if="!loginData.enableThumbs">({{event.Event.Id}})</span> &nbsp;
               <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
               <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
               <span style="font-size:80%; color:rgb(110,110,110)">