Fix media viewer search

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;

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);

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;

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<any>[] = [];
     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;
         }

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();
       

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;

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 {

src/scss/partials/popups/_stickers.scss

@@ -1,5 +1,6 @@
 .popup-stickers {
   $parent: ".popup";
+  user-select: none;
 
   h6 {
     padding: 0 2rem 0 1.5rem;