[mirotalksfu] - improve transcription UI, add persistent mode

2023-12-22 14:52:09 +01:00
--- a/app/src/Server.js
+++ b/app/src/Server.js
@@ -40,7 +40,7 @@ dependencies: {
 * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
 * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
 * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.45
+ * @version 1.3.46
 *
 */

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "mirotalksfu",
-    "version": "1.3.45",
+    "version": "1.3.46",
    "description": "WebRTC SFU browser-based video calls",
    "main": "Server.js",
    "scripts": {
@@ -34,8 +34,8 @@
    "author": "Miroslav Pejic",
    "license": "AGPL-3.0",
    "dependencies": {
-        "@sentry/integrations": "7.89.0",
-        "@sentry/node": "7.89.0",
+        "@sentry/integrations": "7.91.0",
+        "@sentry/node": "7.91.0",
        "axios": "^1.6.2",
        "body-parser": "1.20.2",
        "colors": "1.4.0",
@@ -47,7 +47,7 @@
        "mediasoup": "3.13.12",
        "mediasoup-client": "3.7.1",
        "ngrok": "^4.3.3",
-        "openai": "^4.24.0",
+        "openai": "^4.24.1",
        "qs": "6.11.2",
        "socket.io": "4.7.2",
        "swagger-ui-express": "5.0.0",
--- a/public/js/LocalStorage.js
+++ b/public/js/LocalStorage.js
@@ -18,7 +18,8 @@ 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
+            transcript_persistent_mode: false, // Prevent stop transcript in case of no-speech
+            transcript_show_on_msg: true, // show transcript on new message
            speech_in_msg: false, // speech incoming message
            moderator_audio_start_muted: false, // Everyone starts muted in the room
            moderator_video_start_hidden: false, // Everyone starts hidden in the room
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
 * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
 * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
 * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.45
+ * @version 1.3.46
 *
 */

@@ -240,9 +240,7 @@ function initClient() {
        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');
+        setTippy('transcriptPersistentMode', 'Prevent stopping in the absence of speech', 'bottom');
        setTippy('transcriptionSpeechStart', 'Start transcription', 'top');
        setTippy('transcriptionSpeechStop', 'Stop transcription', 'top');
    }
@@ -1873,10 +1871,17 @@ function handleSelects() {
        e.target.blur();
    };
    // transcript
+    transcriptPersistentMode.onchange = (e) => {
+        transcription.isPersistentMode = e.currentTarget.checked;
+        rc.roomMessage('transcriptIsPersistentMode', transcription.isPersistentMode);
+        lsSettings.transcript_persistent_mode = transcription.isPersistentMode;
+        lS.setSettings(lsSettings);
+        e.target.blur();
+    };
    transcriptShowOnMsg.onchange = (e) => {
        transcription.showOnMessage = e.currentTarget.checked;
-        rc.roomMessage('showTranscript', transcription.showOnMessage);
-        lsSettings.show_transcript_on_msg = transcription.showOnMessage;
+        rc.roomMessage('transcriptShowOnMsg', transcription.showOnMessage);
+        lsSettings.transcript_show_on_msg = transcription.showOnMessage;
        lS.setSettings(lsSettings);
        e.target.blur();
    };
@@ -2096,11 +2101,13 @@ function handleRoomEmojiPicker() {

 function loadSettingsFromLocalStorage() {
    rc.showChatOnMessage = lsSettings.show_chat_on_msg;
-    transcription.showOnMessage = lsSettings.show_transcript_on_msg;
+    transcription.isPersistentMode = lsSettings.transcript_persistent_mode;
+    transcription.showOnMessage = lsSettings.transcript_show_on_msg;
    rc.speechInMessages = lsSettings.speech_in_msg;
    isPitchBarEnabled = lsSettings.pitch_bar;
    isSoundEnabled = lsSettings.sounds;
    showChatOnMsg.checked = rc.showChatOnMessage;
+    transcriptPersistentMode.checked = transcription.isPersistentMode;
    transcriptShowOnMsg.checked = transcription.showOnMessage;
    speechIncomingMsg.checked = rc.speechInMessages;
    switchPitchBar.checked = isPitchBarEnabled;
@@ -2526,11 +2533,14 @@ function isHtml(str) {

 function toggleWhiteboard() {
    if (!wbIsOpen) rc.sound('open');
-    let whiteboard = rc.getId('whiteboard');
+    whiteboardCenter();
    whiteboard.classList.toggle('show');
+    wbIsOpen = !wbIsOpen;
+}
+
+function whiteboardCenter() {
    whiteboard.style.top = '50%';
    whiteboard.style.left = '50%';
-    wbIsOpen = wbIsOpen ? false : true;
 }

 function setupWhiteboard() {
--- a/public/js/RoomClient.js
+++ b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
 * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
 * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
 * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.45
+ * @version 1.3.46
 *
 */

@@ -4848,7 +4848,10 @@ class RoomClient {
            case 'speechMessages':
                this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end');
                break;
-            case 'showTranscript':
+            case 'transcriptIsPersistentMode':
+                userLog('info', `${icons.transcript} Persistent transcription mode active: ${active}`, 'top-end');
+                break;
+            case 'transcriptShowOnMsg':
                active
                    ? userLog(
                          'info',
--- a/public/js/Transcription.js
+++ b/public/js/Transcription.js
@@ -81,6 +81,8 @@ class Transcription {
        this.isBgTransparent = false;
        this.isPinned = false;
        this.isHidden = true;
+        this.isPersistentMode = false;
+        this.isPersistent = false;
        this.showOnMessage = true;
    }

@@ -102,7 +104,9 @@ class Transcription {
                hide(transcriptionSpeechStart);
                show(transcriptionSpeechStop);
                setColor(transcriptionSpeechStatus, 'lime');
-                userLog('info', 'Transcription started', 'top-end');
+                !transcription.isPersistentMode
+                    ? userLog('info', 'Transcription started', 'top-end')
+                    : (transcription.isPersistent = true);
            };

            this.transcription.onresult = (e) => {
@@ -130,8 +134,9 @@ class Transcription {
            };

            this.transcription.onerror = function (event) {
-                userLog('error', `Transcription error ${event.error}`, 'top-end', 6000);
                console.error('Transcription error', event.error);
+                if (!transcription.isPersistent || !transcription.isPersistentMode)
+                    userLog('error', `Transcription error ${event.error}`, 'top-end', 6000);
            };

            this.transcription.onend = function () {
@@ -139,7 +144,19 @@ class Transcription {
                hide(transcriptionSpeechStop);
                show(transcriptionSpeechStart);
                setColor(transcriptionSpeechStatus, 'white');
-                userLog('info', 'Transcription stopped', 'top-end');
+                // Prevent stopping in the absence of speech...
+                if (
+                    transcription.isPersistentMode &&
+                    transcription.isPersistent &&
+                    transcription.transcriptionRunning
+                ) {
+                    setTimeout(() => {
+                        transcription.start();
+                    }, 2000);
+                } else {
+                    transcription.isPersistent = false;
+                    userLog('info', 'Transcription stopped', 'top-end');
+                }
            };

            this.isTranscriptionSupported = true;
@@ -398,6 +415,7 @@ class Transcription {

    stop() {
        this.transcriptionRunning = false;
+        this.isPersistent = false;
        this.selectDisabled(false);
        this.transcription.stop();
    }
@@ -405,5 +423,6 @@ class Transcription {
    selectDisabled(disabled = false) {
        transcriptionLanguage.disabled = disabled;
        transcriptionDialect.disabled = disabled;
+        transcriptPersistentMode.disabled = disabled;
    }
 }
--- a/public/views/Room.html
+++ b/public/views/Room.html
@@ -1217,22 +1217,58 @@ access to use this app.
            <section id="transcriptionSection" class="transcription">
                <header id="transcriptionHeader" class="transcription-header">
                    <div class="transcription-header-title">
-                        <button id="transcriptionCloseBtn" class="fas fa-times"></button>
-                        <button id="transcriptionTogglePinBtn" class="fas fa-map-pin"></button>
-                        <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="title">
+                            <i class="fa-solid fa-infinity"></i>
                            <div style="margin-left: 5px" class="form-check form-switch form-switch-md">
-                                <input class="form-check-input" type="checkbox" id="transcriptShowOnMsg" checked />
+                                <input class="form-check-input" type="checkbox" id="transcriptPersistentMode" />
                            </div>
                        </div>
                    </div>
                    <div class="transcription-header-options">
-                        <button id="transcriptionGhostBtn" class="fas fa-circle-half-stroke"></button>
-                        <button id="transcriptionSaveBtn" class="fas fa-save"></button>
-                        <button id="transcriptionCleanBtn" class="fas fa-trash"></button>
+                        <button id="transcriptionTogglePinBtn" class="fas fa-map-pin"></button>
+                        <button id="transcriptionMaxBtn" class=""><i class="fas fa-expand"></i></button>
+                        <button id="transcriptionMinBtn" class="hidden"><i class="fas fa-compress"></i></button>
+                        <div class="dropdown title">
+                            <button
+                                class="dropdown-toggle"
+                                type="button"
+                                id="transcriptionDropDownMenu"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                <i class="fas fa-bars"></i>
+                            </button>
+                            <ul class="dropdown-menu text-start" aria-labelledby="transcriptionDropDownMenu">
+                                <li>
+                                    <hr class="hr" />
+                                    <div class="title ml5">
+                                        <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>
+                                    <hr class="hr" />
+                                </li>
+                                <li>
+                                    <button id="transcriptionGhostBtn">
+                                        <i class="fas fa-circle-half-stroke"></i> Toggle bg
+                                    </button>
+                                </li>
+                                <li>
+                                    <button id="transcriptionSaveBtn"><i class="fas fa-save"></i> Save</button>
+                                </li>
+                                <li>
+                                    <button id="transcriptionCleanBtn"><i class="fas fa-trash"></i> Clean</button>
+                                </li>
+                            </ul>
+                        </div>
+                        <button id="transcriptionCloseBtn" class="fas fa-times"></button>
                    </div>
                </header>
                <main id="transcriptionChat" class="transcription-chat"></main>