Mercurial > libervia-templates
view sat_templates/templates/default/static/chat.js @ 400:140690a18b63
call: group call design:
Design for group call (which is used for both group call and A/V conferences) has been
improved to:
- have a working fullscreen button;
- have a better display of peer users in grid, with responsive design;
- have a nicer design for peer user, and adding avatar/nickname as overlay on the bottom
of the video stream;
- add a way to (un)pin a peer user, which make is appear on the whole width on top of the
grid.
rel 448
HG<S-Insert>: changed sat_templates/templates/bulma/call/group_peer.html
author | Goffi <goffi@goffi.org> |
---|---|
date | Tue, 06 Aug 2024 23:50:17 +0200 |
parents | 6a26c8a43d10 |
children |
line wrap: on
line source
/* SàT Template: Chat page handling * * Copyright (C) 2017 Jérôme Poisson (goffi@goffi.org) * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. */ var msgInput = document.getElementById('message_input'); var messages = document.getElementById('messages'); const messagesTransitionOri = messages.style.transition; msgInput.addEventListener('keypress', function(event) { if (event.which == 13 && !event.shiftKey) { if (messages.style.height !== '100%') { messages.style.transition = messagesTransitionOri; setTimeout(function() { messages.style.transition = 'initial'; messages.scrollTop = messages.scrollHeight; }, 1000); messages.style.height = "100%"; } if (!this.value.trim()) { return; } socket.send({'type': 'msg', 'body': this.value}); this.value = ''; event.preventDefault(); }} ); var mutationCb = function(mutationsList) { scrollPos = messages.scrollTop + messages.clientHeight; if (messages.lastChild.offsetTop - scrollPos - 150 <= 0) { // we auto scroll only if we are at the bottom of the page // else the use is probably checking history // Note thas this doesn't take margin into account, // we suppose margin to be 0 for messages children messages.scrollTop = messages.scrollHeight; } }; var observer = new MutationObserver(mutationCb); observer.observe(messages, { childList: true }); // we want to start with scrolling at bottom messages.scrollTop = messages.scrollHeight; messages.style.transition = 'initial';