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

Continuous Reading for Webtoons & I Just Couldn't Stop Coding (#574)

Browse source 
* Fixed an issue from perf tuning where I forgot to send Pages to frontend, breaking reader.

* Built out continuous reading for webtoon reader. Still has some issues with triggering.

* Refactored GetUserByUsernameAsync to have a new flavor and allow the caller to pass in bitwise flags for what to include. This has a get by username or id variant. Code is much cleaner and snappier as we avoid many extra joins when not needed.

* Cleanup old code from UserRepository.cs

* Refactored OPDS to use faster API lookups for User

* Refactored more code to be cleaner and faster.

* Refactored GetNext/Prev ChapterIds to ReaderService.

* Refactored Repository methods to their correct entity repos.

* Refactored DTOs and overall cleanup of the code.

* Added ability to press 'b' to bookmark a page

* On hitting last page, save progress forcing last page to be read. Adjusted logic for the top and bottom spacers for triggering next/prev chapter load

* When at top or moving between chapters, scrolling down then up will now trigger page load. Show a toastr to inform the user of a change in chapter (it can be really fast to switch)

* Cleaned up scroll code

* Fixed an issue where loading a chapter with last page bookmarked, we'd load lastpage - 1

* Fixed last page of webtoon reader not being resumed on loading said chapter due to a difference in how max page is handled between infinite scroller and manga reader.

* Removed some comments

* Book reader shouldn't look at left/right tap to paginate elems for position bookmarking. Missed a few areas for saving while in incognito mode

* Added a benchmark to test out a sort code

* Updated the read status on reading list to use same style as other places

* Refactored GetNextChapterId to bring the average response time from 1.2 seconds to 400ms.

* Added a filter to add to list when there are more than 5 reading lists

* Added download reading list (will be removed, just saving for later). Fixes around styling on reading lists

* Removed ability to download reading lists

* Tweaked the logic for infinite scroller to be much smoother loading next/prev chapter. Added a bug marker for a concurrency bug.

* Updated the top spacer so that when you hit the top, you stay at the page height and can now just scroll up.

* Got the logic for scrolling up. Now just need the CSS then cont infinite scroller will be working

* More polishing on infinite scroller

* Removed IsSpecial on volumeDto, which is not used anywhere.

* Cont Reading inf scroller edition is done.

* Code smells and fixed package.json explore script
This commit is contained in:
Joseph Milazzo 2021-09-11 11:47:12 -07:00 • committed by GitHub
parent 38c313adc7
commit 83f8e25478
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 937 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

1
UI/Web/src/app/_models/series.ts
View file

@ -8,7 +8,6 @@ export interface Series {
localizedName: string;
sortName: string;
summary: string;
coverImage: string; // This is not passed from backend any longer. TODO: Remove this field
coverImageLocked: boolean;
volumes: Volume[];
pages: number; // Total pages in series

2
UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html
View file

@ -9,7 +9,7 @@
<div class="form-group">
<label for="filter">Filter</label>
<div class="input-group">
<input id="filter" autocomplete="false" class="form-control" [(ngModel)]="filterQuery" type="text" aria-describedby="reset-input">
<input id="filter" autocomplete="off" class="form-control" [(ngModel)]="filterQuery" type="text" aria-describedby="reset-input">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="filterQuery = '';">Clear</button>
</div>

4
UI/Web/src/app/admin/admin.module.ts
View file

@ -12,10 +12,10 @@ import { DirectoryPickerComponent } from './_modals/directory-picker/directory-p
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ResetPasswordModalComponent } from './_modals/reset-password-modal/reset-password-modal.component';
import { ManageSettingsComponent } from './manage-settings/manage-settings.component';
import { FilterPipe } from './filter.pipe';
import { EditRbsModalComponent } from './_modals/edit-rbs-modal/edit-rbs-modal.component';
import { ManageSystemComponent } from './manage-system/manage-system.component';
import { ChangelogComponent } from './changelog/changelog.component';
import { PipeModule } from '../pipe/pipe.module';
@ -30,7 +30,6 @@ import { ChangelogComponent } from './changelog/changelog.component';
DirectoryPickerComponent,
ResetPasswordModalComponent,
ManageSettingsComponent,
FilterPipe,
EditRbsModalComponent,
ManageSystemComponent,
ChangelogComponent,
@ -44,6 +43,7 @@ import { ChangelogComponent } from './changelog/changelog.component';
NgbTooltipModule,
NgbDropdownModule,
SharedModule,
PipeModule
],
providers: []
})

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

@ -112,9 +112,9 @@
<div #readingSection class="reading-section" [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" [@isLoading]="isLoading ? true : false" (click)="handleReaderClick($event)">
<div #readingHtml [innerHtml]="page" *ngIf="page !== undefined"></div>
<div class="left {{clickOverlayClass('left')}}" (click)="prevPage()" *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe" (click)="prevPage()" *ngIf="clickToPaginate">
</div>
<div class="right {{clickOverlayClass('right')}}" (click)="nextPage()" *ngIf="clickToPaginate">
<div class="right {{clickOverlayClass('right')}} no-observe" (click)="nextPage()" *ngIf="clickToPaginate">
</div>
<div [ngStyle]="{'padding-top': topOffset + 20 + 'px'}" *ngIf="page !== undefined && scrollbarNeeded">

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

@ -288,14 +288,17 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const alreadyReached = Object.values(this.pageAnchors).filter((i: number) => i <= verticalOffset);
if (alreadyReached.length > 0) {
this.currentPageAnchor = Object.keys(this.pageAnchors)[alreadyReached.length - 1];
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
}
return;
} else {
this.currentPageAnchor = '';
}
}
if (this.lastSeenScrollPartPath !== '') {
if (this.lastSeenScrollPartPath !== '' && !this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum, this.lastSeenScrollPartPath).pipe(take(1)).subscribe(() => {/* No operation */});
}
});
@ -443,7 +446,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
handleIntersection(entries: IntersectionObserverEntry[]) {
const intersectingEntries = Array.from(entries).filter(entry => entry.isIntersecting).map(entry => entry.target);
let intersectingEntries = Array.from(entries)
.filter(entry => entry.isIntersecting)
.map(entry => entry.target)
intersectingEntries.sort((a: Element, b: Element) => {
const aTop = a.getBoundingClientRect().top;
const bTop = b.getBoundingClientRect().top;
@ -457,6 +462,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return 0;
});
if (intersectingEntries.length > 0) {
let path = this.getXPathTo(intersectingEntries[0]);
if (path === '') { return; }
@ -643,7 +649,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
setupPageAnchors() {
this.readingSectionElemRef.nativeElement.querySelectorAll('div,o,p,ul,li,a,img,h1,h2,h3,h4,h5,h6,span').forEach(elem => {
this.intersectionObserver.observe(elem);
if (!elem.classList.contains('no-observe')) {
this.intersectionObserver.observe(elem);
}
});
this.pageAnchors = {};

1
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
View file

@ -117,7 +117,6 @@
</div>
<div class="row no-gutters">
<div class="col">
<!-- Is Special: {{volume.isSpecial}} -->
<button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="!volumeCollapsed[volume.name]">
View Files
</button>

32
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.html
View file

@ -6,10 +6,38 @@
<strong>Prefetched</strong> {{minPageLoaded}}-{{maxPageLoaded}}
<strong>Current Page:</strong>{{pageNum}}
<strong>Width:</strong> {{webtoonImageWidth}}
<strong>Pages:</strong> {{pageNum}} / {{totalPages}}
<strong>At Top:</strong> {{atTop}}
<strong>At Bottom:</strong> {{atBottom}}
</div>
<div *ngIf="atTop" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
<div style="height: 200px"></div>
<div>
<button class="btn btn-icon mx-auto">
<i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
</button>
<span class="mx-auto text">Previous Chapter</span>
<button class="btn btn-icon mx-auto">
<i class="fa fa-angle-double-up animate" aria-hidden="true"></i>
</button>
<span class="sr-only">Scroll up to move to next chapter</span>
</div>
</div>
<ng-container *ngFor="let item of webtoonImages | async; let index = index;">
<img src="{{item.src}}" style="display: block" class="mx-auto {{pageNum === item.page && debug ? 'active': ''}}" *ngIf="pageNum >= pageNum - bufferPages && pageNum <= pageNum + bufferPages" rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
</ng-container>
<div *ngIf="atBottom" class="spacer bottom" role="alert" (click)="loadPrevChapter.emit()">
<div>
<button class="btn btn-icon mx-auto">
<i class="fa fa-angle-double-down animate" aria-hidden="true"></i>
</button>
<span class="mx-auto text">Next Chapter</span>
<button class="btn btn-icon mx-auto">
<i class="fa fa-angle-double-down animate" aria-hidden="true"></i>
</button>
<span class="sr-only">Scroll down to move to next chapter</span>
</div>
<div style="height: 200px"></div>
</div>

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

@ -4,4 +4,28 @@
}
.active {
border: 2px solid red;
}
.spacer {
width: 100%;
height: 300px;
cursor: pointer;
.animate {
animation: move-up-down 1s linear infinite;
}
.text {
z-index: 101;
}
}
@keyframes move-up-down {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

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

@ -1,10 +1,16 @@
import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { BehaviorSubject, fromEvent, ReplaySubject, Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { debounceTime, take, takeUntil } from 'rxjs/operators';
import { ReaderService } from '../../_services/reader.service';
import { PAGING_DIRECTION } from '../_models/reader-enums';
import { WebtoonImage } from '../_models/webtoon-image';
/**
* How much additional space should pass, past the original bottom of the document height before we trigger the next chapter load
*/
const SPACER_SCROLL_INTO_PX = 200;
@Component({
selector: 'app-infinite-scroller',
templateUrl: './infinite-scroller.component.html',
@ -29,6 +35,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
*/
@Input() urlProvider!: (page: number) => string;
@Output() pageNumberChange: EventEmitter<number> = new EventEmitter<number>();
@Output() loadNextChapter: EventEmitter<void> = new EventEmitter<void>();
@Output() loadPrevChapter: EventEmitter<void> = new EventEmitter<void>();
@Input() goToPage: ReplaySubject<number> = new ReplaySubject<number>();
@ -70,6 +78,18 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
* Denotes each page that has been loaded or not. If pruning is implemented, the key will be deleted.
*/
imagesLoaded: {[key: number]: number} = {};
/**
* If the user has scrolled all the way to the bottom. This is used solely for continuous reading
*/
atBottom: boolean = false;
/**
* If the user has scrolled all the way to the top. This is used solely for continuous reading
*/
atTop: boolean = false;
/**
* Keeps track of the previous scrolling height for restoring scroll position after we inject spacer block
*/
previousScrollHeightMinusTop: number = 0;
/**
* Debug mode. Will show extra information
*/
@ -87,7 +107,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private readerService: ReaderService, private renderer: Renderer2) { }
constructor(private readerService: ReaderService, private renderer: Renderer2, private toastr: ToastrService) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('totalPages') && changes['totalPages'].previousValue != changes['totalPages'].currentValue) {
@ -104,7 +124,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit(): void {
fromEvent(window, 'scroll')
.pipe(debounceTime(20), takeUntil(this.onDestroy))
.pipe(debounceTime(20), takeUntil(this.onDestroy))
.subscribe((event) => this.handleScrollEvent(event));
if (this.goToPage) {
@ -145,6 +165,48 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
this.scrollingDirection = PAGING_DIRECTION.BACKWARDS;
}
this.prevScrollPosition = verticalOffset;
// Check if we hit the last page
this.checkIfShouldTriggerContinuousReader();
}
checkIfShouldTriggerContinuousReader() {
if (this.isScrolling) return;
if (this.scrollingDirection === PAGING_DIRECTION.FORWARD) {
let totalHeight = 0;
document.querySelectorAll('img[id^="page-"]').forEach(img => totalHeight += img.getBoundingClientRect().height);
const totalScroll = document.documentElement.offsetHeight + document.documentElement.scrollTop;
// If we were at top but have started scrolling down past page 0, remove top spacer
if (this.atTop && this.pageNum > 0) {
this.atTop = false;
}
if (totalScroll === totalHeight) {
this.atBottom = true;
this.setPageNum(this.totalPages);
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollTop;
setTimeout(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2), 10);
} else if (totalScroll >= totalHeight + SPACER_SCROLL_INTO_PX && this.atBottom) {
// This if statement will fire once we scroll into the spacer at all
this.loadNextChapter.emit();
}
} else {
if (document.documentElement.scrollTop === 0 && this.pageNum === 0) {
this.atBottom = false;
if (this.atTop) {
// If already at top, then we moving on
this.loadPrevChapter.emit();
}
this.atTop = true;
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollHeight - document.documentElement.scrollTop;
setTimeout(() => document.documentElement.scrollTop = document.documentElement.scrollHeight - this.previousScrollHeightMinusTop - (SPACER_SCROLL_INTO_PX / 2), 10);
}
}
}
/**
@ -170,6 +232,9 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
initWebtoonReader() {
this.imagesLoaded = {};
this.webtoonImages.next([]);
this.atBottom = false;
//this.atTop = document.documentElement.scrollTop === 0 && this.pageNum === 0;
this.checkIfShouldTriggerContinuousReader();
const [startingIndex, endingIndex] = this.calculatePrefetchIndecies();
@ -236,6 +301,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
* @param scrollToPage Optional (default false) parameter to trigger scrolling to the newly set page
*/
setPageNum(pageNum: number, scrollToPage: boolean = false) {
if (pageNum > this.totalPages) {
pageNum = this.totalPages;
} else if (pageNum < 0) {
pageNum = 0;
}
this.pageNum = pageNum;
this.pageNumberChange.emit(this.pageNum);

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

@ -28,7 +28,7 @@
ondragstart="return false;" onselectstart="return false;">
</canvas>
<div class="webtoon-images" *ngIf="readerMode === READER_MODE.WEBTOON && !isLoading">
<app-infinite-scroller [pageNum]="pageNum" [bufferPages]="5" [goToPage]="goToPageEvent" (pageNumberChange)="handleWebtoonPageChange($event)" [totalPages]="maxPages" [urlProvider]="getPageUrl"></app-infinite-scroller>
<app-infinite-scroller [pageNum]="pageNum" [bufferPages]="5" [goToPage]="goToPageEvent" (pageNumberChange)="handleWebtoonPageChange($event)" [totalPages]="maxPages - 1" [urlProvider]="getPageUrl" (loadNextChapter)="loadNextChapter()" (loadPrevChapter)="loadPrevChapter()"></app-infinite-scroller>
</div>
<ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD"> <!--; else webtoonClickArea; See if people want this mode WEBTOON_WITH_CLICKS-->
<div class="{{readerMode === READER_MODE.MANGA_LR ? 'right' : 'top'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>

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

@ -365,6 +365,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const goToPageNum = this.promptForPage();
if (goToPageNum === null) { return; }
this.goToPage(parseInt(goToPageNum.trim(), 10));
} else if (event.key === KEY_CODES.B) {
this.bookmarkPage();
}
}
@ -374,7 +376,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.nextChapterDisabled = false;
this.prevChapterDisabled = false;
this.nextChapterPrefetched = false;
this.pageNum = 0; // ?! Why was this 1
this.pageNum = 0;
forkJoin({
progress: this.readerService.getProgress(this.chapterId),
@ -391,11 +393,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.volumeId = results.chapterInfo.volumeId;
this.maxPages = results.chapterInfo.pages;
console.log('results: ', results);
let page = results.progress.pageNum;
console.log('page: ', page);
console.log('this.pageNum: ', this.pageNum);
if (page >= this.maxPages) {
if (page > this.maxPages) {
page = this.maxPages - 1;
}
this.setPageNum(page);
@ -704,10 +703,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.nextChapterId === CHAPTER_ID_NOT_FETCHED || this.nextChapterId === this.chapterId) {
this.readerService.getNextChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
this.nextChapterId = chapterId;
this.loadChapter(chapterId, 'next');
this.loadChapter(chapterId, 'Next');
});
} else {
this.loadChapter(this.nextChapterId, 'next');
this.loadChapter(this.nextChapterId, 'Next');
}
}
@ -727,14 +726,14 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
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;
this.loadChapter(chapterId, 'prev');
this.loadChapter(chapterId, 'Prev');
});
} else {
this.loadChapter(this.prevChapterId, 'prev');
this.loadChapter(this.prevChapterId, 'Prev');
}
}
loadChapter(chapterId: number, direction: 'next' | 'prev') {
loadChapter(chapterId: number, direction: 'Next' | 'Prev') {
if (chapterId >= 0) {
this.chapterId = chapterId;
this.continuousChaptersStack.push(chapterId);
@ -742,11 +741,12 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const newRoute = this.readerService.getNextChapterUrl(this.router.url, this.chapterId, this.incognitoMode, this.readingListMode, this.readingListId);
window.history.replaceState({}, '', newRoute);
this.init();
this.toastr.info(direction + ' chapter loaded', '', {timeOut: 3000});
} else {
// This will only happen if no actual chapter can be found
this.toastr.warning('Could not find ' + direction + ' chapter');
this.toastr.warning('Could not find ' + direction.toLowerCase() + ' chapter');
this.isLoading = false;
if (direction === 'prev') {
if (direction === 'Prev') {
this.prevPageDisabled = true;
} else {
this.nextPageDisabled = true;
@ -1010,7 +1010,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
bookmarkPage() {
const pageNum = this.pageNum;
if (this.pageBookmarked) {
// Remove bookmark
this.readerService.unbookmark(this.seriesId, this.volumeId, this.chapterId, pageNum).pipe(take(1)).subscribe(() => {
delete this.bookmarks[pageNum];
});

0
UI/Web/src/app/admin/filter.pipe.ts → UI/Web/src/app/pipe/filter.pipe.ts
View file

18
UI/Web/src/app/pipe/pipe.module.ts Normal file
View file

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [
FilterPipe
],
imports: [
CommonModule,
],
exports: [
FilterPipe
]
})
export class PipeModule { }

33
UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.html
View file

@ -5,11 +5,19 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<form style="width: 100%" [formGroup]="listForm">
<div class="modal-body">
<!-- TODO: Put filter here -->
<div class="form-group" *ngIf="lists.length >= 5">
<label for="filter">Filter</label>
<div class="input-group">
<input id="filter" autocomplete="off" class="form-control" formControlName="filterQuery" type="text" aria-describedby="reset-input">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="listForm.get('filterQuery')?.setValue('');">Clear</button>
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item clickable" tabindex="0" role="button" *ngFor="let readingList of lists; let i = index" (click)="addToList(readingList)">
<!-- Think about using radio buttons maybe for screen reader-->
<li class="list-group-item clickable" tabindex="0" role="button" *ngFor="let readingList of lists | filter: filterList; let i = index" (click)="addToList(readingList)">
{{readingList.title}} <i class="fa fa-angle-double-up" *ngIf="readingList.promoted" title="Promoted"></i>
</li>
<li class="list-group-item" *ngIf="lists.length === 0 && !loading">No lists created yet</li>
@ -21,17 +29,18 @@
</ul>
</div>
<div class="modal-footer" style="justify-content: normal">
<form style="width: 100%" [formGroup]="listForm">
<div style="width: 100%;">
<div class="form-row">
<div class="col-md-10">
<label class="sr-only" for="add-rlist">Reading List</label>
<input width="100%" #title ngbAutofocus type="text" class="form-control mb-2" id="add-rlist" formControlName="title">
<div class="col-9 col-lg-10">
<label class="sr-only" for="add-rlist">Reading List</label>
<input width="100%" #title ngbAutofocus type="text" class="form-control mb-2" id="add-rlist" formControlName="title">
</div>
<div class="col-2">
<button type="submit" class="btn btn-primary" (click)="create()">Create</button>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" (click)="create()">Create</button>
</div>
</div>
</form>
</div>
</div>
</form>

5
UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.ts
View file

@ -41,6 +41,7 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
this.listForm.addControl('filterQuery', new FormControl('', []));
this.loading = true;
this.readingListService.getReadingLists(false).subscribe(lists => {
@ -87,4 +88,8 @@ export class AddToListModalComponent implements OnInit, AfterViewInit {
}
filterList = (listItem: ReadingList) => {
return listItem.title.toLowerCase().indexOf((this.listForm.value.filterQuery || '').toLowerCase()) >= 0;
}
}

17
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
View file

@ -29,7 +29,9 @@
</button>
</div>
</div>
<p class="mt-2" *ngIf="readingList.summary.length > 0">{{readingList.summary}}</p>
<div class="row no-gutters mt-2">
<app-read-more [text]="readingList.summary" [maxLength]="250"></app-read-more>
</div>
</div>
</div>
@ -44,14 +46,21 @@
<img width="74px" style="width: 74px;" class="img-top lazyload mr-3" [src]="imageService.placeholderImage" [attr.data-src]="imageService.getChapterCoverImage(item.chapterId)"
(error)="imageService.updateErroredImage($event)">
<div class="media-body">
<h5 class="mt-0 mb-1" id="item.id--{{position}}">{{formatTitle(item)}}</h5>
<i class="fa {{utilityService.mangaFormatIcon(item.seriesFormat)}}" aria-hidden="true" *ngIf="item.seriesFormat != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(item.seriesFormat)}}"></i><span class="sr-only">{{utilityService.mangaFormat(item.seriesFormat)}}</span>&nbsp;
<h5 class="mt-0 mb-1" id="item.id--{{position}}">{{formatTitle(item)}}&nbsp;
<span class="badge badge-primary badge-pill">
<span *ngIf="item.pagesRead > 0 && item.pagesRead < item.pagesTotal">{{item.pagesRead}} / {{item.pagesTotal}}</span>
<span *ngIf="item.pagesRead === 0">UNREAD</span>
<span *ngIf="item.pagesRead === item.pagesTotal">READ</span>
</span>
</h5>
<i class="fa {{utilityService.mangaFormatIcon(item.seriesFormat)}}" aria-hidden="true" *ngIf="item.seriesFormat != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(item.seriesFormat)}}"></i>
<span class="sr-only">{{utilityService.mangaFormat(item.seriesFormat)}}</span>&nbsp;
<a href="/library/{{item.libraryId}}/series/{{item.seriesId}}">{{item.seriesName}}</a>
<span *ngIf="item.promoted">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</span>
</div>
<div class="pull-right" *ngIf="item.pagesRead === item.pagesTotal"><i class="fa fa-check-square" aria-label="Read"></i></div>
</div>
</ng-template>
</app-dragable-ordered-list>

7
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.ts
View file

@ -10,7 +10,6 @@ import { AccountService } from 'src/app/_services/account.service';
import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/action-factory.service';
import { ActionService } from 'src/app/_services/action.service';
import { ImageService } from 'src/app/_services/image.service';
import { ReaderService } from 'src/app/_services/reader.service';
import { ReadingListService } from 'src/app/_services/reading-list.service';
import { IndexUpdateEvent, ItemRemoveEvent } from '../dragable-ordered-list/dragable-ordered-list.component';
@ -28,6 +27,11 @@ export class ReadingListDetailComponent implements OnInit {
isAdmin: boolean = false;
isLoading: boolean = false;
// Downloading
hasDownloadingRole: boolean = false;
downloadInProgress: boolean = false;
get MangaFormat(): typeof MangaFormat {
return MangaFormat;
}
@ -58,6 +62,7 @@ export class ReadingListDetailComponent implements OnInit {
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
if (user) {
this.isAdmin = this.accountService.hasAdminRole(user);
this.hasDownloadingRole = this.accountService.hasDownloadRole(user);
this.actions = this.actionFactoryService.getReadingListActions(this.handleReadingListActionCallback.bind(this)).filter(action => this.readingListService.actionListFilter(action, readingList, this.isAdmin));
}

6
UI/Web/src/app/reading-list/reading-list.module.ts
View file

@ -9,6 +9,8 @@ import { ReactiveFormsModule } from '@angular/forms';
import { CardsModule } from '../cards/cards.module';
import { ReadingListsComponent } from './reading-lists/reading-lists.component';
import { EditReadingListModalComponent } from './_modals/edit-reading-list-modal/edit-reading-list-modal.component';
import { PipeModule } from '../pipe/pipe.module';
import { SharedModule } from '../shared/shared.module';
@ -25,7 +27,9 @@ import { EditReadingListModalComponent } from './_modals/edit-reading-list-modal
ReadingListRoutingModule,
ReactiveFormsModule,
DragDropModule,
CardsModule
CardsModule,
PipeModule,
SharedModule
],
exports: [
AddToListModalComponent,

7
UI/Web/src/app/reading-list/reading-list.router.module.ts
View file

@ -5,13 +5,12 @@ import { ReadingListDetailComponent } from "./reading-list-detail/reading-list-d
const routes: Routes = [
{
path: '',
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard], // TODO: Add a guard if they have access to said :id
canActivate: [AuthGuard],
children: [
{path: '', component: ReadingListDetailComponent, pathMatch: 'full'},
{path: ':id', component: ReadingListDetailComponent, pathMatch: 'full'},
// {path: ':id', component: CollectionDetailComponent},
]
}
];
@ -21,4 +20,4 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ReadingListRoutingModule { }
export class ReadingListRoutingModule { }

10
UI/Web/src/app/reading-list/reading-lists/reading-lists.component.ts
View file

@ -6,6 +6,7 @@ import { PaginatedResult, Pagination } from 'src/app/_models/pagination';
import { ReadingList } from 'src/app/_models/reading-list';
import { AccountService } from 'src/app/_services/account.service';
import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/action-factory.service';
import { ActionService } from 'src/app/_services/action.service';
import { ImageService } from 'src/app/_services/image.service';
import { ReadingListService } from 'src/app/_services/reading-list.service';
@ -23,7 +24,7 @@ export class ReadingListsComponent implements OnInit {
isAdmin: boolean = false;
constructor(private readingListService: ReadingListService, public imageService: ImageService, private actionFactoryService: ActionFactoryService,
private accountService: AccountService, private toastr: ToastrService, private router: Router) { }
private accountService: AccountService, private toastr: ToastrService, private router: Router, private actionService: ActionService) { }
ngOnInit(): void {
this.loadPage();
@ -53,6 +54,13 @@ export class ReadingListsComponent implements OnInit {
this.toastr.success('Reading list deleted');
this.loadPage();
});
break;
case Action.Edit:
this.actionService.editReadingList(readingList, (updatedList: ReadingList) => {
// Reload information around list
readingList = updatedList;
});
break;
}
}

4
UI/Web/src/app/shared/_services/download.service.ts
View file

@ -73,7 +73,7 @@ export class DownloadService {
}));
}
async confirmSize(size: number, entityType: 'volume' | 'chapter' | 'series') {
async confirmSize(size: number, entityType: 'volume' | 'chapter' | 'series' | 'reading list') {
return (size < this.SIZE_WARNING || await this.confirmService.confirm('The ' + entityType + ' is ' + this.humanFileSize(size) + '. Are you sure you want to continue?'));
}
@ -85,6 +85,8 @@ export class DownloadService {
}));
}
/**
* Format bytes as human-readable text.
*

1
UI/Web/src/app/shared/_services/utility.service.ts
View file

@ -13,6 +13,7 @@ export enum KEY_CODES {
SPACE = ' ',
ENTER = 'Enter',
G = 'g',
B = 'b',
BACKSPACE = 'Backspace',
DELETE = 'Delete'
}