implementing thumbnail info sending to clientside

backend/ProjectPath.ts

@@ -0,0 +1,16 @@
+import * as path from "path";
+import {Config} from "./config/Config";
+
+class ProjectPathClass {
+    public Root:string;
+    public ImageFolder:string;
+    public ThumbnailFolder:string;
+
+    constructor() {
+        this.Root = path.join(__dirname, "/../");
+        this.ImageFolder = path.join(this.Root, Config.Server.imagesFolder);
+        this.ThumbnailFolder = path.join(this.Root, Config.Server.thumbnailFolder);
+    }
+}
+
+export var ProjectPath = new ProjectPathClass();

backend/middlewares/GalleryMWs.ts

@@ -9,17 +9,14 @@ import {ContentWrapper} from "../../common/entities/ConentWrapper";
 import {SearchResult} from "../../common/entities/SearchResult";
 import {Photo} from "../../common/entities/Photo";
 import {Config} from "../config/Config";
+import {ProjectPath} from "../ProjectPath";
 
 export class GalleryMWs {
 
 
-    private static getImageFolder() {
-        return path.join(__dirname, "/../../", Config.Server.imagesFolder);
-    }
-
     public static listDirectory(req:Request, res:Response, next:NextFunction) {
         let directoryName = req.params.directory || "/";
-        let absoluteDirectoryName = path.join(GalleryMWs.getImageFolder(), directoryName);
+        let absoluteDirectoryName = path.join(ProjectPath.ImageFolder, directoryName);
 
         if (!fs.statSync(absoluteDirectoryName).isDirectory()) {
             return next();
@@ -29,25 +26,34 @@ export class GalleryMWs {
             if (err || !directory) {
                 return next(new Error(ErrorCodes.GENERAL_ERROR, err));
             }
-
+            
-            //remove cyclic reference
-            directory.photos.forEach((photo:Photo) => { 
-                photo.directory = null;
-            });
-
             req.resultPipe = new ContentWrapper(directory, null);
             return next();
         });
     }
 
 
+    public static removeCyclicDirectoryReferences(req:Request, res:Response, next:NextFunction) {
+        if (!req.resultPipe)
+            return next();
+
+        let cw:ContentWrapper = req.resultPipe;
+        if (cw.directory) {
+            cw.directory.photos.forEach((photo:Photo) => {
+                photo.directory = null;
+            });
+        }
+
+        return next();
+    }
+
 
     public static loadImage(req:Request, res:Response, next:NextFunction) {
         if (!(req.params.imagePath)) {
             return next();
         }
 
-        let fullImagePath = path.join(GalleryMWs.getImageFolder(), req.params.imagePath);
+        let fullImagePath = path.join(ProjectPath.ImageFolder, req.params.imagePath);
         if (fs.statSync(fullImagePath).isDirectory()) {
             return next();
         }

backend/middlewares/ThumbnailGeneratorMWs.ts

@@ -8,12 +8,53 @@ import * as fs from "fs";
 import {NextFunction, Request, Response} from "express";
 import {Error, ErrorCodes} from "../../common/entities/Error";
 import {Config} from "../config/Config";
+import {ContentWrapper} from "../../common/entities/ConentWrapper";
+import {Directory} from "../../common/entities/Directory";
+import {ProjectPath} from "../ProjectPath";
+import {Photo} from "../../common/entities/Photo";
 
 
 export class ThumbnailGeneratorMWs {
 
-    private static getThumbnailFolder() {
+
-        return path.join(__dirname, "/../../", Config.Server.thumbnailFolder);
+    private static addThInfoTODir(directory:Directory) {
+        ThumbnailGeneratorMWs.addThInfoToPhotos(directory.photos);
+
+        for (let i = 0; i < directory.directories.length; i++) {
+            ThumbnailGeneratorMWs.addThInfoTODir(directory.directories[i]);
+        }
+
+    }
+
+    private static addThInfoToPhotos(photos:Array<Photo>) {
+        let thumbnailFolder = ProjectPath.ThumbnailFolder;
+        for (let j = 0; j < Config.Client.thumbnailSizes.length; j++) {
+            let size = Config.Client.thumbnailSizes[j];
+            for (let i = 0; i < photos.length; i++) {
+                let fullImagePath = path.join(ProjectPath.ImageFolder, photos[i].directory.path, photos[i].directory.name, photos[i].name);
+                let thPath = path.join(thumbnailFolder, ThumbnailGeneratorMWs.generateThumbnailName(fullImagePath, size));
+                if (fs.existsSync(thPath) === true) {
+                    photos[i].readyThumbnails.push(size);
+                }
+            }
+        }
+    }
+
+    public static addThumbnailInformation(req:Request, res:Response, next:NextFunction) {
+        if (!req.resultPipe)
+            return next();
+
+        let cw:ContentWrapper = req.resultPipe;
+        if (cw.directory) {
+            ThumbnailGeneratorMWs.addThInfoTODir(cw.directory);
+        }
+        if (cw.searchResult) {
+            ThumbnailGeneratorMWs.addThInfoToPhotos(cw.searchResult.photos);
+        }
+
+
+        return next();
+        
     }
 
     public static generateThumbnail(req:Request, res:Response, next:NextFunction) {
@@ -22,8 +63,7 @@ export class ThumbnailGeneratorMWs {
 
         //load parameters
         let imagePath = req.resultPipe;
-        let size:number = parseInt(req.params.size) || Config.Client.thumbnailSizes[0];
+        let size:number = parseInt(req.params.size) || Config.Client.thumbnailSizes[0]; 
-        let thumbnailFolder = ThumbnailGeneratorMWs.getThumbnailFolder();
 
         //validate size
         if (Config.Client.thumbnailSizes.indexOf(size) === -1) {
@@ -31,7 +71,7 @@ export class ThumbnailGeneratorMWs {
         }
 
         //generate thumbnail path
-        let thPath = path.join(thumbnailFolder, ThumbnailGeneratorMWs.generateThumbnailName(imagePath, size));
+        let thPath = path.join(ProjectPath.ThumbnailFolder, ThumbnailGeneratorMWs.generateThumbnailName(imagePath, size));
 
 
         req.resultPipe = thPath;
@@ -42,8 +82,8 @@ export class ThumbnailGeneratorMWs {
         }
 
         //create thumbnail folder if not exist
-        if (!fs.existsSync(thumbnailFolder)) {
+        if (!fs.existsSync(ProjectPath.ThumbnailFolder)) {
-            fs.mkdirSync(thumbnailFolder);
+            fs.mkdirSync(ProjectPath.ThumbnailFolder);
         }
 
         //generate thumbnail

backend/routes/GalleryRouter.ts

@@ -21,6 +21,8 @@ export class GalleryRouter {
         this.app.get(["/api/gallery/content/:directory(*)", "/api/gallery/", "/api/gallery//"],
             AuthenticationMWs.authenticate,
             GalleryMWs.listDirectory,
+            ThumbnailGeneratorMWs.addThumbnailInformation,
+            GalleryMWs.removeCyclicDirectoryReferences,
             RenderingMWs.renderResult
         );
     };
@@ -47,6 +49,8 @@ export class GalleryRouter {
         this.app.get("/api/search/:text",
             AuthenticationMWs.authenticate,
             GalleryMWs.search,
+            ThumbnailGeneratorMWs.addThumbnailInformation,
+            GalleryMWs.removeCyclicDirectoryReferences,
             RenderingMWs.renderResult
         );
     };
@@ -55,6 +59,8 @@ export class GalleryRouter {
         this.app.get("/api/instant-search/:text",
             AuthenticationMWs.authenticate,
             GalleryMWs.instantSearch,
+            ThumbnailGeneratorMWs.addThumbnailInformation,
+            GalleryMWs.removeCyclicDirectoryReferences,
             RenderingMWs.renderResult
         );
     };

common/config/Config.ts

@@ -27,9 +27,9 @@ export class ConfigClass {
     public Client:ClientConfig = {
         thumbnailSizes: [200, 400, 600],
         Search: {
-            searchEnabled: true,
+            searchEnabled: false,
-            instantSearchEnabled: true,
+            instantSearchEnabled: false,
-            autocompleteEnabled: true
+            autocompleteEnabled: false
         },
         concurrentThumbnailGenerations: 1
     };

frontend/app/gallery/gallery.component.ts

@@ -42,7 +42,6 @@ export class GalleryComponent implements OnInit {
             return;
         }
 
-        console.log(this._params);
 
         let searchText = this._params.get('searchText');
         if (searchText && searchText != "") {
@@ -63,6 +62,7 @@ export class GalleryComponent implements OnInit {
 
         let directoryName = this._params.get('directory');
         directoryName = directoryName ? directoryName : "";
+
         this._galleryService.getDirectory(directoryName);
 
 

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

@@ -17,8 +17,8 @@
 }
 
 .sk-cube-grid .sk-cube {
-    width: 33%;
+    width: calc(100% / 3);
-    height: 33%;
+    height: calc(100% / 3);
     background-color: #bbbbbb;
     float: left;
 }

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

@@ -12,7 +12,6 @@ export class GalleryPhotoLoadingComponent {
     animate = false;
 
     startAnimation() {
-        console.log("animate");
         this.animate = true;
     }
 }

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

@@ -25,7 +25,7 @@ export class GalleryPhotoComponent implements IRenderable, AfterViewInit {
     showImage = false;
     infoStyle = {
         height: 0,
-        background: ""
+        background: "rgba(0,0,0,0.0)"
     };
 
     SearchTypes:any = [];

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

@@ -13,8 +13,7 @@ export class ThumbnailLoaderService {
     constructor() {
     }
 
-    loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void {
+    loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void { 
-        console.log("[LOAD IMG]" + gridPhoto.photo.name);
         let tmp:ThumbnailTask = null;
         for (let i = 0; i < this.que.length; i++) {
             if (this.que[i].gridPhoto.getThumbnailPath() == gridPhoto.getThumbnailPath()) {
@@ -45,21 +44,18 @@ export class ThumbnailLoaderService {
         }
         this.runningRequests++;
         let task = this.que.shift();
-        task.onStartedLoading.forEach(cb=>cb());
+        task.onStartedLoading.forEach(cb=>cb()); 
-        console.log("loadingstarted: " + task.gridPhoto.getThumbnailPath());
 
         let curImg = new Image();
         curImg.src = task.gridPhoto.getThumbnailPath();
-        curImg.onload = () => {
+        curImg.onload = () => { 
-            console.log(task.gridPhoto.getThumbnailPath() + "done");
             task.gridPhoto.thumbnailLoaded();
             task.onLoad.forEach(cb=>cb());
             this.runningRequests--;
             this.run();
         };
 
-        curImg.onerror = (error) => {
+        curImg.onerror = (error) => { 
-            console.error(task.gridPhoto.getThumbnailPath() + "error");
             task.onLoad.forEach(cb=>cb(error));
             this.runningRequests--;
             this.run();

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

@@ -188,33 +188,33 @@ export class GalleryLightboxComponent {
 
     private forceAnimateFrom(from, to, elemnet) {
         /* let anim0 = this.animBuilder.css();
-        anim0.setDuration(0);
+         anim0.setDuration(0);
-        anim0.setToStyles(from);
+         anim0.setToStyles(from);
-        anim0.start(elemnet).onComplete(()=> {
+         anim0.start(elemnet).onComplete(()=> {
 
-            let anim1 = this.animBuilder.css();
+         let anim1 = this.animBuilder.css();
-            anim1.setDuration(500);
+         anim1.setDuration(500);
-            anim1.setFromStyles(from);
+         anim1.setFromStyles(from);
-            anim1.setToStyles(to);
+         anim1.setToStyles(to);
-            anim1.start(elemnet);
+         anim1.start(elemnet);
          });*/
     }
 
     private forceAnimateTo(from, to, elemnet, innerTo = null, onComplete = ()=> {
     }) {
         /*   if (innerTo == null) {
-            innerTo = to;
+         innerTo = to;
-        }
+         }
 
-        let anim0 = this.animBuilder.css();
+         let anim0 = this.animBuilder.css();
-        anim0.setDuration(500);
+         anim0.setDuration(500);
-        anim0.setFromStyles(from);
+         anim0.setFromStyles(from);
-        anim0.setToStyles(to);
+         anim0.setToStyles(to);
-        anim0.start(elemnet).onComplete(()=> {
+         anim0.start(elemnet).onComplete(()=> {
-            let anim1 = this.animBuilder.css();
+         let anim1 = this.animBuilder.css();
-            anim1.setDuration(0);
+         anim1.setDuration(0);
-            anim1.setToStyles(innerTo);
+         anim1.setToStyles(innerTo);
-            anim1.start(elemnet).onComplete(onComplete);
+         anim1.start(elemnet).onComplete(onComplete);
          });*/
         onComplete();
     }

package.json

@@ -21,51 +21,35 @@
     "url": "https://github.com/bpatrik/PiGallery2/issues"
   },
   "dependencies": {
-    "@angular/http": "2.0.0-rc.2",
     "@angular/common": "2.0.0-rc.2",
     "@angular/compiler": "2.0.0-rc.2",
     "@angular/core": "2.0.0-rc.2",
+    "@angular/http": "2.0.0-rc.2",
     "@angular/platform-browser": "2.0.0-rc.2",
     "@angular/platform-browser-dynamic": "2.0.0-rc.2",
     "@angular/platform-server": "2.0.0-rc.2",
     "@angular/router": "2.0.0-rc.2",
     "@angular/router-deprecated": "2.0.0-rc.2",
-
     "body-parser": "^1.15.1",
-    "core-js": "^2.4.0",
-    "debug": "^2.2.0",
-    "ejs": "^2.4.2",
-    "exif-parser": "^0.1.9",
-    "express": "^4.13.4",
-    "express-session": "^1.13.0",
-    "jimp": "^0.2.24",
-    "mime": "^1.3.4",
-    "mongoose": "^4.5.0",
-    "morgan": "^1.7.0",
-    "ng2-cookies": "^0.1.9",
-    "node-iptc": "^1.0.4",
-    "optimist": "^0.6.1",
-    "rxjs": "5.0.0-beta.6",
-    "ts-loader": "^0.8.2",
-    "tslint": "^3.11.0",
-    "typescript": "^1.8.10",
-    "typings": "^1.2.0",
-    "webpack": "^1.13.1",
-    "zone.js": "^0.6.12",
-    
-    
     "chai": "^3.5.0",
     "compression-webpack-plugin": "^0.3.0",
+    "core-js": "^2.4.0",
     "css-loader": "^0.23.1",
+    "debug": "^2.2.0",
+    "ejs": "^2.4.2",
     "es6-promise-loader": "^1.0.1",
+    "exif-parser": "^0.1.9",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "express": "^4.14.0",
+    "express-session": "^1.13.0",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.21.0",
     "ie-shim": "^0.1.0",
     "imports-loader": "^0.6.5",
     "istanbul-instrumenter-loader": "^0.2.0",
     "jasmine-core": "^2.4.1",
+    "jimp": "^0.2.24",
     "json-loader": "^0.5.4",
     "karma": "^0.13.21",
     "karma-coverage": "^1.0.0",
@@ -75,18 +59,31 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "1.7.0",
+    "mime": "^1.3.4",
     "mocha": "^2.5.3",
+    "mongoose": "^4.5.1",
+    "morgan": "^1.7.0",
+    "ng2-cookies": "^0.1.9",
     "ng2lint": "0.0.10",
+    "node-iptc": "^1.0.4",
+    "optimist": "^0.6.1",
     "phantomjs-prebuilt": "^2.1.7",
     "protractor": "^3.2.2",
     "raw-loader": "0.5.1",
     "remap-istanbul": "^0.6.4",
     "rimraf": "^2.5.2",
+    "rxjs": "5.0.0-beta.6",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.0",
     "ts-helpers": "1.1.1",
+    "ts-loader": "^0.8.2",
+    "tslint": "^3.11.0",
     "tslint-loader": "^2.1.3",
     "typedoc": "^0.4.3",
-    "url-loader": "^0.5.7"
+    "typescript": "^1.8.10",
+    "typings": "^1.3.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "zone.js": "^0.6.12"
   }
 }

test/backend/initMongo.ts

@@ -1,32 +0,0 @@
-import {MongoUserManager} from "../../backend/model/mongoose/MongoUserManager";
-import {User, UserRoles} from "../../common/entities/User";
-import {DatabaseManager} from "../../backend/model/mongoose/DatabaseManager";
-
-
-DatabaseManager.getInstance().onConnectionError(()=> {
-    DatabaseManager.getInstance().disconnect();
-    process.exit()
-});
-
-DatabaseManager.getInstance().onConnected(()=> {
-    let userManager = new MongoUserManager();
-    userManager.createUser(new User(0, "demo", "demo", UserRoles.Developer), (err)=> {
-
-        userManager.createUser(new User(1, "developer", "developer", UserRoles.Developer), (err)=> {
-
-            userManager.createUser(new User(2, "admin", "admin", UserRoles.Admin), (err)=> {
-
-                userManager.createUser(new User(3, "user", "user", UserRoles.User), (err)=> {
-
-                    userManager.createUser(new User(4, "guest", "guest", UserRoles.Guest), (err)=> {
-
-                        DatabaseManager.getInstance().disconnect();
-                        process.exit()
-                    });
-                });
-            });
-        });
-    });
-
-
-});