Fix autodownloading

src/components/appMediaViewer.ts

@@ -527,6 +527,13 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
       let mediaElement: HTMLImageElement | HTMLVideoElement;
       let src: string;
 
+      if(target instanceof HTMLVideoElement) {
+        const elements = Array.from(target.parentElement.querySelectorAll('img')) as HTMLImageElement[];
+        if(elements.length) {
+          target = elements.pop();
+        }
+      }
+
       if(target.tagName === 'DIV' || target.tagName === 'AVATAR-ELEMENT') { // useContainerAsTarget
         const images = Array.from(target.querySelectorAll('img')) as HTMLImageElement[];
         const image = images.pop();
@@ -856,7 +863,27 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     //if(target instanceof SVGSVGElement) {
       const el = target.tagName.toLowerCase() === tagName ? target : target.querySelector(tagName) as HTMLElement;
       if(el) {
+        // two parentElements because element can be contained in aspecter
+        const preloader = target.parentElement.parentElement.querySelector('.preloader-container') as HTMLElement;
+        if(preloader) {
+          if(tagName === 'video') {
+            if(preloader.classList.contains('manual')) {
+              preloader.click();
+              // return;
+            }
+  
+            return;
+          }
+          
+          preloader.remove();
+        }
+
         renderImageFromUrl(el, url);
+
+        // ! костыль, но он тут даже и не нужен
+        if(el.classList.contains('thumbnail') && el.parentElement.classList.contains('media-container-aspecter')) {
+          el.classList.remove('thumbnail');
+        }
       }
     /* } else {
 
@@ -1196,11 +1223,11 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
                 //if(!video.parentElement) {
                   div.firstElementChild.lastElementChild.append(video);
                 //}
-                
-                this.updateMediaSource(mover, url, 'video');
               } else {
                 renderImageFromUrl(video, url);
               }
+
+              this.updateMediaSource(target, url, 'video');
   
               createPlayer();
             });
@@ -1321,7 +1348,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     let captionTimeout: number;
     this.content.caption.addEventListener('touchstart', () => {
       if(!mediaSizes.isMobile) return;
-      
+
       this.content.caption.classList.add('is-focused');
       
       if(captionTimeout) {

src/components/preloader.ts

@@ -21,7 +21,7 @@ export default class ProgressivePreloader {
   private downloadSvg: HTMLElement;
   
   private tempId = 0;
-  private detached = true;
+  public detached = true;
 
   public promise: CancellablePromise<any> = null;
 

src/components/wrappers.ts

@@ -80,7 +80,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
       spanTime.innerText = (doc.duration + '').toHHMMSS(false);
 
       if(!noPlayButton && doc.type !== 'round') {
-        if(canAutoplay) {
+        if(canAutoplay && !noAutoDownload) {
           spanTime.classList.add('tgico', 'can-autoplay');
         } else {
           needPlayButton = true;
@@ -232,6 +232,15 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     attachClickEvent(canvas, (e) => {
       cancelEvent(e);
 
+      // ! костыль
+      if(preloader && !preloader.detached) {
+        preloader.onClick();
+      }
+
+      if(globalVideo.readyState < 2) {
+        return;
+      }
+
       if(globalVideo.paused) {
         globalVideo.play();
       } else {
@@ -316,7 +325,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     });
   }
 
-  let f = noAutoDownload && photoRes?.preloader?.loadFunc;
+  let loadPhotoThumbFunc = noAutoDownload && photoRes?.preloader?.loadFunc;
   const load = () => {
     if(preloader && noAutoDownload && !withoutPreloader) {
       preloader.construct();
@@ -348,11 +357,15 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
       if(preloader) {
         preloader.detach();
       }
+
+      if(!deferred.isFulfilled) {
+        deferred.resolve();
+      }
     }, {once: true});
 
-    if(!noAutoDownload && f) {
+    if(!noAutoDownload && loadPhotoThumbFunc) {
-      f();
+      loadPhotoThumbFunc();
-      f = null;
+      loadPhotoThumbFunc = null;
     }
 
     noAutoDownload = undefined;
@@ -372,6 +385,10 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
         if(group) {
           animationIntersector.addAnimation(video, group);
         }
+
+        if(preloader) {
+          preloader.detach();
+        }
   
         deferred.resolve();
       });
@@ -381,11 +398,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
           spanTime.innerText = (video.duration - video.currentTime + '').toHHMMSS(false);
         });
       }
-  
+
-      video.addEventListener('error', (e) => {
-        deferred.resolve();
-      });
-  
       video.muted = true;
       video.loop = true;
       //video.play();
@@ -823,7 +836,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
     preloader = message.media.preloader;
     preloader.attach(container);
     noAutoDownload = undefined;
-  } else {
+  } else if(!cacheContext.downloaded) {
     preloader = new ProgressivePreloader({
       attachMethod: 'prepend'
     });
@@ -834,8 +847,6 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
       appDocsManager.downloadDoc(photo, /* undefined,  */lazyLoadQueue?.queueId) : 
       appPhotosManager.preloadPhoto(photo, size, lazyLoadQueue?.queueId, noAutoDownload);
 
-    noAutoDownload = undefined;
-
     return promise;
   };
 
@@ -846,24 +857,36 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
   };
 
   let loadPromise: Promise<any>;
+  const canAttachPreloader = (
+    (size as PhotoSize.photoSize).w >= 150 && 
+    (size as PhotoSize.photoSize).h >= 150
+    ) || noAutoDownload;
   const load = () => {
-    if(noAutoDownload && !withoutPreloader) {
+    if(noAutoDownload && !withoutPreloader && preloader) {
       preloader.construct();
       preloader.setManual();
     }
 
     const promise = getDownloadPromise();
 
-    if(!cacheContext.downloaded && !withoutPreloader && (size as PhotoSize.photoSize).w >= 150 && (size as PhotoSize.photoSize).h >= 150) {
+    if(preloader && 
+      !cacheContext.downloaded && 
+      !withoutPreloader && 
+      canAttachPreloader
+    ) {
       preloader.attach(container, false, promise);
     }
 
+    noAutoDownload = undefined;
+
     const renderPromise = promise.then(onLoad);
     renderPromise.catch(() => {});
     return {download: promise, render: renderPromise};
   };
 
-  preloader.setDownloadFunction(load);
+  if(preloader) {
+    preloader.setDownloadFunction(load);
+  }
   
   if(cacheContext.downloaded) {
     loadThumbPromise = loadPromise = load().render;

src/scss/partials/_chatBubble.scss

@@ -611,7 +611,7 @@ $bubble-margin: .25rem;
     &-fitted {
       background-color: transparent !important;
 
-      .thumbnail {
+      > .thumbnail {
         opacity: .8;
       }
     }