Skip to content

S
sfu
Commit 76e812d0 authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

sfu: first working design

parent 517d7edb
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3638 additions and 137 deletions
static/common.css
View file @ 76e812d0
...@@ -10,10 +10,25 @@ h1 { ...@@ -10,10 +10,25 @@ h1 {
display: inline; display: inline;
} }
.signature {
border-top: solid;
margin-top: 2em; body {
padding-top: 0em; overflow-x: hidden;
border-width: thin; }
clear: both; body, html {
height: 100%;
}
body {
margin: 0;
font-family: Metropolis,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #687281;
text-align: left;
background-color: #eff3f9;
}
*, :after, :before {
box-sizing: border-box;
} }
static/css/font-awesome.min.css 0 → 100644
View file @ 76e812d0
This diff is collapsed.
static/fonts/fontawesome-webfont.svg 0 → 100644
View file @ 76e812d0
This source diff could not be displayed because it is too large. You can view the blob instead.
static/index.html
View file @ 76e812d0
...@@ -2,27 +2,46 @@ ...@@ -2,27 +2,46 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>SFU</title> <title>SFU</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/common.css"> <link rel="stylesheet" href="/common.css">
<link rel="stylesheet" href="/mainpage.css"> <link rel="stylesheet" href="/mainpage.css">
<link rel="stylesheet" type="text/css" href="/sfu.css"/>
<link rel="author" href="https://www.irif.fr/~jch/"/>
<!-- Font Awesome File -->
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
</head>
<head>
<title>SFU</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' cdnjs.cloudflare.com; script-src 'self'; style-src 'self' cdnjs.cloudflare.com; font-src 'self'" />
<link rel="stylesheet" href="/common.css">
<link rel="stylesheet" href="/mainpage.css">
<!-- Font Awesome File -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="author" href="https://www.irif.fr/~jch/"/> <link rel="author" href="https://www.irif.fr/~jch/"/>
</head> </head>
<body> <body>
<h1>SFU</h1>
<div class="home">
<h1 id="title" class="navbar-brand">SFU</h1>
<form id="groupform"> <form id="groupform">
<label for="group">Group:</label> <label for="group">Group:</label>
<input id="group" type="text" name="group"/> <input id="group" type="text" name="group" class="form-control form-control-inline"/>
<input type="submit" value="Join"/><br/> <input type="submit" value="Join" class="btn btn-default btn-large"/><br/>
</form> </form>
<div id="public-groups" class="groups"> <div id="public-groups" class="groups">
<h2>Public groups</h2> <h2>Public groups <i class="fa fa-users" aria-hidden="true"></i></h2>
<table id="public-groups-table"></table> <table id="public-groups-table"></table>
</div> </div>
</div>
<footer class="signature"><p><a href="https://www.irif.fr/~jch/software/sfu/">Unnamed SFU</a> by <a href="https://www.irif.fr/~jch/" rel="author">Juliusz Chroboczek</a></footer> <footer class="signature">
<p><a href="https://www.irif.fr/~jch/software/sfu/">Unnamed SFU</a> by <a href="https://www.irif.fr/~jch/" rel="author">Juliusz Chroboczek</a>
</footer>
<script src="/mainpage.js" defer></script> <script src="/mainpage.js" defer></script>
......
static/mainpage.css
View file @ 76e812d0
...@@ -6,3 +6,45 @@ ...@@ -6,3 +6,45 @@
} }
.signature {
border-top: solid;
padding-top: 0em;
border-width: thin;
clear: both;
height: 50px;
text-align: center;
}
.navbar-brand {
margin-bottom: 80px;
}
.home {
height: calc(100vh - 50px);
padding: 30px;
}
#public-groups-table tr a{
margin-left: 15px;
font-weight: 700;
}
a {
text-decoration: none;
color: #0058e4;
}
a:hover {
color: #0a429c;
}
label {
display: block;
}
@media only screen and (max-device-width: 480px) {
.home {
padding: 10px;
}
}
\ No newline at end of file
static/sfu.css
View file @ 76e812d0
This diff is collapsed.
static/sfu.html
View file @ 76e812d0
...@@ -2,53 +2,114 @@ ...@@ -2,53 +2,114 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>SFU</title> <title>SFU</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/common.css"/> <link rel="stylesheet" type="text/css" href="/common.css"/>
<link rel="stylesheet" type="text/css" href="/sfu.css"/> <link rel="stylesheet" type="text/css" href="/sfu.css"/>
<link rel="author" href="https://www.irif.fr/~jch/"/> <link rel="author" href="https://www.irif.fr/~jch/"/>
<!-- Font Awesome File -->
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
</head> </head>
<body> <body>
<h1 id="title">SFU</h1> <div id="main" class="app">
<div class="row full-height">
<nav id="left-sidebar">
<div class="users-header">
<div class="sfu-header">SFU</div>
</div>
<div class="header-sep"></div>
<div id="users"></div>
</nav>
<div class="container">
<header>
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
<div id="header"> <div id="header">
<div class="colapse" title="Colapse" id="sidebarCollapse">
<svg class="svg-inline--fa fa-align-left fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="align-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor" d="M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z"></path>
</svg>
</div>
<h1 id="title" class="header-title"></h1>
</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>
<div id="userDropdown" class="dropdown-content">
<div id="statdiv"> <div id="statdiv">
<span id="statspan"></span> <span id="statspan"></span>
<span id="userspan"></span> <span id="userspan"></span>
<form id="userform" class="userform"> <form id="userform" class="userform">
<label for="username">Username:</label> <label for="username">Username:</label>
<input id="username" type="text" name="username" <input id="username" type="text" name="username"
autocomplete="username"/> autocomplete="username" class="form-control"/>
<label for="password">Password:</label> <label for="password">Password:</label>
<input id="password" type="password" name="password" <input id="password" type="password" name="password"
autocomplete="current-password"/> autocomplete="current-password" class="form-control"/>
<input id="connectbutton" type="submit" value="Connect" disabled/> <div class="clear"></div>
<input id="connectbutton" type="submit" class="invisible btn btn-blue" value="Connect" disabled/>
</form> </form>
<input id="disconnectbutton" class="invisible" <div class="clear"></div>
<input id="disconnectbutton" class="invisible btn btn-warn"
type="submit" value="Disconnect"/> type="submit" value="Disconnect"/>
<span id="errspan"></span> <span id="errspan"></span>
</div> </div>
</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>
<div class="row full-width" id="mainrow">
<div class="coln-left">
<div id="chat">
<div id="chatbox">
<div id="box"></div>
<div class="reply">
<form id="inputform">
<textarea id="input" class="form-reply"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
</form>
</div>
</div>
</div>
<div id="resizer">
</div>
</div>
<div class="coln-right">
<div class="video-container">
<div id="peers"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="optionsdiv"> <div id="sidebarnav" class="sidenav">
<button id="presentbutton" class="invisible">Present</button> <div class="sidenav-header">
<button id="unpresentbutton" class="invisible">Stop presenting</button> <a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<span id="mediaoptions"> <div class="sidenav-content" id="optionsdiv">
<h2>Configurations</h2>
<div id="mediaoptions">
<label for="videoselect">Camera:</label> <label for="videoselect">Camera:</label>
<select id="videoselect"> <select id="videoselect" class="select select-inline">
<option>default</option> <option>default</option>
<option>off</option> <option>off</option>
</select> </select>
<label for="audioselect">Microphone:</label> <label for="audioselect">Microphone:</label>
<select id="audioselect"> <select id="audioselect" class="select select-inline">
<option>default</option> <option>default</option>
<option>off</option> <option>off</option>
</select> </select>
<button id="mutebutton">Mute</button>
</span>
<button id="sharebutton" class="invisible">Share screen</button> </div>
<button id="unsharebutton" class="invisible">Stop sharing</button>
<label for="sendselect">Send:</label> <label for="sendselect">Send:</label>
<select id="sendselect"> <select id="sendselect">
...@@ -59,7 +120,7 @@ ...@@ -59,7 +120,7 @@
</select> </select>
<label for="requestselect">Receive:</label> <label for="requestselect">Receive:</label>
<select id="requestselect"> <select id="requestselect" class="select select-inline">
<option value="audio">audio only</option> <option value="audio">audio only</option>
<option value="screenshare">screen share</option> <option value="screenshare">screen share</option>
<option value="everything" selected>everything</option> <option value="everything" selected>everything</option>
...@@ -67,23 +128,6 @@ ...@@ -67,23 +128,6 @@
</div> </div>
</div> </div>
<div id="main">
<div id="users"></div>
<div id="chat">
<div id="chatbox">
<div id="box"></div>
<form id="inputform">
<textarea id="input"></textarea>
<input id="inputbutton" type="submit" value="&#10148;"/>
</form>
</div>
<div id="resizer">
</div>
</div>
<div id="peers"></div>
</div>
<script src="/protocol.js" defer></script> <script src="/protocol.js" defer></script>
<script src="/sfu.js" defer></script> <script src="/sfu.js" defer></script>
</body> </body>
......
static/sfu.js
View file @ 76e812d0
...@@ -52,6 +52,7 @@ function setConnected(connected) { ...@@ -52,6 +52,7 @@ function setConnected(connected) {
let statspan = document.getElementById('statspan'); let statspan = document.getElementById('statspan');
let userform = document.getElementById('userform'); let userform = document.getElementById('userform');
let disconnectbutton = document.getElementById('disconnectbutton'); let disconnectbutton = document.getElementById('disconnectbutton');
let connectbutton = document.getElementById('connectbutton');
if(connected) { if(connected) {
clearError(); clearError();
resetUsers(); resetUsers();
...@@ -62,6 +63,7 @@ function setConnected(connected) { ...@@ -62,6 +63,7 @@ function setConnected(connected) {
userform.classList.add('invisible'); userform.classList.add('invisible');
userform.classList.remove('userform'); userform.classList.remove('userform');
disconnectbutton.classList.remove('invisible'); disconnectbutton.classList.remove('invisible');
connectbutton.classList.add('invisible');
displayUsername(); displayUsername();
} else { } else {
resetUsers(); resetUsers();
...@@ -76,6 +78,7 @@ function setConnected(connected) { ...@@ -76,6 +78,7 @@ function setConnected(connected) {
userform.classList.add('userform'); userform.classList.add('userform');
userform.classList.remove('invisible'); userform.classList.remove('invisible');
disconnectbutton.classList.add('invisible'); disconnectbutton.classList.add('invisible');
connectbutton.classList.remove('invisible');
clearUsername(); clearUsername();
} }
} }
...@@ -759,8 +762,11 @@ function formatLines(lines) { ...@@ -759,8 +762,11 @@ function formatLines(lines) {
let lastMessage = {}; let lastMessage = {};
function addToChatbox(peerId, nick, kind, message){ function addToChatbox(peerId, nick, kind, message){
let row = document.createElement('div');
row.classList.add('message-row');
let container = document.createElement('div'); let container = document.createElement('div');
container.classList.add('message'); container.classList.add('message');
row.appendChild(container);
if(kind !== 'me') { if(kind !== 'me') {
let p = formatLines(message.split('\n')); let p = formatLines(message.split('\n'));
if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) { if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
...@@ -794,7 +800,7 @@ function addToChatbox(peerId, nick, kind, message){ ...@@ -794,7 +800,7 @@ function addToChatbox(peerId, nick, kind, message){
} }
let box = document.getElementById('box'); let box = document.getElementById('box');
box.appendChild(container); box.appendChild(row);
if(box.scrollHeight > box.clientHeight) { if(box.scrollHeight > box.clientHeight) {
box.scrollTop = box.scrollHeight - box.clientHeight; box.scrollTop = box.scrollHeight - box.clientHeight;
} }
...@@ -1008,6 +1014,40 @@ document.getElementById('disconnectbutton').onclick = function(e) { ...@@ -1008,6 +1014,40 @@ document.getElementById('disconnectbutton').onclick = function(e) {
serverConnection.close(); serverConnection.close();
}; };
function openNav() {
document.getElementById("sidebarnav").style.width = "250px";
}
function closeNav() {
document.getElementById("sidebarnav").style.width = "0";
}
document.getElementById('sidebarCollapse').onclick = function(e) {
document.getElementById("left-sidebar").classList.toggle("active");
document.getElementById("mainrow").classList.toggle("full-width-active");
};
document.getElementById('openside').onclick = function(e) {
e.preventDefault();
let sidewidth = document.getElementById("sidebarnav").style.width;
if (sidewidth !== "0px" && sidewidth !== "") {
closeNav();
return;
} else {
openNav();
}
};
document.getElementById('user').onclick = function(e) {
document.getElementById("userDropdown").classList.toggle("show");
};
document.getElementById('clodeside').onclick = function(e) {
e.preventDefault();
closeNav();
};
function serverConnect() { function serverConnect() {
serverConnection = new ServerConnection(); serverConnection = new ServerConnection();
serverConnection.onconnected = gotConnected; serverConnection.onconnected = gotConnected;
......
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