#624 modal alarm thumbnail navigation

3 files changed, 76 insertions, 8 deletions

diff --git a/www/img/frameerror.png b/www/img/frameerror.png
new file mode 100644
index 00000000..ef39b8c8
--- /dev/null
+++ b/www/img/frameerror.png
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index d7bbfee8..7c78d1f8 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -980,6 +980,12 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         $scope.isModalActive = true;
     };
 
+
+    $scope.changeSnapshot = function(id) {
+        $scope.snapshotFrameId  = id;
+        maxAlarmFid = 0;
+    };
+
     $scope.constructStream = function (monitor) {
 
 
@@ -994,9 +1000,9 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         } 
         else if (currentStreamState == streamState.SNAPSHOT) {
             stream = $scope.loginData.url +
-            "/index.php?view=image" +
+            "/index.php?view=image" + 
 
-            (maxAlarmFid? "&fid="+maxAlarmFid: "&eid="+$scope.eventId+"&fid=1") +
+            (maxAlarmFid? "&fid="+maxAlarmFid: "&eid="+$scope.eventId+"&fid="+$scope.snapshotFrameId) +
             "&scale="+$scope.singleImageQuality + 
             $rootScope.authSession ;
         }
@@ -1012,6 +1018,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         }
     
        //console.log ("STREAM="+stream);
+       //console.log ("EID="+$scope.eventId);
        if ($rootScope.basicAuthToken && stream) stream +="&basicauth="+$rootScope.basicAuthToken;
         return stream;
 
@@ -1041,7 +1048,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     $scope.$on('$ionicView.beforeEnter', function()
     {
-       
+        $scope.alarm_images = [];
+        $scope.snapshotFrameId = 1;
         currentStreamState = streamState.STOPPED;
 
     });
@@ -1575,6 +1583,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     $scope.onSwipeEvent = function(eid, dirn)
     {
 
+        console.log ("CALLED WITH "+eid+" dirn "+dirn);
         if ($ionicScrollDelegate.$getByHandle("imgscroll").getScrollPosition().zoom != 1)
         {
             //console.log("Image is zoomed in - not honoring swipe");
@@ -1601,6 +1610,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     function jumpToEvent(eid, dirn)
     {
         maxAlarmFid = 0;
+        $scope.snapshotFrameId = 1;
         var oState;
         NVRDataModel.log("HERE: Event jump called with:" + eid);
         if (eid == "")
@@ -1950,6 +1960,47 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
         }
     }
 
+    function computeAlarmFrames(data) {
+        $scope.alarm_images = [];
+        tempAlarms = [];
+        $scope.FrameArray = data.event.Frame;
+
+        for (i = 0; i < data.event.Frame.length; i++)
+        {
+            if (data.event.Frame[i].Type == "Alarm")
+            {
+
+               // console.log ("**ONLY ALARM AT " + i + "of " + data.event.Frame.length);
+                
+                tempAlarms.push(
+                {
+                    
+                    id: data.event.Frame[i].Id,
+                    frameid: data.event.Frame[i].FrameId,
+                });
+               
+            }
+
+        }
+        if (tempAlarms.length > 1) // don't do it for just one too
+            $scope.alarm_images = tempAlarms;
+        
+    }
+
+    $scope.constructFrame = function (fid) {
+
+        var frame = "";
+        frame = currentEvent.Event.baseURL+"/index.php?view=image" +
+            "&eid="+currentEvent.Event.Id + 
+            "&fid="+fid +
+            "&height="+200;
+
+        if ($rootScope.authSession != 'undefined') frame +=$rootScope.authSession;
+        frame += NVRDataModel.insertBasicAuthToken();
+       // console.log (frame);
+        return frame;
+    };
+
     //--------------------------------------------------------
     // Called by openModal as well as jump to event
     // what it basically does is get a detailed event API
@@ -1983,6 +2034,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                     var event = success.data.event;
                     currentEvent = event;
 
+                    computeAlarmFrames(success.data);
                     $scope.eventWarning = '';
 
                     if (!event.Event.EndTime && showLive) {
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a00e9305..4cd1bf38 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -3,9 +3,22 @@
     <ion-modal-view cache-view="false">
         <ion-content style="background-color:#444444" ng-cloak>
 
-                
+        
+            <!-- alarm frames in snapshot-->
+            <div ng-if="isSnapShot() && !liveFeedMid">
+                    <ion-scroll direction="x" overflow-scroll="false" >
+                    <div style="white-space:nowrap;">
+                        <span ng-repeat="alarm in alarm_images">
+                                <figure class="animated slideInLeft" style="display:inline-block">
+                                        <img ng-src="{{constructFrame(alarm.frameid)}}" fallback-src="img/frameerror.png" style="width: auto; height: auto;max-width: 100%;max-height: 100px" ng-click="changeSnapshot(alarm.frameid)" />  
+                                </figure>  
+                            </span>
+                        </div>
 
-            <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" overflow-scroll="false">
+                    </ion-scroll>
+            </div>
+
+            <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" delegate-handle="imgscroll" overflow-scroll="false" scrollbar-x="false" scrollbar-y="false">
                 <div id="full-screen-event" style="height: 100vh;">
  
                     <div ng-if="defaultVideo=='' || isSnapShot()">
@@ -15,13 +28,16 @@
                                 <div ng-if="isSnapShot() && !liveFeedMid" class="event-modal-play">
                                         <button class="button button-assertive icon ion-play" ng-click="convertSnapShotToStream()">&nbsp;{{'kPlay'|translate}}</button>
                                 </div>
+
+                                
+
                                 <div ng-if="isSnapShot() && !liveFeedMid">
                                     <div class="events-range-modal-text">{{mName}}&nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{videoDynamicTime}} ({{humanizeTime}}) [{{d_eventId}}] <span class="events-range-modal-warning-text">{{eventWarning}}</span> </div>
                                 </div>
 
                             <img ng-if="!liveFeedMid" image-spinner-src="{{constructStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
                             img-spinner-w="1024" img-spinner-h="768" image-spinner-loader="lines" 
-                            imageonload="modalImageLoaded()"
+                            imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" 
                             />
 
 
@@ -29,7 +45,7 @@
                                 <img  image-spinner-src="{{loginData.streamingurl}}/nph-zms?mode=jpeg&monitor={{liveFeedMid}}&connkey={{connKey}}{{$root.authSession}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" on-double-tap="closeModal();"
                                 img-spinner-w="1024" img-spinner-h="768"
                                 image-spinner-loader="lines"
-                                imageonload="modalImageLoaded()"
+                                imageonload="modalImageLoaded()" on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)" 
                                 />
                                 <div class="events-range-modal-text"><span class="events-range-modal-warning-text">{{eventWarning}}</span> </div>
                             </div>
@@ -46,7 +62,7 @@
                         <div ng-if="videoIsReady">
                         
                            <!-- <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">-->
-                            <div ng-style="{'height':$root.devHeight+'px', 'width':$root.devWidth+'px'}">
+                            <div on-swipe-left="onSwipeEvent(nextId,1)" on-swipe-right="onSwipeEvent(prevId,-1)"  ng-style="{'height':$root.devHeight+'px', 'width':$root.devWidth+'px'}">
                             
                                 <videogular  vg-can-play="onCanPlay()"  vg-native-fullscreen="videoObject.config.nativeFullScreen" vg-player-ready="onPlayerReady($API)" 
                                 vg-update-playback="onPlaybackUpdate($playBack)"