xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects 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 { img {
width: inherit; width: inherit;
height: inherit; height: inherit;
@ -61,7 +65,7 @@ img {
100% { 100% {
transform: translateY(-100%); transform: translateY(-100%);
background: rgba(0,0,0,0.8); background: rgba(0, 0, 0, 0.8);
} }
} }
@ -69,7 +73,7 @@ img {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
background: rgba(0,0,0,0.8); background: rgba(0, 0, 0, 0.8);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
@ -126,7 +130,8 @@ a {
font-size: large; font-size: large;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
transform: translate(-100%); top: 0;
right: 0;
white-space: nowrap; white-space: nowrap;
border-bottom-left-radius: 15px !important; border-bottom-left-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.5); 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> </app-gallery-grid-photo-loading>
<div *ngIf="gridMedia.isVideo()" class="video-indicator" <div *ngIf="gridMedia.isVideo()" class="video-indicator">
[style.marginTop.px]="-container.nativeElement.offsetHeight"
[style.marginLeft.px]="container.nativeElement.offsetWidth">
{{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div> {{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 {PageHelper} from '../../../../model/page.helper';
import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDTO'; import {PhotoDTO, PhotoMetadata} from '../../../../../../common/entities/PhotoDTO';
import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes} from '../../../../../../common/entities/SearchQueryDTO'; import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes} from '../../../../../../common/entities/SearchQueryDTO';
import {UserRoles} from '../../../../../../common/entities/UserDTO';
import {AuthenticationService} from '../../../../model/network/authentication.service'; import {AuthenticationService} from '../../../../model/network/authentication.service';
@Component({ @Component({
@ -143,15 +142,14 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
left: 0, left: 0,
width: 0, width: 0,
height: 0 height: 0
} as Dimension; };
} }
return { return {
top: this.imageRef.nativeElement.offsetTop, top: this.imageRef.nativeElement.offsetParent.offsetTop,
left: this.imageRef.nativeElement.offsetLeft, left: this.imageRef.nativeElement.offsetParent.offsetLeft,
width: this.imageRef.nativeElement.width, width: this.imageRef.nativeElement.width,
height: this.imageRef.nativeElement.height height: this.imageRef.nativeElement.height
} as Dimension; };
} }
} }