Calculation of Scale before the start of monitors. Montage page

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

@@ -13,6 +13,7 @@ var objGridStack;
 var layoutColumns = 48; //Maximum number of columns (items per row) for GridStack
 var changedMonitors = []; //Monitor IDs that were changed in the DOM
 var scrollBbarExists = false;
+var movableMonitorData = []; //Monitor data (id, width, stop (true - stop moving))
 
 var panZoomEnabled = true; //Add it to settings in the future
 var panZoomMaxScale = 10;
@@ -558,6 +559,12 @@ function handleClick(evt) {
 
 function startMonitors() {
   for (let i = 0, length = monitorData.length; i < length; i++) {
+    const obj = document.getElementById('liveStream'+monitors[i].id);
+    const url = new URL(obj.src);
+
+    url.searchParams.set('scale', parseInt(obj.clientWidth / monitors[i].width * 100));
+    obj.src = url;
+
     // Start the fps and status updates. give a random delay so that we don't assault the server
     const delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
     monitors[i].start(delay);
@@ -739,10 +746,12 @@ function initPage() {
     //Create a Ratio array for each monitor
     const r = monitors[i].width / monitors[i].height;
     arrRatioMonitors.push(r > 1 ? r : 1/r); //landscape or portret orientation
+
+    //Prepare the array.
+    movableMonitorData[monitors[i].id] = {'width': 0, 'stop': false};
   }
 
   calculateAverageMonitorsRatio(arrRatioMonitors);
-  startMonitors();
 
   $j(window).on('resize', windowResize); //Only used when trying to apply "changeScale". It will be deleted in the future.
   document.addEventListener("fullscreenchange", fullscreenchanged);
@@ -856,6 +865,14 @@ function initPage() {
   $j('[id ^= "liveStream"]').each(function() {
     observer.observe(this);
   });
+
+  //Check if the monitor arrangement is complete
+  const intervalIdWidth = setInterval(() => {
+    if (checkEndMonitorsChange()) {
+      startMonitors();
+      clearInterval(intervalIdWidth);
+    }
+  }, 100);
 } // end initPage
 
 function formSubmit(form) {
@@ -1100,6 +1117,35 @@ function setTriggerChangedMonitors(id=null) {
   }
 }
 
+function checkEndMonitorsChange() {
+  for (let i = 0, length = monitorData.length; i < length; i++) {
+    const id = monitors[i].id;
+
+    if (!movableMonitorData[id].stop) {
+      //Monitor is still moving
+      const objWidth = document.getElementById('liveStream'+monitors[i].id).clientWidth;
+      if (objWidth == movableMonitorData[id].width && objWidth !=0 ) {
+        movableMonitorData[id].stop = true; //The size does not change, which means it’s already in its place!
+      } else {
+        movableMonitorData[id].width = objWidth;
+      }
+    }
+  }
+  //Check if all monitors are in their places
+  for (let i = 0, length = movableMonitorData.length; i < length; i++) {
+    var monitorsEndMoving = true;
+
+    if (movableMonitorData[i]) { //There may be empty elements
+      if (!movableMonitorData[i].stop) {
+        //Monitor is still moving
+        monitorsEndMoving = false;
+        return;
+      }
+    }
+  }
+  return monitorsEndMoving;
+}
+
 function changeMonitorStatusPositon() {
   const monitorStatusPositon = $j('#monitorStatusPositon').val();
   $j('.monitorStatus').each(function updateStatusPosition() {