diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css index dd2bec7a..72a62b1b 100644 --- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css +++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css @@ -154,6 +154,21 @@ opacity: 1.0; } +@keyframes blink { + 0% { + opacity: 0.5; + } + 25% { + opacity: 1.0; + } + 75% { + opacity: 1.0; + } + 100% { + opacity: 0.5; + } +} + @-webkit-keyframes blink { 0% { opacity: 0.5; diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts index dcfbeb6b..93291b02 100644 --- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts +++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts @@ -10,20 +10,20 @@ import { Output, ViewChild, } from '@angular/core'; -import { MediaDTOUtils } from '../../../../../../common/entities/MediaDTO'; -import { FullScreenService } from '../../fullscreen.service'; -import { GalleryPhotoComponent } from '../../grid/photo/photo.grid.gallery.component'; -import { Observable, Subscription, timer } from 'rxjs'; -import { filter } from 'rxjs/operators'; -import { PhotoDTO } from '../../../../../../common/entities/PhotoDTO'; -import { GalleryLightboxMediaComponent } from '../media/media.lightbox.gallery.component'; -import { Config } from '../../../../../../common/config/public/Config'; +import {MediaDTOUtils} from '../../../../../../common/entities/MediaDTO'; +import {FullScreenService} from '../../fullscreen.service'; +import {GalleryPhotoComponent} from '../../grid/photo/photo.grid.gallery.component'; +import {Observable, Subscription, timer} from 'rxjs'; +import {filter} from 'rxjs/operators'; +import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO'; +import {GalleryLightboxMediaComponent} from '../media/media.lightbox.gallery.component'; +import {Config} from '../../../../../../common/config/public/Config'; import { SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes, } from '../../../../../../common/entities/SearchQueryDTO'; -import { AuthenticationService } from '../../../../model/network/authentication.service'; +import {AuthenticationService} from '../../../../model/network/authentication.service'; export enum PlayBackStates { Paused = 1, @@ -39,7 +39,7 @@ export enum PlayBackStates { export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { readonly MAX_ZOOM = 10; - @ViewChild('root', { static: false }) root: ElementRef; + @ViewChild('root', {static: false}) root: ElementRef; @Output() closed = new EventEmitter(); @Output() toggleInfoPanel = new EventEmitter(); @@ -47,10 +47,10 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { @Output() nextPhoto = new EventEmitter(); @Output() previousPhoto = new EventEmitter(); - @Input() navigation = { hasPrev: true, hasNext: true }; + @Input() navigation = {hasPrev: true, hasNext: true}; @Input() activePhoto: GalleryPhotoComponent; @Input() mediaElement: GalleryLightboxMediaComponent; - @Input() photoFrameDim = { width: 1, height: 1, aspect: 1 }; + @Input() photoFrameDim = {width: 1, height: 1, aspect: 1}; public readonly facesEnabled = Config.Client.Faces.enabled; @@ -60,14 +60,14 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { public controllersDimmed = false; public controllersAlwaysOn = false; public controllersVisible = true; - public drag = { x: 0, y: 0 }; + public drag = {x: 0, y: 0}; public SearchQueryTypes = SearchQueryTypes; - public faceContainerDim = { width: 0, height: 0 }; + public faceContainerDim = {width: 0, height: 0}; public searchEnabled: boolean; private visibilityTimer: number = null; private timer: Observable; private timerSub: Subscription; - private prevDrag = { x: 0, y: 0 }; + private prevDrag = {x: 0, y: 0}; private prevZoom = 1; constructor( @@ -257,42 +257,33 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { } } + private showNextMedia = () => { + if (this.mediaElement.imageLoadFinished.this === false || + this.mediaElement.imageLoadFinished.next === false) { + return; + } + // do not skip video if its playing + if ( + this.activePhoto && + this.activePhoto.gridMedia.isVideo() && + !this.mediaElement.Paused + ) { + return; + } + this.nextPhoto.emit(); + }; + public play(): void { this.pause(); this.timerSub = this.timer .pipe(filter((t) => t % 2 === 0)) - .subscribe(() => { - if (this.mediaElement.imageLoadFinished === false) { - return; - } - // do not skip video if its playing - if ( - this.activePhoto && - this.activePhoto.gridMedia.isVideo() && - !this.mediaElement.Paused - ) { - return; - } - this.nextPhoto.emit(); - }); + .subscribe(this.showNextMedia); this.playBackState = PlayBackStates.Play; } public fastForward(): void { this.pause(); - this.timerSub = this.timer.subscribe(() => { - if (this.mediaElement.imageLoadFinished === false) { - return; - } - if ( - this.activePhoto && - this.activePhoto.gridMedia.isVideo() && - !this.mediaElement.Paused - ) { - return; - } - this.nextPhoto.emit(); - }); + this.timerSub = this.timer.subscribe(this.showNextMedia); this.playBackState = PlayBackStates.FastForward; } diff --git a/src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html index 8c19a1e3..be400291 100644 --- a/src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html +++ b/src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html @@ -6,6 +6,7 @@
this.gridPhotoQL.length) { throw new Error('Can\'t find the media'); } this.videoSourceError = false; this.activePhotoId = photoIndex; - this.activePhoto = pcList[photoIndex]; + this.activePhoto = this.gridPhotoQL.get(photoIndex); if (resize) { this.animatePhoto( @@ -455,7 +454,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { ); } this.navigation.hasPrev = photoIndex > 0; - this.navigation.hasNext = photoIndex + 1 < pcList.length; + this.navigation.hasNext = photoIndex + 1 < this.gridPhotoQL.length; const to = this.activePhoto.getDimension(); @@ -501,5 +500,12 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { return {top, left, width, height} as Dimension; } + + get NexGridMedia(): GridMedia { + if (this.activePhotoId + 1 < this.gridPhotoQL?.length) { + return this.gridPhotoQL.get(this.activePhotoId + 1)?.gridMedia; + } + return null; + } } diff --git a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html index 7ef14428..77c287f9 100644 --- a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html +++ b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html @@ -22,7 +22,7 @@ (error)="onImageError()" (timeupdate)="onVideoProgress()" #video> - + Something went wrong. diff --git a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts index d7912e0a..86965ef5 100644 --- a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts +++ b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts @@ -7,11 +7,11 @@ import { Output, ViewChild, } from '@angular/core'; -import { GridMedia } from '../../grid/GridMedia'; -import { MediaDTOUtils } from '../../../../../../common/entities/MediaDTO'; -import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; -import { SupportedFormats } from '../../../../../../common/SupportedFormats'; -import { Config } from '../../../../../../common/config/public/Config'; +import {GridMedia} from '../../grid/GridMedia'; +import {MediaDTOUtils} from '../../../../../../common/entities/MediaDTO'; +import {DomSanitizer, SafeStyle} from '@angular/platform-browser'; +import {SupportedFormats} from '../../../../../../common/SupportedFormats'; +import {Config} from '../../../../../../common/config/public/Config'; @Component({ selector: 'app-gallery-lightbox-media', @@ -20,42 +20,50 @@ import { Config } from '../../../../../../common/config/public/Config'; }) export class GalleryLightboxMediaComponent implements OnChanges { @Input() gridMedia: GridMedia; - @Input() loadMedia = false; + @Input() nextGridMedia: GridMedia; + @Input() loadMedia = false; // prevents loading media @Input() windowAspect = 1; @Input() zoom = 1; - @Input() drag = { x: 0, y: 0 }; + @Input() drag = {x: 0, y: 0}; @Output() videoSourceError = new EventEmitter(); - @ViewChild('video', { static: false }) video: ElementRef; + @ViewChild('video', {static: false}) video: ElementRef; prevGirdPhoto: GridMedia = null; - public imageSize = { width: 'auto', height: '100' }; - public imageLoadFinished = false; + public imageSize = {width: 'auto', height: '100'}; + private nextImage = new Image(); + // do not skip to the next photo if not both are loaded (or resulted in an error) + public imageLoadFinished = { + this: false, + next: false + }; thumbnailSrc: string = null; photo = { src: null as string, isBestFit: null as boolean, }; public transcodeNeedVideos = SupportedFormats.TranscodeNeed.Videos; + // if media not loaded, show thumbnail private mediaLoaded = false; private videoProgress = 0; - constructor(public elementRef: ElementRef, private sanitizer: DomSanitizer) {} + constructor(public elementRef: ElementRef, private sanitizer: DomSanitizer) { + } get ImageTransform(): SafeStyle { return this.sanitizer.bypassSecurityTrustStyle( 'scale(' + - this.zoom + - ') translate(calc(' + - -50 / this.zoom + - '% + ' + - this.drag.x / this.zoom + - 'px), calc(' + - -50 / this.zoom + - '% + ' + - this.drag.y / this.zoom + - 'px))' + this.zoom + + ') translate(calc(' + + -50 / this.zoom + + '% + ' + + this.drag.x / this.zoom + + 'px), calc(' + + -50 / this.zoom + + '% + ' + + this.drag.y / this.zoom + + 'px))' ); } @@ -120,8 +128,12 @@ export class GalleryLightboxMediaComponent implements OnChanges { this.prevGirdPhoto = this.gridMedia; this.thumbnailSrc = null; this.photo.src = null; + this.nextImage.src = ""; this.mediaLoaded = false; - this.imageLoadFinished = false; + this.imageLoadFinished = { + this: false, + next: false + }; } this.setImageSize(); if ( @@ -156,16 +168,18 @@ export class GalleryLightboxMediaComponent implements OnChanges { onImageError(): void { // TODO:handle error - this.imageLoadFinished = true; + this.imageLoadFinished.this = true; console.error( 'Error: cannot load media for lightbox url: ' + - this.gridMedia.getBestFitMediaPath() + this.gridMedia.getBestFitMediaPath() ); + this.loadNextPhoto(); } onImageLoad(): void { - this.imageLoadFinished = true; + this.imageLoadFinished.this = true; this.mediaLoaded = true; + this.loadNextPhoto(); } public showThumbnail(): boolean { @@ -178,11 +192,34 @@ export class GalleryLightboxMediaComponent implements OnChanges { ); } - onSourceError($event: any): void { + onSourceError(): void { this.mediaLoaded = false; this.videoSourceError.emit(); } + /** + * Loads next photo to faster show it on navigation. + * Called after the current photo is loaded + * @private + */ + private loadNextPhoto(): void { + if (!this.nextGridMedia || !this.loadMedia) { + return; + } + // Videos do not support preloading + if (!this.nextGridMedia.isPhoto()) { + this.imageLoadFinished.next = true; + return; + } + if (Config.Client.Media.Photo.Converting.enabled === true) { + this.nextImage.src = this.nextGridMedia.getBestFitMediaPath(); + } else { + this.nextImage.src = this.nextGridMedia.getMediaPath(); + } + this.nextImage.onload = () => this.imageLoadFinished.next = true; + + } + private loadPhoto(): void { if (!this.gridMedia || !this.loadMedia || !this.gridMedia.isPhoto()) { return;