Some gif fixes

src/components/gifsMasonry.ts

@@ -9,7 +9,6 @@ import {wrapVideo} from './wrappers';
 import animationIntersector, {AnimationItemGroup} from './animationIntersector';
 import Scrollable from './scrollable';
 import deferredPromise, {CancellablePromise} from '../helpers/cancellablePromise';
-import renderImageFromUrl from '../helpers/dom/renderImageFromUrl';
 import calcImageInBox from '../helpers/calcImageInBox';
 import {doubleRaf} from '../helpers/schedulers';
 import {AppManagers} from '../lib/appManagers/managers';
@@ -90,8 +89,6 @@ export default class GifsMasonry {
       return;
     }
 
-    // console.log('processVisibleDiv');
-
     const load = () => {
       const docId = div.dataset.docId;
       const promise = Promise.all([this.managers.appDocsManager.getDoc(docId), this.scrollPromise]).then(async([doc]) => {
@@ -101,16 +98,17 @@ export default class GifsMasonry {
           lazyLoadQueue: null,
           // lazyLoadQueue: EmoticonsDropdown.lazyLoadQueue,
           group: this.group,
-          noInfo: true
+          noInfo: true,
+          noPreview: true
         });
 
         const promise = res.loadPromise;
         promise.finally(() => {
           const video = div.querySelector('video');
+          const thumb = div.querySelector('img, canvas');
 
-          div.style.opacity = '';
-          const img = div.querySelector('img');
-          img && img.classList.add('hide');
+          // div.style.opacity = '';
+          thumb && thumb.classList.add('hide');
 
           if(video && !video.parentElement) {
             setTimeout(() => {
@@ -153,10 +151,10 @@ export default class GifsMasonry {
       }
 
       const video = div.querySelector('video');
-      const img = div.querySelector('img');
+      const thumb = div.querySelector('img, canvas');
 
-      if(img) {
-        img && img.classList.remove('hide');
+      if(thumb) {
+        thumb.classList.remove('hide');
 
         await doubleRaf();
       }
@@ -188,55 +186,25 @@ export default class GifsMasonry {
     const willUseWidth = Math.min(maxSingleWidth, width, gifWidth);
     const size = calcImageInBox(gifWidth, gifHeight, willUseWidth, height);
 
-    /* wastedWidth += w;
-
-    if(wastedWidth === width || h < height) {
-      wastedWidth = 0;
-      console.log('completed line', i, line);
-      line = [];
-      continue;
-    }
-
-    line.push(gif); */
-
-    // console.log('gif:', gif, w, h);
-
     const div = document.createElement('div');
-    div.classList.add('gif', 'fade-in-transition');
+    div.classList.add('gif'/* , 'fade-in-transition' */);
     div.style.width = size.width + 'px';
-    div.style.opacity = '0';
+    // div.style.opacity = '0';
     // div.style.height = h + 'px';
     div.dataset.docId = '' + doc.id;
 
     appendTo.append(div);
 
-    // this.lazyLoadQueue.observe({div, load: this.processVisibleDiv});
     this.lazyLoadQueue.observe(div);
 
     // let preloader = new ProgressivePreloader(div);
 
-    // const gotThumb = this.managers.appDocsManager.getThumb(doc, false);
-
-    // const willBeAPoster = !!gotThumb;
-    // let img: HTMLImageElement;
-    // if(willBeAPoster) {
-    //   img = new Image();
-    //   img.classList.add('media-poster');
-
-    //   if(!gotThumb.cacheContext.url) {
-    //     gotThumb.promise.then(() => {
-    //       img.src = gotThumb.cacheContext.url;
-    //     });
-    //   }
-    // }
-
-    // const afterRender = () => {
-    //   if(img) {
-    //     div.append(img);
-    //     div.style.opacity = '';
-    //   }
-    // };
-
-    // (gotThumb?.cacheContext?.url ? renderImageFromUrl(img, gotThumb.cacheContext.url, afterRender) : afterRender());
+    wrapVideo({
+      doc,
+      container: div as HTMLDivElement,
+      lazyLoadQueue: null,
+      noInfo: true,
+      onlyPreview: true
+    });
   }
 }

src/components/wrappers/video.ts

@@ -13,6 +13,7 @@ import {attachClickEvent} from '../../helpers/dom/clickEvent';
 import createVideo from '../../helpers/dom/createVideo';
 import isInDOM from '../../helpers/dom/isInDOM';
 import renderImageFromUrl from '../../helpers/dom/renderImageFromUrl';
+import getStrippedThumbIfNeeded from '../../helpers/getStrippedThumbIfNeeded';
 import mediaSizes, {ScreenSize} from '../../helpers/mediaSizes';
 import noop from '../../helpers/noop';
 import onMediaLoad from '../../helpers/onMediaLoad';
@@ -60,7 +61,7 @@ mediaSizes.addEventListener('changeScreen', (from, to) => {
   }
 });
 
-export default async function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, photoSize, videoSize, searchContext, autoDownload, managers = rootScope.managers}: {
+export default async function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, noPreview, withoutPreloader, loadPromises, noPlayButton, photoSize, videoSize, searchContext, autoDownload, managers = rootScope.managers}: {
   doc: MyDocument,
   container?: HTMLElement,
   message?: Message.message,
@@ -74,6 +75,7 @@ export default async function wrapVideo({doc, container, message, boxWidth, boxH
   noPlayButton?: boolean,
   group?: AnimationItemGroup,
   onlyPreview?: boolean,
+  noPreview?: boolean,
   withoutPreloader?: boolean,
   loadPromises?: Promise<any>[],
   autoDownload?: ChatAutoDownloadSettings,
@@ -373,13 +375,32 @@ export default async function wrapVideo({doc, container, message, boxWidth, boxH
       video.height = +foreignObject.getAttributeNS(null, 'height');
       foreignObject.append(video);
     }
-  } else { // * gifs masonry
-    // const gotThumb = managers.appDocsManager.getThumb(doc, false);
-    // if(gotThumb) {
-    //   gotThumb.promise.then(() => {
-    //     video.poster = gotThumb.cacheContext.url;
-    //   });
-    // }
+  } else if(!noPreview) { // * gifs masonry
+    const gotThumb = getStrippedThumbIfNeeded(doc, {} as ThumbCache, true);
+    if(gotThumb) {
+      const thumbImage = gotThumb.image;
+      thumbImage.classList.add('media-poster');
+      container.append(thumbImage);
+      res.thumb = {
+        loadPromises: {
+          thumb: gotThumb.loadPromise,
+          full: Promise.resolve()
+        },
+        images: {
+          thumb: thumbImage,
+          full: null
+        },
+        preloader: null,
+        aspecter: null
+      };
+
+      loadPromises?.push(gotThumb.loadPromise);
+      res.loadPromise = gotThumb.loadPromise;
+    }
+  }
+
+  if(onlyPreview) {
+    return res;
   }
 
   if(!video.parentElement && container) {
@@ -561,5 +582,9 @@ export default async function wrapVideo({doc, container, message, boxWidth, boxH
       (lazyLoadQueue.push({div: container, load: () => load().then(({render}) => render)}), Promise.resolve());
   }
 
+  if(res.thumb) {
+    await res.thumb.loadPromises.thumb;
+  }
+
   return res;
 }

src/scss/partials/_chatBubble.scss

@@ -1948,7 +1948,7 @@ $bubble-beside-button-width: 38px;
   &:not(.webpage) {
     &.photo, 
     &.video {
-      .bubble-content > .name {
+      &:not(.is-reply) .bubble-content > .name {
         //padding-bottom: .2675rem;
         padding-bottom: 6px;
       }