bigger preview images & stickers preloader

src/components/misc.ts

@@ -221,7 +221,7 @@ export class LazyLoadQueue {
   }
 }
 
-export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader) {
+export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true) {
   //if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
   let size = appPhotosManager.setAttachmentSize(doc, container);
   //}
@@ -260,11 +260,11 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
       console.log('loaded doc:', doc, blob, container);
       
       let video = document.createElement('video');
-      video.loop = true;
-      video.autoplay = true;
+      video.loop = controls;
+      video.autoplay = controls;
       
       if(!justLoader) {
-        video.controls = true;
+        video.controls = controls;
       } else {
         video.volume = 0;
       }

src/lib/appManagers/appImManager.ts

@@ -477,6 +477,24 @@ export class AppImManager {
 
     this.chatInner.addEventListener('click', (e) => {
       let target = e.target as HTMLElement;
+      let bubble: HTMLDivElement = null;
+      try {
+        bubble = findUpClassName(e.target, 'bubble');
+      } catch(err) {}
+
+      if(target.tagName == 'VIDEO' && bubble && bubble.classList.contains('round')) {
+        let video = target as HTMLVideoElement;
+        video.currentTime = 0;
+        if(video.paused) {
+          video.play();
+          video.volume = 1;
+        } else {
+          video.pause();
+          video.volume = 0;
+        }
+        return;
+      }
+
       if(target.tagName == 'IMG' || target.tagName == 'VIDEO') {
         let messageID = +target.getAttribute('message-id');
         let message = appMessagesManager.getMessage(messageID);
@@ -488,8 +506,6 @@ export class AppImManager {
 
         appMediaViewer.openMedia(message, true);
       } else if(target.tagName == 'DIV') {
-        let bubble = findUpClassName(e.target, 'bubble');
-
         if(bubble) {
           if(bubble.classList.contains('is-reply')/*  || bubble.classList.contains('forwarded') */) {
             let originalMessageID = +bubble.getAttribute('data-original-mid');
@@ -686,7 +702,7 @@ export class AppImManager {
   }
 
   public async loadMediaQueueProcess(): Promise<void[]> {
-    if(this.loadMediaQueuePromise /* || 1 == 1 */) return this.loadMediaQueuePromise;
+    if(this.loadMediaQueuePromise/*  || 1 == 1 */) return this.loadMediaQueuePromise;
 
     let woo = this.loadMediaQueue.splice(-5, 5).reverse().map(f => f());
 
@@ -1324,7 +1340,8 @@ export class AppImManager {
               bubble.classList.add('sticker-animated');
             }
 
-            appPhotosManager.setAttachmentSize(doc, attachmentDiv);
+            appPhotosManager.setAttachmentSize(doc, attachmentDiv, undefined, undefined, true);
+            let preloader = new ProgressivePreloader(attachmentDiv, false);
             bubble.style.height = attachmentDiv.style.height;
             bubble.style.width = attachmentDiv.style.width;
             //appPhotosManager.setAttachmentSize(doc, bubble);
@@ -1335,11 +1352,11 @@ export class AppImManager {
               }
 
               return true;
-            }, null, 'chat', false, !!message.pending || !multipleRender)/* .then(() => {
-              
-              attachmentDiv.style.width = '';
-              attachmentDiv.style.height = '';
-            }) */;
+            }, null, 'chat', false, !!message.pending || !multipleRender).then(() => {
+              preloader.detach();
+              /* attachmentDiv.style.width = '';
+              attachmentDiv.style.height = ''; */
+            });
 
             this.loadMediaQueuePush(load);
 
@@ -1347,8 +1364,12 @@ export class AppImManager {
           } else if(doc.mime_type == 'video/mp4') {
             this.log('never get free 2', doc);
 
+            if(doc.type == 'round') {
+              bubble.classList.add('round');
+            }
+
             bubble.classList.add('video');
-            wrapVideo.call(this, doc, attachmentDiv, message);
+            wrapVideo.call(this, doc, attachmentDiv, message, doc.type != 'round', null, false);
 
             break;
           } else {
@@ -1378,9 +1399,9 @@ export class AppImManager {
     if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat
       let title = appPeersManager.getPeerTitle(message.fwdFromID || message.fromID);
 
-      let isHidden = message.fwd_from && !message.fwd_from.from_id;
+      let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id;
       if(isHidden) {
-        this.log('message render hidden', message);
+        this.log('message to render hidden', message);
         title = message.fwd_from.from_name;
         bubble.classList.add('hidden-profile');
       }
@@ -1413,7 +1434,7 @@ export class AppImManager {
           let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
           let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID) || '';
 
-          this.log('message to render one more time punks not dead', originalMessage, originalPeerTitle, bubble);
+          this.log('message to render reply', originalMessage, originalPeerTitle, bubble);
 
           let originalText = '';
           if(originalMessage.message) {

src/lib/appManagers/appMediaViewer.ts

@@ -133,7 +133,7 @@ export class AppMediaViewer {
   
   public openMedia(message: any, reverse = false) {
     this.log('openMedia doc:', message);
-    let media = message.media.photo || message.media.document || message.media.webpage.document;
+    let media = message.media.photo || message.media.document || message.media.webpage.photo || message.media.webpage.document;
     
     let isVideo = media.mime_type == 'video/mp4';
     

src/lib/appManagers/appPhotosManager.ts

@@ -153,13 +153,13 @@ export class AppPhotosManager {
       let image = new Image();
       image.src = URL.createObjectURL(blob);
       
-      // image.style.width = '100%';
-      // image.style.height = '100%';
+      image.style.width = '100%';
+      image.style.height = '100%';
       div.append(image);
     }
   }
   
-  public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 0/* 380 */) {
+  public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 380, isSticker = false) {
     let photo: /* MTDocument | MTPhoto */any = null;
 
     if(typeof(photoID) === 'string') {
@@ -174,7 +174,7 @@ export class AppPhotosManager {
     
     let sizes = photo.sizes || photo.thumbs;
     if(sizes && sizes[0].bytes) {
-      this.setAttachmentPreview(sizes[0].bytes, div);
+      this.setAttachmentPreview(sizes[0].bytes, div, isSticker);
     }
 
     if(photo._ == 'document' /* && photo.type != 'video' */ && photo.type != 'gif') {

src/scss/partials/_mediaViewer.scss

@@ -112,7 +112,8 @@
     video {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      /* object-fit: cover; */
+      object-fit: contain;
     }
 
     .media-viewer-switcher-left, .media-viewer-switcher-right {

src/scss/partials/_sidebar.scss

@@ -69,6 +69,7 @@
     }
 
     p {
+      color: #000;
       margin: 0;
     }