Skip to content

Commit

Permalink
#775 take care of gapless and flipovers
Browse files Browse the repository at this point in the history
  • Loading branch information
@pliablepixels
pliablepixels committed Feb 1, 2019
1 parent 37b02bd commit 2ef379e
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 44 deletions.
9 changes: 9 additions & 0 deletions www/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,7 @@ figcaption {
white-space: nowrap;
}


.normal-figcaption {
background: rgba(0, 0, 0, 0.2);
color: #FFF;
Expand Down Expand Up @@ -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 {
Expand Down
134 changes: 124 additions & 10 deletions www/js/MontageHistoryCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -861,31 +861,107 @@ 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') + "...",

});
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;

Expand All @@ -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
Expand Down
73 changes: 39 additions & 34 deletions www/templates/montage-history.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" >

&nbsp;

<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>
<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>
Expand All @@ -60,22 +78,7 @@

</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>


Expand All @@ -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">
&nbsp;
<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>

<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">

&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>
<!-- wait for packery otherwise we get large ranges -->
<div ng-show="packeryDone">
Expand Down

0 comments on commit 2ef379e

Please sign in to comment.