fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixing lightbox animation

Browse Source
This commit is contained in:
Patrik J. Braun 2018-12-23 15:04:52 +01:00
parent d6fea26d17
commit 144e20a972
4 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/gallery/gallery.component.ts
View File

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

13
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
View File

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

8
frontend/app/gallery/lightbox/media/media.lightbox.gallery.component.html
View File

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

1
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

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