[mirotalksfu] - responsive transcription and fix

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,