From 3a4a7ada41c81e43da853ffc81e463c5901564fd Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 13 Oct 2017 08:58:07 -0400 Subject: [PATCH] progressBar conversion Convert progressBar to jquery and imporove granularity and performance --- web/skins/classic/css/classic/views/event.css | 18 ++---- web/skins/classic/css/dark/views/event.css | 18 ++---- web/skins/classic/css/flat/views/event.css | 18 ++---- web/skins/classic/views/event.php | 14 ++--- web/skins/classic/views/js/event.js | 60 ++++++------------- 5 files changed, 36 insertions(+), 92 deletions(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index f78edda1a..eeae363c4 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -176,22 +176,14 @@ span.noneCue { #progressBar { position: relative; - border: 1px solid #666666; - height: 15px; - margin: 0 auto; + top: -1.5em; + height: 1.5em; + margin: 0 auto -1.5em auto; } #progressBar .progressBox { - position: absolute; - top: 0px; - left: 0px; - height: 15px; - background: #eeeeee; - border-left: 1px solid #999999; -} - -#progressBar .complete { - background: #aaaaaa; + height: 1.5em; + background: rgba(170, 170, 170, .7); } #eventStills { diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index 34df7e790..715cc0c07 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -159,22 +159,14 @@ span.noneCue { #progressBar { position: relative; - border: 1px solid #666666; - height: 15px; - margin: 0 auto; + top: -1.5em; + height: 1.5em; + margin: 0 auto -1.5em auto; } #progressBar .progressBox { - position: absolute; - top: 0px; - left: 0px; - height: 15px; - background: #eeeeee; - border-left: 1px solid #999999; -} - -#progressBar .complete { - background: #aaaaaa; + height: 1.5em; + background: rgba(170, 170, 170, .7); } #eventStills { diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index dfff53efe..963e644ef 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -170,22 +170,14 @@ span.noneCue { #progressBar { position: relative; - border: 1px solid #666666; - height: 15px; - margin: 0 auto; + top: -1.5em; + height: 1.5em; + margin: 0 auto -1.5em auto; } #progressBar .progressBox { - position: absolute; - top: 0px; - left: 0px; - height: 15px; - background: #eeeeee; - border-left: 1px solid #999999; -} - -#progressBar .complete { - background: #aaaaaa; + height: 1.5em; + background: rgba(170, 170, 170, .7); } #eventStills { diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index 33b0b3d01..5990b2e45 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -85,10 +85,6 @@ parseSort(); parseFilter( $_REQUEST['filter'] ); $filterQuery = $_REQUEST['filter']['query']; -$panelSections = 40; -$panelSectionWidth = (int)ceil(reScale($Event->Width(),$scale)/$panelSections); -$panelWidth = ($panelSections*$panelSectionWidth-1); - $connkey = generateConnKey(); $focusWindow = true; @@ -195,6 +191,10 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) { } } // end if stream method ?> +
+
+
+

@@ -212,12 +212,6 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) { : s : x -

-
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index e1b7c244c..df62acf58 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -216,7 +216,7 @@ function getCmdResponse( respObj, respText ) { streamImg.src = streamImg.src.replace( /auth=\w+/i, 'auth='+streamStatus.auth ); } // end if haev a new auth hash - streamCmdTimer = streamQuery.delay( streamTimeout ); + streamCmdTimer = streamQuery.delay( streamTimeout ); //Timeout is refresh rate for progressBox and time display } var streamReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getCmdResponse } ); @@ -800,57 +800,30 @@ function videoEvent() { 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. +// Called on each event load because each event can be a different width function drawProgressBar() { - // Make it invisible so we don't see the update happen - $('progressBar').addClass( 'invisible' ); - 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 ); - - 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 - cell.setStyles( { 'left': barWidth, 'width': cellWidth } ); - - var offset = parseInt( (index*eventData.Length)/cells_length ); - cell.setProperty( 'title', '+'+secsToTime(offset)+'s' ); - cell.removeEvents( 'click' ); - cell.addEvent( 'click', function() { streamSeek( offset ); } ); - barWidth += cell.getCoordinates().width; - } - test (cell, index); - } - $('progressBar').setStyle( 'width', barWidth ); - $('progressBar').removeClass( 'invisible' ); + var barWidth = (eventData.Width * $j('#scale').val()) / SCALE_BASE; + $j('#progressBar').css( 'width', barWidth ); } -// Changes the colour of the cells making up the completed progress bar +// Shows current stream progress. function updateProgressBar() { if ( ! ( eventData && streamStatus ) ) { return; } // end if ! eventData && streamStatus - var cells = $('progressBar').getElements( 'div' ); - var cells_length = cells.length; - var completeIndex = parseInt(((cells_length+1)*streamStatus.progress)/eventData.Length); - for ( var index = 0; index < cells_length; index += 1 ) { - var cell = $( cells[index] ); - if ( index < completeIndex ) { - if ( !cell.hasClass( 'complete' ) ) { - cell.addClass( 'complete' ); - } - } else { - if ( cell.hasClass( 'complete' ) ) { - cell.removeClass( 'complete' ); - } - } // end if - } // end function + var curWidth = (streamStatus.progress / parseFloat(eventData.Length)) * 100; + $j("#progressBox").css('width', curWidth + '%'); } // end function updateProgressBar() +// Handles seeking when clicking on the progress bar. +function progressBarSeek (){ + $j('#progressBar').click(function(e){ + var x = e.pageX - $j(this).offset().left; + var seekTime = (x / $j('#progressBar').width()) * parseFloat(eventData.Length); + streamSeek (seekTime); + }); +} + function handleClick( event ) { var target = event.target; var x = event.page.x - $(target).getLeft(); @@ -982,6 +955,7 @@ function initPage() { window.videoobj.load(); streamPlay(); */ } else { + progressBarSeek (); streamCmdTimer = streamQuery.delay( 250 ); eventQuery.pass( eventData.Id ).delay( 500 ); initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues for nph-zms.