[mirotalksfu] - confirm mute, hide, eject participants

public/css/Room.css

@@ -192,12 +192,16 @@ body {
     border-radius: 5px;
 }
 
+#sessionTime {
+    margin-left: 8px;
+    cursor: default;
+}
+
 /*--------------------------------------------------------------
 # Style the tab
 --------------------------------------------------------------*/
 .tab {
     overflow: hidden;
-    background-color: rgba(0, 0, 0, 0.4);
 }
 
 /* Style the buttons inside the tab */

public/js/Room.js

@@ -5,6 +5,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
 const RoomURL = window.location.href;
 
 const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
+const swalBg = 'rgba(0, 0, 0, 0.7)';
 const swalImageUrl = '../images/pricing-illustration.svg';
 
 const url = {
@@ -268,6 +269,11 @@ function whoAreYou() {
         joinRoom(peer_name, room_id);
     });
 
+    if (!DetectRTC.isMobileDevice) {
+        setTippy('initAudioButton', 'Enable / Disable audio', 'left');
+        setTippy('initVideoButton', 'Enable / Disable video', 'right');
+    }
+
     initAudioButton = document.getElementById('initAudioButton');
     initVideoButton = document.getElementById('initVideoButton');
     if (!isAudioAllowed) initAudioButton.className = 'hidden';
@@ -1313,7 +1319,6 @@ async function getRoomParticipants(refresh = false) {
     participantsCount = peers.size;
     roomParticipants.innerHTML = table;
     refreshParticipantsCount(participantsCount);
-    setTableButtonsTippy();
 
     if (!refresh) {
         toggleParticipants();
@@ -1381,15 +1386,6 @@ async function getParticipantsTable(peers) {
     return table;
 }
 
-function setTableButtonsTippy() {
-    if (!DetectRTC.isMobileDevice) {
-        setTippy('muteAllButton', 'Mute all participants', 'top');
-        setTippy('hideAllButton', 'Hide all participants', 'top');
-        setTippy('sendAllButton', 'Send file to all participants', 'top');
-        setTippy('ejectAllButton', 'Eject all participants', 'top');
-    }
-}
-
 function refreshParticipantsCount(count) {
     participantsTitle.innerHTML = `<i class="fas fa-users"></i> Participants ( ${count} )`;
 }

public/js/RoomClient.js

@@ -18,6 +18,7 @@ const image = {
     locked: '../images/locked.png',
     mute: '../images/mute.png',
     hide: '../images/hide.png',
+    users: '../images/participants.png',
     youtube: '../images/youtube.png',
 };
 
@@ -1076,7 +1077,7 @@ class RoomClient {
         this.sound('open');
 
         Swal.fire({
-            background: swalBackground,
+            background: swalBg,
             position: 'center',
             title: 'Leave this room?',
             showDenyButton: true,
@@ -2183,6 +2184,13 @@ class RoomClient {
     peerAction(from_peer_name, id, action, emit = true, broadcast = false) {
         let peer_id = id;
         if (emit) {
+            let data = {
+                from_peer_name: this.peer_name,
+                peer_id: peer_id,
+                action: action,
+                broadcast: broadcast,
+            };
+
             if (!broadcast) {
                 if (participantsCount === 1) return;
 
@@ -2206,36 +2214,73 @@ class RoomClient {
                         let peerVideoButton = this.getId(peer_id + '___pVideo');
                         if (peerVideoButton) peerVideoButton.innerHTML = _PEER.videoOff;
                 }
+                this.socket.emit('peerAction', data);
             } else {
                 if (participantsCount === 1) return;
 
-                let actionButton = this.getId(action + 'AllButton');
-                if (actionButton) actionButton.style.display = 'none';
-
                 switch (action) {
                     case 'eject':
-                        participantsCount = 1;
-                        refreshParticipantsCount(participantsCount);
-                        setTimeout(() => {
-                            getRoomParticipants(true);
-                        }, 6000);
+                        Swal.fire({
+                            background: swalBackground,
+                            position: 'center',
+                            imageUrl: image.users,
+                            title: 'Eject All participants except yourself?',
+                            showDenyButton: true,
+                            confirmButtonText: `Yes`,
+                            denyButtonText: `No`,
+                            showClass: {
+                                popup: 'animate__animated animate__fadeInDown',
+                            },
+                            hideClass: {
+                                popup: 'animate__animated animate__fadeOutUp',
+                            },
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                let actionButton = this.getId(action + 'AllButton');
+                                if (actionButton) actionButton.style.display = 'none';
+                                participantsCount = 1;
+                                refreshParticipantsCount(participantsCount);
+                                this.socket.emit('peerAction', data);
+                                setTimeout(() => {
+                                    getRoomParticipants(true);
+                                }, 6000);
+                            }
+                        });
                         break;
                     case 'mute':
                     case 'hide':
-                        setTimeout(() => {
-                            getRoomParticipants(true);
-                        }, 2000);
+                        Swal.fire({
+                            background: swalBackground,
+                            position: 'center',
+                            imageUrl: action == 'mute' ? image.mute : image.hide,
+                            title:
+                                action == 'mute' ? 'Mute everyone except yourself?' : 'Hide everyone except yourself?',
+                            text:
+                                action == 'mute'
+                                    ? "Once muted, you won't be able to unmute them, but they can unmute themselves at any time."
+                                    : "Once hided, you won't be able to unhide them, but they can unhide themselves at any time.",
+                            showDenyButton: true,
+                            confirmButtonText: `Yes`,
+                            denyButtonText: `No`,
+                            showClass: {
+                                popup: 'animate__animated animate__fadeInDown',
+                            },
+                            hideClass: {
+                                popup: 'animate__animated animate__fadeOutUp',
+                            },
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                let actionButton = this.getId(action + 'AllButton');
+                                if (actionButton) actionButton.style.display = 'none';
+                                this.socket.emit('peerAction', data);
+                                setTimeout(() => {
+                                    getRoomParticipants(true);
+                                }, 2000);
+                            }
+                        });
                         break;
                 }
             }
-
-            let data = {
-                from_peer_name: this.peer_name,
-                peer_id: peer_id,
-                action: action,
-                broadcast: broadcast,
-            };
-            this.socket.emit('peerAction', data);
         } else {
             switch (action) {
                 case 'eject':

public/view/Room.html

@@ -203,8 +203,7 @@ access to use this app.
                         <p>About</p>
                     </button>
                     <br />
-                    <button id="sessionTime"></button>
-                    <br />
+                    <p id="sessionTime"></p>
                 </div>
 
                 <div id="tabRecording" class="tabcontent">