[mirotalksfu] - add speech messages

public/js/LocalStorage.js

@@ -18,6 +18,7 @@ class LocalStorage {
         this.SFU_SETTINGS = {
             share_on_join: true, // popup message on join
             show_chat_on_msg: true, // show chat on new message
+            speech_in_msg: false, // speech incoming message
             video_fps: 0, // default 1280x768 30fps
             screen_fps: 0, // max 30fps
             lobby: false, // default false

public/js/Room.js

@@ -103,6 +103,7 @@ let isVideoControlsOn = false;
 let isChatPasteTxt = false;
 let isChatMarkdownOn = false;
 let isChatGPTOn = false;
+let isSpeechSynthesisSupported = 'speechSynthesis' in window;
 let joinRoomWithoutAudioVideo = true;
 let joinRoomWithScreen = false;
 let initAudioButton = null;
@@ -208,6 +209,7 @@ function initClient() {
         setTippy('chatPasteButton', 'Paste', 'top');
         setTippy('chatSendButton', 'Send', 'top');
         setTippy('showChatOnMsg', 'Show chat on new message comes', 'top');
+        setTippy('speechIncomingMsg', 'speech the incoming messages', 'top');
         setTippy('chatSpeechStartButton', 'Start speech recognition', 'top');
         setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top');
         setTippy('chatEmojiButton', 'Emoji', 'top');
@@ -895,6 +897,7 @@ function joinRoom(peer_name, room_id) {
             isVideoAllowed,
             isScreenAllowed,
             joinRoomWithScreen,
+            isSpeechSynthesisSupported,
             roomIsReady,
         );
         handleRoomClientEvents();
@@ -966,6 +969,7 @@ function roomIsReady() {
     BUTTONS.settings.host_only_recording && show(roomRecording);
     BUTTONS.main.aboutButton && show(aboutButton);
     if (!DetectRTC.isMobileDevice) show(pinUnpinGridDiv);
+    if (!isSpeechSynthesisSupported) hide(speechIncomingMsg);
     handleButtons();
     handleSelects();
     handleInputs();
@@ -1613,17 +1617,19 @@ function handleSelects() {
     };
     // chat
     showChatOnMsg.onchange = (e) => {
-        sound('switch');
         rc.showChatOnMessage = e.currentTarget.checked;
-        if (rc.showChatOnMessage) {
-            userLog('info', 'Chat will be shown, when you receive a message', 'top-end');
-        } else {
-            userLog('info', 'Chat not will be shown, when you receive a message', 'top-end');
-        }
+        rc.roomMessage('showChat', rc.showChatOnMessage);
         lsSettings.show_chat_on_msg = rc.showChatOnMessage;
         lS.setSettings(lsSettings);
         e.target.blur();
     };
+    speechIncomingMsg.onchange = (e) => {
+        rc.speechInMessages = e.currentTarget.checked;
+        rc.roomMessage('speechMessages', rc.speechInMessages);
+        lsSettings.speech_in_msg = rc.speechInMessages;
+        lS.setSettings(lsSettings);
+        e.target.blur();
+    };
     // whiteboard options
     wbDrawingColorEl.onchange = () => {
         wbCanvas.freeDrawingBrush.color = wbDrawingColorEl.value;
@@ -1693,9 +1699,11 @@ function handleInputs() {
 
 function loadSettingsFromLocalStorage() {
     rc.showChatOnMessage = lsSettings.show_chat_on_msg;
+    rc.speechInMessages = lsSettings.speech_in_msg;
     isPitchBarEnabled = lsSettings.pitch_bar;
     isSoundEnabled = lsSettings.sounds;
     showChatOnMsg.checked = rc.showChatOnMessage;
+    speechIncomingMsg.checked = rc.speechInMessages;
     switchPitchBar.checked = isPitchBarEnabled;
     switchSounds.checked = isSoundEnabled;
     switchShare.checked = notify;

public/js/RoomClient.js

@@ -42,6 +42,8 @@ const html = {
 };
 
 const icons = {
+    chat: '<i class="fas fa-comments"></i>',
+    speech: '<i class="fas fa-volume-high"></i>',
     share: '<i class="fas fa-share-alt"></i>',
     ptt: '<i class="fa-solid fa-hand-pointer"></i>',
     lobby: '<i class="fas fa-shield-halved"></i>',
@@ -131,6 +133,7 @@ class RoomClient {
         isVideoAllowed,
         isScreenAllowed,
         joinRoomWithScreen,
+        isSpeechSynthesisSupported,
         successCallback,
     ) {
         this.localAudioEl = localAudioEl;
@@ -166,6 +169,8 @@ class RoomClient {
         this.isVideoPictureInPictureSupported = !DetectRTC.isMobileDevice && document.pictureInPictureEnabled;
         this.isChatOpen = false;
         this.isChatEmojiOpen = false;
+        this.isSpeechSynthesisSupported = isSpeechSynthesisSupported;
+        this.speechInMessages = false;
         this.showChatOnMessage = true;
         this.isChatBgTransparent = false;
         this.isVideoPinned = false;
@@ -2968,6 +2973,9 @@ class RoomClient {
         if (!this.showChatOnMessage) {
             this.userLog('info', `💬 New message from: ${data.peer_name}`, 'top-end');
         }
+        if (this.speechInMessages) {
+            this.speechMessage(true, data.peer_name, data.peer_msg);
+        }
         this.sound('message');
     }
 
@@ -3020,7 +3028,17 @@ class RoomClient {
                         id="msg-copy-${chatMessagesId}"
                         class="fas fa-copy" 
                         onclick="rc.copyToClipboard('${chatMessagesId}')"
+                    ></button>`;
+        if (this.isSpeechSynthesisSupported) {
+            msgHTML += `
+                    <button
+                        id="msg-speech-${chatMessagesId}"
+                        class="fas fa-volume-high" 
+                        onclick="rc.speechMessage(false, '${getFromName}', '${getMsg}')"
                     ></button>
+            `;
+        }
+        msgHTML += ` 
                 </div>
             </div>
         </div>
@@ -3030,6 +3048,7 @@ class RoomClient {
         chatMsger.scrollTop += 500;
         this.setTippy('msg-delete-' + chatMessagesId, 'Delete', 'top');
         this.setTippy('msg-copy-' + chatMessagesId, 'Copy', 'top');
+        this.setTippy('msg-speech-' + chatMessagesId, 'Speech', 'top');
         this.setTippy('msg-private-reply-' + chatMessagesId, 'Reply', 'top');
         chatMessagesId++;
     }
@@ -3196,6 +3215,13 @@ class RoomClient {
         });
     }
 
+    speechMessage(newMsg = true, from, msg) {
+        const speech = new SpeechSynthesisUtterance();
+        speech.text = (newMsg ? 'New' : '') + ' message from:' + from + '. The message is:' + msg;
+        speech.rate = 0.9;
+        window.speechSynthesis.speak(speech);
+    }
+
     chatToggleBg() {
         this.isChatBgTransparent = !this.isChatBgTransparent;
         this.isChatBgTransparent
@@ -4067,27 +4093,31 @@ class RoomClient {
 
     roomMessage(action, active = false) {
         const status = active ? 'ON' : 'OFF';
+        this.sound('switch');
         switch (action) {
             case 'pitchBar':
-                this.sound('switch');
                 this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top-end');
                 break;
             case 'sounds':
-                this.sound('switch');
                 this.userLog('info', `${icons.sounds} Sounds notification ${status}`, 'top-end');
                 break;
             case 'ptt':
-                this.sound('switch');
                 this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top-end');
                 break;
             case 'notify':
-                this.sound('switch');
                 this.userLog('info', `${icons.share} Share room on join ${status}`, 'top-end');
                 break;
             case 'hostOnlyRecording':
-                this.sound('switch');
                 this.userLog('info', `${icons.recording} Only host recording ${status}`, 'top-end');
                 break;
+            case 'showChat':
+                active
+                    ? userLog('info', `${icons.chat} Chat will be shown, when you receive a message`, 'top-end')
+                    : userLog('info', `${icons.chat} Chat not will be shown, when you receive a message`, 'top-end');
+                break;
+            case 'speechMessages':
+                this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end');
+                break;
             default:
                 break;
         }

public/views/Room.html

@@ -679,6 +679,16 @@ access to use this app.
                         <button id="chatCloseButton" class="fas fa-times"></button>
                         <button id="chatMaxButton" class="hidden"><i class="fas fa-expand"></i></button>
                         <button id="chatMinButton" class="hidden"><i class="fas fa-compress"></i></button>
+                        <div style="margin-left: 10px" class="title">
+                            <i class="fa-solid fa-eye"></i>
+                            <div style="margin-left: 5px" class="form-check form-switch form-switch-md">
+                                <input class="form-check-input" type="checkbox" id="showChatOnMsg" checked />
+                            </div>
+                            <i class="fas fa-volume-high"></i>
+                            <div style="margin-left: 5px" class="form-check form-switch form-switch-md">
+                                <input class="form-check-input" type="checkbox" id="speechIncomingMsg" />
+                            </div>
+                        </div>
                     </div>
                     <div class="chat-header-options">
                         <button id="chatGhostButton" class="fas fa-circle-half-stroke"></button>
@@ -723,9 +733,6 @@ access to use this app.
                     <button id="chatPasteButton" class="hidden">
                         <i class="fas fa-paste"></i>
                     </button>
-                    <div style="margin-left: 10px" class="form-check form-switch form-switch-md">
-                        <input class="form-check-input" type="checkbox" id="showChatOnMsg" checked />
-                    </div>
                     <button id="chatSendButton" class="hidden">
                         <i class="fas fa-paper-plane"></i>
                     </button>