Merge pull request #4065 from IgorA100/patch-138

Fix: in function "scaleToFit" do not take padding into account if the width is enough (skin.js)
ZoneMinder · Jun 7, 2024 · d29a60a · d29a60a
2 parents f4d69d3 + 08fd4c0
commit d29a60a
Showing 1 changed file with 4 additions and 12 deletions.
diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js
@@ -681,13 +681,13 @@ function endOfResize(e) {
  * */
 function scaleToFit(baseWidth, baseHeight, scaleEl, bottomEl, container, panZoomScale = 1) {
   $j(window).on('resize', endOfResize); //set delayed scaling when Scale to Fit is selected
-  const ratio = baseWidth / baseHeight;
   if (!container) container = $j('#content');
   if (!container) {
     console.error("No container found");
     return;
   }
 
+  const ratio = baseWidth / baseHeight;
   const viewPort = $j(window);
   // jquery does not provide a bottom offset, and offset does not include margins.  outerHeight true minus false gives total vertical margins.
   var bottomLoc = 0;
@@ -699,22 +699,13 @@ function scaleToFit(baseWidth, baseHeight, scaleEl, bottomEl, container, panZoom
     console.log("bottomLoc: " + bottomEl.offset().top + " + (" + bottomEl.outerHeight(true) + ' - ' + bottomEl.outerHeight() +') + '+bottomEl.outerHeight(true) + '='+bottomLoc);
   }
   let newHeight = viewPort.height() - (bottomLoc - scaleEl.outerHeight(true));
-  console.log("newHeight = " + viewPort.height() +" - " + bottomLoc + ' - ' + scaleEl.outerHeight(true)+'='+newHeight);
   let newWidth = ratio * newHeight;
 
-  // Let's recalculate everything and reduce the height a little. Necessary if "padding" is specified for "wrapperEventVideo"
-  padding = parseInt(container.css("padding-left")) + parseInt(container.css("padding-right"));
-  newWidth -= padding;
-  newHeight = newWidth / ratio;
-
-  console.log("newWidth = ", newWidth, "container width:", container.innerWidth()-padding);
-
-  if (newHeight < 0 || newWidth > container.innerWidth()-padding) {
+  if (newHeight < 0 || newWidth > container.width()) {
     // Doesn't fit on screen anyways?
-    newWidth = container.innerWidth()-padding;
+    newWidth = container.width();
     newHeight = newWidth / ratio;
   }
-  console.log("newWidth = " + newWidth);
   let autoScale = Math.round(newWidth / baseWidth * SCALE_BASE * panZoomScale);
   /* IgorA100 not required due to new "Scale" algorithm & new PanZoom (may 2024)
   const scales = $j('#scale option').map(function() {
@@ -733,6 +724,7 @@ function scaleToFit(baseWidth, baseHeight, scaleEl, bottomEl, container, panZoom
   }
   */
   if (autoScale < 10) autoScale = 10;
+  console.log(`container.height=${container.height()}, newWidth=${newWidth}, newHeight=${newHeight}, container width=${container.width()}, autoScale=${autoScale}`);
   return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale};
 }