Fix editing profile

Fix bubble names with via
Fix displaying hidden name in media viewer

src/components/appMediaViewer.ts

@@ -13,7 +13,7 @@ import SearchListLoader from "../helpers/searchListLoader";
 import { Message } from "../layer";
 import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
 import appImManager from "../lib/appManagers/appImManager";
-import appMessagesManager from "../lib/appManagers/appMessagesManager";
+import appMessagesManager, { MyMessage } from "../lib/appManagers/appMessagesManager";
 import appPhotosManager, { MyPhoto } from "../lib/appManagers/appPhotosManager";
 import RichTextProcessor from "../lib/richtextprocessor";
 import { MediaSearchContext } from "./appMediaPlaybackController";
@@ -227,12 +227,12 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     }
   };
 
-  private setCaption(message: Message.message) {
-    const caption = message.message;
+  private setCaption(message: MyMessage) {
+    const caption = (message as Message.message).message;
     let html = '';
     if(caption) {
       html = RichTextProcessor.wrapRichText(caption, {
-        entities: message.totalEntities
+        entities: (message as Message.message).totalEntities
       });
     }
     
@@ -248,12 +248,12 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     return this;
   }
 
-  public async openMedia(message: any, target?: HTMLElement, fromRight = 0, reverse = false, 
+  public async openMedia(message: MyMessage, target?: HTMLElement, fromRight = 0, reverse = false, 
     prevTargets: AppMediaViewerTargetType[] = [], nextTargets: AppMediaViewerTargetType[] = []/* , needLoadMore = true */) {
     if(this.setMoverPromise) return this.setMoverPromise;
 
     const mid = message.mid;
-    const fromId = message.fromId;
+    const fromId = (message as Message.message).fwd_from && !message.fromId ? (message as Message.message).fwd_from.from_name : message.fromId;
     const media = appMessagesManager.getMediaFromMessage(message);
 
     this.buttons.forward.classList.toggle('hide', message._ === 'messageService');

src/components/appMediaViewerBase.ts

@@ -39,6 +39,9 @@ import RangeSelector from "./rangeSelector";
 import windowSize from "../helpers/windowSize";
 import ListLoader from "../helpers/listLoader";
 import EventListenerBase from "../helpers/eventListenerBase";
+import { MyMessage } from "../lib/appManagers/appMessagesManager";
+import RichTextProcessor from "../lib/richtextprocessor";
+import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config";
 
 const ZOOM_STEP = 0.5;
 const ZOOM_INITIAL_VALUE = 1;
@@ -1096,32 +1099,50 @@ export default class AppMediaViewerBase<
     } */
   }
 
-  protected setAuthorInfo(fromId: PeerId, timestamp: number) {
+  protected setAuthorInfo(fromId: PeerId | string, timestamp: number) {
     replaceContent(this.author.date, formatFullSentTime(timestamp));
 
-    replaceContent(this.author.nameEl, new PeerTitle({
-      peerId: fromId,
-      dialog: false,
-      onlyFirstName: false,
-      plainText: false
-    }).element);
+    const isPeerId = fromId.isPeerId();
+    let title: HTMLElement;
+    if(isPeerId) {
+      title = new PeerTitle({
+        peerId: fromId as PeerId,
+        dialog: false,
+        onlyFirstName: false,
+        plainText: false
+      }).element;
+    } else {
+      title = document.createElement('span');
+      title.innerHTML = RichTextProcessor.wrapEmojiText(fromId);
+      title.classList.add('peer-title');
+    }
+
+    replaceContent(this.author.nameEl, title);
 
     let oldAvatar = this.author.avatarEl;
-    this.author.avatarEl = (this.author.avatarEl.cloneNode() as AvatarElement);
-    this.author.avatarEl.setAttribute('peer', '' + (fromId || rootScope.myId));
+    this.author.avatarEl = (oldAvatar.cloneNode() as AvatarElement);
+
+    if(!isPeerId) {
+      this.author.avatarEl.setAttribute('peer-title', '' + fromId);
+    } else {
+      this.author.avatarEl.removeAttribute('peer-title');
+    }
+
+    this.author.avatarEl.setAttribute('peer', '' + (fromId || NULL_PEER_ID));
+
     oldAvatar.parentElement.replaceChild(this.author.avatarEl, oldAvatar);
   }
   
   protected async _openMedia(
     media: MyDocument | MyPhoto, 
     timestamp: number, 
-    fromId: PeerId, 
+    fromId: PeerId | string, 
     fromRight: number, 
     target?: HTMLElement, 
     reverse = false, 
     prevTargets: TargetType[] = [], 
     nextTargets: TargetType[] = [], 
-    message?: Message.message
+    message?: MyMessage
     /* , needLoadMore = true */
   ) {
     if(this.setMoverPromise) return this.setMoverPromise;
@@ -1407,7 +1428,7 @@ export default class AppMediaViewerBase<
               }
 
               if(useController) {
-                const rollback = appMediaPlaybackController.setSingleMedia(video, message);
+                const rollback = appMediaPlaybackController.setSingleMedia(video, message as Message.message);
 
                 this.addEventListener('setMoverBefore', () => {
                   rollback();

src/components/chat/bubbles.ts

@@ -42,7 +42,7 @@ import ListenerSetter from "../../helpers/listenerSetter";
 import PollElement from "../poll";
 import AudioElement from "../audio";
 import { Message, MessageEntity,  MessageReplyHeader, Photo, PhotoSize, ReplyMarkup, Update, WebPage } from "../../layer";
-import { REPLIES_PEER_ID } from "../../lib/mtproto/mtproto_config";
+import { NULL_PEER_ID, REPLIES_PEER_ID } from "../../lib/mtproto/mtproto_config";
 import { FocusDirection } from "../../helpers/fastSmoothScroll";
 import useHeavyAnimationCheck, { getHeavyAnimationPromise, dispatchHeavyAnimationEvent, interruptHeavyAnimation } from "../../hooks/useHeavyAnimationCheck";
 import { fastRaf, fastRafPromise } from "../../helpers/schedulers";
@@ -79,6 +79,7 @@ import SetTransition from "../singleTransition";
 import handleHorizontalSwipe from "../../helpers/dom/handleHorizontalSwipe";
 import { cancelContextMenuOpening } from "../misc";
 import findUpAttribute from "../../helpers/dom/findUpAttribute";
+import findUpAsChild from "../../helpers/dom/findUpAsChild";
 
 const USE_MEDIA_TAILS = false;
 const IGNORE_ACTIONS: Set<Message.messageService['action']['_']> = new Set([
@@ -981,24 +982,35 @@ export default class ChatBubbles {
       return;
     }
 
-    const nameDiv = findUpClassName(target, 'peer-title') || findUpClassName(target, 'name') || findUpTag(target, 'AVATAR-ELEMENT') || findUpAttribute(target, 'data-saved-from');
-    if(nameDiv && nameDiv !== bubble) {
-      target = nameDiv || target;
-      const peerId = (target.dataset.peerId || target.getAttribute('peer'));
-      const savedFrom = target.dataset.savedFrom;
-      if(nameDiv.classList.contains('is-via')) {
-        const message = '@' + this.appUsersManager.getUser(peerId).username + ' ';
+    const via = findUpClassName(target, 'is-via');
+    if(via) {
+      const el = via.querySelector('.peer-title') as HTMLElement;
+      if(target === el || findUpAsChild(target, el)) {
+        const message = el.innerText + ' ';
         this.appDraftsManager.setDraft(this.peerId, this.chat.threadId, message);
         cancelEvent(e);
-      } else if(savedFrom) {
-        const [peerId, mid] = savedFrom.split('_');
+        
+        return;
+      }
+    }
 
-        this.chat.appImManager.setInnerPeer(peerId.toPeerId(), +mid);
-      } else {
-        if(peerId) {
-          this.chat.appImManager.setInnerPeer(peerId.toPeerId());
+    const nameDiv = findUpClassName(target, 'peer-title') || findUpTag(target, 'AVATAR-ELEMENT') || findUpAttribute(target, 'data-saved-from');
+    if(nameDiv && nameDiv !== bubble) {
+      target = nameDiv || target;
+      const peerIdStr = target.dataset.peerId || target.getAttribute('peer');
+      if(typeof(peerIdStr) === 'string') {
+        const savedFrom = target.dataset.savedFrom;
+        if(savedFrom) {
+          const [peerId, mid] = savedFrom.split('_');
+  
+          this.chat.appImManager.setInnerPeer(peerId.toPeerId(), +mid);
         } else {
-          toast(I18n.format('HidAccount', true));
+          const peerId = peerIdStr.toPeerId();
+          if(peerId !== NULL_PEER_ID) {
+            this.chat.appImManager.setInnerPeer(peerId);
+          } else {
+            toast(I18n.format('HidAccount', true));
+          }
         }
       }
 
@@ -1006,7 +1018,7 @@ export default class ChatBubbles {
     }
 
     //this.log('chatInner click:', target);
-    const isVideoComponentElement = target.tagName === 'SPAN' && !target.classList.contains('emoji');
+    // const isVideoComponentElement = target.tagName === 'SPAN' && findUpClassName(target, 'media-container');
     /* if(isVideoComponentElement) {
       const video = target.parentElement.querySelector('video') as HTMLElement;
       if(video) {
@@ -1031,7 +1043,7 @@ export default class ChatBubbles {
     const documentDiv = findUpClassName(target, 'document-with-thumb');
     if((target.tagName === 'IMG' && !target.classList.contains('emoji') && !target.classList.contains('document-thumb')) 
       || target.classList.contains('album-item')
-      || isVideoComponentElement
+      // || isVideoComponentElement
       || (target.tagName === 'VIDEO' && !bubble.classList.contains('round'))
       || (documentDiv && !documentDiv.querySelector('.preloader-container'))) {
       const groupedItem = findUpClassName(target, 'album-item') || findUpClassName(target, 'document-container');
@@ -3040,15 +3052,19 @@ export default class ChatBubbles {
     const needName = (message.fromId !== rootScope.myId && this.appPeersManager.isAnyChat(peerId) && !this.appPeersManager.isBroadcast(peerId)) || message.viaBotId;
     if(needName || message.fwd_from || message.reply_to_mid) { // chat
       let title: HTMLElement | DocumentFragment;
+      let titleVia: typeof title;
 
       const isForwardFromChannel = message.from_id && message.from_id._ === 'peerChannel' && message.fromId === message.fwdFromId;
       
       let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id;
       if(message.viaBotId) {
-        title = document.createElement('span');
-        title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username;
-        title.classList.add('peer-title');
-      } else if(isHidden) {
+        titleVia = document.createElement('span');
+        titleVia.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username;
+        titleVia.classList.add('peer-title');
+        bubble.classList.add('must-have-name');
+      }
+      
+      if(isHidden) {
         ///////this.log('message to render hidden', message);
         title = document.createElement('span');
         title.innerHTML = RichTextProcessor.wrapEmojiText(message.fwd_from.from_name);
@@ -3056,7 +3072,7 @@ export default class ChatBubbles {
         //title = message.fwd_from.from_name;
         bubble.classList.add('hidden-profile');
       } else {
-        title = new PeerTitle({peerId: message.viaBotId || message.fwdFromId || message.fromId}).element;
+        title = new PeerTitle({peerId: message.fwdFromId || message.fromId}).element;
       }
 
       if(message.reply_to_mid && message.reply_to_mid !== this.chat.threadId) {
@@ -3070,53 +3086,35 @@ export default class ChatBubbles {
       
       //this.log(title);
       
-      if(message.viaBotId) {
-        //if(!bubble.classList.contains('sticker') || true) {
-          let nameDiv = document.createElement('div');
-          nameDiv.classList.add('name', 'is-via');
-          nameDiv.dataset.peerId = message.viaBotId;
-          nameDiv.append(i18n('ViaBot'), ' ', title);
-          nameContainer.append(nameDiv);
-        // } else {
-        //   bubble.classList.add('hide-name');
-        // }
-      } else if((message.fwdFromId || message.fwd_from)) {
+      let nameDiv: HTMLElement;
+      if((message.fwdFromId || message.fwd_from)) {
         if(this.peerId !== rootScope.myId && !isForwardFromChannel) {
           bubble.classList.add('forwarded');
         }
         
         if(message.savedFrom) {
           savedFrom = message.savedFrom;
+          title.dataset.savedFrom = savedFrom;
         }
         
-        //if(!bubble.classList.contains('sticker') || true) {
-          let nameDiv = document.createElement('div');
-          nameDiv.classList.add('name');
-          nameDiv.dataset.peerId = message.fwdFromId;
-
-          if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) {
-            nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false);
-            nameDiv.append(title);
-          } else {
-            /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `<div class="name" data-peer-id="${message.fromId}" style="color: ${appPeersManager.getPeerColorByID(message.fromId, false)};">${appPeersManager.getPeerTitle(message.fromId)}</div>`;
-            nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
-            const args: FormatterArguments = [title];
-            if(isStandaloneMedia) {
-              args.unshift(document.createElement('br'));
-            }
-            nameDiv.append(i18n('ForwardedFrom', [args]));
+        nameDiv = document.createElement('div');
+        title.dataset.peerId = message.fwdFromId;
 
-            if(savedFrom) {
-              nameDiv.dataset.savedFrom = savedFrom;
-            }
+        if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) {
+          nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false);
+          nameDiv.append(title);
+        } else {
+          /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `<div class="name" data-peer-id="${message.fromId}" style="color: ${appPeersManager.getPeerColorByID(message.fromId, false)};">${appPeersManager.getPeerTitle(message.fromId)}</div>`;
+          nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
+          const args: FormatterArguments = [title];
+          if(isStandaloneMedia) {
+            args.unshift(document.createElement('br'));
           }
-          
-          nameContainer.append(nameDiv);
-        //}
-      } else {
+          nameDiv.append(i18n('ForwardedFrom', [args]));
+        }
+      } else if(!message.viaBotId) {
         if(!isStandaloneMedia && needName) {
-          let nameDiv = document.createElement('div');
-          nameDiv.classList.add('name');
+          nameDiv = document.createElement('div');
           nameDiv.append(title);
 
           if(!our) {
@@ -3124,12 +3122,30 @@ export default class ChatBubbles {
           }
 
           nameDiv.dataset.peerId = message.fromId;
-          nameContainer.append(nameDiv);
         } else /* if(!message.reply_to_mid) */ {
           bubble.classList.add('hide-name');
         }
       }
 
+      if(message.viaBotId) {
+        if(!nameDiv) {
+          nameDiv = document.createElement('div');
+        } else {
+          nameDiv.append(' ');
+        }
+
+        const span = document.createElement('span');
+        span.append(i18n('ViaBot'), ' ', titleVia);
+        span.classList.add('is-via');
+
+        nameDiv.append(span);
+      }
+
+      if(nameDiv) {
+        nameDiv.classList.add('name');
+        nameContainer.append(nameDiv);
+      }
+
       const needAvatar = this.chat.isAnyGroup() && !isOut;
       if(needAvatar) {
         let avatarElem = new AvatarElement();
@@ -3141,7 +3157,7 @@ export default class ChatBubbles {
           avatarElem.setAttribute('peer-title', /* '🔥 FF 🔥' */message.fwd_from.from_name);
         }
 
-        avatarElem.setAttribute('peer', '' + (((message.fwd_from && (this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID)) || isForwardFromChannel ? message.fwdFromId : message.fromId) || 0));
+        avatarElem.setAttribute('peer', '' + (((message.fwd_from && (this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID)) || isForwardFromChannel ? message.fwdFromId : message.fromId) || NULL_PEER_ID));
         //avatarElem.update();
         
         //this.log('exec loadDialogPhoto', message);

src/components/editPeer.ts

@@ -95,11 +95,12 @@ export default class EditPeer {
       return true;
     }
 
-    let validLength = 0, requiredLength = 0, requiredValidLength = 0;
+    let changedLength = 0, requiredLength = 0, requiredValidLength = 0;
     this.inputFields.forEach(inputField => {
-      const isValid = inputField.isValid();
-      if(isValid) {
-        ++validLength;
+      if(inputField.isValid()) {
+        if(inputField.isChanged()) {
+          ++changedLength;
+        }
 
         if(inputField.required) {
           ++requiredValidLength;
@@ -111,7 +112,7 @@ export default class EditPeer {
       }
     });
 
-    return requiredLength === requiredValidLength && validLength > 0;
+    return requiredLength === requiredValidLength && changedLength > 0;
   };
 
   public handleChange = () => {

src/components/inputField.ts

@@ -300,11 +300,14 @@ class InputField {
 
   public isValid() {
     return !this.input.classList.contains('error') && 
-      this.isChanged() && 
       (!this.validate || this.validate()) && 
       (!this.required || !isInputEmpty(this.input));
   }
 
+  public isValidToChange() {
+    return this.isValid() && this.isChanged();
+  }
+
   public setDraftValue(value = '', silent = false) {
     if(!this.options.plainText) {
       value = RichTextProcessor.wrapDraftText(value);

src/components/popups/index.ts

@@ -42,7 +42,7 @@ export default class PopupElement {
   protected btnClose: HTMLElement;
   protected btnConfirm: HTMLButtonElement;
   protected body: HTMLElement;
-  protected buttons: HTMLElement;
+  protected buttonsEl: HTMLElement;
 
   protected onClose: () => void;
   protected onCloseAfterTimeout: () => void;
@@ -55,7 +55,7 @@ export default class PopupElement {
   protected confirmShortcutIsSendShortcut: boolean;
   protected btnConfirmOnEnter: HTMLButtonElement;
 
-  constructor(className: string, buttons?: Array<PopupButton>, options: PopupOptions = {}) {
+  constructor(className: string, protected buttons?: Array<PopupButton>, options: PopupOptions = {}) {
     this.element.classList.add('popup');
     this.element.className = 'popup' + (className ? ' ' + className : '');
     this.container.classList.add('popup-container', 'z-depth-1');
@@ -105,7 +105,7 @@ export default class PopupElement {
 
     let btnConfirmOnEnter = this.btnConfirm;
     if(buttons && buttons.length) {
-      const buttonsDiv = this.buttons = document.createElement('div');
+      const buttonsDiv = this.buttonsEl = document.createElement('div');
       buttonsDiv.classList.add('popup-buttons');
 
       if(buttons.length === 2) {

src/components/popups/peer.ts

@@ -9,6 +9,7 @@ import PopupElement, { addCancelButton, PopupButton, PopupOptions } from ".";
 import { i18n, LangPackKey } from "../../lib/langPack";
 import CheckboxField, { CheckboxFieldOptions } from "../checkboxField";
 
+export type PopupPeerButton = Omit<PopupButton, 'callback'> & Partial<{callback: PopupPeerButtonCallback}>;
 export type PopupPeerButtonCallbackCheckboxes = Set<LangPackKey>;
 export type PopupPeerButtonCallback = (checkboxes?: PopupPeerButtonCallbackCheckboxes) => void;
 export type PopupPeerCheckboxOptions = CheckboxFieldOptions & {checkboxField?: CheckboxField};
@@ -22,7 +23,7 @@ export type PopupPeerOptions = PopupOptions & Partial<{
   description: string,
   descriptionLangKey?: LangPackKey,
   descriptionLangArgs?: any[],
-  buttons?: Array<Omit<PopupButton, 'callback'> & Partial<{callback: PopupPeerButtonCallback}>>,
+  buttons?: Array<PopupPeerButton>,
   checkboxes: Array<PopupPeerCheckboxOptions>
 }>;
 export default class PopupPeer extends PopupElement {

src/components/popups/reportMessages.ts

@@ -48,7 +48,7 @@ export default class PopupReportMessages extends PopupPeer {
     }, {listenerSetter: this.listenerSetter});
     
     this.body.style.margin = '0 -1rem';
-    this.buttons.style.marginTop = '.5rem';
+    this.buttonsEl.style.marginTop = '.5rem';
 
     this.show();
   }

src/components/popups/reportMessagesConfirm.ts

@@ -61,6 +61,10 @@ export default class PopupReportMessagesConfirm extends PopupPeer {
       placeholder: 'ReportChatDescription'
     });
 
+    inputField.input.addEventListener('input', () => {
+      this.buttons[0].element.toggleAttribute('disabled', !inputField.isValid());
+    });
+
     this.body.append(inputField.container);
   }
 }

src/components/sidebarLeft/tabs/editProfile.ts

@@ -135,7 +135,7 @@ export default class AppEditProfileTab extends SliderSuperTab {
         }));
       }
 
-      if(this.usernameInputField.isValid() && !this.usernameInputField.input.classList.contains('error')) {
+      if(this.usernameInputField.isValidToChange()) {
         promises.push(appUsersManager.updateUsername(this.usernameInputField.value));
       }
 

src/components/sidebarRight/tabs/chatType.ts

@@ -117,7 +117,7 @@ export default class AppChatTypeTab extends SliderSuperTabEventable {
 
     const onChange = () => {
       const changed = (privateRow.radioField.checked && (originalValue !== placeholder/*  || revoked */)) 
-        || (linkInputField.isValid() && linkInputField.input.classList.contains('valid'));
+        || (linkInputField.isValidToChange() && linkInputField.input.classList.contains('valid'));
       applyBtn.classList.toggle('is-visible', changed);
     };
 

src/components/sidebarRight/tabs/editChat.ts

@@ -174,11 +174,11 @@ export default class AppEditChatTab extends SliderSuperTab {
         let promises: Promise<any>[] = [];
 
         const id = this.chatId;
-        if(this.chatNameInputField.isValid()) {
+        if(this.chatNameInputField.isValidToChange()) {
           promises.push(appChatsManager.editTitle(id, this.chatNameInputField.value));
         }
 
-        if(this.descriptionInputField.isValid()) {
+        if(this.descriptionInputField.isValidToChange()) {
           promises.push(appChatsManager.editAbout(id, this.descriptionInputField.value));
         }
 

src/components/usernameInputField.ts

@@ -97,7 +97,7 @@ export class UsernameInputField extends InputField {
       this.options.onChange && this.options.onChange();
 
       const value = this.getValue();
-      if(value !== username && this.isValid() && RichTextProcessor.isUsernameValid(value)) {
+      if(value !== username && this.isValidToChange() && RichTextProcessor.isUsernameValid(value)) {
         this.checkUsername(value);
       }
     });

src/lib/lottieLoader.ts

@@ -21,7 +21,7 @@ let convert = (value: number) => {
 
 type RLottiePlayerListeners = 'enterFrame' | 'ready' | 'firstFrame' | 'cached';
 type RLottieOptions = {
-  container: HTMLElement, 
+  container?: HTMLElement, 
   autoplay?: boolean, 
   animationData: string, 
   loop?: boolean, 
@@ -83,15 +83,14 @@ export class RLottiePlayer extends EventListenerBase<{
   private currentMethod: RLottiePlayer['mainLoopForwards'] | RLottiePlayer['mainLoopBackwards'];
   private frameListener: () => void;
 
-  constructor({el, worker, options}: {
-    el: HTMLElement,
+  constructor({worker, options}: {
     worker: QueryableWorker,
     options: RLottieOptions
   }) {
     super(true);
 
     this.reqId = ++RLottiePlayer['reqId'];
-    this.el = el;
+    this.el = options.container;
     this.worker = worker;
 
     for(let i in options) {
@@ -416,7 +415,7 @@ export class RLottiePlayer extends EventListenerBase<{
     this.addEventListener('enterFrame', () => {
       this.dispatchEvent('firstFrame');
 
-      this.el.appendChild(this.canvas);
+      this.el && this.el.appendChild(this.canvas);
 
       //console.log('enterFrame firstFrame');
  
@@ -720,7 +719,7 @@ class LottieLoader {
       await this.loadLottieWorkers();
     }
 
-    if(!params.width || !params.height) {
+    if((!params.width || !params.height) && params.container) {
       params.width = parseInt(params.container.style.width);
       params.height = parseInt(params.container.style.height);
     }
@@ -731,7 +730,7 @@ class LottieLoader {
 
     params.group = group;
 
-    const player = this.initPlayer(params.container, params);
+    const player = this.initPlayer(params);
 
     if(group !== 'none') {
       animationIntersector.addAnimation(player, group);
@@ -790,9 +789,8 @@ class LottieLoader {
     this.workers.length = 0;
   }
 
-  private initPlayer(el: HTMLElement, options: RLottieOptions) {
+  private initPlayer(options: RLottieOptions) {
     const rlPlayer = new RLottiePlayer({
-      el, 
       worker: this.workers[this.curWorkerNum++],
       options
     });

src/scss/partials/_button.scss

@@ -15,6 +15,11 @@
   }
 
   @include btn-hoverable();
+
+  &:disabled {
+    pointer-events: none !important;
+    opacity: var(--disabled-opacity);
+  }
 }
 
 .btn-icon {
@@ -42,11 +47,6 @@
   &.active {
     color: var(--primary-color);
   }
-
-  &:disabled {
-    pointer-events: none !important;
-    opacity: var(--disabled-opacity);
-  }
 }
 
 .btn-corner {

src/scss/partials/_chatBubble.scss

@@ -277,9 +277,7 @@ $bubble-beside-button-width: 38px;
     position: relative;
     display: flex;
     flex-direction: column-reverse;
-    /* font-size: 0; */
-    width: max-content;
-    height: fit-content;
+    // align-items: flex-start;
     z-index: 2;
     user-select: none;
     background-color: var(--message-background-color);
@@ -327,7 +325,8 @@ $bubble-beside-button-width: 38px;
     opacity: .99999; // for safari
     pointer-events: none;
 
-    &:before, &:after {
+    &:before, 
+    &:after {
       display: none;
     }
 
@@ -426,7 +425,7 @@ $bubble-beside-button-width: 38px;
     }
   }
 
-  &:not(.forwarded) {
+  &:not(.forwarded):not(.must-have-name) {
     &:not(.is-group-first) {
       .bubble-content > .name, 
       .document-wrapper > .name {
@@ -1116,7 +1115,7 @@ $bubble-beside-button-width: 38px;
 
   &.forwarded .attachment,
   &.is-reply .attachment,
-  &:not(.hide-name).is-message-empty .attachment/* ,
+  &:not(.hide-name)/* .is-message-empty */ .attachment/* ,
   &:not(.hide-name):not(.sticker) .attachment */ {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -1596,6 +1595,11 @@ $bubble-beside-button-width: 38px;
     float: none;
   }
 
+  .video-time, 
+  .video-play {
+    pointer-events: none;
+  }
+
   .video-time {
     position: absolute;
     top: 3px;
@@ -1655,10 +1659,13 @@ $bubble-beside-button-width: 38px;
   }
   
   .name {
-    cursor: pointer;
     user-select: none;
   }
   
+  .peer-title {
+    cursor: pointer;
+  }
+  
   &-content > .name, 
   .document-wrapper > .name {
     /* padding: .2675rem 9px 0 9px; */
@@ -1676,9 +1683,9 @@ $bubble-beside-button-width: 38px;
     //white-space: nowrap;
   }
 
-  &:not(.is-group-first) .bubble-content > .name .name {
+  /* &:not(.is-group-first) .bubble-content > .name .name {
     display: none;
-  }
+  } */
   
   &:not(.webpage) {
     &.photo, 
@@ -2191,7 +2198,8 @@ $bubble-beside-button-width: 38px;
   }
 
   &.just-media {
-    .reply, .name {
+    .reply, 
+    .name {
       right: calc(100% + 10px);
     }