From ff4d5ae3440ea935612b484c78d6382874a465ad Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Fri, 5 Mar 2021 17:49:51 +0100 Subject: [PATCH] Upgrade conversation page --- .../css/pages/conversations/conversation.css | 5 + .../js/components/conversations/interface.js | 1 + assets/js/pages/conversations/conversation.js | 220 +++++++++--------- 3 files changed, 121 insertions(+), 105 deletions(-) diff --git a/assets/css/pages/conversations/conversation.css b/assets/css/pages/conversations/conversation.css index ca57bd5b..bf036924 100644 --- a/assets/css/pages/conversations/conversation.css +++ b/assets/css/pages/conversations/conversation.css @@ -61,4 +61,9 @@ .big-box-conversation .direct-chat-text .a, .big-box-conversation .direct-chat-text a { color: white; +} + +.big-box-conversation .direct-chat-msg .srv-msg { + text-align: center; + font-style: italic; } \ No newline at end of file diff --git a/assets/js/components/conversations/interface.js b/assets/js/components/conversations/interface.js index 4ab038d3..2decfbb0 100644 --- a/assets/js/components/conversations/interface.js +++ b/assets/js/components/conversations/interface.js @@ -488,6 +488,7 @@ ComunicWeb.components.conversations.interface = ConversationsInterface; * Get information about a single conversation * * @param {number} convID The ID of the target conversation + * @returns {Promise} */ async function getSingleConversation(convID) { return new Promise((res, err) => { diff --git a/assets/js/pages/conversations/conversation.js b/assets/js/pages/conversations/conversation.js index cd45698f..858338cd 100644 --- a/assets/js/pages/conversations/conversation.js +++ b/assets/js/pages/conversations/conversation.js @@ -49,7 +49,7 @@ const ConversationPageConvPart = { initTopScrollDetection: false, //Related user information - users: null, + users: new UsersList(), }; //Create conversation box @@ -118,25 +118,37 @@ const ConversationPageConvPart = { const convInfo = await getSingleConversation(convID); //Save conversation information - ComunicWeb.pages.conversations.conversation._conv_info.conversation = convInfo; + this._conv_info.conversation = convInfo; //Time to load user information - ComunicWeb.user.userInfos.getMultipleUsersInfo(convInfo.members, function(membersInfo){ + this._conv_info.users = await getUsers(convInfo.members.map(u => u.user_id)) + + //Remove loading message + loadingMsg.remove(); - //Check for errors - if(membersInfo.error) - return loadingMsg.innerHTML = "An error occuredd while loading conversation members information !"; + //Get and apply the name of the conversation + this._conv_info.window.title.innerHTML = await getConvName(convInfo); - //Save members information - ComunicWeb.pages.conversations.conversation._conv_info.users = membersInfo; + //Add send message form + this.addSendMessageForm(); - //Remove loading message - loadingMsg.remove(); + // Register the conversation + await ConversationsInterface.register(this._conv_info.id); - //Perform next steps - ComunicWeb.pages.conversations.conversation.onGotInfo(convInfo); + // Get the last message + const list = await ConversationsInterface.asyncRefreshSingle(this._conv_info.id, 0); - }); + // Apply the list of messages + ConversationPageConvPart.applyMessages(list) + + // Automatically unregister conversations when it becoms required + let reg = true; + document.addEventListener("changeURI", async () => { + if(reg) { + reg = false; + await ConversationsInterface.unregister(convID); + } + }, {once: true}) // Add call button (if possible) if(convInfo.can_have_call) { @@ -157,51 +169,6 @@ const ConversationPageConvPart = { } }, - /** - * Perform action when we got conversation information - * - * @param {Object} info Information about the conversation - */ - onGotInfo: async function(info){ - - try { - //Get and apply the name of the conversation - ComunicWeb.components.conversations.utils.getName(info, function(name){ - ComunicWeb.pages.conversations.conversation._conv_info.window.title.innerHTML = name; - }); - - //Add send message form - this.addSendMessageForm(); - - //Defines an intervall to refresh the conversation - const windowBody = this._conv_info.window.body; - - // Register the conversation - await ComunicWeb.components.conversations.interface.register(this._conv_info.id); - - // Get the last message - const list = await ComunicWeb.components.conversations.interface.asyncRefreshSingle(this._conv_info.id, 0); - - // Apply the list of messages - this.applyMessages(list) - - // Automatically unregister conversations when it becoms required - let reg = true; - const convID = this._conv_info.id; - document.addEventListener("changeURI", async () => { - if(reg) { - reg = false; - await ComunicWeb.components.conversations.interface.unregister(convID); - } - }) - - - } catch(e) { - console.error(e) - notify("Could not refresh conversation!", "danger") - } - }, - /** * Apply a new list of messages */ @@ -213,42 +180,40 @@ const ConversationPageConvPart = { //Process the list of messages list.forEach(function(message){ - ComunicWeb.pages.conversations.conversation.addMessage(message); + ConversationPageConvPart.addMessage(message); }); //Init top scroll detection (if available) - ComunicWeb.pages.conversations.conversation.initTopScrollDetection(); + ConversationPageConvPart.initTopScrollDetection(); }, /** - * Add a message to the list - * - * @param {Object} info Information about the message to add + * @param {ConversationMessage} msg */ - addMessage: function(info){ + addMessage: function(msg) { //Check if the message is to add at the begining of the end of conversation var toLatestMessages = true; //Check if it is the first processed message if(this._conv_info.first_message_id == -1){ - this._conv_info.last_message_id = info.ID; - this._conv_info.first_message_id = info.ID; + this._conv_info.last_message_id = msg.id; + this._conv_info.first_message_id = msg.id; } //Check if it is a message to add to the oldest messages - else if(this._conv_info.first_message_id > info.ID) { - this._conv_info.first_message_id = info.ID; + else if(this._conv_info.first_message_id > msg.id) { + this._conv_info.first_message_id = msg.id; var toLatestMessages = false; //Message to add to the begining } //Message is to add to the latest messages else { - this._conv_info.last_message_id = info.ID; + this._conv_info.last_message_id = msg.id; } //Determine wether the current user is the owner or not of the message - var userIsOwner = userID() == info.ID_user; + var userIsOwner = userID() == msg.user_id; //Create message container var messageContainer = createElem2({ @@ -261,11 +226,29 @@ const ConversationPageConvPart = { this._conv_info.window.messagesTarget.appendChild(messageContainer); } else { - //Put the message in the begining this._conv_info.window.messagesTarget.insertBefore(messageContainer, this._conv_info.window.messagesTarget.firstChild); } + if (msg.user_id != null && msg.user_id > 0) + this.addUserMessage(msg, messageContainer); + else + this.addServerMessage(msg, messageContainer); + + //Set a timeout to make scroll properly work (for newest messages) + if(toLatestMessages){ + setTimeout(function(){ + messageContainer.parentNode.scrollTop = messageContainer.parentNode.scrollHeight + }, 100); + } + }, + + /** + * Add a message sent by a user to the list + * + * @param {ConversationMessage} info Information about the message to add + */ + addUserMessage: function(info, messageContainer){ //Top message information var topInformation = createElem2({ appendTo: messageContainer, @@ -286,7 +269,7 @@ const ConversationPageConvPart = { appendTo: topInformation, type: "span", class: "direct-chat-timestamp", - innerHTML: ComunicWeb.common.date.timeDiffToStr(info.time_insert) + innerHTML: ComunicWeb.common.date.timeDiffToStr(info.time_sent) }); //Add user account image @@ -303,7 +286,7 @@ const ConversationPageConvPart = { type: "div", class: "direct-chat-text", }); - messageContentContainer.setAttribute("data-chatpage-msg-text-id", info.ID) + messageContentContainer.setAttribute("data-chatpage-msg-text-id", info.id) //Message content var messageContent = createElem2({ @@ -316,46 +299,73 @@ const ConversationPageConvPart = { //Parse message content ComunicWeb.components.textParser.parse({ element: messageContent, - user: this._conv_info.users["user-" + info.ID_user] + user: this._conv_info.users.get(info.user_id) }); - //Message image (if any) - if(info.image_path != null){ + //Message file (if any) + if(info.file != null){ + const messageFile = info.file; - //Image link - var imageLink = createElem2({ - appendTo: messageContentContainer, - type: "a", - href: info.image_path - }); - - //Apply image - createElem2({ - appendTo: imageLink, - type: "img", - class: "message-img", - src: info.image_path - }); - - imageLink.onclick = function(){ - $(this).ekkoLightbox({ - alwaysShowClose: true, + if (messageFile.type == "image/png") { + var imageLink = createElem2({ + appendTo: messageContentContainer, + type: "a", + href: messageFile.url }); - return false; - }; + + //Apply image + createElem2({ + appendTo: imageLink, + type: "img", + class: "message-img", + src: messageFile.thumbnail == null ? messageFile.url : messageFile.thumbnail + }); + + imageLink.onclick = function(){ + $(this).ekkoLightbox({ + alwaysShowClose: true, + }); + return false; + }; + } + + // Fallback + else { + let letFileLink = createElem2({ + appendTo: messageContentContainer, + type: "a", + href: messageFile.url, + innerHTML: " "+ messageFile.name + " (" + messageFile.size/1024 + "MB)", + }) + letFileLink.target = "_blank" + } } //Apply user information (if available) - if(this._conv_info.users["user-" + info.ID_user]){ - accountImage.src = this._conv_info.users["user-" + info.ID_user].accountImage; - nameContainer.innerHTML = userFullName(this._conv_info.users["user-" + info.ID_user]); + let user = this._conv_info.users.get(info.user_id); + if(user) { + accountImage.src = user.image; + nameContainer.innerHTML = user.fullName; } + }, - //Set a timeout to make scroll properly work (for newest messages) - if(toLatestMessages){ - setTimeout(function(){ - messageContainer.parentNode.scrollTop = messageContainer.parentNode.scrollHeight - }, 100); + /** + * @param {ConversationMessage} msg + */ + async addServerMessage(msg, target) { + try { + const ids = ConversationsUtils.getUsersIDForMessage(msg); + const users = await getUsers(ids); + + createElem2({ + appendTo: target, + class: "srv-msg", + innerHTML: ConversationsUtils.getServerMessage(msg, users), + }) + } + catch(e) { + console.error(e); + notify(tr("Failed to load a message!")) } }, @@ -584,7 +594,7 @@ const ConversationPageConvPart = { //Process the list of messages in reverse order response.forEach(function(message){ - ComunicWeb.pages.conversations.conversation.addMessage(message); + ConversationPageConvPart.addMessage(message); }); //Scroll to newest message