Fix: After the cursor leaves Thumbs, ZMS must always be stopped, even in case of network problems.

web/ajax/events.php

@@ -326,7 +326,7 @@ function queryRequest($filter, $search, $advsearch, $sort, $offset, $order, $lim
       'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&');
 
     // Modify the row data as needed
-    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" />';
+    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" data-server-url="'.$event->Monitor()->UrlToIndex().'" />';
     $row['imgWidth'] = validInt($event->ThumbnailWidth());
     $row['imgHeight'] = validInt($event->ThumbnailHeight());
 

web/ajax/frames.php

@@ -186,7 +186,7 @@ function queryRequest($eid, $search, $advsearch, $sort, $offset, $order, $limit)
       $full_img_src = join('&', array_filter(array($base_img_src, $thmb_fn)));
 
       # finally, we assemble the the entire thumbnail img src structure, whew
-      $row['Thumbnail'] = '<img src="' .$img_src. '" '.$thmb_width. ' ' .$thmb_height. 'img_src="' .$img_src. '" full_img_src="' .$full_img_src. '">';
+      $row['Thumbnail'] = '<img src="' .$img_src. '" '.$thmb_width. ' ' .$thmb_height. 'img_src="' .$img_src. '" full_img_src="' .$full_img_src. '" data-server-url="'.$Monitor->UrlToIndex().'">';
     }
     $returned_rows[] = $row;
   } # end foreach row matching search

web/ajax/watch.php

@@ -88,7 +88,7 @@
       'mode'=>'jpeg', 'scale'=>$scale, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>'single', 'rate'=>'400'), '&');
 
     // Modify the row data as needed
-    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" />';
+    $row['imgHtml'] = '<img id="thumbnail' .$event->Id(). '" src="' .$imgSrc. '" alt="Event '.$event->Id().'" width="' .validInt($event->ThumbnailWidth()). '" height="' .validInt($event->ThumbnailHeight()).'" stream_src="' .$streamSrc. '" still_src="' .$imgSrc. '" loading="lazy" data-server-url="'.$event->Monitor()->UrlToIndex().'" />';
     $row['Name'] = validHtmlStr($row['Name']);
     $row['Length'] = gmdate('H:i:s', intval($row['Length']));
 

web/skins/classic/js/skin.js

@@ -49,6 +49,8 @@ const BTN_COLLAPSE = document.getElementById('btn-collapse'); // Button to switc
 const SIDEBAR_MAIN = document.getElementById('sidebarMain'); // Left Sidebar with Menu
 const SIDEBAR_MAIN_EXTRUDER = document.getElementById('extruderLeft'); // Sliding extruder panel from the left Sidebar
 
+const PLACEHOLDER_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI="; // Transparent GIF 1 pixel
+
 function checkSize() {
   if ( 0 ) {
     if (window.outerHeight) {
@@ -1135,7 +1137,19 @@ function thumbnail_onmouseover(event) {
   const img = event.target;
   const imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom';
   const imgAttr = ( currentView == 'frames' ) ? 'full_img_src' : 'stream_src';
-  img.src = img.getAttribute(imgAttr);
+  let url = null;
+  try {
+    url = new URL(img.getAttribute(imgAttr));
+  } catch (e) {
+    console.warn(e, `URL ${img.getAttribute(imgAttr)} cannot be recognized.`);
+  }
+
+  if (url) {
+    url.searchParams.set('connkey', generateConnKey());
+    img.src = url.href;
+  } else {
+    img.src = img.getAttribute(imgAttr);
+  }
   if ( currentView == 'console' || currentView == 'monitor' ) {
     const rect = img.getBoundingClientRect();
     const zoomHeight = rect.height * 5; // scale factor defined in css
@@ -1155,13 +1169,44 @@ function thumbnail_onmouseout(event) {
   var img = event.target;
   var imgClass = ( currentView == 'console' ) ? 'zoom-console' : 'zoom';
   var imgAttr = ( currentView == 'frames' ) ? 'img_src' : 'still_src';
+  imgQuitZMS(img);
+  img.src = PLACEHOLDER_IMAGE;
   img.src = img.getAttribute(imgAttr);
   img.classList.remove(imgClass);
   if ( currentView == 'console' || currentView == 'monitor' ) {
     img.style.transformOrigin = '';
   }
 }
 
+function generateConnKey() {
+  return (Math.floor(Math.random()*900000) + 100000);
+}
+
+function imgQuitZMS(img) {
+  const url = new URL(img.src);
+  const connKey = url.searchParams.get('connkey');
+  const dataMonitorUrl = img.getAttribute('data-server-url');
+  if (connKey && dataMonitorUrl) {
+    jQuery.ajaxQueue({
+      url: dataMonitorUrl + (auth_relay?'?'+auth_relay:''),
+      xhrFields: {withCredentials: true},
+      data: {
+        command: CMD_QUIT,
+        request: "stream",
+        view: "request",
+        connkey: connKey
+      },
+      dataType: 'json'
+    })
+        .done(function(data) {
+          console.log("imgQuitZMS done:", data);
+        })
+        .fail(function(data) {
+          console.log("imgQuitZMS fail:", data);
+        });
+  }
+}
+
 function initThumbAnimation() {
   if ( ANIMATE_THUMBS ) {
     $j('.colThumbnail img').each(function() {

web/skins/classic/views/console.php

@@ -361,7 +361,7 @@
       .$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.
       ($options['width'] ? ' width="'.$options['width'].'"' : '' ).
       ($options['height'] ? ' height="'.$options['height'].'"' : '' ).
-      ' loading="lazy" /></a></div>';
+      ' loading="lazy" data-server-url="'.$Monitor->UrlToIndex().'" /></a></div>';
   }
 ?>
             <td class="colName">

web/skins/classic/views/monitor.php

@@ -1386,7 +1386,7 @@ class="nav-link<?php echo ($tab == $name ? ' active' : '') . ' ' . (($name == 'z
     .$thmbWidth.$thmbHeight. '" stream_src="' .$streamSrc. '" still_src="' .$stillSrc. '"'.
     ($options['width'] ? ' width="'.$options['width'].'"' : '' ).
     ($options['height'] ? ' height="'.$options['height'].'"' : '' ).
-    ' loading="lazy" /></a></div>';
+    ' loading="lazy" data-server-url="'.$monitor->UrlToIndex().'" /></a></div>';
   echo $imgHTML;
 ?>
             </li>