Increase max zoom level

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

mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.html

@@ -1,9 +1,9 @@
 <div (mouseenter)="this.mouseInImageView = true" (mouseleave)="this.mouseInImageView = false"
      class="image-full-view-inner">
     <div class="zoom-slider">
-        <mat-slider (input)="this.imageZoom=$event.value ?? 1" [value]="this.imageZoom" max="4"
-                    min="0.5" step="0.1" vertical></mat-slider>
-        <button (click)="this.resetImage()" mat-icon-button>
+        <mat-slider (input)="this.imageZoom=$event.value ?? 1" [max]="this.maxZoom" [min]="this.minZoom"
+                    [value]="this.imageZoom" step="0.1" vertical></mat-slider>
+        <button (click)="this.resetImage()" class="reset-image-zoom-button" mat-icon-button>
             <ng-icon name="mat-refresh"></ng-icon>
         </button>
     </div>

mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.scss

@@ -23,14 +23,13 @@
     opacity: 0.5;
     padding: 1em 0.5em;
     transition-duration: 0.2s;
-}
 
-.zoom-slider:hover {
+    &:hover {
         opacity: 1;
         background-color: rgba(0, 0, 0, 0.3);
         border-radius: 1em;
     }
-
+}
 
 .image-full-view-inner {
     height: 100%;
@@ -42,3 +41,8 @@
 .hidden {
     display: none;
 }
+
+.reset-image-zoom-button {
+    height: 3em;
+    margin: auto
+}

mediarepo-ui/src/app/components/shared/file/content-viewer/image-viewer/image-viewer.component.ts

@@ -9,6 +9,9 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 })
 export class ImageViewerComponent implements OnChanges {
     @Input() imageUrl!: SafeResourceUrl | string;
+    @Input() maxZoom = 10;
+    @Input() minZoom = 0.5;
+
     public imageZoom = 1;
     public imagePosition = { x: 0, y: 0 };
     public mouseInImageView = false;
@@ -52,13 +55,13 @@ export class ImageViewerComponent implements OnChanges {
 
             if (delta > 0) {
                 this.imageZoom += 0.2;
-                if (this.imageZoom > 4) {
-                    this.imageZoom = 4;
+                if (this.imageZoom > this.maxZoom) {
+                    this.imageZoom = this.maxZoom;
                 }
             } else if (delta < 0) {
                 this.imageZoom -= 0.2;
-                if (this.imageZoom < 0.5) {
-                    this.imageZoom = 0.5;
+                if (this.imageZoom < this.minZoom) {
+                    this.imageZoom = this.minZoom;
                 }
             }
         }