mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-12 19:55:59 +01:00
Code Activity

fix video resizing, add a button to close chat

Browse source
This commit is contained in:
Alain Takoudjou 2020-10-07 09:33:38 +02:00
parent fc152d4377
commit 31deef47f5
3 changed files with 124 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
static/sfu.css
View file

@ -367,13 +367,13 @@ textarea.form-reply {
} }
.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: absolute; position: absolute;
top: 5px; top: 5px;
left: 10px; left: 10px;
cursor: pointer; cursor: pointer;
} }
.collapse-video .open-chat { .collapse-video .open-chat {
@ -388,24 +388,30 @@ textarea.form-reply {
display: none; display: none;
} }
.video-controls { .video-controls, .top-video-controls {
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
bottom: 40px; bottom: 25px;
text-align: right; text-align: center;
color: #e1e1e1; color: #e1e1e1;
font-size: 1.8em; font-size: 1.5em;
transition: all .5s ease-out; transition: all .5s ease-out;
opacity: 0; opacity: 0;
} }
.peer:hover > .video-controls { .top-video-controls {
text-align: right;
bottom: inherit;
top: 0;
}
.peer:hover > .video-controls, .peer:hover > .top-video-controls {
opacity: 1; opacity: 1;
transition: all .7s ease-out; transition: all .7s ease-out;
} }
.video-controls span { .video-controls span, .top-video-controls span {
margin-right: 20px; margin-right: 20px;
transition: all .5s ease-out; transition: all .5s ease-out;
opacity: .5; opacity: .5;
@ -417,7 +423,7 @@ textarea.form-reply {
/*margin-right: 0;*/ /*margin-right: 0;*/
} }
.video-controls span:hover { .video-controls span:hover, .top-video-controls span:hover {
opacity: 1; opacity: 1;
transition: opacity .5s ease-out; transition: opacity .5s ease-out;
} }
@ -462,7 +468,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;
} }
@ -605,12 +611,13 @@ h1 {
#chatbox { #chatbox {
height: 100%; height: 100%;
position: relative;
} }
#chat { #chat {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #f4f4f4; background-color: #f8f8f8;
background-size: cover; background-size: cover;
overflow-y: scroll; overflow-y: scroll;
border: none; border: none;
@ -618,7 +625,7 @@ h1 {
/* force to fill height */ /* force to fill height */
height: 100% !important; height: 100% !important;
width: 100%; width: 100%;
min-width: 200px; min-width: 300px;
overflow: hidden; overflow: hidden;
} }
@ -632,6 +639,24 @@ h1 {
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;
@ -667,7 +692,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;
@ -680,6 +705,7 @@ h1 {
z-index: 1000; z-index: 1000;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
vertical-align: top!important;
} }
.peer { .peer {
@ -687,6 +713,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 {
@ -695,7 +722,6 @@ h1 {
.media { .media {
width: 100%; width: 100%;
min-width: 220px; /* min-size for controls buttons */
max-height: calc(var(--vh, 1vh) * 100 - 76px); max-height: calc(var(--vh, 1vh) * 100 - 76px);
padding-bottom: 20px; padding-bottom: 20px;
object-fit: contain; object-fit: contain;
@ -989,6 +1015,13 @@ header .collapse {
margin-right: 5px; margin-right: 5px;
} }
.close-icon {
font: normal 1em/1 Arial, sans-serif;
display: inline-block;
}
.close-icon:before{ content: "\2715"; }
/* END Sidebar Left */ /* END Sidebar Left */
/*@media only screen and (max-width: 768px) {*/ /*@media only screen and (max-width: 768px) {*/
@ -1010,6 +1043,15 @@ header .collapse {
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
} }
.collapse-video {
left: inherit;
right: 10px;
}
.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);

24
static/sfu.html
View file

@ -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">
@ -195,10 +198,23 @@
<div id="videocontrols-template" class="invisible"> <div id="videocontrols-template" class="invisible">
<div class="video-controls"> <div class="video-controls">
<span class="volume"><i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i></span> <span class="volume" title="Volume">
<span class="pip"><i class="fa fa-clone" data-type="bt-pip" aria-hidden="true"></i></span> <i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
<span class="expand"><i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i></span> </span>
<span class="fullscreen"><i class="fa fa-expand" data-type="bt-fullscreen" 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" title="Maximize">
<i class="fa fa-external-link" data-type="bt-expand" aria-hidden="true"></i>
</span>
</div> </div>
</div> </div>

62
static/sfu.js
View file

@ -335,7 +335,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 +377,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 +385,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);
@ -967,7 +969,17 @@ function setMedia(c, isUp) {
div.appendChild(label); div.appendChild(label);
} }
let template = document.getElementById('videocontrols-template').firstElementChild; let template = document.getElementById('videocontrols-template')
.firstElementChild;
let top_template = document.getElementById('top-videocontrols-template')
.firstElementChild;
let top_controls = document.getElementById('top-controls-' + c.id);
if (template && !top_controls) {
top_controls = top_template.cloneNode(true);
top_controls.id = 'top-controls-' + c.id;
div.appendChild(top_controls);
}
let controls = document.getElementById('controls-' + c.id); let controls = document.getElementById('controls-' + c.id);
if (template && !controls) { if (template && !controls) {
controls = template.cloneNode(true); controls = template.cloneNode(true);
@ -1117,6 +1129,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;
@ -1125,24 +1140,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 margins = (columns - 1) * 5 + 40;
let rows = Math.ceil(count / columns);
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 (rows === 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)`;
} }
} }
@ -1616,11 +1636,9 @@ 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 200px // set min chat width to 300px
let min_left_width = 200 * 100 / full_width; let min_left_width = 300 * 100 / full_width;
if (left_width < min_left_width) { if (left_width < min_left_width) {
left.style.display = "none";
document.getElementById('collapse-video').style.display = "block";
return; return;
} }
left.style.flex = left_width.toString(); left.style.flex = left_width.toString();
@ -1777,6 +1795,12 @@ 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();
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") {