Fix context menu on Android

Fix scroll on Android
Fix propagation to documents loader on selecting
Disable zoom on handhelds

src/components/chat/bubbles.ts

@@ -3,7 +3,7 @@ import type { AppMessagesManager, Dialog, HistoryResult } from "../../lib/appMan
 import type { AppSidebarRight } from "../sidebarRight";
 import type { AppStickersManager } from "../../lib/appManagers/appStickersManager";
 import type { AppUsersManager } from "../../lib/appManagers/appUsersManager";
-import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager";
+import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager";
 import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";
 import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
 import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
@@ -345,192 +345,7 @@ export default class ChatBubbles {
       }
     });
 
-    this.listenerSetter.add(this.bubblesContainer, 'click', (e) => {
+    this.listenerSetter.add(this.bubblesContainer, 'click', this.onBubblesClick/* , {capture: true, passive: false} */);
-      let target = e.target as HTMLElement;
-      let bubble: HTMLElement = null;
-      try {
-        bubble = findUpClassName(target, 'bubble');
-      } catch(err) {}
-      
-      if(!bubble) return;
-
-      if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) {
-        if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
-          return;
-        }
-
-        for(const timestamp in this.dateMessages) {
-          const d = this.dateMessages[timestamp];
-          if(d.div == bubble) {
-            new PopupDatePicker(new Date(+timestamp), this.onDatePick).show();
-            break;
-          }
-        }
-
-        return;
-      }
-
-      // ! Trusted - due to audio autoclick
-      if(this.chat.selection.isSelecting && e.isTrusted) {
-        if(bubble.classList.contains('service') && bubble.dataset.mid === undefined) {
-          return;
-        }
-
-        cancelEvent(e);
-        //console.log('bubble click', e);
-
-        if(isTouchSupported && this.chat.selection.selectedText) {
-          this.chat.selection.selectedText = undefined;
-          return;
-        }
-
-        //this.chatSelection.toggleByBubble(bubble);
-        this.chat.selection.toggleByBubble(findUpClassName(target, 'grouped-item') || bubble);
-        return;
-      }
-
-      const contactDiv: HTMLElement = findUpClassName(target, 'contact');
-      if(contactDiv) {
-        this.chat.appImManager.setInnerPeer(+contactDiv.dataset.peerId);
-        return;
-      }
-
-      //this.log('chatInner click:', target);
-      const isVideoComponentElement = target.tagName == 'SPAN';
-      /* if(isVideoComponentElement) {
-        const video = target.parentElement.querySelector('video') as HTMLElement;
-        if(video) {
-          video.click(); // hot-fix for time and play button
-          return;
-        }
-      } */
-
-      if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
-        const messageId = +bubble.dataset.mid;
-        const message = appMessagesManager.getMessage(messageId);
-
-        const doc = message.media?.document;
-
-        if(doc?.stickerSetInput) {
-          new PopupStickers(doc.stickerSetInput).show();
-        }
-
-        return;
-      }
-
-      if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb')) 
-        || target.classList.contains('album-item')
-        || isVideoComponentElement
-        || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
-        let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
-        let message = appMessagesManager.getMessage(messageId);
-        if(!message) {
-          this.log.warn('no message by messageId:', messageId);
-          return;
-        }
-
-        let targets: {element: HTMLElement, mid: number}[] = [];
-        let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
-          //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false;
-  
-          let message = appMessagesManager.getMessage(id);
-          
-          return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
-        }).sort((a, b) => a - b);
-
-        ids.forEach(id => {
-          let withTail = this.bubbles[id].classList.contains('with-media-tail');
-          let str = '.album-item img, .album-item video, .preview img, .preview video, ';
-          if(withTail) {
-            str += '.bubble__media-container';
-          } else {
-            str += '.attachment img, .attachment video';
-          }
-
-          let elements = this.bubbles[id].querySelectorAll(str) as NodeListOf<HTMLElement>;
-          Array.from(elements).forEach((element: HTMLElement) => {
-            let albumItem = findUpClassName(element, 'album-item');
-            targets.push({
-              element,
-              mid: +albumItem?.dataset.mid || id
-            });
-          });
-        });
-
-        targets.sort((a, b) => a.mid - b.mid);
-
-        let idx = targets.findIndex(t => t.mid == messageId);
-
-        this.log('open mediaViewer single with ids:', ids, idx, targets);
-
-        if(!targets[idx]) {
-          this.log('no target for media viewer!', target);
-          return;
-        }
-
-        new AppMediaViewer().openMedia(message, targets[idx].element, true, 
-          targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
-        
-        cancelEvent(e);
-        //appMediaViewer.openMedia(message, target as HTMLImageElement);
-        return;
-      }
-      
-      if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');
-      
-      if(target.tagName == 'DIV' || target.tagName == "AVATAR-ELEMENT") {
-        if(target.classList.contains('goto-original')) {
-          let savedFrom = bubble.dataset.savedFrom;
-          let splitted = savedFrom.split('_');
-          let peerId = +splitted[0];
-          let msgId = +splitted[1];
-          ////this.log('savedFrom', peerId, msgID);
-          this.chat.appImManager.setInnerPeer(peerId, msgId);
-          return;
-        } else if(target.classList.contains('forward')) {
-          const mid = +bubble.dataset.mid;
-          new PopupForward([mid]);
-          //appSidebarRight.forwardTab.open([mid]);
-          return;
-        } else if(target.classList.contains('name')) {
-          let peerId = +target.dataset.peerId;
-          
-          if(peerId) {
-            this.chat.appImManager.setInnerPeer(peerId);
-          }
-
-          return;
-        } else if(target.tagName == "AVATAR-ELEMENT") {
-          let peerId = +target.getAttribute('peer');
-          
-          if(peerId) {
-            this.chat.appImManager.setInnerPeer(peerId);
-          }
-
-          return;
-        }
-        
-        let isReplyClick = false;
-        
-        try {
-          isReplyClick = !!findUpClassName(e.target, 'reply');
-        } catch(err) {}
-        
-        if(isReplyClick && bubble.classList.contains('is-reply')/*  || bubble.classList.contains('forwarded') */) {
-          this.replyFollowHistory.push(+bubble.dataset.mid);
-          let originalMessageId = +bubble.getAttribute('data-original-mid');
-          this.chat.setPeer(this.peerId, originalMessageId);
-        }
-      } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") {
-        let peerId = +target.parentElement.getAttribute('peer');
-        
-        if(peerId) {
-          this.chat.appImManager.setInnerPeer(peerId);
-        }
-      }
-      
-      //console.log('chatInner click', e);
-    }, {capture: true, passive: false});
     
     this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => {
       for(const timestamp in this.dateMessages) {
@@ -586,6 +401,193 @@ export default class ChatBubbles {
     });
   }
 
+  public onBubblesClick = (e: Event) => {
+    let target = e.target as HTMLElement;
+    let bubble: HTMLElement = null;
+    try {
+      bubble = findUpClassName(target, 'bubble');
+    } catch(err) {}
+    
+    if(!bubble) return;
+
+    if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) {
+      if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
+        return;
+      }
+
+      for(const timestamp in this.dateMessages) {
+        const d = this.dateMessages[timestamp];
+        if(d.div == bubble) {
+          new PopupDatePicker(new Date(+timestamp), this.onDatePick).show();
+          break;
+        }
+      }
+
+      return;
+    }
+
+    // ! Trusted - due to audio autoclick
+    if(this.chat.selection.isSelecting && e.isTrusted) {
+      if(bubble.classList.contains('service') && bubble.dataset.mid === undefined) {
+        return;
+      }
+
+      cancelEvent(e);
+      //console.log('bubble click', e);
+
+      if(isTouchSupported && this.chat.selection.selectedText) {
+        this.chat.selection.selectedText = undefined;
+        return;
+      }
+
+      //this.chatSelection.toggleByBubble(bubble);
+      this.chat.selection.toggleByBubble(findUpClassName(target, 'grouped-item') || bubble);
+      return;
+    }
+
+    const contactDiv: HTMLElement = findUpClassName(target, 'contact');
+    if(contactDiv) {
+      this.chat.appImManager.setInnerPeer(+contactDiv.dataset.peerId);
+      return;
+    }
+
+    //this.log('chatInner click:', target);
+    const isVideoComponentElement = target.tagName == 'SPAN';
+    /* if(isVideoComponentElement) {
+      const video = target.parentElement.querySelector('video') as HTMLElement;
+      if(video) {
+        video.click(); // hot-fix for time and play button
+        return;
+      }
+    } */
+
+    if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
+      const messageId = +bubble.dataset.mid;
+      const message = this.appMessagesManager.getMessage(messageId);
+
+      const doc = message.media?.document;
+
+      if(doc?.stickerSetInput) {
+        new PopupStickers(doc.stickerSetInput).show();
+      }
+
+      return;
+    }
+
+    if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb')) 
+      || target.classList.contains('album-item')
+      || isVideoComponentElement
+      || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
+      let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
+      let message = this.appMessagesManager.getMessage(messageId);
+      if(!message) {
+        this.log.warn('no message by messageId:', messageId);
+        return;
+      }
+
+      let targets: {element: HTMLElement, mid: number}[] = [];
+      let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
+        //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false;
+
+        let message = this.appMessagesManager.getMessage(id);
+        
+        return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
+      }).sort((a, b) => a - b);
+
+      ids.forEach(id => {
+        let withTail = this.bubbles[id].classList.contains('with-media-tail');
+        let str = '.album-item img, .album-item video, .preview img, .preview video, ';
+        if(withTail) {
+          str += '.bubble__media-container';
+        } else {
+          str += '.attachment img, .attachment video';
+        }
+
+        let elements = this.bubbles[id].querySelectorAll(str) as NodeListOf<HTMLElement>;
+        Array.from(elements).forEach((element: HTMLElement) => {
+          let albumItem = findUpClassName(element, 'album-item');
+          targets.push({
+            element,
+            mid: +albumItem?.dataset.mid || id
+          });
+        });
+      });
+
+      targets.sort((a, b) => a.mid - b.mid);
+
+      let idx = targets.findIndex(t => t.mid == messageId);
+
+      this.log('open mediaViewer single with ids:', ids, idx, targets);
+
+      if(!targets[idx]) {
+        this.log('no target for media viewer!', target);
+        return;
+      }
+
+      new AppMediaViewer().openMedia(message, targets[idx].element, true, 
+        targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
+      
+      cancelEvent(e);
+      //appMediaViewer.openMedia(message, target as HTMLImageElement);
+      return;
+    }
+    
+    if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');
+    
+    if(target.tagName == 'DIV' || target.tagName == "AVATAR-ELEMENT") {
+      if(target.classList.contains('goto-original')) {
+        let savedFrom = bubble.dataset.savedFrom;
+        let splitted = savedFrom.split('_');
+        let peerId = +splitted[0];
+        let msgId = +splitted[1];
+        ////this.log('savedFrom', peerId, msgID);
+        this.chat.appImManager.setInnerPeer(peerId, msgId);
+        return;
+      } else if(target.classList.contains('forward')) {
+        const mid = +bubble.dataset.mid;
+        new PopupForward([mid]);
+        //appSidebarRight.forwardTab.open([mid]);
+        return;
+      } else if(target.classList.contains('name')) {
+        let peerId = +target.dataset.peerId;
+        
+        if(peerId) {
+          this.chat.appImManager.setInnerPeer(peerId);
+        }
+
+        return;
+      } else if(target.tagName == "AVATAR-ELEMENT") {
+        let peerId = +target.getAttribute('peer');
+        
+        if(peerId) {
+          this.chat.appImManager.setInnerPeer(peerId);
+        }
+
+        return;
+      }
+      
+      let isReplyClick = false;
+      
+      try {
+        isReplyClick = !!findUpClassName(e.target, 'reply');
+      } catch(err) {}
+      
+      if(isReplyClick && bubble.classList.contains('is-reply')/*  || bubble.classList.contains('forwarded') */) {
+        this.replyFollowHistory.push(+bubble.dataset.mid);
+        let originalMessageId = +bubble.getAttribute('data-original-mid');
+        this.chat.setPeer(this.peerId, originalMessageId);
+      }
+    } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") {
+      let peerId = +target.parentElement.getAttribute('peer');
+      
+      if(peerId) {
+        this.chat.appImManager.setInnerPeer(peerId);
+      }
+    }
+    
+    //console.log('chatInner click', e);
+  };
+
   public onGoDownClick() {
     if(this.replyFollowHistory.length) {
       this.replyFollowHistory.forEachReverse((mid, idx) => {

src/components/chat/chat.ts

@@ -1,7 +1,7 @@
 import type { AppChatsManager } from "../../lib/appManagers/appChatsManager";
 import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
 import type { AppImManager } from "../../lib/appManagers/appImManager";
-import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager";
+import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager";
 import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
 import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
 import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";

src/components/chat/contextMenu.ts

@@ -11,6 +11,7 @@ import PopupDeleteMessages from "../popupDeleteMessages";
 import PopupForward from "../popupForward";
 import PopupPinMessage from "../popupUnpinMessage";
 import { copyTextToClipboard } from "../../helpers/clipboard";
+import { isAppleMobile, isSafari } from "../../helpers/userAgent";
 
 export default class ChatContextMenu {
   private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[];
@@ -118,9 +119,12 @@ export default class ChatContextMenu {
 
         // * these two lines will fix instant text selection on iOS Safari
         document.body.classList.add('no-select'); // * need no-select on body because chat-input transforms in channels
-        attachTo.addEventListener('touchend', () => {
+        attachTo.addEventListener('touchend', (e) => {
+          cancelEvent(e); // ! this one will fix propagation to document loader button, etc
           document.body.classList.remove('no-select');
-        }, {once: true});
+
+          //this.chat.bubbles.onBubblesClick(e);
+        }, {once: true, capture: true});
 
         cancelSelection();
         //cancelEvent(e as any);

src/components/chat/markupTooltip.ts

@@ -1,7 +1,9 @@
 import type { AppImManager } from "../../lib/appManagers/appImManager";
-import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName } from "../../helpers/dom";
+import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName, attachClickEvent } from "../../helpers/dom";
 import RichTextProcessor from "../../lib/richtextprocessor";
 import ButtonIcon from "../buttonIcon";
+import { clamp } from "../../helpers/number";
+import { isTouchSupported } from "../../helpers/touchSupport";
 
 export default class MarkupTooltip {
   public container: HTMLElement;
@@ -41,9 +43,13 @@ export default class MarkupTooltip {
           this.appImManager.chat.input.applyMarkdown(c);
         });
       } else {
-        button.addEventListener('click', () => {
+        attachClickEvent(button, (e) => {
+          cancelEvent(e);
           this.container.classList.add('is-link');
 
+          const selection = document.getSelection();
+          this.savedRange = selection.getRangeAt(0);
+          
           if(button.classList.contains('active')) {
             const startContainer = this.savedRange.startContainer;
             const anchor = startContainer.parentElement as HTMLAnchorElement;
@@ -52,6 +58,7 @@ export default class MarkupTooltip {
             this.linkInput.value = '';
           }
 
+          this.linkInput.focus();
           this.linkInput.classList.toggle('is-valid', this.isLinkValid());
         });
       }
@@ -85,14 +92,16 @@ export default class MarkupTooltip {
       this.linkInput.classList.remove('error');
     });
 
-    this.linkBackButton.addEventListener('click', () => {
+    attachClickEvent(this.linkBackButton, (e) => {
+      cancelEvent(e);
       this.container.classList.remove('is-link');
       //input.value = '';
       this.resetSelection();
     });
 
     this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true});
-    this.linkApplyButton.addEventListener('click', (e) => {
+    attachClickEvent(this.linkApplyButton, (e) => {
+      cancelEvent(e);
       this.applyLink(e);
     });
 
@@ -199,9 +208,9 @@ export default class MarkupTooltip {
       clearTimeout(this.hideTimeout);
     }
 
-    const range = this.savedRange = selection.getRangeAt(0);
+    const range = /* this.savedRange =  */selection.getRangeAt(0);
 
-    const activeButton = this.setActiveMarkupButton();
+    this.setActiveMarkupButton();
     
     this.container.classList.remove('is-link');
     const isFirstShow = this.container.classList.contains('hide');
@@ -210,11 +219,15 @@ export default class MarkupTooltip {
       this.container.classList.add('no-transition');
     }
     
+    const bodyRect = document.body.getBoundingClientRect();
     const selectionRect = range.getBoundingClientRect();
+    const inputRect = this.appImManager.chat.input.rowsWrapper.getBoundingClientRect();
+
+    const selectionTop = selectionRect.top + (bodyRect.top * -1);
     //const containerRect = this.container.getBoundingClientRect();
     const sizesRect = this.container.firstElementChild.firstElementChild.getBoundingClientRect();
-    const top = selectionRect.top - sizesRect.height - 8;
+    const top = selectionTop - sizesRect.height - 8;
-    const left = selectionRect.left + (selectionRect.width - sizesRect.width) / 2;
+    const left = clamp(selectionRect.left + (selectionRect.width - sizesRect.width) / 2, inputRect.left, inputRect.right - sizesRect.width);
     //const top = selectionRect.top - 44 - 8;
     
     this.container.style.transform = `translate3d(${left}px, ${top}px, 0)`;
@@ -266,7 +279,12 @@ export default class MarkupTooltip {
         return;
       }
 
-      this.setMouseUpEvent();
+      console.log('[MARKUP]: selectionchange');
+      if(isTouchSupported) {
+        this.show();
+      } else {
+        this.setMouseUpEvent();
+      }
     });
   }
 }

src/components/misc.ts

@@ -323,12 +323,21 @@ export function attachContextMenuListener(element: HTMLElement, callback: (e: To
       add('touchcancel', onCancel, options);
 
       timeout = window.setTimeout(() => {
-        element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
         callback(e.touches[0]);
         onCancel();
+
+        if(openedMenu) {
+          element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
+        }
       }, .4e3);
     });
   } else {
-    add('contextmenu', callback);
+    add('contextmenu', isTouchSupported ? (e: any) => {
+      callback(e);
+
+      if(openedMenu) {
+        element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
+      }
+    } : callback);
   }
 };

src/components/sidebarRight/tabs/gifs.ts

@@ -4,7 +4,7 @@ import Scrollable from "../../scrollable";
 import animationIntersector from "../../animationIntersector";
 import appSidebarRight, { AppSidebarRight } from "..";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
-import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/AppInlineBotsManager";
+import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/appInlineBotsManager";
 import GifsMasonry from "../../gifsMasonry";
 import { findUpClassName } from "../../../helpers/dom";
 import appImManager from "../../../lib/appManagers/appImManager";

src/components/wrappers.ts

@@ -26,6 +26,7 @@ import ProgressivePreloader from './preloader';
 import './middleEllipsis';
 import { nextRandomInt } from '../helpers/random';
 import RichTextProcessor from '../lib/richtextprocessor';
+import appImManager from '../lib/appManagers/appImManager';
 
 const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB
 
@@ -412,8 +413,8 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
           preloader = new ProgressivePreloader(null, true);
         }
 
-        preloader.attach(downloadDiv, true);
+        //preloader.attach(downloadDiv, true);
-        /* download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId);
+        download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId);
         preloader.attach(downloadDiv, true, download);
         
         download.then(() => {
@@ -426,7 +427,7 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
           downloadDiv.classList.remove('downloading');
         });
         
-        downloadDiv.classList.add('downloading'); */
+        downloadDiv.classList.add('downloading');
       } else {
         download.cancel();
       }

src/index.hbs

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>Telegram Web</title>
   <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">

src/lib/appManagers/AppInlineBotsManager.ts

@@ -1,6 +1,6 @@
 import { toast } from "../../components/toast";
 import { BotInlineResult } from "../../layer";
-import appPeersManager from "../appManagers/appPeersManager";
+import appPeersManager from "./appPeersManager";
 import apiManagerProxy from "../mtproto/mtprotoworker";
 import { RichTextProcessor } from "../richtextprocessor";
 import appDocsManager from "./appDocsManager";

src/lib/appManagers/appImManager.ts

@@ -13,7 +13,7 @@ import appUsersManager from "./appUsersManager";
 import Chat, { ChatType } from '../../components/chat/chat';
 import appChatsManager from './appChatsManager';
 import appDocsManager from './appDocsManager';
-import appInlineBotsManager from './AppInlineBotsManager';
+import appInlineBotsManager from './appInlineBotsManager';
 import appMessagesManager from './appMessagesManager';
 import appPeersManager from './appPeersManager';
 import appPhotosManager from './appPhotosManager';
@@ -206,10 +206,10 @@ export class AppImManager {
       this.attachDragAndDropListeners();
     }
 
-    if(!isTouchSupported) {
+    //if(!isTouchSupported) {
       this.markupTooltip = new MarkupTooltip(this);
       this.markupTooltip.handleSelection();
-    }
+    //}
   }
 
   private attachDragAndDropListeners() {

src/lib/cacheStorage.ts

@@ -53,9 +53,9 @@ export default class CacheStorageController {
   } */
 
   public getFile(fileName: string, method: 'blob' | 'json' | 'text' = 'blob'): Promise<any> {
-    if(method == 'blob') {
+    /* if(method == 'blob') {
       return Promise.reject();
-    }
+    } */
 
     // const str = `get fileName: ${fileName}`;
     // console.time(str);

src/lib/storage.ts

@@ -89,11 +89,13 @@ class AppStorage {
 
         if(this.useCS) {
           try {
-            //console.log('setItem', key, value);
+            //console.log('setItem: will set', key/* , value */);
+            await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.'
             await this.cacheStorage.save(key, new Response(value, {headers: {'Content-Type': 'application/json'}}));
+            //console.log('setItem: have set', key/* , value */);
           } catch(e) {
             //this.useCS = false;
-            console.error('[AS]: set error:', e, value);
+            console.error('[AS]: set error:', e, key/* , value */);
           }
         } else {
           keyValues[key] = value;

src/scss/partials/_audio.scss

@@ -383,9 +383,9 @@
 
   @include respond-to(handhelds) {
     &-download {
-      /* background: transparent; */
+      //background: transparent;
-      margin-left: 2px;
+      margin-left: 6px;
-      margin-top: 1px;
+      margin-top: 6px;
     }
 
     &.is-voice {

src/scss/partials/_chat.scss

@@ -99,7 +99,7 @@ $chat-helper-size: 39px;
 		background: none;
 		border: none;
 		width: 100%;
-		padding: 9px;
+		padding: 9px 8px 9px 8px;
 		/* height: 100%; */
 		max-height: calc(30rem - var(--padding-vertical) * 2);
 		overflow-y: none;
@@ -333,6 +333,25 @@ $chat-helper-size: 39px;
 			}
 		}
 	}
+
+	.pinned-container {
+		box-shadow: none;
+		@include respond-to(handhelds) {
+			font-size: 15px;
+		}
+
+		.btn-transparent {
+			justify-content: center;
+	
+			&::before {
+				margin-right: 10px;
+			}
+		}
+	
+		&::before {
+			box-shadow: none;
+		}
+	}
 }
 
 @keyframes recordBlink {
@@ -437,7 +456,8 @@ $chat-helper-size: 39px;
 	background-color: #fff;
 	border-radius: 12px;
 	border-bottom-right-radius: 0;
-	box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
+	//box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
+	box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.18);
 	min-height: var(--chat-input-size);
 	max-height: 30rem;
 	flex: 0 0 auto;
@@ -722,6 +742,16 @@ $chat-helper-size: 39px;
 		padding: 0.25rem;
 		width: 34px;
 		height: 34px;
+		//По макету ниже....
+		// display: block;
+		// flex: 0 0 auto;
+		// font-size: 24px;
+		// line-height: 24px;
+		// color: #8d969c;
+		// padding: 0.25rem;
+		// margin-left: -1px;
+		// width: 40px;
+		// height: 40px;
 		
 		&.active {
 			color: $color-blue;

src/scss/partials/_chatBubble.scss

@@ -152,6 +152,18 @@ $bubble-margin: .25rem;
     }
   }
 
+  &.channel-post {
+    .message.poll-message {
+        .time {
+          position: unset;
+        }
+    }
+
+		poll-element .poll-footer {
+				height: auto;
+		}
+  }
+
   &.is-date {
     position: sticky;
     top: $bubble-margin;
@@ -222,6 +234,13 @@ $bubble-margin: .25rem;
     }
   }
 
+  // ! hide context menu for media on android
+  .bubbles.is-selecting & {
+    img, video {
+      pointer-events: none;
+    }
+  }
+  
   &__container {
     //min-width: 60px;
     min-width: 56px;
@@ -1027,7 +1046,7 @@ $bubble-margin: .25rem;
       height: 58px;
 
       @include respond-to(handhelds) {
-        padding-left: 44px;
+        padding-left: 44px; //было 44
       }
 
       &-name {
@@ -1120,6 +1139,11 @@ $bubble-margin: .25rem;
         background: #fff;
         border-radius: 50%;
 
+        @include respond-to(handhelds) {
+          left: 20px;
+          top: 25px;
+        }
+
         &:before {
           content: " ";
           position: absolute;
@@ -1303,6 +1327,10 @@ $bubble-margin: .25rem;
       padding: inherit;
       white-space: nowrap;
     }
+
+    .tgico-pinnedchat:before {
+      font-weight: bold;
+    }
   }
 
   .video-time {
@@ -1981,6 +2009,7 @@ poll-element {
   
       @include respond-to(handhelds) {
         max-width: 88%;
+        white-space: normal;
       }
     }
 

src/scss/partials/_chatDrop.scss

@@ -59,10 +59,10 @@
   &-outline {
     &-wrapper {
       position: absolute;
-      top: 19px;
+      top: 15px;
-      right: 19px;
+      right: 15px;
-      bottom: 19px;
+      bottom: 15px;
-      left: 19px;
+      left: 15px;
       pointer-events: none;
     }
 
@@ -95,6 +95,16 @@
   &-header {
     font-weight: 500;
     font-size: 1.25rem;
+    margin-top: -10px;
+  }
+
+  @media only screen and (max-height: 670px) {
+    &-icon {
+      font-size: 0;
+    }
+    &-header {
+      margin-top: 0px;
+    }
   }
 
   &.is-dragover {

src/scss/partials/_chatStickersHelper.scss

@@ -5,11 +5,13 @@
 	transition: opacity .2s ease-in-out;
 	overflow: hidden;
 	padding: 0 !important;
+    border-radius: 10px !important;
 
 	> .scrollable {
 		position: relative;
 		max-height: 220px;
-  	min-height: var(--esg-sticker-size);
+  		min-height: var(--esg-sticker-size);
+	  	padding: 7px;
 	}
 
 	&-stickers {

src/scss/partials/_chatlist.scss

@@ -71,6 +71,7 @@
     .tgico-close {
       left: auto;
       right: 0px;
+      top: 48%;
     }
 
     //input.is-empty ~ .tgico-close {

src/scss/partials/_document.scss

@@ -10,6 +10,11 @@
 
     .document:not(.document-with-thumb) & {
       padding: 1.5rem .25rem 0 .25rem;
+
+      @include respond-to(handhelds) {
+        padding: 14px 0px 0px 0px;
+        font-size: 14px;
+      }
     }
 
     &:after {
@@ -132,6 +137,12 @@
     .tgico-download {
       transform: scale(1);
       transition: .2s scale;
+
+      @include respond-to(handhelds) {
+        margin-top: -1px;
+        margin-right: -1px;
+        font-size: 20px;
+      }
     }
 
     &.downloading {
@@ -146,8 +157,8 @@
     height: 42px;
 
     @include respond-to(handhelds) {
-      width: 30px;
+      width: 26px;
-      height: 30px;
+      height: 26px;
     }
   }
 }

src/scss/partials/_fonts.scss

@@ -88,6 +88,7 @@
 }
 .tgico-arrow-down:before {
   content: "\e911";
+  margin-top: 2px;
 }
 .tgico-pinlist:before {
   content: "\e912";

src/scss/partials/_preloader.scss

@@ -30,6 +30,7 @@
     margin: auto;
     width: 50px;
     height: 50px;
+    display: flex;
     /* cursor: pointer; */
   }
 }

src/scss/partials/_rightSidebar.scss

@@ -445,10 +445,8 @@
           }
 
           @include respond-to(handhelds) {
-            width: 40px;
+            width: 36px;
-            height: 40px;
+            height: 36px;
-            top: 2px;
-            left: -12px;
           }
 
           @include respond-to(not-handhelds) {

src/scss/style.scss

@@ -280,6 +280,10 @@ html {
   text-rendering: optimizeSpeed;
 }
 
+body {
+  touch-action: pan-x pan-y;
+}
+
 /* body {
   position: absolute;
   top: 0;
@@ -746,7 +750,7 @@ img.emoji {
 
 .super-sticker {
   html.no-touch &:hover {
-    border-radius: 12px;
+    border-radius: 10px;
     background-color: var(--color-gray-hover);
   }