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";
export namespace MessageRender {
/* export const setText = () => {
}; */
export const setTime = (chat: Chat, message: any, bubble: HTMLElement, bubbleContainer: HTMLElement, messageDiv: HTMLElement) => {
const date = new Date(message.date * 1000);
let time = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
if(message.views) {
const postAuthor = message.post_author || message.fwd_from?.post_author;
bubble.classList.add('channel-post');
time = formatNumber(message.views, 1) + ' ' + (postAuthor ? RichTextProcessor.wrapEmojiText(postAuthor) + ', ' : '') + time;
if(!message.savedFrom) {
const forward = document.createElement('div');
forward.classList.add('bubble-beside-button', 'forward');
forward.innerHTML = `
`;
bubbleContainer.append(forward);
bubble.classList.add('with-beside-button');
}
}
if(message.edit_date) {
bubble.classList.add('is-edited');
time = 'edited ' + time;
}
if(chat.type != 'pinned' && message.pFlags.pinned) {
bubble.classList.add('is-pinned');
time = '' + time;
}
const title = getFullDate(date)
+ (message.edit_date ? `\nEdited: ${getFullDate(new Date(message.edit_date * 1000))}` : '')
+ (message.fwd_from ? `\nOriginal: ${getFullDate(new Date(message.fwd_from.date * 1000))}` : '');
const timeSpan = document.createElement('span');
timeSpan.classList.add('time', 'tgico');
timeSpan.title = title;
timeSpan.innerHTML = `${time}
${time}
`;
messageDiv.append(timeSpan);
return timeSpan;
};
export const renderReplies = ({bubble, bubbleContainer, message, messageDiv}: {
bubble: HTMLElement,
bubbleContainer: HTMLElement,
message: any,
messageDiv: HTMLElement
}) => {
const isFooter = !bubble.classList.contains('sticker') && !bubble.classList.contains('emoji-big');
const repliesFooter = new RepliesFooterElement();
if(isFooter) {
repliesFooter.message = message;
repliesFooter.type = 'footer';
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 RepliesFooterElement[]).forEach(element => {
element.message = message;
element.render();
});
});
class RepliesFooterElement extends HTMLElement {
public message: Message.message;
public type: 'footer' | 'beside';
private updated = false;
constructor() {
super();
this.classList.add('replies-footer');
}
connectedCallback() {
this.render();
this.dataset.postKey = this.message.peerId + '_' + this.message.mid;
}
public render() {
const replies = this.message.replies;
let leftHTML = '', lastStyle = '';
if(replies.recent_repliers) {
leftHTML += '';
} else {
leftHTML = '';
}
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');
}
if(!this.updated) {
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid);
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated');
this.updated = true;
}
this.innerHTML = `${leftHTML}`;
const rippleContainer = document.createElement('div');
this.append(rippleContainer);
ripple(rippleContainer);
}
}
customElements.define('replies-footer-element', RepliesFooterElement);