[mirotalksfu] - responsive transcription and fix

public/js/RoomClient.js

@@ -3285,6 +3285,7 @@ class RoomClient {
         if (!this.isMobileDevice) this.makeDraggable(chatRoom, chatHeader);
         if (!this.isPlistOpen()) this.toggleShowParticipants();
         if (!chatRoom.classList.contains('container')) chatRoom.classList.add('container');
+        resizeChatRoom();
     }
 
     chatCenter() {

public/js/Transcription.js

@@ -80,6 +80,7 @@ class Transcription {
         this.transcripts = [];
         this.isBgTransparent = false;
         this.isPinned = false;
+        this.isHidden = true;
         this.showOnMessage = true;
     }
 
@@ -98,8 +99,8 @@ class Transcription {
 
             this.transcription.onstart = function () {
                 console.log('Transcription started');
-                transcriptionSpeechStart.style.display = 'none';
-                transcriptionSpeechStop.style.display = 'block';
+                hide(transcriptionSpeechStart);
+                show(transcriptionSpeechStop);
                 setColor(transcriptionSpeechStatus, 'lime');
                 userLog('info', 'Transcription started', 'top-end');
             };
@@ -135,8 +136,8 @@ class Transcription {
 
             this.transcription.onend = function () {
                 console.log('Transcription stopped');
-                transcriptionSpeechStop.style.display = 'none';
-                transcriptionSpeechStart.style.display = 'block';
+                hide(transcriptionSpeechStop);
+                show(transcriptionSpeechStart);
                 setColor(transcriptionSpeechStatus, 'white');
                 userLog('info', 'Transcription stopped', 'top-end');
             };
@@ -167,7 +168,7 @@ class Transcription {
         const time_stamp = rc.getTimeNow();
         const avatar_image = rc.genAvatarSvg(peer_name, 32);
 
-        if (this.isHidden()) {
+        if (this.isHidden) {
             if (this.showOnMessage) {
                 this.toggle();
             } else {
@@ -212,19 +213,17 @@ class Transcription {
         }, duration);
     }
 
-    isHidden() {
-        return Boolean(transcriptionRoom.style.display === 'none' || transcriptionRoom.style.display === '');
-    }
-
     toggle() {
-        if (this.isHidden()) {
+        if (this.isHidden) {
             this.center();
             transcriptionRoom.style.display = 'block';
             rc.sound('open');
         } else {
             transcriptionRoom.style.display = 'none';
         }
+        this.isHidden = !this.isHidden;
         if (this.isPinned) this.unpinned();
+        resizeTranscriptionRoom();
     }
 
     toggleBg() {
@@ -312,6 +311,7 @@ class Transcription {
         this.isPinned = false;
         setColor(transcriptionTogglePinBtn, 'white');
         resizeVideoMedia();
+        resizeTranscriptionRoom();
         transcriptionRoom.style.resize = 'both';
         if (!rc.isMobileDevice) rc.makeDraggable(transcriptionRoom, transcriptionHeader);
     }

public/js/VideoGrid.js

@@ -111,6 +111,7 @@ function setWidth(Cameras, width, bigWidth, margin, maxHeight, isOneVideoElement
 const MOBILE_BREAKPOINT = 500;
 const TABLET_BREAKPOINT = 580;
 const DESKTOP_BREAKPOINT = 730;
+const CUSTOM_BREAKPOINT = 680;
 
 const mainButtonsBar = document.querySelectorAll('#control button');
 const mainButtonsIcon = document.querySelectorAll('#control button i');
@@ -172,6 +173,27 @@ function resizeChatRoom() {
     windowWidth <= DESKTOP_BREAKPOINT || windowHeight <= DESKTOP_BREAKPOINT ? rc.chatMaximize() : rc.chatMinimize();
 }
 
+// ####################################################
+// RESPONSIVE TRANSCRIPTION
+// ####################################################
+
+function resizeTranscriptionRoom() {
+    if (
+        DetectRTC.isMobileDevice ||
+        !Boolean(transcription.speechTranscription) ||
+        transcription.isHidden ||
+        transcription.isPinned
+    )
+        return;
+
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    windowWidth <= CUSTOM_BREAKPOINT || windowHeight <= CUSTOM_BREAKPOINT
+        ? transcription.maximize()
+        : transcription.minimize();
+}
+
 // ####################################################
 // WINDOW LOAD/RESIZE EVENT
 // ####################################################
@@ -185,6 +207,7 @@ window.addEventListener(
             resizeVideoMedia();
             resizeMainButtons();
             resizeChatRoom();
+            resizeTranscriptionRoom();
         };
     },
     false,