Added account image to MeshMessenger.
Ylian Saint-Hilaire committed
Mar 21, 2021 at 15:07 UTC
a43df59a4df14f46a48bf0d0f478d72d4be2ab48
2 files changed
+106
-59
meshrelay.js
+31
@@ -199,6 +199,17 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
199
}
200
}
201
202
+ // Push any stored message to the peer
203
+ obj.sendPeerImage = function () {
204
+ if (obj.id.startsWith('meshmessenger/') && (obj.peer != null) && (obj.user != null) && (typeof obj.user.flags == 'number') && (obj.user.flags & 1)) {
205
+ parent.db.Get('im' + obj.user._id, function (err, docs) {
206
+ if ((err == null) && (docs != null) && (docs.length == 1) && (typeof docs[0].image == 'string')) {
207
+ try { obj.peer.ws.send(JSON.stringify({ ctrlChannel: '102938', type: 'image', image: docs[0].image })); } catch (ex) { }
208
+ }
209
+ });
210
+ }
211
+ }
212
+
213
// Send a PING/PONG message
214
function sendPing() {
215
try { obj.ws.send('{"ctrlChannel":"102938","type":"ping"}'); } catch (ex) { }
@@ -312,6 +323,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
323
// Send any stored push messages
324
obj.pushStoredMessages();
325
relayinfo.peer1.pushStoredMessages();
326
+
327
+ // Send other peer's image
328
+ obj.sendPeerImage();
329
+ relayinfo.peer1.sendPeerImage();
330
return;
331
}
332
}
@@ -339,6 +354,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
354
// Send any stored push messages
355
obj.pushStoredMessages();
356
relayinfo.peer1.pushStoredMessages();
357
+
358
+ // Send other peer's image
359
+ obj.sendPeerImage();
360
+ relayinfo.peer1.sendPeerImage();
361
} else {
362
// Write the recording file header
363
parent.parent.debug('relay', 'Relay: Started recoding to file: ' + recFullFilename);
@@ -365,6 +384,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
384
// Send any stored push messages
385
obj.pushStoredMessages();
386
relayinfo.peer1.pushStoredMessages();
387
+
388
+ // Send other peer's image
389
+ obj.sendPeerImage();
390
+ relayinfo.peer1.sendPeerImage();
391
return;
392
}
393
try { ws.send('cr'); } catch (ex) { } // Send connect to both peers, 'cr' indicates the session is being recorded.
@@ -373,6 +396,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
396
// Send any stored push messages
397
obj.pushStoredMessages();
398
relayinfo.peer1.pushStoredMessages();
399
+
400
+ // Send other peer's image
401
+ obj.sendPeerImage();
402
+ relayinfo.peer1.sendPeerImage();
403
});
404
}
405
});
@@ -385,6 +412,10 @@ function CreateMeshRelayEx(parent, ws, req, domain, user, cookie) {
412
// Send any stored push messages
413
obj.pushStoredMessages();
414
relayinfo.peer1.pushStoredMessages();
415
+
416
+ // Send other peer's image
417
+ obj.sendPeerImage();
418
+ relayinfo.peer1.sendPeerImage();
419
}
420
421
parent.parent.debug('relay', 'Relay connected: ' + obj.id + ' (' + obj.req.clientIp + ' --> ' + obj.peer.req.clientIp + ')');
views/messenger.handlebars
+75
-59
@@ -1,63 +1,64 @@
1
<!DOCTYPE html>
2
<html lang="en" style=height:100%>
3
- <head>
4
- <title>{{{title}}} - Messenger</title>
5
- <meta http-equiv=X-UA-Compatible content="IE=edge">
6
- <meta content="text/html;charset=utf-8" http-equiv=Content-Type>
7
- <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
8
- <meta name=format-detection content="telephone=no">
9
- <meta name="robots" content="noindex,nofollow">
10
- <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
11
- <link type="text/css" href="styles/messenger.css" media="screen" rel="stylesheet" title="CSS" />
12
- <link rel="apple-touch-icon" href="/favicon-303x303.png" />
13
- <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
14
- <script type="text/javascript" src="scripts/filesaver.min.js"></script>
15
- </head>
16
- <body style="font-family:Arial,Helvetica,sans-serif">
17
- <div id="xtop" style="position:absolute;left:0;right:0;top:0;height:38px;background-color:#036;color:#EEE;box-shadow:3px 3px 10px gray">
18
- <img style="float:left" height="38" src="messenger.png" />
19
- <div style="position:absolute;background-color:#036;right:0;height:38px">
20
- <div id="saveButton" class="icon15 topButton" style="margin-right:4px" title="Save conversation" onclick="saveChatSession()"></div>
21
- <div id="notifyButton" class="icon13 topButton" style="display:none" title="Enable browser notification" onclick="enableNotificationsButtonClick()"></div>
22
- <div id="fileButton" class="icon4 topButton" title="Share a file" style="display:none" onclick="fileButtonClick()"></div>
23
- <div id="camButton" class="icon2 topButton" title="Activate camera & microphone" style="display:none" onclick="camButtonClick()"></div>
24
- <div id="micButton" class="icon6 topButton" title="Activate microphone" style="display:none" onclick="micButtonClick()"></div>
25
- <div id="hangupButton" class="icon11 topRedButton" title="Hang up" style="display:none" onclick="hangUpButtonClick(1)"></div>
26
- </div>
27
- <div style="padding-top:9px;padding-left:6px;font-size:20px;display:inline-block"><b><span id="xtitle"></span></b></div>
3
+<head>
4
+ <title>{{{title}}} - Messenger</title>
5
+ <meta http-equiv=X-UA-Compatible content="IE=edge">
6
+ <meta content="text/html;charset=utf-8" http-equiv=Content-Type>
7
+ <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
8
+ <meta name=format-detection content="telephone=no">
9
+ <meta name="robots" content="noindex,nofollow">
10
+ <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
11
+ <link type="text/css" href="styles/messenger.css" media="screen" rel="stylesheet" title="CSS" />
12
+ <link rel="apple-touch-icon" href="/favicon-303x303.png" />
13
+ <script type="text/javascript" src="scripts/common-0.0.1{{min}}.js"></script>
14
+ <script type="text/javascript" src="scripts/filesaver.min.js"></script>
15
+</head>
16
+<body style="font-family:Arial,Helvetica,sans-serif">
17
+ <div id="xtop" style="position:absolute;left:0;right:0;top:0;height:38px;background-color:#036;color:#EEE;box-shadow:3px 3px 10px gray">
18
+ <img style="float:left" height="38" src="messenger.png" />
19
+ <div style="position:absolute;background-color:#036;right:0;height:38px">
20
+ <div id="saveButton" class="icon15 topButton" style="margin-right:4px" title="Save conversation" onclick="saveChatSession()"></div>
21
+ <div id="notifyButton" class="icon13 topButton" style="display:none" title="Enable browser notification" onclick="enableNotificationsButtonClick()"></div>
22
+ <div id="fileButton" class="icon4 topButton" title="Share a file" style="display:none" onclick="fileButtonClick()"></div>
23
+ <div id="camButton" class="icon2 topButton" title="Activate camera & microphone" style="display:none" onclick="camButtonClick()"></div>
24
+ <div id="micButton" class="icon6 topButton" title="Activate microphone" style="display:none" onclick="micButtonClick()"></div>
25
+ <div id="hangupButton" class="icon11 topRedButton" title="Hang up" style="display:none" onclick="hangUpButtonClick(1)"></div>
26
</div>
29
- <div id="xmiddle" style="position:absolute;left:0;right:0;top:38px;bottom:36px;font-size:18px">
30
- <div id="xmsgparent" style="position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow-y:auto">
31
- <div id="xmsg" style="padding:5px"></div>
32
- <div id="typingIndicator" style="display:none;margin-left:5px;clear:both"><img src="images/3dots-24.gif" srcset="images/3dots-48.gif 2x" /></div>
33
- </div>
27
+ <div style="padding-top:9px;padding-left:6px;font-size:20px;display:inline-block"><b><span id="xtitle"></span></b></div>
28
+ </div>
29
+ <div id="xmiddle" style="position:absolute;left:0;right:0;top:38px;bottom:36px;font-size:18px">
30
+ <div id="xmsgparent" style="position:absolute;left:0;right:0;bottom:0;max-height:100%;overflow-y:auto">
31
+ <div id="xmsg" style="padding:5px"></div>
32
+ <div id="typingIndicator" style="display:none;margin-left:5px;clear:both"><img src="images/3dots-24.gif" srcset="images/3dots-48.gif 2x" /></div>
33
</div>
35
- <div id="xbottom" style="position:absolute;left:0;right:0;bottom:0px;height:36px;background-color:#036;font-size:18px">
36
- <table style="width:100%">
37
- <tr>
38
- <td>
39
- <input id="xouttext" type="text" style="box-sizing:border-box;width:100%;font-size:18px" onfocus=onUserInputFocus(1) onblur=onUserInputFocus(0) onkeyup="updateLocalOutText()" />
40
- </td>
41
- <td style="width:1px">
42
- <input type="button" id="sendButton" value="Send" style="box-sizing: border-box;float:right;font-size:18px" onclick="xsend(event)" />
43
- </td>
44
- <td style="width:1px">
45
- <input type="button" id="clearButton" value="Clear" style="box-sizing: border-box;float:right;font-size:18px" onclick="displayClear()" />
46
- </td>
47
- </tr>
48
- </table>
49
- </div>
50
- <div id="remoteVideo" style="position:absolute;right:24px;top:45px;width:320px;height:calc(240px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
51
- <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Remote</div>
52
- <video id="remoteVideoCanvas" autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:black" onclick="remotePlay(event)"></video>
53
- <div id="remoteClickToView" style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);color:white;text-align:center;padding-top:20px;display:none" onclick="remotePlay(event)">Click here to view.</div>
54
- </div>
55
- <div id="localVideo" style="position:absolute;right:24px;top:320px;width:160px;height:calc(120px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
56
- <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Local</div>
57
- <video id="localVideoCanvas" autoplay muted style="position:absolute;top:20px;left:0;right:100%;height:calc(100% - 30px);background-color:black"></video>
58
- </div>
59
- <input id="uploadFileInput" type="file" multiple style="display:none">
60
- <script type="text/javascript" onunload="onUnLoad()">
34
+ </div>
35
+ <div id="xbottom" style="position:absolute;left:0;right:0;bottom:0px;height:36px;background-color:#036;font-size:18px">
36
+ <table style="width:100%">
37
+ <tr>
38
+ <td>
39
+ <input id="xouttext" type="text" style="box-sizing:border-box;width:100%;font-size:18px" onfocus=onUserInputFocus(1) onblur=onUserInputFocus(0) onkeyup="updateLocalOutText()" />
40
+ </td>
41
+ <td style="width:1px">
42
+ <input type="button" id="sendButton" value="Send" style="box-sizing: border-box;float:right;font-size:18px" onclick="xsend(event)" />
43
+ </td>
44
+ <td style="width:1px">
45
+ <input type="button" id="clearButton" value="Clear" style="box-sizing: border-box;float:right;font-size:18px" onclick="displayClear()" />
46
+ </td>
47
+ </tr>
48
+ </table>
49
+ </div>
50
+ <div id="remoteVideo" style="position:absolute;right:24px;top:45px;width:320px;height:calc(240px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
51
+ <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Remote</div>
52
+ <video id="remoteVideoCanvas" autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:black" onclick="remotePlay(event)"></video>
53
+ <div id="remoteClickToView" style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);color:white;text-align:center;padding-top:20px;display:none" onclick="remotePlay(event)">Click here to view.</div>
54
+ </div>
55
+ <div id="localVideo" style="position:absolute;right:24px;top:320px;width:160px;height:calc(120px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
56
+ <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Local</div>
57
+ <video id="localVideoCanvas" autoplay muted style="position:absolute;top:20px;left:0;right:100%;height:calc(100% - 30px);background-color:black"></video>
58
+ </div>
59
+ <canvas width="256" height="256" id="remoteImage" style="position:absolute;right:24px;top:45px;width:200px;height:200px;background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none" />
60
+ <input id="uploadFileInput" type="file" multiple style="display:none">
61
+ <script type="text/javascript" onunload="onUnLoad()">
62
var userInputFocus = 0;
63
var socket = null; // Websocket object
64
var state = 0; // Connection state. 0 = Disconnected, 1 = Connecting, 2 = Connected.
@@ -86,6 +87,7 @@
87
var chatTextSession = new Date().toString() + '\r\n';
88
var localOutText = false;
89
var remoteOutText = false;
90
+ var remoteImage = false;
91
92
// File transfer state
93
var fileUploads = [];
@@ -99,6 +101,8 @@
101
if (remoteStream != null) {
102
rheight = ((320 * Q('remoteVideoCanvas').videoHeight) / Q('remoteVideoCanvas').videoWidth);
103
QS('remoteVideo').height = 'calc(' + rheight + 'px + 30px)';
104
+ } else {
105
+ if (remoteImage == true) { rheight += 200; }
106
}
107
if (localStream != null) {
108
QS('localVideo').height = 'calc(' + ((160 * Q('localVideoCanvas').videoHeight) / Q('localVideoCanvas').videoWidth) + 'px + 30px)';
@@ -205,9 +209,12 @@
209
function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); }
210
function displayRemoteVideo(active) { QV('remoteVideo', active); adjustVideoWindows(); }
211
function adjustVideoWindows() {
208
- //var lv = (QS('localVideo')['display'] != 'none');
212
+ var lv = (QS('localVideo')['display'] != 'none');
213
var rv = (QS('remoteVideo')['display'] != 'none');
210
- QS('localVideo')['top'] = rv ? '320px' : '45px';
214
+ QV('remoteImage', (remoteImage == true) && (rv == false))
215
+ if (rv) { QS('localVideo')['top'] = '320px'; }
216
+ else if (remoteImage) { QS('localVideo')['top'] = '320px'; }
217
+ else { QS('localVideo')['top'] = '45px'; }
218
resizeVideos();
219
}
220
@@ -351,6 +358,8 @@
358
if (socket != null) { socket.close(); socket = null; }
359
updateControls();
360
state = 0;
361
+ remoteImage = false;
362
+ QV('remoteImage', false);
363
updateLocalOutText();
364
updateRemoteOutText();
365
}
@@ -374,6 +383,12 @@
383
// WebRTC id switcher (0 -> 0, 1 -> 2, 2 -> 1)
384
function webRtcIdSwitch(id) { if (id == 0) { return 0; } return 3 - id; }
385
386
+ function drawRemoteImage(imageBase64) {
387
+ var canvas = Q('remoteImage'), context = canvas.getContext('2d'), img = new Image();
388
+ img.onload = function () { context.drawImage(this, 0, 0, canvas.width, canvas.height); remoteImage = true; adjustVideoWindows(); }
389
+ img.src = imageBase64;
390
+ }
391
+
392
// Process incoming messages
393
function processMessage(data, transport) {
394
if (typeof data == 'string') {
@@ -383,6 +398,7 @@
398
// Handle control command
399
if (data.ctrlChannel == '102938') {
400
switch (data.type) {
401
+ case 'image': { drawRemoteImage(data.image); break; }
402
case 'ping': { send({ ctrlChannel: '102938', type: 'pong' }); break; }
403
case 'pong': { break; }
404
}
@@ -765,6 +781,6 @@
781
if (remoteOutText != newState) { remoteOutText = newState; QV('typingIndicator', remoteOutText); }
782
}
783
768
- </script>
784
+ </script>
785
</body>
786
</html>