[mirotalksfu] - Responsive main buttons

public/js/VideoGrid.js

@@ -1,5 +1,9 @@
 'use strict';
 
+// ####################################################
+// RESPONSIVE PARTICIPANTS VIEW
+// ####################################################
+
 let customRatio = true;
 
 // aspect       0      1      2      3       4
@@ -100,11 +104,70 @@ function setWidth(Cameras, width, bigWidth, margin, maxHeight, isOneVideoElement
     }
 }
 
+// ####################################################
+// RESPONSIVE MAIN BUTTONS
+// ####################################################
+
+const MOBILE_BREAKPOINT = 500;
+const TABLET_BREAKPOINT = 580;
+const DESKTOP_BREAKPOINT = 730;
+
+const mainButtonsBar = document.querySelectorAll('#control button');
+const mainButtonsIcon = document.querySelectorAll('#control button i');
+
+function resizeMainButtons() {
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const isButtonsBarVertical = BtnsBarPosition.selectedIndex === 0;
+    //console.log('Window size', { width: windowWidth, height: windowWidth});
+    if (isButtonsBarVertical) {
+        // Main buttons vertical align
+        if (windowHeight <= MOBILE_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.7rem', '4px', mainButtonsIcon, '0.8rem', '40px');
+        } else if (windowHeight <= TABLET_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.9rem', '4px', mainButtonsIcon, '1rem', '45px');
+        } else if (windowHeight <= DESKTOP_BREAKPOINT) {
+            setStyles(mainButtonsBar, '1rem', '5px', mainButtonsIcon, '1.1rem', '50px');
+        } else {
+            // > DESKTOP_BREAKPOINT
+            setStyles(mainButtonsBar, '1rem', '10px', mainButtonsIcon, '1.2rem', '60px');
+        }
+    } else {
+        // Main buttons horizontal align
+        if (windowWidth <= MOBILE_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.7rem', '4px', mainButtonsIcon, '0.8rem');
+        } else if (windowWidth <= TABLET_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.9rem', '4px', mainButtonsIcon, '1rem');
+        } else if (windowWidth <= DESKTOP_BREAKPOINT) {
+            setStyles(mainButtonsBar, '1rem', '5px', mainButtonsIcon, '1.1rem');
+        } else {
+            // > DESKTOP_BREAKPOINT
+            setStyles(mainButtonsBar, '1rem', '10px', mainButtonsIcon, '1.2rem');
+        }
+    }
+    //
+    function setStyles(elements, fontSize, padding, icons, fontSizeIcon, bWidth = null) {
+        if (bWidth) document.documentElement.style.setProperty('--btns-width', bWidth);
+
+        elements.forEach(function (element) {
+            element.style.fontSize = fontSize;
+            element.style.padding = padding;
+        });
+        icons.forEach(function (icon) {
+            icon.style.fontSize = fontSizeIcon;
+        });
+    }
+}
+
 window.addEventListener(
     'load',
     function (event) {
         resizeVideoMedia();
-        window.onresize = resizeVideoMedia;
+        resizeMainButtons();
+        window.onresize = function () {
+            resizeVideoMedia();
+            resizeMainButtons();
+        };
     },
     false,
 );