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,17 +153,19 @@ 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
-      if (this.imageZoom > 4) {
-        this.imageZoom = 4;
-      }
-    } else if (delta < 0) {
-      this.imageZoom -= 0.2
-      if (this.imageZoom < 0.5) {
-        this.imageZoom = 0.5;
+      if (delta > 0) {
+        this.imageZoom += 0.2
+        if (this.imageZoom > 4) {
+          this.imageZoom = 4;
+        }
+      } else if (delta < 0) {
+        this.imageZoom -= 0.2
+        if (this.imageZoom < 0.5) {
+          this.imageZoom = 0.5;
+        }
       }
     }
   }