From ede19a6dddd975dc619bc7823b55a55ae9657879 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Wed, 29 Dec 2021 22:35:55 +0100
Subject: [PATCH] [mirotalksfu] - improve aspect ratio

---
 public/js/Room.js      |  3 +--
 public/js/VideoGrid.js | 13 +++++++++----
 public/view/Room.html  |  9 +++++----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/public/js/Room.js b/public/js/Room.js
index dd31d0b9..3badb71f 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -745,8 +745,7 @@ function handleSelects() {
     BtnsAspectRatio.onchange = () => {
         setAspectRatio(BtnsAspectRatio.value);
     };
-    // Video aspect ratio for Mobile device 4:3 on Desktop 16:9
-    BtnsAspectRatio.selectedIndex = DetectRTC.isMobileDevice ? 0 : 1;
+    BtnsAspectRatio.selectedIndex = 0; // default
     setAspectRatio(BtnsAspectRatio.selectedIndex);
 
     BtnsBarPosition.onchange = () => {
diff --git a/public/js/VideoGrid.js b/public/js/VideoGrid.js
index 46a5847c..6b5924bb 100644
--- a/public/js/VideoGrid.js
+++ b/public/js/VideoGrid.js
@@ -1,12 +1,15 @@
 'use strict';
 
-// aspect       0       1      2      3
-let ratios = ['4:3', '16:9', '1:1', '1:2'];
-let aspect = 1;
+let customRatio = true;
+
+// aspect       0      1      2      3       4
+let ratios = ['0:0', '4:3', '16:9', '1:1', '1:2'];
+let aspect = 0;
 
 let ratio = getAspectRatio();
 
 function getAspectRatio() {
+    customRatio = aspect == 0 ? true : false;
     var ratio = ratios[aspect].split(':');
     return ratio[1] / ratio[0];
 }
@@ -18,6 +21,7 @@ function setAspectRatio(i) {
 }
 
 function Area(Increment, Count, Width, Height, Margin = 10) {
+    ratio = customRatio ? 0.75 : ratio;
     let i = 0;
     let w = 0;
     let h = Increment * ratio + Margin * 2;
@@ -34,7 +38,7 @@ function Area(Increment, Count, Width, Height, Margin = 10) {
 }
 
 function resizeVideoMedia() {
-    let Margin = 2;
+    let Margin = 3;
     let Scenary = document.getElementById('videoMediaContainer');
     let Width = Scenary.offsetWidth - Margin * 2;
     let Height = Scenary.offsetHeight - Margin * 2;
@@ -57,6 +61,7 @@ function resizeVideoMedia() {
 }
 
 function setWidth(width, margin) {
+    ratio = customRatio ? 0.68 : ratio;
     let Cameras = document.getElementsByClassName('Camera');
     for (let s = 0; s < Cameras.length; s++) {
         Cameras[s].style.width = width + 'px';
diff --git a/public/view/Room.html b/public/view/Room.html
index 846f224f..93be8909 100644
--- a/public/view/Room.html
+++ b/public/view/Room.html
@@ -231,10 +231,11 @@ access to use this app.
                     <p>Aspect ratio:</p>
                     <br />
                     <select id="BtnsAspectRatio" class="form-select text-light bg-dark">
-                        <option value="0">4:3</option>
-                        <option value="1">16:9</option>
-                        <option value="2">1:1</option>
-                        <option value="3">1:2</option>
+                        <option value="0">default</option>
+                        <option value="1">4:3</option>
+                        <option value="2">16:9</option>
+                        <option value="3">1:1</option>
+                        <option value="4">1:2</option>
                     </select>
                     <br />
                     <p>Buttons bar:</p>