From fc152d43775671e16f3a45662c9a8cb79a6e5637 Mon Sep 17 00:00:00 2001 From: Alain Takoudjou Date: Mon, 5 Oct 2020 11:15:31 +0200 Subject: [PATCH] allow to hide chat, improve settings bar and others --- static/sfu.css | 79 +++++++++++++++++++++++++++-------------- static/sfu.html | 88 +++++++++++++++++++++++++--------------------- static/sfu.js | 93 ++++++++++++++++++++++++++++--------------------- 3 files changed, 154 insertions(+), 106 deletions(-) diff --git a/static/sfu.css b/static/sfu.css index 56a6118..70aff2f 100644 --- a/static/sfu.css +++ b/static/sfu.css @@ -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 { diff --git a/static/sfu.html b/static/sfu.html index 68daf80..fc260bc 100644 --- a/static/sfu.html +++ b/static/sfu.html @@ -114,7 +114,9 @@
-
+
+
+
diff --git a/static/sfu.js b/static/sfu.js index 794615c..06b04b6 100644 --- a/static/sfu.js +++ b/static/sfu.js @@ -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")) {