Skip to content

Commit 19a9007

Browse files
pardeep-kumar-bspardeep-kumar-bs
authored
Merge pull request #2 from ChannelizeIO/feature/issue-fixes
Feature/issue fixes
2 parents 5d02fb6 + ab65295 commit 19a9007

File tree

2 files changed

+97
-47
lines changed

2 files changed

+97
-47
lines changed

‎live-stream/src/js/components/conversation.js‎

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -534,10 +534,14 @@ class Conversation {
534534
}
535535

536536
// Remove the last message date time elements.
537-
if (loadMoreMessages) {
538-
let lastMessageDateTimeEle = document.getElementById("ch_msg_datetime_" + this.messages[this.messages.length - 1]['id']);
539-
if (lastMessageDateTimeEle) {
540-
lastMessageDateTimeEle.remove();
537+
if (loadMoreMessages && messages.length) {
538+
if ( moment(new Date(messages[0].createdAt)).format('DD/MM/YYYY') ==
539+
moment(new Date(this.messages[this.messages.length - 1].createdAt)).format('DD/MM/YYYY')
540+
){
541+
let lastMessageDateTimeEle = document.getElementById("ch_msg_datetime_" + this.messages[this.messages.length - 1]['id']);
542+
if (lastMessageDateTimeEle) {
543+
lastMessageDateTimeEle.remove();
544+
}
541545
}
542546
}
543547

@@ -901,7 +905,7 @@ class Conversation {
901905
let messagesBox = document.getElementById("ch_messages_box");
902906

903907
// Create message frame
904-
this._createMessageBubble(msgData, messagesBox, false, true);
908+
this._createMessageBubble(msgData, messagesBox, true, true);
905909
}
906910

907911
_getMessages(conversation, limit, skip, cb) {
@@ -989,7 +993,7 @@ class Conversation {
989993
message.createdAt = new Date();
990994

991995
// Create message frame
992-
this._createMessageBubble(message, messagesBox, false);
996+
this._createMessageBubble(message, messagesBox, true, false);
993997
}
994998

995999
_createMessageReactionFrame(message, parentDiv) {
@@ -1681,31 +1685,46 @@ class Conversation {
16811685
}
16821686
}
16831687

1684-
_isDateDiffShown(messageId) {
1685-
const messageIndex = this.messages.findIndex(message => message.id == messageId);
1688+
_isDateDiffShown(currentMsgId, lastMsgId, isNewMessage) {
1689+
const messageIndex = this.messages.findIndex(message => message.id == currentMsgId);
16861690
if (messageIndex == -1) {
16871691
return false;
16881692
}
1693+
const currentMsgDate = moment(new Date(this.messages[messageIndex].createdAt)).format('DD/MM/YYYY');
1694+
if (isNewMessage) {
1695+
// This in only one message.
1696+
if (!lastMsgId) {
1697+
return true;
1698+
}
1699+
const lastMsgIndex = this.messages.findIndex(message => message.id == lastMsgId);
1700+
if (lastMsgIndex == -1) {
1701+
return true;
1702+
}
1703+
const lastMsgDate = moment(new Date(this.messages[lastMsgIndex].createdAt)).format('DD/MM/YYYY');
1704+
if (currentMsgDate != lastMsgDate) {
1705+
return true;
1706+
}
1707+
return false;
1708+
}
16891709

16901710
if (!this.messages[messageIndex + 1]) {
16911711
return true;
16921712
}
16931713

1694-
const currentMsgDate = moment(new Date(this.messages[messageIndex].createdAt)).format('DD/MM/YYYY');
16951714
const nextMsgDate = moment(new Date(this.messages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1696-
16971715
if (currentMsgDate != nextMsgDate) {
16981716
return true;
16991717
}
1700-
return false
1718+
return false;
17011719
}
17021720

1703-
_createMessageBubble(message, messagesBox, showDateDiff = true, isPendingMessage = false) {
1721+
_createMessageBubble(message, messagesBox, isNewMessage = false, isPendingMessage = false) {
17041722
// Create message list
1723+
const lastMsgId = messagesBox.lastChild && messagesBox.lastChild.id;
1724+
17051725
let msgBubbleEleAttributes = [{"id":message.id},{"class":"ch-msg-bubble"}];
17061726
let msgBubbleEle = this.utility.createElement("div", msgBubbleEleAttributes, null, messagesBox);
1707-
1708-
if(showDateDiff && this._isDateDiffShown(message.id)) {
1727+
if(!isPendingMessage && this._isDateDiffShown(message.id, lastMsgId, isNewMessage)) {
17091728
let msgDateTimeAttributes = [{"id":"ch_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
17101729
this.utility.createElement("div", msgDateTimeAttributes, this.utility.formatDate(message.createdAt), msgBubbleEle);
17111730
}
@@ -1736,7 +1755,7 @@ class Conversation {
17361755
let msgContainer = this.utility.createElement("div", msgContainerAttributes, null, msgBubbleEle);
17371756

17381757
// Create message more options
1739-
let moreOptionAttributes = [{"class":"ch-msg-more-option ch-right"},{"title":LANGUAGE_PHRASES.MORE_OPTIONS}];
1758+
let moreOptionAttributes = [{"id":"ch_message_more_option_" + message.id},{"class":"ch-msg-more-option ch-right"},{"title":LANGUAGE_PHRASES.MORE_OPTIONS}];
17401759
let moreOption = this.utility.createElement("i", moreOptionAttributes, "more_vert", msgBubbleEle);
17411760
moreOption.classList.add("material-icons");
17421761

@@ -1749,7 +1768,7 @@ class Conversation {
17491768

17501769
// Create add reaction div.
17511770
if (this.reactionsSetting.enable && message.ownerId != this.liveStream.userId && !message.isDeleted) {
1752-
let addReactionEleAttributes = [{"class":"ch-add-reaction-option"},{"title":LANGUAGE_PHRASES.REACT_TO_THIS_MESSAGE}];
1771+
let addReactionEleAttributes = [{"id":"ch_message_insert_emoticon_" + message.id},{"class":"ch-add-reaction-option"},{"title":LANGUAGE_PHRASES.REACT_TO_THIS_MESSAGE}];
17531772
let addReactionEle = this.utility.createElement("i", addReactionEleAttributes, "insert_emoticon", msgBubbleEle);
17541773
addReactionEle.classList.add("material-icons");
17551774

@@ -1821,11 +1840,10 @@ class Conversation {
18211840
});
18221841
}
18231842

1824-
// Update listener of deleted message
1825-
let targetMessage = document.getElementById(messageId)
1826-
if (targetMessage) {
1827-
let deletedMsgOptionBtn = targetMessage.lastChild;
1828-
deletedMsgOptionBtn.addEventListener("click", data => {
1843+
// Update more option listener of deleted message
1844+
let moreOptionBtn = document.getElementById("ch_message_more_option_" + messageId);
1845+
if (moreOptionBtn) {
1846+
moreOptionBtn.addEventListener("click", data => {
18291847
// Remove delete for everyone option
18301848
let deleteForEveryoneBtn = document.getElementById("ch_msg_delete_for_everyone");
18311849
if (deleteForEveryoneBtn) {
@@ -1838,7 +1856,13 @@ class Conversation {
18381856
deleteStartThread.remove();
18391857
}
18401858
});
1841-
}
1859+
}
1860+
1861+
// Update insert emoticon listener of deleted message
1862+
let insertEmoticonBtn = document.getElementById("ch_message_insert_emoticon_" + messageId);
1863+
if (insertEmoticonBtn) {
1864+
insertEmoticonBtn.remove();
1865+
}
18421866
}
18431867

18441868
handleAddReaction(data) {

‎live-stream/src/js/components/threads.js‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -410,10 +410,16 @@ class Threads {
410410
}
411411

412412
// Remove the last message date time elements.
413-
let lastMessageDateTimeEle = document.getElementById("ch_thread_msg_datetime_" +
414-
this.threadsMessages[this.threadsMessages.length - 1]['id']);
415-
if (lastMessageDateTimeEle) {
416-
lastMessageDateTimeEle.remove();
413+
if (loadMoreMessages && messages.length) {
414+
if ( moment(new Date(messages[0].createdAt)).format('DD/MM/YYYY') ==
415+
moment(new Date(this.threadsMessages[this.threadsMessages.length - 1].createdAt)).format('DD/MM/YYYY')
416+
) {
417+
let lastMessageDateTimeEle = document.getElementById("ch_thread_msg_datetime_" +
418+
this.threadsMessages[this.threadsMessages.length - 1]['id']);
419+
if (lastMessageDateTimeEle) {
420+
lastMessageDateTimeEle.remove();
421+
}
422+
}
417423
}
418424

419425
this.threadsMessages = this.threadsMessages.concat(messages);
@@ -550,23 +556,21 @@ class Threads {
550556
}
551557

552558
_createParentMessageBubble(message, messagesBox) {
553-
554559
let threadStart = document.getElementById("ch_thread_start");
555560
if (!threadStart) {
556561
// Create message frame
557-
this._createMessageBubble(message, messagesBox, false);
562+
this._createMessageBubble(message, messagesBox, false, false, false);
558563

564+
let parentMessage = document.getElementById("thread_" + message.id);
559565
// Create a line breaker b/w parent and chid message.
560566
let threadStartAttributes = [{"id":"ch_thread_start"},{"class":"ch-thread-start ch-msg-bubble"}];
561-
let threadStart = this.utility.createElement("div", threadStartAttributes, null, messagesBox);
567+
let threadStart = this.utility.createElement("div", threadStartAttributes, null, parentMessage);
562568

563569
let threadLineSpanAttributes = [];
564570
let threadLineSpan = this.utility.createElement("span", threadLineSpanAttributes, LANGUAGE_PHRASES.START_OF_A_NEW_THREAD, threadStart);
565571

566-
// Set parent message and line breaker position
567-
let parentMessage = document.getElementById("thread_" + message.id);
572+
// Set parent message position
568573
messagesBox.insertBefore(parentMessage, messagesBox.childNodes[0]);
569-
messagesBox.insertBefore(threadStart, messagesBox.childNodes[1]);
570574

571575
// Add date time on the top of the parent message.
572576
let msgDateTimeAttributes = [{"id":"ch_thread_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
@@ -1073,7 +1077,7 @@ class Threads {
10731077
let messagesBox = document.getElementById("ch_thread_messages_box");
10741078

10751079
// Create message frame
1076-
this._createMessageBubble(msgData, messagesBox, false, true);
1080+
this._createMessageBubble(msgData, messagesBox, false, true, true);
10771081
}
10781082

10791083
addNewMessage(message, newConversation) {
@@ -1115,7 +1119,7 @@ class Threads {
11151119
message.createdAt = new Date();
11161120

11171121
// Create message frame
1118-
this._createMessageBubble(message, messagesBox, false);
1122+
this._createMessageBubble(message, messagesBox, true, true, false);
11191123
}
11201124

11211125
_getMessages(conversation, limit, skip, cb) {
@@ -1126,31 +1130,47 @@ class Threads {
11261130
});
11271131
}
11281132

1129-
_isDateDiffShown(messageId) {
1130-
const messageIndex = this.threadsMessages.findIndex(message => message.id == messageId);
1133+
_isDateDiffShown(currentMsgId, lastMsgId, isNewMessage) {
1134+
const messageIndex = this.threadsMessages.findIndex(message => message.id == currentMsgId);
11311135
if (messageIndex == -1) {
11321136
return false;
11331137
}
1138+
const currentMsgDate = moment(new Date(this.threadsMessages[messageIndex].createdAt)).format('DD/MM/YYYY');
1139+
if (isNewMessage) {
1140+
// This in only one message.
1141+
if (!lastMsgId) {
1142+
return true;
1143+
}
1144+
const lastMsgIndex = this.threadsMessages.findIndex(message => message.id == lastMsgId);
1145+
if (lastMsgIndex == -1) {
1146+
return true;
1147+
}
1148+
const lastMsgDate = moment(new Date(this.threadsMessages[lastMsgIndex].createdAt)).format('DD/MM/YYYY');
1149+
if (currentMsgDate != lastMsgDate) {
1150+
return true;
1151+
}
1152+
return false;
1153+
}
11341154

11351155
if (!this.threadsMessages[messageIndex + 1]) {
11361156
return true;
11371157
}
11381158

1139-
const currentMsgDate = moment(new Date(this.threadsMessages[messageIndex].createdAt)).format('DD/MM/YYYY');
11401159
const nextMsgDate = moment(new Date(this.threadsMessages[messageIndex + 1].createdAt)).format('DD/MM/YYYY');
1141-
11421160
if (currentMsgDate != nextMsgDate) {
11431161
return true;
11441162
}
1145-
return false
1163+
return false;
11461164
}
11471165

1148-
_createMessageBubble(message, messagesBox, showDateDiff = true, isPendingMessage = false) {
1166+
_createMessageBubble(message, messagesBox, showDateDiff = true, isNewMessage = false, isPendingMessage = false) {
11491167
// Create message list
1168+
const lastMsgId = messagesBox.lastChild && messagesBox.lastChild.id.replace("thread_", "");
1169+
11501170
let msgBubbleEleAttributes = [{"id":"thread_" + message.id},{"class":"ch-msg-bubble"}];
11511171
let msgBubbleEle = this.utility.createElement("div", msgBubbleEleAttributes, null, messagesBox);
11521172

1153-
if(showDateDiff && this._isDateDiffShown(message.id)) {
1173+
if(showDateDiff && this._isDateDiffShown(message.id, lastMsgId, isNewMessage)) {
11541174
let msgDateTimeAttributes = [{"id":"ch_thread_msg_datetime_" + message.id},{"class":"ch-msg-datetime"}];
11551175
this.utility.createElement("div", msgDateTimeAttributes, this.utility.formatDate(message.createdAt), msgBubbleEle);
11561176
}
@@ -1182,7 +1202,7 @@ class Threads {
11821202

11831203
// Create message more options
11841204
if ((message.ownerId == this.liveStream.userId) && !message.isDeleted) {
1185-
let moreOptionAttributes = [{"class":"ch-msg-more-option ch-right"},{"title":LANGUAGE_PHRASES.MORE_OPTIONS}];
1205+
let moreOptionAttributes = [{"id":"ch_thread_message_more_option_" + message.id},{"class":"ch-msg-more-option ch-right"},{"title":LANGUAGE_PHRASES.MORE_OPTIONS}];
11861206
let moreOption = this.utility.createElement("i", moreOptionAttributes, "more_vert", msgBubbleEle);
11871207
moreOption.classList.add("material-icons");
11881208

@@ -1196,7 +1216,7 @@ class Threads {
11961216

11971217
// Create add reaction div.
11981218
if (this.reactionsSetting.enable && message.ownerId != this.liveStream.userId && !message.isDeleted) {
1199-
let addReactionEleAttributes = [{"class":"ch-add-reaction-option"},{"title":LANGUAGE_PHRASES.REACT_TO_THIS_MESSAGE}];
1219+
let addReactionEleAttributes = [{"id":"ch_thread_message_insert_emoticon_" + message.id},{"class":"ch-add-reaction-option"},{"title":LANGUAGE_PHRASES.REACT_TO_THIS_MESSAGE}];
12001220
let addReactionEle = this.utility.createElement("i", addReactionEleAttributes, "insert_emoticon", msgBubbleEle);
12011221
addReactionEle.classList.add("material-icons");
12021222

@@ -1351,18 +1371,24 @@ class Threads {
13511371
targetAttachmentCard.remove();
13521372
}
13531373

1354-
// Update listener of deleted message
1374+
// Update more option listener of deleted message
13551375
let targetMessage = document.getElementById("thread_" + data.messages[0].id);
1356-
if (targetMessage) {
1357-
let deletedMsgOptionBtn = targetMessage.lastChild;
1358-
deletedMsgOptionBtn.addEventListener("click", data => {
1376+
let moreOptionBtn = document.getElementById("ch_thread_message_more_option_" + data.messages[0].id);
1377+
if (moreOptionBtn) {
1378+
moreOptionBtn.addEventListener("click", data => {
13591379
// Remove delete for everyone option
13601380
let deleteForEveryoneBtn = document.getElementById("ch_msg_delete_for_everyone");
13611381
if (deleteForEveryoneBtn) {
13621382
deleteForEveryoneBtn.remove();
13631383
}
13641384
});
13651385
}
1386+
1387+
// Update insert emoticon listener of deleted message
1388+
let insertEmoticonBtn = document.getElementById("ch_thread_message_insert_emoticon_" + data.messages[0].id);
1389+
if (insertEmoticonBtn) {
1390+
insertEmoticonBtn.remove();
1391+
}
13661392
}
13671393

13681394
handleAddReaction(data) {

0 commit comments

Comments
 (0)