diff options
| -rw-r--r-- | www/css/style.css | 9 | ||||
| -rw-r--r-- | www/js/MontageHistoryCtrl.js | 134 | ||||
| -rw-r--r-- | www/templates/montage-history.html | 73 |
3 files changed, 172 insertions, 44 deletions
diff --git a/www/css/style.css b/www/css/style.css index 3c12a932..e8ba18c7 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -279,6 +279,7 @@ figcaption { white-space: nowrap; } + .normal-figcaption { background: rgba(0, 0, 0, 0.2); color: #FFF; @@ -311,6 +312,14 @@ figcaption { font-size: 80%; } +.normal-figheader-history { + background: rgba(0, 0, 0, 0.7); + color: #FFF; + opacity: 1; + font-size: 80%; + top:0; +} + .alarmed-figcaption { diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js index d35994e5..9168ade3 100644 --- a/www/js/MontageHistoryCtrl.js +++ b/www/js/MontageHistoryCtrl.js @@ -264,12 +264,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc function getNextSetHistory() { // grab events that start on or after the time - apiurl = ld.apiurl + "/events/index/StartTime >=:" + TimeObjectFrom + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0) + ".json?sort=StartTime&direction=desc"; + apiurl = ld.apiurl + "/events/index/StartTime >=:" + TimeObjectFrom + "/AlarmFrames >=:" + (ld.enableAlarmCount ? ld.minAlarmCount : 0) + ".json?sort=StartTime&direction=asc"; NVR.log("Grabbing history using: " + apiurl); // make sure there are no more than 5 active streams (noevent is ok) $scope.currentLimit = $scope.monLimit; //qHttp.get(apiurl) - console.log ("GETTING "+apiurl); + //console.log ("GETTING "+apiurl); $http({ method: 'get', url: apiurl @@ -861,21 +861,97 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc //console.log ("Switching orientation"); }; + + $scope.playbackFinished = function(m) { + + console.log ("******* VIDEO PLAYBACK FINISHED FOR MONITOR:"+m.Monitor.Id+ " EVENT:" +m.Monitor.eid); + getNextEvent( m.Monitor.eid) + .then (function (success) { + NVR.debug ("next event for monitor:"+m.Monitor.Id+" is "+success.eid); + + if (success.eid != "null" && success.eid != m.Monitor.eid) { + + var videoURL= m.Monitor.baseURL + "/index.php?view=view_video&eid=" + success.eid; + + if ($rootScope.authSession != 'undefined') videoURL += $rootScope.authSession; + if ($rootScope.basicAuthToken) videoURL = videoURL + "&basicauth=" + $rootScope.basicAuthToken; + + m.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: [], + } + } + }; + + + + + // m.Monitor.videoObject.config.sources[0].src = $sce.trustAsResourceUrl(videoURL); + + var element = angular.element(document.getElementById(m.Monitor.Id + "-timeline")); + element.removeClass('animated flipInX'); + element.addClass('animated flipOutX'); + + $timeout (function () { + + element.removeClass('animated flipOutX'); + element.addClass('animated flipInX'); + + NVR.debug ("--->updating videoURL for mid="+m.Monitor.Id+ "to:"+videoURL); + m.Monitor.eid = success.eid; + m.Monitor.StartTime = success.stime; + $timeout (function () { + m.Monitor.handle.play(); + }); + + },700); + + + + + // m.Monitor.handle.play(); + + + } + + }); + }; + + $scope.onVideoError = function (event) { $ionicLoading.hide(); NVR.debug("player reported a video error:" + JSON.stringify(event)); }; - $scope.onPlayerReady = function (api) { + $scope.onPlayerReady = function (api,m) { // we need this timeout to avoid load interrupting // play -- I suppose its an angular digest foo thing - //console.log ("*********** ON PLAY READY"); - var handle; + //console.log ("*********** ON PLAY READY") + m.Monitor.handle = api; + NVR.debug("On Play Ready invoked"); - handle = api; - handle.mediaElement.attr("playsinline", ""); + + m.Monitor.handle.mediaElement.attr("playsinline", ""); $ionicLoading.show({ template: "<ion-spinner icon='ripple' class='spinner-energized'></ion-spinner><br/>" + $translate.instant('kVideoLoading') + "...", @@ -883,9 +959,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc }); NVR.debug("Player is ready"); $timeout(function () { - handle.pause(); - handle.setPlayback(NVR.getLogin().videoPlaybackSpeed); - handle.play(); + m.Monitor.handle.pause(); + m.Monitor.handle.setPlayback(NVR.getLogin().videoPlaybackSpeed); + m.Monitor.handle.play(); NVR.debug("*** Invoking play"); playerReady = true; @@ -894,6 +970,44 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc // window.stop(); }; + function getNextEvent(eid) { + + + var d = $q.defer(); + // now get event details to show alarm frames + var loginData = NVR.getLogin(); + var myurl = loginData.apiurl + '/events/' + eid + ".json"; + + var r = { + eid:"", + stime:"", + }; + $http.get(myurl) + .then( function (success) { + if (success.data.event.Event.NextOfMonitor) { + r.eid = success.data.event.Event.NextOfMonitor; + r.stime = success.data.event.Event.StartTime; + d.resolve(r); + } + else { + r.eid = "-1"; + r.stime = "-1"; + d.resolve(r); + } + return (d.promise); + }, + function (err) { + NVR.debug ("Error geting neighbors:"+JSON.stringify(err)); + r.eid = "-1"; + r.stime = "-1"; + d.resolve(r); + return (d.promise); + }); + + + return (d.promise); + + } //--------------------------------------------------------------------- // In Android, the app runs full steam while in background mode // while in iOS it gets suspended unless you ask for specific resources diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html index 791932ae..c15fe7d9 100644 --- a/www/templates/montage-history.html +++ b/www/templates/montage-history.html @@ -34,13 +34,31 @@ 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'"> + + <figcaption class="normal-figheader-history" > + + + <i class="ion-ios-videocam"></i> + <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused"> + + <i class="ion-pause"></i> + + </span> {{monitor.Monitor.Name}} + <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)}}) + </div> + </figcaption> <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-player-ready="onPlayerReady($API, monitor)" vg-update-playback="onPlaybackUpdate($playBack)" vg-plays-inline="monitor.Monitor.videoObject.config.playsInline" + vg-theme="monitor.Monitor.videoObject.config.theme" vg-complete="playbackFinished(monitor)" vg-autoplay="true" 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-src="monitor.Monitor.videoObject.config.sources" + + vg-native-controls="monitor.Monitor.videoObject.config.nativeControls"> </vg-media> <vg-controls> <vg-playback-button></vg-playback-button> @@ -60,22 +78,7 @@ </videogular> - <figcaption class="normal-figcaption"> - - [{{monitor.Monitor.eventType}}] - - <i class="ion-ios-videocam"></i> - <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused"> - - <i class="ion-pause"></i> - - </span> {{monitor.Monitor.Name}} - <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)}}) - </div> - </figcaption> + </figure> @@ -86,26 +89,28 @@ <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'"> + + <figcaption class="normal-figheader-history"> + + <i class="ion-ios-videocam"></i> + <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused"> + + <i class="ion-pause"></i> + + </span> {{monitor.Monitor.Name}} + <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)}}) + </div> + </figcaption> + <img class="{{monitor.Monitor.selectStyle}}" image-spinner-src="{{constructStream(monitor)}}" image-spinner-loader="lines" on-tap="!isDragabillyOn?togglePause(monitor.Monitor.Id):toggleSelectItem($index)" on-swipe-left="toggleControls()" on-swipe-right="toggleControls()" img-spinner-w="{{monitor.Monitor.Width}}" img-spinner-h="{{monitor.Monitor.Height}}" /> - <figcaption class="normal-figcaption"> - - [[ {{monitor.Monitor.eventType}}]] - <i class="ion-ios-videocam"></i> - <span style="background-color:red;color:#fff" ng-if="monitor.Monitor.isPaused"> - - <i class="ion-pause"></i> - - </span> {{monitor.Monitor.Name}} - <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)}}) - </div> - </figcaption> + </figure> <!-- wait for packery otherwise we get large ranges --> <div ng-show="packeryDone"> |