From 9a70e4cb3d4d9306e748fde231ec43534a2a616e Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Sun, 17 Dec 2023 13:39:29 +0100 Subject: [PATCH] [mirotalksfu] - Responsive main buttons --- app/src/Server.js | 2 +- package.json | 8 ++--- public/css/Room.css | 7 ----- public/js/Room.js | 4 ++- public/js/RoomClient.js | 2 +- public/js/VideoGrid.js | 65 ++++++++++++++++++++++++++++++++++++++++- 6 files changed, 73 insertions(+), 15 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 92b79b9d..0abf3d08 100644 --- a/app/src/Server.js +++ b/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 * */ diff --git a/package.json b/package.json index 2dcd27fb..de8f5f71 100644 --- a/package.json +++ b/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", diff --git a/public/css/Room.css b/public/css/Room.css index d4c72926..c5b60067 100644 --- a/public/css/Room.css +++ b/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; } diff --git a/public/js/Room.js b/public/js/Room.js index 7d7aba8b..1f3fe06c 100644 --- a/public/js/Room.js +++ b/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(); } // #################################################### diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 6b8da6c7..e67a0e01 100644 --- a/public/js/RoomClient.js +++ b/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 * */ diff --git a/public/js/VideoGrid.js b/public/js/VideoGrid.js index 774e29af..4ba66707 100644 --- a/public/js/VideoGrid.js +++ b/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, );