self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-09-16 09:16:27 +02:00
Code Issues Releases Activity

performance improvements

Browse Source
This commit is contained in:
Patrik J. Braun
2019-07-20 00:29:16 +02:00
parent 4b190161fd
commit 88a2460d48
8 changed files with 105 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/ui/gallery/grid/grid.gallery.component.html
View File

@@ -2,7 +2,7 @@
<app-gallery-grid-photo
*ngFor="let gridPhoto of photosToRender"
(click)="photoClicked(gridPhoto.media)"
[gridPhoto]="gridPhoto"
[gridMedia]="gridPhoto"
[style.width.px]="gridPhoto.renderWidth"
[style.height.px]="gridPhoto.renderHeight"
[style.marginLeft.px]="IMAGE_MARGIN"

42
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
View File

@@ -49,7 +49,37 @@ img {
}
}
.photo-container:hover .info {
animation: show-info .3s forwards;
}
@keyframes show-info {
0% {
transform: translateY(0);
background-color: transparent;
}
100% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
}
}
@keyframes hide-info {
0% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
}
100% {
transform: translateY(0);
background-color: transparent;
}
}
.info {
animation: hide-info .3s forwards;
transform: translateY(0);
background-color: transparent;
color: white;
font-size: medium;
@@ -58,11 +88,11 @@ img {
padding: 5px;
margin-top: 0;
transition: margin .3s ease-out, background-color .3s ease-out;
-moz-transition: margin .3s ease-out, background-color .3s ease-out;
-webkit-transition: margin .3s ease-out, background-color .3s ease-out;
-o-transition: margin .3s ease-out, background-color .3s ease-out;
-ms-transition: margin .3s ease-out, background-color .3s ease-out;
transition: transform .3s ease-out, background-color .3s ease-out;
-moz-transition: transform .3s ease-out, background-color .3s ease-out;
-webkit-transition: transform .3s ease-out, background-color .3s ease-out;
-o-transition: transform .3s ease-out, background-color .3s ease-out;
-ms-transition: transform .3s ease-out, background-color .3s ease-out;
}
.photo-container {
@@ -112,6 +142,6 @@ a {
background-color: rgba(0, 0, 0, 0.8);
}
.photo-keywords .oi-person{
.photo-keywords .oi-person {
margin-right: 2px;
}

16
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
View File

@@ -1,7 +1,7 @@
<div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()">
<img alt="{{gridPhoto.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridPhoto.Orientation | async"
<img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridMedia.Orientation | async"
*ngIf="thumbnail.Available">
<app-gallery-grid-photo-loading
@@ -11,21 +11,19 @@
</app-gallery-grid-photo-loading>
<div *ngIf="gridPhoto.isVideo()" class="video-indicator"
<div *ngIf="gridMedia.isVideo()" class="video-indicator"
[style.marginTop.px]="-container.nativeElement.offsetHeight"
[style.marginLeft.px]="container.nativeElement.offsetWidth">
{{gridPhoto.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>
{{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>
<!--Info box -->
<div #info class="info"
*ngIf="infoBar.visible"
[style.margin-top.px]="infoBar.marginTop"
[style.background]="infoBar.background"
<div class="info"
*ngIf="infoBarVisible"
[style.width.px]="container.nativeElement.offsetWidth">
<div class="photo-name">{{Title}}</div>
<div class="photo-position" *ngIf="gridPhoto.hasPositionData()">
<div class="photo-position" *ngIf="gridMedia.hasPositionData()">
<span class="oi oi-map-marker"></span>
<ng-template [ngIf]="getPositionText()">
<a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
@@ -47,7 +45,7 @@
<ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
--><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
-->{{keyword.value}}</span>
<ng-template [ngIf]="!last">,</ng-template>
<ng-template [ngIf]="!last">,&#160;</ng-template>
</ng-template>
</div>

69
frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@@ -15,18 +15,13 @@ import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDT
providers: [RouterLink]
})
export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
@Input() gridPhoto: GridMedia;
@Input() gridMedia: GridMedia;
@ViewChild('img', {static: false}) imageRef: ElementRef;
@ViewChild('info', {static: false}) infoDiv: ElementRef;
@ViewChild('photoContainer', {static: true}) container: ElementRef;
thumbnail: Thumbnail;
keywords: { value: string, type: SearchTypes }[] = null;
infoBar = {
marginTop: 0,
visible: false,
background: 'rgba(0,0,0,0.0)'
};
infoBarVisible = false;
animationTimer: number = null;
readonly SearchTypes: typeof SearchTypes;
@@ -46,20 +41,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
get Title(): string {
if (Config.Client.Other.captionFirstNaming === false) {
return this.gridPhoto.media.name;
return this.gridMedia.media.name;
}
if ((<PhotoDTO>this.gridPhoto.media).metadata.caption) {
if ((<PhotoDTO>this.gridPhoto.media).metadata.caption.length > 20) {
return (<PhotoDTO>this.gridPhoto.media).metadata.caption.substring(0, 17) + '...';
if ((<PhotoDTO>this.gridMedia.media).metadata.caption) {
if ((<PhotoDTO>this.gridMedia.media).metadata.caption.length > 20) {
return (<PhotoDTO>this.gridMedia.media).metadata.caption.substring(0, 17) + '...';
}
return (<PhotoDTO>this.gridPhoto.media).metadata.caption;
return (<PhotoDTO>this.gridMedia.media).metadata.caption;
}
return this.gridPhoto.media.name;
return this.gridMedia.media.name;
}
ngOnInit() {
this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto);
const metadata = this.gridPhoto.media.metadata as PhotoMetadata;
this.thumbnail = this.thumbnailService.getThumbnail(this.gridMedia);
const metadata = this.gridMedia.media.metadata as PhotoMetadata;
if ((metadata.keywords && metadata.keywords.length > 0) ||
(metadata.faces && metadata.faces.length > 0)) {
const names: string[] = (metadata.faces || []).map(f => f.name);
@@ -95,34 +90,20 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
}
getPositionText(): string {
if (!this.gridPhoto || !this.gridPhoto.isPhoto()) {
if (!this.gridMedia || !this.gridMedia.isPhoto()) {
return '';
}
return (<PhotoDTO>this.gridPhoto.media).metadata.positionData.city ||
(<PhotoDTO>this.gridPhoto.media).metadata.positionData.state ||
(<PhotoDTO>this.gridPhoto.media).metadata.positionData.country;
return (<PhotoDTO>this.gridMedia.media).metadata.positionData.city ||
(<PhotoDTO>this.gridMedia.media).metadata.positionData.state ||
(<PhotoDTO>this.gridMedia.media).metadata.positionData.country;
}
mouseOver() {
this.infoBar.visible = true;
this.infoBarVisible = true;
if (this.animationTimer != null) {
clearTimeout(this.animationTimer);
this.animationTimer = null;
}
this.animationTimer = window.setTimeout(() => {
this.infoBar.background = 'rgba(0,0,0,0.8)';
if (!this.infoDiv) {
this.animationTimer = window.setTimeout(() => {
if (!this.infoDiv) {
this.infoBar.marginTop = -50;
return;
}
this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
}, 10);
return;
}
this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
}, 1);
}
mouseOut() {
@@ -130,23 +111,11 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
clearTimeout(this.animationTimer);
}
this.animationTimer = window.setTimeout(() => {
this.infoBar.marginTop = 0;
this.infoBar.background = 'rgba(0,0,0,0.0)';
if (this.animationTimer != null) {
clearTimeout(this.animationTimer);
}
this.animationTimer = window.setTimeout(() => {
this.infoBar.visible = false;
}, 500);
}, 100);
this.animationTimer = null;
this.infoBarVisible = false;
}, 500);
}
/*
onImageLoad() {
this.loading.show = false;
}
*/
public getDimension(): Dimension {
if (!this.imageRef) {
return <Dimension>{

22
frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@@ -1,12 +1,12 @@
<div id="controllers-container"
[ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'): ''"
[ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridMedia.isVideo() ? 'dim-controls-video' :'dim-controls'): ''"
#root>
<div class="controls-caption" *ngIf="Title">{{Title}}</div>
<div class="controls controls-top">
<a class="highlight control-button"
*ngIf="activePhoto"
[href]="activePhoto.gridPhoto.getPhotoPath()"
[download]="activePhoto.gridPhoto.media.name">
[href]="activePhoto.gridMedia.getPhotoPath()"
[download]="activePhoto.gridMedia.media.name">
<span class="oi oi-data-transfer-download"
title="download" i18n-title></span>
</a>
@@ -59,11 +59,11 @@
<a
class="face"
[routerLink]="['/search', face.name, {type: SearchTypes[SearchTypes.person]}]"
[style.top.%]="face.box.top / activePhoto.gridPhoto.Photo.metadata.size.height*100"
[style.left.%]="face.box.left / activePhoto.gridPhoto.Photo.metadata.size.width*100"
[style.height.%]="face.box.height / activePhoto.gridPhoto.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridPhoto.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridPhoto.Photo.metadata.faces">
[style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
[style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
[style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
*ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
<div class="face-box"></div>
<span class="face-name">{{face.name}}</span>
</a>
@@ -97,7 +97,7 @@
<div class="controls controls-playback"
*ngIf="zoom == 1 && activePhoto && activePhoto.gridPhoto.isPhoto()">
*ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
<span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()"
@@ -114,11 +114,11 @@
</div>
<div class="controls controls-big-play"
*ngIf="activePhoto && activePhoto.gridPhoto.isVideo() && mediaElement.Paused">
*ngIf="activePhoto && activePhoto.gridMedia.isVideo() && mediaElement.Paused">
<span class="oi oi-media-play"></span>
</div>
<div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridPhoto.isVideo()">
<div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
<span class="oi col-1"
[ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
(click)="mediaElement.playPause()"></span>

24
frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
View File

@@ -61,7 +61,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
}
public set Zoom(zoom: number) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
if (zoom < 1) {
@@ -86,7 +86,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
if (!this.activePhoto) {
return null;
}
return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption;
return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
}
public containerWidth() {
@@ -117,7 +117,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
pan($event: { deltaY: number, deltaX: number, isFinal: boolean }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
if (this.zoom === 1) {
@@ -135,7 +135,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
}
wheel($event: { deltaY: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
if ($event.deltaY < 0) {
@@ -147,7 +147,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
@HostListener('pinch', ['$event'])
pinch($event: { scale: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
this.showControls();
@@ -156,7 +156,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
@HostListener('pinchend', ['$event'])
pinchend($event: { scale: number }) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
this.showControls();
@@ -165,7 +165,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
}
tap($event: any) {
if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) {
if (!this.activePhoto || this.activePhoto.gridMedia.isVideo()) {
return;
}
if ($event.tapCount < 2) {
@@ -231,7 +231,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
this.closed.emit();
break;
case ' ': // space
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo()) {
if (this.activePhoto && this.activePhoto.gridMedia.isVideo()) {
this.mediaElement.playPause();
}
break;
@@ -246,7 +246,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
return;
}
// do not skip video if its playing
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() &&
if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
!this.mediaElement.Paused) {
return;
}
@@ -262,7 +262,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
if (this.mediaElement.imageLoadFinished === false) {
return;
}
if (this.activePhoto && this.activePhoto.gridPhoto.isVideo() &&
if (this.activePhoto && this.activePhoto.gridMedia.isVideo() &&
!this.mediaElement.Paused) {
return;
}
@@ -308,7 +308,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
return;
}
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media);
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridMedia.media);
const widthFilled = photoAspect > this.photoFrameDim.aspect;
const divWidth = this.photoFrameDim.width;
const divHeight = this.photoFrameDim.height;
@@ -369,7 +369,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
}
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridPhoto.media);
const photoAspect = MediaDTO.calcRotatedAspectRatio(this.activePhoto.gridMedia.media);
if (photoAspect < this.photoFrameDim.aspect) {
this.faceContainerDim.height = this.photoFrameDim.height;

6
frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html
View File

@@ -5,7 +5,7 @@
</div>
<div class="lightbox" #lightbox>
<app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridPhoto : null"
<app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridMedia : null"
[loadMedia]="!animating"
[zoom]="controls ? controls.Zoom : 1"
[drag]="controls ? controls.drag : {x:0,y:0}"
@@ -13,6 +13,7 @@
#photo>
</app-gallery-lightbox-media>
<app-lightbox-controls
*ngIf="isOpen()"
#controls
[activePhoto]="activePhoto"
(closed)="hide()"
@@ -29,8 +30,7 @@
<app-info-panel *ngIf="activePhoto && infoPanelVisible"
id="info-panel"
[style.width.px]="infoPanelWidth"
[media]="activePhoto.gridPhoto.media"
[media]="activePhoto.gridMedia.media"
(closed)="hideInfoPanel()">
</app-info-panel>
</div>

30
frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
View File

@@ -71,7 +71,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
if (!this.activePhoto) {
return null;
}
return (<PhotoDTO>this.activePhoto.gridPhoto.media).metadata.caption;
return (<PhotoDTO>this.activePhoto.gridMedia.media).metadata.caption;
}
public toggleFullscreen(): void {
@@ -117,19 +117,19 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
}
onNavigateTo(photoStringId: string) {
if (this.activePhoto && this.queryService.getMediaStringId(this.activePhoto.gridPhoto.media) === photoStringId) {
if (this.activePhoto && this.queryService.getMediaStringId(this.activePhoto.gridMedia.media) === photoStringId) {
return;
}
if (this.controls) {
this.controls.resetZoom();
}
const photo = this.gridPhotoQL.find(i => this.queryService.getMediaStringId(i.gridPhoto.media) === photoStringId);
const photo = this.gridPhotoQL.find(i => this.queryService.getMediaStringId(i.gridMedia.media) === photoStringId);
if (!photo) {
return this.delayedMediaShow = photoStringId;
}
if (this.status === LightboxStates.Closed) {
this.showLigthbox(photo.gridPhoto.media);
this.showLigthbox(photo.gridMedia.media);
} else {
this.showPhoto(this.gridPhotoQL.toArray().indexOf(photo));
}
@@ -195,7 +195,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
const lightboxDimension = selectedPhoto.getDimension();
lightboxDimension.top -= PageHelper.ScrollY;
this.animating = true;
this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridPhoto.media)).onDone(() => {
this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridMedia.media)).onDone(() => {
this.animating = false;
});
this.animateLightbox(
@@ -263,13 +263,12 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
this.iPvisibilityTimer = window.setTimeout(() => {
this.iPvisibilityTimer = null;
this.infoPanelVisible = false;
// this.controls.onResize();
}, 1000);
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.infoPanelWidth = 0;
this.updatePhotoFrameDim();
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
if (_animate) {
this.animatePhoto(starPhotoPos, endPhotoPos);
}
@@ -297,10 +296,10 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
showInfoPanel() {
this.infoPanelVisible = true;
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.infoPanelWidth = 400;
this.updatePhotoFrameDim();
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media);
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media);
this.animatePhoto(starPhotoPos, endPhotoPos);
this.animateLightbox(<Dimension>{
top: 0,
@@ -326,6 +325,9 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
public isVisible(): boolean {
return this.status !== LightboxStates.Closed;
}
public isOpen(): boolean {
return this.status === LightboxStates.Open;
}
private updatePhotoFrameDim = () => {
@@ -336,7 +338,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
private navigateToPhoto(photoIndex: number) {
this.router.navigate([],
{queryParams: this.queryService.getParams(this.gridPhotoQL.toArray()[photoIndex].gridPhoto.media)}).catch(console.error);
{queryParams: this.queryService.getParams(this.gridPhotoQL.toArray()[photoIndex].gridMedia.media)}).catch(console.error);
}
private showPhoto(photoIndex: number, resize: boolean = true) {
@@ -362,7 +364,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
lightboxDimension.top -= PageHelper.ScrollY;
this.blackCanvasOpacity = 0;
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media), this.activePhoto.getDimension());
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media), this.activePhoto.getDimension());
this.animateLightbox(<Dimension>{
top: 0,
left: 0,
@@ -391,7 +393,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
this.activePhoto = pcList[photoIndex];
if (resize) {
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.media));
this.animatePhoto(this.calcLightBoxPhotoDimension(this.activePhoto.gridMedia.media));
}
this.navigation.hasPrev = photoIndex > 0;
this.navigation.hasNext = photoIndex + 1 < pcList.length;
@@ -409,7 +411,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
private findPhotoComponent(media: MediaDTO): GalleryPhotoComponent {
const galleryPhotoComponents = this.gridPhotoQL.toArray();
for (let i = 0; i < galleryPhotoComponents.length; i++) {
if (galleryPhotoComponents[i].gridPhoto.media === media) {
if (galleryPhotoComponents[i].gridMedia.media === media) {
return galleryPhotoComponents[i];
}
}