fix edit message media & mediaviewer animation

src/components/scrollable.ts

@@ -66,6 +66,23 @@ export default class Scrollable {
       this.scrollType = 'scrollWidth';
       this.scrollSide = 'scrollLeft';
       this.clientAxis = 'clientX';
+
+      let scrollHorizontally = (e: any) => {
+        e = window.event || e;
+        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
+        this.container.scrollLeft -= (delta * 20);
+        e.preventDefault();
+      };
+      if(this.container.addEventListener) {
+        // IE9, Chrome, Safari, Opera
+        this.container.addEventListener("mousewheel", scrollHorizontally, false);
+        // Firefox
+        this.container.addEventListener("DOMMouseScroll", scrollHorizontally, false);
+      } else {
+        // IE 6/7/8
+        // @ts-ignore
+        this.container.attachEvent("onmousewheel", scrollHorizontally);
+      }
     } else if(y) {
       this.container.classList.add('scrollable-y');
       this.type = 'height';

src/components/wrappers.ts

@@ -45,7 +45,7 @@ export type MTPhotoSize = {
 };
 
 export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true, round = false) {
-  if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
+  if(!container.firstElementChild || (container.firstElementChild.tagName != 'IMG' && container.firstElementChild.tagName != 'VIDEO')) {
     let size = appPhotosManager.setAttachmentSize(doc, container);
   }
   
@@ -221,6 +221,13 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
     }
   });
 
+  /* apiFileManager.getDownloadedFile(Object.assign({}, doc, {_: 'inputDocumentFileLocation'})).then(() => {
+    downloadDiv.classList.remove('downloading');
+    downloadDiv.remove();
+  }, () => {
+
+  }); */
+  
   return docDiv;
 }
 

src/lib/appManagers/appImManager.ts

@@ -475,13 +475,14 @@ class ChatInput {
         noWebPage: this.noWebPage,
         webPage: this.willSendWebPage
       });
+
+      appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight;
     }
     
     this.editMsgID = 0;
     this.replyToMsgID = 0;
     this.noWebPage = false;
     this.replyElements.container.classList.remove('active');
-    appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight;
     this.willSendWebPage = null;
     this.messageInput.innerText = '';
 
@@ -815,7 +816,7 @@ export class AppImManager {
           return;
         }
 
-        appMediaViewer.openMedia(message, true);
+        appMediaViewer.openMedia(message, true, target as HTMLImageElement);
       }
 
       //console.log('chatInner click', e);

src/lib/appManagers/appMediaViewer copy.ts

@@ -0,0 +1,330 @@
+//import { MTDocument, ProgressivePreloader, wrapVideo } from "../../components/misc";
+import appPeersManager from "./appPeersManager";
+import appDialogsManager from "./appDialogsManager";
+import appPhotosManager from "./appPhotosManager";
+import appSidebarRight from "./appSidebarRight";
+import { $rootScope } from "../utils";
+import appMessagesManager from "./appMessagesManager";
+//import { CancellablePromise } from "../mtproto/apiFileManager";
+import { RichTextProcessor } from "../richtextprocessor";
+import { logger } from "../polyfill";
+import ProgressivePreloader from "../../components/preloader";
+import { wrapVideo } from "../../components/wrappers";
+
+export class AppMediaViewer {
+  private overlaysDiv = document.querySelector('.overlays') as HTMLDivElement;
+  private author = {
+    avatarEl: this.overlaysDiv.querySelector('.user-avatar') as HTMLDivElement,
+    nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLDivElement,
+    date: this.overlaysDiv.querySelector('.media-viewer-date') as HTMLDivElement
+  };
+  private buttons = {
+    delete: this.overlaysDiv.querySelector('.media-viewer-delete-button') as HTMLDivElement,
+    forward: this.overlaysDiv.querySelector('.media-viewer-forward-button') as HTMLDivElement,
+    download: this.overlaysDiv.querySelector('.media-viewer-download-button') as HTMLDivElement,
+    close: this.overlaysDiv.querySelector('.media-viewer-close-button') as HTMLDivElement,
+    prev: this.overlaysDiv.querySelector('.media-viewer-switcher-left') as HTMLDivElement,
+    next: this.overlaysDiv.querySelector('.media-viewer-switcher-right') as HTMLDivElement,
+  };
+  private content = {
+    container: this.overlaysDiv.querySelector('.media-viewer-media') as HTMLDivElement,
+    caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement,
+    mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement
+  };
+  
+  private reverse = false;
+  public currentMessageID = 0;
+  private higherMsgID: number | undefined = 0;
+  private lowerMsgID: number | undefined = 0;
+  private preloader: ProgressivePreloader = null;
+  private lastTarget: HTMLElement = null;
+
+  public log: ReturnType<typeof logger>; 
+  
+  constructor() {
+    this.log = logger('AMV');
+    this.preloader = new ProgressivePreloader();
+    
+    this.buttons.close.addEventListener('click', () => {
+      //this.overlaysDiv.classList.remove('active');
+      this.content.container.innerHTML = '';
+      this.currentMessageID = 0;
+
+      this.setMoverToTarget(this.lastTarget, true);
+    });
+    
+    this.buttons.prev.addEventListener('click', () => {
+      let id = this.reverse ? this.lowerMsgID : this.higherMsgID;
+      if(id) {
+        this.openMedia(appMessagesManager.getMessage(id), this.reverse);
+      } else {
+        this.buttons.prev.style.display = 'none';
+      }
+    });
+    
+    this.buttons.next.addEventListener('click', () => {
+      let id = this.reverse ? this.higherMsgID : this.lowerMsgID;
+      if(id) {
+        this.openMedia(appMessagesManager.getMessage(id), this.reverse);
+      } else {
+        this.buttons.next.style.display = 'none';
+      }
+    });
+
+    this.buttons.download.addEventListener('click', () => {
+      let message = appMessagesManager.getMessage(this.currentMessageID);
+      appPhotosManager.downloadPhoto(message.media.photo.id);
+    });
+    /* this.buttons.prev.onclick = (e) => {
+      let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
+      
+      let message: any;
+      
+      if(!this.reverse) {
+        for(let mid of history) {
+          if(mid > this.currentMessageID) {
+            let _message = appMessagesManager.getMessage(mid);
+            if(_message.media && _message.media.photo) {
+              message = _message;
+            }
+          } else break;
+        }
+      } else {
+        for(let mid of history) {
+          if(mid < this.currentMessageID) {
+            let _message = appMessagesManager.getMessage(mid);
+            if(_message.media && _message.media.photo) {
+              message = _message;
+              break;
+            }
+          }
+        }
+      }
+      
+      if(message) {
+        this.openMedia(message.media.photo, message.mid, this.reverse);
+      } else {
+        this.buttons.prev.style.display = 'none';
+      }
+    };
+    
+    this.buttons.next.onclick = (e) => {
+      let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
+      
+      let message: any;
+      
+      if(this.reverse) {
+        for(let mid of history) {
+          if(mid > this.currentMessageID) {
+            let _message = appMessagesManager.getMessage(mid);
+            if(_message.media && _message.media.photo) {
+              message = _message;
+            }
+          } else break;
+        }
+      } else {
+        for(let mid of history) {
+          if(mid < this.currentMessageID) {
+            let _message = appMessagesManager.getMessage(mid);
+            if(_message.media && _message.media.photo) {
+              message = _message;
+              break;
+            }
+          }
+        }
+      }
+      
+      if(message) {
+        this.openMedia(message.media.photo, message.mid, this.reverse);
+      } else {
+        this.buttons.next.style.display = 'none';
+      }
+    }; */
+  }
+
+  public setMoverToTarget(target: HTMLElement, closing = false) {
+    let mover = this.content.mover;
+
+    if(!closing) {
+      mover.innerHTML = '';
+    }
+
+    let rect = target.getBoundingClientRect();
+    mover.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+    mover.style.width = rect.width + 'px';
+    mover.style.height = rect.height + 'px';
+
+    if(!closing) {
+      let img: HTMLImageElement;
+      let video: HTMLVideoElement;
+
+      if(target.tagName == 'DIV') { // means backgrounded with cover
+        //img.style.objectFit = 'cover';
+        img = new Image();
+        img.src = target.style.backgroundImage.slice(5, -2);
+      } else if(target.tagName == 'IMG') {
+        img = new Image();
+        img.src = (target as HTMLImageElement).src;
+        img.style.objectFit = 'contain';
+      }/*  else if(target.tagName == 'VIDEO') {
+        let video = document.createElement('video');
+        let source = document.createElement('source');
+        source.src = target.querySelector('source').src;
+        video.append(source);
+      } */
+
+      if(img) {
+        mover.appendChild(img);
+      } else if(video) {
+        mover.appendChild(video);
+      }
+  
+      mover.style.display = '';
+      mover.classList.add('active');
+    } else {
+      setTimeout(() => {
+        this.overlaysDiv.classList.remove('active');
+        mover.classList.remove('active');
+        mover.style.display = 'none';
+      }, 250);
+    }
+  }
+  
+  public openMedia(message: any, reverse = false, target?: HTMLElement) {
+    this.log('openMedia doc:', message);
+    let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo;
+    
+    let isVideo = media.mime_type == 'video/mp4';
+    
+    this.currentMessageID = message.mid;
+    this.reverse = reverse;
+    
+    let container = this.content.container;
+    
+    if(container.firstElementChild) {
+      container.innerHTML = '';
+    }
+    
+    let date = new Date(media.date * 1000);
+    let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    
+    let dateStr = months[date.getMonth()] + ' ' + date.getDate() + ' at '+ date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2);
+    this.author.date.innerText = dateStr;
+    
+    let name = appPeersManager.getPeerTitle(message.fromID);
+    this.author.nameEl.innerHTML = name;
+    
+    if(message.message) {
+      this.content.caption.innerHTML = RichTextProcessor.wrapRichText(message.message, {
+        entities: message.totalEntities
+      });
+    } else {
+      this.content.caption.innerHTML = '';
+    }
+    
+    appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID);
+    
+    this.overlaysDiv.classList.add('active');
+
+    container.classList.add('loading');
+
+    // ok set
+    let mover = this.content.mover;
+
+    let rect = target.getBoundingClientRect();
+      
+    this.lastTarget = target;
+    this.setMoverToTarget(target);
+    let maxWidth = appPhotosManager.windowW - 16;
+    let maxHeight = appPhotosManager.windowH - 100;
+    if(isVideo) {
+      //this.preloader.attach(container);
+      //this.preloader.setProgress(75);
+
+      this.log('will wrap video');
+
+      let size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight);
+      let containerRect = container.getBoundingClientRect();
+      let scaleX = containerRect.width / rect.width;
+      let scaleY = containerRect.height / rect.height;
+      mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(${scaleX}, ${scaleY})`;
+      wrapVideo.call(this, media, mover, message, false, this.preloader).then(() => {
+        if(this.currentMessageID != message.mid) {
+          this.log.warn('media viewer changed video');
+          return;
+        }
+      });
+
+
+      /* appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH);
+      wrapVideo.call(this, media, container, message, false, this.preloader).then(() => {
+        if(this.currentMessageID != message.mid) {
+          this.log.warn('media viewer changed video');
+          return;
+        }
+
+        container.classList.remove('loading');
+        container.style.width = '';
+        container.style.height = '';
+      }); */
+    } else {
+      let size = appPhotosManager.setAttachmentSize(media.id, container, maxWidth, maxHeight);
+
+      let containerRect = container.getBoundingClientRect();
+      let scaleX = containerRect.width / rect.width;
+      let scaleY = containerRect.height / rect.height;
+      mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(${scaleX}, ${scaleY})`;
+      
+      this.preloader.attach(mover);
+      //this.preloader.setProgress(75);
+      
+      let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size);
+      cancellablePromise.then((blob) => {
+        if(this.currentMessageID != message.mid) {
+          this.log.warn('media viewer changed photo');
+          return;
+        }
+        
+        this.log('indochina', blob);
+
+        let image = mover.firstElementChild as HTMLImageElement || new Image();
+        image.src = URL.createObjectURL(blob);
+        mover.append(image);
+
+        /* container.classList.remove('loading');
+        
+        container.style.width = '';
+        container.style.height = ''; */
+        
+        this.preloader.detach();
+      }).catch(err => {
+        this.log.error(err);
+      });
+    }
+    
+    let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
+    let index = history.findIndex(m => m == message.mid);
+    let comparer = (mid: number) => {
+      let _message = appMessagesManager.getMessage(mid);
+      let media = _message.media;
+
+      if(media && (media.photo || (media.document && ['video', 'gif'].indexOf(media.document.type) !== -1))) return true;
+      return false;
+    };
+    
+    this.higherMsgID = history.slice(0, index).reverse().find(comparer);
+    this.lowerMsgID = history.slice(index + 1).find(comparer);
+    
+    if(this.reverse) {
+      this.buttons.prev.style.display = this.lowerMsgID !== undefined ? '' : 'none';
+      this.buttons.next.style.display = this.higherMsgID !== undefined ? '' : 'none';
+    } else {
+      this.buttons.prev.style.display = this.higherMsgID !== undefined ? '' : 'none';
+      this.buttons.next.style.display = this.lowerMsgID !== undefined ? '' : 'none';
+    }
+    
+    //console.log('prev and next', prevMsgID, nextMsgID);
+  }
+}
+
+export default new AppMediaViewer();

src/lib/appManagers/appMediaViewer.ts

@@ -13,6 +13,7 @@ import { wrapVideo } from "../../components/wrappers";
 
 export class AppMediaViewer {
   private overlaysDiv = document.querySelector('.overlays') as HTMLDivElement;
+  private mediaViewerDiv = this.overlaysDiv.firstElementChild as HTMLDivElement;
   private author = {
     avatarEl: this.overlaysDiv.querySelector('.user-avatar') as HTMLDivElement,
     nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLDivElement,
@@ -28,7 +29,8 @@ export class AppMediaViewer {
   };
   private content = {
     container: this.overlaysDiv.querySelector('.media-viewer-media') as HTMLDivElement,
-    caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement
+    caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement,
+    mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement
   };
   
   private reverse = false;
@@ -37,6 +39,10 @@ export class AppMediaViewer {
   private lowerMsgID: number | undefined = 0;
   private preloader: ProgressivePreloader = null;
 
+  private lastTarget: HTMLElement = null;
+  private prevTarget: HTMLElement = null;
+  private nextTarget: HTMLElement = null;
+
   public log: ReturnType<typeof logger>; 
   
   constructor() {
@@ -44,12 +50,14 @@ export class AppMediaViewer {
     this.preloader = new ProgressivePreloader();
     
     this.buttons.close.addEventListener('click', () => {
-      this.overlaysDiv.classList.remove('active');
+      //this.overlaysDiv.classList.remove('active');
       this.content.container.innerHTML = '';
       this.currentMessageID = 0;
+
+      this.setMoverToTarget(this.lastTarget, true);
     });
     
-    this.buttons.prev.addEventListener('click', () => {
+    /* this.buttons.prev.addEventListener('click', () => {
       let id = this.reverse ? this.lowerMsgID : this.higherMsgID;
       if(id) {
         this.openMedia(appMessagesManager.getMessage(id), this.reverse);
@@ -65,12 +73,37 @@ export class AppMediaViewer {
       } else {
         this.buttons.next.style.display = 'none';
       }
+    }); */
+    this.buttons.prev.addEventListener('click', () => {
+      let target = this.prevTarget;
+      if(target) {
+        target.click();
+      } else {
+        this.buttons.prev.style.display = 'none';
+      }
+    });
+    
+    this.buttons.next.addEventListener('click', () => {
+      let target = this.nextTarget;
+      if(target) {
+        target.click();
+      } else {
+        this.buttons.next.style.display = 'none';
+      }
     });
 
     this.buttons.download.addEventListener('click', () => {
       let message = appMessagesManager.getMessage(this.currentMessageID);
       appPhotosManager.downloadPhoto(message.media.photo.id);
     });
+
+    this.overlaysDiv.addEventListener('click', (e) => {
+      let target = e.target as HTMLElement;
+
+      if(target == this.mediaViewerDiv || target.tagName == 'IMG') {
+        this.buttons.close.click();
+      }
+    });
     /* this.buttons.prev.onclick = (e) => {
       let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
       
@@ -138,14 +171,74 @@ export class AppMediaViewer {
     }; */
   }
 
-  public openMedia(message: any, reverse = false) {
+  public setMoverToTarget(target: HTMLElement, closing = false) {
-    this.log('openMedia doc:', message);
+    let mover = this.content.mover;
+
+    if(!closing) {
+      mover.innerHTML = '';
+    }
+
+    let rect = target.getBoundingClientRect();
+    let containerRect = this.content.container.getBoundingClientRect();
+    let scaleX = rect.width / containerRect.width;
+    let scaleY = rect.height / containerRect.height;
+    mover.style.transform = `translate(${rect.left}px, ${rect.top}px) scale(${scaleX}, ${scaleY})`;
+    mover.style.width = containerRect.width + 'px';
+    mover.style.height = containerRect.height + 'px';
+
+    if(!closing) {
+      let img: HTMLImageElement;
+      let video: HTMLVideoElement;
+
+      if(target.tagName == 'DIV') { // means backgrounded with cover
+        //img.style.objectFit = 'cover';
+        img = new Image();
+        img.src = target.style.backgroundImage.slice(5, -2);
+      } else if(target.tagName == 'IMG') {
+        img = new Image();
+        img.src = (target as HTMLImageElement).src;
+        img.style.objectFit = 'contain';
+      } else if(target.tagName == 'VIDEO') {
+        video = document.createElement('video');
+        let source = document.createElement('source');
+        source.src = target.querySelector('source').src;
+        video.append(source);
+      }
+
+      if(img) {
+        mover.appendChild(img);
+      } else if(video) {
+        mover.appendChild(video);
+      }
+  
+      mover.style.display = '';
+      mover.classList.add('active');
+    } else {
+      setTimeout(() => {
+        this.overlaysDiv.classList.remove('active');
+      }, 125);
+      setTimeout(() => {
+        mover.innerHTML = '';
+        mover.classList.remove('active');
+        mover.style.display = 'none';
+      }, 250);
+    }
+
+    return () => {
+      mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(1, 1)`;
+    };
+  }
+  
+  public openMedia(message: any, reverse = false, target?: HTMLElement, prevTarget?: HTMLElement, nextTarget?: HTMLElement) {
+    this.log('openMedia doc:', message, prevTarget, nextTarget);
     let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo;
     
     let isVideo = media.mime_type == 'video/mp4';
     
     this.currentMessageID = message.mid;
     this.reverse = reverse;
+    this.prevTarget = prevTarget || null;
+    this.nextTarget = nextTarget || null;
     
     let container = this.content.container;
     
@@ -176,13 +269,35 @@ export class AppMediaViewer {
 
     container.classList.add('loading');
 
+    // ok set
+    let mover = this.content.mover;
+
+    this.lastTarget = target;
+    //this.setMoverToTarget(target);
+    let maxWidth = appPhotosManager.windowW - 16;
+    let maxHeight = appPhotosManager.windowH - 100;
     if(isVideo) {
       //this.preloader.attach(container);
       //this.preloader.setProgress(75);
 
-      this.log('will wrap video');
+      let size = appPhotosManager.setAttachmentSize(media, container, maxWidth, maxHeight);
 
-      appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH);
+      this.log('will wrap video', media, size);
+
+      let afterTimeout = this.setMoverToTarget(target);
+      
+      setTimeout(() => {
+        afterTimeout();
+
+        wrapVideo.call(this, media, mover, message, false, this.preloader).then(() => {
+          if(this.currentMessageID != message.mid) {
+            this.log.warn('media viewer changed video');
+            return;
+          }
+        });
+      });
+
+      /* appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH);
       wrapVideo.call(this, media, container, message, false, this.preloader).then(() => {
         if(this.currentMessageID != message.mid) {
           this.log.warn('media viewer changed video');
@@ -192,12 +307,15 @@ export class AppMediaViewer {
         container.classList.remove('loading');
         container.style.width = '';
         container.style.height = '';
-      });
+      }); */
     } else {
-      let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH);
+      let size = appPhotosManager.setAttachmentSize(media.id, container, maxWidth, maxHeight);
 
-      this.preloader.attach(container);
+      let afterTimeout = this.setMoverToTarget(target);
-      //this.preloader.setProgress(75);
+      
+      setTimeout(() => {
+        afterTimeout();
+        this.preloader.attach(mover);
 
         let cancellablePromise = appPhotosManager.preloadPhoto(media.id, size);
         cancellablePromise.then((blob) => {
@@ -207,26 +325,19 @@ export class AppMediaViewer {
           }
           
           this.log('indochina', blob);
-        if(container.firstElementChild) {
-          container.firstElementChild.remove();
-        }
 
-        let image = new Image();
+          let image = mover.firstElementChild as HTMLImageElement || new Image();
           image.src = URL.createObjectURL(blob);
-        container.append(image);
+          mover.append(image);
-
-        container.classList.remove('loading');
-        
-        container.style.width = '';
-        container.style.height = '';
 
           this.preloader.detach();
         }).catch(err => {
           this.log.error(err);
         });
+      }, 0);
     }
     
-    let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
+    /* let history = appSidebarRight.historiesStorage[$rootScope.selectedPeerID]['inputMessagesFilterPhotoVideo'].slice();
     let index = history.findIndex(m => m == message.mid);
     let comparer = (mid: number) => {
       let _message = appMessagesManager.getMessage(mid);
@@ -245,7 +356,10 @@ export class AppMediaViewer {
     } else {
       this.buttons.prev.style.display = this.higherMsgID !== undefined ? '' : 'none';
       this.buttons.next.style.display = this.lowerMsgID !== undefined ? '' : 'none';
-    }
+    } */
+
+    this.buttons.prev.style.display = this.prevTarget ? '' : 'none';
+    this.buttons.next.style.display = this.nextTarget ? '' : 'none';
     
     //console.log('prev and next', prevMsgID, nextMsgID);
   }

src/lib/appManagers/appSidebarRight.ts

@@ -82,6 +82,10 @@ class AppSidebarRight {
   private profileTabs: HTMLUListElement;
   private prevTabID = -1;
 
+  private mediaDivsByIDs: {
+    [mid: number]: HTMLDivElement
+  } = {};
+
   constructor() {
     let container = this.profileContentEl.querySelector('.profile-tabs-content') as HTMLDivElement;
     this.profileTabs = this.profileContentEl.querySelector('.profile-tabs') as HTMLUListElement;
@@ -135,7 +139,14 @@ class AppSidebarRight {
       }
 
       let message = appMessagesManager.getMessage(messageID);
-      appMediaViewer.openMedia(message, false);
+
+      let ids = Object.keys(this.mediaDivsByIDs).map(k => +k).sort();
+      let idx = ids.findIndex(i => i == messageID);
+
+      let prev = ids[idx + 1] || null;
+      let next = ids[idx - 1] || null;
+
+      appMediaViewer.openMedia(message, false, target, this.mediaDivsByIDs[prev] || null, this.mediaDivsByIDs[next] || null);
     });
 
     this.profileElements.notificationsCheckbox.addEventListener('change', () => {
@@ -286,6 +297,8 @@ class AppSidebarRight {
                 this.lastSharedMediaDiv = document.createElement('div');
               }
 
+              this.mediaDivsByIDs[mid] = div;
+      
               //this.sharedMedia.contentMedia.append(div);
 
               break;
@@ -352,6 +365,8 @@ class AppSidebarRight {
     this.profileElements.notificationsCheckbox.checked = true;
     this.profileElements.notificationsStatus.innerText = 'Enabled';
 
+    this.mediaDivsByIDs = {};
+
     this.lazyLoadQueueSidebar.clear();
 
     Object.keys(this.sharedMedia).forEach(key => {

src/lib/mtproto/apiFileManager.ts

@@ -241,9 +241,11 @@ export class ApiFileManager {
     });
   }
 
-  public getDownloadedFile(location: any, size: any) {
+  public getDownloadedFile(location: any, size?: any) {
     var fileStorage = this.getFileStorage();
-    var fileName = this.getFileName(location);
+    var fileName = typeof(location) !== 'string' ? this.getFileName(location) : location;
+
+    //console.log('getDownloadedFile', location, fileName);
 
     return fileStorage.getFile(fileName, size);
   }
@@ -274,7 +276,7 @@ export class ApiFileManager {
     var cachedPromise = this.cachedSavePromises[fileName] || this.cachedDownloadPromises[fileName];
     var fileStorage = this.getFileStorage();
 
-    //this.log('downloadFile', fileStorage.name, fileName, fileName.length, location, arguments);
+    this.log('downloadFile', fileStorage.name, fileName, fileName.length, location, arguments);
 
     if(cachedPromise) {
       if(toFileEntry) {

src/lib/utils.js

@@ -579,6 +579,10 @@ export function encodeEntities (value) {
 }
 
 export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
+  if(imageW < boxW && imageH < boxH) {
+    return {w: imageW, h: imageH};
+  }
+  
   var boxedImageW = boxW
   var boxedImageH = boxH
 

src/scss/partials/_chat.scss

@@ -776,7 +776,8 @@
 				}
 				
 				&.forwarded .attachment,
-				&.is-reply .attachment/* ,
+				&.is-reply .attachment,
+				&:not(.hide-name) .message-empty + .attachment/* ,
 				&:not(.hide-name):not(.sticker) .attachment */ {
 					border-top-left-radius: 0;
 					border-top-right-radius: 0;

src/scss/partials/_mediaViewer.scss

@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
 
-  .media-viewer-author {
+  &-author {
     position: absolute;
     top: 0;
     left: 0;
@@ -43,7 +43,7 @@
     }
   }
 
-  .media-viewer-buttons {
+  &-buttons {
     position: absolute;
     top: 0;
     right: 0;
@@ -61,7 +61,7 @@
     }
   }
 
-  .media-viewer-content {
+  &-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -90,6 +90,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      visibility: hidden;
 
       &.loading {
         img, video {
@@ -103,6 +104,8 @@
     img, video {
       max-height: calc(100vh - 100px);
       max-width: calc(100vw - 16px);
+      /* max-height: 720px;
+      max-width: 1280px; */
     }
 
     img {
@@ -123,7 +126,7 @@
       width: 10rem;
       height: 100%;
       cursor: pointer;
-      z-index: 2;
+      z-index: 5;
 
       &:hover {
         > span {
@@ -147,7 +150,7 @@
       transform: translateY(-50%) rotate(90deg);
       opacity: 0;
       transition: .2s opacity;
-      z-index: 3;
+      z-index: 5;
       /* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */
     }
 
@@ -172,4 +175,29 @@
       }
     }
   }
+
+  &-mover {
+    position: fixed;
+    z-index: 4;
+    display: flex;
+    //transition: .5s all;
+    left: 0;
+    top: 0;
+    transform-origin: top left;
+
+    .ckin__player {
+      width: 100%;
+      height: 100%;
+    }
+
+    img, video {
+      /* object-fit: contain; */
+      width: 100%;
+      height: 100%;
+    }
+
+    &.active {
+      transition: .25s all;
+    }
+  }
 }

src/scss/style.scss

@@ -1224,10 +1224,19 @@ span.popup-close {
   position: fixed!important;
   background-color: rgba(0, 0, 0, .2);
   z-index: 4;
-  display: none;
+  //display: none;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 0.25s 0s, visibility 0s 0.25s;
+  -moz-transition: opacity 0.25s 0s, visibility 0s 0.25s;
+  transition: opacity 0.25s 0s, visibility 0s 0.25s;
 
   &.active {
-    display: block;
+    opacity: 1;
+    visibility: visible;
+    -webkit-transition: opacity 0.25s 0s, visibility 0s 0s;
+    -moz-transition: opacity 0.25s 0s, visibility 0s 0s;
+    transition: opacity 0.25s 0s, visibility 0s 0s;
   }
 }