2017-03-20 07:01:41 +08:00
|
|
|
import {Injectable} from "@angular/core";
|
|
|
|
import {ThumbnailLoaderService, ThumbnailLoadingListener, ThumbnailTaskEntity} from "./thumnailLoader.service";
|
2017-03-21 04:37:23 +08:00
|
|
|
import {Photo} from "./Photo";
|
|
|
|
import {IconPhoto} from "./IconPhoto";
|
2017-03-20 07:01:41 +08:00
|
|
|
|
|
|
|
export enum ThumbnailLoadingPriority{
|
2017-06-11 04:32:56 +08:00
|
|
|
high, medium, low
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class ThumbnailManagerService {
|
|
|
|
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
constructor(private thumbnailLoader: ThumbnailLoaderService) {
|
|
|
|
}
|
2017-03-20 07:01:41 +08:00
|
|
|
|
2017-06-21 17:33:21 +08:00
|
|
|
public getThumbnail(photo: Photo): Thumbnail {
|
2017-06-11 04:32:56 +08:00
|
|
|
return new Thumbnail(photo, this.thumbnailLoader);
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
public getIcon(photo: IconPhoto) {
|
|
|
|
return new IconThumbnail(photo, this.thumbnailLoader);
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export abstract class ThumbnailBase {
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
protected available: boolean = false;
|
|
|
|
protected src: string = null;
|
|
|
|
protected loading: boolean = false;
|
2017-06-22 03:16:04 +08:00
|
|
|
protected error: boolean = true;
|
2017-06-11 04:32:56 +08:00
|
|
|
protected onLoad: Function = null;
|
|
|
|
protected thumbnailTask: ThumbnailTaskEntity;
|
2017-03-21 04:37:23 +08:00
|
|
|
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
constructor(protected thumbnailService: ThumbnailLoaderService) {
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
abstract set Visible(visible: boolean);
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
set OnLoad(onLoad: Function) {
|
|
|
|
this.onLoad = onLoad;
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
get Available() {
|
|
|
|
return this.available;
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
get Src() {
|
|
|
|
return this.src;
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
get Loading() {
|
|
|
|
return this.loading;
|
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
destroy() {
|
|
|
|
if (this.thumbnailTask != null) {
|
|
|
|
this.thumbnailService.removeTask(this.thumbnailTask);
|
|
|
|
this.thumbnailTask = null;
|
2017-03-21 04:37:23 +08:00
|
|
|
}
|
2017-06-11 04:32:56 +08:00
|
|
|
}
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2017-03-21 04:37:23 +08:00
|
|
|
export class IconThumbnail extends ThumbnailBase {
|
2017-03-20 07:01:41 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
constructor(private photo: IconPhoto, thumbnailService: ThumbnailLoaderService) {
|
|
|
|
super(thumbnailService);
|
|
|
|
this.src = "";
|
2017-06-22 03:16:04 +08:00
|
|
|
this.error = false;
|
2017-06-11 04:32:56 +08:00
|
|
|
if (this.photo.isIconAvailable()) {
|
|
|
|
this.src = this.photo.getIconPath();
|
|
|
|
this.available = true;
|
|
|
|
if (this.onLoad) this.onLoad();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.photo.isIconAvailable()) {
|
2017-06-11 04:56:23 +08:00
|
|
|
setTimeout(() => {
|
2017-06-11 04:32:56 +08:00
|
|
|
|
|
|
|
let listener: ThumbnailLoadingListener = {
|
|
|
|
onStartedLoading: () => { //onLoadStarted
|
|
|
|
this.loading = true;
|
|
|
|
},
|
|
|
|
onLoad: () => {//onLoaded
|
2017-03-21 04:37:23 +08:00
|
|
|
this.src = this.photo.getIconPath();
|
|
|
|
if (this.onLoad) this.onLoad();
|
2017-06-11 04:32:56 +08:00
|
|
|
this.available = true;
|
|
|
|
this.loading = false;
|
|
|
|
this.thumbnailTask = null;
|
|
|
|
},
|
|
|
|
onError: (error) => {//onError
|
|
|
|
this.thumbnailTask = null;
|
2017-06-22 03:16:04 +08:00
|
|
|
this.loading = false;
|
|
|
|
this.error = true;
|
2017-06-11 04:32:56 +08:00
|
|
|
//TODO: handle error
|
|
|
|
//TODO: not an error if its from cache
|
|
|
|
console.error("something bad happened");
|
|
|
|
console.error(error);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
this.thumbnailTask = this.thumbnailService.loadIcon(this.photo, ThumbnailLoadingPriority.high, listener);
|
2017-03-20 07:01:41 +08:00
|
|
|
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:56:23 +08:00
|
|
|
}, 0);
|
2017-03-21 04:37:23 +08:00
|
|
|
}
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
}
|
2017-03-21 04:37:23 +08:00
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
set Visible(visible: boolean) {
|
|
|
|
if (!this.thumbnailTask) return;
|
|
|
|
if (visible === true) {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.high;
|
|
|
|
} else {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
|
2017-03-21 04:37:23 +08:00
|
|
|
}
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
}
|
|
|
|
|
2017-03-21 04:37:23 +08:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Thumbnail extends ThumbnailBase {
|
|
|
|
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
constructor(private photo: Photo, thumbnailService: ThumbnailLoaderService) {
|
|
|
|
super(thumbnailService);
|
|
|
|
if (this.photo.isThumbnailAvailable()) {
|
|
|
|
this.src = this.photo.getThumbnailPath();
|
|
|
|
this.available = true;
|
|
|
|
if (this.onLoad) this.onLoad();
|
|
|
|
} else if (this.photo.isReplacementThumbnailAvailable()) {
|
|
|
|
this.src = this.photo.getReplacementThumbnailPath();
|
|
|
|
this.available = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.photo.isThumbnailAvailable()) {
|
2017-06-11 04:56:23 +08:00
|
|
|
setTimeout(() => {
|
2017-06-11 04:32:56 +08:00
|
|
|
|
|
|
|
let listener: ThumbnailLoadingListener = {
|
|
|
|
onStartedLoading: () => { //onLoadStarted
|
|
|
|
this.loading = true;
|
|
|
|
},
|
|
|
|
onLoad: () => {//onLoaded
|
2017-03-20 07:01:41 +08:00
|
|
|
this.src = this.photo.getThumbnailPath();
|
2017-03-21 04:37:23 +08:00
|
|
|
if (this.onLoad) this.onLoad();
|
2017-03-20 07:01:41 +08:00
|
|
|
this.available = true;
|
2017-06-11 04:32:56 +08:00
|
|
|
this.loading = false;
|
|
|
|
this.thumbnailTask = null;
|
|
|
|
},
|
|
|
|
onError: (error) => {//onError
|
|
|
|
this.thumbnailTask = null;
|
|
|
|
//TODO: handle error
|
|
|
|
//TODO: not an error if its from cache
|
|
|
|
console.error("something bad happened");
|
|
|
|
console.error(error);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
if (this.photo.isReplacementThumbnailAvailable()) {
|
|
|
|
this.thumbnailTask = this.thumbnailService.loadImage(this.photo, ThumbnailLoadingPriority.medium, listener);
|
|
|
|
} else {
|
|
|
|
this.thumbnailTask = this.thumbnailService.loadImage(this.photo, ThumbnailLoadingPriority.high, listener);
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2017-06-11 04:56:23 +08:00
|
|
|
}, 0);
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
set Visible(visible: boolean) {
|
|
|
|
if (!this.thumbnailTask) return;
|
|
|
|
if (visible === true) {
|
|
|
|
if (this.photo.isReplacementThumbnailAvailable()) {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
|
|
|
|
} else {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.high;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (this.photo.isReplacementThumbnailAvailable()) {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.low;
|
|
|
|
} else {
|
|
|
|
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
|
|
|
|
}
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|
2017-06-11 04:32:56 +08:00
|
|
|
}
|
|
|
|
|
2017-03-20 07:01:41 +08:00
|
|
|
}
|
|
|
|
|