MeshMessenger Improvements

This commit is contained in:
Ylian Saint-Hilaire 2020-06-29 12:27:14 -07:00
parent 769443ea6e
commit 924ce9aa75
2 changed files with 15 additions and 9 deletions

File diff suppressed because one or more lines are too long

View File

@ -22,8 +22,8 @@
<div style="padding-top:9px;padding-left:6px;font-size:20px;display:inline-block"><b><span id="xtitle">MeshMessenger</span></b></div> <div style="padding-top:9px;padding-left:6px;font-size:20px;display:inline-block"><b><span id="xtitle">MeshMessenger</span></b></div>
</div> </div>
<div id="xmiddle" style="position:absolute;left:0;right:0;top:38px;bottom:30px"> <div id="xmiddle" style="position:absolute;left:0;right:0;top:38px;bottom:30px">
<div style="position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:scroll"> <div id="xmsgparent" style="position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:scroll">
<div id="xmsg" style="position:absolute;left:0;right:0;bottom:0;padding:5px"></div> <div id="xmsg" style="padding:5px"></div>
</div> </div>
</div> </div>
<div id="xbottom" style="position:absolute;left:0;right:0;bottom:0px;height:30px;background-color:#036"> <div id="xbottom" style="position:absolute;left:0;right:0;bottom:0px;height:30px;background-color:#036">
@ -60,6 +60,7 @@
getUserMediaSupport(function (x) { userMediaSupport = x; }) getUserMediaSupport(function (x) { userMediaSupport = x; })
var webrtcconfiguration = '{{{webrtconfig}}}'; var webrtcconfiguration = '{{{webrtconfig}}}';
if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: "' + webrtcconfiguration + '".'); webrtcconfiguration = null; } } if (webrtcconfiguration == '') { webrtcconfiguration = null; } else { try { webrtcconfiguration = JSON.parse(decodeURIComponent(webrtcconfiguration)); } catch (ex) { console.log('Invalid WebRTC config: "' + webrtcconfiguration + '".'); webrtcconfiguration = null; } }
var windowFocus = true;
// File transfer state // File transfer state
var fileUploads = []; var fileUploads = [];
@ -73,6 +74,10 @@
// Setup web notifications // Setup web notifications
if (Notification) { QV('notifyButton', Notification.permission != 'granted'); } if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
// Track window focus
window.addEventListener('focus', function (event) { windowFocus = true; }, false);
window.addEventListener('blur', function (event) { windowFocus = false; }, false);
// Listen to drag & drop events // Listen to drag & drop events
document.addEventListener('dragover', haltEvent, false); document.addEventListener('dragover', haltEvent, false);
document.addEventListener('dragleave', haltEvent, false); document.addEventListener('dragleave', haltEvent, false);
@ -150,7 +155,7 @@
// Display a control message // Display a control message
function displayControl(msg) { function displayControl(msg) {
QA('xmsg', '<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">' + EscapeHtml(msg) + '</div><div></div></div>'); QA('xmsg', '<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">' + EscapeHtml(msg) + '</div><div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight; Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;//Q('xmsg').scrollHeight;
} }
function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); } function displayLocalVideo(active) { QV('localVideo', active); adjustVideoWindows(); }
@ -163,12 +168,13 @@
// Display a message from the remote user // Display a message from the remote user
function displayRemote(msg) { function displayRemote(msg) {
console.log(document.activeElement);
QA('xmsg', '<div style="clear:both"><div class="remoteBubble">' + EscapeHtml(msg) + '</div><div></div></div>'); QA('xmsg', '<div style="clear:both"><div class="remoteBubble">' + EscapeHtml(msg) + '</div><div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight; Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
// If web notifications are granted, use it. // If web notifications are granted, use it.
if (Notification) { QV('notifyButton', Notification.permission != 'granted'); } if (Notification) { QV('notifyButton', Notification.permission != 'granted'); }
if (Notification && (Notification.permission == 'granted')) { if (Notification && (windowFocus == false) && (Notification.permission == 'granted')) {
if (notification != null) { notification.close(); notification = null; } if (notification != null) { notification.close(); notification = null; }
if (args.title) { if (args.title) {
notification = new Notification("MeshMessenger" + ' - ' + args.title, { body: msg }); notification = new Notification("MeshMessenger" + ' - ' + args.title, { body: msg });
@ -186,7 +192,7 @@
if (outtext.length > 0) { if (outtext.length > 0) {
Q('xouttext').value = ''; Q('xouttext').value = '';
QA('xmsg', '<div style="clear:both"><div class="localBubble">' + EscapeHtml(outtext) + '</div><div></div></div>'); QA('xmsg', '<div style="clear:both"><div class="localBubble">' + EscapeHtml(outtext) + '</div><div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight; Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
send({ action: 'chat', msg: outtext }); send({ action: 'chat', msg: outtext });
} }
} }
@ -420,7 +426,7 @@
file.id = Math.random(); file.id = Math.random();
fileUploads.push(file); fileUploads.push(file);
QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="localBubble" style="width:240px;cursor:pointer" onclick="cancelFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:16px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>'); QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="localBubble" style="width:240px;cursor:pointer" onclick="cancelFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:16px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight; Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
send({ action: 'file', size: file.size, id: file.id, type: file.type, name: file.name }); send({ action: 'file', size: file.size, id: file.id, type: file.type, name: file.name });
if (currentFileUpload == null) continueFileUpload(); if (currentFileUpload == null) continueFileUpload();
} }
@ -429,7 +435,7 @@
if (state != 2) return; if (state != 2) return;
fileDownloads[file.id] = file; fileDownloads[file.id] = file;
QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="remoteBubble" style="width:240px;cursor:pointer" onclick="saveFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:16px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>'); QA('xmsg', '<div style="clear:both"></div><div id="FILEUP-' + file.id + '" class="remoteBubble" style="width:240px;cursor:pointer" onclick="saveFileTransfer(\'' + file.id + '\')"><div id="FILEUP-ICON-' + file.id + '" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-' + file.id + '" style="height:16px;overflow:hidden;white-space:nowrap;" title="' + file.name + '">' + file.name + '</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-' + file.id + '" style="width:0px;background-color:green;border-radius:3px;height:11px">&nbsp;</div></div></div></div>');
Q('xmsg').scrollTop = Q('xmsg').scrollHeight; Q('xmsgparent').scrollTop = Q('xmsgparent').scrollHeight;
} }
// Change the file icon and progress // Change the file icon and progress