Fix unloading stickers from panel after closening

src/components/chat/input.ts

@@ -574,11 +574,11 @@ export default class ChatInput {
     });
 
     if(isTouchSupported) {
-      this.listenerSetter.add(this.messageInput, 'touchend', (e) => {
+      attachClickEvent(this.messageInput, (e) => {
         this.appImManager.selectTab(1); // * set chat tab for album orientation
         this.saveScroll();
         emoticonsDropdown.toggle(false);
-      });
+      }, {listenerSetter: this.listenerSetter});
 
       this.listenerSetter.add(window, 'resize', () => {
         this.restoreScroll();

src/components/chat/topbar.ts

@@ -3,7 +3,7 @@ import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManage
 import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
 import type { AppSidebarRight } from "../sidebarRight";
 import type Chat from "./chat";
-import { findUpClassName, cancelEvent, attachClickEvent } from "../../helpers/dom";
+import { findUpClassName, cancelEvent, attachClickEvent, blurActiveElement } from "../../helpers/dom";
 import mediaSizes, { ScreenSize } from "../../helpers/mediaSizes";
 import { isSafari } from "../../helpers/userAgent";
 import rootScope from "../../lib/rootScope";
@@ -121,6 +121,7 @@ export default class ChatTopbar {
 
     attachClickEvent(this.container, (e) => {
       const container: HTMLElement = findUpClassName(e.target, 'pinned-container');
+      blurActiveElement();
       if(container) {
         cancelEvent(e);
         
@@ -141,6 +142,7 @@ export default class ChatTopbar {
     attachClickEvent(this.btnBack, (e) => {
       cancelEvent(e);
       this.chat.appImManager.setPeer(0);
+      blurActiveElement();
     }, {listenerSetter: this.listenerSetter});
   }
 
@@ -222,17 +224,20 @@ export default class ChatTopbar {
 
     attachClickEvent(this.btnPinned, (e) => {
       cancelEvent(e);
+      blurActiveElement();
       this.openPinned(true);
     }, {listenerSetter: this.listenerSetter});
 
     attachClickEvent(this.btnMute, (e) => {
       cancelEvent(e);
+      blurActiveElement();
       this.appMessagesManager.mutePeer(this.peerId);
     }, {listenerSetter: this.listenerSetter});
 
     attachClickEvent(this.btnJoin, (e) => {
       cancelEvent(e);
 
+      blurActiveElement();
       this.btnJoin.setAttribute('disabled', 'true');
       this.appChatsManager.joinChannel(-this.peerId).finally(() => {
         this.btnJoin.removeAttribute('disabled');

src/components/dialogsContextMenu.ts

@@ -1,12 +1,9 @@
-import appChatsManager from "../lib/appManagers/appChatsManager";
 import appDialogsManager from "../lib/appManagers/appDialogsManager";
 import appMessagesManager, {Dialog} from "../lib/appManagers/appMessagesManager";
 import appPeersManager from "../lib/appManagers/appPeersManager";
 import rootScope from "../lib/rootScope";
 import { findUpTag } from "../helpers/dom";
 import { positionMenu, openBtnMenu } from "./misc";
-import { PopupButton } from "./popups";
-import PopupPeer from "./popups/peer";
 import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
 import PopupDeleteDialog from "./popups/deleteDialog";
 

src/components/emoticonsDropdown/index.ts

@@ -56,18 +56,18 @@ export class EmoticonsDropdown {
   };
 
   private selectTab: ReturnType<typeof horizontalMenu>;
-
-  private firstTime = true;
+  private forceClose = false;
 
   constructor() {
     this.element = document.getElementById('emoji-dropdown') as HTMLDivElement;
   }
 
   public attachButtonListener(button: HTMLElement) {
+    let firstTime = true;
     if(isTouchSupported) {
       button.addEventListener('click', () => {
-        if(this.firstTime) {
-          this.firstTime = false;
+        if(firstTime) {
+          firstTime = false;
           this.toggle(true);
         } else {
           this.toggle();
@@ -75,29 +75,13 @@ export class EmoticonsDropdown {
       });
     } else {
       button.onmouseover = (e) => {
+        //console.log('onmouseover button');
         clearTimeout(this.displayTimeout);
         //this.displayTimeout = setTimeout(() => {
-          if(this.firstTime) {
-            button.onmouseout = this.element.onmouseout = (e) => {
-              if(test) return;
-              if(!this.element.classList.contains('active')) return;
-
-              const toElement = (e as any).toElement as Element;
-              if(toElement && findUpClassName(toElement, 'emoji-dropdown')) {
-                return;
-              }
-
-              clearTimeout(this.displayTimeout);
-              this.displayTimeout = window.setTimeout(() => {
-                this.toggle(false);
-              }, 200);
-            };
-  
-            this.element.onmouseover = (e) => {
-              clearTimeout(this.displayTimeout);
-            };
+          if(firstTime) {
+            button.onmouseout = this.onMouseOut;
 
-            this.firstTime = false;
+            firstTime = false;
           }
 
           this.toggle(true);
@@ -106,6 +90,21 @@ export class EmoticonsDropdown {
     }
   }
 
+  private onMouseOut = (e: MouseEvent) => {
+    if(test) return;
+    if(!this.element.classList.contains('active')) return;
+
+    const toElement = (e as any).toElement as Element;
+    if(toElement && findUpClassName(toElement, 'emoji-dropdown')) {
+      return;
+    }
+
+    clearTimeout(this.displayTimeout);
+    this.displayTimeout = window.setTimeout(() => {
+      this.toggle(false);
+    }, 200);
+  };
+
   private init() {
     this.emojiTab = new EmojiTab();
     this.stickersTab = new StickersTab();
@@ -161,6 +160,18 @@ export class EmoticonsDropdown {
 
     rootScope.on('peer_changed', this.checkRights);
     this.checkRights();
+
+    if(!isTouchSupported) {
+      this.element.onmouseout = this.onMouseOut;
+      this.element.onmouseover = (e) => {
+        if(this.forceClose) {
+          return;
+        }
+
+        //console.log('onmouseover element');
+        clearTimeout(this.displayTimeout);
+      };
+    }
   }
 
   private onSelectTabClick = (id: number) => {
@@ -237,6 +248,9 @@ export class EmoticonsDropdown {
         EmoticonsDropdown.lazyLoadQueue.unlock();
         EmoticonsDropdown.lazyLoadQueue.refresh();
 
+        this.forceClose = false;
+        this.container.classList.remove('disable-hover');
+
         this.events.onOpenAfter.forEach(cb => cb());
       }, isTouchSupported ? 0 : 200);
 
@@ -264,6 +278,9 @@ export class EmoticonsDropdown {
         EmoticonsDropdown.lazyLoadQueue.unlock();
         EmoticonsDropdown.lazyLoadQueue.refresh();
 
+        this.forceClose = false;
+        this.container.classList.remove('disable-hover');
+
         this.events.onCloseAfter.forEach(cb => cb());
       }, isTouchSupported ? 0 : 200);
 
@@ -353,6 +370,8 @@ export class EmoticonsDropdown {
     if(appImManager.chat.input.sendMessageWithDocument(fileId)) {
       /* dropdown.classList.remove('active');
       toggleEl.classList.remove('active'); */
+      emoticonsDropdown.forceClose = true;
+      emoticonsDropdown.container.classList.add('disable-hover');
       emoticonsDropdown.toggle(false);
     } else {
       console.warn('got no doc by id:', fileId);

src/components/emoticonsDropdown/tabs/stickers.ts

@@ -6,7 +6,6 @@ import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsMana
 import appDownloadManager from "../../../lib/appManagers/appDownloadManager";
 import appStickersManager from "../../../lib/appManagers/appStickersManager";
 import lottieLoader from "../../../lib/lottieLoader";
-import apiManager from "../../../lib/mtproto/mtprotoworker";
 import { RichTextProcessor } from "../../../lib/richtextprocessor";
 import rootScope from "../../../lib/rootScope";
 import animationIntersector from "../../animationIntersector";
@@ -330,7 +329,7 @@ export default class StickersTab implements EmoticonsTab {
       // @ts-ignore
       const players = Object.values(lottieLoader.players).filter(p => p.width == 80);
       
-      console.log('STICKERS RENDERED IN PANEL:', players.length, players.filter(p => !p.paused).length, this.lazyLoadQueue.intersector.getVisible().length);
+      console.log('STICKERS RENDERED IN PANEL:', players.length, players.filter(p => !p.paused).length, this.superStickerRenderer.lazyLoadQueue.intersector.getVisible().length);
     }, .25e3); */
     
 

src/lib/appManagers/appMessagesManager.ts

@@ -2799,7 +2799,7 @@ export class AppMessagesManager {
     offset_id_offset: number,
     history: MyMessage[]
   }> {
-    const foundMsgs: any[] = [];
+    const foundMsgs: Message.message[] = [];
 
     //this.log('search', maxId);
 
@@ -2940,7 +2940,7 @@ export class AppMessagesManager {
 
     if(foundMsgs.length) {
       if(foundMsgs.length < limit && (beta ? storage.count !== storage.history.length : true)) {
-        maxId = foundMsgs[foundMsgs.length - 1];
+        maxId = foundMsgs[foundMsgs.length - 1].mid;
         limit = limit - foundMsgs.length;
       } else {
         return Promise.resolve({
@@ -3036,7 +3036,7 @@ export class AppMessagesManager {
 
       return {
         count: foundCount,
-        offset_id_offset: searchResult.offset_id_offset,
+        offset_id_offset: searchResult.offset_id_offset || 0,
         next_rate: searchResult.next_rate,
         history: foundMsgs
       };

src/lib/lottieLoader.ts

@@ -129,6 +129,8 @@ export class RLottiePlayer extends EventListenerBase<{
       }
     }
 
+    //options.noCache = true;
+    
     // * Cache frames params
     if(!options.noCache/*  && false */) {
       // проверка на размер уже после скейлинга, сделано для попапа и сайдбара, где стикеры 80х80 и 68х68, туда нужно 75%
@@ -140,7 +142,8 @@ export class RLottiePlayer extends EventListenerBase<{
         this.cachingDelta = 4; // 75%
       }
     }
-
+    
+    // this.cachingDelta = Infinity;
     // if(isApple) {
     //   this.cachingDelta = 0; //2 // 50%
     // }
@@ -238,9 +241,11 @@ export class RLottiePlayer extends EventListenerBase<{
 
     try {
       this.imageData.data.set(frame);
-
+      
       //this.context.putImageData(new ImageData(frame, this.width, this.height), 0, 0);
+      //let perf = performance.now();
       this.context.putImageData(this.imageData, 0, 0);
+      //console.log('renderFrame2 perf:', performance.now() - perf);
     } catch(err) {
       console.error('RLottiePlayer renderFrame error:', err/* , frame */, this.width, this.height);
       this.autoplay = false;