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:
parent
45558f3e88
commit
637e280dec
3 changed files with 57 additions and 60 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue