From f1b3a12bc45e5ad4a9b918b99232f9a62f214096 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Fri, 30 Apr 2021 23:40:55 +0200
Subject: [PATCH] Improving grid photo rendering performance for videos

---
 .../grid/photo/photo.grid.gallery.component.css       | 11 ++++++++---
 .../grid/photo/photo.grid.gallery.component.html      |  4 +---
 .../grid/photo/photo.grid.gallery.component.ts        | 10 ++++------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
index 680f094d..ccdd0d61 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.css
@@ -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);
diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
index 8e982940..c7c8ca16 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
@@ -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>
 
 
diff --git a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
index c2891fd2..f83b5623 100644
--- a/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.ts
@@ -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;
+    };
   }
 
 }