Fix preloader overflow on uploading video

src/components/preloader.ts

@@ -10,7 +10,7 @@ export default class ProgressivePreloader {
 
   private promise: CancellablePromise<any> = null;
 
-  constructor(elem?: Element, private cancelable = true, streamable = false) {
+  constructor(elem?: Element, private cancelable = true, streamable = false, private attachMethod: 'append' | 'prepend' = 'append') {
     this.preloader = document.createElement('div');
     this.preloader.classList.add('preloader-container');
 
@@ -89,7 +89,7 @@ export default class ProgressivePreloader {
     }
   }
 
-  public attach(elem: Element, reset = true, promise?: CancellablePromise<any>, append = true) {
+  public attach(elem: Element, reset = true, promise?: CancellablePromise<any>) {
     if(promise/*  && false */) {
       this.attachPromise(promise);
     }
@@ -99,7 +99,7 @@ export default class ProgressivePreloader {
       if(this.detached) return;
       this.detached = false;
 
-      elem[append ? 'append' : 'prepend'](this.preloader);
+      elem[this.attachMethod](this.preloader);
 
       if(this.cancelable && reset) {
         this.setProgress(0);

src/components/wrappers.ts

@@ -186,11 +186,11 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     let preloader: ProgressivePreloader;
     if(message?.media?.preloader) { // means upload
       preloader = message.media.preloader as ProgressivePreloader;
-      preloader.attach(container, undefined, undefined, true);
+      preloader.attach(container, undefined, undefined);
     } else if(!doc.downloaded && !doc.supportsStreaming) {
       const promise = appDocsManager.downloadDocNew(doc);
-      preloader = new ProgressivePreloader(container, true);
-      preloader.attach(container, true, promise, true);
+      preloader = new ProgressivePreloader(null, true, false, 'prepend');
+      preloader.attach(container, true, promise);
 
       /* video.addEventListener('canplay', () => {
         if(preloader) {
@@ -200,7 +200,8 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
 
       await promise;
     } else if(doc.supportsStreaming) {
-      preloader = new ProgressivePreloader(container, false);
+      preloader = new ProgressivePreloader(null, false, false, 'prepend');
+      preloader.attach(container, false, null);
       video.addEventListener('canplay', () => {
         preloader.detach();
       }, {once: true});
@@ -478,7 +479,7 @@ export function wrapPhoto(photo: MyPhoto | MyDocument, message: any, container:
   if(message?.media?.preloader) { // means upload
     message.media.preloader.attach(container);
   } else if(!cacheContext.downloaded) {
-    preloader = new ProgressivePreloader(container, false);
+    preloader = new ProgressivePreloader(container, false, false, photo._ == 'document' ? 'prepend' : 'append');
   }
 
   const load = () => {

src/lib/appManagers/appMessagesManager.ts

@@ -1115,7 +1115,7 @@ export class AppMessagesManager {
       flags |= 256;
     }
 
-    const preloader = new ProgressivePreloader(null, true);
+    const preloader = new ProgressivePreloader(null, true, false, 'prepend');
 
     const media = {
       _: 'messageMediaPending',
@@ -1346,7 +1346,7 @@ export class AppMessagesManager {
       let messageID = ids[idx];
       let randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)];
       let randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString();
-      let preloader = new ProgressivePreloader(null, true);
+      let preloader = new ProgressivePreloader(null, true, false, 'prepend');
 
       let details = options.sendFileDetails[idx];