Fix file grid being wider than 100%

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

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

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

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

@@ -4,16 +4,18 @@
   display: flex;
 }
 
-.image-container > img {
+img {
   margin: auto;
+  max-height: 100%;
+  max-width: 100%;
+  height: auto;
+  width: auto;
 }
 
 img.scale-height {
   height: 100%;
-  width: auto;
 }
 
 img.scale-width {
   width: 100%;
-  height: auto;
 }

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

@@ -9,6 +9,8 @@ import {SafeResourceUrl} from "@angular/platform-browser";
 export class ContentAwareImageComponent {
 
   @Input() imageSrc!: string | SafeResourceUrl;
+  @Input() maximizeHeight: boolean = true;
+  @Input() maximizeWidth: boolean = true;
 
   scaleWidth = false;
 

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-title *ngIf="!!gridEntry.file?.name">{{gridEntry.file?.name}}</mat-card-title>
   <mat-card-content *ngIf="contentUrl !== undefined">
-    <app-content-aware-image class="entry-image" *ngIf="contentUrl" [imageSrc]="contentUrl"></app-content-aware-image>
+    <app-content-aware-image [maximizeHeight]="false" class="entry-image" *ngIf="contentUrl" [imageSrc]="contentUrl"></app-content-aware-image>
   </mat-card-content>
   <mat-card-footer>
     <mat-progress-bar *ngIf="contentUrl === undefined" mode="indeterminate"></mat-progress-bar>

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

@@ -1,8 +1,11 @@
-<cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" maxBufferPx="500" minBufferPx="500" itemSize="250">
+<div class="file-gallery-inner">
-  <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
+  <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" maxBufferPx="500" minBufferPx="500" itemSize="250">
-    <div class="file-row">
+    <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
-      <app-file-grid-entry (clickEvent)="setSelectedFile($event.gridEntry)" (dblClickEvent)="fileDblClickEvent.emit($event.gridEntry.file)"
+      <div class="file-row">
-                           *ngFor="let gridEntry of rowEntry" [gridEntry]="gridEntry"></app-file-grid-entry>
+        <app-file-grid-entry (clickEvent)="setSelectedFile($event.gridEntry)" (dblClickEvent)="fileDblClickEvent.emit($event.gridEntry.file)"
+                             *ngFor="let gridEntry of rowEntry" [gridEntry]="gridEntry"></app-file-grid-entry>
+      </div>
     </div>
-  </div>
+  </cdk-virtual-scroll-viewport>
-</cdk-virtual-scroll-viewport>
+
+</div>

mediarepo-ui/src/app/components/file-grid/file-grid.component.scss

@@ -6,9 +6,18 @@ app-file-grid-entry {
 
 .file-scroll {
   height: 100%;
+  width: 100%;
+}
+
+.file-gallery-inner {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: hidden;
 }
 
 .file-row {
   display: flex;
   flex-direction: row;
+  width: 100%;
 }

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

@@ -1,5 +1,5 @@
 import {
-  Component,
+  Component, ElementRef,
   EventEmitter,
   HostListener,
   Input, OnChanges,
@@ -27,6 +27,7 @@ export class FileGridComponent implements OnChanges, OnInit {
   @Output() fileSelectEvent = new EventEmitter<File | undefined>();
 
   @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
+  @ViewChild("galleryWrapper") galleryWrapper!: ElementRef<HTMLDivElement>;
 
   selectedEntries: GridEntry[] = [];
 
@@ -50,23 +51,37 @@ export class FileGridComponent implements OnChanges, OnInit {
     }
   }
 
-  private handlePreselection() {
+  /**
-    if (this.preselectedFile && this.selectedEntries.length === 0) {
+   * File selector logic
-      const selectedEntry = this.gridEntries.find(e => e.file.hash == this.preselectedFile?.hash);
+   * @param {FileGridEntryComponent} clickedEntry
-      if (selectedEntry) {
+   */
-        this.setSelectedFile(selectedEntry);
+  setSelectedFile(clickedEntry: GridEntry) {
-      }
+    const previousSelectionSize = this.selectedEntries.length;
-    }
-  }
 
-  private handleScrollToPreselection() {
+    if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) {
-    if (this.preselectedFile && this.selectedEntries.length === 0) {
+      this.selectedEntries.forEach(entry => {if (entry !== clickedEntry) entry.selected = false});
-      const rowIndex = this.partitionedGridEntries.findIndex(
+      this.selectedEntries = [];
-        r => r.findIndex(e => e.file.hash == this.preselectedFile?.hash) >= 0);
+    }
-      if (rowIndex >= 0) {
+    if (this.shiftClicked && this.selectedEntries.length > 0) {
-        this.virtualScroll?.scrollToIndex(rowIndex);
+      this.handleShiftSelect(clickedEntry);
+    } else {
+      clickedEntry.selected = !clickedEntry.selected;
+      if (!clickedEntry.selected) {
+        const index = this.selectedEntries.indexOf(clickedEntry);
+        if (index > -1) {
+          this.selectedEntries.splice(index, 1);
+        }
+      } else {
+        this.selectedEntries.push(clickedEntry);
       }
     }
+    if (this.selectedEntries.length == 1) {
+      this.fileSelectEvent.emit(this.selectedEntries.map(entry => entry.file)[0]);
+    } else if (this.selectedEntries.length == 0 && previousSelectionSize == 1){
+      this.fileSelectEvent.emit(undefined);
+    } else {
+      this.fileMultiselectEvent.emit(this.selectedEntries.map(entry => entry.file));
+    }
   }
 
   private setPartitionedGridEntries() {
@@ -98,39 +113,6 @@ export class FileGridComponent implements OnChanges, OnInit {
     }
   }
 
-  /**
-   * File selector logic
-   * @param {FileGridEntryComponent} clickedEntry
-   */
-  setSelectedFile(clickedEntry: GridEntry) {
-    const previousSelectionSize = this.selectedEntries.length;
-
-    if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) {
-      this.selectedEntries.forEach(entry => {if (entry !== clickedEntry) entry.selected = false});
-      this.selectedEntries = [];
-    }
-    if (this.shiftClicked && this.selectedEntries.length > 0) {
-      this.handleShiftSelect(clickedEntry);
-    } else {
-      clickedEntry.selected = !clickedEntry.selected;
-      if (!clickedEntry.selected) {
-        const index = this.selectedEntries.indexOf(clickedEntry);
-        if (index > -1) {
-          this.selectedEntries.splice(index, 1);
-        }
-      } else {
-        this.selectedEntries.push(clickedEntry);
-      }
-    }
-    if (this.selectedEntries.length == 1) {
-      this.fileSelectEvent.emit(this.selectedEntries.map(entry => entry.file)[0]);
-    } else if (this.selectedEntries.length == 0 && previousSelectionSize == 1){
-      this.fileSelectEvent.emit(undefined);
-    } else {
-      this.fileMultiselectEvent.emit(this.selectedEntries.map(entry => entry.file));
-    }
-  }
-
   private handleShiftSelect(clickedEntry: GridEntry): void {
     const lastEntry = this.selectedEntries[this.selectedEntries.length - 1];
     let found = false;