video preloader & again fix progress for downloads

src/components/preloader.ts

@@ -1,9 +1,12 @@
 import { isInDOM } from "../lib/utils";
+import { CancellablePromise } from "../lib/mtproto/apiFileManager";
 
 export default class ProgressivePreloader {
   public preloader: HTMLDivElement = null;
   private circle: SVGCircleElement = null;
   private progress = 0;
+  private promise: CancellablePromise<any> = null;
+  private tempID = 0;
   constructor(elem?: Element, private cancelable = true) {
     this.preloader = document.createElement('div');
     this.preloader.classList.add('preloader-container');
@@ -30,9 +33,37 @@ export default class ProgressivePreloader {
     if(elem) {
       this.attach(elem);
     }
+
+    if(this.cancelable) {
+      this.preloader.addEventListener('click', () => {
+        if(this.promise && this.promise.cancel) {
+          this.promise.cancel();
+          this.detach();
+        }
+      });
+    }
+  }
+  
+  public attach(elem: Element, reset = true, promise?: CancellablePromise<any>) {
+    if(promise) {
+      this.promise = promise;
+
+      let tempID = --this.tempID;
+      promise.then(() => {
+        if(tempID == this.tempID) {
+          this.detach();
+        }
+      });
+
+      promise.notify = (details: {done: number, total: number}) => {
+        if(tempID != this.tempID) return;
+
+        console.log('preloader download', promise, details);
+        let percents = details.done / details.total * 100;
+        this.setProgress(percents);
+      };
     }
 
-  public attach(elem: Element, reset = true) {
     if(this.cancelable && reset) {
       this.setProgress(0);
     }

src/components/wrappers.ts

@@ -69,11 +69,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
   let loadVideo = () => {
     let promise = appDocsManager.downloadDoc(doc);
     
-    promise.notify = (details: {done: number, total: number}) => {
+    preloader.attach(container, true, promise);
-      console.log('doc download', promise, details);
-      let percents = details.done / details.total * 100;
-      preloader.setProgress(percents);
-    };
     
     return promise.then(blob => {
       if((this.peerID ? this.peerID : this.currentMessageID) != peerID) {
@@ -123,8 +119,6 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
       
       //container.style.width = '';
       //container.style.height = '';
-      
-      preloader.detach();
     });
   };
   
@@ -201,30 +195,28 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   
   docDiv.addEventListener('click', () => {
     if(!promise) {
+      if(downloadDiv.classList.contains('downloading')) {
+        return; // means not ready yet
+      }
+      
       if(!preloader) {
-        preloader = new ProgressivePreloader(downloadDiv, true);
+        preloader = new ProgressivePreloader(null, true);
-      } else {
-        preloader.attach(downloadDiv, true);
       }
       
-      promise = appDocsManager.saveDocFile(doc.id);
+      appDocsManager.saveDocFile(doc.id).then(res => {
-      promise.notify = (details: {done: number, total: number}) => {
+        promise = res.promise;
-        console.log('docDiv download', promise, details);
-        let percents = details.done / details.total * 100;
-        preloader.setProgress(percents);
-      };
 
-      downloadDiv.classList.add('downloading');
+        preloader.attach(downloadDiv, true, promise);
 
         promise.then(() => {
           downloadDiv.classList.remove('downloading');
-        preloader.detach();
           downloadDiv.remove();
         });
+      })
+
+      downloadDiv.classList.add('downloading');
     } else {
       downloadDiv.classList.remove('downloading');
-      promise.cancel();
-      preloader.detach();
       promise = null;
     }
   });
@@ -248,7 +240,12 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe
   
   let preloader = new ProgressivePreloader(container, false);
   
-  let load = () => appPhotosManager.preloadPhoto(photo.id, size).then((blob) => {
+  let load = () => {
+    let promise = appPhotosManager.preloadPhoto(photo.id, size);
+
+    preloader.attach(container, true, promise);
+
+    return promise.then((blob) => {
       if(this.peerID != peerID) {
         this.log.warn('peer changed');
         return;
@@ -256,13 +253,12 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe
       
       image.src = URL.createObjectURL(blob);
       
-    preloader.detach();
-
       //image.style.width = '';
       //image.style.height = '';
       //container.style.width = '';
       //container.style.height = '';
     });
+  };
   
   console.log('wrapPhoto', load, container, image);
   

src/lib/appManagers/appDocsManager.ts

@@ -238,29 +238,31 @@ class AppDocsManager {
     return downloadPromise;
   }
   
-  public saveDocFile(docID: string): CancellablePromise<Blob> {
+  public async saveDocFile(docID: string) {
     var doc = this.docs[docID];
     var fileName = this.getFileName(doc);
     var ext = (fileName.split('.', 2) || [])[1] || '';
 
     try {
       let writer = FileManager.chooseSaveFile(fileName, ext, doc.mime_type, doc.size);
-      return writer.ready.then(() => {
+      await writer.ready;
+
       let promise = this.downloadDoc(docID, writer);
       promise.then(() => {
         writer.close();
         console.log('saved doc', doc);
       });
 
-        return promise;
+      console.log('got promise from downloadDoc', promise);
-      }); 
+  
+      return {promise};
     } catch(err) {
       let promise = this.downloadDoc(docID);
       promise.then((blob) => {
         FileManager.download(blob, doc.mime_type, fileName)
       });
 
-      return promise;
+      return {promise};
     }
   }
 }

src/lib/mtproto/apiFileManager.ts

@@ -462,6 +462,9 @@ export class ApiFileManager {
         canceled = true;
         delete this.cachedDownloadPromises[fileName];
         errorHandler({type: 'DOWNLOAD_CANCELED'});
+        if(toFileEntry) {
+          toFileEntry.abort();
+        }
       }
     };