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';