mirror of
https://github.com/jech/galene.git
synced 2024-11-10 02:35: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:
parent
45558f3e88
commit
637e280dec
3 changed files with 57 additions and 60 deletions
|
@ -434,8 +434,8 @@ textarea.form-reply {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.collapse-video {
|
||||
display: none;
|
||||
.chat-btn {
|
||||
display: block;
|
||||
/*on top of video peers*/
|
||||
z-index: 1002;
|
||||
font-size: 1.8em;
|
||||
|
@ -445,15 +445,16 @@ textarea.form-reply {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse-video .open-chat {
|
||||
.chat-btn .icon-chat {
|
||||
color: #cac7c7;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
text-shadow: 0px 0px 1px #b3adad;
|
||||
}
|
||||
|
||||
.no-video {
|
||||
display: none;
|
||||
.collapse-video {
|
||||
left: inherit;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.video-controls, .top-video-controls {
|
||||
|
@ -1000,7 +1001,6 @@ legend {
|
|||
|
||||
.show-video {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 30px;
|
||||
bottom: 120px;
|
||||
color: white;
|
||||
|
@ -1188,7 +1188,13 @@ header .collapse {
|
|||
|
||||
/* 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 {
|
||||
width: auto;
|
||||
}
|
||||
|
@ -1214,12 +1220,7 @@ header .collapse {
|
|||
height: calc(var(--vh, 1vh) * 100 - 56px);
|
||||
}
|
||||
|
||||
.collapse-video {
|
||||
left: inherit;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.close-chat {
|
||||
.close-chat, .show-chat {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -1248,6 +1249,8 @@ header .collapse {
|
|||
.coln-left {
|
||||
flex: 100%;
|
||||
width: 100vw;
|
||||
/* chat is always visible here */
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.coln-right {
|
||||
|
|
|
@ -99,13 +99,16 @@
|
|||
</div>
|
||||
<div id="resizer"></div>
|
||||
<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>
|
||||
</span>
|
||||
<div class="collapse-video" id="collapse-video">
|
||||
<i class="far fa-comment-alt open-chat" title="Open chat"></i>
|
||||
<div class="chat-btn show-chat invisible" id="show-chat">
|
||||
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
|
||||
</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="peers"></div>
|
||||
</div>
|
||||
|
|
|
@ -259,12 +259,9 @@ function reflectSettings() {
|
|||
storeSettings(settings);
|
||||
}
|
||||
|
||||
function showVideo() {
|
||||
function isMobileLayout() {
|
||||
let width = window.innerWidth;
|
||||
let video_container = document.getElementById('video-container');
|
||||
video_container.classList.remove('no-video');
|
||||
if (width <= mobileViewportWidth)
|
||||
document.getElementById('collapse-video').style.display = "block";
|
||||
return width <= mobileViewportWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -274,19 +271,16 @@ function hideVideo(force) {
|
|||
let mediadiv = document.getElementById('peers');
|
||||
if(mediadiv.childElementCount > 0 && !force)
|
||||
return;
|
||||
let video_container = document.getElementById('video-container');
|
||||
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();
|
||||
}
|
||||
setVisibility('video-container', false);
|
||||
}
|
||||
|
||||
function closeVideoControls() {
|
||||
// hide all video buttons used to switch video on mobile layout
|
||||
document.getElementById('switch-video').style.display = "";
|
||||
document.getElementById('collapse-video').style.display = "";
|
||||
function showVideo() {
|
||||
let hasmedia = document.getElementById('peers').childElementCount > 0;
|
||||
if(isMobileLayout()) {
|
||||
setVisibility('show-video', false);
|
||||
setVisibility('collapse-video', hasmedia);
|
||||
}
|
||||
setVisibility('video-container', hasmedia);
|
||||
}
|
||||
|
||||
function fillLogin() {
|
||||
|
@ -316,7 +310,6 @@ function setConnected(connected) {
|
|||
connectionbox.classList.remove('invisible');
|
||||
displayError('Disconnected', 'error');
|
||||
hideVideo();
|
||||
closeVideoControls();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -379,6 +372,7 @@ function setViewportHeight() {
|
|||
document.documentElement.style.setProperty(
|
||||
'--vh', `${window.innerHeight/100}px`,
|
||||
);
|
||||
showVideo();
|
||||
// Ajust video component size
|
||||
resizePeers();
|
||||
}
|
||||
|
@ -441,6 +435,8 @@ function setButtonsVisibility() {
|
|||
!!HTMLVideoElement.prototype.captureStream ||
|
||||
/** @ts-ignore */
|
||||
!!HTMLVideoElement.prototype.mozCaptureStream;
|
||||
let mediacount = document.getElementById('peers').childElementCount;
|
||||
let mobilelayout = isMobileLayout();
|
||||
|
||||
// don't allow multiple presentations
|
||||
setVisibility('presentbutton', canWebrtc && permissions.present && !local);
|
||||
|
@ -458,6 +454,8 @@ function setButtonsVisibility() {
|
|||
setVisibility('mediaoptions', permissions.present);
|
||||
setVisibility('sendform', 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) {
|
||||
e.preventDefault();
|
||||
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 <= mobileViewportWidth) {
|
||||
// fixed div for small screen
|
||||
this.style.display = "";
|
||||
setVisibility('collapse-video', false);
|
||||
setVisibility('show-video', true);
|
||||
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();
|
||||
if(!(this instanceof HTMLElement))
|
||||
throw new Error('Unexpected type for this');
|
||||
showVideo();
|
||||
this.style.display = "";
|
||||
document.getElementById('collapse-video').style.display = "block";
|
||||
setVisibility('video-container', true);
|
||||
setVisibility('collapse-video', true);
|
||||
setVisibility('show-video', false);
|
||||
};
|
||||
|
||||
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";
|
||||
setVisibility('left', false);
|
||||
setVisibility('show-chat', true);
|
||||
resizePeers();
|
||||
};
|
||||
|
||||
document.getElementById('show-chat').onclick = function(e) {
|
||||
e.preventDefault();
|
||||
setVisibility('left', true);
|
||||
setVisibility('show-chat', false);
|
||||
resizePeers();
|
||||
};
|
||||
|
||||
async function serverConnect() {
|
||||
|
|
Loading…
Reference in a new issue