From 31deef47f588cc36849671b7feb5b8cb03f7d855 Mon Sep 17 00:00:00 2001 From: Alain Takoudjou Date: Wed, 7 Oct 2020 09:33:38 +0200 Subject: [PATCH] fix video resizing, add a button to close chat --- static/sfu.css | 80 +++++++++++++++++++++++++++++++++++++------------ static/sfu.html | 24 ++++++++++++--- static/sfu.js | 62 ++++++++++++++++++++++++++------------ 3 files changed, 124 insertions(+), 42 deletions(-) diff --git a/static/sfu.css b/static/sfu.css index 70aff2f..e811ef7 100644 --- a/static/sfu.css +++ b/static/sfu.css @@ -367,13 +367,13 @@ textarea.form-reply { } .collapse-video { - display: none; - /*on top of video peers*/ - z-index: 1002; - position: absolute; - top: 5px; - left: 10px; - cursor: pointer; + display: none; + /*on top of video peers*/ + z-index: 1002; + position: absolute; + top: 5px; + left: 10px; + cursor: pointer; } .collapse-video .open-chat { @@ -388,24 +388,30 @@ textarea.form-reply { display: none; } -.video-controls { +.video-controls, .top-video-controls { position: absolute; width: 100%; left: 0; - bottom: 40px; - text-align: right; + bottom: 25px; + text-align: center; color: #e1e1e1; - font-size: 1.8em; + font-size: 1.5em; transition: all .5s ease-out; 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; transition: all .7s ease-out; } -.video-controls span { +.video-controls span, .top-video-controls span { margin-right: 20px; transition: all .5s ease-out; opacity: .5; @@ -417,7 +423,7 @@ textarea.form-reply { /*margin-right: 0;*/ } -.video-controls span:hover { +.video-controls span:hover, .top-video-controls span:hover { opacity: 1; transition: opacity .5s ease-out; } @@ -462,7 +468,7 @@ textarea.form-reply { width: 100%; z-index: 1; text-align: center; - line-height: 25px; + line-height: 24px; color: #ffffff; } @@ -605,12 +611,13 @@ h1 { #chatbox { height: 100%; + position: relative; } #chat { padding: 0; margin: 0; - background-color: #f4f4f4; + background-color: #f8f8f8; background-size: cover; overflow-y: scroll; border: none; @@ -618,7 +625,7 @@ h1 { /* force to fill height */ height: 100% !important; width: 100%; - min-width: 200px; + min-width: 300px; overflow: hidden; } @@ -632,6 +639,24 @@ h1 { 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 { margin-left: 80px; margin-top: 15px; @@ -667,7 +692,7 @@ h1 { display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, auto); - row-gap: 0; + row-gap: 5px; column-gap: 10px; position: absolute; top: 0; @@ -680,6 +705,7 @@ h1 { z-index: 1000; background-size: cover; overflow: hidden; + vertical-align: top!important; } .peer { @@ -687,6 +713,7 @@ h1 { margin-bottom: auto; position: relative; border: 2px solid rgba(0,0,0,0); + background: #80808014; } .peer-active { @@ -695,7 +722,6 @@ h1 { .media { width: 100%; - min-width: 220px; /* min-size for controls buttons */ max-height: calc(var(--vh, 1vh) * 100 - 76px); padding-bottom: 20px; object-fit: contain; @@ -989,6 +1015,13 @@ header .collapse { margin-right: 5px; } +.close-icon { + font: normal 1em/1 Arial, sans-serif; + display: inline-block; +} + +.close-icon:before{ content: "\2715"; } + /* END Sidebar Left */ /*@media only screen and (max-width: 768px) {*/ @@ -1010,6 +1043,15 @@ header .collapse { height: calc(var(--vh, 1vh) * 100 - 56px); } + .collapse-video { + left: inherit; + right: 10px; + } + + .close-chat { + display: none; + } + .video-container { position: fixed; height: calc(var(--vh, 1vh) * 100 - 56px); diff --git a/static/sfu.html b/static/sfu.html index fc260bc..529c1dd 100644 --- a/static/sfu.html +++ b/static/sfu.html @@ -92,6 +92,9 @@
+
+ +
@@ -195,10 +198,23 @@ + + diff --git a/static/sfu.js b/static/sfu.js index 06b04b6..ac75be1 100644 --- a/static/sfu.js +++ b/static/sfu.js @@ -335,7 +335,9 @@ function setViewportHeight() { document.documentElement.style.setProperty( '--vh', `${window.innerHeight/100}px`, ); -}; + // Ajust video component size + resizePeers(); +} setViewportHeight(); // On resize and orientation change, we update viewport height @@ -375,7 +377,7 @@ function setVisibility(id, visible) { function setButtonsVisibility() { let permissions = serverConnection.permissions; let local = !!findUpMedia('local'); - let share = !!findUpMedia('screenshare') + let share = !!findUpMedia('screenshare'); // don't allow multiple presentations setVisibility('presentbutton', permissions.present && !local); @@ -383,7 +385,7 @@ function setButtonsVisibility() { // allow multiple shared documents setVisibility('sharebutton', permissions.present && - ('getDisplayMedia' in navigator.mediaDevices)) + ('getDisplayMedia' in navigator.mediaDevices)); setVisibility('unsharebutton', share); setVisibility('mediaoptions', permissions.present); @@ -967,7 +969,17 @@ function setMedia(c, isUp) { 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); if (template && !controls) { controls = template.cloneNode(true); @@ -1117,6 +1129,9 @@ function setLabel(c, fallback) { } function resizePeers() { + // Window resize can call this method too early + if (!serverConnection) + return; let count = Object.keys(serverConnection.up).length + Object.keys(serverConnection.down).length; @@ -1125,24 +1140,29 @@ function resizePeers() { if (!count) // No video, nothing to resize. return; - let container = document.getElementById("video-container") - // Peers div has total padding of 30px, we remove 30 on offsetHeight - let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns); + let container = document.getElementById("video-container"); + // Peers div has total padding of 40px, we remove 40 on offsetHeight + // 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++) { let media = media_list[i]; if(!(media instanceof HTMLMediaElement)) { console.warn('Unexpected media'); continue; } - 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)`; + media.style['max-height'] = max_video_height + "px"; } } @@ -1616,11 +1636,9 @@ 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; + // set min chat width to 300px + let min_left_width = 300 * 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(); @@ -1777,6 +1795,12 @@ document.getElementById('switch-video').onclick = function(e) { 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) { let user_box = document.getElementById('userDropdown'); if (user_box.classList.contains("show") && event.target.id != "user") {