From aa7ddf8004bf3e28d075c433859ad322b6122bd2 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Wed, 23 Dec 2020 04:18:24 +0200 Subject: [PATCH] Fix media viewer search --- src/components/appMediaViewer.ts | 13 ++++++---- src/components/chat/bubbles.ts | 2 +- src/components/chat/chat.ts | 2 +- .../sidebarRight/tabs/sharedMedia.ts | 25 +++++++++++-------- src/lib/appManagers/appImManager.ts | 2 +- src/scss/partials/_chatBubble.scss | 4 +-- src/scss/partials/_ripple.scss | 8 ++++-- src/scss/partials/popups/_stickers.scss | 1 + 8 files changed, 35 insertions(+), 22 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 783da884..da01b174 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -1110,6 +1110,7 @@ type AppMediaViewerTargetType = { export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delete' | 'forward', AppMediaViewerTargetType> { public currentMessageId = 0; public peerId: number; + public threadId: number; constructor(private inputFilter: 'inputMessagesFilterPhotoVideo' | 'inputMessagesFilterChatPhotos' = 'inputMessagesFilterPhotoVideo') { super(['delete', 'forward']); @@ -1193,7 +1194,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet } const message = appMessagesManager.getMessageByPeer(this.peerId, mid); - appImManager.setPeer(message.peerId, mid); + appImManager.setInnerPeer(message.peerId, mid, this.threadId ? 'discussion' : undefined, this.threadId); }); } }; @@ -1237,13 +1238,14 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet } if(anchor) maxId = anchor.mid; - if(!older) maxId += 1; + if(!older) maxId = appMessagesManager.incrementMessageId(maxId, 1); const peerId = this.peerId; + const threadId = this.threadId; const promise = appMessagesManager.getSearch(peerId, '', - {_: this.inputFilter}, maxId, backLimit ? 0 : loadCount/* older ? loadCount : 0 */, 0, backLimit).then(value => { - if(this.peerId != peerId) { + {_: this.inputFilter}, maxId, backLimit ? 0 : loadCount/* older ? loadCount : 0 */, 0, backLimit, threadId).then(value => { + if(this.peerId !== peerId || this.threadId !== threadId) { this.log.warn('peer changed'); return; } @@ -1310,7 +1312,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet } public async openMedia(message: any, target?: HTMLElement, reverse = false, - prevTargets: AppMediaViewer['prevTargets'] = [], nextTargets: AppMediaViewer['prevTargets'] = [], needLoadMore = true) { + prevTargets: AppMediaViewer['prevTargets'] = [], nextTargets: AppMediaViewer['prevTargets'] = [], needLoadMore = true, threadId?: number) { if(this.setMoverPromise) return this.setMoverPromise; const mid = message.mid; @@ -1325,6 +1327,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet } else { this.reverse = reverse; this.peerId = message.peerId; + this.threadId = threadId; } this.currentMessageId = mid; diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index f3bda25c..6fa16a76 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -617,7 +617,7 @@ export default class ChatBubbles { } new AppMediaViewer().openMedia(message, targets[idx].element, true, - targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */); + targets.slice(0, idx), targets.slice(idx + 1), undefined, this.chat.threadId/* , !message.grouped_id */); cancelEvent(e); //appMediaViewer.openMedia(message, target as HTMLImageElement); diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts index 474e0a47..698baa7e 100644 --- a/src/components/chat/chat.ts +++ b/src/components/chat/chat.ts @@ -164,7 +164,7 @@ export default class Chat extends EventListenerBase<{ } this.peerId = peerId; - appSidebarRight.sharedMediaTab.setPeer(peerId); + appSidebarRight.sharedMediaTab.setPeer(peerId, this.threadId); this.cleanup(); } else { this.peerChanged = true; diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index f5bec469..f505868e 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -42,6 +42,7 @@ export default class AppSharedMediaTab implements SliderTab { public closeBtn: HTMLElement; private peerId = 0; + private threadId = 0; public profileContentEl: HTMLDivElement; public contentContainer: HTMLDivElement; @@ -190,7 +191,7 @@ export default class AppSharedMediaTab implements SliderTab { return {element, mid: id}; }); - new AppMediaViewer().openMedia(message, target, false, targets.slice(idx + 1).reverse(), targets.slice(0, idx).reverse(), true); + new AppMediaViewer().openMedia(message, target, false, targets.slice(idx + 1).reverse(), targets.slice(0, idx).reverse(), true/* , this.threadId */); }); this.profileElements.notificationsCheckbox.addEventListener('change', () => { @@ -403,6 +404,7 @@ export default class AppSharedMediaTab implements SliderTab { public async performSearchResult(messages: any[], type: SharedMediaType, append = true) { const peerId = this.peerId; + const threadId = this.threadId; const elemsToAppend: HTMLElement[] = []; const promises: Promise[] = []; const sharedMediaDiv = this.sharedMedia[type]; @@ -455,7 +457,7 @@ export default class AppSharedMediaTab implements SliderTab { const load = () => appPhotosManager.preloadPhoto(isPhoto ? media.id : media, appPhotosManager.choosePhotoSize(media, 200, 200)) .then(() => { - if(appImManager.chat.peerId != peerId) { + if(this.peerId != peerId || this.threadId != threadId) { this.log.warn('peer changed'); return; } @@ -606,7 +608,7 @@ export default class AppSharedMediaTab implements SliderTab { if(webpage.photo) { let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60)) .then(() => { - if(appImManager.chat.peerId != peerId) { + if(this.peerId != peerId || this.threadId != threadId) { this.log.warn('peer changed'); return; } @@ -660,7 +662,7 @@ export default class AppSharedMediaTab implements SliderTab { if(promises.length) { await Promise.all(promises); - if(this.peerId != peerId) { + if(this.peerId !== peerId || this.threadId !== threadId) { this.log.warn('peer changed'); return; } @@ -696,6 +698,7 @@ export default class AppSharedMediaTab implements SliderTab { this.log('loadSidebarMedia', single, this.peerId, this.loadSidebarMediaPromises); const peerId = this.peerId; + const threadId = this.threadId; let typesToLoad = single ? [this.sharedMediaType] : this.sharedMediaTypes.filter(t => t !== this.sharedMediaType && t !== 'inputMessagesFilterEmpty'); typesToLoad = typesToLoad.filter(type => !this.loadedAllMedia[type] @@ -750,14 +753,14 @@ export default class AppSharedMediaTab implements SliderTab { this.log(logStr + 'search house of glass pre', type, maxId); //let loadCount = history.length ? 50 : 15; - return this.loadSidebarMediaPromises[type] = appMessagesManager.getSearch(peerId, '', {_: type}, maxId, loadCount) + return this.loadSidebarMediaPromises[type] = appMessagesManager.getSearch(peerId, '', {_: type}, maxId, loadCount, undefined, undefined/* , this.threadId */) .then(value => { const mids = value.history.map(message => message.mid); history.push(...mids); this.log(logStr + 'search house of glass', type, value); - if(appImManager.chat.peerId != peerId) { + if(this.peerId !== peerId || this.threadId !== threadId) { this.log.warn('peer changed'); return; } @@ -875,8 +878,8 @@ export default class AppSharedMediaTab implements SliderTab { this.loadMutex = promise; } - public setPeer(peerId: number) { - if(this.peerId == peerId) return; + public setPeer(peerId: number, threadId = 0) { + if(this.peerId === peerId && this.threadId === peerId) return; if(this.init) { this.init(); @@ -884,6 +887,7 @@ export default class AppSharedMediaTab implements SliderTab { } this.peerId = peerId; + this.threadId = threadId; this.cleanup(); } @@ -892,6 +896,7 @@ export default class AppSharedMediaTab implements SliderTab { this.cleaned = false; const peerId = this.peerId; + const threadId = this.threadId; this.cleanupHTML(); @@ -923,7 +928,7 @@ export default class AppSharedMediaTab implements SliderTab { } appProfileManager.getProfile(peerId).then(userFull => { - if(this.peerId != peerId) { + if(this.peerId !== peerId || this.threadId !== threadId) { this.log.warn('peer changed'); return; } @@ -939,7 +944,7 @@ export default class AppSharedMediaTab implements SliderTab { let chat = appPeersManager.getPeer(peerId); appProfileManager.getChatFull(chat.id).then((chatFull) => { - if(this.peerId != peerId) { + if(this.peerId !== peerId || this.threadId !== threadId) { this.log.warn('peer changed'); return; } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index c8e1efb0..1c40f2c7 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -466,7 +466,7 @@ export class AppImManager { appSidebarRight.searchTab.closeBtn?.click(); } - appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId); + appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId); appSidebarRight.sharedMediaTab.loadSidebarMedia(true); appSidebarRight.sharedMediaTab.fillProfileElements(); diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 6413e8c8..ee6f5e56 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1417,7 +1417,7 @@ $bubble-margin: .25rem; } &.photo, &.video { - &.is-message-empty.is-group-last { + &.is-message-empty.is-group-last:not(.with-replies) { .bubble__container:after { display: none; } @@ -1683,7 +1683,7 @@ $bubble-margin: .25rem; } &.is-message-empty.is-group-last { - &:not(.with-media-tail) { + &:not(.with-media-tail):not(.with-replies) { &.photo, &.video { .bubble__container { border-bottom-left-radius: 6px; diff --git a/src/scss/partials/_ripple.scss b/src/scss/partials/_ripple.scss index 1b1c9581..2bb43a0d 100644 --- a/src/scss/partials/_ripple.scss +++ b/src/scss/partials/_ripple.scss @@ -48,11 +48,13 @@ transform: scale(0); border-radius: 50%; animation: ripple-effect .7s forwards; + //animation-timing-function: ease-out; transition: .35s opacity; //overflow: hidden; .btn-menu &, .c-ripple.is-square & { animation-name: ripple-effect-handhelds; + //animation-timing-function: ease-out; animation-duration: .2s; transition-duration: .1s; //border-radius: 15%; @@ -80,9 +82,10 @@ --ripple-duration: .2s; &__circle { + animation-name: ripple-effect-handhelds; + //animation-timing-function: ease-out; animation-duration: .2s; transition-duration: .1s; - animation-name: ripple-effect-handhelds; } } } @@ -100,7 +103,8 @@ @keyframes ripple-effect-handhelds { 0% { - transform: scale(.85); + //transform: scale(.85); + transform: scale(.27); } to { diff --git a/src/scss/partials/popups/_stickers.scss b/src/scss/partials/popups/_stickers.scss index 77b54da9..6e5b17a9 100644 --- a/src/scss/partials/popups/_stickers.scss +++ b/src/scss/partials/popups/_stickers.scss @@ -1,5 +1,6 @@ .popup-stickers { $parent: ".popup"; + user-select: none; h6 { padding: 0 2rem 0 1.5rem;