Merge pull request #1087 from liucougar/fix_timeline_for_SaveJPEGs

fix timeline view for SaveJPEGs monitors (without enabled VideoWriter)

web/skins/classic/views/js/timeline.js

@@ -1,4 +1,4 @@
-var events = new Object();
+var events = {};
 
 function showEvent( eid, fid, width, height )
 {    
@@ -22,7 +22,7 @@ function createEventHtml( event, frame )
     if ( event.Archived > 0 )
         eventHtml.addClass( 'archived' );
 
-    new Element( 'p' ).inject( eventHtml ).set( 'text', monitorNames[event.MonitorId] );
+    new Element( 'p' ).inject( eventHtml ).set( 'text', monitors[event.MonitorId].Name );
     new Element( 'p' ).inject( eventHtml ).set( 'text', event.Name+(frame?("("+frame.FrameId+")"):"") );
     new Element( 'p' ).inject( eventHtml ).set( 'text', event.StartTime+" - "+event.Length+"s" );
     new Element( 'p' ).inject( eventHtml ).set( 'text', event.Cause );
@@ -79,8 +79,8 @@ function frameDataResponse( respObj, respText )
 
     event['frames'][frame.FrameId] = frame;
     event['frames'][frame.FrameId]['html'] = createEventHtml( event, frame );
-    showEventDetail( event['frames'][frame.FrameId]['html'] );
+
-    loadEventImage( frame.Image.imagePath, event.Id, frame.FrameId, event.Width, event.Height, event.Frames/event.Length );
+    previewEvent(frame.EventId, frame.FrameId);
 }
 
 var eventQuery = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: eventDataResponse } );
@@ -102,6 +102,7 @@ function requestFrameData( eventId, frameId )
 
 function previewEvent( eventId, frameId )
 {
+    
     if ( events[eventId] )
     {
         if ( events[eventId]['frames'] )
@@ -109,7 +110,9 @@ function previewEvent( eventId, frameId )
             if ( events[eventId]['frames'][frameId] )
             {
                 showEventDetail( events[eventId]['frames'][frameId]['html'] );
-                loadEventImage( events[eventId].frames[frameId].Image.imagePath, eventId, frameId, events[eventId].Width, events[eventId].Height, events[eventId].Frames/events[eventId].Length );
+                var imagePath = events[eventId].frames[frameId].Image.imagePath;
+                var showVideo = parseInt(monitors[events[eventId].MonitorId].VideoWriter);
+                loadEventImage( imagePath, eventId, frameId, events[eventId].Width, events[eventId].Height, events[eventId].Frames/events[eventId].Length, showVideo);
                 return;
             }
         }
@@ -117,14 +120,14 @@ function previewEvent( eventId, frameId )
     requestFrameData( eventId, frameId );
 }
 
-function loadEventImage( imagePath, eid, fid, width, height, fps )
+function loadEventImage( imagePath, eid, fid, width, height, fps, showVideo )
 {
-    console.log(fps);
-//    console.log(imagePrefix);
-//    console.log(imagePath);
-    
-    //console.log(fid/25.0);
     var vid= $('preview');
+    var imageSrc = $('imageSrc');
+    if(showVideo)
+    {
+        vid.show();
+        imageSrc.hide();
         var newsource=imagePrefix+imagePath.slice(0,imagePath.lastIndexOf('/'))+"/event.mp4";
         //console.log(newsource);
         //console.log(sources[0].src.slice(-newsource.length));
@@ -143,14 +146,19 @@ function loadEventImage( imagePath, eid, fid, width, height, fps )
             if(!vid.seeking)
                 vid.currentTime=fid/fps;//25.0;
         }
-    
+    }
-   /* var imageSrc = $('imageSrc');
+    else
+    {
+        vid.hide();
+        imageSrc.show();
         imageSrc.setProperty( 'src', imagePrefix+imagePath );
         imageSrc.removeEvent( 'click' );
         imageSrc.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );
+    }
+
     var eventData = $('eventData');
     eventData.removeEvent( 'click' );
-    eventData.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );*/
+    eventData.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );
 }
 
 function tlZoomBounds( minTime, maxTime )

web/skins/classic/views/js/timeline.js.php

@@ -1,16 +1,21 @@
 var filterQuery = '<?php echo validJsStr($filterQuery) ?>';
 
-var monitorNames = new Object();
 <?php
+$jsMonitors = array();
+$fields = array('Name', 'SaveJPEGs', 'VideoWriter');
 foreach ( $monitors as $monitor )
 {
     if ( !empty($monitorIds[$monitor['Id']]) )
     {
-?>
+        $jsMonitor = array();
-monitorNames[<?php echo $monitor['Id'] ?>] = '<?php echo validJsStr($monitor['Name']) ?>';
+        foreach ($fields as $field)
-<?php
+        {
+            $jsMonitor[$field] = $monitor[$field];
+        }
+        $jsMonitors[$monitor['Id']] = $jsMonitor;
     }
 }
 ?>
+var monitors = <?php echo json_encode($jsMonitors) ?>;
 
 var archivedString = "<?php echo translate('Archived') ?>";

web/skins/classic/views/timeline.php

@@ -812,8 +812,7 @@ xhtmlHeaders(__FILE__, translate('Timeline') );
       <div id="topPanel" class="graphWidth">
         <div id="imagePanel">
           <div id="image" class="imageHeight">
-			<!-- <img id="imageSrc" class="imageWidth" src="graphics/transparent.gif" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>-->
+		        <img id="imageSrc" class="imageWidth" src="graphics/transparent.gif" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>
-			<!-- width="<?php echo $event['Width']; ?>" height="<?php echo $event['Height']; ?>" -->
 			<video id="preview" width="100%" controls>
 				<source src="<?php echo "/events/".getEventPath($event)."/event.mp4"; ?>" type="video/mp4">
 Your browser does not support the video tag.
@@ -929,6 +928,10 @@ foreach( array_keys($monEventSlots) as $monitorId )
 <?php
     unset( $currEventSlots );
     $currEventSlots = &$monEventSlots[$monitorId];
+    $monitorMouseover = $mouseover;
+    if ($monitors[$monitorId]['SaveJPEGs'] == 2) {
+        $monitorMouseover = false;
+    }
     for ( $i = 0; $i < $chart['graph']['width']; $i++ )
     {
         if ( isset($currEventSlots[$i]) )
@@ -936,7 +939,7 @@ foreach( array_keys($monEventSlots) as $monitorId )
             unset( $slot );
             $slot = &$currEventSlots[$i];
 
-            if ( $mouseover )
+            if ( $monitorMouseover )
             {
                 $behaviours = array(
                     'onclick="'.getSlotShowEventBehaviour( $slot ).'"',