[mirotalksfu] - improve transcription

public/css/Room.css

@@ -663,6 +663,19 @@ th {
     cursor: pointer;
 }
 
+/*--------------------------------------------------------------
+# Transcription room popup
+--------------------------------------------------------------*/
+
+.transcriptio-popup {
+    z-index: 9;
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+    text-align: center;
+    border-radius: 10px;
+}
+
 /*--------------------------------------------------------------
 # Chat Room
 --------------------------------------------------------------*/

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
+            show_transcript_on_msg: true, // show transcript on new message
             speech_in_msg: false, // speech incoming message
             video_fps: 0, // default 1280x768 30fps
             screen_fps: 0, // max 30fps

public/js/Room.js

@@ -210,6 +210,7 @@ function initClient() {
         setTippy('transcriptionMaxBtn', 'Maximize', 'bottom');
         setTippy('transcriptionMinBtn', 'Minimize', 'bottom');
         setTippy('transcriptionSpeechStatus', 'Status', 'bottom');
+        setTippy('transcriptShowOnMsg', 'Show transcript on new message comes', 'bottom');
         setTippy('transcriptionGhostBtn', 'Toggle transparent background', 'bottom');
         setTippy('transcriptionSaveBtn', 'Save', 'bottom');
         setTippy('transcriptionCleanBtn', 'Clean', 'bottom');
@@ -1720,6 +1721,14 @@ function handleSelects() {
         lS.setSettings(lsSettings);
         e.target.blur();
     };
+    // transcript
+    transcriptShowOnMsg.onchange = (e) => {
+        transcription.showOnMessage = e.currentTarget.checked;
+        rc.roomMessage('showTranscript', transcription.showOnMessage);
+        lsSettings.show_transcript_on_msg = transcription.showOnMessage;
+        lS.setSettings(lsSettings);
+        e.target.blur();
+    };
     // whiteboard options
     wbDrawingColorEl.onchange = () => {
         wbCanvas.freeDrawingBrush.color = wbDrawingColorEl.value;
@@ -1873,10 +1882,12 @@ function handleRoomEmojiPicker() {
 
 function loadSettingsFromLocalStorage() {
     rc.showChatOnMessage = lsSettings.show_chat_on_msg;
+    transcription.showOnMessage = lsSettings.show_transcript_on_msg;
     rc.speechInMessages = lsSettings.speech_in_msg;
     isPitchBarEnabled = lsSettings.pitch_bar;
     isSoundEnabled = lsSettings.sounds;
     showChatOnMsg.checked = rc.showChatOnMessage;
+    transcriptShowOnMsg.checked = transcription.showOnMessage;
     speechIncomingMsg.checked = rc.speechInMessages;
     switchPitchBar.checked = isPitchBarEnabled;
     switchSounds.checked = isSoundEnabled;

public/js/RoomClient.js

@@ -43,6 +43,7 @@ const html = {
 
 const icons = {
     chat: '<i class="fas fa-comments"></i>',
+    transcript: '<i class="fas fa-closed-captioning"></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>',
@@ -4367,6 +4368,19 @@ class RoomClient {
             case 'speechMessages':
                 this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end');
                 break;
+            case 'showTranscript':
+                active
+                    ? userLog(
+                          'info',
+                          `${icons.transcript} Transcript will be shown, when you receive a message`,
+                          'top-end',
+                      )
+                    : userLog(
+                          'info',
+                          `${icons.transcript} Transcript not will be shown, when you receive a message`,
+                          'top-end',
+                      );
+                break;
             default:
                 break;
         }

public/js/Transcription.js

@@ -80,6 +80,7 @@ class Transcription {
         this.transcripts = [];
         this.isBgTransparent = false;
         this.isPinned = false;
+        this.showOnMessage = true;
     }
 
     isSupported() {
@@ -166,7 +167,13 @@ class Transcription {
         const time_stamp = rc.getTimeNow();
         const avatar_image = rc.genAvatarSvg(peer_name, 32);
 
-        if (this.isHidden()) this.toggle();
+        if (this.isHidden()) {
+            if (this.showOnMessage) {
+                this.toggle();
+            } else {
+                this.handleTranscriptionPopup(transcriptionData);
+            }
+        }
 
         const msgHTML = `
         <div class="msg-transcription left-msg-transcription">
@@ -190,6 +197,21 @@ class Transcription {
         rc.sound('transcript');
     }
 
+    handleTranscriptionPopup(transcriptionData, duration = 5000) {
+        const transcriptionDisplay = document.createElement('div');
+        transcriptionDisplay.className = 'animate__animated animate__fadeInUp';
+        transcriptionDisplay.style.padding = '10px';
+        transcriptionDisplay.style.fontSize = '1rem';
+        transcriptionDisplay.style.color = '#FFF';
+        transcriptionDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+        transcriptionDisplay.style.borderRadius = '10px';
+        transcriptionDisplay.innerText = `${transcriptionData.peer_name}: ${transcriptionData.text_data}`;
+        transcriptionPopup.appendChild(transcriptionDisplay);
+        setTimeout(() => {
+            transcriptionDisplay.remove();
+        }, duration);
+    }
+
     isHidden() {
         return Boolean(transcriptionRoom.style.display === 'none' || transcriptionRoom.style.display === '');
     }

public/views/Room.html

@@ -760,6 +760,12 @@ access to use this app.
                         <button id="transcriptionMaxBtn" class=""><i class="fas fa-expand"></i></button>
                         <button id="transcriptionMinBtn" class="hidden"><i class="fas fa-compress"></i></button>
                         <button id="transcriptionSpeechStatus" class="fas fa-microphone-alt"></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="transcriptShowOnMsg" checked />
+                            </div>
+                        </div>
                     </div>
                     <div class="transcription-header-options">
                         <button id="transcriptionGhostBtn" class="fas fa-circle-half-stroke"></button>
@@ -777,6 +783,8 @@ access to use this app.
             </section>
         </section>
 
+        <div id="transcriptionPopup" class="transcriptio-popup"></div>
+
         <section id="lobby" class="fadein center hidden">
             <header id="lobbyHeader" class="lobby-header">
                 <div id="lobbyHeaderTitle" class="lobby-header-title">Lobby users</div>