From 5bb274adac923461f361e683b65c7acbe42df0f9 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Thu, 7 Dec 2017 16:18:29 -0500
Subject: #91 - initial support - needs formatting

---
 www/js/DataModel.js            |  9 ++++++++-
 www/js/EventCtrl.js            | 37 +++++++++++++++++++++++++++++++++++++
 www/lang/locale-en.json        |  1 +
 www/templates/devoptions.html  |  7 +++++++
 www/templates/events.html      |  4 ++++
 www/templates/image-modal.html |  5 +++++
 6 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 www/templates/image-modal.html

(limited to 'www')

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 078a2fe2..4fd3a791 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -164,6 +164,7 @@ angular.module('zmApp.controllers')
         'hideArchived': false,
         'videoPlaybackSpeed': 2,
         'enableGIFMP4': false,
+        'enableThumbs': true,
         'enableStrictSSL': false,
         'enableSlowLoading': false,
         'isFullScreen': false,
@@ -994,10 +995,16 @@ angular.module('zmApp.controllers')
 
                   if (typeof loginData.enableGIFMP4 == 'undefined') {
 
-                    loginData.enableGIFMP4 = true;
+                    loginData.enableGIFMP4 = false;
 
                   }
 
+                  if (typeof loginData.enableThumbs == 'undefined') {
+                    
+                     loginData.enableThumbs = true;
+                    
+                  }
+
                   if (typeof loginData.enableSlowLoading == 'undefined') {
 
                     loginData.enableSlowLoading = false;
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 8a8673e4..3468d988 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -65,9 +65,12 @@ angular.module('zmApp.controllers')
     $scope.typeOfFrames = $translate.instant('kShowTimeDiffFrames');
     $scope.outlineMotion = false;
     $scope.outlineMotionParam = "";
+
+
     var eventsListScrubHeight = eventsListScrubHeight;
     var eventsListDetailsHeight = eventsListDetailsHeight;
 
+   
     //---------------------------------------------------
     // initial code
     //---------------------------------------------------
@@ -148,6 +151,14 @@ angular.module('zmApp.controllers')
         eventsListDetailsHeight = parseInt(zm.eventsListDetailsHeight * $rootScope.textScaleFactor);
         eventsListScrubHeight = parseInt(zm.eventsListScrubHeight * $rootScope.textScaleFactor);
 
+
+        if (NVRDataModel.getLogin().enableThumbs) {
+            NVRDataModel.debug ("--> thumbnail means increasing row size");
+            eventsListScrubHeight=370;
+            eventsListDetailsHeight=300;
+    
+        }
+
         NVRDataModel.debug(">>>height of list/scrub set to " + eventsListDetailsHeight + " and " + eventsListScrubHeight);
 
         pageLoaded = false;
@@ -2682,6 +2693,32 @@ angular.module('zmApp.controllers')
 
     });
 
+
+    
+    $scope.showThumbnail = function (b,f) {
+
+
+        $scope.thumbnailLarge=b+'/index.php?view=image&fid='+f;
+        $ionicModal.fromTemplateUrl('templates/image-modal.html',
+        {
+            scope: $scope,
+            animation: 'slide-in-up',
+            id: 'thumbnail',
+        })
+        .then(function(modal)
+        {
+            $scope.modal = modal;
+            
+
+            $scope.modal.show();
+
+            var ld = NVRDataModel.getLogin();
+
+        });        
+
+    };
+
+
     //--------------------------------------------------------
     //This is called when we first tap on an event to see
     // the feed. It's important to instantiate ionicModal here
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 67926f08..22272ed8 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -80,6 +80,7 @@
     "kEnableNewsUpdates"         :"enable news updates",
     "kEnableSlowLoading"         :"Use large HTTP timeouts",
     "kEnableStrictSSL"           :"Enable strict SSL check",
+    "kEnableThumbs"              :"Enable thumbnails in events list",
     "kEnterPin"                  :"Enter PIN",
     "kError"                     :"Error",
     "kErrorChangingMonitors"     :"Error changing monitors. Please check logs",
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index db1f8887..03b7d7b8 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -128,6 +128,13 @@
                 </ion-toggle>
             </label>
 
+
+            <label>
+                <ion-toggle ng-model="loginData.enableThumbs" ng-checked="loginData.enableThumbs" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableThumbs' | translate}}
+                   </span>
+                </ion-toggle>
+            </label>
+
             <label>
                 <ion-toggle ng-model="loginData.enableSlowLoading" ng-checked="loginData.enableSlowLoading" toggle-class="toggle-calm"><span class="item-text-wrap">{{'kEnableSlowLoading' | translate}}
                    </span>
diff --git a/www/templates/events.html b/www/templates/events.html
index 92610eaf..31af018d 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -75,6 +75,10 @@
                              <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && loginData.enableGIFMP4 " class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)"> 
                             </button>
 
+                            <!-- thumbnail -->
+                            
+                            <img ng-if="loginData.enableThumbs" style="float:right;max-width:150px; max-height:200px;" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{event.Event.MaxScoreFrameId}}" on-tap="showThumbnail(event.Event.baseURL,event.Event.MaxScoreFrameId)" />
+
 
                             </div>
 
diff --git a/www/templates/image-modal.html b/www/templates/image-modal.html
new file mode 100644
index 00000000..2ed126c6
--- /dev/null
+++ b/www/templates/image-modal.html
@@ -0,0 +1,5 @@
+<ion-modal-view cache-view="false" style="background-color:#444444">
+<ion-content>
+  <img on-double-tap="closeModal();"  src="{{thumbnailLarge}}" style="display:block; width:100%"/>
+</ion-content>
+</ion-modal-view>
-- 
cgit v1.2.3