AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reader Fixes (#951)

Browse source 
* Normalized paths on download controller and when scan is killed due to missing or empty folders, log a critical error.

* Tweaked the query for OnDeck to better promote recently added chapters in a series with read progress, but it's still not perfect.

* Fixed an issue where up/down key weren't working unless you clicked on the book explicitly

* Fixed an issue where infinite scroller was broken in fullscreen mode

* When toggling fullscreen mode on infinite scroller, the current page is retained as current position

* Fixed an issue where a double render would occur when we didn't need to render as fit split

* Stop showing loader when not using fit split
This commit is contained in:
Joseph Milazzo 2022-01-17 09:34:32 -08:00 • committed by GitHub
parent 75e1790f58
commit 4645f8e3f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 107 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Web/src/app/book-reader/book-reader/book-reader.component.html
View file

@ -1,4 +1,4 @@
<div class="container-flex {{darkMode ? 'dark-mode' : ''}}" style="overflow: auto;" #reader>
<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container" [ngStyle]="{overflow: (isFullscreen ? 'auto' : 'visible')}" #reader>
<div class="fixed-top" #stickyTop>
<a class="sr-only sr-only-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>
@ -116,10 +116,8 @@
<div #readingHtml class="book-content" [ngStyle]="{'padding-bottom': topOffset + 20 + 'px', 'margin': '0px 0px'}"
[innerHtml]="page" *ngIf="page !== undefined"></div>
<div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate">
</div>
<div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate">
</div>
<div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate" tabindex="-1"></div>
<div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate" tabindex="-1"></div>
<div *ngIf="page !== undefined && scrollbarNeeded">
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>

4
UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
View file

@ -159,6 +159,10 @@ $primary-color: #0062cc;
//overflow: auto; // This will break progress reporting
}
.reader-container {
outline: none; // Only the reading section itself shouldn't receive any outline. We use it to shift focus in fullscreen mode
}
.book-content {
position: relative;
}

6
UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
View file

@ -747,6 +747,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
} else {
this.scrollService.scrollTo(0, this.reader.nativeElement);
}
// On fullscreen we need to click the document before arrow keys will scroll down.
if (this.isFullscreen) {
this.renderer.setAttribute(this.reader.nativeElement, 'tabIndex', '0');
this.reader.nativeElement.focus();
}
}
setPageNum(pageNum: number) {

4
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.scss
View file

@ -25,6 +25,10 @@
width: 100% !important;
}
// .img-container {
// overflow: auto;
// }
@keyframes move-up-down {
0%, 100% {

11
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.ts
View file

@ -63,6 +63,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
@Input() goToPage: ReplaySubject<number> = new ReplaySubject<number>();
@Input() bookmarkPage: ReplaySubject<number> = new ReplaySubject<number>();
@Input() fullscreenToggled: ReplaySubject<boolean> = new ReplaySubject<boolean>();
/**
* Stores and emits all the src urls
@ -152,7 +153,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
ngOnInit(): void {
fromEvent(window, 'scroll')
const reader = document.querySelector('.reader') || window;
fromEvent(reader, 'scroll')
.pipe(debounceTime(20), takeUntil(this.onDestroy))
.subscribe((event) => this.handleScrollEvent(event));
@ -183,6 +185,13 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
});
}
if (this.fullscreenToggled) {
this.fullscreenToggled.pipe(takeUntil(this.onDestroy)).subscribe(isFullscreen => {
this.debugLog('[FullScreen] Fullscreen mode: ', isFullscreen);
this.setPageNum(this.pageNum, true);
});
}
}
/**

5
UI/Web/src/app/manga-reader/manga-reader.component.html
View file

@ -1,4 +1,4 @@
<div class="reader" #reader>
<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()">
@ -36,7 +36,8 @@
[urlProvider]="getPageUrl"
(loadNextChapter)="loadNextChapter()"
(loadPrevChapter)="loadPrevChapter()"
[bookmarkPage]="showBookmarkEffectEvent"></app-infinite-scroller>
[bookmarkPage]="showBookmarkEffectEvent"
[fullscreenToggled]="fullscreenEvent"></app-infinite-scroller>
</div>
<ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD">
<div class="pagination-area {{readerMode === READER_MODE.MANGA_LR ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')">

112
UI/Web/src/app/manga-reader/manga-reader.component.ts
View file

@ -131,6 +131,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* An event emiter when a bookmark on a page change occurs. Used soley by the webtoon reader.
*/
showBookmarkEffectEvent: ReplaySubject<number> = new ReplaySubject<number>();
/**
* An event emiter when fullscreen mode is toggled. Used soley by the webtoon reader.
*/
fullscreenEvent: ReplaySubject<boolean> = new ReplaySubject<boolean>();
/**
* If the menu is open/visible.
*/
@ -845,63 +849,67 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
renderPage() {
if (this.ctx && this.canvas) {
this.canvasImage.onload = null;
if (!this.ctx || !this.canvas) { return; }
this.setCanvasSize();
this.canvasImage.onload = null;
const needsSplitting = this.isCoverImage();
this.updateSplitPage();
this.setCanvasSize();
if (needsSplitting && this.currentImageSplitPart === SPLIT_PAGE_PART.LEFT_PART) {
this.canvas.nativeElement.width = this.canvasImage.width / 2;
this.ctx.drawImage(this.canvasImage, 0, 0, this.canvasImage.width, this.canvasImage.height, 0, 0, this.canvasImage.width, this.canvasImage.height);
} else if (needsSplitting && this.currentImageSplitPart === SPLIT_PAGE_PART.RIGHT_PART) {
this.canvas.nativeElement.width = this.canvasImage.width / 2;
this.ctx.drawImage(this.canvasImage, 0, 0, this.canvasImage.width, this.canvasImage.height, -this.canvasImage.width / 2, 0, this.canvasImage.width, this.canvasImage.height);
const needsSplitting = this.isCoverImage();
this.updateSplitPage();
if (needsSplitting && this.currentImageSplitPart === SPLIT_PAGE_PART.LEFT_PART) {
this.canvas.nativeElement.width = this.canvasImage.width / 2;
this.ctx.drawImage(this.canvasImage, 0, 0, this.canvasImage.width, this.canvasImage.height, 0, 0, this.canvasImage.width, this.canvasImage.height);
} else if (needsSplitting && this.currentImageSplitPart === SPLIT_PAGE_PART.RIGHT_PART) {
this.canvas.nativeElement.width = this.canvasImage.width / 2;
this.ctx.drawImage(this.canvasImage, 0, 0, this.canvasImage.width, this.canvasImage.height, -this.canvasImage.width / 2, 0, this.canvasImage.width, this.canvasImage.height);
} else {
if (!this.firstPageRendered && this.scalingOption === ScalingOption.Automatic) {
this.updateScalingForFirstPageRender();
}
// Fit Split on a page that needs splitting
if (!this.shouldRenderAsFitSplit()) {
this.setCanvasSize();
this.ctx.drawImage(this.canvasImage, 0, 0);
this.isLoading = false;
return;
}
const windowWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
const windowHeight = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// If the user's screen is wider than the image, just pretend this is no split, as it will render nicer
this.canvas.nativeElement.width = windowWidth;
this.canvas.nativeElement.height = windowHeight;
const ratio = this.canvasImage.width / this.canvasImage.height;
let newWidth = windowWidth;
let newHeight = newWidth / ratio;
if (newHeight > windowHeight) {
newHeight = windowHeight;
newWidth = newHeight * ratio;
}
// Optimization: When the screen is larger than newWidth, allow no split rendering to occur for a better fit
if (windowWidth > newWidth) {
this.setCanvasSize();
this.ctx.drawImage(this.canvasImage, 0, 0);
} else {
if (!this.firstPageRendered && this.scalingOption === ScalingOption.Automatic) {
this.updateScalingForFirstPageRender();
}
// Fit Split on a page that needs splitting
if (!this.shouldRenderAsFitSplit()) {
this.ctx.drawImage(this.canvasImage, 0, 0);
}
const windowWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
const windowHeight = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// If the user's screen is wider than the image, just pretend this is no split, as it will render nicer
this.canvas.nativeElement.width = windowWidth;
this.canvas.nativeElement.height = windowHeight;
const ratio = this.canvasImage.width / this.canvasImage.height;
let newWidth = windowWidth;
let newHeight = newWidth / ratio;
if (newHeight > windowHeight) {
newHeight = windowHeight;
newWidth = newHeight * ratio;
}
// Optimization: When the screen is larger than newWidth, allow no split rendering to occur for a better fit
if (windowWidth > newWidth) {
this.setCanvasSize();
this.ctx.drawImage(this.canvasImage, 0, 0);
} else {
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
}
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.ctx.drawImage(this.canvasImage, 0, 0, newWidth, newHeight);
}
// Reset scroll on non HEIGHT Fits
if (this.getFit() !== FITTING_OPTION.HEIGHT) {
window.scrollTo(0, 0);
}
}
// Reset scroll on non HEIGHT Fits
if (this.getFit() !== FITTING_OPTION.HEIGHT) {
window.scrollTo(0, 0);
}
this.isLoading = false;
}
@ -1080,12 +1088,14 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.readerService.exitFullscreen(() => {
this.isFullscreen = false;
this.firstPageRendered = false;
this.fullscreenEvent.next(false);
this.render();
});
} else {
this.readerService.enterFullscreen(this.reader.nativeElement, () => {
this.isFullscreen = true;
this.firstPageRendered = false;
this.fullscreenEvent.next(true);
this.render();
});
}