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

Improving grid photo rendering performance for videos

Browse Source
This commit is contained in:
Patrik J. Braun 2021-04-30 23:40:55 +02:00
parent 494eab6f08
commit f1b3a12bc4
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,7 @@
:host {
position: relative;
}
img {
width: inherit;
height: inherit;
@ -61,7 +65,7 @@ img {
100% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
background: rgba(0, 0, 0, 0.8);
}
}
@ -69,7 +73,7 @@ img {
0% {
transform: translateY(-100%);
background: rgba(0,0,0,0.8);
background: rgba(0, 0, 0, 0.8);
}
100% {
transform: translateY(0);
@ -126,7 +130,8 @@ a {
font-size: large;
padding: 5px;
position: absolute;
transform: translate(-100%);
top: 0;
right: 0;
white-space: nowrap;
border-bottom-left-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.5);

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

@ -11,9 +11,7 @@
</app-gallery-grid-photo-loading>
<div *ngIf="gridMedia.isVideo()" class="video-indicator"
[style.marginTop.px]="-container.nativeElement.offsetHeight"
[style.marginLeft.px]="container.nativeElement.offsetWidth">
<div *ngIf="gridMedia.isVideo()" class="video-indicator">
{{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>

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

@ -7,7 +7,6 @@ import {Config} from '../../../../../../common/config/public/Config';
import {PageHelper} from '../../../../model/page.helper';
import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDTO';
import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes} from '../../../../../../common/entities/SearchQueryDTO';
import {UserRoles} from '../../../../../../common/entities/UserDTO';
import {AuthenticationService} from '../../../../model/network/authentication.service';
@Component({
@ -143,15 +142,14 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
left: 0,
width: 0,
height: 0
} as Dimension;
};
}
return {
top: this.imageRef.nativeElement.offsetTop,
left: this.imageRef.nativeElement.offsetLeft,
top: this.imageRef.nativeElement.offsetParent.offsetTop,
left: this.imageRef.nativeElement.offsetParent.offsetLeft,
width: this.imageRef.nativeElement.width,
height: this.imageRef.nativeElement.height
} as Dimension;
};
}
}