Add scaling of full image view depending on aspect ratio

Signed-off-by: trivernis <trivernis@protonmail.com>

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>

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;

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;
+  }
 }