grid performance improvement

backend/ProjectPath.ts

@@ -6,10 +6,14 @@ class ProjectPathClass {
     public ImageFolder:string;
     public ThumbnailFolder:string;
 
+    isAbsolutePath(pathStr) {
+        return path.resolve(pathStr) === path.normalize(pathStr).replace(RegExp(pathStr.sep + '$'), '');
+    }
+
     constructor() {
         this.Root = path.join(__dirname, "/../");
-        this.ImageFolder = path.join(this.Root, Config.Server.imagesFolder);
+        this.ImageFolder = this.isAbsolutePath(Config.Server.imagesFolder) ? Config.Server.imagesFolder : path.join(this.Root, Config.Server.imagesFolder);
-        this.ThumbnailFolder = path.join(this.Root, Config.Server.thumbnailFolder);
+        this.ThumbnailFolder = this.isAbsolutePath(Config.Server.thumbnailFolder) ? Config.Server.thumbnailFolder : path.join(this.Root, Config.Server.thumbnailFolder);
     }
 }
 

backend/model/DiskManger.ts

@@ -15,13 +15,14 @@ import {
     PositionMetaData,
     GPSMetadata
 } from "../../common/entities/Photo";
+import {ProjectPath} from "../ProjectPath";
 
 export class DiskManager {
     public static scanDirectory(relativeDirectoryName, cb:(error:any, result:Directory) => void) {
         console.log("DiskManager: scanDirectory");
         let directoryName = path.basename(relativeDirectoryName);
         let directoryParent = path.join(path.dirname(relativeDirectoryName), "/");
-        let absoluteDirectoryName = path.join(__dirname, "/../../demo/images", relativeDirectoryName);
+        let absoluteDirectoryName = path.join(ProjectPath.ImageFolder, relativeDirectoryName);
 
         let directory = new Directory(1, directoryName, directoryParent, new Date(), [], []);
 

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

@@ -1,4 +1,4 @@
-<div #gridContainer (window:resize)="onResize()">
+<div #gridContainer>
     <gallery-grid-photo
             *ngFor="let gridPhoto of photosToRender"
             (click)="lightbox.show(gridPhoto.photo)"

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

@@ -42,13 +42,22 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
     }
 
     ngOnChanges() {
+        if (this.isAfterViewInit == false) {
+            return;
+        } 
         this.onPhotosChanged();
     }
 
+    @HostListener('window:resize')
     onResize() {
+        if (this.isAfterViewInit == false) {
+            return;
+        }
         this.onPhotosChanged();
     }
 
+    isAfterViewInit:boolean = false;
+
     ngAfterViewInit() {
         this.lightbox.gridPhotoQL = this.gridPhotoQL;
 
@@ -56,6 +65,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
 
 
         this.onPhotosChanged();
+        this.isAfterViewInit = true;
     }
 
 
@@ -89,7 +99,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
 
         let renderedContentHeight = 0;
 
-        while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight)) {
+        while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight) === true) {
 
             let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.getContainerWidth());
             photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
@@ -105,20 +115,23 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit {
 
             renderedContentHeight += rowHeight;
             this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
-        
+
         }
     }
 
 
     private shouldRenderMore(offset:number = 0):boolean {
         return document.body.scrollTop >= (document.body.clientHeight + offset - window.innerHeight) * 0.7
-            || document.body.clientHeight + offset < window.innerHeight;
+            || (document.body.clientHeight + offset) * 0.85 < window.innerHeight;
 
     }
 
     @HostListener('window:scroll')
     onScroll() {
         this.renderPhotos();
+        this.gridPhotoQL.toArray().forEach((pc:GalleryPhotoComponent) => {
+            pc.onScroll();
+        });
     }
 
     private getContainerWidth():number {

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

@@ -47,7 +47,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit
     SearchTypes:any = [];
     searchEnabled:boolean = true;
 
-    scrollListener = null;
+    wasInView:boolean = null;
 
     constructor(private thumbnailService:ThumbnailLoaderService, private renderer:Renderer) {
         this.SearchTypes = SearchTypes;
@@ -88,23 +88,17 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit
                         this.image.show = true;
                         this.loading.show = false;
                         this.thumbnailTask = null;
-                        if (this.scrollListener) {
-                            this.scrollListener();
-                        }
                     },
                     onError: (error)=> {//onError
                         this.thumbnailTask = null;
-                        if (this.scrollListener) {
-                            this.scrollListener();
-                        }
                         //TODO: handle error
                         console.error("something bad happened");
                         console.error(error);
                     }
                 };
-                this.scrollListener = this.renderer.listenGlobal('window', 'scroll', () => {
+                /*  this.scrollListener = this.renderer.listenGlobal('window', 'scroll', () => {
-                    this.onScroll();
+                 this.onScroll();
-                });
+                 });*/
                 if (this.gridPhoto.isReplacementThumbnailAvailable()) {
                     this.thumbnailTask = this.thumbnailService.loadImage(this.gridPhoto, ThumbnailLoadingPriority.medium, listener);
                 } else {
@@ -121,9 +115,6 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit
             this.thumbnailService.removeTask(this.thumbnailTask);
             this.thumbnailTask = null;
         }
-        if (this.scrollListener) {
-            this.scrollListener();
-        }
     }
 
 
@@ -132,19 +123,24 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, AfterViewInit
             && document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop;
     }
 
+
     onScroll() {
         if (this.thumbnailTask != null) {
-            if (this.isInView() == true) {
+            let isInView = this.isInView();
-                if (this.gridPhoto.isReplacementThumbnailAvailable()) {
+            if (this.wasInView != isInView) {
-                    this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
+                this.wasInView = isInView;
+                if (isInView == true) {
+                    if (this.gridPhoto.isReplacementThumbnailAvailable()) {
+                        this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
+                    } else {
+                        this.thumbnailTask.priority = ThumbnailLoadingPriority.high;
+                    }
                 } else {
-                    this.thumbnailTask.priority = ThumbnailLoadingPriority.high;
+                    if (this.gridPhoto.isReplacementThumbnailAvailable()) {
-                }
+                        this.thumbnailTask.priority = ThumbnailLoadingPriority.low;
-            } else {
+                    } else {
-                if (this.gridPhoto.isReplacementThumbnailAvailable()) {
+                        this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
-                    this.thumbnailTask.priority = ThumbnailLoadingPriority.low;
+                    }
-                } else {
-                    this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
                 }
             }
         }