Feat: Scaling of control buttons (Zoom, Edit, etc.) located on the Stream depending on the width of the Stream (Event. Montage, Watch page)

web/skins/classic/js/skin.js

@@ -1250,4 +1250,28 @@ var doubleTouch = function(e) {
   }
 };
 
+function setButtonSizeOnStream() {
+  const elStream = document.querySelectorAll('[id ^= "liveStream"], [id ^= "evtStream"]');
+  Array.prototype.forEach.call(elStream, (el) => {
+    //It is necessary to calculate the size for each Stream, because on the Montage page they can be of different sizes.
+    const w = el.offsetWidth;
+    // #videoFeedStream - on Event page
+    const monitorId = (stringToNumber(el.id)) ? stringToNumber(el.id) : stringToNumber(el.closest('[id ^= "videoFeedStream"]').id);
+    const buttonsBlock = document.getElementById('button_zoom' + monitorId);
+    if (!buttonsBlock) return;
+    const buttons = buttonsBlock.querySelectorAll(`
+      button.btn.btn-zoom-out span,
+      button.btn.btn-zoom-in span,
+      button.btn.btn-view-watch span,
+      button.btn.btn-fullscreen span,
+      button.btn.btn-edit-monitor span`
+    );
+    Array.prototype.forEach.call(buttons, (btn) => {
+      const btnWeight = (w/10 < 100) ? w/10 : 100;
+      btn.style.fontSize = btnWeight + "px";
+      btn.style.margin = -btnWeight/20 + "px";
+    });
+  });
+}
+
 loadFontFaceObserver();

web/skins/classic/views/js/event.js

@@ -343,6 +343,7 @@ function changeScale() {
     alarmCue.html(renderAlarmCues(videoFeed));
   }
 
+  setButtonSizeOnStream();
   // After a resize, check if we still have room to display the event stats table
   onStatsResize(newWidth);
 

web/skins/classic/views/js/montage.js

@@ -705,6 +705,7 @@ function initPage() {
         }
         $j('#button_zoom' + id).stop(true, true).slideDown('fast');
         $j('#ratioControl' + id).stop(true, true).slideDown('fast');
+        $j('#ratioControl' + id).css({top: document.getElementById('btn-zoom-in' + id).offsetHeight + 10 + 'px'});
       },
       function() {
         const id = stringToNumber(this.id);
@@ -1013,6 +1014,7 @@ function monitorsSetScale(id=null) {
       monitors[i].setScale(0, parseInt(el.clientWidth * panZoomScale) + 'px', parseInt(el.clientHeight * panZoomScale) + 'px', {resizeImg: false, streamQuality: $j('#streamQuality').val()});
     }
   }
+  setButtonSizeOnStream();
 }
 
 function changeMonitorRate() {

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

@@ -27,6 +27,7 @@ var coordinateMouse = {
 var leftBtnStatus = {Down: false, UpAfterDown: false};
 var updateScale = false; //Scale needs to be updated
 var TimerHideShow;
+var observer;
 
 /*
 This is the format of the json object sent by bootstrap-table
@@ -1211,6 +1212,18 @@ function initPage() {
   }
   streamPrepareStart();
 
+  // Creating a ResizeObserver Instance
+  observer = new ResizeObserver((objResizes) => {
+    objResizes.forEach((obj) => {
+      monitorsSetScale(monitorId);
+    });
+  });
+
+  // Registering an observer on an element
+  $j('[id ^= "liveStream"]').each(function() {
+    observer.observe(this);
+  });
+
   // Event listener for double click
   //var elStream = document.querySelectorAll('[id ^= "liveStream"], [id ^= "evtStream"]');
   var elStream = document.querySelectorAll('[id = "wrapperMonitor"]');
@@ -1576,6 +1589,7 @@ function monitorsSetScale(id=null) {
       }
     }
   }
+  setButtonSizeOnStream();
 }
 
 // Kick everything off