[mirotalksfu] - fix UI

app/src/Server.js

@@ -55,7 +55,7 @@ dev 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.5.95
+ * @version 1.5.96
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.5.95",
+    "version": "1.5.96",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {

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.5.95
+ * @version 1.5.96
  *
  */
 
@@ -4500,7 +4500,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.5.95',
+        title: 'WebRTC SFU v1.5.96',
         html: `
         <br />
         <div id="about">

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.5.95
+ * @version 1.5.96
  *
  */
 

public/js/WhoAreYou.js

@@ -2,6 +2,8 @@
 
 console.log(window.location);
 
+const mediaQuery = window.matchMedia('(max-width: 640px)');
+
 const settings = JSON.parse(localStorage.getItem('SFU_SETTINGS'));
 
 console.log('Settings', settings);
@@ -16,6 +18,8 @@ guestJoinRoomBtn.classList.add('disabled');
 const pathParts = window.location.pathname.split('/');
 const roomId = filterXSS(pathParts[pathParts.length - 1]);
 
+let roomActive = false;
+
 presenterLoginBtn.onclick = () => {
     window.location.href = '/login';
 };
@@ -34,6 +38,11 @@ function sound(name) {
     });
 }
 
+function handleScreenResize(e) {
+    if (roomActive) return;
+    presenterLoginBtn.style.display = e.matches ? 'flex' : 'inline-flex';
+}
+
 function checkRoomStatus(roomId) {
     if (!roomId) {
         console.warn('Room ID empty!');
@@ -43,7 +52,7 @@ function checkRoomStatus(roomId) {
         .post('/isRoomActive', { roomId })
         .then((response) => {
             console.log('isRoomActive', response.data);
-            const roomActive = response.data.message;
+            roomActive = response.data.message;
             if (roomActive) {
                 sound('roomActive');
                 guestJoinRoomBtn.classList.remove('disabled');
@@ -51,7 +60,7 @@ function checkRoomStatus(roomId) {
                 if (autoJoinRoom) guestJoinRoomBtn.click();
             } else {
                 guestJoinRoomBtn.classList.add('disabled');
-                presenterLoginBtn.style.display = 'inline-flex';
+                handleScreenResize(mediaQuery);
             }
         })
         .catch((error) => {
@@ -59,6 +68,10 @@ function checkRoomStatus(roomId) {
         });
 }
 
+handleScreenResize(mediaQuery);
+
 checkRoomStatus(roomId);
 
+mediaQuery.addEventListener('change', handleScreenResize);
+
 setInterval(() => checkRoomStatus(roomId), 5000); // Start checking room status every 5 seconds