Center the selected item in the gallery view strip

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

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>

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);
     }
   }