Add parameter to specify the decoding strategy on content-aware-images

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

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

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

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

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {SafeResourceUrl} from "@angular/platform-browser";
 
 @Component({
@@ -6,17 +6,26 @@ import {SafeResourceUrl} from "@angular/platform-browser";
   templateUrl: './content-aware-image.component.html',
   styleUrls: ['./content-aware-image.component.scss']
 })
-export class ContentAwareImageComponent {
+export class ContentAwareImageComponent implements OnInit {
 
   @Input() imageSrc!: string | SafeResourceUrl;
   @Input() maximizeHeight: boolean = true;
   @Input() maximizeWidth: boolean = true;
+  @Input() decoding: "async" | "sync" | "auto" = "auto";
+
+  @ViewChild("image") image: ElementRef<HTMLImageElement> | undefined;
 
   scaleWidth = false;
 
   constructor() {
   }
 
+  public ngOnInit(): void {
+    if (this.image) {
+      this.image.nativeElement.decoding = this.decoding;
+    }
+  }
+
   /**
    * Fits the image into the container
    * @param {HTMLImageElement} image

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

@@ -1,4 +1,4 @@
 <div (click)="fileSelectEvent.emit(this.file)" [class.selected]="this.file.selected" class="image-wrapper">
   <mat-progress-spinner *ngIf="!contentUrl"></mat-progress-spinner>
-  <app-content-aware-image *ngIf="contentUrl" [imageSrc]="contentUrl"></app-content-aware-image>
+  <app-content-aware-image decoding="async" *ngIf="contentUrl" [imageSrc]="contentUrl"></app-content-aware-image>
 </div>

mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html

@@ -19,7 +19,7 @@
       <div #imageDragContainer (cdkDragMoved)="this.onDragMoved($event)" *ngIf="this.fileContentUrl"
            [cdkDragFreeDragPosition]="this.imagePosition" cdkDrag class="image-drag-container">
         <div #scaledImage [style]="{scale: this.imageZoom}" class="image-scale-container">
-          <app-content-aware-image [imageSrc]="this.fileContentUrl"></app-content-aware-image>
+          <app-content-aware-image [imageSrc]="this.fileContentUrl" decoding="sync"></app-content-aware-image>
         </div>
       </div>
     </div>

mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html

@@ -1,7 +1,7 @@
 <mat-card #card (click)="clickEvent.emit(this)" (dblclick)="dblClickEvent.emit(this)"
           [ngClass]="{'selected': gridEntry.selected}">
   <mat-card-content *ngIf="contentUrl !== undefined">
-    <app-content-aware-image *ngIf="contentUrl" [imageSrc]="contentUrl" class="entry-image"></app-content-aware-image>
+    <app-content-aware-image decoding="async" *ngIf="contentUrl" [imageSrc]="contentUrl" class="entry-image"></app-content-aware-image>
   </mat-card-content>
   <mat-card-footer>
     <mat-progress-bar *ngIf="contentUrl === undefined" mode="indeterminate"></mat-progress-bar>