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

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

Browse source
This commit is contained in:
Juliusz Chroboczek 2020-11-08 14:06:05 +01:00
commit 3c57cc772e
3 changed files with 428 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

212
static/sfu.css
View file

@ -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;
} }

43
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">
@ -114,8 +117,10 @@
</svg> </svg>
</div> </div>
<div class="video-container no-video" id="video-container"> <div class="video-container no-video" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div> <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">
<form id="userform" class="userform"> <form id="userform" class="userform">
@ -143,8 +148,10 @@
<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>
<legend>Media Options</legend>
<label for="videoselect" class="label-first">Camera:</label>
<select id="videoselect" class="select select-inline"> <select id="videoselect" class="select select-inline">
<option value="">off</option> <option value="">off</option>
</select> </select>
@ -161,10 +168,12 @@
<form> <form>
<input id="studiobox" type="checkbox">Studio mode</input> <input id="studiobox" type="checkbox">Studio mode</input>
</form> </form>
</fieldset>
</div> </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"> <select id="sendselect" class="select select-inline">
<option value="lowest">lowest</option> <option value="lowest">lowest</option>
<option value="low">low</option> <option value="low">low</option>
@ -183,6 +192,32 @@
<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
View file

@ -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") {