#606 allow event-modal to move from snapshot to play for better moment control

7 files changed, 165 insertions, 91 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 05daf5f0..4ac38097 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -330,6 +330,58 @@ angular.module('zmApp.controllers')
       }
 
 
+      function getAuthKey (mid,ck) {
+        var d = $q.defer();
+          var as = 'undefined';
+
+          if (!mid) {
+            log("Deferring auth key, as monitorId unknown");
+            d.resolve("undefined");
+            $rootScope.authSession = as;
+            return (d.promise);
+          }
+
+          // Skipping monitor number as I only need an auth key
+          // so no need to generate an image
+          var myurl = loginData.url + "/index.php?view=watch&mid=" + mid ;
+          debug("DataModel: Getting auth from " + myurl + " with mid=" + mid);
+          $http.get(myurl)
+            .then(function (success) {
+                // console.log ("**** RESULT IS " + JSON.stringify(success));
+                // Look for auth=
+                var auth = success.data.match("auth=(.*?)&");
+                if (auth && (auth[1] != null)) {
+                  log("DataModel: Extracted a stream authentication key of: " + auth[1]);
+                  as = "&auth="+auth[1];
+                  $rootScope.authSession = as;
+                  d.resolve(as);
+                } else {
+                  log("DataModel: Did not find a stream auth key, looking for user=");
+                  auth = success.data.match("user=(.*?)&");
+                  if (auth && (auth[1] != null)) {
+                    log("DataModel: Found simple stream auth mode (user=)");
+                    as = "&user=" + loginData.username + "&pass=" + loginData.password;
+                    $rootScope.authSession = as;
+                    d.resolve(as);
+                  } else {
+                    log("Data Model: Did not find any  stream mode of auth");
+                    as="";
+                    d.resolve(as);
+                  }
+                
+                  return (d.promise);
+                }
+
+              },
+              function (error) {
+                log("DataModel: Error resolving auth key " + JSON.stringify(error));
+                d.resolve("undefined");
+                return (d.promise);
+              });
+          return (d.promise);
+
+      }
+
       function log(val, logtype) {
 
 
@@ -1437,47 +1489,7 @@ angular.module('zmApp.controllers')
         // need a mid as restricted users won't be able to get
         // auth with just &watch
         getAuthKey: function (mid, ck) {
-          var d = $q.defer();
-
-          if (!mid) {
-            log("Deferring auth key, as monitorId unknown");
-            d.resolve("");
-            return (d.promise);
-          }
-
-          // Skipping monitor number as I only need an auth key
-          // so no need to generate an image
-          var myurl = loginData.url + "/index.php?view=watch&mid=" + mid ;
-          debug("DataModel: Getting auth from " + myurl + " with mid=" + mid);
-          $http.get(myurl)
-            .then(function (success) {
-                // console.log ("**** RESULT IS " + JSON.stringify(success));
-                // Look for auth=
-                var auth = success.data.match("auth=(.*?)&");
-                if (auth && (auth[1] != null)) {
-                  log("DataModel: Extracted a stream authentication key of: " + auth[1]);
-                  d.resolve("&auth=" + auth[1]);
-                } else {
-                  log("DataModel: Did not find a stream auth key, looking for user=");
-                  auth = success.data.match("user=(.*?)&");
-                  if (auth && (auth[1] != null)) {
-                    log("DataModel: Found simple stream auth mode (user=)");
-                    d.resolve("&user=" + loginData.username + "&pass=" + loginData.password);
-                  } else {
-                    log("Data Model: Did not find any  stream mode of auth");
-                    d.resolve("");
-                  }
-                  return (d.promise);
-                }
-
-              },
-              function (error) {
-                log("DataModel: Error resolving auth key " + JSON.stringify(error));
-                d.resolve("");
-                return (d.promise);
-              });
-          return (d.promise);
-
+          return getAuthKey (mid,ck);
         },
 
         //-----------------------------------------------------------------------------
@@ -1738,6 +1750,11 @@ angular.module('zmApp.controllers')
                   .success(function (data) {
                     //console.log("HTTP success got " + JSON.stringify(data.monitors));
                     monitors = data.monitors;
+
+                    if ($rootScope.authSession == 'undefined') {
+                      log ("Now that we have monitors, lets get AuthKey...");
+                      getAuthKey(monitors[0].Monitor.Id, (Math.floor((Math.random() * 999999) + 1)).toString())
+                    }
                     monitors.sort(function (a, b) {
                       return parseInt(a.Monitor.Sequence) - parseInt(b.Monitor.Sequence);
                     });
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 423de0d2..45b750b2 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -2896,13 +2896,6 @@ angular.module('zmApp.controllers')
             {
                 $scope.modal = modal;
 
-                $ionicLoading.show(
-                {
-                    template: $translate.instant('kPleaseWait') + "...",
-                    noBackdrop: true,
-                    duration: 10000
-                });
-
                 $scope.modal.show();
 
                 var ld = NVRDataModel.getLogin();
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index d6a540ea..1b95c5f3 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -6,6 +6,12 @@
 angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', '$filter', 'SecuredPopups', function($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate, $filter, SecuredPopups)
 {
 
+
+    const streamState = {
+        SNAPSHOT:1,
+        ACTIVE:2,
+        STOPPED:3
+    };
     // from parent scope
     var currentEvent = $scope.currentEvent;
     var nphTimer;
@@ -17,8 +23,13 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     var gEvent;
     var handle;
     var showLive = true;
+    var maxAlarmFid = 0;
+
+
+
     var broadcastHandles = [];
-    var isStreamPaused = true;
+    var currentStreamState = streamState.STOPPED;
+ 
 
     var framearray = {
 
@@ -66,16 +77,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     document.addEventListener("pause", onPause, false);
     document.addEventListener("resume", onResume, false);
 
-    $rootScope.authSession = "undefined";
-    $ionicLoading.show(
-    {
-        template: $translate.instant('kNegotiatingStreamAuth'),
-        animation: 'fade-in',
-        showBackdrop: true,
-        duration: zm.loadingTimeout,
-        maxWidth: 300,
-        showDelay: 0
-    });
+    
     var ld = NVRDataModel.getLogin();
 
     $scope.currentStreamMode = ld.gapless ? 'gapless' : 'single';
@@ -87,7 +89,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     NVRDataModel.debug("Setting playback to " + $scope.streamMode);
 
     $rootScope.validMonitorId = $scope.monitors[0].Monitor.Id;
-    NVRDataModel.getAuthKey($rootScope.validMonitorId, (Math.floor((Math.random() * 999999) + 1)).toString())
+
+   /* NVRDataModel.getAuthKey($rootScope.validMonitorId, (Math.floor((Math.random() * 999999) + 1)).toString())
         .then(function(success)
             {
                 $ionicLoading.hide();
@@ -102,7 +105,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
                 NVRDataModel.debug("ModalCtrl: Error details of stream auth:" + error);
                 //$rootScope.authSession="";
                 NVRDataModel.log("Modal: Error returned Stream authentication construction. Retaining old value of: " + $rootScope.authSession);
-            });
+            });*/
+    
 
     //--------------------------------------------------------------------------------------
     // Handles bandwidth change, if required
@@ -251,6 +255,8 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
     function checkEvent()
     {
 
+        if (currentStreamState == streamState.SNAPSHOT) return;
+
         if ($scope.modalFromTimelineIsOpen == false)
         {
             NVRDataModel.log("Modal was closed in timeline, cancelling timer");
@@ -910,8 +916,48 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     $scope.constructStream = function (monitor) {
 
+
+       
+        var stream="";
+        // eventId gets populated when prepareModal completes
+        // if maxAlarmFrame was not set and we don't have an eventID yet,
+        // we can't show a snapshot
+        if (currentStreamState == streamState.STOPPED || (maxAlarmFid == 0 && !$scope.eventId)) {
+            stream="";
+        } 
+        else if (currentStreamState == streamState.SNAPSHOT) {
+            stream = $scope.loginData.url +
+            "/index.php?view=image" +
+
+            (maxAlarmFid? "&fid="+maxAlarmFid: "&eid="+$scope.eventId+"&fid=1") +
+            "&scale="+$scope.singleImageQuality + 
+            $rootScope.authSession 
+        }
+        else if (currentStreamState == streamState.ACTIVE) {
+            stream = $scope.loginData.streamingurl +
+            "/nph-zms?source=event&mode=jpeg" +
+            "&event="+$scope.eventId+"&frame=1" +
+            "&replay="+$scope.currentStreamMode +
+            "&rate=100" +
+            "&connkey="+$scope.connKey + 
+            "&scale="+$scope.singleImageQuality + 
+            $rootScope.authSession 
+        }
+    
+       // console.log ("STREAM="+stream);
+        return stream;
+
     };
 
+    $scope.isSnapShot = function () {
+       // console.log (currentStreamState);
+        return currentStreamState == streamState.SNAPSHOT;
+    };
+
+    $scope.convertSnapShotToStream = function() {
+        currentStreamState = streamState.ACTIVE;
+    }; 
+
     $scope.scaleImage = function()
     {
 
@@ -921,23 +967,35 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     $scope.$on('$ionicView.beforeEnter', function()
     {
-        //console.log (">>>>>>>>>>>>>>>>>>>> MODAL VIEW ENTER");
-        isStreamPaused = true;
+       
+        currentStreamState = streamState.STOPPED;
 
     });
 
-    $scope.imageLoaded = function() {
-        isStreamPaused = false;
-    }
+    $scope.modalImageLoaded = function() {
+        console.log ("MODAL IMAGE LOADED");
+        if (m.snapshot != 'enabled') currentStreamState = streamState.ACTIVE;
+    };
 
     $scope.$on('modal.shown', function(e, m)
     {
 
+        console.log ("AUTH="+$rootScope.authSession);
         if (m.id != 'footage')
 
             return;
 
         showLive = true;
+
+        if (m.snapshot == 'enabled') {
+            currentStreamState = streamState.SNAPSHOT;
+            maxAlarmFid = m.snapshotId;
+          
+        }
+
+        else currentStreamState  = streamState.ACTIVE;
+
+    
         if (m.showLive == 'disabled') {
             showLive = false;
             NVRDataModel.debug ("I was explictly asked not to show live, cross my fingers...");
diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js
index 4a0d41ec..635e79b5 100644
--- a/www/js/MomentCtrl.js
+++ b/www/js/MomentCtrl.js
@@ -589,15 +589,14 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
         animation: 'slide-in-up',
         id: 'footage',
         showLive:sl, 
+        snapshot: 'enabled',
+        snapshotId:event.Event.MaxScoreFrameId,
+
       })
       .then(function (modal) {
         $scope.modal = modal;
 
-        $ionicLoading.show({
-          template: $translate.instant('kPleaseWait') + "...",
-          noBackdrop: true,
-          duration: 10000
-        });
+        
 
         $scope.modal.show();
 
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 928a15b9..74842c08 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -420,13 +420,6 @@ angular.module('zmApp.controllers')
                     .then(function(modal)
                     {
                         $scope.modal = modal;
-
-                        $ionicLoading.show(
-                        {
-                            template: $translate.instant('kPleaseWait') + "...",
-                            noBackdrop: true,
-                            duration: zm.loadingTimeout
-                        });
                         $scope.isModalActive = true;
                         $scope.modal.show();
                     });
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 2ff00d64..3830dcf4 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -106,6 +106,7 @@
     "kEventNotificationUrl"      :"event notification url",
     "kEventRecording"            :"Event Recording",
     "kEventServer"               :"Event Server",
+    "kEventServerConnErr"        :"Event Server connection error",
     "kEventServerConfig1"        :"Please make sure your ZM settings are configured and saved before you configure the event server",
     "kEventServerNotLoggedIn"    :"You are not yet logged in. Please make sure you have logged in successfully  (save your login data, and ensure login is successful)",
     "kEventServerVersionBody1"   :"You are running version",
@@ -275,6 +276,7 @@
     "kPlaceHolderBasicAuthUser"  :"basic auth user name",
     "kPlaceHolderZMAuthPass"     :"zm auth password",
     "kPlaceHolderZMAuthUser"     :"zm auth user name",
+    "kPlay"                      : "Play",
     "kPlaybackInterval"          :"playback interval",
     "kPleaseAuthenticate"        :"Please Authenticate",
     "kPleaseCheckCredentials"    :"Please check your credentials",
@@ -390,6 +392,7 @@
     "kUseSSL"                    :"Use SSL",
     "kUseVideoControls"          :"Please use video player controls for H264 events. ZoneMinder doesn't yet support zms controls",
     "kUseZmAuth"                 :"use ZM authentication",
+    "kUseBasicAuth"              : "use basic authentication",
     "kUserName"                  :"user name",
     "kValidNameBasicAuth"        :"Please enter a valid username and password for basic auth",
     "kValidNameZMAuth"           :"Please enter a valid username and password for ZM auth",
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 7d59995b..f070fe9b 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -2,23 +2,32 @@
     <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
     <ion-modal-view cache-view="false">
         <ion-content style="background-color:#444444" ng-cloak>
+
+                
+
             <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">
                 <div id="full-screen-event" style="height: 100vh;">
                     <!--<div>-->
                     <!-- route via ZMS -->
-                    <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true)">
+                    <div ng-if="defaultVideo=='' || isSnapShot()">
                         <!--<div style="color:white">connkey:{{connKey}}</div>-->
                         <div style="width:100vw; height:100vh;">
-                            <img ng-if="!liveFeedMid" image-spinner-src="{{loginData.streamingurl}}/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&replay={{currentStreamMode}}&rate=100&connkey={{connKey}}&scale={{singleImageQuality}}{{$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"
-                            onload="imageLoaded()"
+
+                                <div ng-if="isSnapShot()" class="event-modal-play">
+                                        <button class="button button-assertive icon ion-play" ng-click="convertSnapShotToStream()">&nbsp;{{'kPlay'|translate}}</button>
+                                </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" 
+                            onload="modalImageLoaded()"
                             />
 
 
                             <div ng-if="liveFeedMid">
                                 <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"
-                                onload="imageLoaded()"
+                                image-spinner-loader="lines"
+                                onload="modalImageLoaded()"
                                 />
                                 <div class="events-range-modal-text"><span class="events-range-modal-warning-text">{{eventWarning}}</span> </div>
                             </div>
@@ -31,12 +40,9 @@
                         </div>
                     </div>
                     <!-- no default video -->
-                    <div ng-if="defaultVideo!==undefined && defaultVideo!='' && loginData.enableh264 == true">
+                    <div ng-if="defaultVideo!==undefined && defaultVideo!='' && !isSnapShot()">
                         <div ng-if="videoIsReady">
-
-                            
-
-
+                        
                             <div style="height:{{$root.devHeight}}px; width:{{$root.devWidth}}px;">
                             
                             <!--
@@ -82,7 +88,9 @@
                 </div>
                 <!-- 100vh -->
             </ion-scroll>
-            <div ng-if="( (defaultVideo=='') || (loginData.enableh264==false)) && (loginData.useNphZmsForEvents==true) && !liveFeedMid">
+
+            
+            <div ng-show="defaultVideo=='' && !liveFeedMid && !isSnapShot()">
                 <div id="event_canvas">
                     <canvas style="padding-left:23px;
                         padding-right:23px;" id="eventchart" width="auto" height="20"></canvas>
@@ -98,11 +106,14 @@
                 </div>
             </div>
             
+          
+        
         </ion-content>
     </ion-modal-view>
 
   
-    <div ng-if="!liveFeedMid">
+   
+    <div ng-show="!liveFeedMid && !isSnapShot()">
         <nav mfb-menu position="tr" effect="zoomin" label="{{'kCollapse'|translate}}" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
             <a mfb-button icon="ion-arrow-right-c" label="{{'kNextEvent'|translate}}" ng-click="jumpToEvent(nextId,1);"></a>
             <a mfb-button icon="ion-arrow-left-c" label="{{'kPrevEvent'|translate}}" ng-click="jumpToEvent(prevId,-1);"></a>
@@ -135,5 +146,5 @@
                 </li>
             </ul>
         </div>
-    </div> <!-- not live feed -->
+    </div> <!-- not live feed or snapshot -->
 </div>