[mirotalk] - add stop caption for all participants

.env.template

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

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.6.51 - Configuration File
+ * MiroTalk P2P v.1.6.52 - Configuration File
  * ==============================================
  *
  * Branding and customizations require a license:

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.6.51
+ * @version 1.6.52
  *
  */
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.6.51",
+    "version": "1.6.52",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.6.51",
+            "version": "1.6.52",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.1.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.6.51",
+    "version": "1.6.52",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

public/css/client.css

@@ -1459,6 +1459,16 @@ button {
     border-radius: 50px;
 }
 
+#captionEveryoneStopBtn {
+    display: none;
+    padding: 10px;
+    font-size: 0.9rem;
+    border: var(--border);
+    border-radius: 5px;
+    color: #fff;
+    background-color: transparent;
+}
+
 #activeRoomsBtn,
 #myPeerNameSetBtn,
 #captionEveryoneBtn,
@@ -1500,6 +1510,11 @@ button {
     transition: all 0.3s ease-in-out;
 }
 
+#captionEveryoneStopBtn:hover {
+    color: orange;
+    transform: translateY(-3px);
+    transition: all 0.3s ease-in-out;
+}
 #muteEveryoneBtn:hover,
 #hideEveryoneBtn:hover,
 #ejectEveryoneBtn:hover {

public/js/brand.js

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

public/js/client.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.6.51
+ * @version 1.6.52
  *
  */
 
@@ -411,6 +411,7 @@ const whiteboardCloseBtn = getId('whiteboardCloseBtn');
 
 // Room actions buttons
 const captionEveryoneBtn = getId('captionEveryoneBtn');
+const captionEveryoneStopBtn = getId('captionEveryoneStopBtn');
 const muteEveryoneBtn = getId('muteEveryoneBtn');
 const hideEveryoneBtn = getId('hideEveryoneBtn');
 const ejectEveryoneBtn = getId('ejectEveryoneBtn');
@@ -6523,6 +6524,17 @@ function setupMySettings() {
                 recognitionDialectIndex: recognitionDialect.selectedIndex,
             },
         });
+        elemDisplay(captionEveryoneBtn, false);
+        elemDisplay(captionEveryoneStopBtn, true, 'inline');
+    });
+    captionEveryoneStopBtn.addEventListener('click', (e) => {
+        sendToServer('caption', {
+            room_id: roomId,
+            peer_name: myPeerName,
+            action: 'stop',
+        });
+        elemDisplay(captionEveryoneBtn, true, 'inline');
+        elemDisplay(captionEveryoneStopBtn, false);
     });
     muteEveryoneBtn.addEventListener('click', (e) => {
         disableAllPeers('audio');
@@ -12338,6 +12350,19 @@ function handleCaptionActions(config) {
                 }
             });
             break;
+        case 'stop':
+            if (!recognitionRunning || !buttons.main.showCaptionRoomBtn) return;
+            toastMessage(
+                'warning',
+                'Stop captions',
+                `${peer_name} has stopped the captions for this session`,
+                'top-end',
+                6000
+            );
+            if (recognitionRunning) {
+                speechRecognitionStop.click();
+            }
+            break;
         default:
             break;
     }
@@ -12399,7 +12424,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.51',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.52',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `

public/views/client.html

@@ -635,6 +635,7 @@ access to use this app.
                         <div id="tabRoomParticipants">
                             <br />
                             <button id="captionEveryoneBtn"><i class="fas fa-play"></i>&nbsp;Start captions</button>
+                            <button id="captionEveryoneStopBtn"><i class="fas fa-stop"></i>&nbsp;Stop captions</button>
                             <button id="muteEveryoneBtn"><i class="fas fa-microphone"></i>&nbsp;Mute everyone</button>
                             <button id="hideEveryoneBtn"><i class="fas fa-video"></i>&nbsp;Hide everyone</button>
                             <button id="ejectEveryoneBtn">