Enhancement: allow setting default pdf zoom (#9017)

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -9,9 +9,9 @@
     }
     <div class="input-group input-group-sm me-md-5 d-none d-md-flex">
       <button class="btn btn-outline-secondary" (click)="decreaseZoom()" i18n>-</button>
-      <select class="form-select" (change)="onZoomSelect($event)">
+      <select class="form-select" (change)="setZoom($event.target.value)">
         @for (setting of zoomSettings; track setting) {
-          <option [value]="setting" [selected]="previewZoomSetting === setting">
+          <option [value]="setting" [attr.selected]="isZoomSelected(setting) ? 'selected' : null">
             {{ getZoomSettingTitle(setting) }}
           </option>
         }
@@ -356,9 +356,9 @@
 </ng-template>
 
 <ng-template #previewContent>
-  <div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
+  <div class="thumb-preview position-absolute pe-none text-center" [class.fade]="previewLoaded">
     @if (showThumbnailOverlay) {
-      <img [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
+      <img [src]="thumbUrl | safeUrl" class="mx-auto" [attr.width]="previewZoomScale === 'page-fit' ? 'auto' : '100%'" [attr.height]="previewZoomScale === 'page-fit' ? '100%' : 'auto'" alt="Document loading..." i18n-alt />
     }
     <div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
       <div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -85,5 +85,8 @@ textarea.rtl {
 
   > img {
     filter: blur(1px);
+    max-width: 100%;
+    object-fit: contain;
+    object-position: top;
   }
 }

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -62,7 +62,10 @@ import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { DocumentDetailComponent } from './document-detail.component'
+import {
+  DocumentDetailComponent,
+  ZoomSetting,
+} from './document-detail.component'
 
 const doc: Document = {
   id: 3,
@@ -753,7 +756,7 @@ describe('DocumentDetailComponent', () => {
 
   it('should support zoom controls', () => {
     initNormally()
-    component.onZoomSelect({ target: { value: '1' } } as any) // from select
+    component.setZoom(ZoomSetting.One) // from select
     expect(component.previewZoomSetting).toEqual('1')
     component.increaseZoom()
     expect(component.previewZoomSetting).toEqual('1.5')
@@ -761,18 +764,18 @@ describe('DocumentDetailComponent', () => {
     expect(component.previewZoomSetting).toEqual('2')
     component.decreaseZoom()
     expect(component.previewZoomSetting).toEqual('1.5')
-    component.onZoomSelect({ target: { value: '1' } } as any) // from select
+    component.setZoom(ZoomSetting.One) // from select
     component.decreaseZoom()
     expect(component.previewZoomSetting).toEqual('.75')
 
-    component.onZoomSelect({ target: { value: 'page-fit' } } as any) // from select
+    component.setZoom(ZoomSetting.PageFit) // from select
     expect(component.previewZoomScale).toEqual('page-fit')
     expect(component.previewZoomSetting).toEqual('1')
     component.increaseZoom()
     expect(component.previewZoomSetting).toEqual('1.5')
     expect(component.previewZoomScale).toEqual('page-width')
 
-    component.onZoomSelect({ target: { value: 'page-fit' } } as any) // from select
+    component.setZoom(ZoomSetting.PageFit) // from select
     expect(component.previewZoomScale).toEqual('page-fit')
     expect(component.previewZoomSetting).toEqual('1')
     component.decreaseZoom()
@@ -780,6 +783,19 @@ describe('DocumentDetailComponent', () => {
     expect(component.previewZoomScale).toEqual('page-width')
   })
 
+  it('should select correct zoom setting in dropdown', () => {
+    initNormally()
+    component.setZoom(ZoomSetting.PageFit)
+    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeTruthy()
+    expect(component.isZoomSelected(ZoomSetting.One)).toBeFalsy()
+    component.setZoom(ZoomSetting.PageWidth)
+    expect(component.isZoomSelected(ZoomSetting.One)).toBeTruthy()
+    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+    component.setZoom(ZoomSetting.Quarter)
+    expect(component.isZoomSelected(ZoomSetting.Quarter)).toBeTruthy()
+    expect(component.isZoomSelected(ZoomSetting.PageFit)).toBeFalsy()
+  })
+
   it('should support updating notes dynamically', () => {
     const notes = [
       {

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -124,7 +124,7 @@ enum ContentRenderType {
   TIFF = 'tiff',
 }
 
-enum ZoomSetting {
+export enum ZoomSetting {
   PageFit = 'page-fit',
   PageWidth = 'page-width',
   Quarter = '.25',
@@ -328,6 +328,7 @@ export class DocumentDetailComponent
   }
 
   ngOnInit(): void {
+    this.setZoom(this.settings.get(SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING))
     this.documentForm.valueChanges
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
@@ -1072,14 +1073,13 @@ export class DocumentDetailComponent
     }
   }
 
-  onZoomSelect(event: Event) {
-    const setting = (event.target as HTMLSelectElement)?.value as ZoomSetting
-    if (ZoomSetting.PageFit === setting) {
-      this.previewZoomSetting = ZoomSetting.One
+  setZoom(setting: ZoomSetting) {
+    if (ZoomSetting.PageFit === setting || ZoomSetting.PageWidth === setting) {
       this.previewZoomScale = setting
+      this.previewZoomSetting = ZoomSetting.One
     } else {
-      this.previewZoomScale = ZoomSetting.PageWidth
       this.previewZoomSetting = setting
+      this.previewZoomScale = ZoomSetting.PageWidth
     }
   }
 
@@ -1089,6 +1089,14 @@ export class DocumentDetailComponent
     )
   }
 
+  isZoomSelected(setting: ZoomSetting): boolean {
+    if (this.previewZoomScale === ZoomSetting.PageFit) {
+      return setting === ZoomSetting.PageFit
+    }
+
+    return this.previewZoomSetting === setting
+  }
+
   getZoomSettingTitle(setting: ZoomSetting): string {
     switch (setting) {
       case ZoomSetting.PageFit: