From c9aa03dc5572c258fe13e1a20302f8b716dfc615 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Wed, 25 Sep 2024 10:35:43 -0400
Subject: [PATCH] You can't change size in a ResizeObserver.  So do what we do
 in montage, just add the affected element to an array and deal with it in an
 interval

---
 web/skins/classic/views/js/watch.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js
index 5416b28c23..d1c435bdf6 100644
--- a/web/skins/classic/views/js/watch.js
+++ b/web/skins/classic/views/js/watch.js
@@ -10,6 +10,7 @@ var filterQuery = '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms]
 var idle = 0;
 var monitorStream = false; /* Stream is not started */
 var currentMonitor;
+var changedMonitors = [];
 
 var classSidebarL = 'col-sm-3'; /* id="sidebar" */
 var classSidebarR = 'col-sm-2'; /* id="ptzControls" */
@@ -1063,8 +1064,12 @@ function initPage() {
 
   // Creating a ResizeObserver Instance
   observer = new ResizeObserver((objResizes) => {
+    // We can't do the actual resizing in the Observer, it causes a loop. Need to just set a flag and do it in an interval.
     objResizes.forEach((obj) => {
-      monitorsSetScale(monitorId);
+      const id = stringToNumber(obj.target.id);
+      if (!changedMonitors.includes(id)) {
+        changedMonitors.push(id);
+      }
     });
   });
 
@@ -1073,6 +1078,16 @@ function initPage() {
     observer.observe(this);
   });
 
+  setInterval(() => { //Updating GridStack resizeToContent, Scale & Ratio
+    if (changedMonitors.length > 0) {
+      changedMonitors.slice().reverse().forEach(function(item, index, object) {
+        const img = document.getElementById('liveStream'+item);
+        changedMonitors.splice(object.length - 1 - index, 1);
+        monitorsSetScale(item);
+      });
+    }
+  }, 100);
+
   // Event listener for double click
   //var elStream = document.querySelectorAll('[id ^= "liveStream"], [id ^= "evtStream"]');
   var elStream = document.querySelectorAll('[id = "wrapperMonitor"]');