ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #32 from digital-gnome/navigationPlus 

Navigation plus
This commit is contained in:
Isaac Connor 2017-10-12 09:55:13 -04:00 committed by GitHub
parent 3f01f887aa 90d3067cab
commit a1b13a2555
5 changed files with 103 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/skins/classic/css/classic/views/event.css
View File

@ -1,3 +1,11 @@
.vjsMessage {
font-size: 2em;
line-height: 1.5;
color: white;
background-color: black;
display: inline-block;
}
.alarmCue {
background-color: #222222;
height: 1.5em;

8
web/skins/classic/css/dark/views/event.css
View File

@ -1,3 +1,11 @@
.vjsMessage {
font-size: 2em;
line-height: 1.5;
color: white;
background-color: black;
display: inline-block;
}
.alarmCue {
background-color: #222222;
height: 1.5em;

8
web/skins/classic/css/flat/views/event.css
View File

@ -1,3 +1,11 @@
.vjsMessage {
font-size: 2em;
line-height: 1.5;
color: white;
background-color: black;
display: inline-block;
}
.alarmCue {
background-color: #222222;
height: 1.5em;

7
web/skins/classic/views/event.php
View File

@ -172,10 +172,9 @@ if ( $Event->DefaultVideo() ) {
vjsReplay(<?php echo (strtotime($Event->StartTime()) + $Event->Length())*1000 ?>);
</script>
<p id="replayAllCountDown"></p>
<p id="dvrControlsVjs" class="dvrControls">
<input type="button" value="&lt;+" id="prevBtnVjs" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
<input type="button" value="+&gt;" id="nextBtnVjs" title="<?php echo translate('Next') ?>" class="inactive" onclick="streamNext( true );"/>
<p id="dvrControls" class="dvrControls">
<input type="button" value="&lt;+" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
<input type="button" value="+&gt;" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" onclick="streamNext( true );"/>
</p>
<?php

87
web/skins/classic/views/js/event.js
View File

@ -11,17 +11,26 @@ function vjsReplay(endTime) {
player.play();
break;
case 'all':
// nextEventStartTime.getTime() is a mootools workaround, highjacks Date.parse
var gapDuration = (new Date().getTime()) + (nextEventStartTime.getTime() - endTime);
if (nextEventId == 0) {
$j("#videoobj").html('<p class="vjsMessage">No more events</p>');
} else {
var nextStartTime = nextEventStartTime.getTime(); //nextEventStartTime.getTime() is a mootools workaround, highjacks Date.parse
if (nextStartTime <= endTime) {
streamNext( true );
return;
}
$j("#videoobj").html('<p class="vjsMessage"></p>');
var gapDuration = (new Date().getTime()) + (nextStartTime - endTime);
var x = setInterval(function() {
var now = new Date().getTime();
var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8);;
$j("#replayAllCountDown").html(remainder + " to next event.");
var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8);
$j(".vjsMessage").html(remainder + ' to next event.');
if (remainder < 0) {
clearInterval(x);
streamNext( true );
}
}, 1000);
}
break;
case 'gapless':
streamNext( true );
@ -35,8 +44,8 @@ $j.ajaxSetup ({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON.
var cueFrames = null; //make cueFrames availaible even if we don't send another ajax query
function initialAlarmCues () {
$j.getJSON("api/events/"+eventData.Id+".json", setAlarmCues); //get frames data for alarmCues and inserts into html
function initialAlarmCues (eventId) {
$j.getJSON("api/events/"+eventId+".json", setAlarmCues); //get frames data for alarmCues and inserts into html
}
function setAlarmCues (data) {
@ -52,14 +61,13 @@ function setAlarmCues (data) {
function renderAlarmCues () {
if (cueFrames) {
var cueRatio = (vid ? $j("#videoobj").width() : $j("#progressBar").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width
var cueRatio = (vid ? $j("#videoobj").width() : $j("#evtStream").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width
var minAlarm = Math.ceil(1/cueRatio);
var spanTimeStart = 0;
var spanTimeEnd = 0;
var alarmed = 0;
var alarmHtml = "";
var pixSkewNone = 0;
var pixSkewAlarm = 0;
var pixSkew = 0;
var skip = 0;
for (let i = 0; i < cueFrames.length; i++) {
skip = 0;
@ -70,11 +78,11 @@ function renderAlarmCues () {
spanTimeEnd = frame.Delta * 100;
spanTime = spanTimeEnd - spanTimeStart;
let pix = cueRatio * spanTime;
pixSkewNone += pix - Math.round(pix);//average out the rounding errors.
pixSkew += pix - Math.round(pix);//average out the rounding errors.
pix = Math.round(pix);
if ((pixSkewNone > 1 || pixSkewNone < -1) && pix + Math.round(pixSkewNone) > 0) { //add skew if it's a pixel and won't zero out span.
pix += Math.round(pixSkewNone);
pixSkewNone = pixSkewNone - Math.round(pixSkewNone);
if ((pixSkew > 1 || pixSkew < -1) && pix + Math.round(pixSkew) > 0) { //add skew if it's a pixel and won't zero out span.
pix += Math.round(pixSkew);
pixSkew = pixSkew - Math.round(pixSkew);
}
alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd;
@ -97,11 +105,11 @@ function renderAlarmCues () {
spanTime = spanTimeEnd - spanTimeStart;
alarmed = 0;
pix = cueRatio * spanTime;
pixSkewAlarm += pix - Math.round(pix);
pixSkew += pix - Math.round(pix);
pix = Math.round(pix);
if ((pixSkewAlarm > 1 || pixSkewAlarm < -1) && pix + Math.round(pixSkewAlarm) > 0) {
pix += Math.round(pixSkewAlarm);
pixSkewAlarm = pixSkewAlarm - Math.round(pixSkewAlarm);
if ((pixSkew > 1 || pixSkew < -1) && pix + Math.round(pixSkew) > 0) {
pix += Math.round(pixSkew);
pixSkew = pixSkew - Math.round(pixSkew);
}
alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd;
@ -143,6 +151,9 @@ function changeScale() {
var streamImg = document.getElementById('evtStream');
streamImg.style.width = newWidth + "px";
streamImg.style.height = newHeight + "px";
$j("#alarmCueJpeg").width(newWidth);
drawProgressBar();
$j("#alarmCueJpeg").html(renderAlarmCues());
Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } );
}
}
@ -175,6 +186,7 @@ function getCmdResponse( respObj, respText ) {
var eventId = streamStatus.event;
if ( eventId != lastEventId ) {
eventQuery( eventId );
initialAlarmCues(eventId); //zms uses this instead of a page reload, must call ajax+render
lastEventId = eventId;
}
if ( streamStatus.paused == true ) {
@ -285,20 +297,38 @@ function streamPrev( action ) {
if ( action ) {
if ( vid ) {
location.replace(thisUrl + '?view=event&eid=' + prevEventId + filterQuery + sortQuery);
return;
}
} else {
if (PrevEventDefVideoPath.indexOf("view_video") >=0) {//if it uses videojs
location.replace(thisUrl + '?view=event&eid=' + prevEventId + filterQuery + sortQuery);
} else {
if ($j("#vjsMessage")) { //allow going back after deleting last event
location.replace(thisUrl + '?view=event&eid=' + prevEventId + filterQuery + sortQuery);
} else {
streamReq.send( streamParms+"&command="+CMD_PREV );
}
}
}
}
}
function streamNext( action ) {
if ( action ) {
if ( vid ) {
location.replace(thisUrl + '?view=event&eid=' + nextEventId + filterQuery + sortQuery);
if (nextEventId == 0) {
//handles deleting last event.
let replaceStream = $j(vid ? "#videoobj" : "#evtStream");
replaceStream.replaceWith('<p class="vjsMessage" style="width:' + replaceStream.css("width") + '; height: ' + replaceStream.css("height") + ';line-height: ' + replaceStream.css("height") + ';">No more events</p>');
return;
}
if ( vid ) {
location.replace(thisUrl + '?view=event&eid=' + nextEventId + filterQuery + sortQuery);
} else {
if (NextEventDefVideoPath.indexOf("view_video") >=0) {
location.replace(thisUrl + '?view=event&eid=' + nextEventId + filterQuery + sortQuery);
} else {
streamReq.send( streamParms+"&command="+CMD_NEXT );
}
}
}
}
function streamZoomIn( x, y ) {
@ -398,8 +428,8 @@ function getNearEventsResponse( respObj, respText ) {
if ( prevEventBtn ) prevEventBtn.disabled = !prevEventId;
var nextEventBtn = $('nextEventBtn');
if ( nextEventBtn ) nextEventBtn.disabled = !nextEventId;
if (prevEventId == 0) $j('#prevBtnVjs').prop('disabled', true).attr('class', 'unavail');
if (nextEventId == 0) $j('#nextBtnVjs').prop('disabled', true).attr('class', 'unavail');
$j('#prevBtn').prop('disabled', prevEventId == 0 ? true : false).attr('class', prevEventId == 0 ? 'unavail' : 'inactive');
$j('#nextBtn').prop('disabled', nextEventId == 0 ? true : false).attr('class', nextEventId == 0 ? 'unavail' : 'inactive');
}
var nearEventsReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getNearEventsResponse } );
@ -777,10 +807,11 @@ function drawProgressBar() {
var barWidth = 0;
var cells = $('progressBar').getElements( 'div' );
var cells_length = cells.length;
var cellWidth = parseInt( ((eventData.Width * $j('#scale').val()) / SCALE_BASE) / cells_length );
var cellWidth = parseInt( eventData.Width / cells_length );
for ( var index = 0; index < cells_length; index += 1 ) {
var cell = $( cells[index] );
function test (cell, index) {
if ( index == 0 )
cell.setStyles( { 'left': barWidth, 'width': cellWidth, 'borderLeft': 0 } );
else
@ -788,10 +819,12 @@ function drawProgressBar() {
var offset = parseInt( (index*eventData.Length)/cells_length );
cell.setProperty( 'title', '+'+secsToTime(offset)+'s' );
cell.removeEvent( 'click' );
cell.removeEvents( 'click' );
cell.addEvent( 'click', function() { streamSeek( offset ); } );
barWidth += cell.getCoordinates().width;
}
test (cell, index);
}
$('progressBar').setStyle( 'width', barWidth );
$('progressBar').removeClass( 'invisible' );
}
@ -928,7 +961,7 @@ function initPage() {
//FIXME prevent blocking...not sure what is happening or best way to unblock
if ( $('videoobj') ) {
vid = videojs("videoobj");
initialAlarmCues(); //call ajax+renderAlarmCues after videojs is. should be only call to initialAlarmCues
initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues after videojs is. should be only call to initialAlarmCues on vjs streams
}
if ( vid ) {
/*
@ -951,7 +984,7 @@ function initPage() {
} else {
streamCmdTimer = streamQuery.delay( 250 );
eventQuery.pass( eventData.Id ).delay( 500 );
initialAlarmCues(); //call ajax+renderAlarmCues for nph-zms. should be only call to initialAlarmCues
initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues for nph-zms.
if ( canStreamNative ) {
var streamImg = $('imageFeed').getElement('img');