removing animation from lightbox + improving thumbnail rendering at lightbox

frontend/app/gallery/gallery.component.html

@@ -1,8 +1,10 @@
-<gallery-lightbox #lightbox></gallery-lightbox>
+<gallery-lightbox #lightbox (onLastElement)="onLightboxLastElement()"></gallery-lightbox>
 <app-frame>
+
     <div navbar>
         <gallery-search #search *ngIf="showSearchBar"></gallery-search>
     </div>
+
     <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
         <gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar>
         <gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"

frontend/app/gallery/gallery.component.ts

@@ -27,6 +27,7 @@ import {GalleryNavigatorComponent} from "./navigator/navigator.gallery.component
 export class GalleryComponent implements OnInit {
 
     @ViewChild(GallerySearchComponent) search:GallerySearchComponent;
+    @ViewChild(GalleryGridComponent) grid:GalleryGridComponent;
 
     public showSearchBar:boolean = true;
 
@@ -70,6 +71,10 @@ export class GalleryComponent implements OnInit {
 
     }
 
+    onLightboxLastElement() {
+        this.grid.renderARow();
+    }
+
 
 }
 

frontend/app/gallery/gallery.service.spec.ts

@@ -1,4 +1,4 @@
-import {it, inject, beforeEachProviders} from "@angular/core/testing";
+import {it, inject, addProviders} from "@angular/core/testing";
 import {BaseRequestOptions, Http} from "@angular/http";
 import {MockBackend} from "@angular/http/testing";
 import {provide} from "@angular/core";
@@ -9,8 +9,8 @@ import {GalleryService} from "./gallery.service";
 
 describe('GalleryService', () => {
 
-
+    beforeEach(() => {
-    beforeEachProviders(() => [
+        addProviders([
             MockBackend,
             BaseRequestOptions,
             provide(Http, {
@@ -21,6 +21,8 @@ describe('GalleryService', () => {
             NetworkService,
             GalleryService
         ]);
+    });
+
 
 
     it('placeholder test', inject([], () => {

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

@@ -33,6 +33,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
     @Input() lightbox:GalleryLightboxComponent;
 
     photosToRender:Array<GridPhoto> = [];
+    containerWidth:number = 0;
 
     private IMAGE_MARGIN = 2;
     private TARGET_COL_COUNT = 5;
@@ -58,6 +59,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
         if (this.isAfterViewInit === false) {
             return;
         }
+        this.updateContainerWidth();
         this.sortPhotos();
         this.clearRenderedPhotos();
         setImmediate(() => {
@@ -73,7 +75,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
         //TODO: implement scroll detection
 
 
-        this.sortPhotos();
+        this.updateContainerWidth();
         this.clearRenderedPhotos();
         setImmediate(() => {
             this.renderPhotos();
@@ -130,31 +132,15 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
     private renderedPhotoIndex:number = 0;
 
     private renderPhotos() {
-        if (this.getContainerWidth() == 0 || this.renderedPhotoIndex >= this.photos.length || !this.shouldRenderMore()) {
+        if (this.containerWidth == 0 || this.renderedPhotoIndex >= this.photos.length || !this.shouldRenderMore()) {
             return;
         }
 
-        let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
-        let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
 
         let renderedContentHeight = 0;
 
         while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight) === true) {
-
+            renderedContentHeight += this.renderARow();
-            let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.getContainerWidth());
-            photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
-            photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
-
-            let rowHeight = photoRowBuilder.calcRowHeight();
-            let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
-
-            photoRowBuilder.getPhotoRow().forEach((photo) => {
-                let imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height);
-                this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex));
-            });
-
-            renderedContentHeight += rowHeight;
-            this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
 
         }
     }
@@ -184,11 +170,33 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
         }
     }
 
-    private getContainerWidth():number {
+    public renderARow():number {
-        if (!this.gridContainer) {
+
-            return 0;
+        let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
+        let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
+
+        let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.containerWidth);
+        photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
+        photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
+
+        let rowHeight = photoRowBuilder.calcRowHeight();
+        let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
+
+        photoRowBuilder.getPhotoRow().forEach((photo) => {
+            let imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height);
+            this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex));
+        });
+
+        this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
+        console.log(this.photosToRender.length);
+        return rowHeight;
     }
-        return this.gridContainer.nativeElement.clientWidth;
+
+    private updateContainerWidth():number {
+        if (!this.gridContainer) {
+            return;
+        }
+        this.containerWidth = this.gridContainer.nativeElement.clientWidth;
     }
 
 

frontend/app/gallery/lightbox/lightbox.gallery.component.css

@@ -3,16 +3,16 @@
     z-index: 1100; /* Sit on top */
     left: 0;
     top: 0;
-    width: 0; /* Full width */
+    width: 100%; /* Full width */
-    height: 0; /* Full height */
+    height: 100%; /* Full height */
     overflow: hidden;
     display: flex; /* add */
     justify-content: center; /* add to align horizontal */
     align-items: center; /* add to align vertical */
     cursor: pointer;
 }
+
 .blackCanvas{
-    display: none;
     position: fixed; /* Stay in place */
     z-index: 1099; /* Sit on top */
     left: 0;

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -1,10 +1,14 @@
 <div [hidden]="!activePhoto">
 
-    <div class="blackCanvas" #blackCanvas>
+    <div class="blackCanvas">
     </div>
 
-    <div class="lightbox" #lightbox>
+    <div class="lightbox">
-        <gallery-lightbox-photo #imgContainer [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null">
+        <gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
+                                [style.top.px]="photoDimension.top"
+                                [style.left.px]="photoDimension.left"
+                                [style.width.px]="photoDimension.width"
+                                [style.height.px]="photoDimension.height">
         </gallery-lightbox-photo>
     </div>
 

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -1,6 +1,6 @@
 ///<reference path="../../../browser.d.ts"/>
 
-import {Component, ElementRef, ViewChild, QueryList} from "@angular/core";
+import {Component, QueryList, Output, EventEmitter} from "@angular/core";
 import {Photo} from "../../../../common/entities/Photo";
 import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.ts";
 import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter";
@@ -14,15 +14,11 @@ import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.comp
     directives: [GalleryLightboxPhotoComponent]
 })
 export class GalleryLightboxComponent {
+    @Output('onLastElement') onLastElement = new EventEmitter();
 
-    @ViewChild('lightbox') lightBoxDiv:ElementRef;
-    @ViewChild('blackCanvas') blackCanvasDiv:ElementRef;
-    @ViewChild('controls') controlsDiv:ElementRef;
-    @ViewChild('imgContainer') imgContainer:GalleryLightboxPhotoComponent;
-
-
-    public imageSize = {width: "auto", height: "100"};
     public navigation = {hasPrev: true, hasNext: true};
+    public photoDimension:Dimension = new Dimension(0, 0, 0, 0);
+
     private activePhoto:GalleryPhotoComponent;
     public gridPhotoQL:QueryList<GalleryPhotoComponent>;
 
@@ -42,20 +38,16 @@ export class GalleryLightboxComponent {
             if (pcList[i] === this.activePhoto && i + 1 < pcList.length) {
                 this.activePhoto = pcList[i + 1];
                 this.navigation.hasPrev = true;
-                if (i + 2 < pcList.length) {
+
-                    this.navigation.hasNext = true;
+                this.navigation.hasNext = i + 2 < pcList.length;
-                } else {
+
-                    this.navigation.hasNext = false;
+                if (i + 3 === pcList.length) {
+                    this.onLastElement.emit({}); //trigger to render more photos if there are
                 }
 
-                let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
+                this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
-
-                this.forceAnimateFrom(toImage,
-                    {},
-                    this.imgContainer.nativeElement.nativeElement);
 
 
-                this.setImageSize();
                 return;
             }
         }
@@ -67,33 +59,16 @@ export class GalleryLightboxComponent {
             if (pcList[i] === this.activePhoto && i > 0) {
                 this.activePhoto = pcList[i - 1];
                 this.navigation.hasNext = true;
-                if (i - 1 > 0) {
+                this.navigation.hasPrev = i - 1 > 0;
-                    this.navigation.hasPrev = true;
-                } else {
-                    this.navigation.hasPrev = false;
-                }
 
-                let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
+                this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
 
-                this.forceAnimateFrom(toImage,
-                    {},
-                    this.imgContainer.nativeElement.nativeElement);
 
-                this.setImageSize();
                 return;
             }
         }
     }
 
-    private setImageSize() {
-        if (this.activePhoto.gridPhoto.photo.metadata.size.height > this.activePhoto.gridPhoto.photo.metadata.size.width) {
-            this.imageSize.height = "100";
-            this.imageSize.width = null;
-        } else {
-            this.imageSize.height = null;
-            this.imageSize.width = "100";
-        }
-    }
 
     public show(photo:Photo) {
         let selectedPhoto = this.findPhotoComponent(photo);
@@ -103,73 +78,20 @@ export class GalleryLightboxComponent {
 
         this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden');
         this.activePhoto = selectedPhoto;
-        this.setImageSize();
+        this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
-
-
-        let from = this.activePhoto.getDimension();
-        from.top -= this.getBodyScrollTop();
-
-
-        let fromImage = {width: from.width + "px", height: from.height + "px", top: "0px", left: "0px"};
-        let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
-
-        this.forceAnimateFrom(fromImage,
-            toImage,
-            this.imgContainer.nativeElement.nativeElement);
-
-        this.forceAnimateFrom(from.toStyle(),
-            {height: "100%", width: "100%", "top": "0px", "left": "0px"},
-            this.lightBoxDiv.nativeElement);
-
-
-        this.forceAnimateFrom({opacity: "0", display: "block"},
-            {opacity: "1"},
-            this.blackCanvasDiv.nativeElement);
-
-        this.forceAnimateFrom({opacity: "0", display: "block"},
-            {opacity: "1"},
-            this.controlsDiv.nativeElement);
 
     }
 
     public hide() {
-        console.log("hiding");
         let to = this.activePhoto.getDimension();
+
         //iff target image out of screen -> scroll to there
         if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
             this.setBodyScrollTop(to.top);
         }
-        to.top -= this.getBodyScrollTop();
-
-
-        this.forceAnimateTo({height: "100%", width: "100%", "top": "0px", "left": "0px"},
-            to.toStyle(),
-            this.lightBoxDiv.nativeElement,
-            {height: "0px", width: "0px", "top": "0px", "left": "0px"},
-            ()=> {
-                this.activePhoto = null;
-            });
 
         this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto');
-
+        this.activePhoto = null;
-        this.forceAnimateTo({opacity: "1.0", display: "block"},
-            {opacity: "0.0", display: "block"},
-            this.blackCanvasDiv.nativeElement,
-            {display: "none"});
-
-        this.forceAnimateTo({opacity: "1.0", display: "block"},
-            {opacity: "0.0", display: "block"},
-            this.controlsDiv.nativeElement,
-            {display: "none"});
-
-
-        let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle();
-        let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left: "0px"};
-
-
-        this.forceAnimateTo(fromImage,
-            toImage,
-            this.imgContainer.nativeElement.nativeElement);
 
 
     }
@@ -186,39 +108,6 @@ export class GalleryLightboxComponent {
         return selectedPhoto;
     }
 
-    private forceAnimateFrom(from, to, elemnet) {
-        /* let anim0 = this.animBuilder.css();
-         anim0.setDuration(0);
-         anim0.setToStyles(from);
-         anim0.start(elemnet).onComplete(()=> {
-
-         let anim1 = this.animBuilder.css();
-         anim1.setDuration(500);
-         anim1.setFromStyles(from);
-         anim1.setToStyles(to);
-         anim1.start(elemnet);
-         });*/
-    }
-
-    private forceAnimateTo(from, to, elemnet, innerTo = null, onComplete = ()=> {
-    }) {
-        /*   if (innerTo == null) {
-         innerTo = to;
-         }
-
-         let anim0 = this.animBuilder.css();
-         anim0.setDuration(500);
-         anim0.setFromStyles(from);
-         anim0.setToStyles(to);
-         anim0.start(elemnet).onComplete(()=> {
-         let anim1 = this.animBuilder.css();
-         anim1.setDuration(0);
-         anim1.setToStyles(innerTo);
-         anim1.start(elemnet).onComplete(onComplete);
-         });*/
-        onComplete();
-    }
-
 
     private getBodyScrollTop() {
         return this.dom.getProperty(this.dom.query('body'), 'scrollTop');

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

@@ -1,13 +1,15 @@
 <div class="imgContainer" #imgContainer>
-    <img *ngIf="gridPhoto"
+    <img *ngIf="showThumbnail()"
          [style.width.%]="imageSize.width"
          [style.height.%]="imageSize.height"
-         [src]="gridPhoto.getThumbnailPath()"/>
+         [src]="thumbnailPath()"/>
 
     <img *ngIf="gridPhoto"
          [style.width.%]="imageSize.width"
          [style.height.%]="imageSize.height"
-         [src]="gridPhoto.getPhotoPath()"/>
+         [src]="gridPhoto.getPhotoPath()"
+         (load)="onImageLoad()"
+         (error)="onImageError()"/>
 </div>
 
 

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

@@ -15,11 +15,14 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
     public imageSize = {width: "auto", height: "100"};
     @ViewChild('imgContainer') nativeElement:ElementRef;
 
+    imageLoaded:boolean = false;
 
     constructor() {
     }
 
     ngOnChanges() {
+
+        this.imageLoaded = false;
         this.setImageSize();
     }
 
@@ -37,5 +40,29 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
         }
     }
 
+
+    onImageLoad() {
+        this.imageLoaded = true;
+    }
+
+    onImageError() {
+        //TODO:handle error
+        console.error("cant load image");
+    }
+
+    public showThumbnail():boolean {
+        return this.gridPhoto && !this.imageLoaded &&
+            (this.gridPhoto.isThumbnailAvailable() || this.gridPhoto.isReplacementThumbnailAvailable());
+    }
+
+    public thumbnailPath():string {
+        if (this.gridPhoto.isThumbnailAvailable() === true)
+            return this.gridPhoto.getThumbnailPath();
+
+        if (this.gridPhoto.isReplacementThumbnailAvailable() === true)
+            return this.gridPhoto.getReplacementThumbnailPath();
+        return null
+    }
+
 }