Skip to content

S
sfu
Commit 3c57cc77 authored by Juliusz Chroboczek's avatar Juliusz Chroboczek
Browse files
Options

Merge remote-tracking branch 'alain/sfu-update' into master

parents 49ade2f6 c4f97b3c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 424 additions and 104 deletions
static/sfu.css
View file @ 3c57cc77
......@@ -12,7 +12,7 @@
.topnav {
padding-left: 0;
height: 4rem;
height: 3.5rem;
z-index: 1039;
}
......@@ -61,7 +61,7 @@
}
.navbar {
position: relative;
padding: .5rem;
padding: .1rem;
}
.topnav .navbar-brand {
......@@ -164,7 +164,7 @@
}
.app {
background-color: #f7f7f7;
background-color: #f4f4f4;
overflow: hidden;
margin: 0;
padding: 0;
......@@ -177,8 +177,13 @@
margin: 0;
}
.coln-left-hide {
flex: 0;
}
.coln-right {
flex: 70%;
position: relative;
}
/* Clear floats after the columns */
......@@ -192,7 +197,7 @@
.full-width {
width: calc(100vw - 200px);
height: calc(var(--vh, 1vh) * 100 - 64px);
height: calc(var(--vh, 1vh) * 100 - 56px);
}
.full-width-active {
......@@ -204,7 +209,7 @@
}
.users-header {
height: 4rem;
height: 3.5rem;
padding: 10px;
background: #610a86;
font-size: .95rem;
......@@ -221,7 +226,7 @@
}
.reply {
height: 60px;
height: 53px;
width: 100%;
background-color: #eae7e5;
padding: 10px 5px 10px 5px;
......@@ -242,7 +247,7 @@
}
textarea.form-reply {
height: 2.6em;
height: 2.1em;
margin-right: .5em;
}
......@@ -277,7 +282,6 @@ textarea.form-reply {
.select-inline {
display: inline-block;
width: inherit;
}
.message {
......@@ -290,11 +294,12 @@ textarea.form-reply {
word-wrap: break-word;
display: inline-block;
margin: 1em 0 0;
max-width: 80%;
max-width: 90%;
text-align: left;
}
.message-sender {
background: #ececec;
background: #e6e6e6;
}
.message-private {
......@@ -321,12 +326,13 @@ textarea.form-reply {
}
.message-content {
margin: 0 !important;
padding: 5px !important;
margin: 0;
padding: 0;
padding-left: 5px;
word-wrap: break-word;
word-break: break-word;
font-weight: 400;
font-size: 14px;
padding-bottom: 0 !important;
color: #202035;
}
......@@ -336,6 +342,14 @@ textarea.form-reply {
text-shadow: none;
}
.message-footer {
margin: 0;
padding: 0;
margin-bottom: -5px;
line-height: .9;
text-align: right;
}
.message-time {
margin-left: 1em;
}
......@@ -345,22 +359,21 @@ textarea.form-reply {
}
.video-container {
height: calc(var(--vh, 1vh) * 100 - 64px);
height: calc(var(--vh, 1vh) * 100 - 56px);
position: relative;
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;
position: absolute;
top: 5px;
left: 10px;
cursor: pointer;
}
.collapse-video .open-chat {
......@@ -368,20 +381,73 @@ textarea.form-reply {
height: 60px;
fill: #fff;
padding: 10px;
fill: #b8b8b8;
}
.no-video {
display: none;
transition: opacity 1s ease-out;
}
.video-controls, .top-video-controls {
position: absolute;
width: 100%;
left: 0;
bottom: 25px;
text-align: center;
color: #fff;
font-size: 1.5em;
transition: all .5s ease-out;
opacity: 0;
}
.top-video-controls {
text-align: right;
bottom: inherit;
top: 5px;
}
.vc-overlay {
background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 100%);
}
.peer:hover > .video-controls, .peer:hover > .top-video-controls {
opacity: 1;
transition: all .7s ease-out;
}
.video-controls span, .top-video-controls span {
margin-right: 10%;
transition: all .7s ease-out;
opacity: 1;
cursor: pointer;
}
.video-controls span:last-child {
margin-right: 0;
}
.video-controls span:hover, .top-video-controls span:hover {
opacity: .5;
transition: opacity .5s ease-out;
}
.video-controls .volume {
width: 25px;
display: inline-block;
text-align: center;
}
.video-controls span.disabled, .video-controls span.disabled:hover, .top-video-controls span.disabled:hover{
opacity: .2;
color: #c8c8c8
}
.mobile-container {
display: block !important;
}
.login-container {
height: calc(var(--vh, 1vh) * 100 - 64px);
height: calc(var(--vh, 1vh) * 100 - 56px);
position: relative;
display: block;
}
......@@ -410,7 +476,7 @@ textarea.form-reply {
width: 100%;
z-index: 1;
text-align: center;
line-height: 25px;
line-height: 24px;
color: #ffffff;
}
......@@ -553,19 +619,22 @@ h1 {
#chatbox {
height: 100%;
position: relative;
}
#chat {
padding: 0;
margin: 0;
background-color: #f9f9f9;
background-color: #f8f8f8;
background-size: cover;
overflow-y: scroll;
border: none;
border-right: 4px solid #e6e6e6;
/* force to fill height */
height: 100% !important;
width: 100%;
min-width: 300px;
overflow: hidden;
}
#inputform {
......@@ -574,10 +643,28 @@ h1 {
#box {
overflow: auto;
height: calc(100% - 60px);
height: calc(100% - 53px);
padding: 10px;
}
.close-chat {
position: absolute;
top: 2px;
right: 14px;
width: 25px;
font-size: 1em;
text-align: center;
font-weight: 700;
color: #8f8f8f;
cursor: pointer;
border: 1px solid transparent;
}
.close-chat:hover, .close-chat:active {
border: 1px solid #dfdfdf;
border-radius: 4px;
}
#disconnectbutton, #connectbutton {
margin-left: 80px;
margin-top: 15px;
......@@ -613,7 +700,7 @@ h1 {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, auto);
row-gap: 0;
row-gap: 5px;
column-gap: 10px;
position: absolute;
top: 0;
......@@ -626,6 +713,7 @@ h1 {
z-index: 1000;
background-size: cover;
overflow: hidden;
vertical-align: top!important;
}
.peer {
......@@ -633,6 +721,7 @@ h1 {
margin-bottom: auto;
position: relative;
border: 2px solid rgba(0,0,0,0);
background: #80808014;
}
.peer-active {
......@@ -641,7 +730,7 @@ h1 {
.media {
width: 100%;
max-height: calc(var(--vh, 1vh) * 100 - 84px);
max-height: calc(var(--vh, 1vh) * 100 - 76px);
padding-bottom: 20px;
object-fit: contain;
}
......@@ -672,13 +761,13 @@ h1 {
}
.sidenav a {
padding: 10px;
padding: 10px 20px;
text-decoration: none;
font-size: 30px;
color: #dbd9d9;
display: block;
transition: 0.3s;
line-height: 1.2;
line-height: 1.0;
}
.sidenav a:hover {
......@@ -689,7 +778,8 @@ h1 {
cursor: pointer;
position: absolute;
top: 0;
right: 5px;
right: 0;
height: 56px;
}
.sidenav label{
......@@ -697,21 +787,29 @@ h1 {
margin-top: 15px;
}
.sidenav .label-first {
margin-top: 0;
}
.sidenav form{
display: block;
margin-top: 15px;
}
.sidenav-header {
height: 56px;
}
.sidenav-header h2{
color: #fff;
padding: 10px;
margin: 0;
max-width: 70%;
line-height: 44px;
line-height: 36px;
}
.sidenav-content {
padding: 20px;
padding: 10px;
background: #fff;
height: 100%;
}
......@@ -720,6 +818,18 @@ h1 {
margin: 0;
}
fieldset {
margin: 0;
margin-top: 20px;
border: 1px solid #e9e8e8;
padding: 8px;
border-radius: 4px;
}
legend {
padding: 2px;
color: #4d4f51;
}
.nav-menu {
margin: 0;
padding: 0;
......@@ -781,7 +891,7 @@ h1 {
background-color: #fff;
max-width: 300px;
min-width: 200px;
margin-top: 11px;
margin-top: 7px;
overflow: auto;
right: 7px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
......@@ -841,13 +951,14 @@ header .collapse {
cursor: pointer;
padding-top: 5px;
margin-right: 20px;
margin-left: 5px;
}
.sfu-header {
font-size: 1.3rem;
font-weight: 900;
color: #dbd9d9;
line-height: 44px;
line-height: 34px;
}
.header-sep {
......@@ -912,15 +1023,16 @@ header .collapse {
margin-right: 5px;
}
/* END Sidebar Left */
@media screen and (max-height: 450px) {
.sidenav-content {padding: 10px;}
.sidenav a {font-size: 18px;}
.close-icon {
font: normal 1em/1 Arial, sans-serif;
display: inline-block;
}
/*@media only screen and (max-width: 768px) {*/
@media only screen and (max-device-width: 768px) {
.close-icon:before{ content: "\2715"; }
/* END Sidebar Left */
@media only screen and (max-device-width: 1024px) {
.nav-link {
margin: 0;
line-height: 1.5;
......@@ -934,16 +1046,17 @@ header .collapse {
display: none;
}
.topnav {
height: 3.5rem;
.full-width {
height: calc(var(--vh, 1vh) * 100 - 56px);
}
.users-header {
height: 3.5rem;
.collapse-video {
left: inherit;
right: 60px;
}
.full-width {
height: calc(var(--vh, 1vh) * 100 - 56px);
.close-chat {
display: none;
}
.video-container {
......@@ -975,6 +1088,7 @@ header .collapse {
.coln-right {
flex: none;
position: relative;
}
.full-width {
......@@ -1010,6 +1124,8 @@ header .collapse {
display: block;
}
.sidenav a {padding: 10px 5px;}
.sidenav-header h2 {
line-height: 36px;
}
......
static/sfu.html
View file @ 3c57cc77
......@@ -92,6 +92,9 @@
<div class="coln-left" id="left">
<div id="chat">
<div id="chatbox">
<div class="close-chat" id="close-chat">
<span class="close-icon"></span>
</div>
<div id="box"></div>
<div class="reply">
<form id="inputform">
......@@ -114,8 +117,10 @@
</svg>
</div>
<div class="video-container no-video" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div>
</div>
</div>
<div class="login-container invisible" id="login-container">
<div class="login-box">
<form id="userform" class="userform">
......@@ -143,8 +148,10 @@
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="sidenav-content" id="optionsdiv">
<div id="mediaoptions">
<label for="videoselect">Camera:</label>
<div id="mediaoptions" class="invisible">
<fieldset>
<legend>Media Options</legend>
<label for="videoselect" class="label-first">Camera:</label>
<select id="videoselect" class="select select-inline">
<option value="">off</option>
</select>
......@@ -161,10 +168,12 @@
<form>
<input id="studiobox" type="checkbox">Studio mode</input>
</form>
</fieldset>
</div>
<label for="sendselect">Send:</label>
<fieldset>
<legend>Others Settings</legend>
<label for="sendselect" class="label-first">Send:</label>
<select id="sendselect" class="select select-inline">
<option value="lowest">lowest</option>
<option value="low">low</option>
......@@ -183,6 +192,32 @@
<form>
<input id="activitybox" type="checkbox">Activity detection</input>
</form>
</fieldset>
</div>
</div>
<div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay">
<span class="volume" title="Volume">
<i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
</span>
<span class="camera" title="Camera">
<i class="fa fa-video-camera" data-type="bt-camera" aria-hidden="true"></i>
</span>
<span class="pip" title="Picture In Picture">
<i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i>
</span>
</div>
</div>
<div id="top-videocontrols-template" class="invisible">
<div class="top-video-controls">
<span class="expand invisible" title="Maximize">
<i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i>
</span>
</div>
</div>
......
static/sfu.js
View file @ 3c57cc77
This diff is collapsed.
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