[mirotalksfu] - add button save participants info

public/js/Room.js

@@ -187,6 +187,7 @@ function initClient() {
         setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
         setTippy('chatCloseButton', 'Close', 'right');
         setTippy('participantsCloseBtn', 'Close', 'left');
+        setTippy('participantsSaveBtn', 'Save participants info', 'right');
     }
     setupWhiteboard();
     initEnumerateDevices();
@@ -432,9 +433,14 @@ function getRoomPassword() {
 
 function getPeerInfo() {
     peer_info = {
-        user_agent: userAgent,
+        join_data_time: getDataTimeString(),
-        detect_rtc_version: DetectRTC.version,
+        peer_id: socket.id,
-        is_webrtc_supported: DetectRTC.isWebRTCSupported,
+        peer_name: peer_name,
+        peer_audio: isAudioAllowed,
+        peer_video: isVideoAllowed,
+        peer_screen: isScreenAllowed,
+        peer_video_privacy: isVideoPrivacyActive,
+        peer_hand: false,
         is_desktop_device: !DetectRTC.isMobileDevice && !isTabletDevice && !isIPadDevice,
         is_mobile_device: DetectRTC.isMobileDevice,
         is_tablet_device: isTabletDevice,
@@ -443,13 +449,7 @@ function getPeerInfo() {
         os_version: DetectRTC.osVersion,
         browser_name: DetectRTC.browser.name,
         browser_version: DetectRTC.browser.version,
-        peer_id: socket.id,
+        user_agent: userAgent,
-        peer_name: peer_name,
-        peer_audio: isAudioAllowed,
-        peer_video: isVideoAllowed,
-        peer_screen: isScreenAllowed,
-        peer_video_privacy: isVideoPrivacyActive,
-        peer_hand: false,
     };
 }
 
@@ -1088,6 +1088,9 @@ function handleButtons() {
     participantsCloseBtn.onclick = () => {
         toggleParticipants();
     };
+    participantsSaveBtn.onclick = () => {
+        saveRoomPeers();
+    };
     lockRoomButton.onclick = () => {
         rc.roomAction('lock');
     };
@@ -1577,6 +1580,21 @@ function saveDataToFile(dataURL, fileName) {
     }, 100);
 }
 
+function saveObjToJsonFile(dataObj, name) {
+    console.log('Save data', { dataObj: dataObj, name: name });
+    const dataTime = getDataTimeString();
+    let a = document.createElement('a');
+    a.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(dataObj, null, 1));
+    a.download = `${dataTime}-${name}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+    }, 100);
+    sound('download');
+}
+
 function getDataTimeString() {
     const d = new Date();
     const date = d.toISOString().split('T')[0];
@@ -2072,9 +2090,22 @@ function toggleParticipants() {
     isParticipantsListOpen = !isParticipantsListOpen;
 }
 
-async function getRoomParticipants(refresh = false) {
+async function getRoomPeers() {
     let room_info = await rc.getRoomInfo();
-    let peers = new Map(JSON.parse(room_info.peers));
+    return new Map(JSON.parse(room_info.peers));
+}
+
+async function saveRoomPeers() {
+    const peers = await getRoomPeers();
+    let peersToSave = [];
+    for (let peer of Array.from(peers.keys())) {
+        peersToSave.push(peers.get(peer).peer_info);
+    }
+    saveObjToJsonFile(peersToSave, 'PARTICIPANTS');
+}
+
+async function getRoomParticipants(refresh = false) {
+    let peers = await getRoomPeers();
     let table = await getParticipantsTable(peers);
 
     participantsCount = peers.size;

public/js/RoomClient.js

@@ -200,7 +200,7 @@ class RoomClient {
 
         this.myVideoEl = null;
         this.myAudioEl = null;
-        this.showPeerInfo = false;
+        this.showPeerInfo = false; // on peerName mouse hover
 
         this.videoProducerId = null;
         this.screenProducerId = null;
@@ -2928,22 +2928,7 @@ class RoomClient {
         if (this.chatMessages.length === 0) {
             return userLog('info', 'No chat messages to save', 'top-end');
         }
-
+        saveObjToJsonFile(this.chatMessages, 'CHAT');
-        const newDate = new Date();
-        const date = newDate.toISOString().split('T')[0];
-        const time = newDate.toTimeString().split(' ')[0];
-
-        let a = document.createElement('a');
-        a.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(this.chatMessages, null, 1));
-        a.download = `${date}-${time}` + '-CHAT.txt';
-        document.body.appendChild(a);
-        a.click();
-        setTimeout(() => {
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-        }, 100);
-
-        this.sound('download');
     }
 
     // ####################################################
@@ -3039,13 +3024,11 @@ class RoomClient {
             console.log('MediaRecorder stopped: ', evt);
             console.log('MediaRecorder Blobs: ', recordedBlobs);
 
-            const newDate = new Date();
+            const dateTime = getDataTimeString();
-            const date = newDate.toISOString().split('T')[0];
-            const time = newDate.toTimeString().split(' ')[0];
 
             const type = recordedBlobs[0].type.includes('mp4') ? 'mp4' : 'webm';
             const blob = new Blob(recordedBlobs, { type: 'video/' + type });
-            const recFileName = `${date}-${time}` + '-REC.' + type;
+            const recFileName = `${dateTime}-REC.${type}`;
 
             console.log('MediaRecorder Download Blobs');
             const url = window.URL.createObjectURL(blob);
@@ -4425,14 +4408,17 @@ class RoomClient {
                     JSON.stringify(
                         peer_info,
                         [
+                            'join_data_time',
                             'peer_id',
                             'peer_name',
                             'peer_audio',
                             'peer_video',
+                            'peer_video_privacy',
                             'peer_screen',
                             'peer_hand',
                             'is_desktop_device',
                             'is_mobile_device',
+                            'is_tablet_device',
                             'is_ipad_pro_device',
                             'os_name',
                             'os_version',

public/js/Rules.js

@@ -61,6 +61,9 @@ const BUTTONS = {
         chatShareFileButton: true,
         chatSpeechStartButton: true,
     },
+    participantsList: {
+        saveInfoButton: true,
+    },
     //...
 };
 
@@ -68,6 +71,7 @@ function handleRules(isPresenter) {
     console.log('06.1 ----> IsPresenter: ' + isPresenter);
     if (!isRulesActive) return;
     if (!isPresenter) {
+        BUTTONS.participantsList.saveInfoButton = false;
         BUTTONS.settings.lockRoomButton = false;
         BUTTONS.settings.unlockRoomButton = false;
         BUTTONS.settings.lobbyButton = false;
@@ -78,6 +82,7 @@ function handleRules(isPresenter) {
         BUTTONS.consumerVideo.muteVideoButton = false;
         //...
     } else {
+        BUTTONS.participantsList.saveInfoButton = true;
         BUTTONS.settings.lockRoomButton = !isRoomLocked;
         BUTTONS.settings.unlockRoomButton = isRoomLocked;
         BUTTONS.settings.lobbyButton = true;
@@ -88,9 +93,10 @@ function handleRules(isPresenter) {
         BUTTONS.consumerVideo.muteVideoButton = true;
         //...
     }
-    // main. settings.
+    // main. settings...
     BUTTONS.settings.lockRoomButton ? show(lockRoomButton) : hide(lockRoomButton);
     BUTTONS.settings.unlockRoomButton ? show(unlockRoomButton) : hide(unlockRoomButton);
     BUTTONS.settings.lobbyButton ? show(lobbyButton) : hide(lobbyButton);
+    BUTTONS.participantsList.saveInfoButton ? show(participantsSaveBtn) : hide(participantsSaveBtn);
     //...
 }

public/views/Room.html

@@ -397,6 +397,7 @@ access to use this app.
             <header id="participantsHeader" class="participants-header">
                 <div class="participants-header-options">
                     <button id="participantsCloseBtn" class="fas fa-times"></button>
+                    <button id="participantsSaveBtn" class="hidden"><i class="fas fa-save"></i></button>
                 </div>
                 <div id="participantsTitle" class="participants-header-title"></div>
             </header>