fixing lightbox animation

frontend/app/gallery/gallery.component.ts

@@ -3,7 +3,6 @@ import {AuthenticationService} from '../model/network/authentication.service';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {GalleryService} from './gallery.service';
 import {GalleryGridComponent} from './grid/grid.gallery.component';
-import {GallerySearchComponent} from './search/search.gallery.component';
 import {SearchTypes} from '../../../common/entities/AutoCompleteItem';
 import {Config} from '../../../common/config/public/Config';
 import {DirectoryDTO} from '../../../common/entities/DirectoryDTO';

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

@@ -104,7 +104,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
         this.onNavigateTo(params[QueryParams.gallery.photo]);
       } else if (this.status === LightboxStates.Open) {
         this.delayedMediaShow = null;
-        this.hideLigthbox();
+        this.hideLightbox();
       }
     });
   }
@@ -391,7 +391,6 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
   }
 
-  //noinspection JSUnusedGlobalSymbols
   @HostListener('window:keydown', ['$event'])
   onKeyPress(e: KeyboardEvent) {
     if (this.status !== LightboxStates.Open) {
@@ -454,7 +453,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
       {queryParams: this.queryService.getParams()}).catch(console.error);
   }
 
-  private hideLigthbox() {
+  private hideLightbox() {
     this.Zoom = 1;
     this.controllersVisible = false;
     this.status = LightboxStates.Closing;
@@ -487,9 +486,9 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
   animatePhoto(from: Dimension, to: Dimension = from): AnimationPlayer {
     const elem = this._builder.build([
-      style(<any>Dimension.toString(from)),
+      style(Dimension.toString(from)),
       animate(300,
-        style(<any>Dimension.toString(to)))
+        style(Dimension.toString(to)))
     ])
       .create(this.mediaElement.elementRef.nativeElement);
     elem.play();
@@ -503,9 +502,9 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     height: this.getPhotoFrameHeight()
   }, to: Dimension = from): AnimationPlayer {
     const elem = this._builder.build([
-      style(<any>Dimension.toString(from)),
+      style(Dimension.toString(from)),
       animate(300,
-        style(<any>Dimension.toString(to)))
+        style(Dimension.toString(to)))
     ])
       .create(this.lightboxElement.nativeElement);
     elem.play();

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

@@ -5,7 +5,7 @@
        [style.transform]="ImageTransform"
        [src]="thumbnailSrc"/>
 
-  <img *ngIf="gridMedia !== null && gridMedia.isPhoto() && loadMedia && photoSrc"
+  <img *ngIf="gridMedia !== null && gridMedia.isPhoto() && photoSrc"
        [style.width.%]="imageSize.width"
        [style.height.%]="imageSize.height"
        [style.transform]="ImageTransform"
@@ -14,14 +14,14 @@
        (load)="onImageLoad()"
        (error)="onImageError()"/>
 
-  <video #video
-         *ngIf="gridMedia !== null && gridMedia.isVideo() && loadMedia"
+  <video *ngIf="gridMedia !== null && gridMedia.isVideo() && loadMedia"
          [style.width.%]="imageSize.width"
          [style.height.%]="imageSize.height"
          (loadstart)="onImageLoad()"
          autoplay
          (error)="onImageError()"
-         (timeupdate)="onVideoProgress()">
+         (timeupdate)="onVideoProgress()"
+         #video>
     <source [src]="gridMedia.getPhotoPath()" type="{{getVideoType()}}">
   </video>
 

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

@@ -220,7 +220,6 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
     return window.innerHeight;
   }
 
-  //noinspection JSUnusedGlobalSymbols
   @HostListener('window:keydown', ['$event'])
   onKeyPress(e: KeyboardEvent) {
     if (this.visible !== true) {