mirror of
https://github.com/Kareadita/Kavita.git
synced 2026-02-25 04:30:07 -05:00
97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<ng-container *transloco="let t; read: 'pdf-reader'">
|
|
<div class="{{theme}}" *ngIf="accountService.currentUser$ | async as user" #container>
|
|
|
|
<ng-container *ngIf="isLoading">
|
|
<div class="loading mx-auto" style="min-width: 200px; width: 600px;">
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
{{t('loading-message')}}
|
|
</div>
|
|
<div class="progress-container row g-0 align-items-center">
|
|
<div class="progress" style="height: 5px;">
|
|
<div class="progress-bar" role="progressbar" [ngStyle]="{'width': loadPercent + '%'}" [attr.aria-valuenow]="loadPercent" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ngx-extended-pdf-viewer
|
|
#pdfViewer
|
|
[src]="readerService.downloadPdf(this.chapterId)"
|
|
[authorization]="'Bearer ' + user.token"
|
|
height="100vh"
|
|
[(page)]="currentPage"
|
|
[textLayer]="true"
|
|
[useBrowserLocale]="true"
|
|
[showHandToolButton]="true"
|
|
[showOpenFileButton]="false"
|
|
[showPrintButton]="false"
|
|
[showRotateButton]="false"
|
|
[showDownloadButton]="false"
|
|
[showPropertiesButton]="false"
|
|
[(zoom)]="zoomSetting"
|
|
[showSecondaryToolbarButton]="true"
|
|
[showBorders]="true"
|
|
[theme]="theme"
|
|
[backgroundColor]="backgroundColor"
|
|
[customToolbar]="multiToolbar"
|
|
[language]="user.preferences.locale"
|
|
|
|
(pageChange)="saveProgress()"
|
|
(pdfLoadingStarts)="updateLoading(true)"
|
|
(pdfLoaded)="updateLoading(false)"
|
|
(progress)="updateLoadProgress($event)"
|
|
>
|
|
|
|
</ngx-extended-pdf-viewer>
|
|
|
|
<ng-template #multiToolbar>
|
|
<div style="min-height: 36px" id="toolbarViewer" [ngStyle]="{'background-color': backgroundColor, 'color': fontColor}">
|
|
<div id="toolbarViewerLeft">
|
|
<pdf-toggle-sidebar></pdf-toggle-sidebar>
|
|
<pdf-find-button></pdf-find-button>
|
|
<pdf-paging-area></pdf-paging-area>
|
|
</div>
|
|
|
|
<pdf-zoom-toolbar ></pdf-zoom-toolbar>
|
|
|
|
<div id="toolbarViewerRight">
|
|
<pdf-hand-tool></pdf-hand-tool>
|
|
<pdf-select-tool></pdf-select-tool>
|
|
<pdf-presentation-mode></pdf-presentation-mode>
|
|
|
|
|
|
<!-- This is not yet supported by the underlying library
|
|
<button (click)="toggleBookPageMode()" class="btn btn-icon toolbarButton">
|
|
<i class="toolbar-icon fa-solid {{this.bookMode !== 'book' ? 'fa-book' : 'fa-book-open'}}" [ngStyle]="{color: fontColor}" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{this.bookMode !== 'book' ? 'Book Mode' : 'Normal Mode'}}</span>
|
|
</button> -->
|
|
|
|
<button class="btn btn-icon mt-0 mb-0 pt-1 pb-0 toolbarButton" [ngbTooltip]="bookTitle">
|
|
<i class="toolbar-icon fa-solid fa-info" [ngStyle]="{color: fontColor}" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{bookTitle}}</span>
|
|
</button>
|
|
|
|
<button *ngIf="incognitoMode" (click)="turnOffIncognito()" class="btn btn-icon mt-0 mb-0 pt-1 pb-0 toolbarButton">
|
|
<i class="toolbar-icon fa fa-glasses" [ngStyle]="{color: fontColor}" aria-hidden="true"></i><span class="visually-hidden">{{t('incognito-mode')}}</span>
|
|
</button>
|
|
|
|
<!-- This is pretty experimental, so it might not work perfectly -->
|
|
<button (click)="toggleTheme()" class="btn btn-icon mt-0 mb-0 pt-1 pb-0 toolbarButton">
|
|
<i class="toolbar-icon fa-solid {{this.theme === 'light' ? 'fa-sun' : 'fa-moon'}}" [ngStyle]="{color: fontColor}" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{this.theme === 'light' ? t('light-theme-alt') : t('dark-theme-alt')}}</span>
|
|
</button>
|
|
|
|
<button class="btn btn-icon col-2 col-xs-1 mt-0 mb-0 pt-1 pb-0 toolbarButton" (click)="closeReader()">
|
|
<i class="toolbar-icon fa fa-times-circle" aria-hidden="true" [ngStyle]="{color: fontColor}"></i>
|
|
<span class="visually-hidden">{{t('close-reader-alt')}}</span>
|
|
</button>
|
|
|
|
<div class="verticalToolbarSeparator hiddenSmallView"></div>
|
|
<pdf-toggle-secondary-toolbar></pdf-toggle-secondary-toolbar>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
</div>
|
|
|
|
</ng-container>
|