Some fixes

src/components/appMediaViewer.ts

@@ -11,7 +11,6 @@ import { isMobileSafari, isSafari } from "../helpers/userAgent";
 import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
 import appImManager from "../lib/appManagers/appImManager";
 import appMessagesManager from "../lib/appManagers/appMessagesManager";
-import appPeersManager from "../lib/appManagers/appPeersManager";
 import appPhotosManager from "../lib/appManagers/appPhotosManager";
 import { logger } from "../lib/logger";
 import VideoPlayer from "../lib/mediaPlayer";
@@ -44,6 +43,8 @@ import appDownloadManager from "../lib/appManagers/appDownloadManager";
 import { cancelEvent } from "../helpers/dom/cancelEvent";
 import fillPropertyValue from "../helpers/fillPropertyValue";
 import generatePathData from "../helpers/generatePathData";
+import replaceContent from "../helpers/dom/replaceContent";
+import PeerTitle from "./peerTitle";
 
 // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию
 // TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода)
@@ -851,8 +852,12 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
     this.author.date.innerText = dateStr + ' at ' + timeStr;
 
-    const name = appPeersManager.getPeerTitle(fromId);
-    this.author.nameEl.innerHTML = name;
+    replaceContent(this.author.nameEl, new PeerTitle({
+      peerId: fromId,
+      dialog: false,
+      onlyFirstName: false,
+      plainText: false
+    }).element);
 
     let oldAvatar = this.author.avatarEl;
     this.author.avatarEl = (this.author.avatarEl.cloneNode() as AvatarElement);

src/components/chat/audio.ts

@@ -5,7 +5,6 @@
  */
 
 import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
-import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
 import type ChatTopbar from "./topbar";
 import { RichTextProcessor } from "../../lib/richtextprocessor";
 import rootScope from "../../lib/rootScope";
@@ -16,14 +15,16 @@ import PinnedContainer from "./pinnedContainer";
 import Chat from "./chat";
 import { cancelEvent } from "../../helpers/dom/cancelEvent";
 import { attachClickEvent } from "../../helpers/dom/clickEvent";
+import replaceContent from "../../helpers/dom/replaceContent";
+import PeerTitle from "../peerTitle";
 
 export default class ChatAudio extends PinnedContainer {
   private toggleEl: HTMLElement;
 
-  constructor(protected topbar: ChatTopbar, protected chat: Chat, protected appMessagesManager: AppMessagesManager, protected appPeersManager: AppPeersManager) {
-    super(topbar, chat, topbar.listenerSetter, 'audio', new DivAndCaption('pinned-audio', (title: string, subtitle: string) => {
-      this.divAndCaption.title.innerHTML = title;
-      this.divAndCaption.subtitle.innerHTML = subtitle;
+  constructor(protected topbar: ChatTopbar, protected chat: Chat, protected appMessagesManager: AppMessagesManager) {
+    super(topbar, chat, topbar.listenerSetter, 'audio', new DivAndCaption('pinned-audio', (title: string | HTMLElement, subtitle: string | HTMLElement) => {
+      replaceContent(this.divAndCaption.title, title);
+      replaceContent(this.divAndCaption.subtitle, subtitle);
     }), () => {
       if(this.toggleEl.classList.contains('flip-icon')) {
         appMediaPlaybackController.toggle();
@@ -44,10 +45,14 @@ export default class ChatAudio extends PinnedContainer {
     this.topbar.listenerSetter.add(rootScope, 'audio_play', (e) => {
       const {doc, mid, peerId} = e;
 
-      let title: string, subtitle: string;
+      let title: string | HTMLElement, subtitle: string;
       const message = appMessagesManager.getMessageByPeer(peerId, mid);
       if(doc.type === 'voice' || doc.type === 'round') {
-        title = appPeersManager.getPeerTitle(message.fromId, false, true);
+        title = new PeerTitle({
+          peerId: message.fromId,
+          onlyFirstName: true
+        }).element;
+
         //subtitle = 'Voice message';
         subtitle = formatDate(message.date, false, false);
       } else {
@@ -64,4 +69,4 @@ export default class ChatAudio extends PinnedContainer {
       this.toggleEl.classList.remove('flip-icon');
     });
   }
-}
+}

src/components/chat/messageRender.ts

@@ -6,8 +6,10 @@
 
 import { getFullDate } from "../../helpers/date";
 import { formatNumber } from "../../helpers/number";
+import { i18n } from "../../lib/langPack";
 import RichTextProcessor from "../../lib/richtextprocessor";
 import { LazyLoadQueueIntersector } from "../lazyLoadQueue";
+import PeerTitle from "../peerTitle";
 import { wrapReply } from "../wrappers";
 import Chat from "./chat";
 import RepliesElement from "./replies";
@@ -110,7 +112,7 @@ export namespace MessageRender {
     const replyToPeerId = message.reply_to.reply_to_peer_id ? chat.appPeersManager.getPeerId(message.reply_to.reply_to_peer_id) : chat.peerId;
 
     let originalMessage = chat.appMessagesManager.getMessageByPeer(replyToPeerId, message.reply_to_mid);
-    let originalPeerTitle: string;
+    let originalPeerTitle: string | HTMLElement;
     
     /////////this.log('message to render reply', originalMessage, originalPeerTitle, bubble, message);
     
@@ -120,9 +122,14 @@ export namespace MessageRender {
       chat.appMessagesManager.wrapSingleMessage(replyToPeerId, message.reply_to_mid);
       chat.bubbles.needUpdate.push({replyToPeerId, replyMid: message.reply_to_mid, mid: message.mid});
       
-      originalPeerTitle = 'Loading...';
+      originalPeerTitle = i18n('Loading');
     } else {
-      originalPeerTitle = chat.appPeersManager.getPeerTitle(originalMessage.fromId || originalMessage.fwdFromId, true) || '';
+      originalPeerTitle = new PeerTitle({
+        peerId: originalMessage.fromId || originalMessage.fwdFromId,
+        dialog: false,
+        onlyFirstName: false,
+        plainText: false
+      }).element;
     }
 
     const wrapped = wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage);

src/components/chat/pinnedContainer.ts

@@ -22,7 +22,7 @@ export default class PinnedContainer {
   private close: HTMLElement;
   protected wrapper: HTMLElement;
 
-  constructor(protected topbar: ChatTopbar, protected chat: Chat, public listenerSetter: ListenerSetter, protected className: string, public divAndCaption: DivAndCaption<(title: string, subtitle: string, message?: any) => void>, onClose?: () => void | Promise<boolean>) {
+  constructor(protected topbar: ChatTopbar, protected chat: Chat, public listenerSetter: ListenerSetter, protected className: string, public divAndCaption: DivAndCaption<(title: string | HTMLElement, subtitle: string | HTMLElement, message?: any) => void>, onClose?: () => void | Promise<boolean>) {
     /* const prev = this.divAndCaption.fill;
     this.divAndCaption.fill = (mid, title, subtitle) => {
       this.divAndCaption.container.dataset.mid = '' + mid;
@@ -87,7 +87,7 @@ export default class PinnedContainer {
     this.topbar.setUtilsWidth();
   }
 
-  public fill(title: string, subtitle: string, message: any) {
+  public fill(title: string | HTMLElement, subtitle: string | HTMLElement, message: any) {
     this.divAndCaption.container.dataset.peerId = '' + message.peerId;
     this.divAndCaption.container.dataset.mid = '' + message.mid;
     this.divAndCaption.fill(title, subtitle, message);

src/components/chat/replyContainer.ts

@@ -5,6 +5,7 @@
  */
 
 import renderImageFromUrl from "../../helpers/dom/renderImageFromUrl";
+import replaceContent from "../../helpers/dom/replaceContent";
 import { limitSymbols } from "../../helpers/string";
 import appDownloadManager from "../../lib/appManagers/appDownloadManager";
 import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager";
@@ -15,19 +16,21 @@ import DivAndCaption from "../divAndCaption";
 import { wrapSticker } from "../wrappers";
 
 export function wrapReplyDivAndCaption(options: {
-  title: string,
+  title: string | HTMLElement,
   titleEl: HTMLElement,
-  subtitle: string,
+  subtitle: string | HTMLElement,
   subtitleEl: HTMLElement,
   message: any,
   mediaEl: HTMLElement
 }) {
   let {title, titleEl, subtitle, subtitleEl, mediaEl, message} = options;
   if(title !== undefined) {
-    limitSymbols(title, 140);
+    if(typeof(title) === 'string') {
+      title = limitSymbols(title, 140);
+      title = RichTextProcessor.wrapEmojiText(title);
+    }
 
-    title = title ? RichTextProcessor.wrapEmojiText(title) : '';
-    titleEl.innerHTML = title;
+    replaceContent(titleEl, title);
   }
 
   let media = message && message.media;
@@ -92,19 +95,22 @@ export function wrapReplyDivAndCaption(options: {
       }
     }
   } else {
-    subtitle = limitSymbols(subtitle, 140);
-    subtitle = subtitle ? RichTextProcessor.wrapEmojiText(subtitle) : '';
-    subtitleEl.innerHTML = subtitle;
+    if(typeof(subtitle) === 'string') {
+      subtitle = limitSymbols(subtitle, 140);
+      subtitle = RichTextProcessor.wrapEmojiText(subtitle);
+    }
+
+    replaceContent(subtitleEl, subtitle);
   }
   
   return setMedia;
 }
 
-export default class ReplyContainer extends DivAndCaption<(title: string, subtitle: string, message?: any) => void> {
+export default class ReplyContainer extends DivAndCaption<(title: string | HTMLElement, subtitle: string | HTMLElement, message?: any) => void> {
   private mediaEl: HTMLElement;
 
   constructor(protected className: string) {
-    super(className, (title: string, subtitle: string = '', message?: any) => {
+    super(className, (title: string | HTMLElement, subtitle: string | HTMLElement = '', message?: any) => {
       if(!this.mediaEl) {
         this.mediaEl = document.createElement('div');
         this.mediaEl.classList.add(this.className + '-media');
@@ -127,4 +133,4 @@ export default class ReplyContainer extends DivAndCaption<(title: string, subtit
       }
     });
   }
-}
+}

src/components/chat/topbar.ts

@@ -107,7 +107,7 @@ export default class ChatTopbar {
     this.chatUtils = document.createElement('div');
     this.chatUtils.classList.add('chat-utils');
 
-    this.chatAudio = new ChatAudio(this, this.chat, this.appMessagesManager, this.appPeersManager);
+    this.chatAudio = new ChatAudio(this, this.chat, this.appMessagesManager);
 
     if(this.menuButtons.length) {
       this.btnMore = ButtonMenuToggle({listenerSetter: this.listenerSetter}, 'bottom-left', this.menuButtons, (e) => {

src/components/peerTitle.ts

@@ -9,6 +9,7 @@ import appPeersManager from "../lib/appManagers/appPeersManager";
 import rootScope from "../lib/rootScope";
 import { i18n } from "../lib/langPack";
 import replaceContent from "../helpers/dom/replaceContent";
+import appUsersManager from "../lib/appManagers/appUsersManager";
 
 export type PeerTitleOptions = {
   peerId: number,
@@ -60,7 +61,11 @@ export default class PeerTitle {
     }
 
     if(this.peerId !== rootScope.myId || !this.dialog) {
-      this.element.innerHTML = appPeersManager.getPeerTitle(this.peerId, this.plainText, this.onlyFirstName);
+      if(this.peerId > 0 && appUsersManager.getUser(this.peerId).pFlags.deleted) {
+        replaceContent(this.element, i18n(this.onlyFirstName ? 'Deleted' : 'HiddenName'));
+      } else {
+        this.element.innerHTML = appPeersManager.getPeerTitle(this.peerId, this.plainText, this.onlyFirstName);
+      }
     } else {
       replaceContent(this.element, i18n(this.onlyFirstName ? 'Saved' : 'SavedMessages'));
     }

src/components/wrappers.ts

@@ -1195,7 +1195,7 @@ export function wrapLocalSticker({emoji, width, height}: {
   return {container};
 }
 
-export function wrapReply(title: string, subtitle: string, message?: any) {
+export function wrapReply(title: string | HTMLElement, subtitle: string | HTMLElement, message?: any) {
   const replyContainer = new ReplyContainer('reply');
   replyContainer.fill(title, subtitle, message);
   /////////console.log('wrapReply', title, subtitle, media);

src/helpers/dom/replaceContent.ts

@@ -5,6 +5,11 @@
  */
 
 export default function replaceContent(elem: HTMLElement, node: string | Node) {
+  if(typeof(node) === 'string') {
+    elem.innerHTML = node;
+    return;
+  }
+
   // * children.length doesn't count text nodes
   const firstChild = elem.firstChild;
   if(firstChild) {

src/helpers/sequentialDom.ts

@@ -1,3 +1,9 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
 import { fastRaf } from "./schedulers";
 import { CancellablePromise, deferredPromise } from "./cancellablePromise";
 import { MOUNT_CLASS_TO } from "../config/debug";

src/helpers/string.ts

@@ -84,13 +84,13 @@ export function splitStringByLength(str: string, maxLength: number) {
 }
 
 // https://stackoverflow.com/a/14824756
-export const checkRTL = (s: string) => {           
+/* export const checkRTL = (s: string) => {           
   const ltrChars  = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
     rtlChars      = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
     rtlDirCheck   = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');
 
   return rtlDirCheck.test(s);
-};
+}; */
 
 //(window as any).checkRTL = checkRTL;
 

src/lang.ts

@@ -50,7 +50,6 @@ const lang = {
   "ConnectionStatus.Waiting": "Waiting for network...",
   "Deactivated.Title": "Too many tabs...",
   "Deactivated.Subtitle": "Telegram supports only one active tab with the app.\nClick anywhere to continue using this tab.",
-  //"Saved": "Saved",
   "General.Keyboard": "Keyboard",
   "General.SendShortcut.Enter": "Send by Enter",
   "General.SendShortcut.CtrlEnter": "Send by %s + Enter",
@@ -107,6 +106,7 @@ const lang = {
   "MediaViewer.Context.Download": "Download",
   "Profile": "Profile",
   "Saved": "Saved",
+  "Deleted": "Deleted",
   "ReportBug": "Report Bug",
   "Notifications.Count": {
     "one_value": "%d notification",
@@ -440,6 +440,7 @@ const lang = {
   "Updating": "Updating...",
   "Emoji": "Emoji",
   "AddContactTitle": "Add Contact",
+  "HiddenName": "Deleted Account",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",

src/lib/appManagers/appPeersManager.ts

@@ -17,6 +17,7 @@ import { RichTextProcessor } from "../richtextprocessor";
 import rootScope from "../rootScope";
 import appChatsManager from "./appChatsManager";
 import appUsersManager from "./appUsersManager";
+import I18n from '../langPack';
 
 // https://github.com/eelcohn/Telegram-API/wiki/Calculating-color-for-a-Telegram-user-on-IRC
 /*
@@ -88,7 +89,7 @@ export class AppPeersManager {
       if(peer.first_name) title += peer.first_name;
       if(peer.last_name) title += ' ' + peer.last_name;
   
-      if(!title) title = peer.pFlags.deleted ? 'Deleted Account' : peer.username;
+      if(!title) title = peer.pFlags.deleted ? I18n.format('HiddenName', true) : peer.username;
       else title = title.trim();
     } else {
       title = peer.title;

src/scss/partials/_chatBubble.scss

@@ -1284,6 +1284,7 @@ $bubble-margin: .25rem;
 
     &-icon {
       margin-left: 2px;
+      pointer-events: none;
     }
 
     i.edited {