From 88a2460d48135a973b1c8ee6b86124afa08cc61f Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sat, 20 Jul 2019 00:29:16 +0200
Subject: [PATCH] performance improvements

---
 .../gallery/grid/grid.gallery.component.html  |  2 +-
 .../photo/photo.grid.gallery.component.css    | 42 +++++++++--
 .../photo/photo.grid.gallery.component.html   | 16 ++---
 .../photo/photo.grid.gallery.component.ts     | 69 +++++--------------
 .../controls.lightbox.gallery.component.html  | 22 +++---
 .../controls.lightbox.gallery.component.ts    | 24 +++----
 .../lightbox/lightbox.gallery.component.html  |  6 +-
 .../lightbox/lightbox.gallery.component.ts    | 30 ++++----
 8 files changed, 105 insertions(+), 106 deletions(-)

diff --git a/frontend/app/ui/gallery/grid/grid.gallery.component.html b/frontend/app/ui/gallery/grid/grid.gallery.component.html
index e096580..da8e4c6 100644
--- a/frontend/app/ui/gallery/grid/grid.gallery.component.html
+++ b/frontend/app/ui/gallery/grid/grid.gallery.component.html
@@ -2,7 +2,7 @@
   <app-gallery-grid-photo
     *ngFor="let gridPhoto of photosToRender"
     (click)="photoClicked(gridPhoto.media)"
-    [gridPhoto]="gridPhoto"
+    [gridMedia]="gridPhoto"
     [style.width.px]="gridPhoto.renderWidth"
     [style.height.px]="gridPhoto.renderHeight"
     [style.marginLeft.px]="IMAGE_MARGIN"
diff --git a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
index ea791be..680f094 100644
--- a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
+++ b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
@@ -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 {
+  animation: hide-info .3s forwards;
+  transform: translateY(0);
   background-color: transparent;
   color: white;
   font-size: medium;
@@ -58,11 +88,11 @@ img {
   padding: 5px;
   margin-top: 0;
 
-  transition: margin .3s ease-out, background-color .3s ease-out;
-  -moz-transition: margin .3s ease-out, background-color .3s ease-out;
-  -webkit-transition: margin .3s ease-out, background-color .3s ease-out;
-  -o-transition: margin .3s ease-out, background-color .3s ease-out;
-  -ms-transition: margin .3s ease-out, background-color .3s ease-out;
+  transition: transform .3s ease-out, background-color .3s ease-out;
+  -moz-transition: transform .3s ease-out, background-color .3s ease-out;
+  -webkit-transition: transform .3s ease-out, background-color .3s ease-out;
+  -o-transition: transform .3s ease-out, background-color .3s ease-out;
+  -ms-transition: transform .3s ease-out, background-color .3s ease-out;
 }
 
 .photo-container {
@@ -112,6 +142,6 @@ a {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
-.photo-keywords .oi-person{
+.photo-keywords .oi-person {
   margin-right: 2px;
 }
diff --git a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
index d842117..8138379 100644
--- a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
+++ b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
@@ -1,7 +1,7 @@
 <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">
 
   <app-gallery-grid-photo-loading
@@ -11,21 +11,19 @@
   </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.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 -->
-  <div #info class="info"
-       *ngIf="infoBar.visible"
-       [style.margin-top.px]="infoBar.marginTop"
-       [style.background]="infoBar.background"
+  <div class="info"
+       *ngIf="infoBarVisible"
        [style.width.px]="container.nativeElement.offsetWidth">
     <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>
       <ng-template [ngIf]="getPositionText()">
         <a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
@@ -47,7 +45,7 @@
           <ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
        --><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
        -->{{keyword.value}}</span>
-        <ng-template [ngIf]="!last">,</ng-template>
+        <ng-template [ngIf]="!last">,&#160;</ng-template>
       </ng-template>
 
     </div>
diff --git a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
index caec2a0..ffb9a25 100644
--- a/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
+++ b/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
@@ -15,18 +15,13 @@ import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDT
   providers: [RouterLink]
 })
 export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
-  @Input() gridPhoto: GridMedia;
+  @Input() gridMedia: GridMedia;
   @ViewChild('img', {static: false}) imageRef: ElementRef;
-  @ViewChild('info', {static: false}) infoDiv: ElementRef;
   @ViewChild('photoContainer', {static: true}) container: ElementRef;
 
   thumbnail: Thumbnail;
   keywords: { value: string, type: SearchTypes }[] = null;
-  infoBar = {
-    marginTop: 0,
-    visible: false,
-    background: 'rgba(0,0,0,0.0)'
-  };
+  infoBarVisible = false;
   animationTimer: number = null;
 
   readonly SearchTypes: typeof SearchTypes;
@@ -46,20 +41,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
 
   get Title(): string {
     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.gridPhoto.media).metadata.caption.length > 20) {
-        return (<PhotoDTO>this.gridPhoto.media).metadata.caption.substring(0, 17) + '...';
+    if ((<PhotoDTO>this.gridMedia.media).metadata.caption) {
+      if ((<PhotoDTO>this.gridMedia.media).metadata.caption.length > 20) {
+        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() {
-    this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto);
-    const metadata = this.gridPhoto.media.metadata as PhotoMetadata;
+    this.thumbnail = this.thumbnailService.getThumbnail(this.gridMedia);
+    const metadata = this.gridMedia.media.metadata as PhotoMetadata;
     if ((metadata.keywords && metadata.keywords.length > 0) ||
       (metadata.faces && metadata.faces.length > 0)) {
       const names: string[] = (metadata.faces || []).map(f => f.name);
@@ -95,34 +90,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   }
 
   getPositionText(): string {
-    if (!this.gridPhoto || !this.gridPhoto.isPhoto()) {
+    if (!this.gridMedia || !this.gridMedia.isPhoto()) {
       return '';
     }
-    return (<PhotoDTO>this.gridPhoto.media).metadata.positionData.city ||
-      (<PhotoDTO>this.gridPhoto.media).metadata.positionData.state ||
-      (<PhotoDTO>this.gridPhoto.media).metadata.positionData.country;
+    return (<PhotoDTO>this.gridMedia.media).metadata.positionData.city ||
+      (<PhotoDTO>this.gridMedia.media).metadata.positionData.state ||
+      (<PhotoDTO>this.gridMedia.media).metadata.positionData.country;
   }
 
   mouseOver() {
-    this.infoBar.visible = true;
+    this.infoBarVisible = true;
     if (this.animationTimer != null) {
       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() {
@@ -130,23 +111,11 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
       clearTimeout(this.animationTimer);
     }
     this.animationTimer = window.setTimeout(() => {
-      this.infoBar.marginTop = 0;
-      this.infoBar.background = 'rgba(0,0,0,0.0)';
-      if (this.animationTimer != null) {
-        clearTimeout(this.animationTimer);
-      }
-      this.animationTimer = window.setTimeout(() => {
-        this.infoBar.visible = false;
-      }, 500);
-    }, 100);
-
+      this.animationTimer = null;
+      this.infoBarVisible = false;
+    }, 500);
   }
 
-  /*
-   onImageLoad() {
-   this.loading.show = false;
-   }
-   */
   public getDimension(): Dimension {
     if (!this.imageRef) {
       return <Dimension>{
diff --git a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
index 71e6972..1c21bd8 100644
--- a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
+++ b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
@@ -1,12 +1,12 @@
 <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>
   <div class="controls-caption" *ngIf="Title">{{Title}}</div>
   <div class="controls controls-top">
     <a class="highlight control-button"
        *ngIf="activePhoto"
-       [href]="activePhoto.gridPhoto.getPhotoPath()"
-       [download]="activePhoto.gridPhoto.media.name">
+       [href]="activePhoto.gridMedia.getPhotoPath()"
+       [download]="activePhoto.gridMedia.media.name">
         <span class="oi oi-data-transfer-download"
               title="download" i18n-title></span>
     </a>
@@ -59,11 +59,11 @@
       <a
         class="face"
         [routerLink]="['/search', face.name, {type: SearchTypes[SearchTypes.person]}]"
-        [style.top.%]="face.box.top / activePhoto.gridPhoto.Photo.metadata.size.height*100"
-        [style.left.%]="face.box.left / activePhoto.gridPhoto.Photo.metadata.size.width*100"
-        [style.height.%]="face.box.height / activePhoto.gridPhoto.Photo.metadata.size.height*100"
-        [style.width.%]="face.box.width / activePhoto.gridPhoto.Photo.metadata.size.width*100"
-        *ngFor="let face of activePhoto.gridPhoto.Photo.metadata.faces">
+        [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
+        [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
+        [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
+        [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
+        *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
         <div class="face-box"></div>
         <span class="face-name">{{face.name}}</span>
       </a>
@@ -97,7 +97,7 @@
 
 
   <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"
             [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
             (click)="pause()"
@@ -114,11 +114,11 @@
   </div>
 
   <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>
   </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"
             [ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
             (click)="mediaElement.playPause()"></span>
diff --git a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
index f68a6e4..feeddf3 100644
--- a/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
+++ b/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
@@ -61,7 +61,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   public set Zoom(zoom: number) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     if (zoom < 1) {
@@ -86,7 +86,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     if (!this.activePhoto) {
       return null;
     }
-    return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption;
+    return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
   }
 
   public containerWidth() {
@@ -117,7 +117,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
 
   pan($event: { deltaY: number, deltaX: number, isFinal: boolean }) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     if (this.zoom === 1) {
@@ -135,7 +135,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   wheel($event: { deltaY: number }) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     if ($event.deltaY < 0) {
@@ -147,7 +147,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
   @HostListener('pinch', ['$event'])
   pinch($event: { scale: number }) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     this.showControls();
@@ -156,7 +156,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
   @HostListener('pinchend', ['$event'])
   pinchend($event: { scale: number }) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     this.showControls();
@@ -165,7 +165,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   tap($event: any) {
-    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+    if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
       return;
     }
     if ($event.tapCount < 2) {
@@ -231,7 +231,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
         this.closed.emit();
         break;
       case ' ': // space
-        if (this.activePhoto && this.activePhoto.gridPhoto.isVideo()) {
+        if (this.activePhoto && this.activePhoto.gridMedia.isVideo()) {
           this.mediaElement.playPause();
         }
         break;
@@ -246,7 +246,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
         return;
       }
       // do not skip video if its playing
-      if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() &&
+      if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
         !this.mediaElement.Paused) {
         return;
       }
@@ -262,7 +262,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
       if (this.mediaElement.imageLoadFinished === false) {
         return;
       }
-      if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() &&
+      if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
         !this.mediaElement.Paused) {
         return;
       }
@@ -308,7 +308,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
         return;
       }
 
-      const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media);
+      const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridMedia.media);
       const widthFilled = photoAspect > this.photoFrameDim.aspect;
       const divWidth = this.photoFrameDim.width;
       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) {
       this.faceContainerDim.height = this.photoFrameDim.height;
diff --git a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
index 5f32c63..0caf7c9 100644
--- a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
@@ -5,7 +5,7 @@
   </div>
 
   <div class="lightbox" #lightbox>
-    <app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridPhoto : null"
+    <app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridMedia : null"
                                 [loadMedia]="!animating"
                                 [zoom]="controls ? controls.Zoom : 1"
                                 [drag]="controls ? controls.drag : {x:0,y:0}"
@@ -13,6 +13,7 @@
                                 #photo>
     </app-gallery-lightbox-media>
     <app-lightbox-controls
+      *ngIf="isOpen()"
       #controls
       [activePhoto]="activePhoto"
       (closed)="hide()"
@@ -29,8 +30,7 @@
   <app-info-panel *ngIf="activePhoto && infoPanelVisible"
                   id="info-panel"
                   [style.width.px]="infoPanelWidth"
-                  [media]="activePhoto.gridPhoto.media"
+                  [media]="activePhoto.gridMedia.media"
                   (closed)="hideInfoPanel()">
-
   </app-info-panel>
 </div>
diff --git a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
index 6e939e4..e4cf5fc 100644
--- a/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
+++ b/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
@@ -71,7 +71,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     if (!this.activePhoto) {
       return null;
     }
-    return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption;
+    return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
   }
 
   public toggleFullscreen(): void {
@@ -117,19 +117,19 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   }
 
   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;
     }
 
     if (this.controls) {
       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) {
       return this.delayedMediaShow = photoStringId;
     }
     if (this.status === LightboxStates.Closed) {
-      this.showLigthbox(photo.gridPhoto.media);
+      this.showLigthbox(photo.gridMedia.media);
     } else {
       this.showPhoto(this.gridPhotoQL.toArray().indexOf(photo));
     }
@@ -195,7 +195,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     const lightboxDimension = selectedPhoto.getDimension();
     lightboxDimension.top -= PageHelper.ScrollY;
     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.animateLightbox(
@@ -263,13 +263,12 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     this.iPvisibilityTimer = window.setTimeout(() => {
       this.iPvisibilityTimer = null;
       this.infoPanelVisible = false;
-      // this.controls.onResize();
     }, 1000);
 
-    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
+    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
     this.infoPanelWidth = 0;
     this.updatePhotoFrameDim();
-    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
+    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
     if (_animate) {
       this.animatePhoto(starPhotoPos, endPhotoPos);
     }
@@ -297,10 +296,10 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   showInfoPanel() {
     this.infoPanelVisible = true;
 
-    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
+    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
     this.infoPanelWidth = 400;
     this.updatePhotoFrameDim();
-    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
+    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
     this.animatePhoto(starPhotoPos, endPhotoPos);
     this.animateLightbox(<Dimension>{
         top: 0,
@@ -326,6 +325,9 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   public isVisible(): boolean {
     return this.status !== LightboxStates.Closed;
   }
+  public isOpen(): boolean {
+    return this.status === LightboxStates.Open;
+  }
 
 
   private updatePhotoFrameDim = () => {
@@ -336,7 +338,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
   private navigateToPhoto(photoIndex: number) {
     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) {
@@ -362,7 +364,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     lightboxDimension.top -= PageHelper.ScrollY;
     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>{
       top: 0,
       left: 0,
@@ -391,7 +393,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     this.activePhoto = pcList[photoIndex];
 
     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.hasNext = photoIndex + 1 < pcList.length;
@@ -409,7 +411,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent {
     const galleryPhotoComponents = this.gridPhotoQL.toArray();
     for (let i = 0; i < galleryPhotoComponents.length; i++) {
-      if (galleryPhotoComponents[i].gridPhoto.media === media) {
+      if (galleryPhotoComponents[i].gridMedia.media === media) {
         return galleryPhotoComponents[i];
       }
     }