Add page up and down shortcut and improve scrolling

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

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

@@ -42,6 +42,30 @@ export class FileGalleryComponent implements OnChanges, OnInit {
         tabService.selectedTab.subscribe(() => this.adjustElementSizes());
     }
 
+    async ngOnInit(): Promise<void> {
+        if (!this.selectedFile || this.files.indexOf(
+            this.selectedFile.data) < 0) {
+            await this.onEntrySelect(
+                this.getPreselectedEntry() ?? this.entries[0])
+        }
+    }
+
+    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
+        if (changes["files"]) {
+            this.entries = this.files.map(
+                f => new Selectable(f, f.hash == this.selectedFile?.data.hash));
+            const selectedIndex = this.files.findIndex(
+                f => f.hash === this.selectedFile?.data.hash);
+
+            if (!this.selectedFile || selectedIndex < 0) {
+                await this.onEntrySelect(
+                    this.getPreselectedEntry() ?? this.entries[0])
+            } else {
+                await this.onEntrySelect(this.entries[selectedIndex])
+            }
+        }
+    }
+
     /**
      * Called when a new entry is selected
      * @param {Selectable<File>} entry
@@ -75,30 +99,6 @@ export class FileGalleryComponent implements OnChanges, OnInit {
         }
     }
 
-    async ngOnInit(): Promise<void> {
-        if (!this.selectedFile || this.files.indexOf(
-            this.selectedFile.data) < 0) {
-            await this.onEntrySelect(
-                this.getPreselectedEntry() ?? this.entries[0])
-        }
-    }
-
-    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
-        if (changes["files"]) {
-            this.entries = this.files.map(
-                f => new Selectable(f, f.hash == this.selectedFile?.data.hash));
-            const selectedIndex = this.files.findIndex(
-                f => f.hash === this.selectedFile?.data.hash);
-
-            if (!this.selectedFile || selectedIndex < 0) {
-                await this.onEntrySelect(
-                    this.getPreselectedEntry() ?? this.entries[0])
-            } else {
-                await this.onEntrySelect(this.entries[selectedIndex])
-            }
-        }
-    }
-
     /**
      * Selects the previous item in the gallery
      * @returns {Promise<void>}

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

@@ -1,5 +1,5 @@
 <div class="file-gallery-inner">
-    <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="250" maxBufferPx="2000"
+    <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="260" maxBufferPx="2000"
                                  minBufferPx="500">
         <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
             <div class="file-row">

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

@@ -108,8 +108,9 @@ export class FileGridComponent implements OnChanges, OnInit {
             const entries = this.gridEntries.slice(i * this.columns,
                 Math.min(this.gridEntries.length, (i + 1) * this.columns));
             this.partitionedGridEntries.push(entries);
+
             const preselectedEntry = entries.find(
-                e => e.data.hash == this.preselectedFile?.hash);
+                e => e.data.id == this.preselectedFile?.id);
 
             if (preselectedEntry) {
                 scrollToIndex = i;
@@ -120,6 +121,7 @@ export class FileGridComponent implements OnChanges, OnInit {
             setTimeout(() => {  // add timeout to avoid being stuck in the update loop
                 if (this.virtualScroll) {
                     this.virtualScroll?.scrollToIndex(scrollToIndex);
+
                     if (selectedEntry) {
                         selectedEntry.selected = true;
                         this.selectedEntries.push(selectedEntry);
@@ -206,7 +208,33 @@ export class FileGridComponent implements OnChanges, OnInit {
         this.setSelectedFile(this.gridEntries[selectedIndex]);
 
         if (this.virtualScroll) {
-            this.virtualScroll.scrollToIndex(Math.floor(selectedIndex / this.columns) - 1);
+            const viewportSize = this.virtualScroll.getViewportSize();
+            let offsetTop = this.virtualScroll.measureScrollOffset("top");
+            const contentOffset = Math.floor(selectedIndex / this.columns) * 260;
+            console.log(offsetTop, contentOffset, viewportSize);
+
+            if (contentOffset > offsetTop + viewportSize - 300 || contentOffset < offsetTop) {
+                this.virtualScroll.scrollToIndex(Math.floor(selectedIndex / this.columns));
+
+                offsetTop = this.virtualScroll.measureScrollOffset("top");
+                if (contentOffset < offsetTop + (viewportSize / 2)) {
+                    this.virtualScroll.scrollToOffset((offsetTop + 130) -  viewportSize/ 2)
+                }
+            }
+        }
+    }
+
+    private pageDown() {
+        if (this.virtualScroll) {
+            const offsetTop = this.virtualScroll.measureScrollOffset("top");
+            this.virtualScroll.scrollToOffset(offsetTop + this.virtualScroll.getViewportSize());
+        }
+    }
+
+    private pageUp() {
+        if (this.virtualScroll) {
+            const offsetTop = this.virtualScroll.measureScrollOffset("top");
+            this.virtualScroll.scrollToOffset(offsetTop - this.virtualScroll.getViewportSize());
         }
     }
 
@@ -228,6 +256,12 @@ export class FileGridComponent implements OnChanges, OnInit {
             case "ArrowUp":
                 this.handleArrowSelect("up");
                 break;
+            case "PageDown":
+                this.pageDown();
+                break;
+            case "PageUp":
+                this.pageUp();
+                break;
             case "a":
             case "A":
                 if (this.shiftClicked && this.ctrlClicked) {