Change file grid to have a dynamic column count

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

mediarepo-ui/src-tauri/src/main.rs

@@ -3,6 +3,7 @@ all(not(debug_assertions), target_os = "windows"),
 windows_subsystem = "windows"
 )]
 
+use tauri::{LogicalSize, Size};
 use tracing_subscriber::EnvFilter;
 use tracing_subscriber::fmt::format::FmtSpan;
 
@@ -15,7 +16,8 @@ fn main() {
         .init();
     mediarepo_api::tauri_plugin::register_plugin(tauri::Builder::default())
         .on_page_load(|window, _| {
-            window.set_title(format!("mediarepo {}", env!("CARGO_PKG_VERSION")).as_str()).unwrap();
+            window.set_title(format!("mediarepo {}", env!("CARGO_PKG_VERSION")).as_str()).expect("failed to set window title");
+            window.set_min_size(Some(Size::Logical(LogicalSize { width: 1000.0, height: 750.0 }))).expect("failed to set minimal size");
         })
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

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

@@ -1,12 +1,23 @@
-import {Component, DoCheck, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    DoCheck,
+    ElementRef,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewChild
+} from "@angular/core";
 import {SafeResourceUrl} from "@angular/platform-browser";
 
 @Component({
     selector: "app-content-aware-image",
     templateUrl: "./content-aware-image.component.html",
-    styleUrls: ["./content-aware-image.component.scss"]
+    styleUrls: ["./content-aware-image.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ContentAwareImageComponent implements OnInit, DoCheck {
+export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
     @Input() imageSrc!: string | SafeResourceUrl;
     @Input() maximizeHeight: boolean = true;
     @Input() maximizeWidth: boolean = true;
@@ -17,17 +28,28 @@ export class ContentAwareImageComponent implements OnInit, DoCheck {
     scaleWidth = false;
     private previousHeight = 0;
     private previousWidth = 0;
+    private readonly checkInterval?: number;
 
-    constructor() {
+    constructor(private changeDetector: ChangeDetectorRef) {
+        this.checkInterval = setInterval(() => this.checkSize(), 1000);
     }
 
     public ngOnInit(): void {
         if (this.image) {
             this.image.nativeElement.decoding = this.decoding;
+            this.changeDetector.detach();
         }
     }
 
+    public ngOnDestroy(): void {
+        clearInterval(this.checkInterval);
+    }
+
     public ngDoCheck(): void {
+        this.checkSize();
+    }
+
+    public checkSize(): void {
         if (this.image?.nativeElement && this.imageContainer?.nativeElement) {
             this.adjustSize(this.image.nativeElement, this.imageContainer.nativeElement);
         }
@@ -47,7 +69,12 @@ export class ContentAwareImageComponent implements OnInit, DoCheck {
             this.previousWidth = containerWidth;
             const imageRelativeHeight = image.naturalHeight / containerHeight;
             const imageRelativeWidth = image.naturalWidth / containerWidth;
-            this.scaleWidth = imageRelativeWidth > imageRelativeHeight;
+            const scaleWidth = imageRelativeWidth > imageRelativeHeight;
+
+            if (scaleWidth != this.scaleWidth) {
+                this.scaleWidth = scaleWidth;
+                this.changeDetector.detectChanges();
+            }
         }
     }
 }

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

@@ -1,6 +1,7 @@
 <div #inner
      (keyDownEvent)="handleKeydownEvent($event)"
      (keyUpEvent)="handleKeyupEvent($event)"
+     (window:resize)="this.calculateColumnCount()"
      appInputReceiver
      class="file-grid-inner">
     <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="260" maxBufferPx="2000"

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

@@ -1,6 +1,8 @@
 import {
+    AfterViewChecked,
     AfterViewInit,
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ElementRef,
     EventEmitter,
@@ -27,10 +29,9 @@ import {LoggingService} from "../../../../../services/logging/logging.service";
     styleUrls: ["./file-grid.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
+export class FileGridComponent implements OnChanges, OnInit, AfterViewInit, AfterViewChecked {
 
     @Input() files: File[] = [];
-    @Input() columns: number = 6;
     @Input() preselectedFile: File | undefined;
     @Output() fileOpen = new EventEmitter<File>();
     @Output() fileSelect = new EventEmitter<File[]>();
@@ -44,11 +45,14 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
     public selectedEntries: Selectable<File>[] = [];
     public partitionedGridEntries: Selectable<File>[][] = [];
 
+    private columns = 6;
+    private entrySizePx = 260;
     private shiftClicked = false;
     private ctrlClicked = false;
     private gridEntries: Selectable<File>[] = [];
 
     constructor(
+        private changeDetector: ChangeDetectorRef,
         private logger: LoggingService,
         private tabService: TabService,
         private fileService: FileService,
@@ -64,6 +68,11 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
 
     public ngAfterViewInit(): void {
         this.focus();
+        this.calculateColumnCount();
+    }
+
+    public ngAfterViewChecked(): void {
+        this.calculateColumnCount();
     }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -190,6 +199,20 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit {
         this.fileChanged.next();
     }
 
+    public calculateColumnCount() {
+        if (this.inner && this.inner.nativeElement) {
+            const width = Math.abs(this.inner.nativeElement.clientWidth);
+            const columns = Math.floor(width / this.entrySizePx);
+
+            if (columns != this.columns) {
+                console.debug("grid displaying", columns, "columns");
+                this.columns = Math.max(columns, 1);
+                this.setPartitionedGridEntries();
+                this.changeDetector.detectChanges();
+            }
+        }
+    }
+
     private setPartitionedGridEntries() {
         this.partitionedGridEntries = [];
         let scrollToIndex = -1;