Mercurial > libervia-templates
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 |
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 | 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'; |