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.
-
-
+
+