mirror of
https://github.com/jech/galene.git
synced 2024-11-21 16:15:57 +01:00
Implement caption support in the client.
This commit is contained in:
parent
19983a7056
commit
a9e269e979
3 changed files with 61 additions and 1 deletions
|
@ -1328,6 +1328,26 @@ header .collapse:hover {
|
|||
|
||||
}
|
||||
|
||||
#captions-container {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1390;
|
||||
alpha: 0;
|
||||
}
|
||||
|
||||
#captions {
|
||||
margin: auto;
|
||||
padding: 0 0.4rem 0 0.4rem;
|
||||
width: max-content;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
background-color: rgba(255,255,255,.7);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:root{
|
||||
--contextualMenuBg: #eee;
|
||||
--contextualMenuShadow: 1px 1px 1px #444; */
|
||||
|
|
|
@ -99,6 +99,9 @@
|
|||
<div id="peers"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="captions-container" class="invisible">
|
||||
<div id="captions"></div>
|
||||
</div>
|
||||
<div class="login-container invisible" id="login-container">
|
||||
<div class="login-box">
|
||||
<form id="loginform" class="loginform">
|
||||
|
|
|
@ -2962,6 +2962,11 @@ let lastMessage = {};
|
|||
* @param {string|HTMLElement} message
|
||||
*/
|
||||
function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, message) {
|
||||
if(kind === 'caption') {
|
||||
displayCaption(message);
|
||||
return;
|
||||
}
|
||||
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('message-row');
|
||||
let container = document.createElement('div');
|
||||
|
@ -3063,7 +3068,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
|
|||
box.scrollTop = box.scrollHeight - box.clientHeight;
|
||||
}
|
||||
|
||||
return message;
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -3108,6 +3113,38 @@ function chatMessageMenu(elt) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string|HTMLElement} message
|
||||
*/
|
||||
function setCaption(message) {
|
||||
let container = document.getElementById('captions-container');
|
||||
let captions = document.getElementById('captions');
|
||||
if(!message) {
|
||||
captions.replaceChildren();
|
||||
container.classList.add('invisible');
|
||||
} else {
|
||||
if(message instanceof HTMLElement)
|
||||
captions.replaceChildren(message);
|
||||
else
|
||||
captions.textContent = message;
|
||||
container.classList.remove('invisible');
|
||||
}
|
||||
}
|
||||
|
||||
let captionsTimer = null;
|
||||
|
||||
/**
|
||||
* @param {string|HTMLElement} message
|
||||
*/
|
||||
function displayCaption(message) {
|
||||
if(captionsTimer != null) {
|
||||
clearTimeout(captionsTimer);
|
||||
captionsTimer = null;
|
||||
}
|
||||
setCaption(message);
|
||||
captionsTimer = setTimeout(() => setCaption(null), 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string|HTMLElement} message
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue