From c2b4a80886bb76c59ad6b30ce3c3d9f02a11747e Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Wed, 22 Jun 2016 16:34:44 +0200 Subject: [PATCH] implementing thumbnail info sending to clientside --- backend/ProjectPath.ts | 16 ++++++ backend/middlewares/GalleryMWs.ts | 30 ++++++----- backend/middlewares/ThumbnailGeneratorMWs.ts | 54 ++++++++++++++++--- backend/routes/GalleryRouter.ts | 6 +++ common/config/Config.ts | 6 +-- frontend/app/gallery/gallery.component.ts | 2 +- .../loading.photo.grid.gallery.component.css | 4 +- .../loading.photo.grid.gallery.component.ts | 1 - .../photo/photo.grid.gallery.component.ts | 2 +- .../gallery/grid/thumnailLoader.service.ts | 12 ++--- .../lightbox/lightbox.gallery.component.ts | 38 ++++++------- package.json | 47 ++++++++-------- test/backend/initMongo.ts | 32 ----------- 13 files changed, 139 insertions(+), 111 deletions(-) create mode 100644 backend/ProjectPath.ts delete mode 100644 test/backend/initMongo.ts diff --git a/backend/ProjectPath.ts b/backend/ProjectPath.ts new file mode 100644 index 00000000..54ab7683 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/backend/middlewares/GalleryMWs.ts b/backend/middlewares/GalleryMWs.ts index cf91c504..2e9ab04c 100644 --- a/backend/middlewares/GalleryMWs.ts +++ b/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(); } diff --git a/backend/middlewares/ThumbnailGeneratorMWs.ts b/backend/middlewares/ThumbnailGeneratorMWs.ts index 1faaf8f9..7830e1d5 100644 --- a/backend/middlewares/ThumbnailGeneratorMWs.ts +++ b/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) { + 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 thumbnailFolder = ThumbnailGeneratorMWs.getThumbnailFolder(); + let size:number = parseInt(req.params.size) || Config.Client.thumbnailSizes[0]; //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)) { - fs.mkdirSync(thumbnailFolder); + if (!fs.existsSync(ProjectPath.ThumbnailFolder)) { + fs.mkdirSync(ProjectPath.ThumbnailFolder); } //generate thumbnail diff --git a/backend/routes/GalleryRouter.ts b/backend/routes/GalleryRouter.ts index 82871b13..6deb03e1 100644 --- a/backend/routes/GalleryRouter.ts +++ b/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 ); }; diff --git a/common/config/Config.ts b/common/config/Config.ts index e0acfd1c..bc376754 100644 --- a/common/config/Config.ts +++ b/common/config/Config.ts @@ -27,9 +27,9 @@ export class ConfigClass { public Client:ClientConfig = { thumbnailSizes: [200, 400, 600], Search: { - searchEnabled: true, - instantSearchEnabled: true, - autocompleteEnabled: true + searchEnabled: false, + instantSearchEnabled: false, + autocompleteEnabled: false }, concurrentThumbnailGenerations: 1 }; diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts index bced5bfb..a3ce4486 100644 --- a/frontend/app/gallery/gallery.component.ts +++ b/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); diff --git a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css index fa8cc783..57d1ea9e 100644 --- a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css +++ b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css @@ -17,8 +17,8 @@ } .sk-cube-grid .sk-cube { - width: 33%; - height: 33%; + width: calc(100% / 3); + height: calc(100% / 3); background-color: #bbbbbb; float: left; } diff --git a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts index 35c3a7cc..6d8ad04a 100644 --- a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts +++ b/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; } } diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts index cb5b2897..468582d9 100644 --- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts +++ b/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 = []; diff --git a/frontend/app/gallery/grid/thumnailLoader.service.ts b/frontend/app/gallery/grid/thumnailLoader.service.ts index f67fee88..9e239e2e 100644 --- a/frontend/app/gallery/grid/thumnailLoader.service.ts +++ b/frontend/app/gallery/grid/thumnailLoader.service.ts @@ -13,8 +13,7 @@ export class ThumbnailLoaderService { constructor() { } - loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void { - console.log("[LOAD IMG]" + gridPhoto.photo.name); + loadImage(gridPhoto:GridPhoto, onStartedLoading, onLoad, onError):void { 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()); - console.log("loadingstarted: " + task.gridPhoto.getThumbnailPath()); + task.onStartedLoading.forEach(cb=>cb()); let curImg = new Image(); curImg.src = task.gridPhoto.getThumbnailPath(); - curImg.onload = () => { - console.log(task.gridPhoto.getThumbnailPath() + "done"); + curImg.onload = () => { task.gridPhoto.thumbnailLoaded(); task.onLoad.forEach(cb=>cb()); this.runningRequests--; this.run(); }; - curImg.onerror = (error) => { - console.error(task.gridPhoto.getThumbnailPath() + "error"); + curImg.onerror = (error) => { task.onLoad.forEach(cb=>cb(error)); this.runningRequests--; this.run(); diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index 97b55c3a..dfaa64a1 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/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.setToStyles(from); - anim0.start(elemnet).onComplete(()=> { + 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); + 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; - } + 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); + 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(); } diff --git a/package.json b/package.json index 7ad7b0ad..e0889fcf 100644 --- a/package.json +++ b/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" } } diff --git a/test/backend/initMongo.ts b/test/backend/initMongo.ts deleted file mode 100644 index 5177b1cb..00000000 --- a/test/backend/initMongo.ts +++ /dev/null @@ -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() - }); - }); - }); - }); - }); - - -}); \ No newline at end of file