Kavita/UI/Web/src/app/manga-reader/manga-reader.component.html

<div class="reader" #reader [ngStyle]="{overflow: (isFullscreen ? 'auto' : 'visible')}">
    <div class="fixed-top overlay" *ngIf="menuOpen" [@slideFromTop]="menuOpen">
        <div style="display: flex; margin-top: 5px;">
            <button class="btn btn-icon" style="height: 100%" title="Back" (click)="closeReader()">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                <span class="visually-hidden">Back</span>
            </button>

            <div>
                <div style="font-weight: bold;">{{title}} <span class="clickable" *ngIf="incognitoMode" (click)="turnOffIncognito()" role="button" aria-label="Incognito mode is on. Toggle to turn off.">(<i class="fa fa-glasses"  aria-hidden="true"></i><span class="visually-hidden">Incognito Mode:</span>)</span></div>
                <div class="subtitle">
                    {{subtitle}}
                </div>
            </div>

            <div style="margin-left: auto; padding-right: 3%;">
                <button class="btn btn-icon btn-small" title="Shortcuts" (click)="openShortcutModal()">
                    <i class="fa-regular fa-rectangle-list" aria-hidden="true"></i>
                    <span class="visually-hidden">Keyboard Shortcuts Modal</span>
                </button>
                <!-- {{this.pageNum}} -->
                <!-- {{readerService.imageUrlToPageNum(canvasImage.src)}}<ng-container *ngIf="ShouldRenderDoublePage && (this.pageNum + 1 <= maxPages - 1 && this.pageNum > 0)"> - {{PageNumber + 1}}</ng-container> -->

                <button *ngIf="!bookmarkMode" class="btn btn-icon btn-small" role="checkbox" [attr.aria-checked]="isCurrentPageBookmarked" title="{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}" (click)="bookmarkPage()"><i class="{{isCurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i><span class="visually-hidden">{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}</span></button>
            </div>
        </div>
    </div>
    <ng-container *ngIf="isLoading">
        <div class="spinner-border text-secondary loading" role="status">
            <span class="invisible">Loading...</span>
        </div>
    </ng-container>

    <div (click)="toggleMenu()" class="reading-area" [ngStyle]="{'background-color': backgroundColor, 'height': readerMode === ReaderMode.Webtoon ? 'inherit' : 'calc(var(--vh)*100)'}" #readingArea>
        <ng-container *ngIf="readerMode !== ReaderMode.Webtoon; else webtoon">
            <div class="image-container" [ngClass]="{'d-none': !renderWithCanvas }">
                <canvas #content class="{{getFittingOptionClass()}}"
                    ondragstart="return false;" onselectstart="return false;">
                </canvas>
            </div>

            <div class="pagination-area">
                <!-- Pagination controls and screen hints-->
                <div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: 25 + '%')}">
                    <div *ngIf="showClickOverlay">
                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
                         title="Previous Page" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')" [ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? ImageHeight: 25 + '%'), 'left': (readerMode === ReaderMode.LeftRight && (this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL) ? ImageWidth: 'inherit')}">
                    <div *ngIf="showClickOverlay">
                        <i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
                         title="Next Page" aria-hidden="true"></i>
                    </div>
                </div>
            </div>

            <div class="image-container {{getFittingOptionClass()}}" [ngClass]="{'d-none': renderWithCanvas, 'center-double': ShouldRenderDoublePage,
                    'fit-to-width-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.WIDTH && ShouldRenderDoublePage,
                    'fit-to-height-double-offset': this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.HEIGHT && ShouldRenderDoublePage,
                    'original-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL && ShouldRenderDoublePage,
                    'reverse': ShouldRenderReverseDouble}">
                <img #image [src]="canvasImage.src" id="image-1"
                class="{{getFittingOptionClass()}} {{readerMode === ReaderMode.LeftRight || readerMode === ReaderMode.UpDown ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}">

                <ng-container *ngIf="ShouldRenderDoublePage && (this.pageNum + 1 <= maxPages - 1 && this.pageNum > 0)">
                    <img [src]="getPageUrl(PageNumber + 1)" id="image-2"  class="image-2 {{getFittingOptionClass()}} {{readerMode === ReaderMode.LeftRight || readerMode === ReaderMode.UpDown ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}} {{ShouldRenderReverseDouble ? 'reverse' : ''}}">
                </ng-container>
            </div>

        </ng-container>

        <ng-template #webtoon>
            <div class="webtoon-images" *ngIf="readerMode === ReaderMode.Webtoon && !isLoading && !inSetup">
                <app-infinite-scroller [pageNum]="pageNum"
                [bufferPages]="5"
                [goToPage]="goToPageEvent"
                (pageNumberChange)="handleWebtoonPageChange($event)"
                [totalPages]="maxPages"
                [urlProvider]="getPageUrl"
                (loadNextChapter)="loadNextChapter()"
                (loadPrevChapter)="loadPrevChapter()"
                [bookmarkPage]="showBookmarkEffectEvent"
                [fullscreenToggled]="fullscreenEvent"></app-infinite-scroller>
            </div>
        </ng-template>


    </div>

    <div class="fixed-bottom overlay" *ngIf="menuOpen" [@slideFromBottom]="menuOpen">
        <div class="mb-3" *ngIf="pageOptions != undefined && pageOptions.ceil != undefined">
            <span class="visually-hidden" id="slider-info"></span>
            <div class="row g-0">
                <button class="btn btn-small btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" title="Prev Chapter/Volume"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
                <button class="btn btn-small btn-icon col-1" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" title="First Page"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
                <div class="col custom-slider" *ngIf="pageOptions.ceil > 0; else noSlider">
                    <ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" [manualRefresh]="refreshSlider" (userChangeEnd)="sliderPageUpdate($event);startMenuCloseTimer()" (userChange)="sliderDragUpdate($event)" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
                </div>
                <ng-template #noSlider>
                    <div class="col custom-slider">
                        <ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" (userChangeEnd)="startMenuCloseTimer()" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
                    </div>
                </ng-template>
                <button class="btn btn-small btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" title="Last Page"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
                <button class="btn btn-small btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" title="Next Chapter/Volume"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
            </div>
        </div>
        <div class="row pt-4 ms-2 me-2">
            <div class="col">
                <button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === ReaderMode.Webtoon || readerMode === ReaderMode.UpDown" aria-describedby="reading-direction" title="Reading Direction: {{readingDirection === ReadingDirection.LeftToRight ? 'Left to Right' : 'Right to Left'}}">
                    <i class="fa fa-angle-double-{{readingDirection === ReadingDirection.LeftToRight ? 'right' : 'left'}}" aria-hidden="true"></i>
                    <span id="reading-direction" class="visually-hidden">{{readingDirection === ReadingDirection.LeftToRight ? 'Left to Right' : 'Right to Left'}}</span>
                </button>
            </div>
            <div class="col">
                <button class="btn btn-icon" title="Reading Mode" (click)="toggleReaderMode();resetMenuCloseTimer();">
                    <i class="fa {{readerModeIcon}}" aria-hidden="true"></i>
                    <span class="visually-hidden">Reading Mode</span>
                </button>
            </div>
            <div class="col">
                <button class="btn btn-icon" title="{{this.isFullscreen ? 'Collapse' : 'Fullscreen'}}" (click)="toggleFullscreen();resetMenuCloseTimer();">
                    <i class="fa {{this.isFullscreen ? 'fa-compress-alt' : 'fa-expand-alt'}}" aria-hidden="true"></i>
                    <span class="visually-hidden">{{this.isFullscreen ? 'Collapse' : 'Fullscreen'}}</span>
                </button>
            </div>
            <div class="col">
                <button class="btn btn-icon" title="Settings" (click)="settingsOpen = !settingsOpen;resetMenuCloseTimer();">
                    <i class="fa fa-sliders-h" aria-hidden="true"></i>
                    <span class="visually-hidden">Settings</span>
                </button>
            </div>
        </div>
        <div class="bottom-menu" *ngIf="settingsOpen && generalSettingsForm">
            <form [formGroup]="generalSettingsForm">
                <div class="row mb-2">
                    <div class="col-md-6 col-sm-12">
                        <label for="page-splitting" class="form-label">Image Splitting</label>&nbsp;
                        <div class="split fa fa-image">
                            <div class="{{splitIconClass}}"></div>
                        </div>
                        <select class="form-control" id="page-splitting" formControlName="pageSplitOption">
                            <option *ngFor="let opt of pageSplitOptions" [value]="opt.value">{{opt.text}}</option>
                        </select>
                    </div>

                    <div class="col-md-6 col-sm-12">
                        <label for="page-fitting" class="form-label">Image Scaling</label>&nbsp;<i class="fa {{getFittingIcon()}}" aria-hidden="true"></i>
                        <select class="form-control" id="page-fitting" formControlName="fittingOption">
                            <option value="full-height">Height</option>
                            <option value="full-width">Width</option>
                            <option value="original">Original</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-6 col-sm-12" *ngIf="false">
                        <label for="layout-mode" class="form-label">Layout Mode</label>
                        <select class="form-control" id="page-fitting" formControlName="layoutMode">
                            <option [value]="opt.value" *ngFor="let opt of layoutModes">{{opt.text}}</option>
                        </select>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="mb-3">
                            <label id="auto-close-label" class="form-label"></label>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="auto-close" formControlName="autoCloseMenu" class="form-check-input" [value]="true" aria-labelledby="auto-close-label">
                                    <label class="form-check-label" for="auto-close">Auto Close Menu</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>