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

improve efficiency of progress bar updating/drawing. Add some debug

This commit is contained in:
Isaac Connor 2017-05-19 12:25:26 -04:00
parent 641384f38d
commit d988b9b6d5
1 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,8 +42,10 @@ var streamStatus = null;
var lastEventId = 0; var lastEventId = 0;
function getCmdResponse( respObj, respText ) { function getCmdResponse( respObj, respText ) {
if ( checkStreamForErrors( "getCmdResponse", respObj ) ) if ( checkStreamForErrors( "getCmdResponse", respObj ) ) {
console.log('Got an error from getCmdResponse');
return; return;
}
if ( streamCmdTimer ) if ( streamCmdTimer )
streamCmdTimer = clearTimeout( streamCmdTimer ); streamCmdTimer = clearTimeout( streamCmdTimer );
@ -56,10 +58,12 @@ function getCmdResponse( respObj, respText ) {
lastEventId = eventId; lastEventId = eventId;
} }
if ( streamStatus.paused == true ) { if ( streamStatus.paused == true ) {
console.log('paused');
$('modeValue').set( 'text', "Paused" ); $('modeValue').set( 'text', "Paused" );
$('rate').addClass( 'hidden' ); $('rate').addClass( 'hidden' );
streamPause( false ); streamPause( false );
} else { } else {
console.log('playing');
$('modeValue').set( 'text', "Replay" ); $('modeValue').set( 'text', "Replay" );
$('rateValue').set( 'text', streamStatus.rate ); $('rateValue').set( 'text', streamStatus.rate );
$('rate').removeClass( 'hidden' ); $('rate').removeClass( 'hidden' );
@ -189,8 +193,10 @@ var slider = null;
var scroll = null; var scroll = null;
function getEventResponse( respObj, respText ) { function getEventResponse( respObj, respText ) {
if ( checkStreamForErrors( "getEventResponse", respObj ) ) if ( checkStreamForErrors( "getEventResponse", respObj ) ) {
console.log("getEventResponse: errors" );
return; return;
}
eventData = respObj.event; eventData = respObj.event;
var eventStills = $('eventStills'); var eventStills = $('eventStills');
@ -221,6 +227,7 @@ function getEventResponse( respObj, respText ) {
$('unarchiveEvent').addClass( 'hidden' ); $('unarchiveEvent').addClass( 'hidden' );
} }
} }
// Technically, events can be different sizes, so may need to update the size of the image, but it might be better to have it stay scaled...
//var eventImg = $('eventImage'); //var eventImg = $('eventImage');
//eventImg.setStyles( { 'width': eventData.width, 'height': eventData.height } ); //eventImg.setStyles( { 'width': eventData.width, 'height': eventData.height } );
drawProgressBar(); drawProgressBar();
@ -621,50 +628,55 @@ function videoEvent() {
createPopup( '?view=video&eid='+eventData.Id, 'zmVideo', 'video', eventData.Width, eventData.Height ); createPopup( '?view=video&eid='+eventData.Id, 'zmVideo', 'video', eventData.Width, eventData.Height );
} }
// Called on each event load, because each event can be a different length.
function drawProgressBar() { function drawProgressBar() {
var barWidth = 0; // Make it invisible so we don't see the update happen
$('progressBar').addClass( 'invisible' ); $('progressBar').addClass( 'invisible' );
var barWidth = 0;
var cells = $('progressBar').getElements( 'div' ); var cells = $('progressBar').getElements( 'div' );
var cellWidth = parseInt( eventData.Width/$$(cells).length ); var cells_length = cells.length;
$$(cells).forEach(
function( cell, index ) var cellWidth = parseInt( eventData.Width / cells_length );
{ for ( var index = 0; index < cells_length; index += 1 ) {
var cell = $( cells[index] );
if ( index == 0 ) if ( index == 0 )
$(cell).setStyles( { 'left': barWidth, 'width': cellWidth, 'borderLeft': 0 } ); cell.setStyles( { 'left': barWidth, 'width': cellWidth, 'borderLeft': 0 } );
else else
$(cell).setStyles( { 'left': barWidth, 'width': cellWidth } ); cell.setStyles( { 'left': barWidth, 'width': cellWidth } );
var offset = parseInt((index*eventData.Length)/$$(cells).length);
$(cell).setProperty( 'title', '+'+secsToTime(offset)+'s' ); var offset = parseInt( (index*eventData.Length)/cells_length );
$(cell).removeEvent( 'click' ); cell.setProperty( 'title', '+'+secsToTime(offset)+'s' );
$(cell).addEvent( 'click', function() { streamSeek( offset ); } ); cell.removeEvent( 'click' );
barWidth += $(cell).getCoordinates().width; cell.addEvent( 'click', function() { streamSeek( offset ); } );
barWidth += cell.getCoordinates().width;
} }
);
$('progressBar').setStyle( 'width', barWidth ); $('progressBar').setStyle( 'width', barWidth );
$('progressBar').removeClass( 'invisible' ); $('progressBar').removeClass( 'invisible' );
} }
// Changes the colour of the cells making up the completed progress bar
function updateProgressBar() { function updateProgressBar() {
if ( eventData && streamStatus ) { if ( ! ( eventData && streamStatus ) ) {
return;
} // end if ! eventData && streamStatus
var cells = $('progressBar').getElements( 'div' ); var cells = $('progressBar').getElements( 'div' );
var completeIndex = parseInt((($$(cells).length+1)*streamStatus.progress)/eventData.Length); var cells_length = cells.length;
$$(cells).forEach( var completeIndex = parseInt(((cells_length+1)*streamStatus.progress)/eventData.Length);
function( cell, index ) { for ( var index = 0; index < cells_length; index += 1 ) {
var cell = $( cells[index] );
if ( index < completeIndex ) { if ( index < completeIndex ) {
if ( !$(cell).hasClass( 'complete' ) ) { if ( !cell.hasClass( 'complete' ) ) {
$(cell).addClass( 'complete' ); cell.addClass( 'complete' );
} }
} else { } else {
if ( $(cell).hasClass( 'complete' ) ) { if ( cell.hasClass( 'complete' ) ) {
$(cell).removeClass( 'complete' ); cell.removeClass( 'complete' );
} }
} // end if } // end if
} // end function } // end function
); // ICON: Shouldn't have to set the width or make it visible
$('progressBar').setStyle( 'width', barWidth ); // $('progressBar').setStyle( 'width', barWidth );
$('progressBar').removeClass( 'invisible' ); // $('progressBar').removeClass( 'invisible' );
} // end if eventData && streamStatus
} // end function updateProgressBar() } // end function updateProgressBar()
function handleClick( event ) { function handleClick( event ) {