[mirotalksfu] - add SHOW_ACTIVE_ROOMS

public/js/ActiveRooms.js

@@ -0,0 +1,89 @@
+'use strict';
+
+console.log(window.location);
+
+const isTest = false; // Set to true for testing with mock data
+
+const roomsDiv = document.getElementById('rooms');
+const searchInput = document.getElementById('searchInput');
+const searchBtn = document.getElementById('search-btn');
+const refreshBtn = document.getElementById('refresh-btn');
+
+let allRooms = [];
+
+searchBtn.addEventListener('click', handleSearch);
+refreshBtn.addEventListener('click', fetchRooms);
+
+function setRoomsContent(html) {
+    roomsDiv.innerHTML = html;
+}
+
+function getRoomsData(res) {
+    return !isTest ? res.data.activeRooms || [] : mockRooms();
+}
+
+function mockRooms(roomCount = 1000) {
+    return Array.from({ length: roomCount }, () => {
+        const id = getUUID();
+        return {
+            id,
+            peers: Math.floor(Math.random() * 10) + 1,
+            join: `${window.location.origin}/${id}`,
+        };
+    });
+}
+
+function getUUID() {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+        (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+    );
+}
+
+async function fetchRooms() {
+    setRoomsContent('<div class="empty">Loading...</div>');
+    try {
+        const res = await axios.get('/api/v1/activeRooms');
+        if (res.status !== 200) throw new Error('Failed to fetch active rooms');
+        allRooms = getRoomsData(res);
+        renderRooms(allRooms);
+    } catch (err) {
+        const errorMsg = err.response?.data?.error || err.message;
+        setRoomsContent(`<div class="empty">${errorMsg}</div>`);
+    }
+}
+
+function renderRooms(rooms) {
+    if (!rooms.length) {
+        setRoomsContent('<div class="empty">No active rooms found.</div>');
+        return;
+    }
+    setRoomsContent(
+        rooms
+            .map(
+                (room) => `
+            <div class="room-card">
+                <div class="room-title">
+                    <i class="fa-solid fa-door-open"></i>
+                    ${room.id}
+                </div>
+                <div class="peer-count">
+                    <i class="fa-solid fa-users"></i>
+                    ${room.peers}
+                </div>
+                <div class="peer-label">${room.peers === 1 ? 'peer' : 'peers'}</div>
+                <a href="${room.join}" class="join-btn" target="_blank">
+                    <i class="fa-solid fa-sign-in-alt"></i> Join
+                </a>
+            </div>
+        `
+            )
+            .join('')
+    );
+}
+
+function handleSearch() {
+    const value = searchInput.value.trim().toLowerCase();
+    renderRooms(!value ? allRooms : allRooms.filter((room) => room.id.toLowerCase().includes(value)));
+}
+
+fetchRooms();

public/js/Brand.js

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

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.18
+ * @version 1.9.20
  *
  */
 
@@ -5529,7 +5529,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.18',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.20',
         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.18
+ * @version 1.9.20
  *
  */