mirror of
https://github.com/jech/galene.git
synced 2024-11-09 18:25:58 +01:00
allow to hide chat, improve settings bar and others
This commit is contained in:
Alain Takoudjou
parent
fa694e67bf
commit
fc152d4377
3 changed files with 154 additions and 106 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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="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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
function control_event(event) {
|
||||
event.preventDefault();
|
||||
let control_type = event.target.getAttribute("data-type");
|
||||
//Add event listener when a video component is added to the DOM
|
||||
peer.querySelector("span.volume").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 (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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (let i = 0; i < control_list.length; i += 1) {
|
||||
control_list[i].onclick = control_event;
|
||||
}
|
||||
peer.querySelector("span.pip").onclick = function(event) {
|
||||
let video = getParentVideo(event.target);
|
||||
videoPIP(video);
|
||||
};
|
||||
|
||||
peer.querySelector("span.fullscreen").onclick = function(event) {
|
||||
let video = getParentVideo(event.target);
|
||||
if (video.requestFullscreen) {
|
||||
video.requestFullscreen();
|
||||
} else {
|
||||
displayWarning("Video Fullscreen not supported!");
|
||||
}
|
||||
};
|
||||
|
||||
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")) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue