From e93e75221ecc19832d9f98e97475b6ebb2f4f110 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 31 Oct 2021 08:47:23 +0100
Subject: [PATCH] Add scaling of full image view depending on aspect ratio

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../components/file-gallery/file-gallery.component.html  | 6 ++++--
 .../components/file-gallery/file-gallery.component.scss  | 9 +++++++++
 .../components/file-gallery/file-gallery.component.ts    | 8 ++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
index 76e3127..18984fd 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
@@ -4,11 +4,13 @@
   </button>
   <div class="file-full-view" fxFlex="80%"
        (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null">
-    <div class="file-full-view-inner">
+    <div class="file-full-view-inner" #imageContainer>
       <div *ngIf="!this.fileContentUrl" class="url-loading-backdrop">
         <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
       </div>
-      <img [src]="this.fileContentUrl" decoding="async" alt="Image"/>
+      <img #fullImage *ngIf="this.fileContentUrl" (load)="this.adjustImageSize(fullImage, imageContainer)" (window:resize)="adjustImageSize(fullImage, imageContainer)"
+           [class.align-width]="this.scaleWidth" [class.align-height]="!this.scaleWidth"
+           [src]="this.fileContentUrl" decoding="async" alt="Image"/>
     </div>
   </div>
   <mat-divider fxFlex></mat-divider>
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
index 00a5cc0..92aade4 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
@@ -44,6 +44,15 @@ img {
   margin: auto;
 }
 
+.align-width {
+  width: 100%;
+  height: auto;
+}
+.align-height {
+  height: 100%;
+  width: auto;
+}
+
 .close-button {
   position: absolute;
   top: 0;
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
index 468bc39..b241a1a 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
@@ -30,6 +30,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
 
   selectedFile: Selectable<File> | undefined;
   fileContentUrl: SafeResourceUrl | undefined;
+  scaleWidth = false;
 
   constructor(private fileService: FileService) {
   }
@@ -131,4 +132,11 @@ export class FileGalleryComponent implements OnChanges, OnInit {
     }
     return undefined;
   }
+
+  public adjustImageSize(fullImage: HTMLImageElement, imageContainer: HTMLDivElement): void {
+    const containerRatio = imageContainer.clientHeight / imageContainer.clientWidth;
+    const imageAdjHeight = fullImage.height / containerRatio;
+    const imageAdjWidth = fullImage.width * containerRatio;
+    this.scaleWidth = imageAdjWidth > imageAdjHeight;
+  }
 }