[mirotalksfu] - add participant lists + eject

2021-09-03 14:09:38 +02:00
--- a/public/Room.html
+++ b/public/Room.html
@@ -77,7 +77,7 @@
                    <i class="fas fa-arrow-left"></i>
                </button>
                <button id="shareButton" class="hidden">
-                    <i class="fas fa-users"></i>
+                    <i class="fas fa-share-alt"></i>
                </button>
                <div class="dropdown">
                    <button id="devicesButton" class="hidden">
@@ -147,6 +147,9 @@
                <button id="stopScreenButton" class="hidden">
                    <i class="fas fa-stop-circle"></i>
                </button>
+                <button id="participantsButton" class="hidden">
+                    <i class="fas fa-users"></i>
+                </button>
                <button id="lockRoomButton" class="hidden">
                    <i class="fas fa-lock-open"></i>
                </button>
--- a/public/css/Room.css
+++ b/public/css/Room.css
@@ -530,6 +530,29 @@ button:hover {
    color: rgb(0, 180, 50);
 }

+/*--------------------------------------------------------------
+# Room Participants
+--------------------------------------------------------------*/
+
+#roomParticipants {
+    max-height: 480px;
+    overflow: auto;
+}
+
+#roomParticipants ul {
+    text-align: justify;
+    list-style: inside;
+}
+
+#roomParticipants button {
+    color: red;
+    border-radius: 5px;
+}
+#roomParticipants button:hover {
+    color: white;
+    border-radius: 5px;
+}
+
 /*--------------------------------------------------------------
 # Pulse class effect
 --------------------------------------------------------------*/
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -67,6 +67,7 @@ function initClient() {
        setTippy('stopVideoButton', 'Stop Video', 'bottom');
        setTippy('startScreenButton', 'Start Screen', 'bottom');
        setTippy('stopScreenButton', 'Stop Screen', 'bottom');
+        setTippy('participantsButton', 'Show participants', 'bottom');
        setTippy('lockRoomButton', 'Room Lock', 'bottom');
        setTippy('unlockRoomButton', 'Room Unlock', 'bottom');
        setTippy('aboutButton', 'About', 'bottom');
@@ -114,7 +115,6 @@ async function initEnumerateDevices() {
    if (!isAudioAllowed && !isVideoAllowed) {
        window.location.href = `/permission?room_id=${room_id}&message=Not allowed both Audio and Video`;
    } else {
-        getPeerInfo();
        getPeerGeoLocation();
        whoAreYou();
    }
@@ -182,13 +182,17 @@ function appenChild(device, el) {

 function getPeerInfo() {
    peer_info = {
-        detectRTCversion: DetectRTC.version,
-        isWebRTCSupported: DetectRTC.isWebRTCSupported,
-        isMobileDevice: DetectRTC.isMobileDevice,
-        osName: DetectRTC.osName,
-        osVersion: DetectRTC.osVersion,
-        browserName: DetectRTC.browser.name,
-        browserVersion: DetectRTC.browser.version,
+        detect_rtc_version: DetectRTC.version,
+        is_webrtc_Supported: DetectRTC.isWebRTCSupported,
+        is_mobile_device: DetectRTC.isMobileDevice,
+        os_name: DetectRTC.osName,
+        os_version: DetectRTC.osVersion,
+        browser_name: DetectRTC.browser.name,
+        browser_version: DetectRTC.browser.version,
+        peer_id: socket.id,
+        peer_name: peer_name,
+        peer_audio: isAudioOn,
+        peer_video: isVideoOn,
    };
 }

@@ -229,6 +233,7 @@ function whoAreYou() {
            peer_name = name;
        },
    }).then(() => {
+        getPeerInfo();
        shareRoom();
        joinRoom(peer_name, room_id);
    });
@@ -244,12 +249,12 @@ function whoAreYou() {
 }

 function handleAudio(e) {
-    isAudioOn ? (isAudioOn = false) : (isAudioOn = true);
+    isAudioOn = isAudioOn ? false : true;
    e.target.className = 'fas fa-microphone' + (isAudioOn ? '' : '-slash');
 }

 function handleVideo(e) {
-    isVideoOn ? (isVideoOn = false) : (isVideoOn = true);
+    isVideoOn = isVideoOn ? false : true;
    e.target.className = 'fas fa-video' + (isVideoOn ? '' : '-slash');
 }

@@ -273,9 +278,6 @@ async function shareRoom(useNavigator = false) {

        Swal.fire({
            background: swalBackground,
-            imageUrl: swalImageUrl,
-            imageWidth: 300,
-            imageHeight: 150,
            position: 'center',
            title: '<strong>Hello ' + peer_name + '</strong>',
            html:
@@ -326,7 +328,7 @@ function makeRoomQR() {
        value: RoomURL,
    });
    qr.set({
-        size: 128,
+        size: 256,
    });
 }

@@ -402,6 +404,7 @@ function roomIsReady() {
    if (isAudioAllowed) show(startAudioButton);
    if (isVideoAllowed) show(startVideoButton);
    show(videoMedia);
+    show(participantsButton);
    show(lockRoomButton);
    show(aboutButton);
    handleButtons();
@@ -556,6 +559,9 @@ function handleButtons() {
    stopScreenButton.onclick = () => {
        rc.closeProducer(RoomClient.mediaType.screen);
    };
+    participantsButton.onclick = () => {
+        getRoomParticipants();
+    };
    lockRoomButton.onclick = () => {
        rc.roomAction('lock');
    };
@@ -713,14 +719,49 @@ function userLog(icon, message, position) {

 async function sound(name) {
    let sound = '../sounds/' + name + '.wav';
-    let audioToPlay = new Audio(sound);
+    let audio = new Audio(sound);
    try {
-        await audioToPlay.play();
+        await audio.play();
    } catch (err) {
        return false;
    }
 }

+// ####################################################
+// HANDLE PARTICIPANTS
+// ####################################################
+
+async function getRoomParticipants() {
+    let room_info = await rc.getRoomInfo();
+    let peers = new Map(JSON.parse(room_info.peers));
+    let lists = `<div id="roomParticipants"><ul>`;
+
+    for (let peer of Array.from(peers.keys())) {
+        let peer_info = peers.get(peer).peer_info;
+        let peer_name = peer_info.peer_name;
+        let peer_id = peer_info.peer_id;
+        rc.peer_id === peer_id
+            ? (lists += `<li>👤 ${peer_name} (me)</li>`)
+            : (lists += `<li id='${peer_id}'>👤 ${peer_name} <button id='${peer_id}' onclick="rc.peerAction('me',this.id,'eject')">eject</button></li>`);
+    }
+    lists += `</ul></div>`;
+
+    sound('open');
+
+    Swal.fire({
+        background: swalBackground,
+        position: 'center',
+        title: `Participants ${peers.size}`,
+        html: lists,
+        showClass: {
+            popup: 'animate__animated animate__fadeInDown',
+        },
+        hideClass: {
+            popup: 'animate__animated animate__fadeOutUp',
+        },
+    });
+}
+
 // ####################################################
 // ABOUT
 // ####################################################
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -70,10 +70,10 @@ class RoomClient {

        this.socket = socket;
        this.room_id = room_id;
+        this.peer_id = socket.id;
        this.peer_name = peer_name;
        this.peer_geo = peer_geo;
        this.peer_info = peer_info;
-        this.peer_info.peerName = peer_name;

        this.isAudioAllowed = isAudioAllowed;
        this.isVideoAllowed = isVideoAllowed;
@@ -86,8 +86,6 @@ class RoomClient {
        this.isMobileDevice = DetectRTC.isMobileDevice;

        this._isConnected = false;
-        this.peerGeo = null;
-        this.peerInfo = null;
        this.isVideoOnFullScreen = false;
        this.isDocumentOnFullScreen = false;
        this.isChatOpen = false;
@@ -141,9 +139,6 @@ class RoomClient {
            async function () {
                let data = {
                    room_id: this.room_id,
-                    peer_name: this.peer_name,
-                    peer_audio: this.isAudioOn,
-                    peer_video: this.isVideoOn,
                    peer_info: this.peer_info,
                    peer_geo: this.peer_geo,
                };
@@ -379,6 +374,14 @@ class RoomClient {
            }.bind(this),
        );

+        this.socket.on(
+            'peerAction',
+            function (data) {
+                console.log('Peer action:', data);
+                this.peerAction(data.from_peer_name, data.peer_id, data.action, false);
+            }.bind(this),
+        );
+
        this.socket.on(
            'disconnect',
            function () {
@@ -618,17 +621,7 @@ class RoomClient {
        this.attachMediaStream(elem, stream, type, 'Producer');
        this.handleFS(elem.id);
        this.setTippy(elem.id, 'Full Screen', 'top-end');
-        if (this.debug) {
-            this.setTippy(
-                p.id,
-                JSON.stringify(
-                    this.peer_info,
-                    ['peerName', 'isMobileDevice', 'osName', 'osVersion', 'browserName', 'browserVersion'],
-                    2,
-                ),
-                'top-start',
-            );
-        }
+        this.popupPeerInfo(p.id, this.peer_info);
        this.sound('joined');
        return elem;
    }
@@ -804,17 +797,7 @@ class RoomClient {
                this.attachMediaStream(elem, stream, type, 'Consumer');
                this.handleFS(elem.id);
                this.setTippy(elem.id, 'Full Screen', 'top-end');
-                if (this.debug) {
-                    this.setTippy(
-                        p.id,
-                        JSON.stringify(
-                            peer_info,
-                            ['peerName', 'isMobileDevice', 'osName', 'osVersion', 'browserName', 'browserVersion'],
-                            2,
-                        ),
-                        'top-start',
-                    );
-                }
+                this.popupPeerInfo(p.id, peer_info);
                this.sound('joined');
                break;
            case mediaType.audio:
@@ -966,10 +949,9 @@ class RoomClient {
        return document.getElementById(id);
    }

-    async getMyRoomInfo() {
-        let roomInfo = await this.socket.request('getMyRoomInfo');
-        console.log('Room info', roomInfo);
-        return roomInfo;
+    async getRoomInfo() {
+        let room_info = await this.socket.request('getRoomInfo');
+        return room_info;
    }

    // ####################################################
@@ -982,9 +964,9 @@ class RoomClient {

    async sound(name) {
        let sound = '../sounds/' + name + '.wav';
-        let audioToPlay = new Audio(sound);
+        let audio = new Audio(sound);
        try {
-            await audioToPlay.play();
+            await audio.play();
        } catch (err) {
            return false;
        }
@@ -1441,4 +1423,73 @@ class RoomClient {
            if (result.isConfirmed) this.exit();
        });
    }
+
+    // ####################################################
+    // PEER ACTION
+    // ####################################################
+
+    peerAction(from_peer_name, peer_id, action, emit = true) {
+        switch (action) {
+            case 'eject':
+                let peer = this.getId(peer_id);
+                if (peer) peer.parentNode.removeChild(peer);
+                if (peer_id === this.peer_id) {
+                    this.sound(action);
+                    let timerInterval;
+                    Swal.fire({
+                        allowOutsideClick: false,
+                        background: swalBackground,
+                        title: from_peer_name,
+                        html: 'Will eject you from the room after <b style="color: red;"></b> milliseconds.',
+                        timer: 5000,
+                        timerProgressBar: true,
+                        didOpen: () => {
+                            Swal.showLoading();
+                            const b = Swal.getHtmlContainer().querySelector('b');
+                            timerInterval = setInterval(() => {
+                                b.textContent = Swal.getTimerLeft();
+                            }, 100);
+                        },
+                        willClose: () => {
+                            clearInterval(timerInterval);
+                        },
+                    }).then(() => {
+                        this.exit();
+                    });
+                }
+                break;
+            // ...
+        }
+        if (emit) {
+            let data = {
+                from_peer_name: this.peer_name,
+                peer_id: peer_id,
+                action: action,
+            };
+            this.socket.emit('peerAction', data);
+        }
+    }
+
+    popupPeerInfo(id, peer_info) {
+        if (this.debug) {
+            this.setTippy(
+                id,
+                JSON.stringify(
+                    peer_info,
+                    [
+                        'peer_name',
+                        'peer_audio',
+                        'peer_video',
+                        'is_mobile_device',
+                        'os_name',
+                        'os_version',
+                        'browser_name',
+                        'browser_version',
+                    ],
+                    2,
+                ),
+                'top-start',
+            );
+        }
+    }
 }
--- a/public/sounds/eject.wav
+++ b/public/sounds/eject.wav