r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display replies element on grouped messages

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-12-22 21:10:53 +02:00
parent cbbb0c7d46
commit d44406fb7f
5 changed files with 122 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/chat/bubbles.ts
View File

@ -37,7 +37,7 @@ import Chat from "./chat";
import ListenerSetter from "../../helpers/listenerSetter";
import PollElement from "../poll";
import AudioElement from "../audio";
import { MessageEntity, MessageReplies, MessageReplyHeader } from "../../layer";
import { Message, MessageEntity, MessageReplies, MessageReplyHeader } from "../../layer";
import { DEBUG, MOUNT_CLASS_TO } from "../../lib/mtproto/mtproto_config";
const IGNORE_ACTIONS = ['messageActionHistoryClear'];
@ -524,12 +524,11 @@ export default class ChatBubbles {
const commentsDiv: HTMLElement = findUpClassName(target, 'replies');
if(commentsDiv) {
const mid = +bubble.dataset.mid;
const message = this.chat.getMessage(mid);
const replies = message.replies as MessageReplies;
const bubbleMid = +bubble.dataset.mid;
const message = this.appMessagesManager.filterMessages(this.chat.getMessage(bubbleMid), message => !!(message as Message.message).replies)[0] as Message.message;
const replies = message.replies;
if(replies) {
this.appMessagesManager.getDiscussionMessage(this.peerId, mid).then(result => {
const message = result.messages[0];
this.appMessagesManager.getDiscussionMessage(this.peerId, message.mid).then(message => {
this.chat.appImManager.setInnerPeer(-replies.channel_id, (message as MyMessage).mid, 'discussion');
});
}
@ -1452,7 +1451,7 @@ export default class ChatBubbles {
public renderMessage(message: any, reverse = false, multipleRender = false, bubble: HTMLDivElement = null, updatePosition = true) {
this.log.debug('message to render:', message);
//return;
const albumMustBeRenderedFull = this.chat.type === 'chat' || this.chat.type === 'scheduled';
const albumMustBeRenderedFull = this.chat.type !== 'pinned';
if(message.deleted) return;
else if(message.grouped_id && albumMustBeRenderedFull) { // will render only last album's message
const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
@ -1701,7 +1700,8 @@ export default class ChatBubbles {
bubble.classList.add(status);
}
const withReplyFooter = message.replies && message.replies.pFlags.comments && message.replies.channel_id !== 777;
let messageWithReplies: Message.message = this.appMessagesManager.filterMessages(message, message => !!(message as Message.message).replies)[0] as any;
const withReplies = messageWithReplies && messageWithReplies.replies && messageWithReplies.replies.pFlags.comments && messageWithReplies.replies.channel_id !== 777;
const isOut = our && (!message.fwd_from || this.peerId != rootScope.myId);
let nameContainer = bubbleContainer;
@ -1743,7 +1743,7 @@ export default class ChatBubbles {
const photo = this.appPhotosManager.getPhoto(message.id);
//if(photo._ == 'photoEmpty') break;
this.log('will wrap pending photo:', pending, message, photo);
const withTail = !isAndroid && !message.message && !withReplyFooter;
const withTail = !isAndroid && !message.message && !withReplies;
if(withTail) bubble.classList.add('with-media-tail');
wrapPhoto({
photo, message,
@ -1764,7 +1764,7 @@ export default class ChatBubbles {
let doc = this.appDocsManager.getDoc(message.id);
//if(doc._ == 'documentEmpty') break;
this.log('will wrap pending video:', pending, message, doc);
const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && !withReplyFooter;
const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && !withReplies;
if(withTail) bubble.classList.add('with-media-tail');
wrapVideo({
doc,
@ -1839,7 +1839,7 @@ export default class ChatBubbles {
break;
}
const withTail = !isAndroid && !message.message && !withReplyFooter;
const withTail = !isAndroid && !message.message && !withReplies;
if(withTail) bubble.classList.add('with-media-tail');
wrapPhoto({
photo,
@ -2023,7 +2023,7 @@ export default class ChatBubbles {
chat: this.chat
});
} else {
const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && withReplyFooter;
const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && withReplies;
if(withTail) bubble.classList.add('with-media-tail');
wrapVideo({
doc,
@ -2241,7 +2241,7 @@ export default class ChatBubbles {
savedFrom = `${this.chat.peerId}_${message.mid}`;
}
if(message.mid === this.chat.threadId) {
if(messageWithReplies && messageWithReplies.mid === this.chat.threadId) {
bubble.classList.add('is-thread-starter');
}
@ -2262,11 +2262,11 @@ export default class ChatBubbles {
this.bubbleGroups.updateGroupByMessageId(message.mid);
}
if(withReplyFooter) {
if(withReplies) {
MessageRender.renderReplies({
bubble,
bubbleContainer,
message,
message: messageWithReplies,
messageDiv
});
}
@ -2508,7 +2508,7 @@ export default class ChatBubbles {
if(isTopEnd) {
const serviceStartMessageId = this.appMessagesManager.threadsServiceMessagesIdsStorage[this.peerId + '_' + this.chat.threadId];
if(serviceStartMessageId) historyResult.history.push(serviceStartMessageId);
historyResult.history.push(this.chat.threadId);
historyResult.history.push(...this.chat.getMidsByMid(this.chat.threadId).reverse());
this.scrolledAll = true;
}
}
@ -2639,7 +2639,7 @@ export default class ChatBubbles {
// preload more
//if(!isFirstMessageRender) {
if(this.chat.type === 'chat' || this.chat.type === 'discussion') {
if(this.chat.type === 'chat'/* || this.chat.type === 'discussion' */) {
const storage = this.appMessagesManager.getHistoryStorage(peerId, this.chat.threadId);
const isMaxIdInHistory = storage.history.indexOf(maxId) !== -1;
if(isMaxIdInHistory) { // * otherwise it is a search or jump

79
src/components/chat/messageRender.ts
View File

@ -1,12 +1,8 @@
import { getFullDate } from "../../helpers/date";
import { formatNumber } from "../../helpers/number";
import { Message } from "../../layer";
import appMessagesManager from "../../lib/appManagers/appMessagesManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import RichTextProcessor from "../../lib/richtextprocessor";
import rootScope from "../../lib/rootScope";
import { ripple } from "../ripple";
import Chat from "./chat";
import RepliesElement from "./replies";
export namespace MessageRender {
/* export const setText = () => {
@ -75,76 +71,3 @@ export namespace MessageRender {
bubbleContainer.prepend(repliesFooter);
};
}
rootScope.on('replies_updated', (e) => {
const message = e.detail;
(Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesElement[]).forEach(element => {
element.message = message;
element.render();
});
});
class RepliesElement extends HTMLElement {
public message: Message.message;
public type: 'footer' | 'beside';
private updated = false;
constructor() {
super();
}
connectedCallback() {
this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
this.classList.add('replies', 'replies-' + this.type);
}
public render() {
const replies = this.message.replies;
if(this.type === 'footer') {
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
} else {
text = 'Leave a Comment';
}
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
} else {
this.classList.add('bubble-beside-button');
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${replies.replies ? formatNumber(replies.replies, 0) : ''}</span>`;
}
if(!this.updated) {
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid);
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
}
}
customElements.define('replies-element', RepliesElement);

79
src/components/chat/replies.ts Normal file
View File

@ -0,0 +1,79 @@
import { formatNumber } from "../../helpers/number";
import { Message } from "../../layer";
import appMessagesManager from "../../lib/appManagers/appMessagesManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import rootScope from "../../lib/rootScope";
import { ripple } from "../ripple";
rootScope.on('replies_updated', (e) => {
const message = e.detail;
(Array.from(document.querySelectorAll(`replies-footer-element[data-post-key="${message.peerId}_${message.mid}"]`)) as RepliesElement[]).forEach(element => {
element.message = message;
element.render();
});
});
export default class RepliesElement extends HTMLElement {
public message: Message.message;
public type: 'footer' | 'beside';
private updated = false;
constructor() {
super();
}
connectedCallback() {
this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
this.classList.add('replies', 'replies-' + this.type);
}
public render() {
const replies = this.message.replies;
if(this.type === 'footer') {
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '<div class="replies-footer-avatars">'
let l: string[] = [];
replies.recent_repliers/* .slice().reverse() */.forEach((peer, idx) => {
lastStyle = idx == 0 ? '' : `style="transform: translateX(-${idx * 12}px);"`;
l.push(`<avatar-element class="avatar-32" dialog="0" peer="${appPeersManager.getPeerId(peer)}" ${lastStyle}></avatar-element>`);
});
leftHTML += l.reverse().join('') + '</div>';
} else {
leftHTML = '<span class="tgico-comments"></span>';
}
let text: string;
if(replies.replies) {
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment');
} else {
text = 'Leave a Comment';
}
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
this.classList.add('is-unread');
}
this.innerHTML = `${leftHTML}<span class="replies-footer-text" ${lastStyle}>${text}</span><span class="tgico-next"></span>`;
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
} else {
this.classList.add('bubble-beside-button');
this.innerHTML = `<span class="tgico-commentssticker"></span><span class="replies-beside-text">${replies.replies ? formatNumber(replies.replies, 0) : ''}</span>`;
}
if(!this.updated) {
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid);
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
}
}
customElements.define('replies-element', RepliesElement);

26
src/lib/appManagers/appMessagesManager.ts
View File

@ -1908,6 +1908,25 @@ export class AppMessagesManager {
else return [message.mid];
}
public filterMessages(message: any, verify: (message: MyMessage) => boolean) {
const out: MyMessage[] = [];
if(message.grouped_id) {
const storage = this.groupedMessagesStorage[message.grouped_id];
for(const mid in storage) {
const message = storage[mid];
if(verify(message)) {
out.push(message);
}
}
} else {
if(verify(message)) {
out.push(message);
}
}
return out;
}
public generateTempMessageId(peerId: number) {
const dialog = this.getDialogByPeerId(peerId)[0];
return this.generateMessageId(dialog?.top_message || 0, true);
@ -3046,7 +3065,7 @@ export class AppMessagesManager {
appUsersManager.saveApiUsers(result.users);
this.saveMessages(result.messages);
const message = result.messages[0] as MyMessage;
const message = this.filterMessages(result.messages[0], message => !!(message as Message.message).replies)[0] as Message.message;
const threadKey = message.peerId + '_' + message.mid;
if(!this.threadsServiceMessagesIdsStorage[threadKey]) {
@ -3076,7 +3095,7 @@ export class AppMessagesManager {
this.threadsToReplies[threadKey] = peerId + '_' + mid;
return result;
return message;
});
}
@ -3355,6 +3374,7 @@ export class AppMessagesManager {
const pendingMessage = this.checkPendingMessage(message);
const historyStorage = this.getHistoryStorage(peerId);
this.updateMessageRepliesIfNeeded(message);
const history = message.mid > 0 ? historyStorage.history : historyStorage.pending;
if(history.indexOf(message.mid) !== -1) {
@ -3391,8 +3411,6 @@ export class AppMessagesManager {
}
}
this.updateMessageRepliesIfNeeded(message);
const dialog = foundDialog[0];
if(dialog) {
const inboxUnread = !message.pFlags.out && message.pFlags.unread;

5
src/scss/partials/_chatBubble.scss
View File

@ -1221,7 +1221,7 @@ $bubble-margin: .25rem;
color: #fff;
display: flex;
align-items: center;
padding: 0 2.5px 0 4px;
padding: 0 2.5px;
line-height: 18px;
pointer-events: all; // show title
white-space: nowrap;
@ -1428,6 +1428,8 @@ $bubble-margin: .25rem;
}
.replies {
user-select: none;
.rp {
width: 100%;
height: 100%;
@ -1470,7 +1472,6 @@ $bubble-margin: .25rem;
border-bottom-right-radius: inherit;
color: $color-blue;
min-width: 15rem;
user-select: none;
.tgico-comments, .tgico-next {
font-size: 1.4375rem;