improving lightbox zooming

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

@@ -29,19 +29,20 @@ app-gallery-lightbox-photo {
 }
 
 .navigation-arrow {
-  width: 20%;
+  width: 30px;
   min-width: 60px;
-  height: 50%;
-  margin-top: 22vh;
-  position: static;
+  height: 100px;
+  position: absolute;
+  top: calc(50% - 50px);
   display: inline-block;
   padding: 15px;
   cursor: pointer;
   font-size: xx-large;
+  left: 0;
 }
 
 .navigation-arrow span {
-  top: 43%;
+  top: 20px;
 }
 
 #controllers-container {
@@ -73,7 +74,8 @@ app-gallery-lightbox-photo {
 }
 
 #rightArrow {
-  float: right;
+  right: 0;
+  left: auto;
   text-align: right;
 }
 
@@ -197,3 +199,20 @@ app-info-panel {
   -moz-transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
 }
+
+.controls-zoom {
+  bottom: 0;
+  position: absolute;
+  margin-bottom: 10px;
+}
+
+.zoom-progress-wrapper {
+  height: 11px;
+  border: 1px solid white;
+  padding: 0;
+}
+
+.zoom-progress {
+  height: 10px;
+  background: white;
+}

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

@@ -63,49 +63,62 @@
          (swipeleft)="zoom == 1 && nextImage()"
          (swiperight)="zoom == 1 && prevImage()"
          (swipeup)="zoom == 1 && hide()"
-         (click)="photo.playPause()">
-
-
-      <div class="navigation-arrow highlight"
-           *ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
-           (click)="prevImage()"><span
-        class="oi oi-chevron-left"></span></div>
-      <div class="navigation-arrow highlight"
-           *ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
-           (click)="nextImage()"><span
-        class="oi oi-chevron-right"></span></div>
-
-      <div class="controls controls-playback" *ngIf="activePhoto && activePhoto.gridPhoto.isPhoto()">
-      <span class="oi oi-media-pause highlight control-button"
-            [ngClass]="playBackState == 0 ? 'button-disabled':''"
-            (click)="pause()"
-            title="pause"></span>
-        <span
-          class="oi oi-media-play highlight control-button"
-          [ngClass]="playBackState == 1 ? 'button-active':''"
-          (click)="play()"
-          title="auto play"></span>
-        <span class="oi oi-media-skip-forward highlight control-button"
-              [ngClass]="playBackState == 2 ? 'button-active':''"
-              (click)="fastForward()"
-              title="fast auto play"></span>
-      </div>
-      <div class="controls controls-big-play" *ngIf=" activePhoto && activePhoto.gridPhoto.isVideo() && photo.Paused">
-        <span class="oi oi-media-play"></span>
-      </div>
+         (tap)="tap($event)"
+         (pan)="pan($event)"
+         (wheel)="wheel($event)"
+         (click)="mediaElement.playPause()">
 
     </div>
+
+    <div class="navigation-arrow highlight"
+         *ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
+         (click)="prevImage()"><span
+      class="oi oi-chevron-left"></span></div>
+    <div class="navigation-arrow highlight"
+         *ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
+         (click)="nextImage()"><span
+      class="oi oi-chevron-right"></span></div>
+
+    <div class="controls controls-zoom row" *ngIf="zoom > 1">
+      <div class="zoom-progress-wrapper offset-1 col-10 col-md-4 offset-md-4">
+        <div class="zoom-progress"
+             [style.width.%]="(zoom-1)/(MAX_ZOOM-1)*100"></div>
+      </div>
+    </div>
+
+    <div class="controls controls-playback"
+         *ngIf="zoom == 1 && activePhoto && activePhoto.gridPhoto.isPhoto()">
+      <span class="oi oi-media-pause highlight control-button"
+            [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
+            (click)="pause()"
+            title="pause"></span>
+      <span
+        class="oi oi-media-play highlight control-button"
+        [ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
+        (click)="play()"
+        title="auto play"></span>
+      <span class="oi oi-media-skip-forward highlight control-button"
+            [ngClass]="playBackState == PlayBackStates.FastForward ? 'button-active':''"
+            (click)="fastForward()"
+            title="fast auto play"></span>
+    </div>
+
+    <div class="controls controls-big-play"
+         *ngIf="activePhoto && activePhoto.gridPhoto.isVideo() && mediaElement.Paused">
+      <span class="oi oi-media-play"></span>
+    </div>
+
     <div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridPhoto.isVideo()">
       <span class="oi  col-1"
-            [ngClass]="!photo.Paused ? 'oi-media-pause':'oi-media-play'"
-            (click)="photo.playPause()"></span>
-      <input type="range" [(ngModel)]="photo.VideoProgress"
+            [ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
+            (click)="mediaElement.playPause()"></span>
+      <input type="range" [(ngModel)]="mediaElement.VideoProgress"
              min="0" max="100" step="0.1" class="col video-progress">
       <span class="oi  col-1"
-            [ngClass]="photo.Muted ? 'oi-volume-off':'oi-volume-high'"
-            (click)="photo.mute()"></span>
+            [ngClass]="mediaElement.Muted ? 'oi-volume-off':'oi-volume-high'"
+            (click)="mediaElement.mute()"></span>
       <input type="range"
-             [(ngModel)]="photo.VideoVolume" min="0" max="1" step="0.1"
+             [(ngModel)]="mediaElement.VideoVolume" min="0" max="1" step="0.1"
              value="1" class="col-2 col-md-1 volume">
     </div>
   </div>

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

@@ -23,8 +23,6 @@ import {MediaDTO} from '../../../../common/entities/MediaDTO';
 import {QueryParams} from '../../../../common/QueryParams';
 import {GalleryService} from '../gallery.service';
 import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
-import {$e} from '@angular/compiler/src/chars';
-import {Utils} from '../../../../common/Utils';
 
 export enum LightboxStates {
   Open = 1,
@@ -32,6 +30,12 @@ export enum LightboxStates {
   Closed = 3
 }
 
+export enum PlayBackStates {
+  Paused = 1,
+  Play = 2,
+  FastForward = 3
+}
+
 @Component({
   selector: 'app-gallery-lightbox',
   styleUrls: ['./lightbox.gallery.component.css', './inputrange.css'],
@@ -39,6 +43,8 @@ export enum LightboxStates {
 })
 export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
+  readonly MAX_ZOOM=10;
+
   @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
   @ViewChild('lightbox') lightboxElement: ElementRef;
   @ViewChild('root') root: ElementRef;
@@ -60,7 +66,8 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
   };
   private timer: Observable<number>;
   private timerSub: Subscription;
-  public playBackState = 0;
+  public playBackState: PlayBackStates = PlayBackStates.Paused;
+  public PlayBackStates = PlayBackStates;
   public controllersDimmed = false;
   public controllersAlwaysOn = false;
   public controllersVisible = true;
@@ -157,8 +164,10 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     }
   }
 
-  @HostListener('pan', ['$event'])
-  dragging($event: any) {
+  pan($event: any) {
+    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+      return;
+    }
     if (this.zoom === 1) {
       return;
     }
@@ -173,28 +182,42 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     }
   }
 
-  @HostListener('window:wheel', ['$event'])
-  onWheel($event: any) {
+  wheel($event: any) {
+    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+      return;
+    }
+    this.showControls();
     this.setZoom(this.zoom + ($event.deltaY < 0 ? this.zoom / 10 : -this.zoom / 10));
   }
 
   @HostListener('pinch', ['$event'])
   pinch($event: any) {
+    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+      return;
+    }
+    this.showControls();
     this.setZoom(this.prevZoom * $event.scale);
   }
 
   @HostListener('pinchend', ['$event'])
   pinchend($event: any) {
+    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+      return;
+    }
+    this.showControls();
     this.setZoom(this.prevZoom * $event.scale);
     this.prevZoom = this.zoom;
   }
 
-  @HostListener('tap', ['$event'])
-  tao($event: any) {
+  tap($event: any) {
+    if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
+      return;
+    }
     if ($event.tapCount < 2) {
       return;
     }
 
+    this.showControls();
     if (this.zoom > 1) {
       this.setZoom(1);
       this.prevZoom = this.zoom;
@@ -214,9 +237,13 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     if (zoom < 1) {
       zoom = 1;
     }
-    if (zoom > 10) {
-      zoom = 10;
+    if (zoom > this.MAX_ZOOM) {
+      zoom = this.MAX_ZOOM;
     }
+    if (this.zoom === zoom) {
+      return;
+    }
+    this.pause();
     this.drag.x = this.drag.x / this.zoom * zoom;
     this.drag.y = this.drag.y / this.zoom * zoom;
     this.prevDrag.x = this.drag.x;
@@ -272,8 +299,8 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     if (this.zoom < 1) {
       this.zoom = 1;
     }
-    if (this.zoom > 10) {
-      this.zoom = 10;
+    if (this.zoom > this.MAX_ZOOM) {
+      this.zoom =  this.MAX_ZOOM;
     }
     fixDrag(this.drag);
     fixDrag(this.prevDrag);
@@ -520,7 +547,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
         this.navigateToPhoto(0);
       }
     });
-    this.playBackState = 1;
+    this.playBackState = PlayBackStates.Play;
   }
 
   isInfoPanelAnimating(): boolean {
@@ -569,7 +596,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
         this.navigateToPhoto(0);
       }
     });
-    this.playBackState = 2;
+    this.playBackState = PlayBackStates.FastForward;
   }
 
 
@@ -633,7 +660,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
     if (this.timerSub != null) {
       this.timerSub.unsubscribe();
     }
-    this.playBackState = 0;
+    this.playBackState = PlayBackStates.Paused;
   }
 
   private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent {

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

@@ -41,13 +41,13 @@ export class GalleryLightboxMediaComponent implements OnChanges {
   }
 
   ngOnChanges() {
-    this.imageLoaded = false;
-    this.imageLoadFinished = false;
-    this.setImageSize();
     if (this.prevGirdPhoto !== this.gridMedia) {
       this.prevGirdPhoto = this.gridMedia;
       this.thumbnailSrc = null;
       this.photoSrc = null;
+      this.imageLoaded = false;
+      this.imageLoadFinished = false;
+      this.setImageSize();
     }
     if (this.thumbnailSrc == null && this.gridMedia && this.ThumbnailUrl !== null) {
       FixOrientationPipe.transform(this.ThumbnailUrl, this.gridMedia.Orientation)