1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-22 16:45:58 +01:00

Fix show/hide video and chat box for mobile and normal UI

Uses less javascript to update css style, rework buttons css for show/hide video and chat.
Fix show or hide video button on normal or mobile ui when windows is resized or when orientation change.
This commit is contained in:
Alain Takoudjou 2021-03-26 20:18:20 +01:00 committed by Juliusz Chroboczek
parent 45558f3e88
commit 637e280dec
3 changed files with 57 additions and 60 deletions

View file

@ -434,8 +434,8 @@ textarea.form-reply {
display: block; display: block;
} }
.collapse-video { .chat-btn {
display: none; display: block;
/*on top of video peers*/ /*on top of video peers*/
z-index: 1002; z-index: 1002;
font-size: 1.8em; font-size: 1.8em;
@ -445,15 +445,16 @@ textarea.form-reply {
cursor: pointer; cursor: pointer;
} }
.collapse-video .open-chat { .chat-btn .icon-chat {
color: #cac7c7; color: #cac7c7;
height: 50px; height: 50px;
padding: 10px; padding: 10px;
text-shadow: 0px 0px 1px #b3adad; text-shadow: 0px 0px 1px #b3adad;
} }
.no-video { .collapse-video {
display: none; left: inherit;
right: 30px;
} }
.video-controls, .top-video-controls { .video-controls, .top-video-controls {
@ -1000,7 +1001,6 @@ legend {
.show-video { .show-video {
position: absolute; position: absolute;
display: none;
right: 30px; right: 30px;
bottom: 120px; bottom: 120px;
color: white; color: white;
@ -1188,7 +1188,13 @@ header .collapse {
/* END Sidebar Left */ /* END Sidebar Left */
@media only screen and (max-device-width: 1024px) { @media only screen and (min-width: 1025px) {
.coln-right .collapse-video, .coln-right .show-video {
display: none;
}
}
@media only screen and (max-width: 1024px) {
#presentbutton, #unpresentbutton { #presentbutton, #unpresentbutton {
width: auto; width: auto;
} }
@ -1214,12 +1220,7 @@ header .collapse {
height: calc(var(--vh, 1vh) * 100 - 56px); height: calc(var(--vh, 1vh) * 100 - 56px);
} }
.collapse-video { .close-chat, .show-chat {
left: inherit;
right: 60px;
}
.close-chat {
display: none; display: none;
} }
@ -1248,6 +1249,8 @@ header .collapse {
.coln-left { .coln-left {
flex: 100%; flex: 100%;
width: 100vw; width: 100vw;
/* chat is always visible here */
display: block !important;
} }
.coln-right { .coln-right {

View file

@ -99,13 +99,16 @@
</div> </div>
<div id="resizer"></div> <div id="resizer"></div>
<div class="coln-right" id="right"> <div class="coln-right" id="right">
<span class="show-video blink" id="switch-video"> <span class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i> <i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span> </span>
<div class="collapse-video" id="collapse-video"> <div class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt open-chat" title="Open chat"></i> <i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</div> </div>
<div class="video-container no-video" id="video-container"> <div class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
<div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video"> <div id="expand-video" class="expand-video">
<div id="peers"></div> <div id="peers"></div>
</div> </div>

View file

@ -259,12 +259,9 @@ function reflectSettings() {
storeSettings(settings); storeSettings(settings);
} }
function showVideo() { function isMobileLayout() {
let width = window.innerWidth; let width = window.innerWidth;
let video_container = document.getElementById('video-container'); return width <= mobileViewportWidth;
video_container.classList.remove('no-video');
if (width <= mobileViewportWidth)
document.getElementById('collapse-video').style.display = "block";
} }
/** /**
@ -274,19 +271,16 @@ function hideVideo(force) {
let mediadiv = document.getElementById('peers'); let mediadiv = document.getElementById('peers');
if(mediadiv.childElementCount > 0 && !force) if(mediadiv.childElementCount > 0 && !force)
return; return;
let video_container = document.getElementById('video-container'); setVisibility('video-container', false);
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 showVideo() {
// hide all video buttons used to switch video on mobile layout let hasmedia = document.getElementById('peers').childElementCount > 0;
document.getElementById('switch-video').style.display = ""; if(isMobileLayout()) {
document.getElementById('collapse-video').style.display = ""; setVisibility('show-video', false);
setVisibility('collapse-video', hasmedia);
}
setVisibility('video-container', hasmedia);
} }
function fillLogin() { function fillLogin() {
@ -316,7 +310,6 @@ function setConnected(connected) {
connectionbox.classList.remove('invisible'); connectionbox.classList.remove('invisible');
displayError('Disconnected', 'error'); displayError('Disconnected', 'error');
hideVideo(); hideVideo();
closeVideoControls();
} }
} }
@ -379,6 +372,7 @@ function setViewportHeight() {
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--vh', `${window.innerHeight/100}px`, '--vh', `${window.innerHeight/100}px`,
); );
showVideo();
// Ajust video component size // Ajust video component size
resizePeers(); resizePeers();
} }
@ -441,6 +435,8 @@ function setButtonsVisibility() {
!!HTMLVideoElement.prototype.captureStream || !!HTMLVideoElement.prototype.captureStream ||
/** @ts-ignore */ /** @ts-ignore */
!!HTMLVideoElement.prototype.mozCaptureStream; !!HTMLVideoElement.prototype.mozCaptureStream;
let mediacount = document.getElementById('peers').childElementCount;
let mobilelayout = isMobileLayout();
// don't allow multiple presentations // don't allow multiple presentations
setVisibility('presentbutton', canWebrtc && permissions.present && !local); setVisibility('presentbutton', canWebrtc && permissions.present && !local);
@ -458,6 +454,8 @@ function setButtonsVisibility() {
setVisibility('mediaoptions', permissions.present); setVisibility('mediaoptions', permissions.present);
setVisibility('sendform', permissions.present); setVisibility('sendform', permissions.present);
setVisibility('fileform', canFile && permissions.present); setVisibility('fileform', canFile && permissions.present);
setVisibility('collapse-video', mediacount && mobilelayout);
} }
/** /**
@ -2664,37 +2662,30 @@ document.getElementById('clodeside').onclick = function(e) {
document.getElementById('collapse-video').onclick = function(e) { document.getElementById('collapse-video').onclick = function(e) {
e.preventDefault(); e.preventDefault();
if(!(this instanceof HTMLElement)) setVisibility('collapse-video', false);
throw new Error('Unexpected type for this'); setVisibility('show-video', true);
let width = window.innerWidth; hideVideo(true);
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 <= mobileViewportWidth) {
// fixed div for small screen
this.style.display = "";
hideVideo(true);
document.getElementById('switch-video').style.display = "block";
}
}; };
document.getElementById('switch-video').onclick = function(e) { document.getElementById('show-video').onclick = function(e) {
e.preventDefault(); e.preventDefault();
if(!(this instanceof HTMLElement)) setVisibility('video-container', true);
throw new Error('Unexpected type for this'); setVisibility('collapse-video', true);
showVideo(); setVisibility('show-video', false);
this.style.display = "";
document.getElementById('collapse-video').style.display = "block";
}; };
document.getElementById('close-chat').onclick = function(e) { document.getElementById('close-chat').onclick = function(e) {
e.preventDefault(); e.preventDefault();
let left = document.getElementById("left"); setVisibility('left', false);
left.style.display = "none"; setVisibility('show-chat', true);
document.getElementById('collapse-video').style.display = "block"; resizePeers();
};
document.getElementById('show-chat').onclick = function(e) {
e.preventDefault();
setVisibility('left', true);
setVisibility('show-chat', false);
resizePeers();
}; };
async function serverConnect() { async function serverConnect() {