#775 - initial updates

2 files changed, 188 insertions, 12 deletions

diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index 46ad4400..d35994e5 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -3,7 +3,7 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console,ionic,Masonry,moment,Packery, Draggabilly, imagesLoaded, Chart */
 // FIXME: This is a copy of montageCtrl - needs a lot of code cleanup
-angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'NVR', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$translate', 'qHttp', '$q', function ($scope, $rootScope, NVR, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $translate, qHttp, $q) {
+angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'NVR', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$translate', 'qHttp', '$q', '$sce',function ($scope, $rootScope, NVR, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $translate, qHttp, $q, $sce) {
   var broadcastHandles = [];
   var isMultiPort = false;
   $scope.isMultiPort = isMultiPort;
@@ -240,6 +240,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         //$scope.MontageMonitors[i].Monitor.connKey='';
         //$scope.MontageMonitors[i].Monitor.connKey = (Math.floor((Math.random() * 99999) + 1)).toString();
         $scope.MontageMonitors[i].Monitor.eventUrl = 'img/noimage.png';
+        $scope.MontageMonitors[i].Monitor.eventType = "";
         $scope.MontageMonitors[i].Monitor.eid = "-1";
         $scope.MontageMonitors[i].Monitor.eventUrlTime = "";
         $scope.MontageMonitors[i].Monitor.isPaused = false;
@@ -281,6 +282,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         for (i = 0; i < data.events.length; i++) {
           mid = data.events[i].Event.MonitorId;
           eid = data.events[i].Event.Id;
+          
+          var eType = (data.events[i].Event.DefaultVideo != '')? 'video':'jpeg';
+          //console.log ("====SETTING video type to "+eType+" for "+mid);
+
           //console.log ("Event ID:"+eid);
           stime = data.events[i].Event.StartTime;
           // only take the first one for each monitor
@@ -293,7 +298,40 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 //console.log ("ldurl is " + ld.streamingurl);
                 var bw = NVR.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
 
+                if (eType=='video') {
+                  var videoURL= $scope.MontageMonitors[j].Monitor.baseURL  + "/index.php?view=view_video&eid=" + eid;
+
+                  if ($rootScope.authSession != 'undefined') videoURL += $rootScope.authSession;
+                  if ($rootScope.basicAuthToken) videoURL = videoURL + "&basicauth=" + $rootScope.basicAuthToken;
+
+          
+                  $scope.MontageMonitors[j].Monitor.videoObject = {
+                    config: {
+                      autoPlay: true,
+                      responsive: false,
+                      nativeControls: false,
+                      nativeFullScreen: true,
+        
+                      playsInline: true,
+                      sources: [{
+                          src: $sce.trustAsResourceUrl(videoURL),
+                          type: "video/mp4"
+                        }
+        
+                      ],
+        
+                      theme: "lib/videogular-themes-default/videogular.css",
+                      cuepoints: {
+                        theme: {
+                          url: "lib/videogular-cuepoints/cuepoints.css"
+                        },
+                        points: [],
+                      }
+                    }
+                  };
+                }
                 
+                $scope.MontageMonitors[j].Monitor.eventType = eType;
                 $scope.MontageMonitors[j].Monitor.eventUrl = $scope.MontageMonitors[j].Monitor.streamingURL + "/nph-zms?source=event&mode=jpeg&event=" + eid + "&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[j].Monitor.connKey + "&scale=" + bw + $rootScope.authSession;
                 //console.log ("Setting event URL to " +$scope.MontageMonitors[j].Monitor.eventUrl);
                 //   console.log ("SWITCHING TO " + $scope.MontageMonitors[j].eventUrl);
@@ -373,10 +411,46 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
           url: indivGrab
         }).then(function (succ) {
             var data = succ.data;
-            // console.log ("EXPANDED DATA FOR MONITOR " + i + JSON.stringify(data));
+             //console.log ("EXPANDED DATA FOR MONITOR " + i + JSON.stringify(data));
             if (data.events.length > 0) {
               if (!NVR.isBackground()) {
                 var bw = NVR.getBandwidth() == "lowbw" ? zm.eventMontageQualityLowBW : ld.montageHistoryQuality;
+                var eType = data.events[0].Event.DefaultVideo != ''? 'video':'jpeg';
+
+
+                if (eType=='video') {
+                  var videoURL= $scope.MontageMonitors[j].Monitor.baseURL  + "/index.php?view=view_video&eid=" + eid;
+
+                  if ($rootScope.authSession != 'undefined') videoURL += $rootScope.authSession;
+                  if ($rootScope.basicAuthToken) videoURL = videoURL + "&basicauth=" + $rootScope.basicAuthToken;
+
+          
+                  $scope.MontageMonitors[j].Monitor.videoObject = {
+                    config: {
+                      autoPlay: true,
+                      responsive: false,
+                      nativeControls: false,
+                      nativeFullScreen: true,
+        
+                      playsInline: true,
+                      sources: [{
+                          src: $sce.trustAsResourceUrl(videoURL),
+                          type: "video/mp4"
+                        }
+        
+                      ],
+        
+                      theme: "lib/videogular-themes-default/videogular.css",
+                      cuepoints: {
+                        theme: {
+                          url: "lib/videogular-cuepoints/cuepoints.css"
+                        },
+                        points: [],
+                      }
+                    }
+                  };
+                }
+                $scope.MontageMonitors[i].Monitor.eventType = eType;
                 $scope.MontageMonitors[i].Monitor.eventUrl = $scope.MontageMonitors[i].Monitor.streamingURL + "/nph-zms?source=event&mode=jpeg&event=" + data.events[0].Event.Id + "&frame=1&replay=gapless&rate=" + $scope.sliderVal.realRate + "&connkey=" + $scope.MontageMonitors[i].Monitor.connKey + "&scale=" + bw + $rootScope.authSession;
                 //console.log ("SWITCHING TO " + $scope.MontageMonitors[i].eventUrl);
                 $scope.MontageMonitors[i].Monitor.eventUrlTime = data.events[0].Event.StartTime;
@@ -429,10 +503,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
       // don't check for monitors that are not shown
       // because nph connkey won't exist and the response
       // will fail
-      if ($scope.MontageMonitors[i].Monitor.eventUrl != "" && $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noimage.png' && $scope.MontageMonitors[i].Monitor.connKey != '' && $scope.MontageMonitors[i].Monitor.Function != 'None' && $scope.MontageMonitors[i].Monitor.listDisplay != 'noshow' && $scope.MontageMonitors[i].Monitor.Enabled != '0') {
+      if ($scope.MontageMonitors[i].Monitor.eventUrl != "" && $scope.MontageMonitors[i].Monitor.eventUrl != 'img/noimage.png' && $scope.MontageMonitors[i].Monitor.connKey != '' && $scope.MontageMonitors[i].Monitor.Function != 'None' && $scope.MontageMonitors[i].Monitor.listDisplay != 'noshow' && $scope.MontageMonitors[i].Monitor.Enabled != '0' &&
+      $scope.MontageMonitors[i].Monitor.eventType == "jpeg") {
         // NVR.debug("Checking event status for " + $scope.MontageMonitors[i].Monitor.Name + ":" + $scope.MontageMonitors[i].Monitor.eventUrl + ":" + $scope.MontageMonitors[i].Monitor.Function + ":" + $scope.MontageMonitors[i].Monitor.listDisplay);
         // console.log ("Sending query 99 for " + $scope.MontageMonitors[i].Monitor.Name + " with ck="+$scope.MontageMonitors[i].Monitor.connKey);
-        controlEventStream('99', '', $scope.MontageMonitors[i].Monitor.connKey, i);
+       controlEventStream('99', '', $scope.MontageMonitors[i].Monitor.connKey, i);
       }
     }
   }
@@ -526,19 +601,29 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     //console.log ("AUTH IS " + $rootScope.authSession);
     var myauthtoken = $rootScope.authSession.replace("&auth=", "");
     //&auth=
-    var req = qHttp({
+
+    var cmdUrl = loginData.url + '/index.php?view=request&request=stream'+'&connkey='+connkey+'&command='+cmd+$rootScope.authSession;
+    if (extras)
+      cmdUrl = cmdUrl+extras;
+
+    NVR.debug ("Control: Sending "+cmdUrl);
+
+    var req = $http({
+      method: 'GET',
+      url:cmdUrl
+    });
+    
+    /* var req = qHttp({
       method: 'POST',
-      /*timeout: 15000,*/
       url: loginData.url + '/index.php?view=console',
       headers: {
-        'Content-Type': 'application/x-www-form-urlencoded', //'Accept': '*/*',
+        'Content-Type': 'application/x-www-form-urlencoded',
       },
       transformRequest: function (obj) {
         var str = [];
         for (var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
         var foo = str.join("&");
         if (extras) foo = foo + extras;
-        //console.log("****RETURNING " + foo);
         return foo;
       },
       data: {
@@ -549,11 +634,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         auth: myauthtoken, // user: loginData.username,
         // pass: loginData.password
       }
-    });
+    });*/
     req.then(function (succ) {
       var resp = succ.data;
 
-      //console.log ("zms response: " + JSON.stringify(resp));
+      console.log ("zms response: " + JSON.stringify(resp));
 
       // move progress bar if event id is the same
       if (resp.result == "Ok" && ndx != -1 && (resp.status.event == $scope.MontageMonitors[ndx].Monitor.eid)) {
@@ -775,6 +860,40 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     NVR.setLogin(loginData);
     //console.log ("Switching orientation");
   };
+
+  $scope.onVideoError = function (event) {
+    $ionicLoading.hide();
+    NVR.debug("player reported a video error:" + JSON.stringify(event));
+
+  };
+
+  $scope.onPlayerReady = function (api) {
+
+    // we need this timeout to avoid load interrupting
+    // play -- I suppose its an angular digest foo thing
+    //console.log ("*********** ON PLAY READY");
+    var handle;
+    NVR.debug("On Play Ready invoked");
+    handle = api;
+    handle.mediaElement.attr("playsinline", "");
+
+    $ionicLoading.show({
+      template: "<ion-spinner icon='ripple' class='spinner-energized'></ion-spinner><br/>" + $translate.instant('kVideoLoading') + "...",
+
+    });
+    NVR.debug("Player is ready");
+    $timeout(function () {
+      handle.pause();
+      handle.setPlayback(NVR.getLogin().videoPlaybackSpeed);
+      handle.play();
+      NVR.debug("*** Invoking play");
+      playerReady = true;
+
+    }, 300);
+
+    // window.stop();
+  };
+
   //---------------------------------------------------------------------
   // In Android, the app runs full steam while in background mode
   // while in iOS it gets suspended unless you ask for specific resources
@@ -1103,6 +1222,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
       //$scope.MontageMonitors[i].Monitor.connKey='';
       $scope.MontageMonitors[i].Monitor.eid = "-1";
       $scope.MontageMonitors[i].Monitor.eventUrl = 'img/noimage.png';
+      $scope.MontageMonitors[i].Monitor.eventType = "";
       $scope.MontageMonitors[i].Monitor.eid = "-1";
       $scope.MontageMonitors[i].Monitor.eventUrlTime = "";
       $scope.MontageMonitors[i].Monitor.isPaused = false;
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 597b7fe8..791932ae 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -26,7 +26,63 @@
       <span ng-repeat="monitor in MontageMonitors | onlyEnabledAndEventHas |limitTo: currentLimit">
 
 
-        <div ng-if="monitor.Monitor.eventUrl != 'img/noimage.png' && monitor.Monitor.connKey !=''">
+
+        <!-- Video -->
+
+        <div ng-if="monitor.Monitor.eventType == 'video'">
+          <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}"
+            data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}">
+            <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'">
+
+
+              <videogular vg-can-play="onCanPlay()" vg-native-fullscreen="monitor.Monitor.videoObject.config.nativeFullScreen"
+                vg-player-ready="onPlayerReady($API)" vg-update-playback="onPlaybackUpdate($playBack)" vg-plays-inline="monitor.Monitor.videoObject.config.playsInline"
+                vg-theme="monitor.Monitor.videoObject.config.theme" vg-complete="playbackFinished()" vg-autoplay="monitor.Monitor.videoObject.config.autoPlay"
+                vg-responsive="monitor.Monitor.videoObject.config.responsive" vg-update-time="videoTime(event.Event.StartTime,$currentTime)"
+                vg-error="onVideoError($event)">
+                <vg-media vg-src="monitor.Monitor.videoObject.config.sources" vg-native-controls="monitor.Monitor.videoObject.config.nativeControls">
+                </vg-media>
+                <vg-controls>
+                  <vg-playback-button></vg-playback-button>
+                  <vg-play-pause-button></vg-play-pause-button>
+                  <vg-time-display>{{ videoTime(event.Event.StartTime, currentTime ); }}</vg-time-display>
+                  <vg-scrub-bar>
+                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                    <vg-cuepoints vg-cuepoints-config="monitor.Monitor.videoObject.config.cuepoints" vg-cuepoints-theme="monitor.Monitor.videoObject.config.cuepoints.theme.url">
+                    </vg-cuepoints>
+                  </vg-scrub-bar>
+                  <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
+                  <vg-fullscreen-button></vg-fullscreen-button>
+                  <vg-volume>
+                    <vg-mute-button></vg-mute-button>
+                  </vg-volume>
+                </vg-controls>
+
+              </videogular>
+
+              <figcaption class="normal-figcaption">
+
+                &nbsp; [{{monitor.Monitor.eventType}}]
+
+                <i class="ion-ios-videocam"></i>
+                <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;
+
+                  <i class="ion-pause"></i>&nbsp;
+
+                </span> {{monitor.Monitor.Name}}&nbsp;
+                <div ng-if="sliderVal.showTimeline && $root.runMode!='lowbw'" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px"
+                  class="header-event-id" id="{{monitor.Monitor.Id}}-timeline">[{{monitor.Monitor.eid}}]
+                  <i class="ion-clock"></i> {{prettifyDateTimeFirst(monitor.Monitor.eventUrlTime)}}
+                  ({{humanizeTime(monitor.Monitor.eventUrlTime)}})&nbsp;
+                </div>
+              </figcaption>
+            </figure>
+           
+        
+          </div>
+        </div>
+
+        <div ng-if="monitor.Monitor.eventUrl != 'img/noimage.png' && monitor.Monitor.connKey !='' && monitor.Monitor.eventType == 'jpeg'">
           <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}"
             data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}">
             <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-if=" monitor.Monitor.listDisplay!='noshow'">
@@ -36,7 +92,7 @@
                 img-spinner-h="{{monitor.Monitor.Height}}" />
               <figcaption class="normal-figcaption">
 
-                &nbsp;
+                &nbsp; [[ {{monitor.Monitor.eventType}}]]
 
                 <i class="ion-ios-videocam"></i>
                 <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused">&nbsp;