Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.5 KiB
145 lines
4.5 KiB
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"; |
|
import AvatarElement from "../avatar"; |
|
|
|
const TAG_NAME = 'replies-element'; |
|
|
|
rootScope.on('replies_updated', (e) => { |
|
const message = e; |
|
(Array.from(document.querySelectorAll(TAG_NAME + `[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'; |
|
public loadPromises: Promise<any>[]; |
|
|
|
private updated = false; |
|
|
|
constructor() { |
|
super(); |
|
} |
|
|
|
public init() { |
|
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.firstChild) { |
|
this.innerHTML = ''; |
|
} */ |
|
|
|
if(this.type === 'footer') { |
|
let leftPart: HTMLElement; |
|
if(this.firstElementChild) { |
|
leftPart = this.firstElementChild as HTMLElement; |
|
} |
|
|
|
if(replies?.recent_repliers) { |
|
if(leftPart && !leftPart.classList.contains('replies-footer-avatars')) { |
|
this.innerHTML = ''; |
|
leftPart = null; |
|
} |
|
|
|
if(!leftPart) { |
|
leftPart = document.createElement('div'); |
|
leftPart.classList.add('replies-footer-avatars'); |
|
} |
|
|
|
replies.recent_repliers.slice().reverse().forEach((peer, idx) => { |
|
let avatarElem = leftPart.children[idx] as AvatarElement; |
|
if(!avatarElem) { |
|
avatarElem = new AvatarElement(); |
|
avatarElem.setAttribute('dialog', '0'); |
|
avatarElem.classList.add('avatar-30'); |
|
|
|
if(this.loadPromises) { |
|
avatarElem.loadPromises = this.loadPromises; |
|
} |
|
} |
|
|
|
avatarElem.setAttribute('peer', '' + appPeersManager.getPeerId(peer)); |
|
|
|
if(!avatarElem.parentNode) { |
|
leftPart.append(avatarElem); |
|
} |
|
}); |
|
|
|
// if were 3 and became 2 |
|
(Array.from(leftPart.children) as HTMLElement[]).slice(replies.recent_repliers.length).forEach(el => el.remove()); |
|
} else { |
|
if(leftPart && !leftPart.classList.contains('tgico-comments')) { |
|
leftPart.remove(); |
|
leftPart = null; |
|
} |
|
|
|
if(!leftPart) { |
|
leftPart = document.createElement('span'); |
|
leftPart.classList.add('tgico-comments'); |
|
} |
|
} |
|
|
|
if(!leftPart.parentElement) { |
|
this.append(leftPart); |
|
} |
|
|
|
let text: string; |
|
if(replies) { |
|
if(replies.replies) { |
|
text = replies.replies + ' ' + (replies.replies > 1 ? 'Comments' : 'Comment'); |
|
} else { |
|
text = 'Leave a Comment'; |
|
} |
|
} else { |
|
text = 'View in chat'; |
|
} |
|
|
|
if(replies) { |
|
const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id); |
|
this.classList.toggle('is-unread', replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)); |
|
} |
|
|
|
let textSpan = this.children[1] as HTMLElement; |
|
if(!textSpan) { |
|
textSpan = document.createElement('span'); |
|
textSpan.classList.add('replies-footer-text'); |
|
|
|
const iconSpan = document.createElement('span'); |
|
iconSpan.classList.add('tgico-next'); |
|
|
|
const rippleContainer = document.createElement('div'); |
|
ripple(rippleContainer); |
|
|
|
this.append(textSpan, iconSpan, rippleContainer); |
|
} |
|
|
|
textSpan.innerHTML = text; |
|
} 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(replies && !this.updated && !this.message.pFlags.is_outgoing) { |
|
appMessagesManager.subscribeRepliesThread(this.message.peerId, this.message.mid); |
|
appMessagesManager.updateMessage(this.message.peerId, this.message.mid, 'replies_updated'); |
|
this.updated = true; |
|
} |
|
|
|
if(this.loadPromises) { |
|
this.loadPromises = undefined; |
|
} |
|
} |
|
} |
|
|
|
customElements.define(TAG_NAME, RepliesElement); |