From a25dec205b70fbf0f75f8c2f424d4920a875f399 Mon Sep 17 00:00:00 2001
From: hobbyquaker <bastiraff@googlemail.com>
Date: Thu, 29 Mar 2018 17:55:46 +0200
Subject: [PATCH] improve updateLayout

---
 motioneye/static/js/main.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index 1097a06..84f139e 100644
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -999,21 +999,20 @@ function updateLayout() {
         /* make sure the height of each camera
          * is smaller than the height of the screen
          * divided by the number of layout rows */
-        
-        /* find the tallest frame */
+
+        /* check if all images are initialized and find the max height/width ratio */
         var frames = getCameraFrames();
-        var maxHeight = -1;
-        var maxHeightFrame = null;
+        var maxRatio = 0;
+
         frames.each(function () {
-            var frame = $(this);
-            var height = frame.height();
-            if (height > maxHeight) {
-                maxHeight = height;
-                maxHeightFrame = frame;
+            var img = $(this).find('img.camera');
+            var ratio = img.height() / img.width();
+            if (ratio > maxRatio) {
+                maxRatio = ratio;
             }
         });
-        
-        if (!maxHeightFrame) {
+
+        if (!maxRatio) {
             return; /* no camera frames */
         }
         
@@ -1025,16 +1024,15 @@ function updateLayout() {
             columns = 1; /* always 1 column when in full screen or mobile */
         }
         
-        var heightOffset = 10; /* some padding */
+        var heightOffset = 5; /* some padding */
         if (!isFullScreen()) {
             heightOffset += 50; /* top bar */
         }
     
         var windowHeight = $(window).height() - heightOffset;
-        var ratio = maxHeightFrame.width() / maxHeightFrame.height() / layoutRows;
-        var width = parseInt(ratio * windowHeight * columns);
         var maxWidth = windowWidth;
-        
+
+        var width = windowHeight / maxRatio * columns;
         if (pageContainer.hasClass('stretched') && windowWidth > 1200) {
             maxWidth *= 0.6; /* opened settings panel occupies 40% of the window width */ 
         }
-- 
2.39.5