centralize thumb animation js, add delay

web/skins/classic/css/base/skin.css

@@ -728,23 +728,11 @@ li.search-choice {
 }
 
 .zoom {
-  padding: 50px;
-  transition: transform .2s; /* Animation */
-  margin: 0 auto;
-}
-
-.zoom:hover {
   transform-origin: 70% 50%;
   transform: scale(5); /* (arbitray zoom value - Note if the zoom is too large, it will go outside of the viewport) */
 }
 
-.zoom-right {
+.zoom-console {
-  padding: 0px;
-  transition: transform .2s; /* Animation */
-  margin: 0 auto;
-}
-
-.zoom-right:hover {
   transform-origin: 0% 50%;
   transform: scale(5); /* (arbitray zoom value - Note if the zoom is too large, it will go outside of the viewport) */
 }

web/skins/classic/js/skin.js

@@ -889,3 +889,31 @@ function manageShutdownBtns(element) {
       })
       .fail(logAjaxFail);
 }
+
+function thumbnail_onmouseover(event) {
+  timeout = setTimeout(function () {
+    var img = event.target;
+    var imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom-hover';
+    img.src = '';
+    img.src = img.getAttribute('stream_src');
+    img.addClass(imgClass);
+  }, 350);
+}
+
+function thumbnail_onmouseout(event) {
+  clearTimeout(timeout);
+  var img = event.target;
+  var imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom-hover';
+  img.src = '';
+  img.src = img.getAttribute('still_src');
+  img.removeClass(imgClass);
+}
+
+function initThumbAnimation() {
+  if ( ANIMATE_THUMBS ) {
+    $j('.colThumbnail img').each(function() {
+      this.addEventListener('mouseover', thumbnail_onmouseover, false);
+      this.addEventListener('mouseout', thumbnail_onmouseout, false);
+    });
+  }
+}

web/skins/classic/js/skin.js.php

@@ -49,6 +49,8 @@ var canViewMonitors = <?php echo canView('Monitors')?'true':'false' ?>;
 
 var canEditGroups = <?php echo canEdit('Groups')?'true':'false' ?>;
 
+var ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
+
 var refreshParent = <?php
 if ( ! empty($refreshParent) ) {
   if ( $refreshParent == true ) {

web/skins/classic/views/console.php

@@ -296,7 +296,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
   $imgHTML='';
   if ( ZM_WEB_LIST_THUMBS && ($monitor['Status'] == 'Connected') && $running ) {
     $options = array();
-    $thmbClass = ZM_WEB_ANIMATE_THUMBS ? 'colThumbnail zoom-right' : 'colThumbnail';
+
     $ratio_factor = $Monitor->ViewHeight() / $Monitor->ViewWidth();
     $options['width'] = ZM_WEB_LIST_THUMB_WIDTH;
     $options['height'] = ZM_WEB_LIST_THUMB_HEIGHT ? ZM_WEB_LIST_THUMB_HEIGHT : ZM_WEB_LIST_THUMB_WIDTH*$ratio_factor;
@@ -309,7 +309,7 @@ for( $monitor_i = 0; $monitor_i < count($displayMonitors); $monitor_i += 1 ) {
     $thmbWidth = ( $options['width'] ) ? 'width:'.$options['width'].'px;' : '';
     $thmbHeight = ( $options['height'] ) ? 'height:'.$options['height'].'px;' : '';
     
-    $imgHTML = '<div class="'.$thmbClass.'"><a';
+    $imgHTML = '<div class="colThumbnail"><a';
     $imgHTML .= $stream_available ? ' href="?view=watch&amp;mid='.$monitor['Id'].'">' : '>';
     $imgHTML .= '<img id="thumbnail' .$Monitor->Id(). '" src="' .$stillSrc. '" style="'
       .$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.

web/skins/classic/views/js/console.js

@@ -1,24 +1,3 @@
-function thumbnail_onmouseover(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('stream_src');
-}
-
-function thumbnail_onmouseout(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('still_src');
-}
-
-function initThumbAnimation() {
-  if ( WEB_ANIMATE_THUMBS ) {
-    $j('.colThumbnail img').each(function() {
-      this.addEventListener('mouseover', thumbnail_onmouseover, false);
-      this.addEventListener('mouseout', thumbnail_onmouseout, false);
-    });
-  }
-}
-
 function setButtonStates( element ) {
   var form = element.form;
   var checked = 0;

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

@@ -1,5 +1,4 @@
 var consoleRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_MAIN ?>;
-var WEB_ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
 
 <?php
 if ( canEdit('System') && ZM_DYN_SHOW_DONATE_REMINDER ) {

web/skins/classic/views/js/events.js

@@ -74,27 +74,6 @@ function processRows(rows) {
   return rows;
 }
 
-function thumbnail_onmouseover(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('stream_src');
-}
-
-function thumbnail_onmouseout(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('still_src');
-}
-
-function initThumbAnimation() {
-  if ( WEB_ANIMATE_THUMBS ) {
-    $j('.colThumbnail img').each(function() {
-      this.addEventListener('mouseover', thumbnail_onmouseover, false);
-      this.addEventListener('mouseout', thumbnail_onmouseout, false);
-    });
-  }
-}
-
 // Returns the event id's of the selected rows
 function getIdSelections() {
   var table = $j('#eventTable');

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

@@ -12,4 +12,3 @@ var emailedString = "<?php echo translate('Emailed') ?>";
 var yesString = "<?php echo translate('Yes') ?>";
 var noString = "<?php echo translate('No') ?>";
 var WEB_LIST_THUMBS = <?php echo ZM_WEB_LIST_THUMBS?'true':'false' ?>;
-var WEB_ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;

web/skins/classic/views/js/watch.js

@@ -83,27 +83,6 @@ function processRows(rows) {
   return rows;
 }
 
-function thumbnail_onmouseover(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('stream_src');
-}
-
-function thumbnail_onmouseout(event) {
-  var img = event.target;
-  img.src = '';
-  img.src = img.getAttribute('still_src');
-}
-
-function initThumbAnimation() {
-  if ( ANIMATE_THUMBS ) {
-    $j('.colThumbnail img').each(function() {
-      this.addEventListener('mouseover', thumbnail_onmouseover, false);
-      this.addEventListener('mouseout', thumbnail_onmouseout, false);
-    });
-  }
-}
-
 function showEvents() {
   $j('#ptzControls').addClass('hidden');
   $j('#events').removeClass('hidden');
@@ -903,8 +882,7 @@ function initPage() {
     var thumb_ndx = $j('#eventList tr th').filter(function() {
       return $j(this).text().trim() == 'Thumbnail';
     }).index();
-    var thmbClass = ANIMATE_THUMBS ? 'colThumbnail zoom' : 'colThumbnail';
+    table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass('colThumbnail');
-    table.find("tr td:nth-child(" + (thumb_ndx+1) + ")").addClass(thmbClass);
   });
 } // initPage
 

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

@@ -51,7 +51,6 @@ var SCALE_BASE = <?php echo SCALE_BASE ?>;
 var SOUND_ON_ALARM = <?php echo ZM_WEB_SOUND_ON_ALARM ?>;
 var POPUP_ON_ALARM = <?php echo ZM_WEB_POPUP_ON_ALARM ?>;
 var LIST_THUMBS = <?php echo ZM_WEB_LIST_THUMBS?'true':'false' ?>;
-var ANIMATE_THUMBS = <?php echo ZM_WEB_ANIMATE_THUMBS?'true':'false' ?>;
 
 var streamMode = "<?php echo $streamMode ?>";
 var showMode = "<?php echo ($showPtzControls && !empty($control))?"control":"events" ?>";