Fix scaling issues with images

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

mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.html

@@ -1,6 +1,5 @@
-<div #imageContainer class="image-container">
+<div #imageContainer class="image-container" (window:resize)="this.adjustSize(image, imageContainer)">
   <img #image [src]="this.imageSrc" alt="" (load)="this.adjustSize(image, imageContainer)"
-       (window:resize)="this.adjustSize(image, imageContainer)"
        [class.scale-width]="scaleWidth && maximizeWidth" [class.scale-height]="(!scaleWidth) && maximizeHeight"
        decoding="async">
 </div>

mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.ts

@@ -24,8 +24,8 @@ export class ContentAwareImageComponent {
   public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void {
     const containerHeight = Math.abs(imageContainer.clientHeight);
     const containerWidth = Math.abs(imageContainer.clientWidth);
-    const imageRelativeHeight = image.height / containerHeight;
+    const imageRelativeHeight = image.naturalHeight / containerHeight;
-    const imageRelativeWidth = image.width / containerWidth;
+    const imageRelativeWidth = image.naturalWidth / containerWidth;
     this.scaleWidth = imageRelativeWidth > imageRelativeHeight;
   }
 }

mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.ts

@@ -28,8 +28,11 @@ export class FileGalleryEntryComponent implements OnInit, OnChanges {
   constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { }
 
   async ngOnChanges(changes: SimpleChanges): Promise<void> {
-    if (!this.cachedFile || this.file.data.hash !== this.cachedFile.hash) { // handle changes to the file when the component is not destroyed
+    if (changes["file"] && (!this.cachedFile || this.file.data.hash !== this.cachedFile!.hash)) { // handle changes to the file when the component is not destroyed
       this.cachedFile = this.file.data;
+      this.contentUrl = undefined;
+      await this.loadImage();
+    } else if (!this.contentUrl) {
       await this.loadImage();
     }
   }
@@ -41,14 +44,17 @@ export class FileGalleryEntryComponent implements OnInit, OnChanges {
 
   async loadImage() {
     try {
-      const thumbnails = await this.fileService.getThumbnails(this.file.data.hash);
+      const hash = this.file.data.hash;
+      const thumbnails = await this.fileService.getThumbnails(hash);
       let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500));
       thumbnail = thumbnail ?? thumbnails[0];
 
       if (!thumbnail) {
         console.log("Thumbnail is empty?!", thumbnails);
-      } else {
+      } else if (this.file.data.hash === hash) {
         this.contentUrl = await this.fileService.readThumbnail(thumbnail!!);
+      } else {
+        console.warn("Grid file updated while loading thumbnail.")
       }
     } catch (err) {
       this.errorBroker.showError(err);