From b2ad753da2d6f19371360bf07f75e4547e9544d0 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 31 Oct 2021 17:49:37 +0100
Subject: [PATCH] Center the selected item in the gallery view strip

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../file-gallery/file-gallery.component.html        |  2 +-
 .../file-gallery/file-gallery.component.ts          | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
index b0ef55d..2134b73 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
@@ -24,7 +24,7 @@
   </div>
   <mat-divider fxFlex></mat-divider>
   <div class="file-scroll-view" fxFlex="20%">
-    <cdk-virtual-scroll-viewport #virtualScroll orientation="horizontal" itemSize="250" minBufferPx="1000"
+    <cdk-virtual-scroll-viewport #virtualScroll orientation="horizontal" itemSize="260" minBufferPx="1000"
                                  maxBufferPx="3000" class="file-scroll-viewport">
       <div *cdkVirtualFor="let entry of entries" class="file-item">
         <app-file-gallery-entry [file]="entry" (fileSelectEvent)="onEntrySelect($event)"></app-file-gallery-entry>
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
index ee8d354..f80356e 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
@@ -50,8 +50,19 @@ export class FileGalleryComponent implements OnChanges, OnInit {
       this.selectedFile?.unselect();
       entry.select();
       this.selectedFile = entry;
+      const selectedIndex = this.entries.indexOf(entry);
+      //this.virtualScroll.scrollToIndex(, "smooth");
       await this.loadSelectedFile();
-      this.virtualScroll.scrollToIndex(this.entries.indexOf(entry), "smooth");
+
+      if (this.virtualScroll) {
+        const viewportSize = this.virtualScroll.getViewportSize();
+        const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered
+        this.virtualScroll.scrollToIndex(Math.max(selectedIndex - indexAdjustment, 0), "smooth");
+
+        if (selectedIndex > indexAdjustment) {
+          this.virtualScroll.scrollToOffset(this.virtualScroll.measureScrollOffset("left") + 130, "smooth");
+        }
+      }
       this.fileSelectEvent.emit(this.selectedFile.data);
     }
   }