mirror of
https://github.com/bpatrik/pigallery2.git
synced 2025-01-12 04:23:09 +02:00
package update and improving lightbox
This commit is contained in:
Patrik J. Braun
parent
7e425fc54e
commit
3f10c670f5
@ -1,13 +1,13 @@
|
||||
import {IIndexingManager} from "../interfaces/IIndexingManager";
|
||||
import {IndexingProgressDTO} from "../../../common/entities/settings/IndexingProgressDTO";
|
||||
import {ObjectManagerRepository} from "../ObjectManagerRepository";
|
||||
import {ISQLGalleryManager} from "./IGalleryManager";
|
||||
import * as path from "path";
|
||||
import {SQLConnection} from "./SQLConnection";
|
||||
import {DirectoryEntity} from "./enitites/DirectoryEntity";
|
||||
import {Logger} from "../../Logger";
|
||||
import {IIndexingManager} from '../interfaces/IIndexingManager';
|
||||
import {IndexingProgressDTO} from '../../../common/entities/settings/IndexingProgressDTO';
|
||||
import {ObjectManagerRepository} from '../ObjectManagerRepository';
|
||||
import {ISQLGalleryManager} from './IGalleryManager';
|
||||
import * as path from 'path';
|
||||
import {SQLConnection} from './SQLConnection';
|
||||
import {DirectoryEntity} from './enitites/DirectoryEntity';
|
||||
import {Logger} from '../../Logger';
|
||||
|
||||
const LOG_TAG = "[IndexingManager]";
|
||||
const LOG_TAG = '[IndexingManager]';
|
||||
|
||||
export class IndexingManager implements IIndexingManager {
|
||||
directoriesToIndex: string[] = [];
|
||||
@ -30,24 +30,24 @@ export class IndexingManager implements IIndexingManager {
|
||||
}
|
||||
this.indexingProgress.indexed++;
|
||||
for (let i = 0; i < scanned.directories.length; i++) {
|
||||
this.directoriesToIndex.push(path.join(scanned.directories[i].path, scanned.directories[i].name))
|
||||
this.directoriesToIndex.push(path.join(scanned.directories[i].path, scanned.directories[i].name));
|
||||
}
|
||||
process.nextTick(this.indexNewDirectory);
|
||||
};
|
||||
|
||||
startIndexing(): void {
|
||||
if (this.directoriesToIndex.length == 0 && this.enabled == false) {
|
||||
Logger.info(LOG_TAG, "Starting indexing");
|
||||
Logger.info(LOG_TAG, 'Starting indexing');
|
||||
this.indexingProgress = <IndexingProgressDTO>{
|
||||
indexed: 0,
|
||||
left: 0,
|
||||
current: ""
|
||||
current: ''
|
||||
};
|
||||
this.directoriesToIndex.push("/");
|
||||
this.directoriesToIndex.push('/');
|
||||
this.enabled = true;
|
||||
this.indexNewDirectory();
|
||||
} else {
|
||||
Logger.info(LOG_TAG, "Already indexing..");
|
||||
Logger.info(LOG_TAG, 'Already indexing..');
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@ export class IndexingManager implements IIndexingManager {
|
||||
}
|
||||
|
||||
cancelIndexing(): void {
|
||||
Logger.info(LOG_TAG, "Canceling indexing");
|
||||
Logger.info(LOG_TAG, 'Canceling indexing');
|
||||
this.directoriesToIndex = [];
|
||||
this.indexingProgress = null;
|
||||
this.enabled = false;
|
||||
@ -66,15 +66,16 @@ export class IndexingManager implements IIndexingManager {
|
||||
}
|
||||
|
||||
async reset(): Promise<void> {
|
||||
Logger.info(LOG_TAG, "Resetting DB");
|
||||
Logger.info(LOG_TAG, 'Resetting DB');
|
||||
this.directoriesToIndex = [];
|
||||
this.indexingProgress = null;
|
||||
this.enabled = false;
|
||||
const connection = await SQLConnection.getConnection();
|
||||
return connection
|
||||
.getRepository(DirectoryEntity)
|
||||
.createQueryBuilder("directory")
|
||||
.createQueryBuilder('directory')
|
||||
.delete()
|
||||
.execute();
|
||||
.execute().then(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,9 +16,9 @@ import {NotificationService} from '../model/notification.service';
|
||||
export class FrameComponent {
|
||||
|
||||
user: BehaviorSubject<UserDTO>;
|
||||
authenticationRequired: boolean = false;
|
||||
authenticationRequired = false;
|
||||
public title: string;
|
||||
isIn: boolean = false;
|
||||
isIn = false;
|
||||
|
||||
constructor(private _authService: AuthenticationService,
|
||||
public notificationService: NotificationService) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<gallery-lightbox #lightbox (onLastElement)="onLightboxLastElement()"></gallery-lightbox>
|
||||
<app-gallery-lightbox #lightbox (onLastElement)="onLightboxLastElement()"></app-gallery-lightbox>
|
||||
<app-frame>
|
||||
|
||||
<ng-container navbar>
|
||||
@ -18,7 +18,6 @@
|
||||
<li *ngIf="showShare">
|
||||
<gallery-share></gallery-share>
|
||||
</li>
|
||||
-
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import {SearchResultDTO} from '../../../common/entities/SearchResultDTO';
|
||||
import {ShareService} from './share.service';
|
||||
import {NavigationService} from '../model/navigation.service';
|
||||
import {UserRoles} from '../../../common/entities/UserDTO';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import {interval} from 'rxjs/observable/interval';
|
||||
import {ContentWrapper} from '../../../common/entities/ConentWrapper';
|
||||
|
||||
@Component({
|
||||
@ -24,8 +24,8 @@ export class GalleryComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(GallerySearchComponent) search: GallerySearchComponent;
|
||||
@ViewChild(GalleryGridComponent) grid: GalleryGridComponent;
|
||||
|
||||
public showSearchBar: boolean = false;
|
||||
public showShare: boolean = false;
|
||||
public showSearchBar = false;
|
||||
public showShare = false;
|
||||
public directories: DirectoryDTO[] = [];
|
||||
public isPhotoWithLocation = false;
|
||||
private $counter;
|
||||
@ -64,11 +64,11 @@ export class GalleryComponent implements OnInit, OnDestroy {
|
||||
|
||||
private onRoute = async (params: Params) => {
|
||||
const searchText = params['searchText'];
|
||||
if (searchText && searchText != '') {
|
||||
let typeString = params['type'];
|
||||
if (searchText && searchText !== '') {
|
||||
const typeString = params['type'];
|
||||
|
||||
if (typeString && typeString != '') {
|
||||
let type: SearchTypes = <any>SearchTypes[typeString];
|
||||
if (typeString && typeString !== '') {
|
||||
const type: SearchTypes = <any>SearchTypes[typeString];
|
||||
this._galleryService.search(searchText, type);
|
||||
return;
|
||||
}
|
||||
@ -77,7 +77,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
|
||||
return;
|
||||
}
|
||||
|
||||
if (params['sharingKey'] && params['sharingKey'] != '') {
|
||||
if (params['sharingKey'] && params['sharingKey'] !== '') {
|
||||
const sharing = await this.shareService.getSharing();
|
||||
this._router.navigate(['/gallery', sharing.path], {queryParams: {sk: this.shareService.getSharingKey()}});
|
||||
return;
|
||||
@ -140,7 +140,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
|
||||
this.subscription.route = this._route.params.subscribe(this.onRoute);
|
||||
|
||||
if (this.shareService.isSharing()) {
|
||||
this.$counter = Observable.interval(1000);
|
||||
this.$counter = interval(1000);
|
||||
this.subscription.timer = this.$counter.subscribe((x) => this.updateTimer(x));
|
||||
}
|
||||
|
||||
|
||||
@ -6,9 +6,6 @@
|
||||
width: 100%; /* Full width */
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -33,7 +33,8 @@
|
||||
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen" i18n-title></span>
|
||||
|
||||
<span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close" i18n-title></span>
|
||||
<span class="glyphicon glyphicon-remove highlight control-button" (click)="hide()" title="close"
|
||||
i18n-title></span>
|
||||
</div>
|
||||
|
||||
<div class="navigation-arrow highlight"
|
||||
|
||||
@ -1,20 +1,33 @@
|
||||
import {ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, OnDestroy, Output, QueryList, ViewChild} from '@angular/core';
|
||||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
QueryList,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
|
||||
import {GalleryPhotoComponent} from '../grid/photo/photo.grid.gallery.component';
|
||||
import {Dimension} from '../../model/IRenderable';
|
||||
import {FullScreenService} from '../fullscreen.service';
|
||||
import {OverlayService} from '../overlay.service';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {Subscription} from 'rxjs/Subscription';
|
||||
import {animate, AnimationBuilder, AnimationPlayer, style} from '@angular/animations';
|
||||
import {GalleryLightboxPhotoComponent} from './photo/photo.lightbox.gallery.component';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import {timer} from 'rxjs/observable/timer';
|
||||
import {filter} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'gallery-lightbox',
|
||||
selector: 'app-gallery-lightbox',
|
||||
styleUrls: ['./lightbox.gallery.component.css'],
|
||||
templateUrl: './lightbox.gallery.component.html'
|
||||
})
|
||||
export class GalleryLightboxComponent implements OnDestroy {
|
||||
export class GalleryLightboxComponent implements OnDestroy, OnInit {
|
||||
|
||||
|
||||
@Output('onLastElement') onLastElement = new EventEmitter();
|
||||
@ -32,13 +45,16 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
private changeSubscription: Subscription = null;
|
||||
private timer: Observable<number>;
|
||||
private timerSub: Subscription;
|
||||
public playBackState: number = 0;
|
||||
public playBackState = 0;
|
||||
public controllersDimmed = true;
|
||||
public controllersVisible = true;
|
||||
|
||||
public infoPanelVisible = false;
|
||||
public infoPanelWidth = 0;
|
||||
public animating = false;
|
||||
startPhotoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
||||
iPvisibilityTimer = null;
|
||||
visibilityTimer = null;
|
||||
|
||||
|
||||
constructor(public fullScreenService: FullScreenService,
|
||||
@ -47,7 +63,7 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.timer = Observable.timer(1000, 2000);
|
||||
this.timer = timer(1000, 2000);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@ -77,7 +93,7 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
if (this.activePhotoId + 1 < this.gridPhotoQL.length) {
|
||||
this.showPhoto(this.activePhotoId + 1);
|
||||
if (this.activePhotoId + 3 >= this.gridPhotoQL.length) {
|
||||
this.onLastElement.emit({}); //trigger to render more photos if there are
|
||||
this.onLastElement.emit({}); // trigger to render more photos if there are
|
||||
}
|
||||
return;
|
||||
}
|
||||
@ -102,7 +118,7 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
this.controllersVisible = true;
|
||||
this.showControls();
|
||||
this.visible = true;
|
||||
let selectedPhoto = this.findPhotoComponent(photo);
|
||||
const selectedPhoto = this.findPhotoComponent(photo);
|
||||
if (selectedPhoto === null) {
|
||||
throw new Error('Can\'t find Photo');
|
||||
}
|
||||
@ -125,37 +141,34 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
|
||||
this.blackCanvasOpacity = 0;
|
||||
this.startPhotoDimension = selectedPhoto.getDimension();
|
||||
//disable scroll
|
||||
// disable scroll
|
||||
this.overlayService.showOverlay();
|
||||
this.blackCanvasOpacity = 1.0;
|
||||
this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
|
||||
}
|
||||
|
||||
startPhotoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
||||
|
||||
private updateActivePhoto(photoIndex: number, resize: boolean = true) {
|
||||
let pcList = this.gridPhotoQL.toArray();
|
||||
|
||||
|
||||
if (photoIndex < 0 || photoIndex > this.gridPhotoQL.length) {
|
||||
throw new Error('Can\'t find the photo');
|
||||
//noinspection JSUnusedGlobalSymbols
|
||||
@HostListener('window:keydown', ['$event'])
|
||||
onKeyPress(e: KeyboardEvent) {
|
||||
if (this.visible !== true) {
|
||||
return;
|
||||
}
|
||||
this.activePhotoId = photoIndex;
|
||||
this.activePhoto = pcList[photoIndex];
|
||||
|
||||
if (resize) {
|
||||
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo));
|
||||
const event: KeyboardEvent = window.event ? <any>window.event : e;
|
||||
switch (event.keyCode) {
|
||||
case 37:
|
||||
if (this.activePhotoId > 0) {
|
||||
this.prevImage();
|
||||
}
|
||||
break;
|
||||
case 39:
|
||||
if (this.activePhotoId < this.gridPhotoQL.length - 1) {
|
||||
this.nextImage();
|
||||
}
|
||||
break;
|
||||
case 27: // escape
|
||||
this.hide();
|
||||
break;
|
||||
}
|
||||
this.navigation.hasPrev = photoIndex > 0;
|
||||
this.navigation.hasNext = photoIndex + 1 < pcList.length;
|
||||
|
||||
let to = this.activePhoto.getDimension();
|
||||
|
||||
//if target image out of screen -> scroll to there
|
||||
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getPhotoFrameHeight() < to.top) {
|
||||
this.setBodyScrollTop(to.top);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public hide() {
|
||||
@ -228,46 +241,10 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private findPhotoComponent(photo: any): GalleryPhotoComponent {
|
||||
let galleryPhotoComponents = this.gridPhotoQL.toArray();
|
||||
for (let i = 0; i < galleryPhotoComponents.length; i++) {
|
||||
if (galleryPhotoComponents[i].gridPhoto.photo == photo) {
|
||||
return galleryPhotoComponents[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
//noinspection JSUnusedGlobalSymbols
|
||||
@HostListener('window:keydown', ['$event'])
|
||||
onKeyPress(e: KeyboardEvent) {
|
||||
if (this.visible != true) {
|
||||
return;
|
||||
}
|
||||
let event: KeyboardEvent = window.event ? <any>window.event : e;
|
||||
switch (event.keyCode) {
|
||||
case 37:
|
||||
if (this.activePhotoId > 0) {
|
||||
this.prevImage();
|
||||
}
|
||||
break;
|
||||
case 39:
|
||||
if (this.activePhotoId < this.gridPhotoQL.length - 1) {
|
||||
this.nextImage();
|
||||
}
|
||||
break;
|
||||
case 27: //escape
|
||||
this.hide();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
iPvisibilityTimer = null;
|
||||
|
||||
public toggleInfoPanel() {
|
||||
|
||||
|
||||
if (this.infoPanelWidth != 400) {
|
||||
if (this.infoPanelWidth !== 400) {
|
||||
this.showInfoPanel();
|
||||
} else {
|
||||
this.hideInfoPanel();
|
||||
@ -275,6 +252,49 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
|
||||
}
|
||||
|
||||
hideInfoPanel(_animate: boolean = true) {
|
||||
this.iPvisibilityTimer = setTimeout(() => {
|
||||
this.iPvisibilityTimer = null;
|
||||
this.infoPanelVisible = false;
|
||||
}, 1000);
|
||||
|
||||
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
|
||||
this.infoPanelWidth = 0;
|
||||
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
|
||||
if (_animate) {
|
||||
this.animatePhoto(starPhotoPos, endPhotoPos);
|
||||
}
|
||||
if (_animate) {
|
||||
this.animateLightbox(<Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getPhotoFrameWidth() - 400,
|
||||
height: this.getPhotoFrameHeight()
|
||||
},
|
||||
<Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getPhotoFrameWidth(),
|
||||
height: this.getPhotoFrameHeight()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public play() {
|
||||
this.pause();
|
||||
this.timerSub = this.timer.pipe(filter(t => t % 2 === 0)).subscribe(() => {
|
||||
if (this.photoElement.imageLoadFinished === false) {
|
||||
return;
|
||||
}
|
||||
if (this.navigation.hasNext) {
|
||||
this.nextImage();
|
||||
} else {
|
||||
this.showPhoto(0);
|
||||
}
|
||||
});
|
||||
this.playBackState = 1;
|
||||
}
|
||||
|
||||
showInfoPanel() {
|
||||
this.infoPanelVisible = true;
|
||||
|
||||
@ -299,32 +319,19 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
hideInfoPanel(animate: boolean = true) {
|
||||
this.iPvisibilityTimer = setTimeout(() => {
|
||||
this.iPvisibilityTimer = null;
|
||||
this.infoPanelVisible = false;
|
||||
}, 1000);
|
||||
|
||||
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
|
||||
this.infoPanelWidth = 0;
|
||||
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
|
||||
if (animate) {
|
||||
this.animatePhoto(starPhotoPos, endPhotoPos);
|
||||
}
|
||||
if (animate) {
|
||||
this.animateLightbox(<Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getPhotoFrameWidth() - 400,
|
||||
height: this.getPhotoFrameHeight()
|
||||
},
|
||||
<Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getPhotoFrameWidth(),
|
||||
height: this.getPhotoFrameHeight()
|
||||
});
|
||||
}
|
||||
public fastForward() {
|
||||
this.pause();
|
||||
this.timerSub = this.timer.subscribe(() => {
|
||||
if (this.photoElement.imageLoadFinished === false) {
|
||||
return;
|
||||
}
|
||||
if (this.navigation.hasNext) {
|
||||
this.nextImage();
|
||||
} else {
|
||||
this.showPhoto(0);
|
||||
}
|
||||
});
|
||||
this.playBackState = 2;
|
||||
}
|
||||
|
||||
|
||||
@ -344,26 +351,31 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
private updateActivePhoto(photoIndex: number, resize: boolean = true) {
|
||||
const pcList = this.gridPhotoQL.toArray();
|
||||
|
||||
private calcLightBoxPhotoDimension(photo: PhotoDTO): Dimension {
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
const photoAspect = photo.metadata.size.width / photo.metadata.size.height;
|
||||
const windowAspect = this.getPhotoFrameWidth() / this.getPhotoFrameHeight();
|
||||
if (photoAspect < windowAspect) {
|
||||
width = Math.round(photo.metadata.size.width * (this.getPhotoFrameHeight() / photo.metadata.size.height));
|
||||
height = this.getPhotoFrameHeight();
|
||||
} else {
|
||||
width = this.getPhotoFrameWidth();
|
||||
height = Math.round(photo.metadata.size.height * (this.getPhotoFrameWidth() / photo.metadata.size.width));
|
||||
|
||||
if (photoIndex < 0 || photoIndex > this.gridPhotoQL.length) {
|
||||
throw new Error('Can\'t find the photo');
|
||||
}
|
||||
this.activePhotoId = photoIndex;
|
||||
this.activePhoto = pcList[photoIndex];
|
||||
|
||||
if (resize) {
|
||||
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo));
|
||||
}
|
||||
this.navigation.hasPrev = photoIndex > 0;
|
||||
this.navigation.hasNext = photoIndex + 1 < pcList.length;
|
||||
|
||||
const to = this.activePhoto.getDimension();
|
||||
|
||||
// if target image out of screen -> scroll to there
|
||||
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getPhotoFrameHeight() < to.top) {
|
||||
this.setBodyScrollTop(to.top);
|
||||
}
|
||||
let top = (this.getPhotoFrameHeight() / 2 - height / 2);
|
||||
let left = (this.getPhotoFrameWidth() / 2 - width / 2);
|
||||
|
||||
return <Dimension>{top: top, left: left, width: width, height: height};
|
||||
}
|
||||
|
||||
visibilityTimer = null;
|
||||
|
||||
@HostListener('mousemove')
|
||||
onMousemove() {
|
||||
@ -391,34 +403,32 @@ export class GalleryLightboxComponent implements OnDestroy {
|
||||
this.playBackState = 0;
|
||||
}
|
||||
|
||||
public play() {
|
||||
this.pause();
|
||||
this.timerSub = this.timer.filter(t => t % 2 == 0).subscribe(() => {
|
||||
if (this.photoElement.imageLoadFinished == false) {
|
||||
return;
|
||||
private findPhotoComponent(photo: any): GalleryPhotoComponent {
|
||||
const galleryPhotoComponents = this.gridPhotoQL.toArray();
|
||||
for (let i = 0; i < galleryPhotoComponents.length; i++) {
|
||||
if (galleryPhotoComponents[i].gridPhoto.photo === photo) {
|
||||
return galleryPhotoComponents[i];
|
||||
}
|
||||
if (this.navigation.hasNext) {
|
||||
this.nextImage();
|
||||
} else {
|
||||
this.showPhoto(0);
|
||||
}
|
||||
});
|
||||
this.playBackState = 1;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public fastForward() {
|
||||
this.pause();
|
||||
this.timerSub = this.timer.subscribe(() => {
|
||||
if (this.photoElement.imageLoadFinished == false) {
|
||||
return;
|
||||
}
|
||||
if (this.navigation.hasNext) {
|
||||
this.nextImage();
|
||||
} else {
|
||||
this.showPhoto(0);
|
||||
}
|
||||
});
|
||||
this.playBackState = 2;
|
||||
private calcLightBoxPhotoDimension(photo: PhotoDTO): Dimension {
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
const photoAspect = photo.metadata.size.width / photo.metadata.size.height;
|
||||
const windowAspect = this.getPhotoFrameWidth() / this.getPhotoFrameHeight();
|
||||
if (photoAspect < windowAspect) {
|
||||
width = Math.round(photo.metadata.size.width * (this.getPhotoFrameHeight() / photo.metadata.size.height));
|
||||
height = this.getPhotoFrameHeight();
|
||||
} else {
|
||||
width = this.getPhotoFrameWidth();
|
||||
height = Math.round(photo.metadata.size.height * (this.getPhotoFrameWidth() / photo.metadata.size.width));
|
||||
}
|
||||
const top = (this.getPhotoFrameHeight() / 2 - height / 2);
|
||||
const left = (this.getPhotoFrameWidth() / 2 - width / 2);
|
||||
|
||||
return <Dimension>{top: top, left: left, width: width, height: height};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
.imgContainer img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
justify-content: center; /* add to align horizontal */
|
||||
align-items: center; /* add to align vertical */
|
||||
}
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ import {GridPhoto} from '../../grid/GridPhoto';
|
||||
export class GalleryLightboxPhotoComponent implements OnChanges {
|
||||
|
||||
@Input() gridPhoto: GridPhoto;
|
||||
@Input() loadImage: boolean = false;
|
||||
@Input() windowAspect: number = 1;
|
||||
@Input() loadImage = false;
|
||||
@Input() windowAspect = 1;
|
||||
|
||||
public imageSize = {width: 'auto', height: '100'};
|
||||
|
||||
imageLoaded: boolean = false;
|
||||
public imageLoadFinished: boolean = false;
|
||||
imageLoaded = false;
|
||||
public imageLoadFinished = false;
|
||||
|
||||
constructor(public elementRef: ElementRef) {
|
||||
}
|
||||
@ -28,7 +28,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
|
||||
}
|
||||
|
||||
onImageError() {
|
||||
//TODO:handle error
|
||||
// TODO:handle error
|
||||
this.imageLoadFinished = true;
|
||||
console.error('cant load image');
|
||||
}
|
||||
@ -40,16 +40,18 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
|
||||
}
|
||||
|
||||
public thumbnailPath(): string {
|
||||
if (this.gridPhoto.isThumbnailAvailable() === true)
|
||||
if (this.gridPhoto.isThumbnailAvailable() === true) {
|
||||
return this.gridPhoto.getThumbnailPath();
|
||||
}
|
||||
|
||||
if (this.gridPhoto.isReplacementThumbnailAvailable() === true)
|
||||
if (this.gridPhoto.isReplacementThumbnailAvailable() === true) {
|
||||
return this.gridPhoto.getReplacementThumbnailPath();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public showThumbnail(): boolean {
|
||||
return this.gridPhoto && !this.imageLoaded &&
|
||||
return this.gridPhoto /*&& !this.imageLoaded*/ &&
|
||||
(this.gridPhoto.isThumbnailAvailable() || this.gridPhoto.isReplacementThumbnailAvailable());
|
||||
}
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@ export class AuthenticationService {
|
||||
private _networkService: NetworkService) {
|
||||
this.user = new BehaviorSubject(null);
|
||||
|
||||
//picking up session..
|
||||
if (this.isAuthenticated() == false && Cookie.get(CookieNames.session) != null) {
|
||||
// picking up session..
|
||||
if (this.isAuthenticated() === false && Cookie.get(CookieNames.session) != null) {
|
||||
if (typeof ServerInject !== 'undefined' && typeof ServerInject.user !== 'undefined') {
|
||||
this.user.next(ServerInject.user);
|
||||
}
|
||||
@ -35,11 +35,11 @@ export class AuthenticationService {
|
||||
}
|
||||
|
||||
_networkService.addGlobalErrorHandler((error: ErrorDTO) => {
|
||||
if (error.code == ErrorCodes.NOT_AUTHENTICATED) {
|
||||
if (error.code === ErrorCodes.NOT_AUTHENTICATED) {
|
||||
this.user.next(null);
|
||||
return true;
|
||||
}
|
||||
if (error.code == ErrorCodes.NOT_AUTHORISED) {
|
||||
if (error.code === ErrorCodes.NOT_AUTHORISED) {
|
||||
this.logout();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ export class NotificationService {
|
||||
this._authService.user.subscribe(() => {
|
||||
if (this._authService.isAuthenticated() &&
|
||||
(!this.lastUser ||
|
||||
this.lastUser.id != this._authService.user.value.id) &&
|
||||
this.lastUser.id !== this._authService.user.value.id) &&
|
||||
this._authService.user.value.role >= UserRoles.Guest) {
|
||||
this.getServerNotifications();
|
||||
}
|
||||
|
||||
@ -10,21 +10,21 @@ import {IPrivateConfig} from '../../../../common/config/private/IPrivateConfig';
|
||||
import {I18n} from '@ngx-translate/i18n-polyfill';
|
||||
|
||||
|
||||
export abstract class SettingsComponent<T, S extends AbstractSettingsService<T>=AbstractSettingsService<T>>
|
||||
export abstract class SettingsComponent<T, S extends AbstractSettingsService<T>= AbstractSettingsService<T>>
|
||||
implements OnInit, OnDestroy, OnChanges {
|
||||
|
||||
@Input()
|
||||
public simplifiedMode: boolean = true;
|
||||
public simplifiedMode = true;
|
||||
|
||||
@ViewChild('settingsForm')
|
||||
form: HTMLFormElement;
|
||||
|
||||
@Output('hasAvailableSettings')
|
||||
hasAvailableSettings: boolean = true;
|
||||
hasAvailableSettings = true;
|
||||
|
||||
public inProgress = false;
|
||||
public error: string = null;
|
||||
public changed: boolean = false;
|
||||
public changed = false;
|
||||
private _subscription = null;
|
||||
private _settingsSubscription = null;
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {IndexingSettingsService} from './indexing.settings.service';
|
||||
import {AuthenticationService} from '../../model/network/authentication.service';
|
||||
import {NavigationService} from '../../model/navigation.service';
|
||||
import {NotificationService} from '../../model/notification.service';
|
||||
import {ErrorDTO} from '../../../../common/entities/Error';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import {interval} from 'rxjs/observable/interval';
|
||||
import {IndexingConfig, ReIndexingSensitivity} from '../../../../common/config/private/IPrivateConfig';
|
||||
import {SettingsComponent} from '../_abstract/abstract.settings.component';
|
||||
import {Utils} from '../../../../common/Utils';
|
||||
@ -17,7 +18,8 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
|
||||
'./../_abstract/abstract.settings.component.css'],
|
||||
providers: [IndexingSettingsService],
|
||||
})
|
||||
export class IndexingSettingsComponent extends SettingsComponent<IndexingConfig, IndexingSettingsService> {
|
||||
export class IndexingSettingsComponent extends SettingsComponent<IndexingConfig, IndexingSettingsService>
|
||||
implements OnInit, OnDestroy {
|
||||
|
||||
|
||||
types: Array<any> = [];
|
||||
@ -37,7 +39,7 @@ export class IndexingSettingsComponent extends SettingsComponent<IndexingConfig,
|
||||
}
|
||||
if ((<IndexingSettingsService>this._settingsService).progress.value != null && this.subscription.timer == null) {
|
||||
if (!this.$counter) {
|
||||
this.$counter = Observable.interval(5000);
|
||||
this.$counter = interval(5000);
|
||||
}
|
||||
this.subscription.timer = this.$counter.subscribe((x) => this.updateProgress());
|
||||
}
|
||||
@ -54,7 +56,13 @@ export class IndexingSettingsComponent extends SettingsComponent<IndexingConfig,
|
||||
notification: NotificationService,
|
||||
i18n: I18n) {
|
||||
|
||||
super(i18n('Indexing'), _authService, _navigation, <any>_settingsService, notification, i18n, s => s.Server.indexing);
|
||||
super(i18n('Indexing'),
|
||||
_authService,
|
||||
_navigation,
|
||||
<any>_settingsService,
|
||||
notification,
|
||||
i18n,
|
||||
s => s.Server.indexing);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ export class IndexingSettingsService extends AbstractSettingsService<IndexingCon
|
||||
|
||||
|
||||
public isSupported(): boolean {
|
||||
return this._settingsService.settings.value.Server.database.type != DatabaseType.memory;
|
||||
return this._settingsService.settings.value.Server.database.type !== DatabaseType.memory;
|
||||
}
|
||||
|
||||
public index() {
|
||||
|
||||
13
gulpfile.js
13
gulpfile.js
@ -30,12 +30,17 @@ var createFrontendTask = function (type, script) {
|
||||
gulp.task('build-frontend', function (done) {
|
||||
var languages = getLanguages();
|
||||
var tasks = [];
|
||||
createFrontendTask('build-frontend-release default', "ng build --aot -prod --output-path=./release/dist --no-progress --locale=en" +
|
||||
" --i18n-format xlf --i18n-file frontend/" + translationFolder + "/messages.en.xlf" + " --missing-translation warning");
|
||||
createFrontendTask('build-frontend-release default',
|
||||
"ng build --aot -prod --output-path=./release/dist --no-progress --locale=en" +
|
||||
" --i18n-format xlf --i18n-file frontend/" + translationFolder + "/messages.en.xlf" +
|
||||
" --missing-translation warning");
|
||||
tasks.push('build-frontend-release default');
|
||||
for (var i = 0; i < languages.length; i++) {
|
||||
createFrontendTask('build-frontend-release ' + languages[i], "ng build --aot -prod --output-path=./release/dist/" + languages[i] + " --no-progress --locale=" + languages[i] +
|
||||
" --i18n-format xlf --i18n-file frontend/" + translationFolder + "/messages." + languages[i] + ".xlf" + " --missing-translation warning");
|
||||
createFrontendTask('build-frontend-release ' + languages[i],
|
||||
"ng build --aot -prod --output-path=./release/dist/" + languages[i] +
|
||||
" --no-progress --locale=" + languages[i] +
|
||||
" --i18n-format xlf --i18n-file frontend/" + translationFolder + "/messages." + languages[i] + ".xlf" +
|
||||
" --missing-translation warning");
|
||||
tasks.push('build-frontend-release ' + languages[i]);
|
||||
}
|
||||
tasks.push(function () {
|
||||
|
||||
66
package.json
66
package.json
@ -32,7 +32,7 @@
|
||||
"body-parser": "1.18.2",
|
||||
"cookie-parser": "^1.4.3",
|
||||
"cookie-session": "2.0.0-beta.3",
|
||||
"ejs": "2.5.8",
|
||||
"ejs": "2.5.9",
|
||||
"express": "4.16.3",
|
||||
"jimp": "0.2.28",
|
||||
"locale": "0.1.0",
|
||||
@ -42,38 +42,38 @@
|
||||
"ts-exif-parser": "0.1.23",
|
||||
"ts-node-iptc": "1.0.9",
|
||||
"typeconfig": "1.0.6",
|
||||
"typeorm": "0.1.19",
|
||||
"winston": "2.4.1"
|
||||
"typeorm": "0.2.4",
|
||||
"winston": "2.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@agm/core": "^1.0.0-beta.2",
|
||||
"@angular/animations": "^5.2.9",
|
||||
"@angular/cli": "1.7.3",
|
||||
"@angular/common": "~5.2.9",
|
||||
"@angular/compiler": "~5.2.9",
|
||||
"@angular/compiler-cli": "^5.2.9",
|
||||
"@angular/core": "~5.2.9",
|
||||
"@angular/forms": "~5.2.9",
|
||||
"@angular/http": "~5.2.9",
|
||||
"@angular/language-service": "^5.2.9",
|
||||
"@angular/platform-browser": "~5.2.9",
|
||||
"@angular/platform-browser-dynamic": "~5.2.9",
|
||||
"@angular/router": "~5.2.9",
|
||||
"@ngx-translate/i18n-polyfill": "^0.1.2",
|
||||
"@angular/animations": "^5.2.10",
|
||||
"@angular/cli": "1.7.4",
|
||||
"@angular/common": "~5.2.10",
|
||||
"@angular/compiler": "~5.2.10",
|
||||
"@angular/compiler-cli": "^5.2.10",
|
||||
"@angular/core": "~5.2.10",
|
||||
"@angular/forms": "~5.2.10",
|
||||
"@angular/http": "~5.2.10",
|
||||
"@angular/language-service": "^5.2.10",
|
||||
"@angular/platform-browser": "~5.2.10",
|
||||
"@angular/platform-browser-dynamic": "~5.2.10",
|
||||
"@angular/router": "~5.2.10",
|
||||
"@ngx-translate/i18n-polyfill": "^0.1.3",
|
||||
"@types/bcryptjs": "^2.4.1",
|
||||
"@types/chai": "^4.1.2",
|
||||
"@types/chai": "^4.1.3",
|
||||
"@types/cookie-session": "^2.0.34",
|
||||
"@types/express": "^4.11.1",
|
||||
"@types/gm": "^1.17.33",
|
||||
"@types/jasmine": "^2.8.6",
|
||||
"@types/jimp": "^0.2.28",
|
||||
"@types/node": "^9.6.1",
|
||||
"@types/sharp": "^0.17.7",
|
||||
"@types/winston": "^2.3.8",
|
||||
"@types/node": "^10.0.3",
|
||||
"@types/sharp": "^0.17.8",
|
||||
"@types/winston": "^2.3.9",
|
||||
"bootstrap": "3.3.7",
|
||||
"chai": "^4.1.2",
|
||||
"codelyzer": "~4.2.1",
|
||||
"core-js": "^2.5.4",
|
||||
"codelyzer": "~4.3.0",
|
||||
"core-js": "^2.5.5",
|
||||
"ejs-loader": "^0.3.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-json-modify": "^1.0.2",
|
||||
@ -84,38 +84,38 @@
|
||||
"jasmine-core": "^3.1.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"jw-bootstrap-switch-ng2": "1.0.10",
|
||||
"karma": "^2.0.0",
|
||||
"karma": "^2.0.2",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-cli": "^1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.4.2",
|
||||
"karma-jasmine": "^1.1.1",
|
||||
"karma-jasmine": "^1.1.2",
|
||||
"karma-jasmine-html-reporter": "^1.0.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-remap-istanbul": "^0.6.0",
|
||||
"karma-systemjs": "^0.16.0",
|
||||
"merge2": "^1.2.1",
|
||||
"mocha": "^5.0.5",
|
||||
"mocha": "^5.1.1",
|
||||
"ng2-cookies": "^1.0.12",
|
||||
"ng2-slim-loading-bar": "^4.0.0",
|
||||
"ng2-toastr": "^4.1.2",
|
||||
"ngx-bootstrap": "^2.0.3",
|
||||
"ngx-bootstrap": "^2.0.4",
|
||||
"ngx-clipboard": "^10.0.0",
|
||||
"protractor": "^5.3.0",
|
||||
"remap-istanbul": "^0.11.0",
|
||||
"protractor": "^5.3.1",
|
||||
"remap-istanbul": "^0.11.1",
|
||||
"rimraf": "^2.6.2",
|
||||
"run-sequence": "^2.2.1",
|
||||
"rxjs": "^5.5.8",
|
||||
"rxjs": "5.5.8",
|
||||
"ts-helpers": "^1.1.2",
|
||||
"ts-node": "~5.0.1",
|
||||
"ts-node": "~6.0.2",
|
||||
"tslint": "^5.9.1",
|
||||
"typescript": "^2.8.1",
|
||||
"typescript": "^2.8.3",
|
||||
"xlf-google-translate": "^1.0.0-beta.8",
|
||||
"zone.js": "git://github.com/JiaLiPassion/zone.js#jasmine-dist"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"bcrypt": "^1.0.3",
|
||||
"bcrypt": "^2.0.1",
|
||||
"gm": "^1.23.1",
|
||||
"sharp": "^0.20.1"
|
||||
"sharp": "^0.20.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.9"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user