diff --git a/public/css/Room.css b/public/css/Room.css index c9eef22..06af277 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -124,6 +124,7 @@ body { -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); + /* border: var(--border); */ border-radius: 10px; } diff --git a/public/js/Room.js b/public/js/Room.js index 2a47914..bcb7f3b 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -69,10 +69,10 @@ function initClient() { setTippy('stopAudioButton', 'Stop the audio', 'right'); setTippy('startVideoButton', 'Start the video', 'right'); setTippy('stopVideoButton', 'Stop the video', 'right'); - setTippy('swapCameraButton', 'Swap the camera', 'right'); - setTippy('chatButton', 'Toggle the chat', 'right'); setTippy('startScreenButton', 'Start screen share', 'right'); setTippy('stopScreenButton', 'Stop screen share', 'right'); + setTippy('swapCameraButton', 'Swap the camera', 'right'); + setTippy('chatButton', 'Toggle the chat', 'right'); setTippy('whiteboardButton', 'Toggle the whiteboard', 'right'); setTippy('settingsButton', 'Toggle the settings', 'right'); setTippy('exitButton', 'Leave room', 'right'); @@ -1586,8 +1586,6 @@ function adaptAspectRatio(participantsCount) { // desktop aspect ratio switch (participantsCount) { case 1: - desktop = 0; // (0:0) - break; case 3: case 4: case 7: diff --git a/public/js/VideoGrid.js b/public/js/VideoGrid.js index ead681d..16ecef0 100644 --- a/public/js/VideoGrid.js +++ b/public/js/VideoGrid.js @@ -39,12 +39,18 @@ function Area(Increment, Count, Width, Height, Margin = 10) { function resizeVideoMedia() { let Margin = 3; - let Scenary = document.getElementById('videoMediaContainer'); - let Width = Scenary.offsetWidth - Margin * 2; - let Height = Scenary.offsetHeight - Margin * 2; + 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; + // full screen mode + let bigWidth = Width * 4; + if (videoMediaContainer.childElementCount == 1) { + Width = Width - bigWidth; + } + // loop (i recommend you optimize this) let i = 1; while (i < 5000) { @@ -57,16 +63,22 @@ function resizeVideoMedia() { } max = max - Margin * 2; - setWidth(max, Margin); + setWidth(max, bigWidth, Margin, Height); } -function setWidth(width, margin) { +function setWidth(width, bigWidth, margin, maxHeight) { ratio = customRatio ? 0.68 : ratio; let Cameras = document.getElementsByClassName('Camera'); 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 (videoMediaContainer.childElementCount == 1) { + 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'; + } } } diff --git a/public/view/Room.html b/public/view/Room.html index 82a3373..efc30bf 100644 --- a/public/view/Room.html +++ b/public/view/Room.html @@ -103,10 +103,10 @@ access to use this app. - - + +