self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-25 02:04:15 +02:00
Code Issues Releases Activity

implementing thumbnail info sending to clientside

Browse Source
This commit is contained in:
Braun Patrik 2016-06-22 16:34:44 +02:00
parent cc43db58ac
commit c2b4a80886
13 changed files with 139 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
backend/ProjectPath.ts Normal file
View File

@ -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();

30
backend/middlewares/GalleryMWs.ts
View File

@ -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();
}

54
backend/middlewares/ThumbnailGeneratorMWs.ts
View File

@ -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 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

6
backend/routes/GalleryRouter.ts
View File

@ -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
);
};

6
common/config/Config.ts
View File

@ -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
};

2
frontend/app/gallery/gallery.component.ts
View File

@ -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);

4
frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css
View File

@ -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;
}

1
frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts
View File

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

2
frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -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 = [];

12
frontend/app/gallery/grid/thumnailLoader.service.ts
View File

@ -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();

38
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -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();
}

47
package.json
View File

@ -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"
}
}

32
test/backend/initMongo.ts
View File

@ -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()
});
});
});
});
});
});