From a4e46571decde7fcc4762ff90aab35c8d2dbc1b1 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 24 Dec 2020 01:35:49 +0200 Subject: [PATCH] Fix unloading stickers from panel after closening --- src/components/chat/input.ts | 4 +- src/components/chat/topbar.ts | 7 +- src/components/dialogsContextMenu.ts | 3 - src/components/emoticonsDropdown/index.ts | 67 ++++++++++++------- .../emoticonsDropdown/tabs/stickers.ts | 3 +- src/lib/appManagers/appMessagesManager.ts | 6 +- src/lib/lottieLoader.ts | 9 ++- 7 files changed, 62 insertions(+), 37 deletions(-) diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 359848fd..3d7c4b78 100644 --- a/src/components/chat/input.ts +++ b/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(); diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 8c7e101b..a35b5606 100644 --- a/src/components/chat/topbar.ts +++ b/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'); diff --git a/src/components/dialogsContextMenu.ts b/src/components/dialogsContextMenu.ts index 5a95ed95..8e2a217e 100644 --- a/src/components/dialogsContextMenu.ts +++ b/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"; diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index 63c5c443..f8ce6c66 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/src/components/emoticonsDropdown/index.ts @@ -56,18 +56,18 @@ export class EmoticonsDropdown { }; private selectTab: ReturnType; - - 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); diff --git a/src/components/emoticonsDropdown/tabs/stickers.ts b/src/components/emoticonsDropdown/tabs/stickers.ts index 6f685958..ec0fd575 100644 --- a/src/components/emoticonsDropdown/tabs/stickers.ts +++ b/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); */ diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index aaf02f1c..48e66dd6 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/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 }; diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index c2f020c1..7391d239 100644 --- a/src/lib/lottieLoader.ts +++ b/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;