improving lightbox

backend/model/threading/DiskMangerWorker.ts

@@ -54,8 +54,8 @@ export class DiskMangerWorker {
               const exif = exif_parser.create(data).parse();
               metadata.cameraData = <CameraMetadata> {
                 ISO: exif.tags.ISO,
-                model: exif.tags.Modeol,
+                model: exif.tags.Model,
-                maker: exif.tags.Make,
+                make: exif.tags.Make,
                 fStop: exif.tags.FNumber,
                 exposure: exif.tags.ExposureTime,
                 focalLength: exif.tags.FocalLength,

common/entities/PhotoDTO.ts

@@ -26,7 +26,7 @@ export interface ImageSize {
 export interface CameraMetadata {
   ISO?: number;
   model?: string;
-  maker?: string;
+  make?: string;
   fStop?: number;
   exposure?: number;
   focalLength?: number;

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

@@ -26,10 +26,10 @@
     </div>
     <div class="col-sm-10">
       <div class="details-main">
-        <ng-container *ngIf="getYear() !== getCurrentYear()">
-          {{getYear()}}
-        </ng-container>
         {{getDate()}}
+        <ng-container *ngIf="getYear() !== getCurrentYear()">
+          ,{{getYear()}}
+        </ng-container>
       </div>
       <div class="details-sub">
         <div class="col-sm-12">{{getDay()}}, {{getTime()}}</div>
@@ -43,7 +43,7 @@
     </div>
     <div class="col-sm-10">
       <div class="details-main">
-        {{photo.metadata.cameraData.model || "Camera"}}
+        {{photo.metadata.cameraData.model || photo.metadata.cameraData.make || "Camera"}}
       </div>
       <div class="details-sub">
         <div class="col-sm-3" *ngIf="photo.metadata.cameraData.ISO">ISO{{photo.metadata.cameraData.ISO}}</div>
@@ -67,9 +67,8 @@
       <div class="details-main">
         {{getPositionText() || "Position"}}
       </div>
-      <div class="details-sub">
+      <div class="details-sub" *ngIf="hasGPS()">
-        <div class="col-sm-12"
+        <div class="col-sm-12">
-             *ngIf="hasGPS()">
           {{photo.metadata.positionData.GPSData.latitude.toFixed(3)}},
           {{photo.metadata.positionData.GPSData.longitude.toFixed(3)}}
         </div>

frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from "@angular/core";
+import {Component, ElementRef, Input} from "@angular/core";
 import {PhotoDTO} from "../../../../../common/entities/PhotoDTO";
 
 @Component({
@@ -10,7 +10,7 @@ export class InfoPanelLightboxComponent {
   @Input() photo: PhotoDTO;
 
 
-  constructor() {
+  constructor(public elementRef: ElementRef) {
   }
 
   calcMpx() {
@@ -40,7 +40,7 @@ export class InfoPanelLightboxComponent {
   getDate() {
     const date = new Date(this.photo.metadata.creationDate);
     let locale = "en-us";
-    return date.toLocaleString(locale, {month: "long"}) + " " + date.getDay();
+    return date.toLocaleString(locale, {month: "long"}) + " " + date.getDate();
   }
 
   getTime() {
@@ -58,7 +58,7 @@ export class InfoPanelLightboxComponent {
     if (f > 1) {
       return f;
     }
-    return "1/" + Math.ceil(((f < 1.0) ? f : (f % Math.floor(f))) * 10000)
+    return "1/" + (1 / f);
   }
 
   hasGPS() {

frontend/app/gallery/lightbox/lightbox.gallery.component.css

@@ -10,11 +10,9 @@
   justify-content: center; /* add to align horizontal */
   align-items: center; /* add to align vertical */
   cursor: pointer;
-  transition: all 0.3s ease-in-out;
 }
 
 gallery-lightbox-photo {
-  transition: all 0.3s ease-in-out;
   overflow: hidden;
 }
 
@@ -92,5 +90,7 @@ info-panel {
   position: fixed;
   height: 100vh;
   right: 0;
+  width: 0;
+  top: 0;
   transition: all 0.3s ease-in-out;
 }

frontend/app/gallery/lightbox/lightbox.gallery.component.html

@@ -4,21 +4,24 @@
        [style.opacity]="blackCanvasOpacity">
   </div>
 
-  <div class="lightbox"
+  <div class="lightbox" #lightbox>
-       [style.width.px]="lightboxDimension.width"
-       [style.height.px]="lightboxDimension.height"
-       [style.top.px]="lightboxDimension.top"
-       [style.left.px]="lightboxDimension.left">
     <gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
-                            [style.top.px]="photoDimension.top"
+                            #photo>
-                            [style.left.px]="photoDimension.left"
-                            [style.width.px]="photoDimension.width"
-                            [style.height.px]="photoDimension.height"
-                            [style.transition]="transition">
     </gallery-lightbox-photo>
   </div>
 
-
+  <!--
+  [@photoState]="{value:visible?'active':'inactive',
+                              params:{
+                              startWidth:startPhotoDimension.width,
+                              startHeight:startPhotoDimension.height,
+                              startTop:startPhotoDimension.top,
+                              startLeft:startPhotoDimension.left,
+                              endWidth:photoDimension.width,
+                              endHeight:photoDimension.height,
+                              endTop:photoDimension.top,
+                              endLeft:photoDimension.left}}"
+  -->
   <div id="controllers-container" #controls
        [style.width.px]="contentWidth">
     <div id="controls">

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -15,20 +15,21 @@ import {Dimension} from "../../model/IRenderable";
 import {FullScreenService} from "../fullscreen.service";
 import {OverlayService} from "../overlay.service";
 import {Subscription} from "rxjs";
+import {animate, AnimationBuilder, style} from "@angular/animations";
+import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.component";
 
 @Component({
   selector: 'gallery-lightbox',
   styleUrls: ['./lightbox.gallery.component.css'],
-  templateUrl: './lightbox.gallery.component.html',
+  templateUrl: './lightbox.gallery.component.html'
 })
 export class GalleryLightboxComponent implements OnDestroy {
   @Output('onLastElement') onLastElement = new EventEmitter();
   @ViewChild("root") elementRef: ElementRef;
+  @ViewChild("photo") photoElement: GalleryLightboxPhotoComponent;
+  @ViewChild("lightbox") lightboxElement: ElementRef;
 
   public navigation = {hasPrev: true, hasNext: true};
-  public photoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
-  public lightboxDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
-  public transition: string = "";
   public blackCanvasOpacity: any = 0;
 
   public activePhoto: GalleryPhotoComponent;
@@ -43,7 +44,10 @@ export class GalleryLightboxComponent implements OnDestroy {
   public contentWidth = 0;
 
 
-  constructor(public fullScreenService: FullScreenService, private changeDetector: ChangeDetectorRef, private overlayService: OverlayService) {
+  constructor(public fullScreenService: FullScreenService,
+              private changeDetector: ChangeDetectorRef, private overlayService: OverlayService,
+              private _builder: AnimationBuilder) {
+    this.contentWidth = this.getScreenWidth();
   }
 
 
@@ -57,15 +61,12 @@ export class GalleryLightboxComponent implements OnDestroy {
   @HostListener('window:resize', ['$event'])
   onResize() {
     if (this.activePhoto) {
-      this.disableAnimation();
+      this.animateLightbox();
-      this.lightboxDimension.width = this.getScreenWidth();
-      this.lightboxDimension.height = this.getScreenHeight();
       this.updateActivePhoto(this.activePhotoId);
     }
   }
 
   public nextImage() {
-    this.disableAnimation();
     if (this.activePhotoId + 1 < this.gridPhotoQL.length) {
       this.showPhoto(this.activePhotoId + 1);
       if (this.activePhotoId + 3 >= this.gridPhotoQL.length) {
@@ -77,7 +78,6 @@ export class GalleryLightboxComponent implements OnDestroy {
   }
 
   public prevImage() {
-    this.disableAnimation();
     if (this.activePhotoId > 0) {
       this.showPhoto(this.activePhotoId - 1);
       return;
@@ -88,13 +88,13 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   activePhotoId: number = null;
 
-  private showPhoto(photoIndex: number) {
+  private showPhoto(photoIndex: number, resize: boolean = true) {
     this.activePhoto = null;
     this.changeDetector.detectChanges();
-    this.updateActivePhoto(photoIndex);
+    this.updateActivePhoto(photoIndex, resize);
   }
 
-  private updateActivePhoto(photoIndex: number) {
+  private updateActivePhoto(photoIndex: number, resize: boolean = true) {
     let pcList = this.gridPhotoQL.toArray();
 
 
@@ -104,7 +104,9 @@ export class GalleryLightboxComponent implements OnDestroy {
     this.activePhotoId = photoIndex;
     this.activePhoto = pcList[photoIndex];
 
-    this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
+    if (resize) {
+      this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo));
+    }
     this.navigation.hasPrev = photoIndex > 0;
     this.navigation.hasNext = photoIndex + 1 < pcList.length;
 
@@ -117,43 +119,54 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   }
 
+  startPhotoDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
+
   public show(photo: PhotoDTO) {
-    this.enableAnimation();
+    console.log(this.photoElement);
     this.visible = true;
     let selectedPhoto = this.findPhotoComponent(photo);
     if (selectedPhoto === null) {
       throw new Error("Can't find Photo");
     }
 
-    this.lightboxDimension = selectedPhoto.getDimension();
+    const lightboxDimension = selectedPhoto.getDimension();
-    this.lightboxDimension.top -= this.getBodyScrollTop();
+    lightboxDimension.top -= this.getBodyScrollTop();
-    this.blackCanvasOpacity = 0;
+    this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridPhoto.photo));
-    this.photoDimension = selectedPhoto.getDimension();
+    this.animateLightbox(
-
+      lightboxDimension,
-    //disable scroll
+      <Dimension>{
-    this.overlayService.showOverlay();
-    setTimeout(() => {
-      this.lightboxDimension = <Dimension>{
         top: 0,
         left: 0,
         width: this.getScreenWidth(),
         height: this.getScreenHeight()
-      };
+      });
+
+
+    this.blackCanvasOpacity = 0;
+    this.startPhotoDimension = selectedPhoto.getDimension();
+    //disable scroll
+    this.overlayService.showOverlay();
     this.blackCanvasOpacity = 1.0;
-      this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto));
+    this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
     this.contentWidth = this.getScreenWidth();
-    }, 0);
   }
 
   public hide() {
-    this.enableAnimation();
     this.hideInfoPanel();
     this.fullScreenService.exitFullScreen();
 
-    this.lightboxDimension = this.activePhoto.getDimension();
+    const lightboxDimension = this.activePhoto.getDimension();
-    this.lightboxDimension.top -= this.getBodyScrollTop();
+    lightboxDimension.top -= this.getBodyScrollTop();
     this.blackCanvasOpacity = 0;
-    this.photoDimension = this.activePhoto.getDimension();
+
+    this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo), this.activePhoto.getDimension());
+    this.animateLightbox(<Dimension>{
+      top: 0,
+      left: 0,
+      width: this.getScreenWidth(),
+      height: this.getScreenHeight()
+    }, lightboxDimension);
+
     setTimeout(() => {
       this.visible = false;
       this.activePhoto = null;
@@ -162,6 +175,31 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   }
 
+  animatePhoto(from: Dimension, to: Dimension = from) {
+    this._builder.build([
+      style(<any>Dimension.toString(from)),
+      animate(300,
+        style(<any>Dimension.toString(to)))
+    ])
+      .create(this.photoElement.elementRef.nativeElement)
+      .play();
+  }
+
+  animateLightbox(from: Dimension = <Dimension>{
+    top: 0,
+    left: 0,
+    width: this.getScreenWidth(),
+    height: this.getScreenHeight()
+  }, to: Dimension = from) {
+    this._builder.build([
+      style(<any>Dimension.toString(from)),
+      animate(300,
+        style(<any>Dimension.toString(to)))
+    ])
+      .create(this.lightboxElement.nativeElement)
+      .play();
+  }
+
 
   setGridPhotoQL(value: QueryList<GalleryPhotoComponent>) {
     if (this.changeSubscription != null) {
@@ -175,7 +213,7 @@ export class GalleryLightboxComponent implements OnDestroy {
     });
   }
 
-  private findPhotoComponent(photo: any) {
+  private findPhotoComponent(photo: any): GalleryPhotoComponent {
     let galleryPhotoComponents = this.gridPhotoQL.toArray();
     for (let i = 0; i < galleryPhotoComponents.length; i++) {
       if (galleryPhotoComponents[i].gridPhoto.photo == photo) {
@@ -222,45 +260,54 @@ export class GalleryLightboxComponent implements OnDestroy {
 
   }
 
-  recalcPositions() {
+  showInfoPanel() {
+    this.infoPanelVisible = true;
 
-    this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
+    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
+    this.infoPanelWidth = 400;
+    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
+    this.animatePhoto(starPhotoPos, endPhotoPos);
     this.contentWidth = this.getScreenWidth();
-    this.lightboxDimension = <Dimension>{
+    this.animateLightbox(<Dimension>{
+        top: 0,
+        left: 0,
+        width: this.getScreenWidth() + 400,
+        height: this.getScreenHeight()
+      },
+      <Dimension>{
         top: 0,
         left: 0,
         width: this.getScreenWidth(),
         height: this.getScreenHeight()
-    };
+      });
-  };
-
-  showInfoPanel() {
-    this.infoPanelVisible = true;
-    this.infoPanelWidth = 0;
-    setTimeout(() => {
-      this.infoPanelWidth = 400;
-      this.recalcPositions();
-    }, 0);
     if (this.iPvisibilityTimer != null) {
       clearTimeout(this.iPvisibilityTimer);
     }
   }
 
   hideInfoPanel() {
-    this.infoPanelWidth = 0;
     this.iPvisibilityTimer = setTimeout(() => {
       this.iPvisibilityTimer = null;
       this.infoPanelVisible = false;
     }, 1000);
-    this.recalcPositions();
-  }
 
-  private enableAnimation() {
+    const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
-    this.transition = null;
+    this.infoPanelWidth = 0;
-  }
+    const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
-
+    this.animatePhoto(starPhotoPos, endPhotoPos);
-  private disableAnimation() {
+    this.contentWidth = this.getScreenWidth();
-    this.transition = "initial";
+    this.animateLightbox(<Dimension>{
+        top: 0,
+        left: 0,
+        width: this.getScreenWidth() - 400,
+        height: this.getScreenHeight()
+      },
+      <Dimension>{
+        top: 0,
+        left: 0,
+        width: this.getScreenWidth(),
+        height: this.getScreenHeight()
+      });
   }
 
 

frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges} from "@angular/core";
+import {Component, ElementRef, Input, OnChanges} from "@angular/core";
 import {GridPhoto} from "../../grid/GridPhoto";
 
 @Component({
@@ -14,7 +14,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
 
   imageLoaded: boolean = false;
 
-  constructor() {
+  constructor(public elementRef: ElementRef) {
   }
 
   ngOnChanges() {

frontend/app/model/IRenderable.ts

@@ -8,3 +8,9 @@ export interface Dimension {
   width: number;
   height: number;
 }
+
+export module Dimension {
+  export const toString = (dim: Dimension) => {
+    return {top: dim.top + "px", left: dim.left + "px", width: dim.width + "px", height: dim.height + "px"};
+  }
+}