mirror of
https://github.com/jech/galene.git
synced 2024-11-23 00:55:58 +01:00
Merge remote-tracking branch 'alain/sfu-update' into master
This commit is contained in:
Juliusz Chroboczek
commit
3c57cc772e
3 changed files with 428 additions and 108 deletions
218
static/sfu.css
218
static/sfu.css
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
.topnav {
|
.topnav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
height: 4rem;
|
height: 3.5rem;
|
||||||
z-index: 1039;
|
z-index: 1039;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
}
|
}
|
||||||
.navbar {
|
.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: .5rem;
|
padding: .1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav .navbar-brand {
|
.topnav .navbar-brand {
|
||||||
|
|
@ -164,7 +164,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
background-color: #f7f7f7;
|
background-color: #f4f4f4;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -177,8 +177,13 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.coln-left-hide {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.coln-right {
|
.coln-right {
|
||||||
flex: 70%;
|
flex: 70%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Clear floats after the columns */
|
/* Clear floats after the columns */
|
||||||
|
|
@ -192,7 +197,7 @@
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
width: calc(100vw - 200px);
|
width: calc(100vw - 200px);
|
||||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-width-active {
|
.full-width-active {
|
||||||
|
|
@ -204,7 +209,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.users-header {
|
.users-header {
|
||||||
height: 4rem;
|
height: 3.5rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #610a86;
|
background: #610a86;
|
||||||
font-size: .95rem;
|
font-size: .95rem;
|
||||||
|
|
@ -221,7 +226,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply {
|
.reply {
|
||||||
height: 60px;
|
height: 53px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #eae7e5;
|
background-color: #eae7e5;
|
||||||
padding: 10px 5px 10px 5px;
|
padding: 10px 5px 10px 5px;
|
||||||
|
|
@ -242,7 +247,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea.form-reply {
|
textarea.form-reply {
|
||||||
height: 2.6em;
|
height: 2.1em;
|
||||||
margin-right: .5em;
|
margin-right: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -277,7 +282,6 @@ textarea.form-reply {
|
||||||
|
|
||||||
.select-inline {
|
.select-inline {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
|
@ -290,11 +294,12 @@ textarea.form-reply {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 1em 0 0;
|
margin: 1em 0 0;
|
||||||
max-width: 80%;
|
max-width: 90%;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-sender {
|
.message-sender {
|
||||||
background: #ececec;
|
background: #e6e6e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-private {
|
.message-private {
|
||||||
|
|
@ -321,12 +326,13 @@ textarea.form-reply {
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-content {
|
.message-content {
|
||||||
margin: 0 !important;
|
margin: 0;
|
||||||
padding: 5px !important;
|
padding: 0;
|
||||||
|
padding-left: 5px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-bottom: 0 !important;
|
|
||||||
color: #202035;
|
color: #202035;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -336,6 +342,14 @@ textarea.form-reply {
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-footer {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
line-height: .9;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.message-time {
|
.message-time {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -345,22 +359,21 @@ textarea.form-reply {
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||||
position: relative;
|
position: relative;
|
||||||
background: rgba(0, 0, 0, 0.91);
|
background: rgba(0, 0, 0, 0.91);
|
||||||
/* Display only when showing video */
|
/* Display only when showing video */
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 1s ease-out;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-video {
|
.collapse-video {
|
||||||
display: none;
|
display: none;
|
||||||
/*on top of video peers*/
|
/*on top of video peers*/
|
||||||
z-index: 1002;
|
z-index: 1002;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 70px;
|
top: 5px;
|
||||||
right: 10px;
|
left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-video .open-chat {
|
.collapse-video .open-chat {
|
||||||
|
|
@ -368,20 +381,73 @@ textarea.form-reply {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
fill: #b8b8b8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-video {
|
.no-video {
|
||||||
display: none;
|
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;
|
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 {
|
.mobile-container {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -410,7 +476,7 @@ textarea.form-reply {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 25px;
|
line-height: 24px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -553,19 +619,22 @@ h1 {
|
||||||
|
|
||||||
#chatbox {
|
#chatbox {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat {
|
#chat {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #f9f9f9;
|
background-color: #f8f8f8;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
border: none;
|
border: none;
|
||||||
border-right: 4px solid #e6e6e6;
|
border-right: 4px solid #e6e6e6;
|
||||||
/* force to fill height */
|
/* force to fill height */
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
|
width: 100%;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputform {
|
#inputform {
|
||||||
|
|
@ -574,10 +643,28 @@ h1 {
|
||||||
|
|
||||||
#box {
|
#box {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 53px);
|
||||||
padding: 10px;
|
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 {
|
#disconnectbutton, #connectbutton {
|
||||||
margin-left: 80px;
|
margin-left: 80px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
|
@ -613,7 +700,7 @@ h1 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
grid-template-rows: repeat(1, auto);
|
grid-template-rows: repeat(1, auto);
|
||||||
row-gap: 0;
|
row-gap: 5px;
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -626,6 +713,7 @@ h1 {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
vertical-align: top!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer {
|
.peer {
|
||||||
|
|
@ -633,6 +721,7 @@ h1 {
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 2px solid rgba(0,0,0,0);
|
border: 2px solid rgba(0,0,0,0);
|
||||||
|
background: #80808014;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer-active {
|
.peer-active {
|
||||||
|
|
@ -641,7 +730,7 @@ h1 {
|
||||||
|
|
||||||
.media {
|
.media {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: calc(var(--vh, 1vh) * 100 - 84px);
|
max-height: calc(var(--vh, 1vh) * 100 - 76px);
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
@ -672,13 +761,13 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav a {
|
.sidenav a {
|
||||||
padding: 10px;
|
padding: 10px 20px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #dbd9d9;
|
color: #dbd9d9;
|
||||||
display: block;
|
display: block;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
line-height: 1.2;
|
line-height: 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav a:hover {
|
.sidenav a:hover {
|
||||||
|
|
@ -689,7 +778,8 @@ h1 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 5px;
|
right: 0;
|
||||||
|
height: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav label{
|
.sidenav label{
|
||||||
|
|
@ -697,21 +787,29 @@ h1 {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidenav .label-first {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidenav form{
|
.sidenav form{
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidenav-header {
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidenav-header h2{
|
.sidenav-header h2{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
line-height: 44px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidenav-content {
|
.sidenav-content {
|
||||||
padding: 20px;
|
padding: 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -720,6 +818,18 @@ h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #e9e8e8;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
padding: 2px;
|
||||||
|
color: #4d4f51;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-menu {
|
.nav-menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -781,7 +891,7 @@ h1 {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
margin-top: 11px;
|
margin-top: 7px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
right: 7px;
|
right: 7px;
|
||||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||||
|
|
@ -841,13 +951,14 @@ header .collapse {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sfu-header {
|
.sfu-header {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #dbd9d9;
|
color: #dbd9d9;
|
||||||
line-height: 44px;
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-sep {
|
.header-sep {
|
||||||
|
|
@ -912,15 +1023,16 @@ header .collapse {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* END Sidebar Left */
|
.close-icon {
|
||||||
|
font: normal 1em/1 Arial, sans-serif;
|
||||||
@media screen and (max-height: 450px) {
|
display: inline-block;
|
||||||
.sidenav-content {padding: 10px;}
|
|
||||||
.sidenav a {font-size: 18px;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@media only screen and (max-width: 768px) {*/
|
.close-icon:before{ content: "\2715"; }
|
||||||
@media only screen and (max-device-width: 768px) {
|
|
||||||
|
/* END Sidebar Left */
|
||||||
|
|
||||||
|
@media only screen and (max-device-width: 1024px) {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -934,18 +1046,19 @@ header .collapse {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav {
|
|
||||||
height: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.users-header {
|
|
||||||
height: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.collapse-video {
|
||||||
|
left: inherit;
|
||||||
|
right: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-chat {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||||
|
|
@ -975,6 +1088,7 @@ header .collapse {
|
||||||
|
|
||||||
.coln-right {
|
.coln-right {
|
||||||
flex: none;
|
flex: none;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
|
|
@ -1010,6 +1124,8 @@ header .collapse {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidenav a {padding: 10px 5px;}
|
||||||
|
|
||||||
.sidenav-header h2 {
|
.sidenav-header h2 {
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
103
static/sfu.html
103
static/sfu.html
|
|
@ -92,6 +92,9 @@
|
||||||
<div class="coln-left" id="left">
|
<div class="coln-left" id="left">
|
||||||
<div id="chat">
|
<div id="chat">
|
||||||
<div id="chatbox">
|
<div id="chatbox">
|
||||||
|
<div class="close-chat" id="close-chat">
|
||||||
|
<span class="close-icon"></span>
|
||||||
|
</div>
|
||||||
<div id="box"></div>
|
<div id="box"></div>
|
||||||
<div class="reply">
|
<div class="reply">
|
||||||
<form id="inputform">
|
<form id="inputform">
|
||||||
|
|
@ -114,7 +117,9 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-container no-video" id="video-container">
|
<div class="video-container no-video" id="video-container">
|
||||||
<div id="peers"></div>
|
<div id="expand-video" class="expand-video">
|
||||||
|
<div id="peers"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-container invisible" id="login-container">
|
<div class="login-container invisible" id="login-container">
|
||||||
<div class="login-box">
|
<div class="login-box">
|
||||||
|
|
@ -143,46 +148,76 @@
|
||||||
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
|
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidenav-content" id="optionsdiv">
|
<div class="sidenav-content" id="optionsdiv">
|
||||||
<div id="mediaoptions">
|
<div id="mediaoptions" class="invisible">
|
||||||
<label for="videoselect">Camera:</label>
|
<fieldset>
|
||||||
<select id="videoselect" class="select select-inline">
|
<legend>Media Options</legend>
|
||||||
<option value="">off</option>
|
<label for="videoselect" class="label-first">Camera:</label>
|
||||||
</select>
|
<select id="videoselect" class="select select-inline">
|
||||||
|
<option value="">off</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<label for="audioselect">Microphone:</label>
|
<label for="audioselect">Microphone:</label>
|
||||||
<select id="audioselect" class="select select-inline">
|
<select id="audioselect" class="select select-inline">
|
||||||
<option value="">off</option>
|
<option value="">off</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<input id="blackboardbox" type="checkbox">Blackboard mode</input>
|
<input id="blackboardbox" type="checkbox">Blackboard mode</input>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form>
|
|
||||||
<input id="studiobox" type="checkbox">Studio mode</input>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<input id="studiobox" type="checkbox">Studio mode</input>
|
||||||
|
</form>
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label for="sendselect">Send:</label>
|
<fieldset>
|
||||||
<select id="sendselect" class="select select-inline">
|
<legend>Others Settings</legend>
|
||||||
<option value="lowest">lowest</option>
|
<label for="sendselect" class="label-first">Send:</label>
|
||||||
<option value="low">low</option>
|
<select id="sendselect" class="select select-inline">
|
||||||
<option value="normal" selected>normal</option>
|
<option value="lowest">lowest</option>
|
||||||
<option value="unlimited">unlimited</option>
|
<option value="low">low</option>
|
||||||
</select>
|
<option value="normal" selected>normal</option>
|
||||||
|
<option value="unlimited">unlimited</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<label for="requestselect">Receive:</label>
|
<label for="requestselect">Receive:</label>
|
||||||
<select id="requestselect" class="select select-inline">
|
<select id="requestselect" class="select select-inline">
|
||||||
<option value="">nothing</option>
|
<option value="">nothing</option>
|
||||||
<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>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<input id="activitybox" type="checkbox">Activity detection</input>
|
<input id="activitybox" type="checkbox">Activity detection</input>
|
||||||
</form>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
209
static/sfu.js
209
static/sfu.js
|
|
@ -239,6 +239,11 @@ function hideVideo(force) {
|
||||||
return;
|
return;
|
||||||
let video_container = document.getElementById('video-container');
|
let video_container = document.getElementById('video-container');
|
||||||
video_container.classList.add('no-video');
|
video_container.classList.add('no-video');
|
||||||
|
let left = document.getElementById("left");
|
||||||
|
if (left.style.display !== "none") {
|
||||||
|
// hide all video buttons used to switch video on mobile layout
|
||||||
|
closeVideoControls();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeVideoControls() {
|
function closeVideoControls() {
|
||||||
|
|
@ -335,7 +340,9 @@ function setViewportHeight() {
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
'--vh', `${window.innerHeight/100}px`,
|
'--vh', `${window.innerHeight/100}px`,
|
||||||
);
|
);
|
||||||
};
|
// Ajust video component size
|
||||||
|
resizePeers();
|
||||||
|
}
|
||||||
setViewportHeight();
|
setViewportHeight();
|
||||||
|
|
||||||
// On resize and orientation change, we update viewport height
|
// On resize and orientation change, we update viewport height
|
||||||
|
|
@ -375,7 +382,7 @@ function setVisibility(id, visible) {
|
||||||
function setButtonsVisibility() {
|
function setButtonsVisibility() {
|
||||||
let permissions = serverConnection.permissions;
|
let permissions = serverConnection.permissions;
|
||||||
let local = !!findUpMedia('local');
|
let local = !!findUpMedia('local');
|
||||||
let share = !!findUpMedia('screenshare')
|
let share = !!findUpMedia('screenshare');
|
||||||
|
|
||||||
// don't allow multiple presentations
|
// don't allow multiple presentations
|
||||||
setVisibility('presentbutton', permissions.present && !local);
|
setVisibility('presentbutton', permissions.present && !local);
|
||||||
|
|
@ -383,7 +390,7 @@ function setButtonsVisibility() {
|
||||||
|
|
||||||
// allow multiple shared documents
|
// allow multiple shared documents
|
||||||
setVisibility('sharebutton', permissions.present &&
|
setVisibility('sharebutton', permissions.present &&
|
||||||
('getDisplayMedia' in navigator.mediaDevices))
|
('getDisplayMedia' in navigator.mediaDevices));
|
||||||
setVisibility('unsharebutton', share);
|
setVisibility('unsharebutton', share);
|
||||||
|
|
||||||
setVisibility('mediaoptions', permissions.present);
|
setVisibility('mediaoptions', permissions.present);
|
||||||
|
|
@ -455,6 +462,7 @@ document.getElementById('sharebutton').onclick = function(e) {
|
||||||
document.getElementById('unsharebutton').onclick = function(e) {
|
document.getElementById('unsharebutton').onclick = function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
delUpMediaKind('screenshare');
|
delUpMediaKind('screenshare');
|
||||||
|
resizePeers();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @returns {number} */
|
/** @returns {number} */
|
||||||
|
|
@ -741,15 +749,18 @@ async function setMaxVideoThroughput(c, bps) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {string} [id]
|
* @param {string} [id]
|
||||||
|
* @param {boolean} [disableVideo]
|
||||||
*/
|
*/
|
||||||
async function addLocalMedia(id) {
|
async function addLocalMedia(id, disableVideo) {
|
||||||
if(!getUserPass())
|
if(!getUserPass())
|
||||||
return;
|
return;
|
||||||
|
|
||||||
let settings = getSettings();
|
let settings = getSettings();
|
||||||
|
|
||||||
let audio = settings.audio ? {deviceId: settings.audio} : false;
|
let audio = settings.audio ? {deviceId: settings.audio} : false;
|
||||||
let video = settings.video ? {deviceId: settings.video} : false;
|
let video = false;
|
||||||
|
if (!disableVideo)
|
||||||
|
video = settings.video ? {deviceId: settings.video} : false;
|
||||||
|
|
||||||
if(audio) {
|
if(audio) {
|
||||||
if(settings.studioMode) {
|
if(settings.studioMode) {
|
||||||
|
|
@ -946,6 +957,14 @@ function muteLocalTracks(mute) {
|
||||||
*/
|
*/
|
||||||
function setMedia(c, isUp) {
|
function setMedia(c, isUp) {
|
||||||
let peersdiv = document.getElementById('peers');
|
let peersdiv = document.getElementById('peers');
|
||||||
|
let settings = getSettings();
|
||||||
|
let local_media;
|
||||||
|
|
||||||
|
for(let id in serverConnection.up) {
|
||||||
|
if (id === c.id) {
|
||||||
|
local_media = serverConnection.up[id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let div = document.getElementById('peer-' + c.id);
|
let div = document.getElementById('peer-' + c.id);
|
||||||
if(!div) {
|
if(!div) {
|
||||||
|
|
@ -964,7 +983,7 @@ function setMedia(c, isUp) {
|
||||||
media.autoplay = true;
|
media.autoplay = true;
|
||||||
/** @ts-ignore */
|
/** @ts-ignore */
|
||||||
media.playsinline = true;
|
media.playsinline = true;
|
||||||
media.controls = true;
|
media.controls = false;
|
||||||
if(isUp)
|
if(isUp)
|
||||||
media.muted = true;
|
media.muted = true;
|
||||||
div.appendChild(media);
|
div.appendChild(media);
|
||||||
|
|
@ -978,14 +997,134 @@ function setMedia(c, isUp) {
|
||||||
div.appendChild(label);
|
div.appendChild(label);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let template = document.getElementById('videocontrols-template')
|
||||||
|
.firstElementChild;
|
||||||
|
let top_template = document.getElementById('top-videocontrols-template')
|
||||||
|
.firstElementChild;
|
||||||
|
|
||||||
|
let top_controls = document.getElementById('topcontrols-' + c.id);
|
||||||
|
if (template && !top_controls) {
|
||||||
|
top_controls = top_template.cloneNode(true);
|
||||||
|
top_controls.id = 'topcontrols-' + c.id;
|
||||||
|
div.appendChild(top_controls);
|
||||||
|
}
|
||||||
|
let controls = document.getElementById('controls-' + c.id);
|
||||||
|
if (template && !controls) {
|
||||||
|
controls = template.cloneNode(true);
|
||||||
|
controls.id = 'controls-' + c.id;
|
||||||
|
div.appendChild(controls);
|
||||||
|
if(media.muted) {
|
||||||
|
let volume = controls.querySelector(".fa-volume-up");
|
||||||
|
if (volume) {
|
||||||
|
volume.classList.remove("fa-volume-up");
|
||||||
|
volume.classList.add("fa-volume-off");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let camera = controls.querySelector("span.camera");
|
||||||
|
if (local_media && local_media.kind === "local") {
|
||||||
|
if (!settings.video) {
|
||||||
|
if (camera)
|
||||||
|
camera.classList.add("camera-off");
|
||||||
|
}
|
||||||
|
} else
|
||||||
|
camera.remove();
|
||||||
|
}
|
||||||
|
|
||||||
media.srcObject = c.stream;
|
media.srcObject = c.stream;
|
||||||
setLabel(c);
|
setLabel(c);
|
||||||
setMediaStatus(c);
|
setMediaStatus(c);
|
||||||
|
|
||||||
showVideo();
|
showVideo();
|
||||||
resizePeers();
|
resizePeers();
|
||||||
|
registerControlEvent(div.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLVideoElement} video
|
||||||
|
*/
|
||||||
|
async function videoPIP(video) {
|
||||||
|
if (video.requestPictureInPicture) {
|
||||||
|
await video.requestPictureInPicture();
|
||||||
|
} else {
|
||||||
|
displayWarning("Video PIP Mode not supported!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} target
|
||||||
|
*/
|
||||||
|
function getParentVideo(target) {
|
||||||
|
// target is the <i> element, parent the div <div><span><i/></span></div>
|
||||||
|
let control = target.parentElement.parentElement;
|
||||||
|
let id = control.id.split('-')[1];
|
||||||
|
let media = /** @type {HTMLVideoElement} */
|
||||||
|
(document.getElementById('media-' + id));
|
||||||
|
if (!media) {
|
||||||
|
displayError("Cannot find media!");
|
||||||
|
}
|
||||||
|
return media;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} peerid
|
||||||
|
*/
|
||||||
|
function registerControlEvent(peerid) {
|
||||||
|
let settings = getSettings();
|
||||||
|
let peer = document.getElementById(peerid);
|
||||||
|
//Add event listener when a video component is added to the DOM
|
||||||
|
peer.querySelector("span.volume").onclick = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
let video = getParentVideo(event.target);
|
||||||
|
if (event.target.className.indexOf("fa-volume-off") !== -1) {
|
||||||
|
event.target.classList.remove("fa-volume-off");
|
||||||
|
event.target.classList.add("fa-volume-up");
|
||||||
|
video.muted = false;
|
||||||
|
} else {
|
||||||
|
event.target.classList.remove("fa-volume-up");
|
||||||
|
event.target.classList.add("fa-volume-off");
|
||||||
|
// mute video sound
|
||||||
|
video.muted = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
peer.querySelector("span.pip").onclick = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
let video = getParentVideo(event.target);
|
||||||
|
videoPIP(video);
|
||||||
|
};
|
||||||
|
|
||||||
|
peer.querySelector("span.fullscreen").onclick = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
let video = getParentVideo(event.target);
|
||||||
|
if (video.requestFullscreen) {
|
||||||
|
video.requestFullscreen();
|
||||||
|
} else {
|
||||||
|
displayWarning("Video Fullscreen not supported!");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let camera = peer.querySelector("span.camera");
|
||||||
|
if (camera) {
|
||||||
|
peer.querySelector("span.camera").onclick = function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
let video = getParentVideo(event.target);
|
||||||
|
let id = video.id.split("-")[1];
|
||||||
|
if (!settings.video)
|
||||||
|
return;
|
||||||
|
if (event.target.getAttribute("data-type") === "bt-camera") {
|
||||||
|
addLocalMedia(id, true);
|
||||||
|
event.target.setAttribute("data-type", "bt-camera-off");
|
||||||
|
event.target.parentElement.classList.add("disabled");
|
||||||
|
} else {
|
||||||
|
event.target.setAttribute("data-type", "bt-camera");
|
||||||
|
event.target.parentElement.classList.remove("disabled");
|
||||||
|
addLocalMedia(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {string} id
|
* @param {string} id
|
||||||
*/
|
*/
|
||||||
|
|
@ -1046,6 +1185,9 @@ function setLabel(c, fallback) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function resizePeers() {
|
function resizePeers() {
|
||||||
|
// Window resize can call this method too early
|
||||||
|
if (!serverConnection)
|
||||||
|
return;
|
||||||
let count =
|
let count =
|
||||||
Object.keys(serverConnection.up).length +
|
Object.keys(serverConnection.up).length +
|
||||||
Object.keys(serverConnection.down).length;
|
Object.keys(serverConnection.down).length;
|
||||||
|
|
@ -1054,24 +1196,29 @@ function resizePeers() {
|
||||||
if (!count)
|
if (!count)
|
||||||
// No video, nothing to resize.
|
// No video, nothing to resize.
|
||||||
return;
|
return;
|
||||||
let container = document.getElementById("video-container")
|
let container = document.getElementById("video-container");
|
||||||
// Peers div has total padding of 30px, we remove 30 on offsetHeight
|
// Peers div has total padding of 40px, we remove 40 on offsetHeight
|
||||||
let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
|
// Grid has row-gap of 5px
|
||||||
|
let rows = Math.ceil(count / columns);
|
||||||
|
let margins = (rows - 1) * 5 + 40;
|
||||||
|
|
||||||
let media_list = document.getElementsByClassName("media");
|
if (count <= 2 && container.offsetHeight > container.offsetWidth) {
|
||||||
|
peers.style['grid-template-columns'] = "repeat(1, 1fr)";
|
||||||
|
rows = count;
|
||||||
|
} else {
|
||||||
|
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
|
||||||
|
}
|
||||||
|
if (count === 1)
|
||||||
|
return;
|
||||||
|
let max_video_height = (peers.offsetHeight - margins) / rows;
|
||||||
|
let media_list = peers.querySelectorAll(".media");
|
||||||
for(let i = 0; i < media_list.length; i++) {
|
for(let i = 0; i < media_list.length; i++) {
|
||||||
let media = media_list[i];
|
let media = media_list[i];
|
||||||
if(!(media instanceof HTMLMediaElement)) {
|
if(!(media instanceof HTMLMediaElement)) {
|
||||||
console.warn('Unexpected media');
|
console.warn('Unexpected media');
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
media.style['max_height'] = max_video_height + "px";
|
media.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)`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1248,8 +1395,9 @@ function formatLines(lines) {
|
||||||
function formatTime(time) {
|
function formatTime(time) {
|
||||||
let delta = Date.now() - time;
|
let delta = Date.now() - time;
|
||||||
let date = new Date(time);
|
let date = new Date(time);
|
||||||
|
let m = date.getMinutes();
|
||||||
if(delta > -30000)
|
if(delta > -30000)
|
||||||
return date.toTimeString().slice(null, 8);
|
return date.getHours() + ':' + ((m < 10) ? '0' : '') + m;
|
||||||
return date.toLocaleString();
|
return date.toLocaleString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1277,6 +1425,8 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
|
||||||
let container = document.createElement('div');
|
let container = document.createElement('div');
|
||||||
container.classList.add('message');
|
container.classList.add('message');
|
||||||
row.appendChild(container);
|
row.appendChild(container);
|
||||||
|
let footer = document.createElement('p');
|
||||||
|
footer.classList.add('message-footer');
|
||||||
if(!peerId)
|
if(!peerId)
|
||||||
container.classList.add('message-system');
|
container.classList.add('message-system');
|
||||||
if(userpass.username === nick)
|
if(userpass.username === nick)
|
||||||
|
|
@ -1296,20 +1446,21 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
|
||||||
(nick || '(anon)');
|
(nick || '(anon)');
|
||||||
user.classList.add('message-user');
|
user.classList.add('message-user');
|
||||||
header.appendChild(user);
|
header.appendChild(user);
|
||||||
|
header.classList.add('message-header');
|
||||||
|
container.appendChild(header);
|
||||||
if(time) {
|
if(time) {
|
||||||
let tm = document.createElement('span');
|
let tm = document.createElement('span');
|
||||||
tm.textContent = formatTime(time);
|
tm.textContent = formatTime(time);
|
||||||
tm.classList.add('message-time');
|
tm.classList.add('message-time');
|
||||||
header.appendChild(tm);
|
header.appendChild(tm);
|
||||||
}
|
}
|
||||||
header.classList.add('message-header');
|
|
||||||
container.appendChild(header);
|
|
||||||
}
|
}
|
||||||
p.classList.add('message-content');
|
p.classList.add('message-content');
|
||||||
container.appendChild(p);
|
container.appendChild(p);
|
||||||
lastMessage.nick = (nick || null);
|
lastMessage.nick = (nick || null);
|
||||||
lastMessage.peerId = peerId;
|
lastMessage.peerId = peerId;
|
||||||
lastMessage.dest = (dest || null);
|
lastMessage.dest = (dest || null);
|
||||||
|
container.appendChild(footer);
|
||||||
} else {
|
} else {
|
||||||
let asterisk = document.createElement('span');
|
let asterisk = document.createElement('span');
|
||||||
asterisk.textContent = '*';
|
asterisk.textContent = '*';
|
||||||
|
|
@ -1540,6 +1691,11 @@ function chatResizer(e) {
|
||||||
|
|
||||||
function start_drag(e) {
|
function start_drag(e) {
|
||||||
let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
|
let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
|
||||||
|
// set min chat width to 300px
|
||||||
|
let min_left_width = 300 * 100 / full_width;
|
||||||
|
if (left_width < min_left_width) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
left.style.flex = left_width.toString();
|
left.style.flex = left_width.toString();
|
||||||
right.style.flex = (100 - left_width).toString();
|
right.style.flex = (100 - left_width).toString();
|
||||||
}
|
}
|
||||||
|
|
@ -1667,6 +1823,12 @@ document.getElementById('collapse-video').onclick = function(e) {
|
||||||
if(!(this instanceof HTMLElement))
|
if(!(this instanceof HTMLElement))
|
||||||
throw new Error('Unexpected type for this');
|
throw new Error('Unexpected type for this');
|
||||||
let width = window.innerWidth;
|
let width = window.innerWidth;
|
||||||
|
let left = document.getElementById("left");
|
||||||
|
if (left.style.display === "" || left.style.display === "none") {
|
||||||
|
//left chat is hidden, we show the chat and hide collapse button
|
||||||
|
left.style.display = "block";
|
||||||
|
this.style.display = "";
|
||||||
|
}
|
||||||
if (width <= 768) {
|
if (width <= 768) {
|
||||||
let user_box = document.getElementById('userDropdown');
|
let user_box = document.getElementById('userDropdown');
|
||||||
if (user_box.classList.contains("show")) {
|
if (user_box.classList.contains("show")) {
|
||||||
|
|
@ -1688,6 +1850,13 @@ document.getElementById('switch-video').onclick = function(e) {
|
||||||
document.getElementById('collapse-video').style.display = "block";
|
document.getElementById('collapse-video').style.display = "block";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
document.getElementById('close-chat').onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let left = document.getElementById("left");
|
||||||
|
left.style.display = "none";
|
||||||
|
document.getElementById('collapse-video').style.display = "block";
|
||||||
|
};
|
||||||
|
|
||||||
window.onclick = function(event) {
|
window.onclick = function(event) {
|
||||||
let user_box = document.getElementById('userDropdown');
|
let user_box = document.getElementById('userDropdown');
|
||||||
if (user_box.classList.contains("show") && event.target.id != "user") {
|
if (user_box.classList.contains("show") && event.target.id != "user") {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue