Misc Bugfixes (#1378)
* Fixed an issue where sometimes when loading the next page, the pagination area wouldn't be properly setup due to a missed rendering cycle * Refactored BookController to thin it out and refactor some of the functions to apply IOC. Added some split query statements on a few queries. * Added Split Query to many queries * Added a visual indicator for loading state of PDF. Will spruce up css later. * Added back in logic * Fixed flash of white when refreshing browser * Hooked in a loading progress bar for the pdf reader * Close the pdf reader when pressing ESC
This commit is contained in:
Joseph Milazzo
GitHub
parent
3a10b54422
commit
c650436f57
18 changed files with 315 additions and 389 deletions
|
|
@ -1080,6 +1080,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
} else {
|
||||
this.canvasImage.src = this.getPageUrl(this.pageNum);
|
||||
}
|
||||
this.canvasImage.onload = () => {
|
||||
this.cdRef.markForCheck();
|
||||
};
|
||||
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
|
|
@ -1114,8 +1118,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
console.log('prevChapterId', this.prevChapterId);
|
||||
|
||||
if (this.prevChapterId === CHAPTER_ID_NOT_FETCHED || this.prevChapterId === this.chapterId) {
|
||||
this.readerService.getPrevChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
|
||||
this.prevChapterId = chapterId;
|
||||
|
|
@ -1127,7 +1129,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
}
|
||||
|
||||
loadChapter(chapterId: number, direction: 'Next' | 'Prev') {
|
||||
console.log('chapterId: ', chapterId);
|
||||
if (chapterId > 0) {
|
||||
this.isLoading = true;
|
||||
this.cdRef.markForCheck();
|
||||
|
|
|
|||
|
|
@ -55,13 +55,6 @@
|
|||
}
|
||||
|
||||
|
||||
// .download {
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
.btn-icon {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
<div class="{{theme}}">
|
||||
|
||||
<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>
|
||||
Loading...PDFs may take longer than expected
|
||||
</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': loadPrecent + '%'}" [attr.aria-valuenow]="loadPrecent" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ngx-extended-pdf-viewer
|
||||
#pdfViewer
|
||||
[src]="readerService.downloadPdf(this.chapterId)"
|
||||
|
|
@ -23,6 +35,9 @@
|
|||
[customToolbar]="multiToolbar"
|
||||
|
||||
(pageChange)="saveProgress()"
|
||||
(pdfLoadingStarts)="updateLoading(true)"
|
||||
(pdfLoaded)="updateLoading(false)"
|
||||
(progress)="updateLoadProgress($event)"
|
||||
>
|
||||
|
||||
</ngx-extended-pdf-viewer>
|
||||
|
|
|
|||
|
|
@ -10,3 +10,11 @@
|
|||
::ng-deep #presentationMode {
|
||||
margin: 3px 0 4px !important;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
}
|
||||
.progress-bar {
|
||||
// NOTE: We have to override due to theme variables not being available
|
||||
background-color: #3B9E76;
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { PageViewModeType } from 'ngx-extended-pdf-viewer';
|
||||
import { NgxExtendedPdfViewerService, PageViewModeType, ProgressBarEvent } from 'ngx-extended-pdf-viewer';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { Subject, take } from 'rxjs';
|
||||
import { BookService } from 'src/app/book-reader/book.service';
|
||||
import { KEY_CODES } from 'src/app/shared/_services/utility.service';
|
||||
import { Chapter } from 'src/app/_models/chapter';
|
||||
import { User } from 'src/app/_models/user';
|
||||
import { AccountService } from 'src/app/_services/account.service';
|
||||
|
|
@ -62,7 +63,11 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
|
|||
backgroundColor: string = this.themeMap[this.theme].background;
|
||||
fontColor: string = this.themeMap[this.theme].font;
|
||||
|
||||
isLoading: boolean = false;
|
||||
isLoading: boolean = true;
|
||||
/**
|
||||
* How much of the current document is loaded
|
||||
*/
|
||||
loadPrecent: number = 0;
|
||||
|
||||
/**
|
||||
* This can't be updated dynamically:
|
||||
|
|
@ -76,12 +81,19 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
|
|||
private seriesService: SeriesService, public readerService: ReaderService,
|
||||
private navService: NavService, private toastr: ToastrService,
|
||||
private bookService: BookService, private themeService: ThemeService,
|
||||
private readonly cdRef: ChangeDetectorRef) {
|
||||
private readonly cdRef: ChangeDetectorRef, private pdfViewerService: NgxExtendedPdfViewerService) {
|
||||
this.navService.hideNavBar();
|
||||
this.themeService.clearThemes();
|
||||
this.navService.hideSideNav();
|
||||
}
|
||||
|
||||
@HostListener('window:keyup', ['$event'])
|
||||
handleKeyPress(event: KeyboardEvent) {
|
||||
if (event.key === KEY_CODES.ESC_KEY) {
|
||||
this.closeReader();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.themeService.currentTheme$.pipe(take(1)).subscribe(theme => {
|
||||
this.themeService.setTheme(theme.name);
|
||||
|
|
@ -141,13 +153,12 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
|
|||
|
||||
this.seriesService.getChapter(this.chapterId).subscribe(chapter => {
|
||||
this.maxPages = chapter.pages;
|
||||
this.cdRef.markForCheck();
|
||||
|
||||
if (this.currentPage >= this.maxPages) {
|
||||
this.currentPage = this.maxPages - 1;
|
||||
this.saveProgress();
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
this.cdRef.markForCheck();
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -193,4 +204,14 @@ export class PdfReaderComponent implements OnInit, OnDestroy {
|
|||
this.readerService.closeReader(this.readingListMode, this.readingListId);
|
||||
}
|
||||
|
||||
updateLoading(state: boolean) {
|
||||
this.isLoading = state;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
updateLoadProgress(event: ProgressBarEvent) {
|
||||
this.loadPrecent = event.percent;
|
||||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,203 +1,4 @@
|
|||
/* Theme for the light mode of Kavita */
|
||||
/* Default styles for Kavita */
|
||||
:root {
|
||||
--color-scheme: light;
|
||||
--primary-color: #4ac694;
|
||||
--primary-color-dark-shade: #3B9E76;
|
||||
--primary-color-darker-shade: #338A67;
|
||||
--primary-color-darkest-shade: #25624A;
|
||||
--error-color: #ff4136;
|
||||
--bs-body-bg: #fff;
|
||||
--body-text-color: #333;
|
||||
--btn-icon-filter: none;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg-color: black;
|
||||
--navbar-text-color: white;
|
||||
--navbar-fa-icon-color: white;
|
||||
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
|
||||
|
||||
/* Inputs */
|
||||
--input-bg-color: #fff;
|
||||
--input-focused-border-color: #ccc;
|
||||
--input-bg-readonly-color: rgba(0,0,0,0.2);
|
||||
--input-placeholder-color: #aeaeae;
|
||||
--input-border-color: #ccc;
|
||||
--input-range-color: var(--primary-color);
|
||||
--input-range-active-color: var(--primary-color-darker-shade);
|
||||
|
||||
/* Buttons */
|
||||
--btn-primary-text-color: black;
|
||||
--btn-primary-bg-color: white;
|
||||
--btn-primary-border-color: black;
|
||||
--btn-primary-hover-text-color: white;
|
||||
--btn-primary-hover-bg-color: black;
|
||||
--btn-primary-hover-border-color: black;
|
||||
--btn-alt-bg-color: #424c72;
|
||||
--btn-alt-border-color: #444f75;
|
||||
--btn-alt-hover-bg-color: #3b4466;
|
||||
--btn-alt-focus-bg-color: #343c59;
|
||||
--btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%);
|
||||
--btn-fa-icon-color: black;
|
||||
--btn-disabled-bg-color: #020202;
|
||||
--btn-disabled-text-color: white;
|
||||
--btn-disabled-border-color: #6c757d;
|
||||
|
||||
/* Nav */
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-bg-color: rgba(74, 198, 148, 0.9);
|
||||
--nav-tab-active-text-color: white;
|
||||
--nav-tab-text-color: var(--body-text-color);
|
||||
--nav-tab-bg-color: rgba(74, 198, 148, 0.9);
|
||||
--nav-tab-hover-border-color: #4ac694;
|
||||
--nav-link-text-color: black;
|
||||
--nav-link-hover-text-color: var(--primary-color);
|
||||
--nav-tab-border-hover-color: transparent;
|
||||
|
||||
/* Side Nav */
|
||||
--side-nav-bg-color: rgba(255,255,255,0.6);
|
||||
--side-nav-mobile-bg-color: rgb(255,255,255);
|
||||
--side-nav-openclose-transition: 0.15s ease-in-out;
|
||||
--side-nav-box-shadow: none;
|
||||
--side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
|
||||
--side-nav-hover-text-color: white;
|
||||
--side-nav-hover-bg-color: black;
|
||||
--side-nav-color: black;
|
||||
--side-nav-border-radius: 5px;
|
||||
--side-nav-border: 1px solid rgba(0,0,0,0.2);
|
||||
--side-nav-border-closed: 1px solid transparent;
|
||||
--side-nav-companion-bar-transistion: 0.5s linear;
|
||||
--side-nav-border-transition: 0.5s ease-in-out;
|
||||
--side-nav-bg-color-transition: 0.5s ease-in-out;
|
||||
--side-nav-closed-bg-color: transparent;
|
||||
--side-nav-item-active-color: var(--primary-color);
|
||||
--side-nav-active-bg-color: rgba(0,0,0,0.5);
|
||||
--side-nav-item-active-text-color: white;
|
||||
--side-nav-overlay-color: rgba(0,0,0,0.5);
|
||||
|
||||
|
||||
/* Checkboxes */
|
||||
--checkbox-checked-bg-color: var(--primary-color);
|
||||
--checkbox-bg-color: white;
|
||||
--checkbox-border-color: var(--primary-color);
|
||||
--checkbox-focus-border-color: var(--input-border-color);
|
||||
|
||||
/* Tagbadge */
|
||||
--tagbadge-bg-color: #c9c9c9;
|
||||
|
||||
/* Toasts */
|
||||
--toast-success-bg-color: rgba(74, 198, 148, 0.9);
|
||||
--toast-error-bg-color: #BD362F;
|
||||
--toast-info-bg-color: #2F96B4;
|
||||
--toast-warning-bg-color: #F89406;
|
||||
|
||||
/* Rating star */
|
||||
--ratingstar-star-empty: #b0c4de;
|
||||
--ratingstar-star-filled: var(--primary-color);
|
||||
|
||||
/* Global */
|
||||
--accent-bg-color: rgba(206, 206, 206, 0.5); // Drawer had: var(--bs-body-bg)
|
||||
--accent-text-color: grey;
|
||||
--accent-text-size: 0.8rem;
|
||||
--hr-color: rgba(239, 239, 239, 0.125);
|
||||
--grid-breakpoints-xs: $grid-breakpoint-xs;
|
||||
--grid-breakpoints-sm: $grid-breakpoint-sm;
|
||||
--grid-breakpoints-md: $grid-breakpoint-md;
|
||||
--grid-breakpoints-lg: $grid-breakpoint-lg;
|
||||
--grid-breakpoints-xl: $grid-breakpoint-xl;
|
||||
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
|
||||
--brand-font-family: "Spartan", sans-serif;
|
||||
--text-muted-color: #aaa;
|
||||
|
||||
/* Breadcrumb */
|
||||
--breadcrumb-bg-color: #eaeaea;
|
||||
--breadcrumb-item-text-color: var(--body-text-color);
|
||||
|
||||
/* Card */
|
||||
--card-text-color: #000;
|
||||
--card-border-width: 0 1px 1px 1px;
|
||||
--card-border-style: solid;
|
||||
--card-border-color: #ccc;
|
||||
--card-progress-bar-color: var(--primary-color);
|
||||
--card-overlay-bg-color: rgba(0, 0, 0, 0);
|
||||
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* List items */
|
||||
--list-group-item-text-color: var(--body-text-color);
|
||||
--list-group-item-bg-color: white;
|
||||
--list-group-hover-text-color: var(--body-text-color);
|
||||
--list-group-hover-bg-color: #eaeaea;
|
||||
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
|
||||
--list-group-active-border-color: none;
|
||||
|
||||
/* Dropdown */
|
||||
--dropdown-item-hover-text-color: white;
|
||||
--dropdown-item-hover-bg-color: var(--primary-color);
|
||||
--dropdown-overlay-color: rgba(0,0,0,0.5);
|
||||
--dropdown-item-bg-color: white;
|
||||
|
||||
/* Manga Reader */
|
||||
--manga-reader-overlay-filter: blur(10px);
|
||||
--manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
|
||||
--manga-reader-overlay-text-color: white;
|
||||
--manga-reader-bg-color: black;
|
||||
--manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
|
||||
--manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
|
||||
|
||||
/* Radios */
|
||||
--radio-accent-color: var(--primary-color);
|
||||
--radio-hover-accent-color: var(--primary-color-dark-shade);
|
||||
|
||||
/* Carousel */
|
||||
--carousel-header-text-color: black;
|
||||
--carousel-header-text-decoration: none;
|
||||
--carousel-hover-header-text-decoration: underline;
|
||||
|
||||
/** Drawer */
|
||||
--drawer-background-color: white; // TODO: Use bg
|
||||
--drawer-bg-color: white;
|
||||
--drawer-text-color: black;
|
||||
|
||||
/* Pagination */
|
||||
--pagination-active-link-border-color: var(--primary-color);
|
||||
--pagination-active-link-bg-color: var(--primary-color);
|
||||
--pagination-active-link-text-color: white;
|
||||
--pagination-link-border-color: rgba(239, 239, 239, 1);
|
||||
--pagination-link-text-color: black;
|
||||
--pagination-link-bg-color: white;
|
||||
--pagination-focus-border-color: var(--primary-color);
|
||||
--pagination-link-hover-color: var(--primary-color);
|
||||
|
||||
/** Event Widget */
|
||||
--event-widget-bg-color: white;
|
||||
--event-widget-item-bg-color: lightgrey;
|
||||
--event-widget-text-color: black;
|
||||
--event-widget-item-border-color: lightgrey;
|
||||
--event-widget-border-color: lightgrey;
|
||||
|
||||
/* Popover */
|
||||
--popover-body-bg-color: var(--navbar-bg-color);
|
||||
--popover-body-text-color: var(--navbar-text-color);
|
||||
--popover-outerarrow-color: lightgrey;
|
||||
--popover-arrow-color: lightgrey;
|
||||
--popover-bg-color: lightgrey;
|
||||
--popover-border-color: lightgrey;
|
||||
|
||||
/* Accordion */
|
||||
--accordion-header-text-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-header-bg-color: var(--bs-body-bg);
|
||||
--accordion-body-bg-color: var(--bs-body-bg);
|
||||
--accordion-active-body-bg-color: var(--bs-body-bg);
|
||||
--accordion-body-border-color: rgba(239, 239, 239, 0.125);
|
||||
--accordion-body-text-color: var(--body-text-color);
|
||||
--accordion-header-collapsed-text-color: var(--body-text-color);
|
||||
--accordion-header-collapsed-bg-color: var(--bs-body-bg);
|
||||
--accordion-button-focus-border-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-button-focus-box-shadow: unset;
|
||||
|
||||
/* Search */
|
||||
--search-result-text-lite-color: rgba(0,0,0,1);
|
||||
|
||||
/* Bulk Selection */
|
||||
--bulk-selection-text-color: var(--navbar-text-color);
|
||||
--bulk-selection-highlight-text-color: var(--primary-color);
|
||||
}
|
||||
@import './dark.scss'; // Just re-import variables from dark since that's all we support
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue