fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

performance improvements

Browse Source
This commit is contained in:
Patrik J. Braun 2019-07-20 00:29:16 +02:00
parent 4b190161fd
commit 88a2460d48
8 changed files with 105 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/ui/gallery/grid/grid.gallery.component.html
View File

@ -2,7 +2,7 @@
<app-gallery-grid-photo <app-gallery-grid-photo
*ngFor="let gridPhoto of photosToRender" *ngFor="let gridPhoto of photosToRender"
(click)="photoClicked(gridPhoto.media)" (click)="photoClicked(gridPhoto.media)"
[gridPhoto]="gridPhoto" [gridMedia]="gridPhoto"
[style.width.px]="gridPhoto.renderWidth" [style.width.px]="gridPhoto.renderWidth"
[style.height.px]="gridPhoto.renderHeight" [style.height.px]="gridPhoto.renderHeight"
[style.marginLeft.px]="IMAGE_MARGIN" [style.marginLeft.px]="IMAGE_MARGIN"

42
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
View File

@ -49,7 +49,37 @@ img {
} }
} }
.photo-container:hover .info {
animation: show-info .3s forwards;
}
@keyframes show-info {
0% {
transform: translateY(0);
background-color: transparent;
}
100% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
}
}
@keyframes hide-info {
0% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
}
100% {
transform: translateY(0);
background-color: transparent;
}
}
.info { .info {
animation: hide-info .3s forwards;
transform: translateY(0);
background-color: transparent; background-color: transparent;
color: white; color: white;
font-size: medium; font-size: medium;
@ -58,11 +88,11 @@ img {
padding: 5px; padding: 5px;
margin-top: 0; margin-top: 0;
transition: margin .3s ease-out, background-color .3s ease-out; transition: transform .3s ease-out, background-color .3s ease-out;
-moz-transition: margin .3s ease-out, background-color .3s ease-out; -moz-transition: transform .3s ease-out, background-color .3s ease-out;
-webkit-transition: margin .3s ease-out, background-color .3s ease-out; -webkit-transition: transform .3s ease-out, background-color .3s ease-out;
-o-transition: margin .3s ease-out, background-color .3s ease-out; -o-transition: transform .3s ease-out, background-color .3s ease-out;
-ms-transition: margin .3s ease-out, background-color .3s ease-out; -ms-transition: transform .3s ease-out, background-color .3s ease-out;
} }
.photo-container { .photo-container {
@ -112,6 +142,6 @@ a {
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
} }
.photo-keywords .oi-person{ .photo-keywords .oi-person {
margin-right: 2px; margin-right: 2px;
} }

16
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -1,7 +1,7 @@
<div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()"> <div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()">
<img alt="{{gridPhoto.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridPhoto.Orientation | async" <img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridMedia.Orientation | async"
*ngIf="thumbnail.Available"> *ngIf="thumbnail.Available">
<app-gallery-grid-photo-loading <app-gallery-grid-photo-loading
@ -11,21 +11,19 @@
</app-gallery-grid-photo-loading> </app-gallery-grid-photo-loading>
<div *ngIf="gridPhoto.isVideo()" class="video-indicator" <div *ngIf="gridMedia.isVideo()" class="video-indicator"
[style.marginTop.px]="-container.nativeElement.offsetHeight" [style.marginTop.px]="-container.nativeElement.offsetHeight"
[style.marginLeft.px]="container.nativeElement.offsetWidth"> [style.marginLeft.px]="container.nativeElement.offsetWidth">
{{gridPhoto.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div> {{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>
<!--Info box --> <!--Info box -->
<div #info class="info" <div class="info"
*ngIf="infoBar.visible" *ngIf="infoBarVisible"
[style.margin-top.px]="infoBar.marginTop"
[style.background]="infoBar.background"
[style.width.px]="container.nativeElement.offsetWidth"> [style.width.px]="container.nativeElement.offsetWidth">
<div class="photo-name">{{Title}}</div> <div class="photo-name">{{Title}}</div>
<div class="photo-position" *ngIf="gridPhoto.hasPositionData()"> <div class="photo-position" *ngIf="gridMedia.hasPositionData()">
<span class="oi oi-map-marker"></span> <span class="oi oi-map-marker"></span>
<ng-template [ngIf]="getPositionText()"> <ng-template [ngIf]="getPositionText()">
<a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]" <a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
@ -47,7 +45,7 @@
<ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!-- <ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
--><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!-- --><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
-->{{keyword.value}}</span> -->{{keyword.value}}</span>
<ng-template [ngIf]="!last">,</ng-template> <ng-template [ngIf]="!last">,&#160;</ng-template>
</ng-template> </ng-template>
</div> </div>

69
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -15,18 +15,13 @@ import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDT
providers: [RouterLink] providers: [RouterLink]
}) })
export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy { export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
@Input() gridPhoto: GridMedia; @Input() gridMedia: GridMedia;
@ViewChild('img', {static: false}) imageRef: ElementRef; @ViewChild('img', {static: false}) imageRef: ElementRef;
@ViewChild('info', {static: false}) infoDiv: ElementRef;
@ViewChild('photoContainer', {static: true}) container: ElementRef; @ViewChild('photoContainer', {static: true}) container: ElementRef;
thumbnail: Thumbnail; thumbnail: Thumbnail;
keywords: { value: string, type: SearchTypes }[] = null; keywords: { value: string, type: SearchTypes }[] = null;
infoBar = { infoBarVisible = false;
marginTop: 0,
visible: false,
background: 'rgba(0,0,0,0.0)'
};
animationTimer: number = null; animationTimer: number = null;
readonly SearchTypes: typeof SearchTypes; readonly SearchTypes: typeof SearchTypes;
@ -46,20 +41,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
get Title(): string { get Title(): string {
if (Config.Client.Other.captionFirstNaming === false) { if (Config.Client.Other.captionFirstNaming === false) {
return this.gridPhoto.media.name; return this.gridMedia.media.name;
} }
if ((<PhotoDTO>this.gridPhoto.media).metadata.caption) { if ((<PhotoDTO>this.gridMedia.media).metadata.caption) {
if ((<PhotoDTO>this.gridPhoto.media).metadata.caption.length > 20) { if ((<PhotoDTO>this.gridMedia.media).metadata.caption.length > 20) {
return (<PhotoDTO>this.gridPhoto.media).metadata.caption.substring(0, 17) + '...'; return (<PhotoDTO>this.gridMedia.media).metadata.caption.substring(0, 17) + '...';
} }
return (<PhotoDTO>this.gridPhoto.media).metadata.caption; return (<PhotoDTO>this.gridMedia.media).metadata.caption;
} }
return this.gridPhoto.media.name; return this.gridMedia.media.name;
} }
ngOnInit() { ngOnInit() {
this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto); this.thumbnail = this.thumbnailService.getThumbnail(this.gridMedia);
const metadata = this.gridPhoto.media.metadata as PhotoMetadata; const metadata = this.gridMedia.media.metadata as PhotoMetadata;
if ((metadata.keywords && metadata.keywords.length > 0) || if ((metadata.keywords && metadata.keywords.length > 0) ||
(metadata.faces && metadata.faces.length > 0)) { (metadata.faces && metadata.faces.length > 0)) {
const names: string[] = (metadata.faces || []).map(f => f.name); const names: string[] = (metadata.faces || []).map(f => f.name);
@ -95,34 +90,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
} }
getPositionText(): string { getPositionText(): string {
if (!this.gridPhoto || !this.gridPhoto.isPhoto()) { if (!this.gridMedia || !this.gridMedia.isPhoto()) {
return ''; return '';
} }
return (<PhotoDTO>this.gridPhoto.media).metadata.positionData.city || return (<PhotoDTO>this.gridMedia.media).metadata.positionData.city ||
(<PhotoDTO>this.gridPhoto.media).metadata.positionData.state || (<PhotoDTO>this.gridMedia.media).metadata.positionData.state ||
(<PhotoDTO>this.gridPhoto.media).metadata.positionData.country; (<PhotoDTO>this.gridMedia.media).metadata.positionData.country;
} }
mouseOver() { mouseOver() {
this.infoBar.visible = true; this.infoBarVisible = true;
if (this.animationTimer != null) { if (this.animationTimer != null) {
clearTimeout(this.animationTimer); clearTimeout(this.animationTimer);
this.animationTimer = null;
} }
this.animationTimer = window.setTimeout(() => {
this.infoBar.background = 'rgba(0,0,0,0.8)';
if (!this.infoDiv) {
this.animationTimer = window.setTimeout(() => {
if (!this.infoDiv) {
this.infoBar.marginTop = -50;
return;
}
this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
}, 10);
return;
}
this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
}, 1);
} }
mouseOut() { mouseOut() {
@ -130,23 +111,11 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
clearTimeout(this.animationTimer); clearTimeout(this.animationTimer);
} }
this.animationTimer = window.setTimeout(() => { this.animationTimer = window.setTimeout(() => {
this.infoBar.marginTop = 0; this.animationTimer = null;
this.infoBar.background = 'rgba(0,0,0,0.0)'; this.infoBarVisible = false;
if (this.animationTimer != null) { }, 500);
clearTimeout(this.animationTimer);
}
this.animationTimer = window.setTimeout(() => {
this.infoBar.visible = false;
}, 500);
}, 100);
} }
/*
onImageLoad() {
this.loading.show = false;
}
*/
public getDimension(): Dimension { public getDimension(): Dimension {
if (!this.imageRef) { if (!this.imageRef) {
return <Dimension>{ return <Dimension>{

22
frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@ -1,12 +1,12 @@
<div id="controllers-container" <div id="controllers-container"
[ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'): ''" [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridMedia.isVideo() ? 'dim-controls-video' :'dim-controls'): ''"
#root> #root>
<div class="controls-caption" *ngIf="Title">{{Title}}</div> <div class="controls-caption" *ngIf="Title">{{Title}}</div>
<div class="controls controls-top"> <div class="controls controls-top">
<a class="highlight control-button" <a class="highlight control-button"
*ngIf="activePhoto" *ngIf="activePhoto"
[href]="activePhoto.gridPhoto.getPhotoPath()" [href]="activePhoto.gridMedia.getPhotoPath()"
[download]="activePhoto.gridPhoto.media.name"> [download]="activePhoto.gridMedia.media.name">
<span class="oi oi-data-transfer-download" <span class="oi oi-data-transfer-download"
title="download" i18n-title></span> title="download" i18n-title></span>
</a> </a>
@ -59,11 +59,11 @@
<a <a
class="face" class="face"
[routerLink]="['/search', face.name, {type: SearchTypes[SearchTypes.person]}]" [routerLink]="['/search', face.name, {type: SearchTypes[SearchTypes.person]}]"
[style.top.%]="face.box.top / activePhoto.gridPhoto.Photo.metadata.size.height*100" [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.left.%]="face.box.left / activePhoto.gridPhoto.Photo.metadata.size.width*100" [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
[style.height.%]="face.box.height / activePhoto.gridPhoto.Photo.metadata.size.height*100" [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridPhoto.Photo.metadata.size.width*100" [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridPhoto.Photo.metadata.faces"> *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div> <div class="face-box"></div>
<span class="face-name">{{face.name}}</span> <span class="face-name">{{face.name}}</span>
</a> </a>
@ -97,7 +97,7 @@
<div class="controls controls-playback" <div class="controls controls-playback"
*ngIf="zoom == 1 && activePhoto && activePhoto.gridPhoto.isPhoto()"> *ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
<span class="oi oi-media-pause highlight control-button" <span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''" [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()" (click)="pause()"
@ -114,11 +114,11 @@
</div> </div>
<div class="controls controls-big-play" <div class="controls controls-big-play"
*ngIf="activePhoto && activePhoto.gridPhoto.isVideo() && mediaElement.Paused"> *ngIf="activePhoto && activePhoto.gridMedia.isVideo() && mediaElement.Paused">
<span class="oi oi-media-play"></span> <span class="oi oi-media-play"></span>
</div> </div>
<div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridPhoto.isVideo()"> <div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
<span class="oi col-1" <span class="oi col-1"
[ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'" [ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
(click)="mediaElement.playPause()"></span> (click)="mediaElement.playPause()"></span>

24
frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
View File

@ -61,7 +61,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
} }
public set Zoom(zoom: number) { public set Zoom(zoom: number) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
if (zoom < 1) { if (zoom < 1) {
@ -86,7 +86,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
if (!this.activePhoto) { if (!this.activePhoto) {
return null; return null;
} }
return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption; return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
} }
public containerWidth() { public containerWidth() {
@ -117,7 +117,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
pan($event: { deltaY: number, deltaX: number, isFinal: boolean }) { pan($event: { deltaY: number, deltaX: number, isFinal: boolean }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
if (this.zoom === 1) { if (this.zoom === 1) {
@ -135,7 +135,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
} }
wheel($event: { deltaY: number }) { wheel($event: { deltaY: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
if ($event.deltaY < 0) { if ($event.deltaY < 0) {
@ -147,7 +147,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
@HostListener('pinch', ['$event']) @HostListener('pinch', ['$event'])
pinch($event: { scale: number }) { pinch($event: { scale: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
this.showControls(); this.showControls();
@ -156,7 +156,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
@HostListener('pinchend', ['$event']) @HostListener('pinchend', ['$event'])
pinchend($event: { scale: number }) { pinchend($event: { scale: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
this.showControls(); this.showControls();
@ -165,7 +165,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
} }
tap($event: any) { tap($event: any) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return; return;
} }
if ($event.tapCount < 2) { if ($event.tapCount < 2) {
@ -231,7 +231,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
this.closed.emit(); this.closed.emit();
break; break;
case ' ': // space case ' ': // space
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo()) { if (this.activePhoto && this.activePhoto.gridMedia.isVideo()) {
this.mediaElement.playPause(); this.mediaElement.playPause();
} }
break; break;
@ -246,7 +246,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
return; return;
} }
// do not skip video if its playing // do not skip video if its playing
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() && if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
!this.mediaElement.Paused) { !this.mediaElement.Paused) {
return; return;
} }
@ -262,7 +262,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
if (this.mediaElement.imageLoadFinished === false) { if (this.mediaElement.imageLoadFinished === false) {
return; return;
} }
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() && if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
!this.mediaElement.Paused) { !this.mediaElement.Paused) {
return; return;
} }
@ -308,7 +308,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
return; return;
} }
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media); const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridMedia.media);
const widthFilled = photoAspect > this.photoFrameDim.aspect; const widthFilled = photoAspect > this.photoFrameDim.aspect;
const divWidth = this.photoFrameDim.width; const divWidth = this.photoFrameDim.width;
const divHeight = this.photoFrameDim.height; const divHeight = this.photoFrameDim.height;
@ -369,7 +369,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
} }
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media); const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridMedia.media);
if (photoAspect < this.photoFrameDim.aspect) { if (photoAspect < this.photoFrameDim.aspect) {
this.faceContainerDim.height = this.photoFrameDim.height; this.faceContainerDim.height = this.photoFrameDim.height;

6
frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
View File

@ -5,7 +5,7 @@
</div> </div>
<div class="lightbox" #lightbox> <div class="lightbox" #lightbox>
<app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridPhoto : null" <app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridMedia : null"
[loadMedia]="!animating" [loadMedia]="!animating"
[zoom]="controls ? controls.Zoom : 1" [zoom]="controls ? controls.Zoom : 1"
[drag]="controls ? controls.drag : {x:0,y:0}" [drag]="controls ? controls.drag : {x:0,y:0}"
@ -13,6 +13,7 @@
#photo> #photo>
</app-gallery-lightbox-media> </app-gallery-lightbox-media>
<app-lightbox-controls <app-lightbox-controls
*ngIf="isOpen()"
#controls #controls
[activePhoto]="activePhoto" [activePhoto]="activePhoto"
(closed)="hide()" (closed)="hide()"
@ -29,8 +30,7 @@
<app-info-panel *ngIf="activePhoto && infoPanelVisible" <app-info-panel *ngIf="activePhoto && infoPanelVisible"
id="info-panel" id="info-panel"
[style.width.px]="infoPanelWidth" [style.width.px]="infoPanelWidth"
[media]="activePhoto.gridPhoto.media" [media]="activePhoto.gridMedia.media"
(closed)="hideInfoPanel()"> (closed)="hideInfoPanel()">
</app-info-panel> </app-info-panel>
</div> </div>

30
frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -71,7 +71,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
if (!this.activePhoto) { if (!this.activePhoto) {
return null; return null;
} }
return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption; return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
} }
public toggleFullscreen(): void { public toggleFullscreen(): void {
@ -117,19 +117,19 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
} }
onNavigateTo(photoStringId: string) { onNavigateTo(photoStringId: string) {
if (this.activePhoto && this.queryService.getMediaStringId(this.activePhoto.gridPhoto.media) === photoStringId) { if (this.activePhoto && this.queryService.getMediaStringId(this.activePhoto.gridMedia.media) === photoStringId) {
return; return;
} }
if (this.controls) { if (this.controls) {
this.controls.resetZoom(); this.controls.resetZoom();
} }
const photo = this.gridPhotoQL.find(i => this.queryService.getMediaStringId(i.gridPhoto.media) === photoStringId); const photo = this.gridPhotoQL.find(i => this.queryService.getMediaStringId(i.gridMedia.media) === photoStringId);
if (!photo) { if (!photo) {
return this.delayedMediaShow = photoStringId; return this.delayedMediaShow = photoStringId;
} }
if (this.status === LightboxStates.Closed) { if (this.status === LightboxStates.Closed) {
this.showLigthbox(photo.gridPhoto.media); this.showLigthbox(photo.gridMedia.media);
} else { } else {
this.showPhoto(this.gridPhotoQL.toArray().indexOf(photo)); this.showPhoto(this.gridPhotoQL.toArray().indexOf(photo));
} }
@ -195,7 +195,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
const lightboxDimension = selectedPhoto.getDimension(); const lightboxDimension = selectedPhoto.getDimension();
lightboxDimension.top -= PageHelper.ScrollY; lightboxDimension.top -= PageHelper.ScrollY;
this.animating = true; this.animating = true;
this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridPhoto.media)).onDone(() => { this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridMedia.media)).onDone(() => {
this.animating = false; this.animating = false;
}); });
this.animateLightbox( this.animateLightbox(
@ -263,13 +263,12 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
this.iPvisibilityTimer = window.setTimeout(() => { this.iPvisibilityTimer = window.setTimeout(() => {
this.iPvisibilityTimer = null; this.iPvisibilityTimer = null;
this.infoPanelVisible = false; this.infoPanelVisible = false;
// this.controls.onResize();
}, 1000); }, 1000);
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media); const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.infoPanelWidth = 0; this.infoPanelWidth = 0;
this.updatePhotoFrameDim(); this.updatePhotoFrameDim();
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media); const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
if (_animate) { if (_animate) {
this.animatePhoto(starPhotoPos, endPhotoPos); this.animatePhoto(starPhotoPos, endPhotoPos);
} }
@ -297,10 +296,10 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
showInfoPanel() { showInfoPanel() {
this.infoPanelVisible = true; this.infoPanelVisible = true;
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media); const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.infoPanelWidth = 400; this.infoPanelWidth = 400;
this.updatePhotoFrameDim(); this.updatePhotoFrameDim();
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media); const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.animatePhoto(starPhotoPos, endPhotoPos); this.animatePhoto(starPhotoPos, endPhotoPos);
this.animateLightbox(<Dimension>{ this.animateLightbox(<Dimension>{
top: 0, top: 0,
@ -326,6 +325,9 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
public isVisible(): boolean { public isVisible(): boolean {
return this.status !== LightboxStates.Closed; return this.status !== LightboxStates.Closed;
} }
public isOpen(): boolean {
return this.status === LightboxStates.Open;
}
private updatePhotoFrameDim = () => { private updatePhotoFrameDim = () => {
@ -336,7 +338,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
private navigateToPhoto(photoIndex: number) { private navigateToPhoto(photoIndex: number) {
this.router.navigate([], this.router.navigate([],
{queryParams: this.queryService.getParams(this.gridPhotoQL.toArray()[photoIndex].gridPhoto.media)}).catch(console.error); {queryParams: this.queryService.getParams(this.gridPhotoQL.toArray()[photoIndex].gridMedia.media)}).catch(console.error);
} }
private showPhoto(photoIndex: number, resize: boolean = true) { private showPhoto(photoIndex: number, resize: boolean = true) {
@ -362,7 +364,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
lightboxDimension.top -= PageHelper.ScrollY; lightboxDimension.top -= PageHelper.ScrollY;
this.blackCanvasOpacity = 0; this.blackCanvasOpacity = 0;
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media), this.activePhoto.getDimension()); this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media), this.activePhoto.getDimension());
this.animateLightbox(<Dimension>{ this.animateLightbox(<Dimension>{
top: 0, top: 0,
left: 0, left: 0,
@ -391,7 +393,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
this.activePhoto = pcList[photoIndex]; this.activePhoto = pcList[photoIndex];
if (resize) { if (resize) {
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media)); this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media));
} }
this.navigation.hasPrev = photoIndex > 0; this.navigation.hasPrev = photoIndex > 0;
this.navigation.hasNext = photoIndex + 1 < pcList.length; this.navigation.hasNext = photoIndex + 1 < pcList.length;
@ -409,7 +411,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent { private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent {
const galleryPhotoComponents = this.gridPhotoQL.toArray(); const galleryPhotoComponents = this.gridPhotoQL.toArray();
for (let i = 0; i < galleryPhotoComponents.length; i++) { for (let i = 0; i < galleryPhotoComponents.length; i++) {
if (galleryPhotoComponents[i].gridPhoto.media === media) { if (galleryPhotoComponents[i].gridMedia.media === media) {
return galleryPhotoComponents[i]; return galleryPhotoComponents[i];
} }
} }