Merge pull request #38 from digital-gnome/storageareas-progressbarupdate

progressBar and navigation

web/skins/classic/css/classic/views/event.css

@@ -176,22 +176,14 @@ span.noneCue {
 
 #progressBar {
     position: relative;
-    border: 1px solid #666666;
+    top: -1.5em;
-    height: 15px;
+    height: 1.5em;
-    margin: 0 auto;
+    margin: 0 auto -1.5em auto;
 }
 
 #progressBar .progressBox {
-    position: absolute;
+    height: 1.5em;
-    top: 0px;
+    background: rgba(170, 170, 170, .7);
-    left: 0px;
-    height: 15px;
-    background: #eeeeee;
-    border-left: 1px solid #999999;
-}
-
-#progressBar .complete {
-    background: #aaaaaa;
 }
 
 #eventStills {

web/skins/classic/css/dark/views/event.css

@@ -159,22 +159,14 @@ span.noneCue {
 
 #progressBar {
     position: relative;
-    border: 1px solid #666666;
+    top: -1.5em;
-    height: 15px;
+    height: 1.5em;
-    margin: 0 auto;
+    margin: 0 auto -1.5em auto;
 }
 
 #progressBar .progressBox {
-    position: absolute;
+    height: 1.5em;
-    top: 0px;
+    background: rgba(170, 170, 170, .7);
-    left: 0px;
-    height: 15px;
-    background: #eeeeee;
-    border-left: 1px solid #999999;
-}
-
-#progressBar .complete {
-    background: #aaaaaa;
 }
 
 #eventStills {

web/skins/classic/css/flat/views/event.css

@@ -170,22 +170,14 @@ span.noneCue {
 
 #progressBar {
     position: relative;
-    border: 1px solid #666666;
+    top: -1.5em;
-    height: 15px;
+    height: 1.5em;
-    margin: 0 auto;
+    margin: 0 auto -1.5em auto;
 }
 
 #progressBar .progressBox {
-    position: absolute;
+    height: 1.5em;
-    top: 0px;
+    background: rgba(170, 170, 170, .7);
-    left: 0px;
-    height: 15px;
-    background: #eeeeee;
-    border-left: 1px solid #999999;
-}
-
-#progressBar .complete {
-    background: #aaaaaa;
 }
 
 #eventStills {

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
 ?>
+        <div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
+        <div id="progressBar" style="width: <?php echo reScale($Event->Width(), $scale);?>px;">
+          <div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
+        </div><!--progressBar-->
         <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="&lt;&lt;" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true );"/>
@@ -212,12 +212,6 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
           <span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue"></span>s</span>
           <span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue"></span>x</span>
         </div>
-        <div id="progressBar" class="invisible">
-<?php for ( $i = 0; $i < $panelSections; $i++ ) { ?>
-           <div class="progressBox" id="progressBox<?php echo $i ?>" title=""></div>
-<?php } ?>
-        </div><!--progressBar-->
-        <div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
       </div><!--imageFeed-->
       </div>
 <?php } /*end if !DefaultVideo*/ ?>

web/skins/classic/views/js/event.js

@@ -171,24 +171,30 @@ var streamCmdTimer = null;
 
 var streamStatus = null;
 var lastEventId = 0;
+var zmsBroke = false; //Use alternate navigation if zms has crashed
 
 function getCmdResponse( respObj, respText ) {
   if ( checkStreamForErrors( "getCmdResponse", respObj ) ) {
     console.log('Got an error from getCmdResponse');
+    var zmsBroke = true;
     return;
   }
 
+  zmsBroke = false;
+
   if ( streamCmdTimer )
     streamCmdTimer = clearTimeout( streamCmdTimer );
 
   streamStatus = respObj.status;
+  if (streamStatus.progress > parseFloat(eventData.Length)) streamStatus.progress = parseFloat(eventData.Length); //Limit progress to reality
 
   var eventId = streamStatus.event;
-  if ( eventId != lastEventId ) {
+  if ( eventId != lastEventId && lastEventId != 0) { //Doesn't run on first load, prevents a double hit on event and nearEvents ajax
     eventQuery( eventId );
     initialAlarmCues(eventId);  //zms uses this instead of a page reload, must call ajax+render
     lastEventId = eventId;
   }
+  if (lastEventId == 0) lastEventId = eventId; //Only fires on first load.
   if ( streamStatus.paused == true ) {
     $('modeValue').set( 'text', 'Paused' );
     $('rate').addClass( 'hidden' );
@@ -216,7 +222,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 } );
@@ -293,42 +299,27 @@ function streamFastRev( action ) {
   streamReq.send( streamParms+"&command="+CMD_FASTREV );
 }
 
-function streamPrev( action ) {
+function streamPrev(action) {
-  if ( action ) {
+  if (action) {
-    if ( vid ) {
+    if (vid || PrevEventDefVideoPath.indexOf("view_video") >=0 || $j("#vjsMessage").length || zmsBroke) { //handles this or prev being video.js, or end of events
       location.replace(thisUrl + '?view=event&eid=' + prevEventId + filterQuery + sortQuery);
     } else {
-      if (PrevEventDefVideoPath.indexOf("view_video") >=0) {//if it uses videojs
+      streamReq.send(streamParms+"&command="+CMD_PREV);
-        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 ) {
+function streamNext(action) {
-  if ( action ) {
+  if (action) {
-    if (nextEventId == 0) {
+    if (nextEventId == 0) { //handles deleting last event.
-      //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;
+    } else if (vid || NextEventDefVideoPath.indexOf("view_video") >=0 || zmsBroke) { //handles current or next switch to video.js
-    }
-    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 ) {
@@ -800,66 +791,40 @@ 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
+  var barWidth = (eventData.Width * $j('#scale').val()) / SCALE_BASE;
-  $('progressBar').addClass( 'invisible' );
+  $j('#progressBar').css( 'width', barWidth );
-  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' );
 }
 
-// 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 curWidth = (streamStatus.progress / parseFloat(eventData.Length)) * 100;
-  var cells_length = cells.length;
+  $j("#progressBox").css('width', curWidth + '%');
-  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
 } // 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();
   var y = event.page.y - $(target).getTop();
 
-  if ( event.shift )
+  if (event.shift) {
-    streamPan( x, y );
+    streamPan(x, y);
-  else
+  } else {
-    streamZoomIn( x, y );
+    streamZoomIn(x, y);
+  }
 }
 
 function setupListener() {
@@ -982,6 +947,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.