1269 lines
48 KiB
JavaScript
1269 lines
48 KiB
JavaScript
"use strict";
|
|
|
|
let identityName = undefined;
|
|
let socket = new WebSocket("ws://"+location.hostname+":"+websocketPort+"/ws");;
|
|
let notificationAllowed = false;
|
|
let localIps = [];
|
|
let currentSessionId = -1;
|
|
let sessionsData = new Map();
|
|
let msgHistory = new Map();
|
|
let pendingMsgs = new Map();
|
|
let pendingFilesTransfers = new Map();
|
|
let avatarTimestamps = new Map([
|
|
["self", Date.now()]
|
|
]);
|
|
|
|
function onClickSession(event) {
|
|
let sessionId = event.currentTarget.getAttribute("data-sessionId");
|
|
if (sessionId != null && socket.readyState === WebSocket.OPEN) {
|
|
currentSessionId = sessionId;
|
|
let session = sessionsData.get(sessionId);
|
|
if (!session.seen) {
|
|
session.seen = true;
|
|
socket.send("set_seen "+sessionId);
|
|
}
|
|
displaySessions();
|
|
displayHeader();
|
|
displayChatBottom();
|
|
displayHistory();
|
|
}
|
|
}
|
|
let ip_input = document.getElementById("ip_input");
|
|
ip_input.addEventListener("keyup", function(event) {
|
|
if (event.key === "Enter") {
|
|
socket.send("connect "+ip_input.value);
|
|
ip_input.value = "";
|
|
}
|
|
});
|
|
document.getElementById("show_local_ips").onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
let h2Title = document.createElement("h2");
|
|
h2Title.textContent = "Your IP addresses:";
|
|
mainDiv.appendChild(h2Title);
|
|
let ul = document.createElement("ul");
|
|
ul.classList.add("ips");
|
|
for (let i=0; i<localIps.length; ++i) {
|
|
let li = document.createElement("li");
|
|
li.textContent = localIps[i];
|
|
ul.appendChild(li);
|
|
}
|
|
mainDiv.appendChild(ul);
|
|
showPopup(mainDiv);
|
|
};
|
|
let message_input = document.getElementById("message_input");
|
|
message_input.addEventListener("keyup", function(event) {
|
|
if (event.key === "Enter") {
|
|
socket.send("send "+currentSessionId+" "+message_input.value);
|
|
message_input.value = "";
|
|
}
|
|
});
|
|
document.getElementById("delete_conversation").onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let p1 = document.createElement("p");
|
|
p1.textContent = "Deleting a conversation only affects you. Your contact will still have a copy of this conversation if he/she doesn't delete it too.";
|
|
let p2 = document.createElement("p");
|
|
p2.textContent = "Do you really want to delete all this conversation (messages and files) ?";
|
|
mainDiv.appendChild(p1);
|
|
mainDiv.appendChild(p2);
|
|
let button = document.createElement("button");
|
|
button.classList.add("classic_button");
|
|
button.textContent = "Delete";
|
|
button.onclick = function() {
|
|
socket.send("delete_conversation "+currentSessionId);
|
|
msgHistory.get(currentSessionId).length = 0;
|
|
removePopup();
|
|
displayHistory();
|
|
};
|
|
mainDiv.appendChild(button);
|
|
showPopup(mainDiv);
|
|
};
|
|
document.getElementById("add_contact").onclick = function() {
|
|
socket.send("contact "+currentSessionId);
|
|
sessionsData.get(currentSessionId).isContact = true;
|
|
pendingMsgs.set(currentSessionId, []);
|
|
displayHeader();
|
|
displaySessions();
|
|
};
|
|
document.getElementById("remove_contact").onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let p1 = document.createElement("p");
|
|
p1.textContent = "Deleting contact will remove her/his identity key and your conversation (messages and files). You won\'t be able to recognize her/him anymore. This action only affects you.";
|
|
mainDiv.appendChild(p1);
|
|
let p2 = document.createElement("p");
|
|
p2.textContent = "Do you really want to remove this contact ?";
|
|
mainDiv.appendChild(p2);
|
|
let button = document.createElement("button");
|
|
button.classList.add("classic_button");
|
|
button.textContent = "Delete";
|
|
button.onclick = function() {
|
|
socket.send("uncontact "+currentSessionId);
|
|
let session = sessionsData.get(currentSessionId);
|
|
session.isContact = false;
|
|
session.isVerified = false;
|
|
if (!session.isOnline) {
|
|
sessionsData.delete(currentSessionId);
|
|
msgHistory.get(currentSessionId).length = 0;
|
|
displayChatBottom();
|
|
}
|
|
pendingMsgs.delete(currentSessionId);
|
|
displayHeader();
|
|
displaySessions();
|
|
displayHistory();
|
|
removePopup();
|
|
};
|
|
mainDiv.appendChild(button);
|
|
showPopup(mainDiv);
|
|
};
|
|
document.getElementById("verify").onclick = function() {
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session !== "undefined") {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let instructions = document.createElement("p");
|
|
instructions.textContent = "Compare the following fingerprints by a trusted way of communication (such as real life) and be sure they match.";
|
|
mainDiv.appendChild(instructions);
|
|
let p_local = document.createElement("p");
|
|
p_local.textContent = "Local fingerprint:";
|
|
mainDiv.appendChild(p_local);
|
|
let pre_local = document.createElement("pre");
|
|
pre_local.textContent = beautifyFingerprint(identityFingerprint);
|
|
mainDiv.appendChild(pre_local);
|
|
let p_peer = document.createElement("p");
|
|
p_peer.textContent = "Peer fingerprint:";
|
|
mainDiv.appendChild(p_peer);
|
|
let pre_peer = document.createElement("pre");
|
|
pre_peer.textContent = beautifyFingerprint(session.fingerprint);
|
|
mainDiv.appendChild(pre_peer);
|
|
let buttonRow = document.createElement("div");
|
|
buttonRow.classList.add("button_row");
|
|
let verifyButton = document.createElement("button");
|
|
verifyButton.classList.add("classic_button");
|
|
verifyButton.textContent = "They match";
|
|
verifyButton.onclick = function() {
|
|
socket.send("verify "+currentSessionId);
|
|
sessionsData.get(currentSessionId).isVerified = true;
|
|
removePopup();
|
|
displayHeader();
|
|
displaySessions();
|
|
};
|
|
buttonRow.appendChild(verifyButton);
|
|
let cancelButton = document.createElement("button");
|
|
cancelButton.classList.add("classic_button");
|
|
cancelButton.textContent = "They don't match";
|
|
cancelButton.onclick = removePopup;
|
|
buttonRow.appendChild(cancelButton);
|
|
mainDiv.appendChild(buttonRow);
|
|
showPopup(mainDiv);
|
|
}
|
|
};
|
|
document.getElementById("logout").onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let p_warning = document.createElement("p");
|
|
p_warning.textContent = "If you log out, you will no longer receive messages and pending messages will not be sent until you log in back.";
|
|
mainDiv.appendChild(p_warning);
|
|
let p_ask = document.createElement("p");
|
|
p_ask.textContent = "Do you really want to log out ?";
|
|
mainDiv.appendChild(p_ask);
|
|
let button = document.createElement("button");
|
|
button.classList.add("classic_button");
|
|
button.textContent = "Log out";
|
|
button.onclick = logout;
|
|
mainDiv.appendChild(button);
|
|
showPopup(mainDiv);
|
|
};
|
|
document.getElementById("attach_file").onchange = function(event) {
|
|
let files = event.target.files;
|
|
let useLargeFileTransfer = false;
|
|
for (let i=0; i<files.length; ++i) {
|
|
if (files[i].size > 16380000) {
|
|
useLargeFileTransfer = true;
|
|
break;
|
|
}
|
|
}
|
|
if (useLargeFileTransfer) {
|
|
if (pendingFilesTransfers.has(currentSessionId)) {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let p = document.createElement("p");
|
|
p.textContent = "Another file transfer is already in progress.";
|
|
mainDiv.appendChild(p);
|
|
showPopup(mainDiv);
|
|
} else {
|
|
let filesTransfer = [];
|
|
let fileInfo = "";
|
|
for (let i=0; i<files.length; ++i) {
|
|
filesTransfer.push({
|
|
"file": files[i],
|
|
"name": files[i].name,
|
|
"size": files[i].size,
|
|
"transferred": 0,
|
|
"lastChunk": Date.now()
|
|
});
|
|
fileInfo += ' '+files[i].size+' '+b64EncodeUnicode(files[i].name);
|
|
};
|
|
pendingFilesTransfers.set(currentSessionId, {
|
|
"files": filesTransfer,
|
|
"index": 0,
|
|
"state": "waiting",
|
|
});
|
|
socket.send("large_files "+currentSessionId+fileInfo);
|
|
displayChatBottom();
|
|
}
|
|
} else {
|
|
for (let i=0; i<files.length; ++i) {
|
|
let formData = new FormData();
|
|
formData.append("session_id", currentSessionId);
|
|
formData.append("", files[i]);
|
|
fetch("/send_file", {method: "POST", body: formData}).then(response => {
|
|
if (response.ok) {
|
|
response.text().then(text => {
|
|
if (text === "pending") {
|
|
newPendingMsg(currentSessionId, true, files[i].name);
|
|
}
|
|
});
|
|
} else {
|
|
console.log(response);
|
|
}
|
|
});
|
|
};
|
|
}
|
|
};
|
|
document.getElementById("file_cancel").onclick = function() {
|
|
socket.send("abort "+currentSessionId);
|
|
};
|
|
let msgLog = document.getElementById("msg_log");
|
|
msgLog.onscroll = function() {
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session !== "undefined") {
|
|
if (session.isContact) {
|
|
if (msgLog.scrollTop < 30) {
|
|
socket.send("load_msgs "+currentSessionId);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
let profileDiv = document.querySelector("#me>div");
|
|
profileDiv.onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.id = "profile_info";
|
|
let avatarContainer = document.createElement("div");
|
|
avatarContainer.id = "avatarContainer";
|
|
let labelAvatar = document.createElement("label");
|
|
labelAvatar.setAttribute("for", "avatar_input");
|
|
let inputAvatar = document.createElement("input");
|
|
inputAvatar.type = "file";
|
|
inputAvatar.accept = "image/*";
|
|
inputAvatar.id = "avatar_input";
|
|
inputAvatar.onchange = function(event) {
|
|
uploadAvatar(event, function() {
|
|
avatarTimestamps.set("self", Date.now());
|
|
refreshSelfAvatar();
|
|
});
|
|
};
|
|
labelAvatar.appendChild(inputAvatar);
|
|
labelAvatar.appendChild(generateSelfAvatar(avatarTimestamps.get("self")));
|
|
let uploadP = document.createElement("p");
|
|
uploadP.textContent = "Upload";
|
|
labelAvatar.appendChild(uploadP);
|
|
avatarContainer.appendChild(labelAvatar);
|
|
let removeAvatar = document.createElement("span");
|
|
removeAvatar.id = "removeAvatar";
|
|
removeAvatar.textContent = "Remove";
|
|
removeAvatar.onclick = function() {
|
|
socket.send("remove_avatar");
|
|
};
|
|
avatarContainer.appendChild(removeAvatar);
|
|
mainDiv.appendChild(avatarContainer);
|
|
let sectionName = document.createElement("section");
|
|
let titleName = document.createElement("h3");
|
|
titleName.textContent = "Name:";
|
|
sectionName.appendChild(titleName);
|
|
let inputName = document.createElement("input");
|
|
inputName.id = "new_name";
|
|
inputName.type = "text";
|
|
inputName.value = identityName;
|
|
sectionName.appendChild(inputName);
|
|
let saveNameButton = document.createElement("button");
|
|
saveNameButton.classList.add("classic_button");;
|
|
saveNameButton.textContent = "Save";
|
|
saveNameButton.onclick = function() {
|
|
socket.send("change_name "+document.getElementById("new_name").value);
|
|
};
|
|
sectionName.appendChild(saveNameButton);
|
|
mainDiv.appendChild(sectionName);
|
|
let sectionFingerprint = document.createElement("section");
|
|
let titleFingerprint = document.createElement("h3");
|
|
titleFingerprint.textContent = "Your fingerprint:";
|
|
sectionFingerprint.appendChild(titleFingerprint);
|
|
let fingerprint = document.createElement("pre");
|
|
fingerprint.textContent = beautifyFingerprint(identityFingerprint);
|
|
sectionFingerprint.appendChild(fingerprint);
|
|
mainDiv.appendChild(sectionFingerprint);
|
|
let sectionPadding = document.createElement("section");
|
|
sectionPadding.appendChild(generateSwitchPreference("Use PSEC padding", "PSEC padding obfuscates the length of your messages but uses more network bandwidth.", usePadding, function(checked) {
|
|
socket.send("set_use_padding "+checked);
|
|
usePadding = checked;
|
|
}));
|
|
mainDiv.appendChild(sectionPadding);
|
|
let sectionPassword = document.createElement("section");
|
|
let titlePassword = document.createElement("h3");
|
|
titlePassword.textContent = "Change your password:";
|
|
sectionPassword.appendChild(titlePassword);
|
|
if (isIdentityProtected) {
|
|
let input_old_password = document.createElement("input");
|
|
input_old_password.type = "password";
|
|
input_old_password.placeholder = "Current password";
|
|
sectionPassword.appendChild(input_old_password);
|
|
}
|
|
let inputPassword1 = document.createElement("input");
|
|
let inputPassword2 = document.createElement("input");
|
|
inputPassword1.type = "password";
|
|
inputPassword1.placeholder = "New password (empty for no password)";
|
|
inputPassword2.type = "password";
|
|
inputPassword2.placeholder = "New password (confirmation)";
|
|
sectionPassword.appendChild(inputPassword1);
|
|
sectionPassword.appendChild(inputPassword2);
|
|
let errorMsg = document.createElement("p");
|
|
errorMsg.id = "password_errorMsg";
|
|
errorMsg.style.color = "red";
|
|
sectionPassword.appendChild(errorMsg);
|
|
let changePasswordButton = document.createElement("button");
|
|
changePasswordButton.classList.add("classic_button");
|
|
changePasswordButton.textContent = "Change password";
|
|
changePasswordButton.onclick = function() {
|
|
let inputs = document.querySelectorAll("input[type=\"password\"]");
|
|
let newPassword, newPasswordConfirm, oldPassword;
|
|
if (isIdentityProtected) {
|
|
oldPassword = inputs[0].value;
|
|
newPassword = inputs[1].value;
|
|
newPasswordConfirm = inputs[2].value;
|
|
} else {
|
|
newPassword = inputs[0].value;
|
|
newPasswordConfirm = inputs[1].value;
|
|
}
|
|
if (newPassword == newPasswordConfirm) {
|
|
let newPasswordSet = newPassword.length > 0;
|
|
if (isIdentityProtected && oldPassword.length == 0) {
|
|
errorMsg.textContent = "Current password cannot be empty.";
|
|
} else if (isIdentityProtected || newPasswordSet) { //don't change password if identity is not protected and new password is blank
|
|
let msg = "change_password";
|
|
if (isIdentityProtected) {
|
|
msg += " "+b64EncodeUnicode(inputs[0].value);
|
|
}
|
|
if (newPasswordSet) {
|
|
msg += " "+b64EncodeUnicode(newPassword);
|
|
}
|
|
socket.send(msg);
|
|
} else {
|
|
removePopup();
|
|
}
|
|
} else {
|
|
newPassword = "";
|
|
newPasswordConfirm = "";
|
|
errorMsg.textContent = "Passwords don't match.";
|
|
}
|
|
};
|
|
sectionPassword.appendChild(changePasswordButton);
|
|
mainDiv.appendChild(sectionPassword);
|
|
let sectionDelete = document.createElement("section");
|
|
let deleteTitle = document.createElement("h3");
|
|
deleteTitle.textContent = "Delete identity:";
|
|
sectionDelete.appendChild(deleteTitle);
|
|
sectionDelete.style.borderTop = "1px solid red";
|
|
let p = document.createElement("p");
|
|
p.textContent = "Deleting your identity will delete all your conversations (messages and files), all your contacts, and your private key. You won't be able to be recognized by your contacts anymore.";
|
|
p.style.color = "red";
|
|
sectionDelete.appendChild(p);
|
|
let deleteButton = document.createElement("button");
|
|
deleteButton.classList.add("classic_button");
|
|
deleteButton.textContent = "Delete";
|
|
deleteButton.style.backgroundColor = "red";
|
|
deleteButton.onclick = function() {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.appendChild(generatePopupWarningTitle());
|
|
let p = document.createElement("p");
|
|
p.textContent = "This action is irreversible. Are you sure you want to delete all your data ?";
|
|
mainDiv.appendChild(p);
|
|
let deleteButton = document.createElement("button");
|
|
deleteButton.classList.add("classic_button");
|
|
deleteButton.style.backgroundColor = "red";
|
|
deleteButton.textContent = "Delete";
|
|
deleteButton.onclick = function() {
|
|
socket.send("disappear");
|
|
};
|
|
mainDiv.appendChild(deleteButton);
|
|
showPopup(mainDiv);
|
|
};
|
|
sectionDelete.appendChild(deleteButton);
|
|
mainDiv.appendChild(sectionDelete);
|
|
showPopup(mainDiv);
|
|
};
|
|
let chatHeader = document.getElementById("chat_header");
|
|
chatHeader.children[0].onclick = showSessionInfoPopup;
|
|
document.querySelector("#refresher button").onclick = function() {
|
|
socket.send("refresh");
|
|
};
|
|
|
|
//source: https://stackoverflow.com/a/14919494
|
|
function humanFileSize(bytes, dp=1) {
|
|
const thresh = 1000;
|
|
if (Math.abs(bytes) < thresh) {
|
|
return bytes + " B";
|
|
}
|
|
const units = ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
let u = -1;
|
|
const r = 10**dp;
|
|
do {
|
|
bytes /= thresh;
|
|
++u;
|
|
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
|
return bytes.toFixed(dp) + ' ' + units[u];
|
|
}
|
|
//source: https://stackoverflow.com/a/30106551
|
|
function b64EncodeUnicode(str) {
|
|
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
|
|
function toSolidBytes(match, p1) {
|
|
return String.fromCharCode('0x' + p1);
|
|
}));
|
|
}
|
|
function b64DecodeUnicode(str) {
|
|
return decodeURIComponent(atob(str).split('').map(function(c) {
|
|
return '%' + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
|
|
}).join(''));
|
|
}
|
|
//source: https://www.w3schools.com/js/js_cookies.asp
|
|
function getCookie(cname) {
|
|
var name = cname + "=";
|
|
var decodedCookie = decodeURIComponent(document.cookie);
|
|
var ca = decodedCookie.split(';');
|
|
for(var i = 0; i <ca.length; i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0) == ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(name) == 0) {
|
|
return c.substring(name.length, c.length);
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
function parseTimestamp(timestamp) {
|
|
return new Date(Number(timestamp) * 1000);
|
|
}
|
|
function toTwoNumbers(n) {
|
|
if (n < 10) {
|
|
return '0'+n;
|
|
} else {
|
|
return n;
|
|
}
|
|
}
|
|
|
|
socket.onopen = function() {
|
|
console.log("Connected");
|
|
socket.send(getCookie("aira_auth")); //authenticating websocket connection
|
|
window.onfocus = function() {
|
|
if (currentSessionId != -1) {
|
|
socket.send("set_seen "+currentSessionId);
|
|
}
|
|
};
|
|
if (Notification.permission === "granted") {
|
|
notificationAllowed = true;
|
|
} else if (Notification.permission !== "denied") {
|
|
Notification.requestPermission().then(function (permission) {
|
|
if (permission === "granted") {
|
|
notificationAllowed = true;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
socket.onmessage = function(msg) {
|
|
if (typeof msg.data == "string") {
|
|
console.log("Message: "+msg.data);
|
|
let args = msg.data.split(" ");
|
|
switch (args[0]) {
|
|
case "inc_file_transfer":
|
|
onIncFilesTransfer(args[1], parseInt(args[2]));
|
|
break;
|
|
case "new_session":
|
|
onNewSession(args[1], args[2] === "true", args[3], args[4], msg.data.slice(args[0].length+args[1].length+args[2].length+args[3].length+args[4].length+5));
|
|
break;
|
|
case "new_message":
|
|
onNewMessage(args[1], args[2] === "true", parseTimestamp(args[3]), msg.data.slice(args[0].length+args[1].length+args[2].length+args[3].length+4));
|
|
break;
|
|
case "file":
|
|
onNewFile(args[1], args[2] === "true", parseTimestamp(args[3]), args[4], msg.data.slice(args[0].length+args[1].length+args[2].length+args[3].length+args[4].length+5));
|
|
break;
|
|
case "files_transfer":
|
|
onNewFilesTransfer(args[1], args[2], msg.data.slice(args[0].length+args[1].length+args[2].length+3));
|
|
break;
|
|
case "ask_large_files":
|
|
onAskLargeFiles(args[1], args[2], msg.data.slice(args[0].length+args[1].length+args[2].length+3));
|
|
break;
|
|
case "files_accepted":
|
|
onFilesAccepted(args[1]);
|
|
break;
|
|
case "aborted":
|
|
onFilesTransferAborted(args[1]);
|
|
break;
|
|
case "load_msgs":
|
|
onMsgsLoad(args[1], msg.data.slice(args[0].length+args[1].length+2));
|
|
break;
|
|
case "name_told":
|
|
onNameTold(args[1], msg.data.slice(args[0].length+args[1].length+2));
|
|
break;
|
|
case "avatar_changed":
|
|
onAvatarChanged(args[1]);
|
|
break;
|
|
case "is_contact":
|
|
onIsContact(args[1], args[2] === "true", args[3], msg.data.slice(args[0].length+args[1].length+args[2].length+args[3].length+4));
|
|
break;
|
|
case "not_seen":
|
|
setNotSeen(msg.data.slice(args[0].length+1));
|
|
break;
|
|
case "pending":
|
|
newPendingMsg(args[1], args[2] === "true", msg.data.slice(args[0].length+args[1].length+args[2].length+3));
|
|
break;
|
|
case "sending_pending_msgs":
|
|
onSendingPendingMsgs(args[1]);
|
|
break;
|
|
case "pending_msgs_sent":
|
|
onPendingMsgsSent(args[1]);
|
|
break;
|
|
case "local_ips":
|
|
setLocalIps(msg.data.slice(args[0].length+1));
|
|
break;
|
|
case "set_name":
|
|
onNameSet(msg.data.slice(args[0].length+1));
|
|
break;
|
|
case "password_changed":
|
|
onPasswordChanged(args[1] === "true", args[2] === "true");
|
|
break;
|
|
case "disconnected":
|
|
onDisconnected(args[1]);
|
|
break;
|
|
case "logout":
|
|
logout();
|
|
}
|
|
}
|
|
};
|
|
socket.onclose = function() {
|
|
console.log("Disconnected");
|
|
currentSessionId = -1;
|
|
displayHistory();
|
|
displayHeader();
|
|
displayChatBottom();
|
|
displaySessions();
|
|
document.getElementById("disconnected").classList.add("disconnected");
|
|
};
|
|
|
|
function onNewSession(sessionId, outgoing, fingerprint, ip, name) {
|
|
if (sessionsData.has(sessionId)) {
|
|
let session = sessionsData.get(sessionId);
|
|
session.isOnline = true;
|
|
session.outgoing = outgoing;
|
|
session.ip = ip;
|
|
displaySessions();
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom();
|
|
}
|
|
} else {
|
|
addSession(sessionId, name, outgoing, fingerprint, ip, false, false, true);
|
|
}
|
|
}
|
|
function onNameTold(sessionId, name) {
|
|
sessionsData.get(sessionId).name = name;
|
|
if (sessionId == currentSessionId) {
|
|
displayHeader();
|
|
if (document.getElementById("session_info") !== null) {
|
|
removePopup();
|
|
showSessionInfoPopup();
|
|
}
|
|
}
|
|
displaySessions();
|
|
}
|
|
function onAvatarChanged(sessionIdOrSelf) {
|
|
avatarTimestamps.set(sessionIdOrSelf, Date.now());
|
|
displaySessions();
|
|
if (sessionIdOrSelf === currentSessionId) {
|
|
displayHeader();
|
|
displayHistory(false);
|
|
refreshAvatar("#session_info .avatar", sessionIdOrSelf);
|
|
} else if (sessionIdOrSelf === "self") {
|
|
refreshSelfAvatar();
|
|
}
|
|
}
|
|
function setNotSeen(strSessionIds) {
|
|
let sessionIds = strSessionIds.split(' ');
|
|
for (let i=0; i<sessionIds.length; ++i) {
|
|
sessionsData.get(sessionIds[i]).seen = false;
|
|
}
|
|
displaySessions();
|
|
}
|
|
function newPendingMsg(sessionId, isFile, data) {
|
|
pendingMsgs.get(sessionId).push([isFile, data]);
|
|
if (sessionId == currentSessionId) {
|
|
displayHistory();
|
|
}
|
|
}
|
|
function onSendingPendingMsgs(sessionId) {
|
|
document.getElementById("pending_msgs_indicator").classList.add("sending");
|
|
pendingMsgs.get(sessionId).length = 0;
|
|
if (sessionId == currentSessionId) {
|
|
displayHistory();
|
|
}
|
|
}
|
|
function onPendingMsgsSent(sessionId) {
|
|
document.getElementById("pending_msgs_indicator").classList.remove("sending");
|
|
}
|
|
function setLocalIps(strIPs) {
|
|
localIps = strIPs.split(' ');
|
|
}
|
|
function onIsContact(sessionId, verified, fingerprint, name) {
|
|
if (sessionsData.has(sessionId)) {
|
|
let session = sessionsData.get(sessionId);
|
|
session.isContact = true;
|
|
session.isVerified = verified;
|
|
onNameTold(sessionId, name);
|
|
} else {
|
|
addSession(sessionId, name, undefined, fingerprint, undefined, true, verified, false);
|
|
}
|
|
pendingMsgs.set(sessionId, []);
|
|
}
|
|
function onMsgOrFileReceived(sessionId, outgoing, body) {
|
|
if (currentSessionId == sessionId) {
|
|
displayHistory();
|
|
if (!document.hidden && !outgoing) {
|
|
socket.send("set_seen "+sessionId);
|
|
}
|
|
} else {
|
|
sessionsData.get(sessionId).seen = false;
|
|
displaySessions();
|
|
}
|
|
if (document.hidden && !outgoing) {
|
|
if (notificationAllowed) {
|
|
let sessionName = sessionsData.get(sessionId).name;
|
|
new Notification(sessionName, {
|
|
"body": body,
|
|
"icon": "/avatar/"+sessionId+"/"+sessionName+"?"+avatarTimestamps.get(sessionId)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
function onNewMessage(sessionId, outgoing, timestamp, msg) {
|
|
msgHistory.get(sessionId).push([outgoing, timestamp, false, msg]);
|
|
onMsgOrFileReceived(sessionId, outgoing, msg);
|
|
}
|
|
function onNewFile(sessionId, outgoing, timestamp, uuid, filename) {
|
|
msgHistory.get(sessionId).push([outgoing, timestamp, true, [uuid, filename]]);
|
|
onMsgOrFileReceived(sessionId, outgoing, filename);
|
|
}
|
|
function onNewFilesTransfer(sessionId, index, filesInfo) {
|
|
let split = filesInfo.split(' ');
|
|
let files = [];
|
|
for (let i=0; i<split.length; i += 4) {
|
|
files.push({
|
|
"file": undefined,
|
|
"name": b64DecodeUnicode(split[i]),
|
|
"size": parseInt(split[i+1]),
|
|
"transferred": parseInt(split[i+2]),
|
|
"lastChunk": parseInt(split[i+3])
|
|
});
|
|
}
|
|
pendingFilesTransfers.set(sessionId, {
|
|
"files": files,
|
|
"index": parseInt(index),
|
|
"state": "transferring"
|
|
});
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom();
|
|
}
|
|
}
|
|
function onAskLargeFiles(sessionId, encodedDownloadLocation, filesInfo) {
|
|
let sessionName = sessionsData.get(sessionId).name;
|
|
let mainDiv = document.createElement("div");
|
|
let h2 = document.createElement("h2");
|
|
h2.textContent = sessionName+" wants to send you some files:";
|
|
mainDiv.appendChild(h2);
|
|
let ul = document.createElement("ul");
|
|
let split = filesInfo.split(' ');
|
|
for (let i=0; i<split.length; i += 2) {
|
|
let p = document.createElement("p");
|
|
generateFileInfo(b64DecodeUnicode(split[i]), parseInt(split[i+1]), p);
|
|
let li = document.createElement("li");
|
|
li.appendChild(p);
|
|
ul.appendChild(li);
|
|
}
|
|
mainDiv.appendChild(ul);
|
|
let spanDownloadLocation = document.createElement("span");
|
|
spanDownloadLocation.textContent = b64DecodeUnicode(encodedDownloadLocation);
|
|
let pQuestion = document.createElement("p");
|
|
pQuestion.appendChild(document.createTextNode("Download them in "));
|
|
pQuestion.appendChild(spanDownloadLocation);
|
|
pQuestion.appendChild(document.createTextNode(" ?"));
|
|
mainDiv.appendChild(pQuestion);
|
|
let buttonRow = document.createElement("div");
|
|
buttonRow.classList.add("button_row");
|
|
let buttonDownload = document.createElement("button");
|
|
buttonDownload.classList.add("classic_button");
|
|
buttonDownload.textContent = "Download";
|
|
buttonDownload.onclick = function() {
|
|
removePopup();
|
|
let files = [];
|
|
for (let i=0; i<split.length; i += 2) {
|
|
files.push({
|
|
"file": undefined,
|
|
"name": b64DecodeUnicode(split[i]),
|
|
"size": parseInt(split[i+1]),
|
|
"transferred": 0,
|
|
"lastChunk": Date.now()
|
|
});
|
|
}
|
|
pendingFilesTransfers.set(sessionId, {
|
|
"files": files,
|
|
"index": 0,
|
|
"state": "transferring"
|
|
});
|
|
socket.send("download "+sessionId);
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom();
|
|
}
|
|
};
|
|
buttonRow.appendChild(buttonDownload);
|
|
let buttonRefuse = document.createElement("button");
|
|
buttonRefuse.classList.add("classic_button");
|
|
buttonRefuse.textContent = "Refuse";
|
|
buttonRefuse.onclick = function() {
|
|
removePopup();
|
|
socket.send("abort "+sessionId);
|
|
};
|
|
buttonRow.appendChild(buttonRefuse);
|
|
mainDiv.appendChild(buttonRow);
|
|
showPopup(mainDiv, false);
|
|
if (document.hidden && notificationAllowed) {
|
|
new Notification(sessionName, {
|
|
"body": "Files download request",
|
|
"icon": "/avatar/"+sessionId+"/"+sessionName+"?"+avatarTimestamps.get(sessionId)
|
|
});
|
|
}
|
|
}
|
|
function onFilesAccepted(sessionId) {
|
|
if (pendingFilesTransfers.has(sessionId)) {
|
|
sendNextLargeFile(sessionId);
|
|
}
|
|
}
|
|
function onFilesTransferAborted(sessionId) {
|
|
if (pendingFilesTransfers.has(sessionId)) {
|
|
pendingFilesTransfers.get(sessionId).state = "aborted";
|
|
if (sessionId == currentSessionId) {
|
|
displayChatBottom();
|
|
}
|
|
}
|
|
}
|
|
function onIncFilesTransfer(sessionId, chunkSize) {
|
|
if (pendingFilesTransfers.has(sessionId)) {
|
|
let filesTransfer = pendingFilesTransfers.get(sessionId);
|
|
let fileTransfer = filesTransfer.files[filesTransfer.index];
|
|
fileTransfer.transferred += chunkSize;
|
|
let now = Date.now();
|
|
let speed = chunkSize/(now-fileTransfer.lastChunk)*1000;
|
|
fileTransfer.lastChunk = now;
|
|
if (fileTransfer.transferred >= fileTransfer.size) {
|
|
if (filesTransfer.index == filesTransfer.files.length-1) {
|
|
filesTransfer.state = "completed";
|
|
socket.send("sending_ended "+sessionId);
|
|
} else {
|
|
filesTransfer.index += 1;
|
|
if (typeof fileTransfer.file !== "undefined") {
|
|
sendNextLargeFile(sessionId);
|
|
}
|
|
}
|
|
}
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom(speed);
|
|
}
|
|
}
|
|
}
|
|
function onMsgsLoad(sessionId, strMsgs) {
|
|
let msgs = strMsgs.split(' ');
|
|
if (msgs.length > 3) {
|
|
let n = 0;
|
|
while (n < msgs.length) {
|
|
let outgoing = msgs[n+1] === "true";
|
|
let timestamp = parseTimestamp(msgs[n+2]);
|
|
switch (msgs[n]) {
|
|
case 'm':
|
|
let msg = b64DecodeUnicode(msgs[n+3]);
|
|
msgHistory.get(sessionId).unshift([outgoing, timestamp, false, msg]);
|
|
n += 4;
|
|
break;
|
|
case 'f':
|
|
let uuid = msgs[n+3];
|
|
let fileName = b64DecodeUnicode(msgs[n+4]);
|
|
msgHistory.get(sessionId).unshift([outgoing, timestamp, true, [uuid, fileName]]);
|
|
n += 5;
|
|
}
|
|
}
|
|
if (currentSessionId == sessionId) {
|
|
if (msgLog.scrollHeight - msgLog.scrollTop === msgLog.clientHeight) {
|
|
displayHistory();
|
|
} else {
|
|
let backupHeight = msgLog.scrollHeight;
|
|
displayHistory(false);
|
|
msgLog.scrollTop = msgLog.scrollHeight-backupHeight;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function onDisconnected(sessionId) {
|
|
pendingFilesTransfers.delete(sessionId);
|
|
let session = sessionsData.get(sessionId);
|
|
if (session.isContact) {
|
|
session.isOnline = false;
|
|
} else {
|
|
sessionsData.delete(sessionId);
|
|
}
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom();
|
|
scrollHistoryToBottom();
|
|
}
|
|
if (currentSessionId == sessionId && !session.isContact) {
|
|
currentSessionId = -1;
|
|
chatHeader.classList.add("offline");
|
|
}
|
|
displaySessions();
|
|
}
|
|
function onNameSet(newName) {
|
|
removePopup();
|
|
identityName = newName;
|
|
displayProfile();
|
|
}
|
|
function onPasswordChanged(success, isProtected) {
|
|
if (success) {
|
|
removePopup();
|
|
isIdentityProtected = isProtected;
|
|
} else {
|
|
let input = document.querySelector("input[type=\"password\"]");
|
|
input.value = "";
|
|
let errorMsg = document.getElementById("password_errorMsg");
|
|
errorMsg.textContent = "Operation failed. Please check your old password.";
|
|
}
|
|
}
|
|
|
|
function sendNextLargeFile(sessionId) {
|
|
let filesTransfer = pendingFilesTransfers.get(sessionId);
|
|
filesTransfer.state = "transferring";
|
|
let fileTransfer = filesTransfer.files[filesTransfer.index];
|
|
fileTransfer.lastChunk = Date.now();
|
|
if (currentSessionId == sessionId) {
|
|
displayChatBottom();
|
|
}
|
|
let formData = new FormData();
|
|
formData.append("session_id", currentSessionId);
|
|
formData.append("", fileTransfer.file);
|
|
fetch("/send_large_file", {method: "POST", body: formData}).then(response => {
|
|
if (!response.ok) {
|
|
console.log(response);
|
|
}
|
|
});
|
|
}
|
|
function refreshAvatar(selector, sessionId) {
|
|
let avatar = document.querySelector(selector);
|
|
if (avatar !== null) {
|
|
if (typeof sessionId === "undefined") {
|
|
avatar.src = "/avatar/self?"+avatarTimestamps.get("self");
|
|
} else {
|
|
avatar.src = "/avatar/"+sessionId+"/"+sessionsData.get(sessionId).name+"?"+avatarTimestamps.get(sessionId);
|
|
}
|
|
}
|
|
}
|
|
function refreshSelfAvatar() {
|
|
refreshAvatar("#avatarContainer .avatar");
|
|
displayProfile();
|
|
if (currentSessionId != -1) {
|
|
displayHistory(false);
|
|
}
|
|
}
|
|
function beautifyFingerprint(f) {
|
|
for (let i=4; i<f.length; i+=5) {
|
|
f = f.slice(0, i)+" "+f.slice(i);
|
|
}
|
|
return f;
|
|
}
|
|
function generateSessionField(name, value) {
|
|
let div = document.createElement("div");
|
|
div.classList.add("session_field");
|
|
let pName = document.createElement("p");
|
|
pName.textContent = name+':';
|
|
div.appendChild(pName);
|
|
let pValue = document.createElement("p");
|
|
pValue.textContent = value;
|
|
div.appendChild(pValue);
|
|
return div;
|
|
}
|
|
function showSessionInfoPopup() {
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session !== "undefined") {
|
|
let mainDiv = document.createElement("div");
|
|
mainDiv.id = "session_info";
|
|
mainDiv.appendChild(generateAvatar(currentSessionId, session.name, avatarTimestamps.get(currentSessionId)));
|
|
let nameDiv = document.createElement("div");
|
|
nameDiv.classList.add("name");
|
|
let h2 = document.createElement("h2");
|
|
h2.textContent = session.name;
|
|
nameDiv.appendChild(h2);
|
|
if (session.isOnline) {
|
|
let button = document.createElement("button");
|
|
button.onclick = function() {
|
|
socket.send("refresh_profile "+currentSessionId);
|
|
};
|
|
nameDiv.appendChild(button);
|
|
}
|
|
mainDiv.appendChild(nameDiv);
|
|
if (session.isOnline) {
|
|
mainDiv.appendChild(generateSessionField("Peer IP", session.ip));
|
|
let connection;
|
|
if (session.outgoing) {
|
|
connection = generateSessionField("Connection", "outgoing");
|
|
} else {
|
|
connection = generateSessionField("Connection", "incoming");
|
|
}
|
|
mainDiv.appendChild(connection);
|
|
}
|
|
if (session.isContact) {
|
|
mainDiv.appendChild(generateSessionField("Is contact", "yes"));
|
|
let isVerified;
|
|
if (session.isVerified) {
|
|
isVerified = generateSessionField("Is verified", "yes");
|
|
} else {
|
|
isVerified = generateSessionField("Is verified", "no");
|
|
}
|
|
mainDiv.appendChild(isVerified);
|
|
} else {
|
|
mainDiv.appendChild(generateSessionField("Is contact", "no"));
|
|
}
|
|
mainDiv.appendChild(generateSessionField("Fingerprint", beautifyFingerprint(session.fingerprint)));
|
|
showPopup(mainDiv);
|
|
}
|
|
}
|
|
function addSession(sessionId, name, outgoing, fingerprint, ip, isContact, isVerified, isOnline) {
|
|
sessionsData.set(sessionId, {
|
|
"name": name,
|
|
"outgoing": outgoing,
|
|
"fingerprint": fingerprint,
|
|
"ip": ip,
|
|
"isContact": isContact,
|
|
"isVerified": isVerified,
|
|
"seen": true,
|
|
"isOnline": isOnline,
|
|
});
|
|
msgHistory.set(sessionId, []);
|
|
avatarTimestamps.set(sessionId, Date.now());
|
|
displaySessions();
|
|
}
|
|
function displaySessions() {
|
|
let onlineSessions = document.getElementById("online_sessions");
|
|
onlineSessions.innerHTML = "";
|
|
let offlineSessions = document.getElementById("offline_sessions");
|
|
offlineSessions.innerHTML = "";
|
|
sessionsData.forEach(function (session, sessionId) {
|
|
let sessionElement = generateSession(sessionId, session);
|
|
if (session.isOnline) {
|
|
onlineSessions.appendChild(sessionElement);
|
|
} else {
|
|
offlineSessions.appendChild(sessionElement) ;
|
|
}
|
|
});
|
|
}
|
|
function logout() {
|
|
window.location = "/logout";
|
|
}
|
|
function displayProfile() {
|
|
profileDiv.innerHTML = "";
|
|
profileDiv.appendChild(generateSelfAvatar(avatarTimestamps.get("self")));
|
|
let p = document.createElement("p");
|
|
p.textContent = identityName;
|
|
profileDiv.appendChild(p);
|
|
}
|
|
function displayHeader() {
|
|
chatHeader.children[0].innerHTML = "";
|
|
chatHeader.className = 0;
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session === "undefined") {
|
|
chatHeader.style.display = "none";
|
|
} else {
|
|
chatHeader.children[0].appendChild(generateAvatar(currentSessionId, session.name, avatarTimestamps.get(currentSessionId)));
|
|
chatHeader.children[0].appendChild(generateName(session.name));
|
|
chatHeader.style.display = "flex";
|
|
if (session.isContact) {
|
|
chatHeader.classList.add("is_contact");
|
|
if (session.isVerified) {
|
|
chatHeader.classList.add("is_verified");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function generatePopupWarningTitle() {
|
|
let h2 = document.createElement("h2");
|
|
h2.classList.add("warning");
|
|
h2.textContent = "Warning!";
|
|
return h2;
|
|
}
|
|
function generateSwitchPreference(title, summary, checked, onSwitch) {
|
|
let label = document.createElement("label");
|
|
label.classList.add("switch_preference");
|
|
let divDesc = document.createElement("div");
|
|
divDesc.classList.add("preference_description");
|
|
let h3 = document.createElement("h3");
|
|
h3.textContent = title;
|
|
divDesc.appendChild(h3);
|
|
let pSummary = document.createElement("p");
|
|
pSummary.textContent = summary;
|
|
divDesc.appendChild(pSummary);
|
|
label.appendChild(divDesc);
|
|
let switchDiv = document.createElement("div");
|
|
switchDiv.classList.add("switch");
|
|
let input = document.createElement("input");
|
|
input.type = "checkbox";
|
|
input.checked = checked;
|
|
input.onchange = function() {
|
|
onSwitch(input.checked);
|
|
};
|
|
switchDiv.appendChild(input);
|
|
let span = document.createElement("span");
|
|
switchDiv.appendChild(span);
|
|
label.appendChild(switchDiv);
|
|
return label;
|
|
}
|
|
function generateName(name) {
|
|
let p = document.createElement("p");
|
|
if (typeof name == "undefined") {
|
|
p.appendChild(document.createTextNode("Unknown"));
|
|
} else {
|
|
p.appendChild(document.createTextNode(name));
|
|
}
|
|
return p;
|
|
}
|
|
function generateSession(sessionId, session) {
|
|
let li = document.createElement("li");
|
|
li.setAttribute("data-sessionId", sessionId);
|
|
li.appendChild(generateAvatar(sessionId, session.name, avatarTimestamps.get(sessionId)));
|
|
li.appendChild(generateName(session.name));
|
|
if (session.isContact) {
|
|
li.classList.add("is_contact");
|
|
}
|
|
if (session.isVerified) {
|
|
li.classList.add("is_verified");
|
|
}
|
|
if (!session.seen) {
|
|
li.classList.add("not_seen");
|
|
}
|
|
if (sessionId == currentSessionId) {
|
|
li.classList.add("current");
|
|
}
|
|
li.onclick = onClickSession;
|
|
return li;
|
|
}
|
|
function generateMsgHeader(name, sessionId) {
|
|
let p = document.createElement("p");
|
|
p.appendChild(document.createTextNode(name));
|
|
let div = document.createElement("div");
|
|
div.classList.add("header");
|
|
let avatar;
|
|
if (typeof sessionId === "undefined") {
|
|
avatar = generateSelfAvatar(avatarTimestamps.get("self"));
|
|
} else {
|
|
avatar = generateAvatar(sessionId, name, avatarTimestamps.get(sessionId));
|
|
}
|
|
div.appendChild(avatar);
|
|
div.appendChild(p);
|
|
return div;
|
|
}
|
|
function generateMessageTimestamp(timestamp) {
|
|
let p = document.createElement("p");
|
|
p.classList.add("timestamp");
|
|
p.title = timestamp;
|
|
p.textContent = toTwoNumbers(timestamp.getHours())+":"+toTwoNumbers(timestamp.getMinutes());
|
|
return p;
|
|
}
|
|
function generateMessage(name, sessionId, msg) {
|
|
let p = document.createElement("p");
|
|
p.appendChild(document.createTextNode(msg));
|
|
let div = document.createElement("div");
|
|
div.classList.add("content");
|
|
div.appendChild(linkifyElement(p));
|
|
let divContainer = document.createElement("div");
|
|
if (typeof name !== "undefined") {
|
|
divContainer.appendChild(generateMsgHeader(name, sessionId));
|
|
}
|
|
divContainer.appendChild(div);
|
|
return divContainer;
|
|
}
|
|
function generateFile(name, sessionId, outgoing, fileInfo) {
|
|
let div1 = document.createElement("div");
|
|
div1.classList.add("file");
|
|
div1.classList.add("content");
|
|
let div2 = document.createElement("div");
|
|
let h4 = document.createElement("h4");
|
|
if (outgoing) {
|
|
h4.textContent = "File sent:";
|
|
} else {
|
|
h4.textContent = "File received:";
|
|
}
|
|
div2.appendChild(h4);
|
|
div1.appendChild(div2);
|
|
let p = document.createElement("p");
|
|
if (typeof fileInfo === "string") { //pending
|
|
p.textContent = fileInfo;
|
|
} else {
|
|
p.textContent = fileInfo[1];
|
|
let a = document.createElement("a");
|
|
a.href = "/load_file?uuid="+fileInfo[0]+"&file_name="+encodeURIComponent(fileInfo[1]);
|
|
a.target = "_blank";
|
|
div1.appendChild(a);
|
|
}
|
|
div2.appendChild(p);
|
|
let divContainer = document.createElement("div");
|
|
if (typeof name !== "undefined") {
|
|
divContainer.appendChild(generateMsgHeader(name, sessionId));
|
|
}
|
|
divContainer.appendChild(div1);
|
|
return divContainer;
|
|
}
|
|
function generateFileInfo(fileName, fileSize, p) {
|
|
let span = document.createElement("span");
|
|
span.textContent = fileName;
|
|
p.appendChild(span);
|
|
p.appendChild(document.createTextNode(" ("+humanFileSize(fileSize)+")"));
|
|
}
|
|
function displayChatBottom(speed = undefined) {
|
|
let msgBox = document.getElementById("message_box");
|
|
let fileTransfer = document.getElementById("file_transfer");
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session === "undefined") {
|
|
msgBox.classList.remove("active");
|
|
fileTransfer.classList.remove("active");
|
|
} else {
|
|
if (session.isContact || session.isOnline) {
|
|
msgBox.classList.add("active");
|
|
}
|
|
if (session.isOnline) {
|
|
msgBox.classList.add("online");
|
|
} else {
|
|
msgBox.classList.remove("online");
|
|
}
|
|
if (pendingFilesTransfers.has(currentSessionId)) {
|
|
let fileInfo = document.getElementById("file_info");
|
|
fileInfo.innerHTML = "";
|
|
let filesTransfer = pendingFilesTransfers.get(currentSessionId);
|
|
let file = filesTransfer.files[filesTransfer.index];
|
|
fileInfo.appendChild(document.createTextNode(filesTransfer.index+1+"/"+filesTransfer.files.length+": "));
|
|
generateFileInfo(file.name, file.size, fileInfo);
|
|
let fileProgress = document.getElementById("file_progress");
|
|
fileProgress.style.display = "none"; //hide by default
|
|
let fileStatus = document.getElementById("file_status");
|
|
fileStatus.removeAttribute("style"); //show by default
|
|
let fileCancel = document.getElementById("file_cancel");
|
|
fileCancel.style.display = "none"; //hide by default
|
|
document.querySelector("#file_progress_bar>div").style.width = 0;
|
|
switch (filesTransfer.state) {
|
|
case "transferring":
|
|
fileCancel.removeAttribute("style"); //show
|
|
fileStatus.style.display = "none";
|
|
fileProgress.removeAttribute("style"); //show
|
|
let percent = (file.transferred/file.size)*100;
|
|
document.getElementById("file_percent").textContent = percent.toFixed(2)+"%";
|
|
if (typeof speed !== "undefined") {
|
|
document.getElementById("file_speed").textContent = humanFileSize(speed)+"/s";
|
|
}
|
|
document.querySelector("#file_progress_bar>div").style.width = Math.round(percent)+"%";
|
|
break;
|
|
case "waiting":
|
|
fileStatus.textContent = "Waiting for peer confirmation...";
|
|
break;
|
|
case "aborted":
|
|
fileStatus.textContent = "Transfer aborted.";
|
|
pendingFilesTransfers.delete(currentSessionId);
|
|
break;
|
|
case "completed":
|
|
fileStatus.textContent = "Transfer completed.";
|
|
pendingFilesTransfers.delete(currentSessionId);
|
|
}
|
|
fileTransfer.classList.add("active");
|
|
} else {
|
|
fileTransfer.classList.remove("active");
|
|
}
|
|
}
|
|
}
|
|
function scrollHistoryToBottom() {
|
|
msgLog.scrollTop = msgLog.scrollHeight;
|
|
}
|
|
function displayHistory(scrollToBottom = true) {
|
|
msgLog.innerHTML = "";
|
|
let session = sessionsData.get(currentSessionId);
|
|
if (typeof session === "undefined") {
|
|
msgLog.style.display = "none";
|
|
} else {
|
|
msgLog.style.display = "block";
|
|
let previousOutgoing = undefined;
|
|
msgHistory.get(currentSessionId).forEach(entry => {
|
|
let name = undefined;
|
|
let sessionId = undefined;
|
|
if (previousOutgoing != entry[0]) {
|
|
previousOutgoing = entry[0];
|
|
if (entry[0]) { //outgoing msg
|
|
name = identityName;
|
|
} else {
|
|
name = session.name;
|
|
sessionId = currentSessionId;
|
|
}
|
|
}
|
|
let div;
|
|
if (entry[2]) { //is file
|
|
div = generateFile(name, sessionId, entry[0], entry[3]);
|
|
} else {
|
|
div = generateMessage(name, sessionId, entry[3]);
|
|
}
|
|
let li = document.createElement("li");
|
|
li.appendChild(div);
|
|
li.appendChild(generateMessageTimestamp(entry[1]));
|
|
msgLog.appendChild(li);
|
|
});
|
|
if (session.isContact) {
|
|
let msgs = pendingMsgs.get(currentSessionId);
|
|
if (msgs.length > 0) {
|
|
let li = document.createElement("li");
|
|
li.classList.add("pending_msgs_divider");
|
|
let h4 = document.createElement("h4");
|
|
h4.textContent = "Pending messages:";
|
|
li.appendChild(h4);
|
|
msgLog.appendChild(li);
|
|
msgs.forEach(entry => {
|
|
let name = undefined;
|
|
if (previousOutgoing != true) {
|
|
previousOutgoing = true;
|
|
name = identityName;
|
|
}
|
|
let div;
|
|
if (entry[0]) { //is file
|
|
div = generateFile(name, undefined, true, entry[1]);
|
|
} else {
|
|
div = generateMessage(name, undefined, entry[1]);
|
|
}
|
|
let li = document.createElement("li");
|
|
li.appendChild(div);
|
|
msgLog.appendChild(li);
|
|
});
|
|
}
|
|
}
|
|
if (scrollToBottom) {
|
|
scrollHistoryToBottom();
|
|
}
|
|
if (msgLog.scrollHeight <= msgLog.clientHeight && session.isContact) {
|
|
socket.send("load_msgs "+currentSessionId);
|
|
}
|
|
}
|
|
}
|