1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-09 18:25:58 +01:00

sfu: first working design

This commit is contained in:
Alain Takoudjou 2020-08-27 21:17:46 +02:00
parent 517d7edbc8
commit 76e812d00f
13 changed files with 3640 additions and 139 deletions

View file

@ -10,10 +10,25 @@ h1 {
display: inline;
}
.signature {
border-top: solid;
margin-top: 2em;
padding-top: 0em;
border-width: thin;
clear: both;
body {
overflow-x: hidden;
}
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;
}

4
static/css/font-awesome.min.css vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load diff

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -2,28 +2,47 @@
<html lang="en">
<head>
<title>SFU</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/common.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/"/>
</head>
<body>
<h1>SFU</h1>
<div class="home">
<h1 id="title" class="navbar-brand">SFU</h1>
<form id="groupform">
<label for="group">Group:</label>
<input id="group" type="text" name="group"/>
<input type="submit" value="Join"/><br/>
</form>
<div id="public-groups" class="groups">
<h2>Public groups</h2>
<table id="public-groups-table"></table>
<form id="groupform">
<label for="group">Group:</label>
<input id="group" type="text" name="group" class="form-control form-control-inline"/>
<input type="submit" value="Join" class="btn btn-default btn-large"/><br/>
</form>
<div id="public-groups" class="groups">
<h2>Public groups <i class="fa fa-users" aria-hidden="true"></i></h2>
<table id="public-groups-table"></table>
</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>
</body>

View file

@ -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;
}
}

View file

@ -1,3 +1,406 @@
.nav-fixed .topnav {
z-index: 1039;
}
.fixed-top{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.topnav {
padding-left: 0;
height: 3.313rem;
z-index: 1039;
}
.navbar .form-control, .topnav {
font-size: 1rem;
}
.form-control {
display: block;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-inline {
display: inline-block;
}
.shadow {
box-shadow: 0 .15rem 1.75rem 0 rgba(31,45,65,.15)!important;
}
.bg-white {
background-color: #fff!important;
}
.bg-gray {
background-color: #eee!important;
}
.navbar, .navbar .container, .navbar .container-fluid, .navbar .container-lg, .navbar .container-md, .navbar .container-sm, .navbar .container-xl {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
/*background: #4b4c7b;*/
background: #610a86;
}
.navbar {
position: relative;
padding: .5rem;
border-bottom: 1px solid #e6e6e6;
}
.topnav .navbar-brand {
width: 15rem;
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.255rem .75rem;
/*font-size: 1rem;*/
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn {
transition-duration: 0.4s;
}
.btn-default:hover {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
.btn-default {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
}
.btn-cancel {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-cancel:hover {
color: #fff;
background-color: #c82333;
border-color: #bd2130;
}
.btn-blue {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-blue:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-warn {
color: #ffc107;
background-color: transparent;
background-image: none;
border-color: #ffc107;
}
.btn-warn:hover {
color: #212529;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-large {
font-size: 110%;
}
.app {
background-color: #f7f7f7;
/*height: 100%;*/
overflow: hidden;
margin: 0;
padding: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.coln-left {
flex: 30%;
padding: 0;
margin: 0;
}
.coln-middle {
flex: 30%;
}
.coln-right {
flex: 70%;
}
/* Clear floats after the columns */
.row {
display: flex;
}
.full-height {
height: 100vh;
}
.full-width {
width: calc(100vw - 200px);
height: calc(100vh - 53px);
}
.full-width-active {
width: calc(100vw - 60px);
}
.container {
width: 100%;
}
.users-header {
height: 53px;
padding: 10px;
/*background: #eee;*/
/*background: #4b4c7b;*/
background: #610a86;
border-bottom: 1px solid #e6e6e6;
font-size: .95rem;
font-weight: 500;
}
.users-header:after, .users-header:before {
display: table;
content: " ";
}
.users-header:after {
clear: both;
}
.reply {
height: 60px;
width: 100%;
background-color: #eae7e5;
padding: 10px 5px 10px 5px !important;
margin: 0 !important;
z-index: 1000;
}
.reply textarea {
width: 100%;
resize: none;
overflow: hidden;
padding: 5px !important;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
height: 100%;
font-size: 16px;
}
textarea.form-reply {
height: 2.6em;
margin-right: .5em;
}
.form-reply {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.select {
display: block;
width: 100%;
padding: .275rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.select-inline {
display: inline-block;
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;
border-radius: 10px 10px 10px 0;
background: #daf1c6;
font-size: 12px;
box-shadow: 0 1px 1px rgba(43, 43, 43, 0.16);
word-wrap: break-word;
display: inline-block;
margin: 1em 0 0;
max-width: 80%;
}
.message-row:after, .message-row:before {
display: table;
content: " ";
}
.message-row:after {
clear: both;
}
.message-content {
margin: 0 !important;
padding: 5px !important;
word-wrap: break-word;
font-weight: 400;
font-size: 14px;
padding-bottom: 0 !important;
color: #202035;
}
.message-user {
margin: 0;
font-style: italic;
text-shadow: none;
}
.video-container {
/*height: 100%;*/
height: calc(100vh - 53px);
position: relative;
}
.label-fallback {
opacity: 0.5;
}
.label {
background-color: rgba(0, 0, 0, 0.6);
left: 0;
position: absolute;
top: 0;
width: auto;
z-index: 1;
text-align: center;
height: 2em;
margin: 10px 10px 10px 38%;
padding: 0 20px;
line-height: 30px;
color: #d4d4d4;
}
.nav-link {
padding: 0;
color: #dbd9d9;
min-width: 32px;
display: block;
text-align: center;
margin: 0 10px;
position: relative;
}
.nav-cancel {
color: #d03e3e
}
.nav-link:hover {
color: #c2a4e0;
}
.nav-button {
cursor: pointer;
font-size: 25px;
}
.header-title {
float: left;
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #cecece;
line-height: 2em;
}
#title {
text-align: center;
}
@ -6,10 +409,6 @@ h1 {
white-space: nowrap;
}
#header {
margin-left: 2%;
}
#statdiv {
white-space: nowrap;
margin-bottom: 2pt;
@ -24,7 +423,7 @@ h1 {
}
.disconnected {
background-color: red;
color: red;
font-weight: bold;
}
@ -45,29 +444,31 @@ h1 {
display: none;
}
.clear {
clear: both;
content: "";
}
#optionsdiv {
margin-bottom: 4px;
}
#presentbutton, #unpresentbutton {
width: 8em;
white-space: nowrap;
margin-right: 0.4em;
font-size: 1.1em;
}
#videoselect {
width: 8em;
text-align-last: center;
margin-right: 0.4em;
}
#audioselect {
width: 8em;
text-align-last: center;
}
#mutebutton {
width: 6em;
margin-right: 0.4em;
}
@ -76,7 +477,6 @@ h1 {
}
#sharebutton, #unsharebutton {
width: 8em;
white-space: nowrap;
}
@ -96,27 +496,23 @@ h1 {
}
#main {
display: flex;
}
#users {
width: 5%;
margin-left: 2%;
border: 1px solid;
overflow-x: hidden;
min-width: 5em;
/*display: flex;*/
}
#chatbox {
width: 100%;
height: 100%;
}
#chat {
display: flex;
width: 20%;
margin-left: 0.3em;
border: 1px solid;
height: 85vh;
padding: 0 !important;
margin: 0 !important;
background-color: #f9f9f9;
background-size: cover;
overflow-y: scroll;
border: none;
border-right: 1px solid #e6e6e6;
height: 100% !important;
min-width: 300px;
}
#inputform {
@ -124,37 +520,18 @@ h1 {
}
#box {
height: 95%;
/*height: 95%;*/
overflow: auto;
height: calc(100% - 60px);
padding: 10px;
}
.message, message-me {
margin: 0 0.5em 0 0.5em;
}
.message-user {
font-weight: bold;
}
.message-content {
line-height: 1.5;
margin-left: 1em;
}
.message-me-asterisk {
margin-right: 0.5em;
}
.message-me-user {
font-weight: bold;
margin-right: 0.5em;
}
.message-me-content {
#disconnectbutton, #connectbutton {
margin-left: 80px;
margin-top: 15px;
}
#input {
margin-left: 0.5em;
width: 100%;
border: none;
resize: none;
@ -166,10 +543,9 @@ h1 {
}
#inputbutton {
background-color: white;
/*background-color: white;
border: none;
margin-right: 0.2em;
font-size: 1.5em;
margin-right: 0.2em;*/
}
#inputbutton:focus {
@ -187,40 +563,330 @@ h1 {
}
#peers {
margin-left: 1%;
padding: 10px;
display: grid;
grid-template-columns: 1fr;
column-gap: 0.5%;
align-content: start;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1000;
background-size: cover;
overflow: hidden;
}
.peer {
margin-top: auto;
position: relative;
}
.media {
width: 100%;
max-height: calc(100vh - 73px);
}
.media-failed {
opacity: 0.7;
}
.label {
text-align: center;
height: 2em;
margin-top: 5px;
}
.label-fallback {
opacity: 0.5;
}
#inputform {
width: 100%;
}
#input {
width: 85%;
border: 1px solid;
.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;
}
.sidenav a {
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #dbd9d9;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #c2a4e0;
}
.sidenav .closebtn {
cursor: pointer;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
}
.sidenav label{
display: block;
margin-top: 15px;
}
.sidenav-header {
border-bottom: 1px solid #e6e6e6;
background: #eee;
}
.sidenav-content {
padding: 20px;
background: #fff;
height: 100%;
}
.sidenav-content h2 {
margin: 0;
}
.nav-menu {
margin: 0;
}
.nav-menu li {
float: left;
max-height: 70px;
list-style: none;
}
/* Dropdown Menu */
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
max-width: 300px;
min-width: 200px;
margin-top: 8px;
overflow: auto;
right: 7px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
padding: 15px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
.dropdown-content label{
display: block;
margin-top: 15px;
}
/* END Dropdown Menu */
/* Sidebar left */
.svg-inline--fa {
display: inline-block;
font-size: inherit;
height: 1.2em;
overflow: visible;
vertical-align: -.125em;
color: #dbd9d9;
}
.svg-inline--fa:hover {
color: #c2a4e0;
}
#left-sidebar {
min-width: 200px;
max-width: 200px;
transition: all 0.3s;
background: #ffffff;
border-right: 1px solid #dcdcdc;
z-index: 1039;
}
#left-sidebar .sfu-header {
display: inline-block;
}
header .colapse {
float: left;
text-align: center;
cursor: pointer;
padding-top: 5px;
margin-right: 20px;
}
.sfu-header {
font-size: 1.3rem;
font-weight: 900;
color: #dbd9d9;
/*color: #416d8e;*/
}
.header-sep {
height: 20px;
}
/* Shrinking the sidebar from 200px to 60px and center aligining its content*/
#left-sidebar.active {
min-width: 60px;
max-width: 60px;
text-align: center;
}
#left-sidebar .sidebar-header strong {
display: none;
}
#left-sidebar.active .sidebar-header h3 {
display: none;
}
#left-sidebar.active .sidebar-header strong {
display: block;
}
#users {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
display: block;
background-color: #fff;
overflow-y: auto;
border: 1px solid #f7f7f7;
}
#users > div {
position: relative;
padding: 10px !important;
border-bottom: 1px solid #f0f0f0;
height: 40px;
line-height: 18px;
margin: 0 !important;
cursor: pointer;
}
#left-sidebar.active #users > div {
padding: 10px 5px !important;
}
#users > div:hover {
background-color: #f2f2f2;
}
#users > div::before {
content: "\f111";
font: normal normal normal 14px/1 FontAwesome;
color: #20b91e;
margin-right: 5px;
}
/* END Sidebar Left */
@media screen and (max-height: 450px) {
.sidenav-content {padding: 10px;}
.sidenav a {font-size: 18px;}
}
/*@media only screen and (max-width: 768px) {*/
@media only screen and (max-device-width: 480px) {
.nav-link {
margin: 0;
}
.nav-text {
display: none;
}
.label {
margin: 5px 5px 5px 30%;
}
.video-container {
height: calc(100vh - 113px);
position: fixed;
top: 53px;
right: 0;
left: 0;
margin-bottom: 60px;
/* Display only when showing video */
display: none;
}
.coln-left {
flex: 100%;
width: 100vw;
}
.coln-right {
flex: none;
}
.full-width {
width: 100vw;
}
#left-sidebar.active {
min-width: 200px;
max-width: 200px;
}
#left-sidebar {
min-width: 60px;
max-width: 60px;
text-align: center;
margin-left: -60px !important;
}
/* Reappearing the sidebar on toggle button click */
#left-sidebar {
margin-left: 0;
}
#left-sidebar .sidebar-header strong {
display: none;
}
#left-sidebar.active .sidebar-header h3 {
display: none;
}
#left-sidebar.active .sidebar-header strong {
display: block;
}
#peers {
padding: 3px;
}
}

View file

@ -2,53 +2,114 @@
<html lang="en">
<head>
<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="/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>
<body>
<h1 id="title">SFU</h1>
<div id="header">
<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"/>
<label for="password">Password:</label>
<input id="password" type="password" name="password"
autocomplete="current-password"/>
<input id="connectbutton" type="submit" value="Connect" disabled/>
</form>
<input id="disconnectbutton" class="invisible"
type="submit" value="Disconnect"/>
<span id="errspan"></span>
<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 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">
<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"
type="submit" value="Disconnect"/>
<span id="errspan"></span>
</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">
<button id="presentbutton" class="invisible">Present</button>
<button id="unpresentbutton" class="invisible">Stop presenting</button>
<span id="mediaoptions">
<div id="sidebarnav" class="sidenav">
<div class="sidenav-header">
<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">
<select id="videoselect" class="select select-inline">
<option>default</option>
<option>off</option>
</select>
<label for="audioselect">Microphone:</label>
<select id="audioselect">
<select id="audioselect" class="select select-inline">
<option>default</option>
<option>off</option>
</select>
<button id="mutebutton">Mute</button>
</span>
<button id="sharebutton" class="invisible">Share screen</button>
<button id="unsharebutton" class="invisible">Stop sharing</button>
</div>
<label for="sendselect">Send:</label>
<select id="sendselect">
@ -59,7 +120,7 @@
</select>
<label for="requestselect">Receive:</label>
<select id="requestselect">
<select id="requestselect" class="select select-inline">
<option value="audio">audio only</option>
<option value="screenshare">screen share</option>
<option value="everything" selected>everything</option>
@ -67,23 +128,6 @@
</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="/sfu.js" defer></script>
</body>

View file

@ -52,6 +52,7 @@ function setConnected(connected) {
let statspan = document.getElementById('statspan');
let userform = document.getElementById('userform');
let disconnectbutton = document.getElementById('disconnectbutton');
let connectbutton = document.getElementById('connectbutton');
if(connected) {
clearError();
resetUsers();
@ -62,6 +63,7 @@ function setConnected(connected) {
userform.classList.add('invisible');
userform.classList.remove('userform');
disconnectbutton.classList.remove('invisible');
connectbutton.classList.add('invisible');
displayUsername();
} else {
resetUsers();
@ -76,6 +78,7 @@ function setConnected(connected) {
userform.classList.add('userform');
userform.classList.remove('invisible');
disconnectbutton.classList.add('invisible');
connectbutton.classList.remove('invisible');
clearUsername();
}
}
@ -759,8 +762,11 @@ function formatLines(lines) {
let lastMessage = {};
function addToChatbox(peerId, nick, kind, message){
let row = document.createElement('div');
row.classList.add('message-row');
let container = document.createElement('div');
container.classList.add('message');
row.appendChild(container);
if(kind !== 'me') {
let p = formatLines(message.split('\n'));
if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
@ -794,7 +800,7 @@ function addToChatbox(peerId, nick, kind, message){
}
let box = document.getElementById('box');
box.appendChild(container);
box.appendChild(row);
if(box.scrollHeight > box.clientHeight) {
box.scrollTop = box.scrollHeight - box.clientHeight;
}
@ -1008,6 +1014,40 @@ document.getElementById('disconnectbutton').onclick = function(e) {
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() {
serverConnection = new ServerConnection();
serverConnection.onconnected = gotConnected;