[mirotalksfu] - improve whoAreYou logic

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.93
+ * @version 1.5.94
  *
  */
 
@@ -468,6 +468,14 @@ function startServer() {
         }
     });
 
+    // Check if room active (exists)
+    app.post(['/isRoomActive'], (req, res) => {
+        const { roomId } = checkXSS(req.body);
+        const roomActive = roomList.has(roomId);
+        if (roomActive) log.debug('isRoomActive', { roomId, roomActive });
+        res.status(200).json({ message: roomActive });
+    });
+
     // Handle Direct join room with params
     app.get('/join/', async (req, res) => {
         if (Object.keys(req.query).length > 0) {
@@ -2937,6 +2945,10 @@ function startServer() {
         return payload;
     }
 
+    function isRoomActive(roomId) {
+        return roomList.has(roomId);
+    }
+
     function getActiveRooms() {
         const roomIds = Array.from(roomList.keys());
         const roomPeersArray = roomIds.map((roomId) => {

package.json

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

public/css/landing.css

@@ -2114,3 +2114,19 @@ main {
 #joinRoomForm {
     display: none;
 }
+
+/*--------------------------------------------------------------
+# Who are you
+--------------------------------------------------------------*/
+
+#whoAreYouDiv {
+    display: inline-flex;
+}
+#roomActiveDiv {
+    display: none;
+}
+
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}

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.93
+ * @version 1.5.94
  *
  */
 
@@ -4500,7 +4500,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.5.93',
+        title: 'WebRTC SFU v1.5.94',
         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.93
+ * @version 1.5.94
  *
  */
 

public/js/WhoAreYou.js

@@ -2,16 +2,46 @@
 
 console.log(window.location);
 
+const autoJoinRoom = false; // automatically join the guest to the meeting
+
 const presenterLoginBtn = document.getElementById('presenterLoginButton');
 const guestJoinRoomBtn = document.getElementById('guestJoinRoomButton');
 
-const pathParts = window.location.pathname.split('/');
+guestJoinRoomBtn.classList.add('disabled');
-const roomPath = filterXSS(pathParts[pathParts.length - 1]);
 
-presenterLoginBtn.onclick = (e) => {
+const pathParts = window.location.pathname.split('/');
+const roomId = filterXSS(pathParts[pathParts.length - 1]);
+
+presenterLoginBtn.onclick = () => {
     window.location.href = '/login';
 };
 
-guestJoinRoomBtn.onclick = (e) => {
+guestJoinRoomBtn.onclick = () => {
-    window.location.href = '/join/' + roomPath;
+    window.location.href = '/join/' + roomId;
 };
+
+function checkRoomStatus(roomId) {
+    if (!roomId) {
+        console.warn('Room ID empty!');
+        return;
+    }
+    axios
+        .post('/isRoomActive', { roomId })
+        .then((response) => {
+            console.log('isRoomActive', response.data);
+            const roomActive = response.data.message;
+            if (roomActive) {
+                guestJoinRoomBtn.classList.remove('disabled');
+                presenterLoginBtn.style.display = 'none';
+                if (autoJoinRoom) guestJoinRoomBtn.click();
+            } else {
+                guestJoinRoomBtn.classList.add('disabled');
+                presenterLoginBtn.style.display = 'inline-flex';
+            }
+        })
+        .catch((error) => {
+            console.error('Error checking room status', error);
+        });
+}
+
+setInterval(() => checkRoomStatus(roomId), 5000); // Start checking room status every 5 seconds

public/views/whoAreYou.html

@@ -51,6 +51,10 @@
 
         <script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
 
+        <!-- axios -->
+
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
         <script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
         <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
     </head>
@@ -74,7 +78,8 @@
                                 <h1 class="hero-title mt-0 mb-16">Who are you?</h1>
                                 <p class="hero-paragraph">
                                     If you're the presenter, please log in now.<br />
-                                    Otherwise, kindly wait for the presenter to join.
+                                    Otherwise, kindly wait for the presenter to join.<br />
+                                    <!-- You'll be redirected to the room when they arrive. -->
                                 </p>
                                 <div class="hero-cta">
                                     <a id="presenterLoginButton" class="button button-primary pulse">LOGIN</a>