Skip to content

S
sfu
Commit 788e43ba authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

add some interface improvement

parent 382446eb
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 96 deletions
static/sfu.css
View file @ 788e43ba
......@@ -10,7 +10,8 @@
}
.topnav {
padding-left: 0;
height: 3.313rem;
/*height: 3.313rem;*/
height: 4rem;
z-index: 1039;
}
.navbar .form-control, .topnav {
......@@ -197,7 +198,7 @@
.full-width {
width: calc(100vw - 200px);
height: calc(100vh - 53px);
height: calc(100vh - 64px);
}
.full-width-active {
......@@ -209,7 +210,7 @@
}
.users-header {
height: 53px;
height: 4rem;
padding: 10px;
background: #610a86;
/*border-bottom: 1px solid #e6e6e6;*/
......@@ -290,20 +291,6 @@ textarea.form-reply {
width: inherit;
}
.message-sender {
float: right;
width: auto !important;
background: #dcf8c6;
border-radius: 10px 10px 0 10px;
padding: 4px 10px 7px !important;
font-size: 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
display: inline-block;
word-wrap: break-word;
margin-left: 20% !important;
max-width: 80%;
}
.message {
width: auto !important;
padding: 4px 10px 7px !important;
......@@ -317,6 +304,13 @@ textarea.form-reply {
max-width: 80%;
}
.message-sender {
float: right;
background: #ececec;
border-radius: 10px 10px 0 10px;
margin-left: 20% !important;
}
.message-row:after, .message-row:before {
display: table;
content: " ";
......@@ -344,7 +338,7 @@ textarea.form-reply {
.video-container {
/*height: 100%;*/
height: calc(100vh - 53px);
height: calc(100vh - 64px);
position: relative;
background: rgba(0, 0, 0, 0.61);
/* Display only when showing video */
......@@ -363,6 +357,25 @@ textarea.form-reply {
display: block !important;
}
.login-container {
height: calc(100vh - 64px);
position: relative;
display: block;
}
.login-box {
position: absolute;
top: 90px;
left: 25%;
width: 21em;
padding: 2em;
}
.login-box h2 {
text-align: center;
margin-bottom: 40px;
}
.label-fallback {
opacity: 0.5;
}
......@@ -390,15 +403,34 @@ textarea.form-reply {
text-align: center;
margin: 0 10px;
position: relative;
line-height: 1.1;
}
.nav-cancel {
color: #d03e3e
.nav-link span {
display: block;
}
.nav-link label {
display: block;
cursor: pointer;
color: #fff;
font-size: 55%;
}
.nav-link:hover {
color: #c2a4e0;
}
.nav-link label:hover {
color: #c2a4e0;
}
.nav-cancel, .muted, .nav-cancel label, .muted label {
color: #d03e3e
}
.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
color: #d03e3e
}
.nav-button {
cursor: pointer;
......@@ -485,10 +517,6 @@ h1 {
margin-right: 0.4em;
}
.muted {
color: red;
}
#sharebutton, #unsharebutton {
white-space: nowrap;
}
......@@ -523,7 +551,7 @@ h1 {
background-size: cover;
overflow-y: scroll;
border: none;
border-right: 1px solid #e6e6e6;
border-right: 4px solid #e6e6e6;
height: 100% !important;
min-width: 300px;
}
......@@ -567,7 +595,7 @@ h1 {
#resizer {
width: 8px;
margin-left: -8px;
margin-left: -4px;
z-index: 1000;
}
......@@ -613,58 +641,58 @@ h1 {
}
.sidenav {
background-color: #4d076b;
-webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
display: block;
position: fixed;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 0px;
z-index: 2999;
top: 0;
right: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
padding-top: 52px;
background-color: #4d076b;
-webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
display: block;
position: fixed;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 0px;
z-index: 2999;
top: 0;
right: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
padding-top: 64px;
}
.sidenav a {
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #dbd9d9;
display: block;
transition: 0.3s;
padding: 10px;
text-decoration: none;
font-size: 30px;
color: #dbd9d9;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #c2a4e0;
color: #c2a4e0;
}
.sidenav .closebtn {
cursor: pointer;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
cursor: pointer;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
}
.sidenav label{
display: block;
margin-top: 15px;
display: block;
margin-top: 15px;
}
.sidenav-header {
border-bottom: 1px solid #e6e6e6;
background: #eee;
border-bottom: 1px solid #e6e6e6;
background: #eee;
}
.sidenav-content {
padding: 20px;
background: #fff;
height: 100%;
padding: 20px;
background: #fff;
height: 100%;
}
.sidenav-content h2 {
......@@ -735,7 +763,7 @@ h1 {
background-color: #fff;
max-width: 300px;
min-width: 200px;
margin-top: 8px;
margin-top: 11px;
overflow: auto;
right: 7px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
......@@ -874,6 +902,10 @@ header .colapse {
@media only screen and (max-device-width: 768px) {
.nav-link {
margin: 0;
line-height: 1.5;
}
.nav-link label {
display: none;
}
.nav-text {
display: none;
......@@ -884,9 +916,9 @@ header .colapse {
}
.video-container {
height: calc(100vh - 53px);
height: calc(100vh - 64px);
position: fixed;
top: 53px;
top: 64px;
right: 0;
left: 0;
margin-bottom: 60px;
......
static/sfu.html
View file @ 788e43ba
......@@ -35,34 +35,56 @@
</div>
<ul class="nav-menu">
<li><button id="presentbutton" class="invisible btn btn-success"><i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span></button></li>
<li><button id="unpresentbutton" class="invisible btn btn-cancel"><i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span></button></li>
<li><button id="mutebutton" class="invisible btn btn-default">Mute</button></li>
<li><span id="sharebutton" class="invisible nav-link nav-button"><i class="fa fa-share-square-o" aria-hidden="true"></i></span></li>
<li><span id="unsharebutton" class="invisible nav-link nav-button nav-cancel"><i class="fa fa-window-close-o" aria-hidden="true"></i></span></li>
<li><span class="nav-button nav-link" id="user"><i class="fa fa-user dropbtn" aria-hidden="true"></i></span>
<li>
<button id="presentbutton" class="invisible btn btn-success">
<i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span>
</button>
</li>
<li>
<button id="unpresentbutton" class="invisible btn btn-cancel">
<i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span>
</button>
</li>
<li>
<div id="mutebutton" class="nav-link nav-button">
<span><i class="fa fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label>
</div>
</li>
<li>
<div id="sharebutton" class="invisible nav-link nav-button">
<span><i class="fa fa-share-square-o" aria-hidden="true"></i></span>
<label>Share Screen</label>
</div>
</li>
<li>
<div id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
<span><i class="fa fa-window-close-o" aria-hidden="true"></i></span>
<label>Share Screen</label>
</div>
</li>
<li>
<div class="nav-button nav-link" id="user">
<span><i class="fa fa-user dropbtn" aria-hidden="true"></i></span>
<label>User</label>
</div>
<div id="userDropdown" class="dropdown-content">
<div id="statdiv">
<span id="statspan"></span>
<span id="userspan"></span>
<form id="userform" class="userform">
<label for="username">Username:</label>
<input id="username" type="text" name="username"
autocomplete="username" class="form-control"/>
<label for="password">Password:</label>
<input id="password" type="password" name="password"
autocomplete="current-password" class="form-control"/>
<div class="clear"></div>
<input id="connectbutton" type="submit" class="invisible btn btn-blue" value="Connect" disabled/>
</form>
<div class="clear"></div>
<input id="disconnectbutton" class="invisible btn btn-warn"
<input id="disconnectbutton" class="btn btn-warn"
type="submit" value="Disconnect"/>
<span id="errspan"></span>
</div>
</div>
</li>
<li>
<div class="nav-button nav-link" id="openside">
<span><i class="fa fa-cog" aria-hidden="true"></i></span>
<label>Parameters</label>
</div>
</li>
<li><span class="nav-button nav-link" id="openside"><i class="fa fa-cog" aria-hidden="true"></i></span></li>
</ul>
</nav>
</header>
......@@ -79,14 +101,29 @@
</div>
</div>
</div>
<div id="resizer">
</div>
</div>
<div id="resizer"></div>
<div class="coln-right">
<span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
<div class="video-container no-video" id="video-container">
<div id="peers"></div>
</div>
<div class="login-container invisible" id="login-container">
<div class="login-box">
<h2>Login to SFU</h2>
<form id="userform" class="userform">
<label for="username">Username:</label>
<input id="username" type="text" name="username"
autocomplete="username" class="form-control"/>
<label for="password">Password:</label>
<input id="password" type="password" name="password"
autocomplete="current-password" class="form-control"/>
<div class="clear"></div>
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect" disabled/>
</form>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
......
static/sfu.js
View file @ 788e43ba
......@@ -69,19 +69,16 @@ function hideVideo(force) {
*/
function setConnected(connected) {
let statspan = document.getElementById('statspan');
let userform = document.getElementById('userform');
let disconnectbutton = document.getElementById('disconnectbutton');
let connectbutton = document.getElementById('connectbutton');
let userbox = document.getElementById('user');
let connectionbox = document.getElementById('login-container');
if(connected) {
resetUsers();
clearChat();
statspan.textContent = 'Connected';
statspan.classList.remove('disconnected');
statspan.classList.add('connected');
userform.classList.add('invisible');
userform.classList.remove('userform');
disconnectbutton.classList.remove('invisible');
connectbutton.classList.add('invisible');
userbox.classList.remove('invisible');
connectionbox.classList.add('invisible');
displayUsername();
} else {
resetUsers();
......@@ -93,10 +90,8 @@ function setConnected(connected) {
statspan.textContent = 'Disconnected';
statspan.classList.remove('connected');
statspan.classList.add('disconnected');
userform.classList.add('userform');
userform.classList.remove('invisible');
disconnectbutton.classList.add('invisible');
connectbutton.classList.remove('invisible');
userbox.classList.add('invisible');
connectionbox.classList.remove('invisible');
clearUsername();
displayError("Disconnected!", "error");
}
......@@ -195,7 +190,7 @@ function setLocalMute(mute) {
localMute = mute;
muteLocalTracks(localMute);
let button = document.getElementById('mutebutton');
button.textContent = localMute ? 'Unmute' : 'Mute';
//button.textContent = localMute ? 'Unmute' : 'Mute';
if(localMute)
button.classList.add('muted');
else
......@@ -649,7 +644,8 @@ function resizePeers() {
Object.keys(serverConnection.down).length;
let peers = document.getElementById('peers');
let columns = Math.ceil(Math.sqrt(count));
if (columns > 1) {
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
if (false) {
if (peers.offsetWidth < peers.offsetHeight) {
// we change view orientation
peers.style['grid-template-rows'] = `repeat(${columns}, auto)`;
......@@ -793,11 +789,15 @@ function formatLines(lines) {
let lastMessage = {};
function addToChatbox(peerId, nick, kind, message){
let userpass = getUserPass();
let row = document.createElement('div');
row.classList.add('message-row');
let container = document.createElement('div');
container.classList.add('message');
row.appendChild(container);
if (userpass.username === nick) {
container.classList.add('message-sender');
}
if(kind !== 'me') {
let p = formatLines(message.split('\n'));
if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
......@@ -1031,6 +1031,11 @@ document.getElementById('userform').onsubmit = function(e) {
document.getElementById('disconnectbutton').onclick = function(e) {
serverConnection.close();
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
user_box.classList.toggle("show");
}
};
function openNav() {
......
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