[mirotalk] - feat(client): replace leave-room action with exit dropdown menu

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.53 - Environment Configuration
+# MiroTalk P2P v.1.8.54 - Environment Configuration
 # ====================================================
 
 # App environment

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.53 - Configuration File
+ * MiroTalk P2P v.1.8.54 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.

app/src/server.js

@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.53
+ * @version 1.8.54
  *
  */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.53",
+    "version": "1.8.54",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -64,7 +64,7 @@
         "js-yaml": "^4.1.1",
         "jsdom": "^29.1.1",
         "jsonwebtoken": "^9.0.3",
-        "nodemailer": "^8.0.7",
+        "nodemailer": "^8.0.8",
         "openai": "^6.39.0",
         "qs": "^6.15.2",
         "socket.io": "^4.8.3",

package.json

@@ -466,6 +466,61 @@ body {
     border-radius: 10px;
 }
 
+/* Exit dropdown menu (Leave room / End room for all) */
+#bottomButtons #exitDropdown {
+    position: relative;
+    display: inline-flex;
+}
+
+#bottomButtons #exitMenu {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    min-width: 220px;
+    z-index: 9999;
+    background: var(--body-bg);
+    border: var(--border);
+    border-radius: 10px;
+    box-shadow: var(--box-shadow);
+    padding: 6px 0;
+    text-align: left;
+}
+
+#bottomButtons #exitMenu button {
+    display: flex;
+    width: 100%;
+    height: auto;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: left;
+    padding: 10px 16px;
+    font-size: 0.9rem;
+    border-radius: 0;
+    background: transparent;
+    color: #fff;
+    transition:
+        padding-left 0.2s ease,
+        background 0.2s ease;
+}
+
+#bottomButtons #exitMenu button:hover {
+    background: rgba(255, 255, 255, 0.08);
+    padding-left: 22px;
+    transform: none;
+}
+
+#bottomButtons #exitMenu button i {
+    width: 20px;
+    min-width: 20px;
+    text-align: center;
+    margin-right: 10px;
+    font-size: 1.1em;
+}
+
+#bottomButtons #exitMenu .red {
+    color: #dc3545 !important;
+}
+
 /* Let the dropdown menu anchor to the whole split button (not only the arrow). */
 #bottomButtons #audioDropdown,
 #bottomButtons #videoDropdown,

public/css/client.css

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.53',
+        title: 'WebRTC P2P v1.8.54',
         html: `
             <button 
                 id="support-button" 

public/js/brand.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.53
+ * @version 1.8.54
  *
  */
 
@@ -222,6 +222,11 @@ const settingsExtraToggle = getId('settingsExtraToggle');
 const settingsExtraMenu = getId('settingsExtraMenu');
 const leaveRoomBtn = getId('leaveRoomBtn');
 
+const exitDropdown = getId('exitDropdown');
+const exitMenu = getId('exitMenu');
+const exitLeaveBtn = getId('exitLeaveBtn');
+const exitLeaveAllBtn = getId('exitLeaveAllBtn');
+
 // Room Emoji Picker
 const closeEmojiPickerContainer = getId('closeEmojiPickerContainer');
 const emojiPickerContainer = getId('emojiPickerContainer');
@@ -7520,8 +7525,64 @@ function setAboutBtn() {
  */
 function setLeaveRoomBtn() {
     leaveRoomBtn.addEventListener('click', (e) => {
-        leaveRoom();
+        if (e && e.shiftKey) return leaveRoom();
+        toggleExitMenu();
     });
+    if (exitLeaveBtn) exitLeaveBtn.onclick = handleExitLeave;
+    if (exitLeaveAllBtn) exitLeaveAllBtn.onclick = handleExitLeaveForAll;
+    document.addEventListener('click', handleExitMenuOutsideClick);
+}
+
+/**
+ * Toggle the exit dropdown menu. The "End room for all" entry is
+ * only available to the presenter.
+ */
+function toggleExitMenu() {
+    if (!exitMenu) return leaveRoom();
+    if (exitLeaveAllBtn) {
+        isPresenter ? exitLeaveAllBtn.classList.remove('hidden') : exitLeaveAllBtn.classList.add('hidden');
+    }
+    exitMenu.classList.toggle('hidden');
+}
+
+function handleExitLeave() {
+    if (exitMenu) exitMenu.classList.add('hidden');
+    leaveRoom();
+}
+
+function handleExitLeaveForAll() {
+    if (exitMenu) exitMenu.classList.add('hidden');
+    leaveRoomForAll();
+}
+
+function handleExitMenuOutsideClick(e) {
+    if (!exitDropdown || !exitMenu) return;
+    if (exitMenu.classList.contains('hidden')) return;
+    if (!exitDropdown.contains(e.target)) exitMenu.classList.add('hidden');
+}
+
+/**
+ * Presenter: kick out all other peers, then leave the room.
+ */
+function leaveRoomForAll() {
+    if (!isPresenter) return leaveRoom();
+    try {
+        if (allPeers && typeof allPeers === 'object') {
+            for (const peer_id in allPeers) {
+                if (!allPeers[peer_id]) continue;
+                if (peer_id === myPeerId) continue;
+                sendToServer('kickOut', {
+                    room_id: roomId,
+                    peer_id: peer_id,
+                    peer_uuid: myPeerUUID,
+                    peer_name: myPeerName,
+                });
+            }
+        }
+    } catch (err) {
+        console.warn('[leaveRoomForAll] failed to kick all peers', err);
+    }
+    leaveRoom();
 }
 
 /**
@@ -15894,7 +15955,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.53',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.54',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: renderRoomTemplate('tpl-about-modal', {

public/js/client.js

@@ -317,7 +317,15 @@ <h1>Loading</h1>
                 </div>
             </div>
 
-            <button id="leaveRoomBtn" class="fa-solid fa-phone-slash"></button>
+            <div id="exitDropdown">
+                <button id="leaveRoomBtn" class="fa-solid fa-phone-slash"></button>
+                <div id="exitMenu" class="hidden" aria-labelledby="leaveRoomBtn">
+                    <button id="exitLeaveBtn"><i class="fas fa-sign-out-alt"></i> Leave room</button>
+                    <button id="exitLeaveAllBtn" class="hidden">
+                        <i class="fas fa-power-off red"></i> <span class="red">End room for all</span>
+                    </button>
+                </div>
+            </div>
         </div>
 
         <!-- End bottom buttons -->