From 2fd6cbe742fd6daf0e4cafb3a776c45edf401b25 Mon Sep 17 00:00:00 2001
From: Heng Liu <liucougar@gmail.com>
Date: Thu, 1 Oct 2015 22:41:31 -0700
Subject: [PATCH 1/2] fix timeline view for SaveJPEGs monitors (without enabled
 VideoWriter)

---
 web/skins/classic/views/js/timeline.js     | 66 ++++++++++++----------
 web/skins/classic/views/js/timeline.js.php |  3 +-
 web/skins/classic/views/timeline.php       |  9 ++-
 3 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/web/skins/classic/views/js/timeline.js b/web/skins/classic/views/js/timeline.js
index 64598b528..3d91f64d7 100644
--- a/web/skins/classic/views/js/timeline.js
+++ b/web/skins/classic/views/js/timeline.js
@@ -1,4 +1,4 @@
-var events = new Object();
+var events = {};
 
 function showEvent( eid, fid, width, height )
 {    
@@ -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,40 +120,45 @@ 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 newsource=imagePrefix+imagePath.slice(0,imagePath.lastIndexOf('/'))+"/event.mp4";
-    //console.log(newsource);
-    //console.log(sources[0].src.slice(-newsource.length));
-    if(newsource!=vid.currentSrc.slice(-newsource.length) || vid.readyState==0)
+    var imageSrc = $('imageSrc');
+    if(showVideo)
     {
-        //console.log("loading new");
-        //it is possible to set a long source list here will that be unworkable?
-        var sources = vid.getElementsByTagName('source');
-        sources[0].src=newsource;
-        vid.load();
-        vid.oncanplay=function(){    vid.currentTime=fid/fps;} //25.0
+        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));
+        if(newsource!=vid.currentSrc.slice(-newsource.length) || vid.readyState==0)
+        {
+            //console.log("loading new");
+            //it is possible to set a long source list here will that be unworkable?
+            var sources = vid.getElementsByTagName('source');
+            sources[0].src=newsource;
+            vid.load();
+            vid.oncanplay=function(){    vid.currentTime=fid/fps;} //25.0
+        }
+        else
+        {
+            vid.oncanplay=null;//console.log("canplay");}
+            if(!vid.seeking)
+                vid.currentTime=fid/fps;//25.0;
+        }
     }
     else
     {
-        vid.oncanplay=null;//console.log("canplay");}
-        if(!vid.seeking)
-            vid.currentTime=fid/fps;//25.0;
+        vid.hide();
+        imageSrc.show();
+        imageSrc.setProperty( 'src', imagePrefix+imagePath );
+        imageSrc.removeEvent( 'click' );
+        imageSrc.addEvent( 'click', showEvent.pass( [ eid, fid, width, height ] ) );
     }
-    
-   /* var imageSrc = $('imageSrc');
-    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 )
diff --git a/web/skins/classic/views/js/timeline.js.php b/web/skins/classic/views/js/timeline.js.php
index c5852a6ea..d11bccc9e 100644
--- a/web/skins/classic/views/js/timeline.js.php
+++ b/web/skins/classic/views/js/timeline.js.php
@@ -1,6 +1,6 @@
 var filterQuery = '<?php echo validJsStr($filterQuery) ?>';
 
-var monitorNames = new Object();
+var monitorNames = {};
 <?php
 foreach ( $monitors as $monitor )
 {
@@ -12,5 +12,6 @@ monitorNames[<?php echo $monitor['Id'] ?>] = '<?php echo validJsStr($monitor['Na
     }
 }
 ?>
+var monitors = <?php echo json_encode($monitors) ?>;
 
 var archivedString = "<?php echo translate('Archived') ?>";
diff --git a/web/skins/classic/views/timeline.php b/web/skins/classic/views/timeline.php
index 109712f88..92c2226d3 100644
--- a/web/skins/classic/views/timeline.php
+++ b/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') ?>"/>-->
-			<!-- width="<?php echo $event['Width']; ?>" height="<?php echo $event['Height']; ?>" -->
+		        <img id="imageSrc" class="imageWidth" src="graphics/transparent.gif" alt="<?php echo translate('ViewEvent') ?>" title="<?php echo translate('ViewEvent') ?>"/>
 			<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 ).'"',

From 59b06755889a5211e7b25254f225ac658f3d5c1b Mon Sep 17 00:00:00 2001
From: Heng Liu <liucougar@gmail.com>
Date: Fri, 2 Oct 2015 20:04:10 -0700
Subject: [PATCH 2/2] only expose monitor info which are being used in client

---
 web/skins/classic/views/js/timeline.js     |  2 +-
 web/skins/classic/views/js/timeline.js.php | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/skins/classic/views/js/timeline.js b/web/skins/classic/views/js/timeline.js
index 3d91f64d7..e5ffe8105 100644
--- a/web/skins/classic/views/js/timeline.js
+++ b/web/skins/classic/views/js/timeline.js
@@ -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 );
diff --git a/web/skins/classic/views/js/timeline.js.php b/web/skins/classic/views/js/timeline.js.php
index d11bccc9e..b11a79e7a 100644
--- a/web/skins/classic/views/js/timeline.js.php
+++ b/web/skins/classic/views/js/timeline.js.php
@@ -1,17 +1,21 @@
 var filterQuery = '<?php echo validJsStr($filterQuery) ?>';
 
-var monitorNames = {};
 <?php
+$jsMonitors = array();
+$fields = array('Name', 'SaveJPEGs', 'VideoWriter');
 foreach ( $monitors as $monitor )
 {
     if ( !empty($monitorIds[$monitor['Id']]) )
     {
-?>
-monitorNames[<?php echo $monitor['Id'] ?>] = '<?php echo validJsStr($monitor['Name']) ?>';
-<?php
+        $jsMonitor = array();
+        foreach ($fields as $field)
+        {
+            $jsMonitor[$field] = $monitor[$field];
+        }
+        $jsMonitors[$monitor['Id']] = $jsMonitor;
     }
 }
 ?>
-var monitors = <?php echo json_encode($monitors) ?>;
+var monitors = <?php echo json_encode($jsMonitors) ?>;
 
 var archivedString = "<?php echo translate('Archived') ?>";