diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index da3ab018..28435779 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/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; +} diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index fe4d27e4..9bfea6a7 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/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()"> - - - - - -
- - - -
-
- -
+ (tap)="tap($event)" + (pan)="pan($event)" + (wheel)="wheel($event)" + (click)="mediaElement.playPause()"> + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ +
+
- + + [ngClass]="mediaElement.Muted ? 'oi-volume-off':'oi-volume-high'" + (click)="mediaElement.mute()">
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index 9b3822cb..fdb8a0de 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/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; 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 { diff --git a/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts index 37aea49c..4e80567c 100644 --- a/frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.ts +++ b/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)