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

import {
    AfterViewInit,
    Component,
    ElementRef,
    EventEmitter,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    ViewChild
} from "@angular/core";
import {File} from "../../../../../../api/models/File";
import {FileService} from "../../../../../services/file/file.service";
import {SafeResourceUrl} from "@angular/platform-browser";
import {Selectable} from "../../../../../models/Selectable";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {TabService} from "../../../../../services/tab/tab.service";
import {Key} from "w3c-keys";

@Component({
    selector: "app-file-gallery",
    templateUrl: "./file-gallery.component.html",
    styleUrls: ["./file-gallery.component.scss"]
})
export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit {

    @Input() files: File[] = [];
    @Input() preselectedFile: File | undefined;
    @Output() fileSelect = new EventEmitter<File | undefined>();
    @Output() fileDblClick = new EventEmitter<File>();
    @Output() appClose = new EventEmitter<FileGalleryComponent>();
    @Output() fileDelete = new EventEmitter<File>();
    @Output() fileDeleted = new EventEmitter<File[]>();

    @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport;

    @ViewChild("inner") inner!: ElementRef<HTMLDivElement>;

    public entries: Selectable<File>[] = [];
    public selectedFile: Selectable<File> | undefined;
    public fileContentUrl: SafeResourceUrl | undefined;

    private scrollTimeout: number | undefined;
    private escapeCount = 0;

    constructor(private tabService: TabService, private fileService: FileService) {
        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 ngAfterViewInit(): void {
        this.focus();
    }

    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
        if (changes["files"]) {
            this.entries = this.files.map(
                f => new Selectable(f, f.id == this.selectedFile?.data.id));
            const selectedIndex = this.files.findIndex(
                f => f.id === this.selectedFile?.data.id);

            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
     * @returns {Promise<void>}
     */
    async onEntrySelect(entry: Selectable<File>) {
        if (entry) {
            this.selectedFile?.unselect();
            entry.select();
            this.selectedFile = entry;
            await this.loadSelectedFile();

            if (this.virtualScroll) {
                clearTimeout(this.scrollTimeout);
                this.scrollTimeout = setTimeout(
                    () => this.scrollToSelection(),
                    0
                );  // we need to make sure the viewport has rendered
            }

            this.fileSelect.emit(this.selectedFile.data);
        }
    }

    /**
     * Loads the content url of the selected file
     * @returns {Promise<void>}
     */
    async loadSelectedFile() {
        if (this.selectedFile) {
            this.fileContentUrl = this.fileService.buildContentUrl(
                this.selectedFile.data);
        }
    }

    /**
     * Selects the previous item in the gallery
     * @returns {Promise<void>}
     */
    public async nextItem() {
        if (this.selectedFile) {
            let index = this.entries.indexOf(this.selectedFile) + 1;
            if (index == this.entries.length) {
                index--;  // restrict to elements
            }
            await this.onEntrySelect(this.entries[index]);
        } else {
            await this.onEntrySelect(this.entries[0]);
        }
    }

    /**
     * Selects the next item in the gallery
     * @returns {Promise<void>}
     */
    public async previousItem() {
        if (this.selectedFile) {
            let index = this.entries.indexOf(this.selectedFile) - 1;
            if (index < 0) {
                index++; // restrict to elements
            }
            await this.onEntrySelect(this.entries[index]);
        } else {
            await this.onEntrySelect(this.entries[0]);
        }
    }

    public adjustElementSizes(): void {
        if (this.virtualScroll) {
            this.virtualScroll.checkViewportSize();
            this.scrollToSelection();
        }
    }

    public focus() {
        this.inner.nativeElement.focus();
    }

    public async handleKeydownEvent(event: KeyboardEvent) {
        switch (event.key) {
            case Key.ArrowRight:
                await this.nextItem();
                break;
            case Key.ArrowLeft:
                await this.previousItem();
                break;
            case Key.Escape:
                this.onEscapeClick();
                break;
            case Key.Delete:
                if (this.selectedFile) {
                    this.fileDelete.emit(this.selectedFile.data);
                }
                break;
        }
    }

    private scrollToSelection(): void {
        if (this.selectedFile) {
            const selectedIndex = this.entries.indexOf(this.selectedFile);
            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"
                );
            }
        }
    }


    private getPreselectedEntry(): Selectable<File> | undefined {
        if (this.preselectedFile) {
            const entry = this.entries.find(
                e => e.data.id === this.preselectedFile?.id);
            if (entry) {
                return entry;
            }
        }
        return undefined;
    }

    private onEscapeClick(): void {
        if (this.escapeCount === 1) {
            this.appClose.emit(this);
        } else {
            this.escapeCount++;
            setTimeout(() => this.escapeCount--, 500);
        }
    }
}