all

Video/MiroTalk SFU/public/js/VideoGrid.js

@@ -0,0 +1,218 @@
+'use strict';
+
+// ####################################################
+// RESPONSIVE PARTICIPANTS VIEW
+// ####################################################
+
+let customRatio = true;
+
+// aspect       0      1      2      3       4
+let ratios = ['0:0', '4:3', '16:9', '1:1', '1:2'];
+let aspect = 2;
+
+let ratio = getAspectRatio();
+
+function getAspectRatio() {
+    customRatio = aspect == 0 ? true : false;
+    var ratio = ratios[aspect].split(':');
+    return ratio[1] / ratio[0];
+}
+
+function setAspectRatio(i) {
+    aspect = i;
+    ratio = getAspectRatio();
+    resizeVideoMedia();
+}
+
+function Area(Increment, Count, Width, Height, Margin = 10) {
+    ratio = customRatio ? 0.75 : ratio;
+    let i = 0;
+    let w = 0;
+    let h = Increment * ratio + Margin * 2;
+    while (i < Count) {
+        if (w + Increment > Width) {
+            w = 0;
+            h = h + Increment * ratio + Margin * 2;
+        }
+        w = w + Increment + Margin * 2;
+        i++;
+    }
+    if (h > Height) return false;
+    else return Increment;
+}
+
+function resizeVideoMedia() {
+    let Margin = 5;
+    let videoMediaContainer = document.getElementById('videoMediaContainer');
+    let Cameras = document.getElementsByClassName('Camera');
+    let Width = videoMediaContainer.offsetWidth - Margin * 2;
+    let Height = videoMediaContainer.offsetHeight - Margin * 2;
+    let max = 0;
+    let optional = isHideMeActive && videoMediaContainer.childElementCount <= 2 ? 1 : 0;
+    let isOneVideoElement = videoMediaContainer.childElementCount - optional == 1 ? true : false;
+
+    // console.log('videoMediaContainer.childElementCount', {
+    //     isOneVideoElement: isOneVideoElement,
+    //     children: videoMediaContainer.childElementCount,
+    //     optional: optional,
+    // });
+
+    // full screen mode
+    let bigWidth = Width * 4;
+    if (isOneVideoElement) {
+        Width = Width - bigWidth;
+    }
+
+    resetZoom();
+
+    // loop (i recommend you optimize this)
+    let i = 1;
+    while (i < 5000) {
+        let w = Area(i, Cameras.length, Width, Height, Margin);
+        if (w === false) {
+            max = i - 1;
+            break;
+        }
+        i++;
+    }
+
+    max = max - Margin * 2;
+    setWidth(Cameras, max, bigWidth, Margin, Height, isOneVideoElement);
+    document.documentElement.style.setProperty('--vmi-wh', max / 3 + 'px');
+}
+
+function resetZoom() {
+    const videoElements = document.querySelectorAll('video');
+    videoElements.forEach((video) => {
+        video.style.transform = '';
+        video.style.transformOrigin = 'center';
+    });
+}
+
+function setWidth(Cameras, width, bigWidth, margin, maxHeight, isOneVideoElement) {
+    ratio = customRatio ? 0.68 : ratio;
+    for (let s = 0; s < Cameras.length; s++) {
+        Cameras[s].style.width = width + 'px';
+        Cameras[s].style.margin = margin + 'px';
+        Cameras[s].style.height = width * ratio + 'px';
+        if (isOneVideoElement) {
+            Cameras[s].style.width = bigWidth + 'px';
+            Cameras[s].style.height = bigWidth * ratio + 'px';
+            let camHeigh = Cameras[s].style.height.substring(0, Cameras[s].style.height.length - 2);
+            if (camHeigh >= maxHeight) Cameras[s].style.height = maxHeight - 2 + 'px';
+        }
+    }
+}
+
+// ####################################################
+// BREAKPOINTS
+// ####################################################
+
+const MOBILE_BREAKPOINT = 500;
+const TABLET_BREAKPOINT = 580;
+const DESKTOP_BREAKPOINT = 730;
+const CUSTOM_BREAKPOINT = 680;
+
+// ####################################################
+// RESPONSIVE MAIN BUTTONS
+// ####################################################
+
+const mainButtonsBar = document.querySelectorAll('#control button');
+const mainButtonsIcon = document.querySelectorAll('#control button i');
+
+function resizeMainButtons() {
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const isButtonsBarVertical = BtnsBarPosition.selectedIndex === 0;
+    //console.log('Window size', { width: windowWidth, height: windowWidth});
+    if (isButtonsBarVertical) {
+        // Main buttons vertical align
+        if (windowHeight <= MOBILE_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.7rem', '4px', mainButtonsIcon, '0.8rem', '40px');
+        } else if (windowHeight <= TABLET_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.9rem', '4px', mainButtonsIcon, '1rem', '45px');
+        } else if (windowHeight <= DESKTOP_BREAKPOINT) {
+            setStyles(mainButtonsBar, '1rem', '5px', mainButtonsIcon, '1.1rem', '50px');
+        } else {
+            // > DESKTOP_BREAKPOINT
+            setStyles(mainButtonsBar, '1rem', '10px', mainButtonsIcon, '1.2rem', '60px');
+        }
+    } else {
+        // Main buttons horizontal align
+        if (windowWidth <= MOBILE_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.7rem', '4px', mainButtonsIcon, '0.8rem');
+        } else if (windowWidth <= TABLET_BREAKPOINT) {
+            setStyles(mainButtonsBar, '0.9rem', '4px', mainButtonsIcon, '1rem');
+        } else if (windowWidth <= DESKTOP_BREAKPOINT) {
+            setStyles(mainButtonsBar, '1rem', '5px', mainButtonsIcon, '1.1rem');
+        } else {
+            // > DESKTOP_BREAKPOINT
+            setStyles(mainButtonsBar, '1rem', '10px', mainButtonsIcon, '1.2rem');
+        }
+    }
+    //
+    function setStyles(elements, fontSize, padding, icons, fontSizeIcon, bWidth = null) {
+        if (bWidth) document.documentElement.style.setProperty('--btns-width', bWidth);
+
+        elements.forEach(function (element) {
+            element.style.fontSize = fontSize;
+            element.style.padding = padding;
+        });
+        icons.forEach(function (icon) {
+            icon.style.fontSize = fontSizeIcon;
+        });
+    }
+}
+
+// ####################################################
+// RESPONSIVE CHAT
+// ####################################################
+
+function resizeChatRoom() {
+    if (!rc || rc.isMobileDevice || !rc.isChatOpen || rc.isChatPinned) return;
+
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    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
+// ####################################################
+
+window.addEventListener(
+    'load',
+    function (event) {
+        resizeVideoMedia();
+        resizeMainButtons();
+        window.onresize = function () {
+            resizeVideoMedia();
+            resizeMainButtons();
+            resizeChatRoom();
+            resizeTranscriptionRoom();
+        };
+    },
+    false,
+);