Browse Source

video preloader & again fix progress for downloads

master
Eduard Kuzmenko 5 years ago
parent
commit
5d5e657159
  1. 33
      src/components/preloader.ts
  2. 68
      src/components/wrappers.ts
  3. 22
      src/lib/appManagers/appDocsManager.ts
  4. 3
      src/lib/mtproto/apiFileManager.ts

33
src/components/preloader.ts

@ -1,9 +1,12 @@ @@ -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 { @@ -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) {
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);
};
}
if(this.cancelable && reset) {
this.setProgress(0);
}

68
src/components/wrappers.ts

@ -69,11 +69,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, @@ -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}) => {
console.log('doc download', promise, details);
let percents = details.done / details.total * 100;
preloader.setProgress(percents);
};
preloader.attach(container, true, promise);
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, @@ -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 @@ -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);
} else {
preloader.attach(downloadDiv, true);
preloader = new ProgressivePreloader(null, true);
}
promise = appDocsManager.saveDocFile(doc.id);
promise.notify = (details: {done: number, total: number}) => {
console.log('docDiv download', promise, details);
let percents = details.done / details.total * 100;
preloader.setProgress(percents);
};
appDocsManager.saveDocFile(doc.id).then(res => {
promise = res.promise;
downloadDiv.classList.add('downloading');
preloader.attach(downloadDiv, true, promise);
promise.then(() => {
downloadDiv.classList.remove('downloading');
preloader.detach();
downloadDiv.remove();
});
promise.then(() => {
downloadDiv.classList.remove('downloading');
downloadDiv.remove();
});
})
downloadDiv.classList.add('downloading');
} else {
downloadDiv.classList.remove('downloading');
promise.cancel();
preloader.detach();
promise = null;
}
});
@ -248,21 +240,25 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe @@ -248,21 +240,25 @@ 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) => {
if(this.peerID != peerID) {
this.log.warn('peer changed');
return;
}
let load = () => {
let promise = appPhotosManager.preloadPhoto(photo.id, size);
image.src = URL.createObjectURL(blob);
preloader.attach(container, true, promise);
preloader.detach();
return promise.then((blob) => {
if(this.peerID != peerID) {
this.log.warn('peer changed');
return;
}
//image.style.width = '';
//image.style.height = '';
//container.style.width = '';
//container.style.height = '';
});
image.src = URL.createObjectURL(blob);
//image.style.width = '';
//image.style.height = '';
//container.style.width = '';
//container.style.height = '';
});
};
console.log('wrapPhoto', load, container, image);

22
src/lib/appManagers/appDocsManager.ts

@ -238,29 +238,31 @@ class AppDocsManager { @@ -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(() => {
let promise = this.downloadDoc(docID, writer);
promise.then(() => {
writer.close();
console.log('saved doc', doc);
});
return promise;
await writer.ready;
let promise = this.downloadDoc(docID, writer);
promise.then(() => {
writer.close();
console.log('saved doc', doc);
});
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};
}
}
}

3
src/lib/mtproto/apiFileManager.ts

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

Loading…
Cancel
Save