[mirotalksfu] - Responsive main buttons

app/src/Server.js

@@ -40,7 +40,7 @@ dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.4
+ * @version 1.3.41
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.3.4",
+    "version": "1.3.41",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -34,8 +34,8 @@
     "author": "Miroslav Pejic",
     "license": "AGPL-3.0",
     "dependencies": {
-        "@sentry/integrations": "7.86.0",
-        "@sentry/node": "7.86.0",
+        "@sentry/integrations": "7.88.0",
+        "@sentry/node": "7.88.0",
         "axios": "^1.6.2",
         "body-parser": "1.20.2",
         "colors": "1.4.0",
@@ -47,7 +47,7 @@
         "mediasoup": "3.13.11",
         "mediasoup-client": "3.7.0",
         "ngrok": "^4.3.3",
-        "openai": "^4.21.0",
+        "openai": "^4.23.0",
         "qs": "6.11.2",
         "socket.io": "4.7.2",
         "swagger-ui-express": "5.0.0",

public/css/Room.css

@@ -210,13 +210,6 @@ body {
     font-size: 1.2rem;
 }
 
-@media screen and (max-width: 540px) {
-    #control button {
-        font-size: 1rem;
-        padding: 5px;
-    }
-}
-
 #exitButton {
     color: red;
 }

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.4
+ * @version 1.3.41
  *
  */
 
@@ -1850,6 +1850,7 @@ function handleSelects() {
         lsSettings.buttons_bar = BtnsBarPosition.selectedIndex;
         lS.setSettings(lsSettings);
         refreshMainButtonsToolTipPlacement();
+        resizeMainButtons();
     };
     pinVideoPosition.onchange = () => {
         rc.toggleVideoPin(pinVideoPosition.value);
@@ -2132,6 +2133,7 @@ function loadSettingsFromLocalStorage() {
     rc.changeBtnsBarPosition(BtnsBarPosition.value);
     rc.toggleVideoPin(pinVideoPosition.value);
     refreshMainButtonsToolTipPlacement();
+    resizeMainButtons();
 }
 
 // ####################################################

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.4
+ * @version 1.3.41
  *
  */
 

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,
 );