annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
85
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 /* SàT Template: Chat page handling
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 * Copyright (C) 2017 Jérôme Poisson (goffi@goffi.org)
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5 * This program is free software: you can redistribute it and/or modify
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
6 * it under the terms of the GNU Affero General Public License as published by
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
7 * the Free Software Foundation, either version 3 of the License, or
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
8 * (at your option) any later version.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
9 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
10 * This program is distributed in the hope that it will be useful,
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
13 * GNU Affero General Public License for more details.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
14 *
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
15 * You should have received a copy of the GNU Affero General Public License
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
17 */
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
18
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
20 var msgInput = document.getElementById('message_input');
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
21 var messages = document.getElementById('messages');
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
22 const messagesTransitionOri = messages.style.transition;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
23
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
24 msgInput.addEventListener('keypress', function(event) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
25 if (event.which == 13 && !event.shiftKey) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
26 if (messages.style.height !== '100%') {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
27 messages.style.transition = messagesTransitionOri;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
28 setTimeout(function() {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
29 messages.style.transition = 'initial';
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
30 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
31 }, 1000);
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
32 messages.style.height = "100%";
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
33 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
34 if (!this.value.trim()) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
35 return;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
36 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
37 socket.send({'type': 'msg',
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
38 'body': this.value});
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
39 this.value = '';
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
40 event.preventDefault();
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
41 }}
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
42 );
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
43
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
44 var mutationCb = function(mutationsList) {
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 scrollPos = messages.scrollTop + messages.clientHeight;
329
6a26c8a43d10 bulma (chat): fix chat:
Goffi <goffi@goffi.org>
parents: 164
diff changeset
46 if (messages.lastChild.offsetTop - scrollPos - 150 <= 0) {
85
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
47 // we auto scroll only if we are at the bottom of the page
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48 // else the use is probably checking history
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
49 // Note thas this doesn't take margin into account,
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
50 // we suppose margin to be 0 for messages children
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
51 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
52 }
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
53 };
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
54
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
55 var observer = new MutationObserver(mutationCb);
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
56
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
57 observer.observe(messages, { childList: true });
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
58 // we want to start with scrolling at bottom
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
59 messages.scrollTop = messages.scrollHeight;
05b500bd6235 chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
60 messages.style.transition = 'initial';