diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 2215359a..667255f1 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -504,13 +504,20 @@ export default class ChatBubbles { let rAF = 0; const onResizeEnd = () => { - //this.log('resize end', scrolled, this.scrollable.scrollTop); + const height = this.scrollable.container.offsetHeight; + if(height !== wasHeight) { // * fix opening keyboard while ESG is active, offsetHeight will change right between 'start' and this first frame + part += wasHeight - height; + } + + /* if(DEBUG) { + this.log('resize end', scrolled, this.scrollable.scrollTop, height, this.scrollable.isScrolledDown); + } */ if(part) { this.scrollable.scrollTop += Math.round(part); } - wasHeight = this.scrollable.container.offsetHeight; + wasHeight = height; scrolled = 0; rAF = 0; part = 0; @@ -526,8 +533,7 @@ export default class ChatBubbles { }); }; - // @ts-ignore - const resizeObserver = new ResizeObserver((entries) => { + const processEntries = (entries: any) => { if(skip) { setEndRAF(false); return; @@ -549,9 +555,15 @@ export default class ChatBubbles { if(!resizing) { resizing = true; - //this.log('resize start', realDiff, this.scrollable.isScrolledDown); + /* if(DEBUG) { + this.log('resize start', realDiff, this.scrollable.scrollTop, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown); + } */ if(realDiff < 0 && this.scrollable.isScrolledDown) { + //if(isSafari) { // * fix opening keyboard while ESG is active + part = -realDiff; + //} + skip = true; setEndRAF(false); return; @@ -560,25 +572,23 @@ export default class ChatBubbles { scrolled += diff; - //this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight/* , entry */); + /* if(DEBUG) { + this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight); + } */ if(diff) { const needScrollTop = this.scrollable.scrollTop + diff; this.scrollable.scrollTop = needScrollTop; - /* if(rAF) window.cancelAnimationFrame(rAF); - rAF = window.requestAnimationFrame(() => { - this.scrollable.scrollTop = needScrollTop; - setEndRAF(true); - //this.log('resize after RAF', part); - }); */ - } //else { - setEndRAF(false); - //} + } + + setEndRAF(false); part = _part; wasHeight = height; - }); + }; + // @ts-ignore + const resizeObserver = new ResizeObserver(processEntries); resizeObserver.observe(this.bubblesContainer); } } @@ -2102,8 +2112,10 @@ export default class ChatBubbles { bubble.classList.add('photo'); const size = webpage.photo.sizes[webpage.photo.sizes.length - 1]; + let isSquare = false; if(size.w === size.h && quoteTextDiv.childElementCount) { bubble.classList.add('is-square-photo'); + isSquare = true; } else if(size.h > size.w) { bubble.classList.add('is-vertical-photo'); } @@ -2117,7 +2129,8 @@ export default class ChatBubbles { isOut, lazyLoadQueue: this.lazyLoadQueue, middleware: this.getMiddleware(), - loadPromises + loadPromises, + withoutPreloader: isSquare }); } diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 84237f29..dc662c41 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -724,9 +724,13 @@ export default class ChatInput { this.restoreScroll(); }); */ - /* if(isSafari) { - this.listenerSetter.add(this.messageInput, 'focusin', () => { - fixSafariStickyInput(this.messageInput); + /* if(isSafari) { + this.listenerSetter.add(this.messageInput, 'mousedown', () => { + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + emoticonsDropdown.toggle(false); + }); + }); }); } */ } diff --git a/src/components/preloader.ts b/src/components/preloader.ts index da5657e7..aafb3edc 100644 --- a/src/components/preloader.ts +++ b/src/components/preloader.ts @@ -1,6 +1,7 @@ import { isInDOM, cancelEvent, attachClickEvent } from "../helpers/dom"; import { CancellablePromise } from "../helpers/cancellablePromise"; import SetTransition from "./singleTransition"; +import { fastRaf } from "../helpers/schedulers"; const TRANSITION_TIME = 200; @@ -24,6 +25,8 @@ export default class ProgressivePreloader { private loadFunc: () => {download: CancellablePromise}; + private totalLength: number; + constructor(options?: Partial<{ isUpload: ProgressivePreloader['isUpload'], cancelable: ProgressivePreloader['cancelable'], @@ -188,7 +191,7 @@ export default class ProgressivePreloader { //return; this.detached = false; - /* window.requestAnimationFrame(() => { + /* fastRaf(() => { if(this.detached) return; this.detached = false; */ @@ -204,7 +207,13 @@ export default class ProgressivePreloader { elem[this.attachMethod](this.preloader); } - window.requestAnimationFrame(() => { + fastRaf(() => { + //console.log('[PP]: attach after rAF', this.detached, performance.now()); + + if(this.detached) { + return; + } + SetTransition(this.preloader, 'is-visible', true, TRANSITION_TIME); }); @@ -220,17 +229,21 @@ export default class ProgressivePreloader { //return; if(this.preloader && this.preloader.parentElement) { - /* setTimeout(() => *///window.requestAnimationFrame(() => { + /* setTimeout(() => *///fastRaf(() => { /* if(!this.detached) return; this.detached = true; */ - //if(this.preloader.parentElement) { - window.requestAnimationFrame(() => { - SetTransition(this.preloader, 'is-visible', false, TRANSITION_TIME, () => { - this.preloader.remove(); - }); + fastRaf(() => { + //console.log('[PP]: detach after rAF', this.detached, performance.now()); + + if(!this.detached || !this.preloader.parentElement) { + return; + } + + SetTransition(this.preloader, 'is-visible', false, TRANSITION_TIME, () => { + this.preloader.remove(); }); - //} + }); //})/* , 5e3) */; } } @@ -246,9 +259,12 @@ export default class ProgressivePreloader { } try { - const totalLength = this.circle.getTotalLength(); + if(!this.totalLength) { + this.totalLength = this.circle.getTotalLength(); + } + //console.log('setProgress', (percents / 100 * totalLength)); - this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', ' + totalLength; + this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * this.totalLength) + ', ' + this.totalLength; } catch(err) {} } } diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 1861cff8..a9a93f1d 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -644,7 +644,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT const load = () => { const promise = getDownloadPromise(); - if(!cacheContext.downloaded && !withoutPreloader) { + if(!cacheContext.downloaded && !withoutPreloader && (size as PhotoSize.photoSize).w >= 150 && (size as PhotoSize.photoSize).h >= 150) { preloader.attach(container, false, promise); } diff --git a/src/lib/rootScope.ts b/src/lib/rootScope.ts index e2c7ba8c..8056274b 100644 --- a/src/lib/rootScope.ts +++ b/src/lib/rootScope.ts @@ -85,11 +85,13 @@ type BroadcastEvents = { 'event-heavy-animation-end': void, 'im_mount': void, - 'im_tab_change': number + 'im_tab_change': number, + + 'overlay_toggle': boolean, }; class RootScope extends EventListenerBase { - public overlayIsActive: boolean = false; + private _overlayIsActive: boolean = false; public myId = 0; public idle = { isIDLE: false @@ -110,6 +112,15 @@ class RootScope extends EventListenerBase { }); } + get overlayIsActive() { + return this._overlayIsActive; + } + + set overlayIsActive(value: boolean) { + this._overlayIsActive = value; + this.broadcast('overlay_toggle', value); + } + public broadcast = (name: T, detail?: BroadcastEvents[T]) => { /* if(DEBUG) { if(name != 'user_update') { diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 3c8d9acd..b446c441 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -116,9 +116,10 @@ $chat-helper-size: 39px; background: none; border: none; width: 100%; - padding: 9px 8px; + padding: .6875rem .5625rem; /* height: 100%; */ - max-height: calc(30rem - var(--padding-vertical) * 2); + max-height: calc(30rem - 2.5rem); // 2.5rem - input helper (reply) + min-height: inherit; overflow-y: none; resize: none; border: none; @@ -830,6 +831,7 @@ $chat-helper-size: 39px; position: relative; overflow: hidden; align-self: center; + min-height: calc(var(--chat-input-size) - var(--padding-vertical) * 2); > .scrollable { position: relative;