improving thumbnail loading

frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html

@@ -1,5 +1,5 @@
-<div class="static" *ngIf="!animate"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></div>
+<div class="static" *ngIf="animate == false"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></div>
-<div class="sk-cube-grid animate" *ngIf="animate">
+<div class="sk-cube-grid animate" *ngIf="animate == true">
     <div class="sk-cube sk-cube1"></div>
     <div class="sk-cube sk-cube2"></div>
     <div class="sk-cube sk-cube3"></div>

frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts

@@ -1,6 +1,6 @@
 ///<reference path="../../../../../browser.d.ts"/>
 
-import {Component} from "@angular/core";
+import {Component, Input} from "@angular/core";
 
 @Component({
     selector: 'gallery-grid-photo-loading',
@@ -9,10 +9,8 @@ import {Component} from "@angular/core";
 })
 export class GalleryPhotoLoadingComponent {
 
-    animate = false;
+    @Input() animate:boolean;
+
 
-    startAnimation() {
-        this.animate = true;
-    }
 }
 

frontend/app/gallery/grid/photo/photo.grid.gallery.component.html

@@ -1,11 +1,11 @@
 <div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
-    <img #image [src]="imageSrc" [hidden]="!showImage">
+    <img #img [src]="image.src" [hidden]="!image.show">
 
-    <gallery-grid-photo-loading #loading [hidden]="!showLoading">
+    <gallery-grid-photo-loading [animate]="loading.animate" *ngIf="loading.show">
     </gallery-grid-photo-loading>
 
     <!--Info box -->
-    <div #info [hidden]="!showImage" class="info" [style.margin-top.px]="-infoStyle.height"
+    <div #info class="info" [style.margin-top.px]="-infoStyle.height"
          [style.background]="infoStyle.background">
         <div class="photo-name">{{gridPhoto.photo.name}}</div>
 

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -17,13 +17,20 @@ import {GalleryPhotoLoadingComponent} from "./loading/loading.photo.grid.gallery
 })
 export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
     @Input() gridPhoto:GridPhoto;
-    @ViewChild("image") imageRef:ElementRef;
+    @ViewChild("img") imageRef:ElementRef;
     @ViewChild("info") infoDiv:ElementRef;
-    @ViewChild(GalleryPhotoLoadingComponent) loading:GalleryPhotoLoadingComponent;
 
-    imageSrc = "#";
+
-    showImage = false;
+    image = {
-    showLoading = false;
+        src: "#",
+        show: false
+    };
+
+    loading = {
+        animate: false,
+        show: false
+    };
+    
     infoStyle = {
         height: 0,
         background: "rgba(0,0,0,0.0)"
@@ -41,22 +48,24 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
         //schedule change after Angular checks the model
         setImmediate(() => {
             if (this.gridPhoto.isThumbnailAvailable()) {
-                this.imageSrc = this.gridPhoto.getThumbnailPath();
+                this.image.src = this.gridPhoto.getThumbnailPath();
-                this.showImage = true;
+                this.image.show = true;
-                this.showLoading = false;
+                this.loading.show = false;
             } else {
-                this.showLoading = true;
+                this.loading.show = true; 
                 this.thumbnailService.loadImage(this.gridPhoto,
                     ()=> { //onLoadStarted
-                        this.loading.startAnimation();
+                        this.loading.animate = true;
                     },
                     ()=> {//onLoaded
-                        this.imageSrc = this.gridPhoto.getThumbnailPath();
+                        this.image.src = this.gridPhoto.getThumbnailPath();
-                        this.showImage = true;
+                        this.image.show = true;
-                        this.showLoading = false;
+                        this.loading.show = false; 
                     },
-                    ()=> {//onError
+                    (error)=> {//onError
+                        //TODO: handle error
                         console.error("something bad happened");
+                        console.error(error);
                     });
             }
         });

frontend/app/gallery/grid/thumnailLoader.service.ts

@@ -13,21 +13,33 @@ export class ThumbnailLoaderService {
     constructor() {
     }
 
-    loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void { 
+    removeTasks() {
+        this.que = [];
+    }
+
+    loadImage(gridPhoto:GridPhoto, onStartedLoading:()=>void, onLoad:()=>void, onError:(error)=>void):void {
         let tmp:ThumbnailTask = null;
+        //is image already qued?
         for (let i = 0; i < this.que.length; i++) {
             if (this.que[i].gridPhoto.getThumbnailPath() == gridPhoto.getThumbnailPath()) {
                 tmp = this.que[i];
                 break;
             }
         }
+        //add to previous
         if (tmp != null) {
             tmp.onStartedLoading.push(onStartedLoading);
             tmp.onLoad.push(onLoad);
             tmp.onError.push(onError);
-        } else {
+            if (tmp.inProgress == true) {
+                onStartedLoading();
+            }
+
+
+        } else {//create new task
             this.que.push({
                 gridPhoto: gridPhoto,
+                inProgress: false,
                 onStartedLoading: [onStartedLoading],
                 onLoad: [onLoad],
                 onError: [onError]
@@ -43,20 +55,28 @@ export class ThumbnailLoaderService {
             return;
         }
         this.runningRequests++;
-        let task = this.que.shift();
+        let task = this.que[0];
         task.onStartedLoading.forEach(cb=>cb());
+        task.inProgress = true;
         
         let curImg = new Image();
         curImg.src = task.gridPhoto.getThumbnailPath();
+        
         curImg.onload = () => {
+            
             task.gridPhoto.thumbnailLoaded();
             task.onLoad.forEach(cb=>cb());
+
+            this.que.shift();
             this.runningRequests--;
             this.run();
         };
 
         curImg.onerror = (error) => {
+            
             task.onLoad.forEach(cb=>cb(error));
+
+            this.que.shift();
             this.runningRequests--;
             this.run();
         };
@@ -66,6 +86,7 @@ export class ThumbnailLoaderService {
 
 interface ThumbnailTask {
     gridPhoto:GridPhoto;
+    inProgress:boolean;
     onStartedLoading:Array<Function>;
     onLoad:Array<Function>;
     onError:Array<Function>;