Add file index display

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

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

@@ -12,6 +12,8 @@
         <app-content-viewer (contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, [this.selectedFile!.data])"
                             *ngIf="this.selectedFile"
                             [file]="this.selectedFile!.data"></app-content-viewer>
+        <div class="display-metadata">
+            <span>{{this.selectedIndex + 1}} of {{this.entries.length}}</span></div>
         <app-flap-button (appClick)="this.togglePreviewStrip()" align="center" attach="bottom">
             <ng-icon *ngIf="previewStripVisible" name="mat-expand-more"></ng-icon>
             <ng-icon *ngIf="!previewStripVisible" name="mat-expand-less"></ng-icon>

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

@@ -92,3 +92,14 @@ app-content-viewer {
         margin: auto;
     }
 }
+
+.display-metadata {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    span {
+        margin: 0.5em;
+        color: $text-darker-10;
+    }
+}

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

@@ -45,6 +45,7 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit, A
     public fileContentUrl: SafeResourceUrl | undefined;
     public fileChanged = new BehaviorSubject<void>(undefined);
 
+    public selectedIndex = 0;
     public imageViewHeightPercent = 80;
     public previewStripVisible = true;
     public previewedEntries: (Selectable<File> | undefined)[] = [];
@@ -103,6 +104,7 @@ export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit, A
             this.selectedFile?.unselect();
             entry.select();
             this.selectedFile = entry;
+            this.selectedIndex = this.entries.indexOf(entry);
             await this.loadSelectedFile();
 
             this.fileSelect.emit(this.selectedFile.data);