[mirotalksfu] - add generate random room button

app/src/Server.js

@@ -64,7 +64,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.9.40
+ * @version 1.9.41
  *
  */
 

package.json

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

public/js/Brand.js

@@ -76,7 +76,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.9.40</strong>',
+        title: '<strong>WebRTC SFU v1.9.41</strong>',
         html: `
             <button 
                 id="support-button" 

public/js/Login.js

@@ -10,6 +10,26 @@ const loginBtn = document.getElementById('loginButton');
 const joinRoomForm = document.getElementById('joinRoomForm');
 const selectRoom = document.getElementById('selectRoom');
 const joinSelectRoomBtn = document.getElementById('joinSelectRoomButton');
+const generateRoomBtn = document.getElementById('generateRoomButton'); // ADD
+
+// Default handler (will be overridden for admin below)
+joinSelectRoomBtn.onclick = (e) => {
+    join();
+};
+
+// Generate random room -> fills the custom input (admin mode). Hidden for limited users.
+if (generateRoomBtn) {
+    generateRoomBtn.onclick = (e) => {
+        e.preventDefault();
+        const uuid = getUUID4();
+        const custom = document.getElementById('customRoomInput');
+        if (custom && custom.offsetParent !== null) {
+            custom.value = uuid;
+        } else if (selectRoom && selectRoom.style.display !== 'none') {
+            popup('warning', 'Random room is available for Admin users only');
+        }
+    };
+}
 
 usernameInput.onkeyup = (e) => {
     if (e.keyCode === 13) {
@@ -28,10 +48,6 @@ loginBtn.onclick = (e) => {
     login();
 };
 
-joinSelectRoomBtn.onclick = (e) => {
-    join();
-};
-
 function login() {
     const username = filterXSS(document.getElementById('username').value);
     const password = filterXSS(document.getElementById('password').value);
@@ -59,12 +75,14 @@ function login() {
                 const token = response.data.message;
                 window.sessionStorage.peer_token = token;
 
-                // User (has access to some room)
+                // User (limited rooms)
                 const allowedRooms = response.data.allowedRooms;
                 if (allowedRooms && !allowedRooms.includes('*')) {
                     console.log('User detected with limited join room access!', allowedRooms);
                     loginForm.style.display = 'none';
                     joinRoomForm.style.display = 'block';
+                    // Hide random button for limited users
+                    if (generateRoomBtn) generateRoomBtn.style.display = 'none';
                     allowedRooms.forEach((room) => {
                         const option = document.createElement('option');
                         option.value = room;
@@ -74,7 +92,7 @@ function login() {
                     return;
                 }
 
-                // Admin (has access to all rooms)
+                // Admin (all rooms)
                 if (allowedRooms && allowedRooms.includes('*')) {
                     console.log('User detected with admin access!', allowedRooms);
                     loginForm.style.display = 'none';
@@ -87,6 +105,9 @@ function login() {
                     input.className = 'form-control mb-2';
                     selectRoom.parentNode.insertBefore(input, selectRoom);
                     selectRoom.style.display = 'none';
+                    // Show random button for admin
+                    if (generateRoomBtn) generateRoomBtn.style.display = 'block';
+                    // Join uses the custom input + token
                     joinSelectRoomBtn.onclick = () => {
                         const roomName = filterXSS(document.getElementById('customRoomInput').value);
                         if (roomName) {
@@ -137,8 +158,13 @@ function login() {
 }
 
 function join() {
-    //window.location.href = '/join/' + selectRoom.value;
     const username = filterXSS(document.getElementById('username').value);
     const roomId = filterXSS(document.getElementById('selectRoom').value);
     window.location.href = '/join/?room=' + roomId + '&name=' + username + '&token=' + window.sessionStorage.peer_token;
 }
+
+function getUUID4() {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+        (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+    );
+}

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.9.40
+ * @version 1.9.41
  *
  */
 
@@ -5543,7 +5543,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.40',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.41',
         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.9.40
+ * @version 1.9.41
  *
  */
 

public/views/login.html

@@ -134,11 +134,24 @@
                                     <div class="mb-12">
                                         <select id="selectRoom" class="form-select text-light bg-dark"></select>
                                     </div>
-                                    <div class="mt-24 mb-32">
+
-                                        <button id="joinSelectRoomButton" class="button button-primary button-block">
+                                    <div class="mt-24 mb-32 d-flex gap-2">
+                                        <button
+                                            id="generateRoomButton"
+                                            class="button button-primary"
+                                            title="Generate random ROOM"
+                                        >
+                                            <i class="fas fa-sync-alt"></i>
+                                        </button>
+                                        <button id="joinSelectRoomButton" class="button button-primary flex-fill">
                                             JOIN ROOM
                                         </button>
                                     </div>
+                                    <!-- Font Awesome CDN for icons -->
+                                    <link
+                                        rel="stylesheet"
+                                        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+                                    />
                                 </div>
                             </div>
                             <div class="hero-figure anime-element">