diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index a34f1d4a..1f844744 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -246,7 +246,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet private setCaption(message: MyMessage) { const caption = (message as Message.message).message; - let html: Parameters[1] = ''; + let html: Parameters[1]; if(caption) { const media = getMediaFromMessage(message, true); diff --git a/src/components/appMediaViewerBase.ts b/src/components/appMediaViewerBase.ts index cfe66dc5..2390131c 100644 --- a/src/components/appMediaViewerBase.ts +++ b/src/components/appMediaViewerBase.ts @@ -859,7 +859,7 @@ export default class AppMediaViewerBase< const mover = this.content.mover; if(!closing) { - mover.innerHTML = ''; + mover.replaceChildren(); // mover.append(this.buttons.prev, this.buttons.next); } @@ -1205,7 +1205,7 @@ export default class AppMediaViewerBase< }, delay / 2); setTimeout(() => { - mover.innerHTML = ''; + mover.replaceChildren(); mover.classList.remove('moving', 'active', 'hiding'); mover.style.cssText = 'display: none;'; diff --git a/src/components/appSearch.ts b/src/components/appSearch.ts index 94ccce31..6656bcdd 100644 --- a/src/components/appSearch.ts +++ b/src/components/appSearch.ts @@ -52,7 +52,7 @@ export class SearchGroup { this.container.style.display = 'none'; if(this.clearable) { - this.list.innerHTML = ''; + this.list.replaceChildren(); } } diff --git a/src/components/chat/autocompleteHelper.ts b/src/components/chat/autocompleteHelper.ts index da8c65a8..fc444c85 100644 --- a/src/components/chat/autocompleteHelper.ts +++ b/src/components/chat/autocompleteHelper.ts @@ -96,7 +96,7 @@ export default class AutocompleteHelper extends EventListenerBase<{ this.attach = undefined; this.detach = undefined; - list.innerHTML = ''; + list.replaceChildren(); detach(); if(this.navigationItem) { diff --git a/src/components/chat/autocompletePeerHelper.ts b/src/components/chat/autocompletePeerHelper.ts index 6a78daa5..4a750504 100644 --- a/src/components/chat/autocompletePeerHelper.ts +++ b/src/components/chat/autocompletePeerHelper.ts @@ -59,7 +59,7 @@ export default class AutocompletePeerHelper extends AutocompleteHelper { } if(data.length) { - this.list.innerHTML = ''; + this.list.replaceChildren(); data.forEach((d) => { const div = AutocompletePeerHelper.listElement({ className: this.className, diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 02fcb8f7..66722442 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -3962,7 +3962,7 @@ export default class ChatBubbles { bubble.className = 'bubble service'; - bubbleContainer.innerHTML = ''; + bubbleContainer.replaceChildren(); const s = document.createElement('div'); s.classList.add('service-msg'); if(action) { @@ -4129,7 +4129,7 @@ export default class ChatBubbles { maxMediaTimestamp }; - const richText = messageMessage ? wrapRichText(messageMessage, richTextOptions) : ''; + const richText = messageMessage ? wrapRichText(messageMessage, richTextOptions) : undefined; let canHaveTail = true; let isStandaloneMedia = false; diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 3f82a150..7788bbef 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -422,7 +422,7 @@ export default class ChatContextMenu { icon: 'copy', text: 'Text.Context.Copy.Username', onClick: () => { - copyTextToClipboard(this.target.innerHTML); + copyTextToClipboard(this.target.textContent); }, verify: () => this.isUsernameTarget, withSelection: true @@ -430,7 +430,7 @@ export default class ChatContextMenu { icon: 'copy', text: 'Text.Context.Copy.Hashtag', onClick: () => { - copyTextToClipboard(this.target.innerHTML); + copyTextToClipboard(this.target.textContent); }, verify: () => this.target.classList.contains('anchor-hashtag'), withSelection: true @@ -572,14 +572,14 @@ export default class ChatContextMenu { notDirect: () => true, localName: 'emojis' }, { - regularText: this.sponsoredMessage?.sponsor_info, + regularText: this.sponsoredMessage?.sponsor_info ? wrapEmojiText(this.sponsoredMessage.sponsor_info) : undefined, separator: true, multiline: true, onClick: () => copyTextToClipboard(this.sponsoredMessage.sponsor_info), verify: () => !!this.sponsoredMessage.sponsor_info, isSponsored: true }, { - regularText: this.sponsoredMessage?.additional_info, + regularText: this.sponsoredMessage?.additional_info ? wrapEmojiText(this.sponsoredMessage.additional_info) : undefined, separator: true, multiline: true, onClick: () => copyTextToClipboard(this.sponsoredMessage.additional_info), diff --git a/src/components/chat/emojiHelper.ts b/src/components/chat/emojiHelper.ts index 4b61a19c..0d760e94 100644 --- a/src/components/chat/emojiHelper.ts +++ b/src/components/chat/emojiHelper.ts @@ -60,7 +60,7 @@ export default class EmojiHelper extends AutocompleteHelper { emojis = emojis.slice(0, 80); if(emojis.length) { - this.list.innerHTML = ''; + this.list.replaceChildren(); emojis.forEach((emoji) => { appendEmoji(emoji, this.list, false, true); }); diff --git a/src/components/chat/messageRender.ts b/src/components/chat/messageRender.ts index 5ba53460..ee6f76c4 100644 --- a/src/components/chat/messageRender.ts +++ b/src/components/chat/messageRender.ts @@ -59,7 +59,7 @@ export namespace MessageRender { const postViewsSpan = document.createElement('span'); postViewsSpan.classList.add('post-views'); - postViewsSpan.innerHTML = formatNumber(message.views, 1); + postViewsSpan.textContent = formatNumber(message.views, 1); const channelViews = document.createElement('i'); channelViews.classList.add('tgico-channelviews', 'time-icon'); diff --git a/src/components/chat/pinnedMessageBorder.ts b/src/components/chat/pinnedMessageBorder.ts index 1dffc060..23f03af3 100644 --- a/src/components/chat/pinnedMessageBorder.ts +++ b/src/components/chat/pinnedMessageBorder.ts @@ -144,7 +144,8 @@ export default class PinnedMessageBorder { if(this.count !== count) { this.wrapper.className = BASE_CLASS + '-wrapper-1'; this.border.classList.remove(BASE_CLASS + '-mask'); - this.wrapper.innerHTML = this.wrapper.style.cssText = ''; + this.wrapper.replaceChildren(); + this.wrapper.style.cssText = ''; } return this.border; diff --git a/src/components/chat/replies.ts b/src/components/chat/replies.ts index 5eead27c..f75d46cd 100644 --- a/src/components/chat/replies.ts +++ b/src/components/chat/replies.ts @@ -49,10 +49,6 @@ export default class RepliesElement extends HTMLElement { public render() { const replies = this.message.replies; - /* if(this.firstChild) { - this.innerHTML = ''; - } */ - if(this.type === 'footer') { let leftPart: HTMLElement; if(this.firstElementChild) { @@ -61,7 +57,7 @@ export default class RepliesElement extends HTMLElement { if(replies?.recent_repliers) { if(leftPart && !leftPart.classList.contains('replies-footer-avatars')) { - this.innerHTML = ''; + this.replaceChildren(); leftPart = null; } diff --git a/src/components/emoticonsDropdown/tabs/emoji.ts b/src/components/emoticonsDropdown/tabs/emoji.ts index 9a1e7107..883fc8af 100644 --- a/src/components/emoticonsDropdown/tabs/emoji.ts +++ b/src/components/emoticonsDropdown/tabs/emoji.ts @@ -70,8 +70,7 @@ export function appendEmoji(emoji: string, container?: HTMLElement, prepend = fa if(spanEmoji.children.length > 1) { const first = spanEmoji.firstElementChild; - spanEmoji.innerHTML = ''; - spanEmoji.append(first); + spanEmoji.replaceChildren(first); } if(spanEmoji.firstElementChild?.tagName === 'IMG') { diff --git a/src/components/peerProfile.ts b/src/components/peerProfile.ts index f1bb3f86..49fcf846 100644 --- a/src/components/peerProfile.ts +++ b/src/components/peerProfile.ts @@ -37,10 +37,8 @@ import wrapPeerTitle from './wrappers/peerTitle'; import wrapTopicNameButton from './wrappers/topicNameButton'; const setText = (text: Parameters[1], row: Row) => { - // fastRaf(() => { - setInnerHTML(row.title, text || ''); + setInnerHTML(row.title, text || undefined); row.container.style.display = text ? '' : 'none'; - // }); }; export default class PeerProfile { diff --git a/src/components/poll.ts b/src/components/poll.ts index f81cc6ac..02105a6e 100644 --- a/src/components/poll.ts +++ b/src/components/poll.ts @@ -354,7 +354,7 @@ export default class PollElement extends HTMLElement { const time = Date.now(); const percents = (closeTime - time) / period; const timeLeft = (closeTime - time) / 1000 + 1 | 0; - timeLeftDiv.innerHTML = toHHMMSS(timeLeft); + timeLeftDiv.textContent = toHHMMSS(timeLeft); if(timeLeft <= 5) { timeLeftDiv.style.color = '#ee545c'; @@ -368,7 +368,7 @@ export default class PollElement extends HTMLElement { if(time >= closeTime) { clearInterval(this.quizInterval); - timeLeftDiv.innerHTML = ''; + timeLeftDiv.replaceChildren(); // @ts-ignore circle.style.strokeDashoffset = circumference; this.quizInterval = 0; diff --git a/src/components/popups/peer.ts b/src/components/popups/peer.ts index c3dceb02..3bf62fae 100644 --- a/src/components/popups/peer.ts +++ b/src/components/popups/peer.ts @@ -22,7 +22,7 @@ export type PopupPeerOptions = Omit & Partial titleLangKey: LangPackKey, titleLangArgs: any[], noTitle: boolean, - description: string | DocumentFragment, + description: Parameters[1], descriptionLangKey: LangPackKey, descriptionLangArgs: any[], buttons: Array, diff --git a/src/components/privacySection.ts b/src/components/privacySection.ts index bb5f4f9c..35510672 100644 --- a/src/components/privacySection.ts +++ b/src/components/privacySection.ts @@ -132,8 +132,7 @@ export default class PrivacySection { takeOut: (newPeerIds) => { _peerIds.length = 0; _peerIds.push(...newPeerIds); - exception.row.subtitle.innerHTML = ''; - exception.row.subtitle.append(...this.generateStr(this.splitPeersByType(newPeerIds))); + exception.row.subtitle.replaceChildren(...this.generateStr(this.splitPeersByType(newPeerIds))); }, selectedPeerIds: _peerIds }); @@ -161,7 +160,7 @@ export default class PrivacySection { arr.push(...from.chats.map((id) => id.toPeerId(true))); this.peerIds[k] = arr; const s = this.exceptions.get(k).row.subtitle; - s.innerHTML = ''; + s.replaceChildren(); s.append(...this.generateStr(from)); }); } @@ -224,7 +223,7 @@ export default class PrivacySection { const caption = this.options.captions[this.type]; const captionElement = this.radioSection.caption; if(!caption) { - captionElement.innerHTML = ''; + captionElement.replaceChildren(); } else if(caption instanceof HTMLElement) { replaceContent(captionElement, caption); } else { diff --git a/src/components/putPreloader.ts b/src/components/putPreloader.ts index c89c2357..077a9b0a 100644 --- a/src/components/putPreloader.ts +++ b/src/components/putPreloader.ts @@ -36,7 +36,7 @@ export function setButtonLoader(elem: HTMLButtonElement, icon = 'check') { putPreloader(elem); return () => { - elem.innerHTML = ''; + elem.replaceChildren(); elem.classList.add('tgico-' + icon); elem.removeAttribute('disabled'); }; diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 5f238c30..c0e64e82 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -256,7 +256,7 @@ export class AppSidebarLeft extends SidebarSlider { }); const t = document.createElement('span'); t.classList.add('btn-menu-footer-text'); - t.innerHTML = 'Telegram Web' + App.suffix + ' '/* ' alpha ' */ + App.versionFull; + t.textContent = 'Telegram Web' + App.suffix + ' '/* ' alpha ' */ + App.versionFull; btnMenuFooter.append(t); btnMenu.classList.add('has-footer'); btnMenu.append(btnMenuFooter); @@ -549,7 +549,7 @@ export class AppSidebarLeft extends SidebarSlider { }); searchSuper.load(true); - helper.innerHTML = ''; + helper.replaceChildren(); searchSuper.nav.classList.remove('hide'); if(!value) { } diff --git a/src/components/sidebarLeft/tabs/addMembers.ts b/src/components/sidebarLeft/tabs/addMembers.ts index e412a993..e364aa0b 100644 --- a/src/components/sidebarLeft/tabs/addMembers.ts +++ b/src/components/sidebarLeft/tabs/addMembers.ts @@ -68,7 +68,7 @@ export default class AppAddMembersTab extends SliderSuperTab { } this.nextBtn.classList.add('tgico-arrow_next'); - this.nextBtn.innerHTML = ''; + this.nextBtn.replaceChildren(); this.nextBtn.disabled = false; this.nextBtn.classList.toggle('is-visible', this.skippable); } diff --git a/src/components/sidebarLeft/tabs/blockedUsers.ts b/src/components/sidebarLeft/tabs/blockedUsers.ts index 863c8415..91cde3c2 100644 --- a/src/components/sidebarLeft/tabs/blockedUsers.ts +++ b/src/components/sidebarLeft/tabs/blockedUsers.ts @@ -74,12 +74,9 @@ export default class AppBlockedUsersTab extends SliderSuperTab { if(user.pFlags.bot) { dom.lastMessageSpan.append('@' + username); } else { - if(user.phone) dom.lastMessageSpan.innerHTML = formatUserPhone(user.phone); + if(user.phone) dom.lastMessageSpan.textContent = formatUserPhone(user.phone); else dom.lastMessageSpan.append(username ? '@' + username : getUserStatusString(user)); } - - // dom.titleSpan.innerHTML = 'Raaid El Syed'; - // dom.lastMessageSpan.innerHTML = '+1 234 567891'; }; for(const peerId of this.peerIds) { diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index 718fcbe0..3d9c9d0f 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/src/components/sidebarLeft/tabs/generalSettings.ts @@ -10,23 +10,16 @@ import CheckboxField from '../../checkboxField'; import RadioField from '../../radioField'; import rootScope from '../../../lib/rootScope'; import {IS_APPLE, IS_SAFARI} from '../../../environment/userAgent'; -import Row, {CreateRowFromCheckboxField} from '../../row'; +import Row from '../../row'; import AppBackgroundTab from './background'; -import I18n, {i18n, LangPackKey, _i18n} from '../../../lib/langPack'; +import I18n, {LangPackKey, _i18n} from '../../../lib/langPack'; import {attachClickEvent} from '../../../helpers/dom/clickEvent'; -import assumeType from '../../../helpers/assumeType'; -import {BaseTheme, MessagesAllStickers, StickerSet} from '../../../layer'; -import LazyLoadQueue from '../../lazyLoadQueue'; -import PopupStickers from '../../popups/stickers'; +import {BaseTheme} from '../../../layer'; import eachMinute from '../../../helpers/eachMinute'; import {SliderSuperTabEventable} from '../../sliderTab'; import IS_GEOLOCATION_SUPPORTED from '../../../environment/geolocationSupport'; -import AppQuickReactionTab from './quickReaction'; -import wrapEmojiText from '../../../lib/richTextProcessor/wrapEmojiText'; import {DEFAULT_THEME, State} from '../../../config/state'; -import wrapStickerSetThumb from '../../wrappers/stickerSetThumb'; -import wrapStickerToRow from '../../wrappers/stickerToRow'; -import SettingSection, {generateSection} from '../../settingSection'; +import {generateSection} from '../../settingSection'; import {ScrollableX} from '../../scrollable'; import wrapStickerEmoji from '../../wrappers/stickerEmoji'; import {Theme} from '../../../layer'; diff --git a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts b/src/components/sidebarLeft/tabs/privacyAndSecurity.ts index 26d793f9..3a35b8ca 100644 --- a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts +++ b/src/components/sidebarLeft/tabs/privacyAndSecurity.ts @@ -265,9 +265,8 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTabEventable { const disallowLength = details.disallowPeers.users.length + details.disallowPeers.chats.length; const allowLength = details.allowPeers.users.length + details.allowPeers.chats.length; - row.subtitle.innerHTML = ''; const s = i18n(langKey); - row.subtitle.append(s); + row.subtitle.replaceChildren(s); if(disallowLength || allowLength) { row.subtitle.append(` (${[-disallowLength, allowLength ? '+' + allowLength : 0].filter(Boolean).join(', ')})`); } diff --git a/src/components/sidebarRight/tabs/chatType.ts b/src/components/sidebarRight/tabs/chatType.ts index eccf635f..96d851b8 100644 --- a/src/components/sidebarRight/tabs/chatType.ts +++ b/src/components/sidebarRight/tabs/chatType.ts @@ -111,7 +111,7 @@ export default class AppChatTypeTab extends SliderSuperTabEventable { this.managers.appProfileManager.getChatInviteLink(this.chatId, true).then((link) => { toggle(); - linkRow.title.innerHTML = link; + linkRow.title.textContent = link; // revoked = true; // onChange(); }); diff --git a/src/components/sidebarRight/tabs/editContact.ts b/src/components/sidebarRight/tabs/editContact.ts index ffa6aef9..c3097b04 100644 --- a/src/components/sidebarRight/tabs/editContact.ts +++ b/src/components/sidebarRight/tabs/editContact.ts @@ -113,9 +113,8 @@ export default class AppEditContactTab extends SliderSuperTab { const profileNameDiv = document.createElement('div'); profileNameDiv.classList.add('profile-name'); profileNameDiv.append(new PeerTitle({ - peerId: peerId + peerId }).element); - // profileNameDiv.innerHTML = 'Karen Stanford'; const profileSubtitleDiv = document.createElement('div'); profileSubtitleDiv.classList.add('profile-subtitle'); diff --git a/src/components/sidebarRight/tabs/gifs.ts b/src/components/sidebarRight/tabs/gifs.ts index 05780516..cb13c010 100644 --- a/src/components/sidebarRight/tabs/gifs.ts +++ b/src/components/sidebarRight/tabs/gifs.ts @@ -79,7 +79,7 @@ export default class AppGifsTab extends SliderSuperTab { public onCloseAfterTimeout() { this.reset(); - this.gifsDiv.innerHTML = ''; + this.gifsDiv.replaceChildren(); animationIntersector.checkAnimations(undefined, ANIMATIONGROUP); this.inputSearch.remove(); return super.onCloseAfterTimeout(); @@ -110,7 +110,7 @@ export default class AppGifsTab extends SliderSuperTab { this.searchPromise = null; this.nextOffset = next_offset; if(newSearch) { - this.gifsDiv.innerHTML = ''; + this.gifsDiv.replaceChildren(); } if(results.length) { diff --git a/src/components/sidebarRight/tabs/stickers.ts b/src/components/sidebarRight/tabs/stickers.ts index 261c3d5c..66bf8c90 100644 --- a/src/components/sidebarRight/tabs/stickers.ts +++ b/src/components/sidebarRight/tabs/stickers.ts @@ -91,7 +91,7 @@ export default class AppStickersTab extends SliderSuperTab { } public onCloseAfterTimeout() { - this.setsDiv.innerHTML = ''; + this.setsDiv.replaceChildren(); animationIntersector.checkAnimations(undefined, 'STICKERS-SEARCH'); return super.onCloseAfterTimeout(); } diff --git a/src/helpers/dom/replaceContent.ts b/src/helpers/dom/replaceContent.ts index fc524b84..d3a5dcf9 100644 --- a/src/helpers/dom/replaceContent.ts +++ b/src/helpers/dom/replaceContent.ts @@ -6,7 +6,7 @@ export default function replaceContent(elem: HTMLElement, node: string | Node) { if(typeof(node) === 'string') { - elem.innerHTML = node; + elem.textContent = node; return; } diff --git a/src/helpers/dom/setInnerHTML.ts b/src/helpers/dom/setInnerHTML.ts index 04203745..c8f98477 100644 --- a/src/helpers/dom/setInnerHTML.ts +++ b/src/helpers/dom/setInnerHTML.ts @@ -10,7 +10,7 @@ export default function setInnerHTML(elem: Element, html: string | DocumentFragm setDirection(elem); if(typeof(html) === 'string') { if(!html) elem.replaceChildren(); - else elem.innerHTML = html; + else elem.textContent = html; } else { elem.replaceChildren(html); } diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 4e8e69c4..172b7013 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -312,14 +312,16 @@ export default class VideoPlayer extends ControlsHover { } protected setBtnMenuToggle() { - const buttons: Parameters[0]['buttons'] = VideoPlayer.PLAYBACK_RATES.map((rate, idx) => { - return { + const buttons = VideoPlayer.PLAYBACK_RATES.map((rate, idx) => { + const buttonOptions: Parameters[0]['buttons'][0] = { // icon: VideoPlayer.PLAYBACK_RATES_ICONS[idx], regularText: rate + 'x', onClick: () => { appMediaPlaybackController.playbackRate = rate; } }; + + return buttonOptions; }); const btnMenu = ButtonMenuSync({buttons}); btnMenu.classList.add('top-left');