Skip to content

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

allow to hide chat, improve settings bar and others

parent fa694e67
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 103 deletions
static/sfu.css
View file @ fc152d43
......@@ -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 */
......@@ -277,7 +282,6 @@ textarea.form-reply {
.select-inline {
display: inline-block;
width: inherit;
}
.message {
......@@ -291,10 +295,11 @@ textarea.form-reply {
display: inline-block;
margin: 1em 0 0;
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;
}
......@@ -350,17 +364,16 @@ textarea.form-reply {
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,12 +381,11 @@ textarea.form-reply {
height: 60px;
fill: #fff;
padding: 10px;
fill: #b8b8b8;
}
.no-video {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
.video-controls {
......@@ -381,9 +393,9 @@ textarea.form-reply {
width: 100%;
left: 0;
bottom: 40px;
text-align: center;
text-align: right;
color: #e1e1e1;
font-size: 2.3em;
font-size: 1.8em;
transition: all .5s ease-out;
opacity: 0;
}
......@@ -394,7 +406,7 @@ textarea.form-reply {
}
.video-controls span {
margin-right: 30px;
margin-right: 20px;
transition: all .5s ease-out;
opacity: .5;
cursor: pointer;
......@@ -402,7 +414,7 @@ textarea.form-reply {
}
.video-controls span:last-child {
margin-right: 0;
/*margin-right: 0;*/
}
.video-controls span:hover {
......@@ -411,7 +423,7 @@ textarea.form-reply {
}
.video-controls .volume {
width: 44px;
width: 25px;
display: inline-block;
text-align: center;
}
......@@ -598,14 +610,15 @@ h1 {
#chat {
padding: 0;
margin: 0;
background-color: #f9f9f9;
background-color: #f4f4f4;
background-size: cover;
overflow-y: scroll;
border: none;
border-right: 4px solid #e6e6e6;
/* force to fill height */
height: 100% !important;
min-width: 300px;
width: 100%;
min-width: 200px;
overflow: hidden;
}
......@@ -740,6 +753,10 @@ h1 {
margin-top: 15px;
}
.sidenav .label-first {
margin-top: 0;
}
.sidenav form{
display: block;
margin-top: 15px;
......@@ -758,7 +775,7 @@ h1 {
}
.sidenav-content {
padding: 20px;
padding: 10px;
background: #fff;
height: 100%;
}
......@@ -767,6 +784,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;
......@@ -828,7 +857,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);
......@@ -962,11 +991,6 @@ header .collapse {
/* 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: 768px) {
.nav-link {
......@@ -1019,6 +1043,7 @@ header .collapse {
.coln-right {
flex: none;
position: relative;
}
.full-width {
......
static/sfu.html
View file @ fc152d43
......@@ -114,7 +114,9 @@
</svg>
</div>
<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 class="login-container invisible" id="login-container">
<div class="login-box">
......@@ -143,46 +145,51 @@
<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>
<select id="videoselect" class="select select-inline">
<option value="">off</option>
</select>
<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>
<label for="audioselect">Microphone:</label>
<select id="audioselect" class="select select-inline">
<option value="">off</option>
</select>
<form>
<input id="blackboardbox" type="checkbox">Blackboard mode</input>
</form>
<form>
<input id="studiobox" type="checkbox">Studio mode</input>
</form>
</fieldset>
</div>
<label for="audioselect">Microphone:</label>
<select id="audioselect" class="select select-inline">
<option value="">off</option>
<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>
<option value="normal" selected>normal</option>
<option value="unlimited">unlimited</option>
</select>
<form>
<input id="blackboardbox" type="checkbox">Blackboard mode</input>
</form>
<label for="requestselect">Receive:</label>
<select id="requestselect" class="select select-inline">
<option value="">nothing</option>
<option value="audio">audio only</option>
<option value="screenshare">screen share</option>
<option value="everything" selected>everything</option>
</select>
<form>
<input id="studiobox" type="checkbox">Studio mode</input>
<input id="activitybox" type="checkbox">Activity detection</input>
</form>
</div>
<label for="sendselect">Send:</label>
<select id="sendselect" class="select select-inline">
<option value="lowest">lowest</option>
<option value="low">low</option>
<option value="normal" selected>normal</option>
<option value="unlimited">unlimited</option>
</select>
<label for="requestselect">Receive:</label>
<select id="requestselect" class="select select-inline">
<option value="">nothing</option>
<option value="audio">audio only</option>
<option value="screenshare">screen share</option>
<option value="everything" selected>everything</option>
</select>
<form>
<input id="activitybox" type="checkbox">Activity detection</input>
</form>
</fieldset>
</div>
</div>
......@@ -190,7 +197,8 @@
<div class="video-controls">
<span class="volume"><i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i></span>
<span class="pip"><i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i></span>
<span class="fullscreen"><i class="fa fa-arrows-alt" data-type="bt-fullscreen" aria-hidden="true"></i></span>
<span class="expand"><i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i></span>
<span class="fullscreen"><i class="fa fa-expand" data-type="bt-fullscreen" aria-hidden="true"></i></span>
</div>
</div>
......
static/sfu.js
View file @ fc152d43
......@@ -1012,7 +1012,7 @@ function getParentVideo(target) {
let media = /** @type {HTMLVideoElement} */
(document.getElementById('media-' + hash));
if (!media) {
displayWarning("Cannot find media!");
displayError("Cannot find media!");
}
return media;
}
......@@ -1022,41 +1022,38 @@ function getParentVideo(target) {
*/
function registerControlEvent(peerid) {
let peer = document.getElementById(peerid);
let control_list = peer.querySelectorAll("span");
//Add event listener when a video component is added to the DOM
peer.querySelector("span.volume").onclick = function(event) {
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) {
let video = getParentVideo(event.target);
videoPIP(video);
};
function control_event(event) {
event.preventDefault();
let control_type = event.target.getAttribute("data-type");
peer.querySelector("span.fullscreen").onclick = function(event) {
let video = getParentVideo(event.target);
switch (control_type) {
case "bt-volume":
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;
}
break;
case "bt-pip":
videoPIP(video);
break;
case "bt-fullscreen":
if (video.requestFullscreen) {
video.requestFullscreen();
} else {
displayWarning("Video Fullscreen not supported!");
}
break;
if (video.requestFullscreen) {
video.requestFullscreen();
} else {
displayWarning("Video Fullscreen not supported!");
}
}
};
for (let i = 0; i < control_list.length; i += 1) {
control_list[i].onclick = control_event;
}
peer.querySelector("span.expand").onclick = function(event) {
console.log("Not implemented for now!!");
};
}
......@@ -1370,12 +1367,6 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
(nick || '(anon)');
user.classList.add('message-user');
header.appendChild(user);
if(time) {
let tm = document.createElement('span');
tm.textContent = formatTime(time);
tm.classList.add('message-time');
header.appendChild(tm);
}
header.classList.add('message-header');
container.appendChild(header);
}
......@@ -1403,6 +1394,17 @@ function addToChatbox(peerId, dest, nick, time, kind, message) {
lastMessage = {};
}
if(time) {
let tm = document.createElement('span');
let datetime = new Date(time);
tm.textContent = datetime.getHours() + ':' + datetime.getMinutes();
tm.classList.add('message-time');
let footer = document.createElement('p');
footer.classList.add('message-footer');
footer.appendChild(tm);
container.appendChild(footer);
}
let box = document.getElementById('box');
box.appendChild(row);
if(box.scrollHeight > box.clientHeight) {
......@@ -1614,6 +1616,13 @@ function chatResizer(e) {
function start_drag(e) {
let left_width = (start_width + e.clientX - start_x) * 100 / full_width;
// set min chat width to 200px
let min_left_width = 200 * 100 / full_width;
if (left_width < min_left_width) {
left.style.display = "none";
document.getElementById('collapse-video').style.display = "block";
return;
}
left.style.flex = left_width.toString();
right.style.flex = (100 - left_width).toString();
}
......@@ -1741,6 +1750,12 @@ document.getElementById('collapse-video').onclick = function(e) {
if(!(this instanceof HTMLElement))
throw new Error('Unexpected type for this');
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) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
......
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