Skip to content

S
sfu
Commit 640fbb81 authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

more improvement on design

parent 0ab84250
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 45 deletions
static/sfu.css
View file @ 640fbb81
......@@ -187,12 +187,12 @@
}
.full-height {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.full-width {
width: calc(100vw - 200px);
height: calc(100vh - 64px);
height: calc(var(--vh, 1vh) * 100 - 64px);
}
.full-width-active {
......@@ -322,15 +322,31 @@ textarea.form-reply {
}
.video-container {
height: calc(100vh - 64px);
height: calc(var(--vh, 1vh) * 100 - 64px);
position: relative;
background: rgba(0, 0, 0, 0.61);
background: rgba(0, 0, 0, 0.91);
/* Display only when showing video */
display: block;
transition: all 1s ease-out;
opacity: 1;
}
.collapse-video {
display: none;
/*on top of video peers*/
z-index: 1002;
position: fixed;
top: 70px;
right: 10px;
}
.collapse-video .open-chat {
color: #fff;
height: 60px;
fill: #fff;
padding: 10px;
}
.no-video {
display: none;
transition: opacity 1s ease-out;
......@@ -342,14 +358,14 @@ textarea.form-reply {
}
.login-container {
height: calc(100vh - 64px);
height: calc(var(--vh, 1vh) * 100 - 64px);
position: relative;
display: block;
}
.login-box {
position: absolute;
top: 90px;
top: 15%;
left: 25%;
width: 21em;
padding: 2em;
......@@ -422,7 +438,7 @@ textarea.form-reply {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #cecece;
color: #ebebeb;
line-height: 2em;
}
......@@ -578,7 +594,7 @@ h1 {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, auto);
row-gap: 0;
column-gap: 20px;
column-gap: 10px;
position: absolute;
top: 0;
right: 0;
......@@ -594,13 +610,15 @@ h1 {
.peer {
margin-top: auto;
margin-bottom: auto;
position: relative;
}
.media {
width: 100%;
max-height: calc(100vh - 84px);
max-height: calc(var(--vh, 1vh) * 100 - 84px);
padding-bottom: 20px;
object-fit: contain;
}
.media-failed {
......@@ -622,10 +640,9 @@ h1 {
z-index: 2999;
top: 0;
right: 0;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: hidden;
padding-top: 64px;
}
.sidenav a {
......@@ -635,6 +652,7 @@ h1 {
color: #dbd9d9;
display: block;
transition: 0.3s;
line-height: 1.4;
}
.sidenav a:hover {
......@@ -645,8 +663,7 @@ h1 {
cursor: pointer;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
right: 5px;
}
.sidenav label{
......@@ -654,9 +671,12 @@ h1 {
margin-top: 15px;
}
.sidenav-header {
border-bottom: 1px solid #e6e6e6;
background: #eee;
.sidenav-header h2{
color: #fff;
padding: 10px;
margin: 0;
max-width: 70%;
line-height: 44px;
}
.sidenav-content {
......@@ -671,6 +691,7 @@ h1 {
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu li {
......@@ -881,7 +902,6 @@ header .colapse {
}
.video-container {
height: calc(100vh - 64px);
position: fixed;
top: 64px;
right: 0;
......@@ -890,7 +910,6 @@ header .colapse {
}
.login-container {
height: calc(100vh - 64px);
position: fixed;
top: 64px;
right: 0;
......@@ -945,15 +964,23 @@ header .colapse {
}
#peers {
padding: 3px;
padding: 3px;
}
#resizer {
display: none;
display: none;
}
#chat {
border-right: none;
}
#sharebutton {
display: none;
display: none;
}
.dropdown-content {
margin-top: 14px;
}
}
static/sfu.html
View file @ 640fbb81
......@@ -105,6 +105,14 @@
<div id="resizer"></div>
<div class="coln-right" id="right">
<span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
<div class="collapse-video" id="collapse-video">
<svg viewBox="-21 -47 682.66669 682" xmlns="http://www.w3.org/2000/svg" class="open-chat">
<path d="m552.011719-1.332031h-464.023438c-48.515625 0-87.988281 39.464843-87.988281 87.988281v283.972656c0 48.414063 39.300781 87.816406 87.675781 87.988282v128.863281l185.191407-128.863281h279.144531c48.515625 0 87.988281-39.472657 87.988281-87.988282v-283.972656c0-48.523438-39.472656-87.988281-87.988281-87.988281zm50.488281 371.960937c0 27.835938-22.648438 50.488282-50.488281 50.488282h-290.910157l-135.925781 94.585937v-94.585937h-37.1875c-27.839843 0-50.488281-22.652344-50.488281-50.488282v-283.972656c0-27.84375 22.648438-50.488281 50.488281-50.488281h464.023438c27.839843 0 50.488281 22.644531 50.488281 50.488281zm0 0"/>
<path d="m171.292969 131.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 211.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 291.171875h297.414062v37.5h-297.414062zm0 0"/>
</svg>
</div>
<div class="video-container no-video" id="video-container">
<div id="peers"></div>
</div>
......@@ -131,10 +139,10 @@
<div id="sidebarnav" class="sidenav">
<div class="sidenav-header">
<h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="sidenav-content" id="optionsdiv">
<h2>Configurations</h2>
<div id="mediaoptions">
<label for="videoselect">Camera:</label>
<select id="videoselect" class="select select-inline">
......
static/sfu.js
View file @ 640fbb81
......@@ -46,8 +46,11 @@ function getUsername() {
}
function showVideo() {
let width = window.innerWidth;
let video_container = document.getElementById('video-container');
video_container.classList.remove('no-video');
if (width <= 768)
document.getElementById('collapse-video').style.display = "block";
}
function hideVideo(force) {
......@@ -60,7 +63,12 @@ function hideVideo(force) {
}
let video_container = document.getElementById('video-container');
video_container.classList.add('no-video');
}
function closeVideoControls() {
// hide all video buttons used to switch video on mobile layout
document.getElementById('switch-video').style.display = "";
document.getElementById('collapse-video').style.display = "";
}
/**
......@@ -95,6 +103,8 @@ function setConnected(connected) {
connectionbox.classList.remove('invisible');
clearUsername();
displayError("Disconnected!", "error");
hideVideo();
closeVideoControls();
}
}
......@@ -136,6 +146,16 @@ function gotDownStream(c) {
}
}
// Store current browser viewport height in css variable
function setViewportHeight() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
};
setViewportHeight();
// On resize and orientation change, we update viewport height
addEventListener('resize', setViewportHeight);
addEventListener('orientationchange', setViewportHeight);
document.getElementById('presentbutton').onclick = function(e) {
e.preventDefault();
addLocalMedia();
......@@ -647,20 +667,21 @@ function resizePeers() {
if (!count)
// No video, nothing to resize.
return;
let rows = "";
let size = 100 / columns;
let container = document.getElementById("video-container")
// Peers div has total padding of 30px, we remove 30 on offsetHeight
let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
for(let i = 0; i < columns; i++){
rows += size + "% ";
}
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
peers.style['grid-template-rows'] = rows;
let media_list = document.getElementsByClassName("media");
[].forEach.call(media_list, function (element) {
element.style['max-height'] = max_video_height + "px";
element.style['max-height'] = max_video_height + "px";
});
if (count <= 2 && container.offsetHeight > container.offsetWidth) {
peers.style['grid-template-columns'] = "repeat(1, 1fr)";
} else {
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
}
}
/** @type{Object.<string,string>} */
......@@ -1079,35 +1100,22 @@ document.getElementById('user').onclick = function(e) {
document.getElementById("userDropdown").classList.toggle("show");
};
window.onclick = function(event) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show") && event.target.id != "user") {
let parent = event.target;
while (parent.id !== "main" && parent.id !== "userDropdown" &&
parent.id !== "user" && parent.tagName !== "body") {
parent = parent.parentNode;
}
if (parent.id !="userDropdown" && parent.id !== "user") {
user_box.classList.toggle("show");
}
}
};
document.getElementById('clodeside').onclick = function(e) {
e.preventDefault();
closeNav();
};
document.getElementById('video-container').onclick = function(e) {
document.getElementById('collapse-video').onclick = function(e) {
e.preventDefault();
let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
let width = window.innerWidth;
if (width <= 768) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
return;
}
// fixed div for small screen
this.style.display = "";
hideVideo(true);
document.getElementById('switch-video').style.display = "block";
}
......@@ -1117,6 +1125,21 @@ document.getElementById('switch-video').onclick = function(e) {
e.preventDefault();
showVideo();
this.style.display = "";
document.getElementById('collapse-video').style.display = "block";
};
window.onclick = function(event) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show") && event.target.id != "user") {
let parent = event.target;
while (parent.id !== "main" && parent.id !== "userDropdown" &&
parent.id !== "user" && parent.tagName !== "body") {
parent = parent.parentNode;
}
if (parent.id !="userDropdown" && parent.id !== "user") {
user_box.classList.toggle("show");
}
}
};
function serverConnect() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7