Fix scrolling behaviour to only zoom when in image view

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

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

@@ -4,7 +4,7 @@
   </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 (mouseenter)="this.mouseInImageView = true" (mouseleave)="this.mouseInImageView = false" class="file-full-view-inner">
       <div *ngIf="!this.fileContentUrl" class="url-loading-backdrop">
         <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
       </div>

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

@@ -32,9 +32,10 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   @ViewChild("imageDragContainer") imageDragContainer: ElementRef<HTMLDivElement> | undefined;
 
   public selectedFile: Selectable<File> | undefined;
-  fileContentUrl: SafeResourceUrl | undefined;
+  public fileContentUrl: SafeResourceUrl | undefined;
   public imageZoom = 1;
   public imagePosition = {x: 0, y: 0};
+  public mouseInImageView = false;
 
   constructor(private fileService: FileService) {
   }
@@ -152,7 +153,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
 
   @HostListener("mousewheel", ["$event"])
   private handleScroll(event: any) {
-    const delta = event.wheelDelta ?? event.detail
+    if (this.mouseInImageView) {
+      const delta = event.wheelDelta ?? event.detail;
 
       if (delta > 0) {
         this.imageZoom += 0.2
@@ -166,6 +168,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
         }
       }
     }
+  }
 
   private getPreselectedEntry(): Selectable<File> | undefined {
     if (this.preselectedFile) {