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

v0.4.6 Release (#599)

Browse source 
* v0.4.5 Release (#539)

* Bump versions by dotnet-bump-version.

* Versioning Fix & Improvement (#553)

* Fix UpdaterService versioning (#544)

* Add "Available" to newer, non-installed updates

* Add if...else logic to Available/Installed badge

* Change substring to account for bigger versions (#544)

* Cache BuildInfo.version into local variable (#544)

* Cache BuildInfo.Version.ToString() into local variable (#544)

Co-authored-by: Yovarni Yearwood <yovarni@hawser.org>

* Bump versions by dotnet-bump-version.

* Incognito Reader (#560)

* Hooked in incognito mode into the manga reader

* Bump versions by dotnet-bump-version.

* Reading Lists & More (#564)

* Added continous reading to the book reader. Clicking on the max pages to right of progress bar will now go to last page.

* Forgot a file for continous book reading

* Fixed up some code regarding transitioning between chapters. Arrows now show to represent a chapter transition.

* Laid the foundation for reading lists

* All foundation is laid out. Actions are wired in the UI. Backend repository is setup. Redid the migration to have ReadingList track modification so we can order them for the user.

* Updated add modal to have basic skeleton

* Hooked up ability to fetch reading lists from backend

* Made a huge performance improvement to GetChapterIdsForSeriesAsync() by reducing a JOIN and an iteration loop. Improvement went from 2 seconds -> 200 ms.

* Implemented the ability to add all chapters in a series to a reading list.

* Fixed issue with adding new items to reading list not being in a logical order. Lots of work on getting all the information around the reading list view. Added some foreign keys back to chapter so delete should clean up after itself.

* Added ability to open directly the series

* Reading List Items now have progress attached

* Hooked up list deletion and added a case where if doesn't exist on load, then redirect to library.

* Lots of changes. Introduced a dashboard component for the main app. This will sit on libraries route for now and will have 3 tabs to show different sections.

Moved libraries reel down to bottom as people are more likely to access recently added or in progress than explore their whole library.

Note: Bundles are messed up, they need to be reoptimized and routes need to be updated.

* Added pagination to the reading lists api and implemented a page to show all lists

* Cleaned up old code from all-collections component so now it only handles all collections and doesn't have the old code for an individual collection

* Hooked in actions and navigation on reading lists

* When the user re-arranges items, they are now persisted

* Implemented remove read, but performance is pretty poor. Needs to be optimized.

* Lots of API fixes for adding items to a series, returning items, etc. Committing before fixing incorrect fetches of items for a readingListId.

* Rewrote the joins for GetReadingListItemDtosByIdAsync() to not return extra records.

* Remove bug marker now that it is fixed

* Refactor update-by-series to move more of the code to a re-usable function for update-by-volume/chapter APIs

* Implemented the ability to add via series, volume or chapter.

* Added OPDS support for reading lists. This included adding VolumeId to the ReadingListDto.

* Fixed a bug with deleting items

* After we create a library inform user that a scan has started

* Added some extra help information for users on directory picker, since linux users were getting confused.

* Setup for the reading functionality

* Fixed an issue where opening the edit series modal and pressing save without doing anything would empty collection tags. Would happen often when editing cover images.

* Fixed get-next-chapter for reading list. Refactored all methods to use the new GetUserIdByUsernameAsync(), which is much faster and uses less memory.

* Hooked in prev chapter for continuous reading with reading list

* Hooked up the read code for manga reader and book reader to have list id passed

* Manga reader now functions completely with reading lists

* Implemented reading list and incognito mode into book reader

* Refactored some common reading code into reader service

* Added support for "Series -  - Vol. 03 Ch. 023.5 - Volume 3 Extras.cbz" format that can occur with FMD2.

* Implemented continuous reading with a reading list between different readers. This incurs a 3x performance hit on the book info api.

* style changes. Don't emit an event if position of draggable item hasn't changed

* Styling and added the edit reading list flow.

* Cleaned up some extra spaces when actionables isn't shown. Lots of cleanup for promoted lists.

* Refactored some filter code to a common service

* Added an RBS check in getting Items for a given user.

* Code smells

* More smells

* Bump versions by dotnet-bump-version.

* Cleanup bookmarks and Reading List Items (#567)

* Removed directives, ensured we delete bookmarks and reading list items when chapters are deleted.

* Added parsing support for "Kimi no Koto ga Daidaidaidaidaisuki na 100-nin no Kanojo Chapter 11-10"

* Bump versions by dotnet-bump-version.

* Performance Improvements (#568)

* Refactored the performance of GetChapter/BookInfo API to have a 10x speed improvement and to use common code, rather than duplicating code. Removed an api param that is no longer needed.

* Book reader now has dedicated buttons to jump to next/prev chapter as well as through page buttons

* Bump versions by dotnet-bump-version.

* Fixed an issue from perf tuning where I forgot to send Pages to frontend, breaking reader. (#569)

* Bump versions by dotnet-bump-version.

* Fixed scaling issue (#573)

* Bump versions by dotnet-bump-version.

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

* 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

* Bump versions by dotnet-bump-version.

* Bump versions by dotnet-bump-version.

* Bugfix/scanner issue (#576)

* Refactored the scanner to hopefully fix a hard to reproduce KeyNotFoundException from  GetInfosByName.

* Added parsing support for "A Compendium of Ghosts - 031 - The Third Story_ Part 12 (Digital) (Cobalt001)"

* Bump versions by dotnet-bump-version.

* Bugs, Enhancements, and Performance (#580)

* Added parser case for "The Duke of Death and His Black Maid - Ch. 177 - The Ball (3).cbz"

* Removed a file that is created and modified every test run.

* Fixed a bad parser case for "Batman Beyond 02 (of 6) (1999)" which was consuming too many characters

* Removed a lot of "Volume" parsing for Comics that don't make sense. This is prep work for the upcoming Comic Rework release.

* Reworked a lot of parsing cases for comics based on naming conventions observed from releases found online.

* Added a way for external scripts to use a user api key to authenticate

* Fixed an issue if the manga only had one page, the bottom menu would be missing page and chapter controls.

* Fixed a bug where on small phones, nav bar could overflow due to scroll to top

* Tweaked a lot of regex for manga parsing to handle some cases where poorly named files, like "Vol. 03 Ch. 21" would end up parsing as Series "Vol. 03".

* Even more handling of parser cases. Manga parser should be as it was but more robust to handle bad naming.

* Fixed: Don't force metadata refresh on Scan Series, only on refresh metadata

* Implemented the ability to automatically refresh after a series scan based on when server finishes. Remove a duplicate API call from series detail.

* Removed another API call for series metadata that isn't needed.

* Refactored Message creation to a factory, hardcoded strings are centralized, and RefreshSeriesMetadata sends an event and is refactored to be async.

* Fixed a bug when really poorly named files are within a folder that contains the series name, fallback couldn't occur due to it being taken as root folder. Now we detect said condition and will go one level higher, resulting in potentially more I/O, but the series will not be deleted.

* Added the Read in Incognito context item for Chapter cards

* Skip an additional check for series summary for series that aren't EPUB or Archive formats.

* Fixed an issue where cover image generation could occur due to a bad check on LastWriteTime on the underlying file.

* Added some extra comic parser tests

* Added a ScanLibrary event (not hooked up in UI)

* Performance improvement on metadata service. Now when we scan for cover image changes, we emit when a change occurs and only then do we update parent entities (array copy).

* Removed an hr from series detail and ensure we update the cover image for series when scan series finishes.

* Updated the infinite scroller to use a Flags pattern for the debug mode. Updated a few logical conditions for mobile.

* Removed the concurrency check on row progress as if too many calls hit the DB, it will throw, but it doesn't matter.

Fixed a bad logic code which could cause scrolling after hitting the bottom of the chapter.

* Ensure prefetching uses totalPages + 1 since we pass in totalPages as - 1 from manga reader

* Fixed issue where last page of webtoon wouldn't be prefetched due to a < instead of <= on prefetching code

* Implemented ability to send images from archives to the UI without incurring any extra memory pressure.

* Dropdown menus now have a darker background

* Webtoon reader now works on mobile.

* Fixed how keyboard presses for up/down/left/right work with MANGA_UD reading mode. See issue #579

* Fixed cont reader for webtoons on mobile

* Fixed a small issue where top spacer would too quickly switch to prev chapter

* Updated user preferences to use same slider style. Removed some css that is not used.

* Added comic parser case for "Saga 001 (2012) (Digital) (Empire-Zone)"

* Added accessibility toggle to reading list order and aligned sliders to all use the same style.

* Removed a todo for checking on new image serving code. It works great.

* Fixed a missing await

* Auth guard will now check if an existing toast is present giving same message before poping the toast.

* Fixed alignment on phones for reading lists

* Moved sorters so they aren't resused between multiple threads. Slightly higher memory footprint.

* Fixed a broken unit test

* Code smells

* More unit test fixing

* Bump versions by dotnet-bump-version.

* WebP Support (#581)

* Added trackby so when series scan event comes through, cards can update too

* Added chapter boundary toasts on book reader

* Handle closing the reader when in a reading list

* Somehow the trackby save didn't happen

* Fixed an issue where after opening a chapter info modal, then trying to open another in specials tab it would fail due to a pass by reference issue with our factory.

* When a series update occurs, if we loose specials tab, but we were on it, reselect volumes/chapters tab

* Fixed an issue where older releases would show as available, even though they were already installed.

* Converted tabs within modals to use vertical orientation (except on mobile)

* Implemented webp support. Only Safari does not support this format natively. MacOS users can use an alternative browser.

* Refactored ScannerService and MetadataService to be fully async

* Bump versions by dotnet-bump-version.

* Bugfix/manga reader (#582)

* Fixed an issue where you could change paging direction then switch to Up/Down mode and paging direction would still be present

* Removed some code for a feature I'm not implementing anymore

* Bump versions by dotnet-bump-version.

* High Res images breaking due to Canvas limits (#587)

* Fixed an issue where on Safari with high resolution images, the canvas wouldn't be able to render them. Now we detect high res that might break canvas on different browsers and scale them.

* Removed some code no longer needed

* Bump versions by dotnet-bump-version.

* Foundational Cover Image Rework (#584)

* Updating wording on card item when total pages is 0, to be just "Cannot Read" since it could be a non-archive file

* Refactored cover images to be stored on disk. This first commit has the extraction to disk and the metadata service to handle updating when applicable.

* Refactored code to have the actual save to cover image directory done by ImageService.

* Implemented the ability to override cover images.

* Some cleanup on Image service

* Implemented the ability to cleanup old covers nightly

* Added a migration to migrate existing covers to new cover image format (files).

* Refactored all CoverImages to just be the filename, leaving the Join with Cover directory to higher level code.

* Ensure when getting user progress, we pick the first.

* Added cleanup cover images for deleted tags. Don't pull any cover images that are blank.

* After series update, clear out cover image. No change on UI, but just keeps things clear before metadata refresh hits

* Refactored image formats for covers to ImageService.

* Fixed an issue where after refactoring how images were stored, the cleanup service was deleting them after each scan.

* Changed how ShouldUpdateCoverImage works to check if file exists or not even if cover image is locked.

* Fixed unit tests

* Added caching back to cover images.

* Caching on series as well

* Code Cleanup items

* Ensure when checking if a file exists in MetadataService, that we join for cover image directory. After we scan library, do one last filter to delete any series that have 0 pages total.

* Catch exceptions so we don't run cover migration if this is first time run.

* After a scan, only clear out the cache directory and not do a deep clean.

* Implemented the ability to backup custom locked covers only.

* Fixed unit tests

* Trying to figure out why GA crashes when running MetadataServiceTests.cs

* Some debugging on GA tests not running

* Commented out tests that were causing issues in GA.

* Fixed an issue where series cover images wouldn't migrate

* Fixed the updating of links to actually do all series and not just locked

* Bump versions by dotnet-bump-version.

* Feature/image rework cleanup (#589)

* Added volume migrations. Added parser case for "Chapter 63 - The Promise Made for 520 Cenz.cbr"

* Added some info statements for when full library scans occur. For image apis, return the name of the file to aid in caching.

* When managing users, show the current logged in user at the top of the list. Added a message when no libraries have been setup but you are trying to add a user to a library.

* Bump versions by dotnet-bump-version.

* Additional Memory Pressure Enhancements (#590)

* Added volume migrations. Added parser case for "Chapter 63 - The Promise Made for 520 Cenz.cbr"

* Added some info statements for when full library scans occur. For image apis, return the name of the file to aid in caching.

* When managing users, show the current logged in user at the top of the list. Added a message when no libraries have been setup but you are trying to add a user to a library.

* Removed an extra stream operation from SharpCompress cover image work. Removed an extra ToArray() from Book Reader for extracting PDF pages.

* Removed the left over comment

* Added parsing case for "Batman Beyond 04 (of 6) (1999)"

* Removed dead code

* Bump versions by dotnet-bump-version.

* Added ios detection (#591)

https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885

*Note* navigator.platform is deprecated but still seems to work for now.

* Bump versions by dotnet-bump-version.

* Added entry for persistent covers folder

* Bump versions by dotnet-bump-version.

* Bulk Operations (#596)

* Implemented the ability to perform multi-selections on cards. Basic selection code is done, CSS needed and exposing actions.

* Implemented a bulk selection bar. Added logic to the card on when to force show checkboxes.

* Fixed some bad parsing groups and cases for Comic Chapters.

* Hooked up some bulk actions on series detail page. Not hooked up to backend yet.

* Fixes #593. URI Enocde library names as sometimes they can have & in them.

* Implemented the ability to mark volume/chapters as read/unread.

* Hooked up mark as unread with specials as well.

* Add to reading list hooked up for Series Detail

* Implemented ability to add multiple series to a reading list.

* Implemented bulk selection for series cards

* Added comments to the new code in ReaderService.cs

* Implemented proper styling on bulk operation bar and integrated for collections.

* Fixed an issue with shift clicking

* Cleaned up css of bulk operations bar

* Code cleanup

* Bump versions by dotnet-bump-version.

* Feature/release cleanup (#597)

* Deselect all after bulk operations complete.

* Implemented a way to trigger selection code on mobile.

* When selection mode is active, make the clickable area the whole image.

* Series detail shouldn't use gutters for card layout as it can cause skewing on mobile

* Long press on card items to trigger the selection on mobile

* Code cleanup

* One more

* Misread the code issue

* Bump versions by dotnet-bump-version.

* v0.4.6 Release (#598)

* Bump versions by dotnet-bump-version.

* Bump versions by dotnet-bump-version.

Co-authored-by: Yovarni Yearwood <yyearwood@endlessgalaxy.dev>
Co-authored-by: Yovarni Yearwood <yovarni@hawser.org>
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
Co-authored-by: Chris Plaatjes <kizaing@gmail.com>
This commit is contained in:
Joseph Milazzo 2021-09-26 10:33:35 -07:00 • committed by GitHub
parent 5cd95dd1da
commit 9aa6c87b72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
238 changed files with 12119 additions and 1528 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/_guards/admin.guard.ts
View file

@ -19,7 +19,7 @@ export class AdminGuard implements CanActivate {
if (this.accountService.hasAdminRole(user)) {
return true;
}
this.toastr.error('You are not authorized to view this page.');
return false;
})

4
UI/Web/src/app/_guards/auth.guard.ts
View file

@ -19,7 +19,9 @@ export class AuthGuard implements CanActivate {
if (user) {
return true;
}
this.toastr.error('You are not authorized to view this page.');
if (this.toastr.toasts.filter(toast => toast.message === 'Unauthorized' || toast.message === 'You are not authorized to view this page.').length === 0) {
this.toastr.error('You are not authorized to view this page.');
}
localStorage.setItem(this.urlKey, window.location.pathname);
this.router.navigateByUrl('/libraries');
return false;

4
UI/Web/src/app/_models/events/scan-library-event.ts Normal file
View file

@ -0,0 +1,4 @@
export interface ScanLibraryEvent {
libraryId: number;
stage: 'complete';
}

3
UI/Web/src/app/_models/events/scan-series-event.ts Normal file
View file

@ -0,0 +1,3 @@
export interface ScanSeriesEvent {
seriesId: number;
}

23
UI/Web/src/app/_models/reading-list.ts Normal file
View file

@ -0,0 +1,23 @@
import { MangaFormat } from "./manga-format";
export interface ReadingListItem {
pagesRead: number;
pagesTotal: number;
seriesName: string;
seriesFormat: MangaFormat;
seriesId: number;
chapterId: number;
order: number;
chapterNumber: string;
volumeNumber: string;
libraryId: number;
id: number;
}
export interface ReadingList {
id: number;
title: string;
summary: string;
promoted: boolean;
items: Array<ReadingListItem>;
}

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

89
UI/Web/src/app/_services/action-factory.service.ts
View file

@ -3,6 +3,7 @@ import { Chapter } from '../_models/chapter';
import { CollectionTag } from '../_models/collection-tag';
import { Library } from '../_models/library';
import { MangaFormat } from '../_models/manga-format';
import { ReadingList } from '../_models/reading-list';
import { Series } from '../_models/series';
import { Volume } from '../_models/volume';
import { AccountService } from './account.service';
@ -16,7 +17,9 @@ export enum Action {
Info = 5,
RefreshMetadata = 6,
Download = 7,
Bookmarks = 8
Bookmarks = 8,
IncognitoRead = 9,
AddToReadingList = 10
}
export interface ActionItem<T> {
@ -41,6 +44,8 @@ export class ActionFactoryService {
collectionTagActions: Array<ActionItem<CollectionTag>> = [];
readingListActions: Array<ActionItem<ReadingList>> = [];
isAdmin = false;
hasDownloadRole = false;
@ -108,7 +113,7 @@ export class ActionFactoryService {
this.chapterActions.push({
action: Action.Edit,
title: 'Edit',
title: 'Info',
callback: this.dummyCallback,
requiresAdmin: false
});
@ -133,28 +138,39 @@ export class ActionFactoryService {
}
getLibraryActions(callback: (action: Action, library: Library) => void) {
this.libraryActions.forEach(action => action.callback = callback);
return this.libraryActions;
const actions = this.libraryActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
getSeriesActions(callback: (action: Action, series: Series) => void) {
this.seriesActions.forEach(action => action.callback = callback);
return this.seriesActions;
const actions = this.seriesActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
getVolumeActions(callback: (action: Action, volume: Volume) => void) {
this.volumeActions.forEach(action => action.callback = callback);
return this.volumeActions;
const actions = this.volumeActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
getChapterActions(callback: (action: Action, chapter: Chapter) => void) {
this.chapterActions.forEach(action => action.callback = callback);
return this.chapterActions;
const actions = this.chapterActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
getCollectionTagActions(callback: (action: Action, collectionTag: CollectionTag) => void) {
this.collectionTagActions.forEach(action => action.callback = callback);
return this.collectionTagActions;
const actions = this.collectionTagActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
getReadingListActions(callback: (action: Action, readingList: ReadingList) => void) {
const actions = this.readingListActions.map(a => {return {...a}});
actions.forEach(action => action.callback = callback);
return actions;
}
filterBookmarksForFormat(action: ActionItem<Series>, series: Series) {
@ -187,7 +203,13 @@ export class ActionFactoryService {
title: 'Bookmarks',
callback: this.dummyCallback,
requiresAdmin: false
}
},
{
action: Action.AddToReadingList,
title: 'Add to Reading List',
callback: this.dummyCallback,
requiresAdmin: false
},
];
this.volumeActions = [
@ -203,6 +225,18 @@ export class ActionFactoryService {
callback: this.dummyCallback,
requiresAdmin: false
},
{
action: Action.AddToReadingList,
title: 'Add to Reading List',
callback: this.dummyCallback,
requiresAdmin: false
},
{
action: Action.IncognitoRead,
title: 'Read in Incognito',
callback: this.dummyCallback,
requiresAdmin: false
},
{
action: Action.Edit,
title: 'Info',
@ -223,7 +257,34 @@ export class ActionFactoryService {
title: 'Mark as Unread',
callback: this.dummyCallback,
requiresAdmin: false
}
},
{
action: Action.IncognitoRead,
title: 'Read in Incognito',
callback: this.dummyCallback,
requiresAdmin: false
},
{
action: Action.AddToReadingList,
title: 'Add to Reading List',
callback: this.dummyCallback,
requiresAdmin: false
},
];
this.readingListActions = [
{
action: Action.Edit,
title: 'Edit',
callback: this.dummyCallback,
requiresAdmin: false
},
{
action: Action.Delete,
title: 'Delete',
callback: this.dummyCallback,
requiresAdmin: false
},
];
}
}

218
UI/Web/src/app/_services/action.service.ts
View file

@ -1,11 +1,14 @@
import { Injectable, OnDestroy } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { forkJoin, Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { take } from 'rxjs/operators';
import { BookmarksModalComponent } from '../cards/_modals/bookmarks-modal/bookmarks-modal.component';
import { AddToListModalComponent, ADD_FLOW } from '../reading-list/_modals/add-to-list-modal/add-to-list-modal.component';
import { EditReadingListModalComponent } from '../reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component';
import { Chapter } from '../_models/chapter';
import { Library } from '../_models/library';
import { ReadingList } from '../_models/reading-list';
import { Series } from '../_models/series';
import { Volume } from '../_models/volume';
import { LibraryService } from './library.service';
@ -16,6 +19,8 @@ export type LibraryActionCallback = (library: Partial<Library>) => void;
export type SeriesActionCallback = (series: Series) => void;
export type VolumeActionCallback = (volume: Volume) => void;
export type ChapterActionCallback = (chapter: Chapter) => void;
export type ReadingListActionCallback = (readingList: ReadingList) => void;
export type VoidActionCallback = () => void;
/**
* Responsible for executing actions
@ -27,6 +32,7 @@ export class ActionService implements OnDestroy {
private readonly onDestroy = new Subject<void>();
private bookmarkModalRef: NgbModalRef | null = null;
private readingListModalRef: NgbModalRef | null = null;
constructor(private libraryService: LibraryService, private seriesService: SeriesService,
private readerService: ReaderService, private toastr: ToastrService, private modalService: NgbModal) { }
@ -156,7 +162,7 @@ export class ActionService implements OnDestroy {
* @param callback Optional callback to perform actions after API completes
*/
markVolumeAsUnread(seriesId: number, volume: Volume, callback?: VolumeActionCallback) {
this.readerService.markVolumeRead(seriesId, volume.id).subscribe(() => {
this.readerService.markVolumeUnread(seriesId, volume.id).subscribe(() => {
volume.pagesRead = 0;
volume.chapters?.forEach(c => c.pagesRead = 0);
this.toastr.success('Marked as Unread');
@ -198,6 +204,85 @@ export class ActionService implements OnDestroy {
});
}
/**
* Mark all chapters and the volumes as Read. All volumes and chapters must belong to a series
* @param seriesId Series Id
* @param volumes Volumes, should have id, chapters and pagesRead populated
* @param chapters? Chapters, should have id
* @param callback Optional callback to perform actions after API completes
*/
markMultipleAsRead(seriesId: number, volumes: Array<Volume>, chapters?: Array<Chapter>, callback?: VoidActionCallback) {
this.readerService.markMultipleRead(seriesId, volumes.map(v => v.id), chapters?.map(c => c.id)).pipe(take(1)).subscribe(() => {
volumes.forEach(volume => {
volume.pagesRead = volume.pages;
volume.chapters?.forEach(c => c.pagesRead = c.pages);
});
chapters?.forEach(c => c.pagesRead = c.pages);
this.toastr.success('Marked as Read');
if (callback) {
callback();
}
});
}
/**
* Mark all chapters and the volumes as Unread. All volumes must belong to a series
* @param seriesId Series Id
* @param volumes Volumes, should have id, chapters and pagesRead populated
* @param callback Optional callback to perform actions after API completes
*/
markMultipleAsUnread(seriesId: number, volumes: Array<Volume>, chapters?: Array<Chapter>, callback?: VoidActionCallback) {
this.readerService.markMultipleUnread(seriesId, volumes.map(v => v.id), chapters?.map(c => c.id)).pipe(take(1)).subscribe(() => {
volumes.forEach(volume => {
volume.pagesRead = volume.pages;
volume.chapters?.forEach(c => c.pagesRead = c.pages);
});
chapters?.forEach(c => c.pagesRead = c.pages);
this.toastr.success('Marked as Read');
if (callback) {
callback();
}
});
}
/**
* Mark all series as Read.
* @param series Series, should have id, pagesRead populated
* @param callback Optional callback to perform actions after API completes
*/
markMultipleSeriesAsRead(series: Array<Series>, callback?: VoidActionCallback) {
this.readerService.markMultipleSeriesRead(series.map(v => v.id)).pipe(take(1)).subscribe(() => {
series.forEach(s => {
s.pagesRead = s.pages;
});
this.toastr.success('Marked as Read');
if (callback) {
callback();
}
});
}
/**
* Mark all series as Unread.
* @param series Series, should have id, pagesRead populated
* @param callback Optional callback to perform actions after API completes
*/
markMultipleSeriesAsUnread(series: Array<Series>, callback?: VoidActionCallback) {
this.readerService.markMultipleSeriesUnread(series.map(v => v.id)).pipe(take(1)).subscribe(() => {
series.forEach(s => {
s.pagesRead = s.pages;
});
this.toastr.success('Marked as Unread');
if (callback) {
callback();
}
});
}
openBookmarkModal(series: Series, callback?: SeriesActionCallback) {
if (this.bookmarkModalRef != null) { return; }
@ -217,4 +302,131 @@ export class ActionService implements OnDestroy {
});
}
addMultipleToReadingList(seriesId: number, volumes: Array<Volume>, chapters?: Array<Chapter>, callback?: VoidActionCallback) {
if (this.readingListModalRef != null) { return; }
this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
this.readingListModalRef.componentInstance.seriesId = seriesId;
this.readingListModalRef.componentInstance.volumeIds = volumes.map(v => v.id);
this.readingListModalRef.componentInstance.chapterIds = chapters?.map(c => c.id);
this.readingListModalRef.componentInstance.title = 'Multiple Selections';
this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple;
this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback();
}
});
this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback();
}
});
}
addMultipleSeriesToReadingList(series: Array<Series>, callback?: VoidActionCallback) {
if (this.readingListModalRef != null) { return; }
this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
this.readingListModalRef.componentInstance.seriesIds = series.map(v => v.id);
this.readingListModalRef.componentInstance.title = 'Multiple Selections';
this.readingListModalRef.componentInstance.type = ADD_FLOW.Multiple_Series;
this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback();
}
});
this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback();
}
});
}
addSeriesToReadingList(series: Series, callback?: SeriesActionCallback) {
if (this.readingListModalRef != null) { return; }
this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
this.readingListModalRef.componentInstance.seriesId = series.id;
this.readingListModalRef.componentInstance.title = series.name;
this.readingListModalRef.componentInstance.type = ADD_FLOW.Series;
this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(series);
}
});
this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(series);
}
});
}
addVolumeToReadingList(volume: Volume, seriesId: number, callback?: VolumeActionCallback) {
if (this.readingListModalRef != null) { return; }
this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
this.readingListModalRef.componentInstance.seriesId = seriesId;
this.readingListModalRef.componentInstance.volumeId = volume.id;
this.readingListModalRef.componentInstance.type = ADD_FLOW.Volume;
this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(volume);
}
});
this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(volume);
}
});
}
addChapterToReadingList(chapter: Chapter, seriesId: number, callback?: ChapterActionCallback) {
if (this.readingListModalRef != null) { return; }
this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });
this.readingListModalRef.componentInstance.seriesId = seriesId;
this.readingListModalRef.componentInstance.chapterId = chapter.id;
this.readingListModalRef.componentInstance.type = ADD_FLOW.Chapter;
this.readingListModalRef.closed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(chapter);
}
});
this.readingListModalRef.dismissed.pipe(take(1)).subscribe(() => {
this.readingListModalRef = null;
if (callback) {
callback(chapter);
}
});
}
editReadingList(readingList: ReadingList, callback?: ReadingListActionCallback) {
const readingListModalRef = this.modalService.open(EditReadingListModalComponent, { scrollable: true, size: 'md' });
readingListModalRef.componentInstance.readingList = readingList;
readingListModalRef.closed.pipe(take(1)).subscribe((list) => {
if (callback && list !== undefined) {
callback(readingList);
}
});
readingListModalRef.dismissed.pipe(take(1)).subscribe((list) => {
if (callback && list !== undefined) {
callback(readingList);
}
});
}
}

2
UI/Web/src/app/_services/library.service.ts
View file

@ -37,7 +37,7 @@ export class LibraryService {
listDirectories(rootPath: string) {
let query = '';
if (rootPath !== undefined && rootPath.length > 0) {
query = '?path=' + rootPath;
query = '?path=' + encodeURIComponent(rootPath);
}
return this.httpClient.get<string[]>(this.baseUrl + 'library/list' + query);

31
UI/Web/src/app/_services/message-hub.service.ts
View file

@ -1,13 +1,18 @@
import { Injectable } from '@angular/core';
import { EventEmitter, Injectable } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { User } from '@sentry/angular';
import { BehaviorSubject, ReplaySubject } from 'rxjs';
import { environment } from 'src/environments/environment';
import { UpdateNotificationModalComponent } from '../shared/update-notification/update-notification-modal.component';
import { ScanLibraryEvent } from '../_models/events/scan-library-event';
import { ScanSeriesEvent } from '../_models/events/scan-series-event';
export enum EVENTS {
UpdateAvailable = 'UpdateAvailable'
UpdateAvailable = 'UpdateAvailable',
ScanSeries = 'ScanSeries',
ScanLibrary = 'ScanLibrary',
RefreshMetadata = 'RefreshMetadata',
}
export interface Message<T> {
@ -26,6 +31,9 @@ export class MessageHubService {
private messagesSource = new ReplaySubject<Message<any>>(1);
public messages$ = this.messagesSource.asObservable();
public scanSeries: EventEmitter<ScanSeriesEvent> = new EventEmitter<ScanSeriesEvent>();
public scanLibrary: EventEmitter<ScanLibraryEvent> = new EventEmitter<ScanLibraryEvent>();
constructor(private modalService: NgbModal) { }
createHubConnection(user: User) {
@ -44,6 +52,25 @@ export class MessageHubService {
//console.log('[Hub] Body: ', body);
});
this.hubConnection.on(EVENTS.ScanSeries, resp => {
this.messagesSource.next({
event: EVENTS.ScanSeries,
payload: resp.body
});
this.scanSeries.emit(resp.body);
});
this.hubConnection.on(EVENTS.ScanLibrary, resp => {
this.messagesSource.next({
event: EVENTS.ScanLibrary,
payload: resp.body
});
this.scanLibrary.emit(resp.body);
// if ((resp.body as ScanLibraryEvent).stage === 'complete') {
// this.toastr.
// }
});
this.hubConnection.on(EVENTS.UpdateAvailable, resp => {
this.messagesSource.next({
event: EVENTS.UpdateAvailable,

71
UI/Web/src/app/_services/reader.service.ts
View file

@ -56,8 +56,8 @@ export class ReaderService {
return this.baseUrl + 'reader/image?chapterId=' + chapterId + '&page=' + page;
}
getChapterInfo(seriesId: number, chapterId: number) {
return this.httpClient.get<ChapterInfo>(this.baseUrl + 'reader/chapter-info?chapterId=' + chapterId + '&seriesId=' + seriesId);
getChapterInfo(chapterId: number) {
return this.httpClient.get<ChapterInfo>(this.baseUrl + 'reader/chapter-info?chapterId=' + chapterId);
}
saveProgress(seriesId: number, volumeId: number, chapterId: number, page: number, bookScrollId: string | null = null) {
@ -68,17 +68,44 @@ export class ReaderService {
return this.httpClient.post(this.baseUrl + 'reader/mark-volume-read', {seriesId, volumeId});
}
getNextChapter(seriesId: number, volumeId: number, currentChapterId: number) {
markMultipleRead(seriesId: number, volumeIds: Array<number>, chapterIds?: Array<number>) {
return this.httpClient.post(this.baseUrl + 'reader/mark-multiple-read', {seriesId, volumeIds, chapterIds});
}
markMultipleUnread(seriesId: number, volumeIds: Array<number>, chapterIds?: Array<number>) {
return this.httpClient.post(this.baseUrl + 'reader/mark-multiple-unread', {seriesId, volumeIds, chapterIds});
}
markMultipleSeriesRead(seriesIds: Array<number>) {
return this.httpClient.post(this.baseUrl + 'reader/mark-multiple-series-read', {seriesIds});
}
markMultipleSeriesUnread(seriesIds: Array<number>) {
return this.httpClient.post(this.baseUrl + 'reader/mark-multiple-series-unread', {seriesIds});
}
markVolumeUnread(seriesId: number, volumeId: number) {
return this.httpClient.post(this.baseUrl + 'reader/mark-volume-unread', {seriesId, volumeId});
}
getNextChapter(seriesId: number, volumeId: number, currentChapterId: number, readingListId: number = -1) {
if (readingListId > 0) {
return this.httpClient.get<number>(this.baseUrl + 'readinglist/next-chapter?seriesId=' + seriesId + '&currentChapterId=' + currentChapterId + '&readingListId=' + readingListId);
}
return this.httpClient.get<number>(this.baseUrl + 'reader/next-chapter?seriesId=' + seriesId + '&volumeId=' + volumeId + '&currentChapterId=' + currentChapterId);
}
getPrevChapter(seriesId: number, volumeId: number, currentChapterId: number) {
getPrevChapter(seriesId: number, volumeId: number, currentChapterId: number, readingListId: number = -1) {
if (readingListId > 0) {
return this.httpClient.get<number>(this.baseUrl + 'readinglist/prev-chapter?seriesId=' + seriesId + '&currentChapterId=' + currentChapterId + '&readingListId=' + readingListId);
}
return this.httpClient.get<number>(this.baseUrl + 'reader/prev-chapter?seriesId=' + seriesId + '&volumeId=' + volumeId + '&currentChapterId=' + currentChapterId);
}
getCurrentChapter(volumes: Array<Volume>): Chapter {
let currentlyReadingChapter: Chapter | undefined = undefined;
const chapters = volumes.filter(v => v.number !== 0).map(v => v.chapters || []).flat().sort(this.utilityService.sortChapters); // changed from === 0 to != 0
const chapters = volumes.filter(v => v.number !== 0).map(v => v.chapters || []).flat().sort(this.utilityService.sortChapters);
for (const c of chapters) {
if (c.pagesRead < c.pages) {
@ -132,4 +159,38 @@ export class ReaderService {
if (imageSrc === undefined || imageSrc === '') { return -1; }
return parseInt(imageSrc.split('&page=')[1], 10);
}
getNextChapterUrl(url: string, nextChapterId: number, incognitoMode: boolean = false, readingListMode: boolean = false, readingListId: number = -1) {
const lastSlashIndex = url.lastIndexOf('/');
let newRoute = url.substring(0, lastSlashIndex + 1) + nextChapterId + '';
newRoute += this.getQueryParams(incognitoMode, readingListMode, readingListId);
return newRoute;
}
getQueryParamsObject(incognitoMode: boolean = false, readingListMode: boolean = false, readingListId: number = -1) {
let params: {[key: string]: any} = {};
if (incognitoMode) {
params['incognitoMode'] = true;
}
if (readingListMode) {
params['readingListId'] = readingListId;
}
return params;
}
getQueryParams(incognitoMode: boolean = false, readingListMode: boolean = false, readingListId: number = -1) {
let params = '';
if (incognitoMode) {
params += '?incognitoMode=true';
}
if (readingListMode) {
if (params.indexOf('?') > 0) {
params += '&readingListId=' + readingListId;
} else {
params += '?readingListId=' + readingListId;
}
}
return params;
}
}

110
UI/Web/src/app/_services/reading-list.service.ts Normal file
View file

@ -0,0 +1,110 @@
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { PaginatedResult } from '../_models/pagination';
import { ReadingList, ReadingListItem } from '../_models/reading-list';
import { ActionItem } from './action-factory.service';
@Injectable({
providedIn: 'root'
})
export class ReadingListService {
baseUrl = environment.apiUrl;
constructor(private httpClient: HttpClient) { }
getReadingList(readingListId: number) {
return this.httpClient.get<ReadingList>(this.baseUrl + 'readinglist?readingListId=' + readingListId);
}
getReadingLists(includePromoted: boolean = true, pageNum?: number, itemsPerPage?: number) {
let params = new HttpParams();
params = this._addPaginationIfExists(params, pageNum, itemsPerPage);
return this.httpClient.post<PaginatedResult<ReadingList[]>>(this.baseUrl + 'readinglist/lists?includePromoted=' + includePromoted, {}, {observe: 'response', params}).pipe(
map((response: any) => {
return this._cachePaginatedResults(response, new PaginatedResult<ReadingList[]>());
})
);
}
getListItems(readingListId: number) {
return this.httpClient.get<ReadingListItem[]>(this.baseUrl + 'readinglist/items?readingListId=' + readingListId);
}
createList(title: string) {
return this.httpClient.post<ReadingList>(this.baseUrl + 'readinglist/create', {title});
}
update(model: {readingListId: number, title?: string, summary?: string, promoted: boolean}) {
return this.httpClient.post(this.baseUrl + 'readinglist/update', model, { responseType: 'text' as 'json' });
}
updateByMultiple(readingListId: number, seriesId: number, volumeIds: Array<number>, chapterIds?: Array<number>) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-by-multiple', {readingListId, seriesId, volumeIds, chapterIds});
}
updateByMultipleSeries(readingListId: number, seriesIds: Array<number>) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-by-multiple-series', {readingListId, seriesIds});
}
updateBySeries(readingListId: number, seriesId: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-by-series', {readingListId, seriesId}, { responseType: 'text' as 'json' });
}
updateByVolume(readingListId: number, seriesId: number, volumeId: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-by-volume', {readingListId, seriesId, volumeId}, { responseType: 'text' as 'json' });
}
updateByChapter(readingListId: number, seriesId: number, chapterId: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-by-chapter', {readingListId, seriesId, chapterId}, { responseType: 'text' as 'json' });
}
delete(readingListId: number) {
return this.httpClient.delete(this.baseUrl + 'readinglist?readingListId=' + readingListId, { responseType: 'text' as 'json' });
}
updatePosition(readingListId: number, readingListItemId: number, fromPosition: number, toPosition: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/update-position', {readingListId, readingListItemId, fromPosition, toPosition}, { responseType: 'text' as 'json' });
}
deleteItem(readingListId: number, readingListItemId: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/delete-item', {readingListId, readingListItemId}, { responseType: 'text' as 'json' });
}
removeRead(readingListId: number) {
return this.httpClient.post(this.baseUrl + 'readinglist/remove-read?readingListId=' + readingListId, { responseType: 'text' as 'json' });
}
actionListFilter(action: ActionItem<ReadingList>, readingList: ReadingList, isAdmin: boolean) {
if (readingList?.promoted && !isAdmin) return false;
return true;
}
_addPaginationIfExists(params: HttpParams, pageNum?: number, itemsPerPage?: number) {
// TODO: Move to utility service
if (pageNum !== null && pageNum !== undefined && itemsPerPage !== null && itemsPerPage !== undefined) {
params = params.append('pageNumber', pageNum + '');
params = params.append('pageSize', itemsPerPage + '');
}
return params;
}
_cachePaginatedResults(response: any, paginatedVariable: PaginatedResult<any[]>) {
// TODO: Move to utility service
if (response.body === null) {
paginatedVariable.result = [];
} else {
paginatedVariable.result = response.body;
}
const pageHeader = response.headers.get('Pagination');
if (pageHeader !== null) {
paginatedVariable.pagination = JSON.parse(pageHeader);
}
return paginatedVariable;
}
}

5
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>
@ -27,7 +27,7 @@
</li>
</ol>
<ng-template #noBreadcrumb>
<div class="breadcrumb">Select a folder to view breadcrumb</div>
<div class="breadcrumb">Select a folder to view breadcrumb. Don't see your directory, try checking / first.</div>
</ng-template>
</nav>
<ul class="list-group">
@ -50,5 +50,6 @@
</ul>
</div>
<div class="modal-footer">
<a class="btn btn-info" href="https://wiki.kavitareader.com/en/guides/adding-a-library" target="_blank">Help</a>
<button type="button" class="btn btn-secondary" (click)="close()">Cancel</button>
</div>

3
UI/Web/src/app/admin/_modals/library-access-modal/library-access-modal.component.html
View file

@ -14,6 +14,9 @@
<label attr.for="library-{{i}}" class="form-check-label">{{library.data.name}}</label>
</div>
</li>
<li class="list-group-item" *ngIf="selectedLibraries.length === 0">
There are no libraries setup yet.
</li>
</div>
</div>
<div class="modal-footer">

5
UI/Web/src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts
View file

@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { Library } from 'src/app/_models/library';
import { LibraryService } from 'src/app/_services/library.service';
import { SettingsService } from '../../settings.service';
@ -26,7 +27,8 @@ export class LibraryEditorModalComponent implements OnInit {
libraryTypes: string[] = []
constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal, private settingService: SettingsService) { }
constructor(private modalService: NgbModal, private libraryService: LibraryService, public modal: NgbActiveModal, private settingService: SettingsService,
private toastr: ToastrService) { }
ngOnInit(): void {
@ -64,6 +66,7 @@ export class LibraryEditorModalComponent implements OnInit {
model.folders = model.folders.map((item: string) => item.startsWith('\\') ? item.substr(1, item.length) : item);
model.type = parseInt(model.type, 10);
this.libraryService.create(model).subscribe(() => {
this.toastr.success('Library created, a scan has been started');
this.close(true);
}, err => {
this.errorMessage = err;

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: []
})

7
UI/Web/src/app/admin/changelog/changelog.component.html
View file

@ -1,7 +1,10 @@
<ng-container *ngFor="let update of updates; let indx = index;">
<div class="card w-100 mb-2" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{update.updateTitle}}&nbsp;<span class="badge badge-secondary" *ngIf="update.updateVersion === update.currentVersion">Installed</span></h5>
<h5 class="card-title">{{update.updateTitle}}&nbsp;
<span class="badge badge-secondary" *ngIf="update.updateVersion === update.currentVersion">Installed</span>
<span class="badge badge-secondary" *ngIf="update.updateVersion > update.currentVersion">Available</span>
</h5>
<pre class="card-text update-body" [innerHtml]="update.updateBody | safeHtml"></pre>
<a *ngIf="!update.isDocker" href="{{update.updateUrl}}" class="btn btn-{{indx === 0 ? 'primary' : 'secondary'}} float-right" target="_blank">Download</a>
</div>
@ -11,4 +14,4 @@
<div class="spinner-border text-secondary" *ngIf="isLoading" role="status">
<span class="invisible">Loading...</span>
</div>
</div>

2
UI/Web/src/app/admin/dashboard/dashboard.component.html
View file

@ -1,7 +1,7 @@
<div class="container">
<h2>Admin Dashboard</h2>
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs nav-pills">
<li *ngFor="let tab of tabs" [ngbNavItem]="tab">
<a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | titlecase }}</a>
<ng-template ngbNavContent>

2
UI/Web/src/app/admin/manage-users/manage-users.component.html
View file

@ -9,7 +9,7 @@
<li *ngFor="let member of members; let idx = index;" class="list-group-item">
<div>
<h4>
<i class="presence fa fa-circle" title="Active" aria-hidden="true" *ngIf="false && (presence.onlineUsers$ | async)?.includes(member.username)"></i><span id="member-name--{{idx}}">{{member.username | titlecase}} </span><span *ngIf="member.isAdmin" class="badge badge-pill badge-secondary">Admin</span>
<i class="presence fa fa-circle" title="Active" aria-hidden="true" *ngIf="false && (presence.onlineUsers$ | async)?.includes(member.username)"></i><span id="member-name--{{idx}}">{{member.username | titlecase}} </span><span *ngIf="member.username === loggedInUsername">(You)</span>
<div class="float-right" *ngIf="canEditMember(member)">
<button class="btn btn-danger mr-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-secondary mr-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>

13
UI/Web/src/app/admin/manage-users/manage-users.component.ts
View file

@ -53,7 +53,18 @@ export class ManageUsersComponent implements OnInit, OnDestroy {
loadMembers() {
this.loadingMembers = true;
this.memberService.getMembers().subscribe(members => {
this.members = members.filter(member => member.username !== this.loggedInUsername);
this.members = members;
// Show logged in user at the top of the list
this.members.sort((a: Member, b: Member) => {
if (a.username === this.loggedInUsername) return 1;
if (b.username === this.loggedInUsername) return 1;
const nameA = a.username.toUpperCase();
const nameB = b.username.toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
})
this.loadingMembers = false;
});
}

8
UI/Web/src/app/app-routing.module.ts
View file

@ -10,6 +10,8 @@ import { UserLoginComponent } from './user-login/user-login.component';
import { AuthGuard } from './_guards/auth.guard';
import { LibraryAccessGuard } from './_guards/library-access.guard';
import { InProgressComponent } from './in-progress/in-progress.component';
import { DashboardComponent as AdminDashboardComponent } from './admin/dashboard/dashboard.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// TODO: Once we modularize the components, use this and measure performance impact: https://angular.io/guide/lazy-loading-ngmodules#preloading-modules
@ -27,6 +29,10 @@ const routes: Routes = [
path: 'preferences',
loadChildren: () => import('./user-settings/user-settings.module').then(m => m.UserSettingsModule)
},
{
path: 'lists',
loadChildren: () => import('./reading-list/reading-list.module').then(m => m.ReadingListModule)
},
{
path: '',
runGuardsAndResolvers: 'always',
@ -49,7 +55,7 @@ const routes: Routes = [
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
{path: 'library', component: LibraryComponent},
{path: 'library', component: DashboardComponent},
{path: 'recently-added', component: RecentlyAddedComponent},
{path: 'in-progress', component: InProgressComponent},
]

14
UI/Web/src/app/app.module.ts
View file

@ -7,7 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbAccordionModule, NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbRatingModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
import { NavHeaderComponent } from './nav-header/nav-header.component';
import { JwtInterceptor } from './_interceptors/jwt.interceptor';
import { UserLoginComponent } from './user-login/user-login.component';
@ -21,7 +21,6 @@ import { NotConnectedComponent } from './not-connected/not-connected.component';
import { AutocompleteLibModule } from 'angular-ng-autocomplete';
import { ReviewSeriesModalComponent } from './_modals/review-series-modal/review-series-modal.component';
import { CarouselModule } from './carousel/carousel.module';
import { NgxSliderModule } from '@angular-slider/ngx-slider';
import * as Sentry from '@sentry/angular';
@ -33,11 +32,12 @@ import { Dedupe as DedupeIntegration } from '@sentry/integrations';
import { PersonBadgeComponent } from './person-badge/person-badge.component';
import { TypeaheadModule } from './typeahead/typeahead.module';
import { RecentlyAddedComponent } from './recently-added/recently-added.component';
import { InProgressComponent } from './in-progress/in-progress.component';
import { CardsModule } from './cards/cards.module';
import { CollectionsModule } from './collections/collections.module';
import { CommonModule } from '@angular/common';
import { InProgressComponent } from './in-progress/in-progress.component';
import { SAVER, getSaver } from './shared/_providers/saver.provider';
import { ReadingListModule } from './reading-list/reading-list.module';
import { DashboardComponent } from './dashboard/dashboard.component';
let sentryProviders: any[] = [];
@ -98,6 +98,7 @@ if (environment.production) {
PersonBadgeComponent,
RecentlyAddedComponent,
InProgressComponent,
DashboardComponent,
],
imports: [
HttpClientModule,
@ -109,19 +110,16 @@ if (environment.production) {
NgbDropdownModule, // Nav
AutocompleteLibModule, // Nav
//NgbTooltipModule, // Shared & SettingsModule
NgbRatingModule, // Series Detail
NgbNavModule,
//NgbAccordionModule, // User Preferences
//NgxSliderModule, // User Preference
NgbPaginationModule,
SharedModule,
CarouselModule,
TypeaheadModule,
CardsModule,
CollectionsModule,
ReadingListModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',

9
UI/Web/src/app/book-reader/_models/book-info.ts Normal file
View file

@ -0,0 +1,9 @@
import { MangaFormat } from "src/app/_models/manga-format";
export interface BookInfo {
bookTitle: string;
seriesFormat: MangaFormat;
seriesId: number;
libraryId: number;
volumeId: number;
}

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

@ -63,11 +63,13 @@
</div>
</div>
<div class="row no-gutters">
<div class="col-1">{{pageNum}}</div>
<div class="col-10" style="margin-top: 9px">
<button class="btn btn-small btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter()" title="Prev Chapter/Volume"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<div class="col-1" style="margin-top: 6px">{{pageNum}}</div>
<div class="col-8" style="margin-top: 15px">
<ngb-progressbar style="cursor: pointer" title="Go to page" (click)="goToPage()" type="primary" height="5px" [value]="pageNum" [max]="maxPages - 1"></ngb-progressbar>
</div>
<div class="col-1">{{maxPages - 1}}</div>
<div class="col-1 btn-icon" style="margin-top: 6px" (click)="goToPage(maxPages - 1)" title="Go to last page">{{maxPages - 1}}</div>
<button class="btn btn-small btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter()" title="Next Chapter/Volume"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
</div>
<div class="table-of-contents">
<h3>Table of Contents</h3>
@ -77,18 +79,18 @@
<div *ngIf="chapters.length === 1; else nestedChildren">
<ul>
<li *ngFor="let chapter of chapters[0].children">
<a href="javascript:void(0);" (click)="loadChapter(chapter.page, chapter.part)">{{chapter.title}}</a>
<a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
</li>
</ul>
</div>
<ng-template #nestedChildren>
<ul *ngFor="let chapterGroup of chapters" style="padding-inline-start: 0px">
<li class="{{chapterGroup.page == pageNum ? 'active': ''}}" (click)="loadChapter(chapterGroup.page, '')">
<li class="{{chapterGroup.page == pageNum ? 'active': ''}}" (click)="loadChapterPage(chapterGroup.page, '')">
{{chapterGroup.title}}
</li>
<ul *ngFor="let chapter of chapterGroup.children">
<li class="{{cleanIdSelector(chapter.part) === currentPageAnchor ? 'active' : ''}}">
<a href="javascript:void(0);" (click)="loadChapter(chapter.page, chapter.part)">{{chapter.title}}</a>
<a href="javascript:void(0);" (click)="loadChapterPage(chapter.page, chapter.part)">{{chapter.title}}</a>
</li>
</ul>
</ul>
@ -110,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">
@ -122,12 +124,22 @@
<ng-template #actionBar>
<div class="reading-bar row no-gutters justify-content-between">
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="prevPage()" [disabled]="readingDirection === 0 ? pageNum === 0 : pageNum + 1 >= maxPages - 1" title="{{readingDirection === 0 ? 'Previous' : 'Next'}} Page"><i class="fa fa-arrow-left" aria-hidden="true"></i><span class="phone-hidden">&nbsp;{{readingDirection === 0 ? 'Previous' : 'Next'}}</span></button>
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="prevPage()"
[disabled]="IsPrevDisabled"
title="{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}} Page">
<i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? pageNum === 0 : pageNum + 1 >= maxPages - 1) ? 'fa-angle-double-left' : 'fa-angle-left'}}" aria-hidden="true"></i>
<span class="phone-hidden">&nbsp;{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}}</span>
</button>
<button *ngIf="!this.adhocPageHistory.isEmpty()" class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="goBack()" title="Go Back"><i class="fa fa-reply" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Go Back</span></button>
<button class="btn btn-secondary col-2 col-xs-1" (click)="toggleDrawer()"><i class="fa fa-bars" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Settings</span></button>
<div class="book-title col-2 phone-hidden">{{bookTitle}} </div>
<div class="book-title col-2 phone-hidden">{{bookTitle}} <span *ngIf="incognitoMode">(<i class="fa fa-glasses" aria-hidden="true"></i><span class="sr-only">Incognito Mode</span>)</span></div>
<button class="btn btn-secondary col-2 col-xs-1" (click)="closeReader()"><i class="fa fa-times-circle" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Close</span></button>
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1" [disabled]="readingDirection === 0 ? pageNum + 1 >= maxPages - 1 : pageNum === 0" (click)="nextPage()" title="{{readingDirection === 0 ? 'Next' : 'Previous'}} Page"><span class="phone-hidden">{{readingDirection === 0 ? 'Next' : 'Previous'}}&nbsp;</span><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
<button class="btn btn-outline-secondary btn-icon col-2 col-xs-1"
[disabled]="IsNextDisabled"
(click)="nextPage()" title="{{readingDirection === ReadingDirection.LeftToRight ? 'Next' : 'Previous'}} Page">
<span class="phone-hidden">{{readingDirection === ReadingDirection.LeftToRight ? 'Next' : 'Previous'}}&nbsp;</span>
<i class="fa {{(readingDirection === ReadingDirection.LeftToRight ? pageNum + 1 >= maxPages - 1 : pageNum === 0) ? 'fa-angle-double-right' : 'fa-angle-right'}}" aria-hidden="true"></i>
</button>
</div>
</ng-template>

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

@ -22,6 +22,7 @@ import { Preferences } from 'src/app/_models/preferences/preferences';
import { MemberService } from 'src/app/_services/member.service';
import { ReadingDirection } from 'src/app/_models/preferences/reading-direction';
import { ScrollService } from 'src/app/scroll.service';
import { MangaFormat } from 'src/app/_models/manga-format';
interface PageStyle {
@ -38,7 +39,8 @@ interface HistoryPoint {
}
const TOP_OFFSET = -50 * 1.5; // px the sticky header takes up
const SCROLL_PART_TIMEOUT = 5000;
const CHAPTER_ID_NOT_FETCHED = -2;
const CHAPTER_ID_DOESNT_EXIST = -1;
@Component({
selector: 'app-book-reader',
@ -64,12 +66,31 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
volumeId!: number;
chapterId!: number;
chapter!: Chapter;
/**
* Reading List id. Defaults to -1.
*/
readingListId: number = CHAPTER_ID_DOESNT_EXIST;
/**
* If this is true, no progress will be saved.
*/
incognitoMode: boolean = false;
/**
* If this is true, chapters will be fetched in the order of a reading list, rather than natural series order.
*/
readingListMode: boolean = false;
chapters: Array<BookChapterItem> = [];
pageNum = 0;
maxPages = 1;
adhocPageHistory: Stack<HistoryPoint> = new Stack<HistoryPoint>();
/**
* A stack of the chapter ids we come across during continuous reading mode. When we traverse a boundary, we use this to avoid extra API calls.
* @see Stack
*/
continuousChaptersStack: Stack<number> = new Stack();
user!: User;
@ -90,6 +111,38 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('readingSection', {static: false}) readingSectionElemRef!: ElementRef<HTMLDivElement>;
@ViewChild('stickyTop', {static: false}) stickyTopElemRef!: ElementRef<HTMLDivElement>;
/**
* Next Chapter Id. This is not garunteed to be a valid ChapterId. Prefetched on page load (non-blocking).
*/
nextChapterId: number = CHAPTER_ID_NOT_FETCHED;
/**
* Previous Chapter Id. This is not garunteed to be a valid ChapterId. Prefetched on page load (non-blocking).
*/
prevChapterId: number = CHAPTER_ID_NOT_FETCHED;
/**
* Is there a next chapter. If not, this will disable UI controls.
*/
nextChapterDisabled: boolean = false;
/**
* Is there a previous chapter. If not, this will disable UI controls.
*/
prevChapterDisabled: boolean = false;
/**
* Has the next chapter been prefetched. Prefetched means the backend will cache the files.
*/
nextChapterPrefetched: boolean = false;
/**
* Has the previous chapter been prefetched. Prefetched means the backend will cache the files.
*/
prevChapterPrefetched: boolean = false;
/**
* If the prev page allows a page change to occur.
*/
prevPageDisabled = false;
/**
* If the next page allows a page change to occur.
*/
nextPageDisabled = false;
/**
* Internal property used to capture all the different css properties to render on all elements
@ -118,6 +171,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* Last seen progress part path
*/
lastSeenScrollPartPath: string = '';
/**
* Hack: Override background color for reader and restore it onDestroy
*/
@ -147,6 +201,24 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
`;
get ReadingDirection(): typeof ReadingDirection {
return ReadingDirection;
}
get IsPrevDisabled() {
if (this.readingDirection === ReadingDirection.LeftToRight) {
return this.prevPageDisabled && this.pageNum === 0;
}
return this.nextPageDisabled && this.pageNum + 1 >= this.maxPages - 1;
}
get IsNextDisabled() {
if (this.readingDirection === ReadingDirection.LeftToRight) {
this.nextPageDisabled && this.pageNum + 1 >= this.maxPages - 1;
}
return this.prevPageDisabled && this.pageNum === 0;
}
constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
private seriesService: SeriesService, private readerService: ReaderService, private location: Location,
private renderer: Renderer2, private navService: NavService, private toastr: ToastrService,
@ -214,14 +286,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 */});
}
});
@ -268,6 +343,14 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.libraryId = parseInt(libraryId, 10);
this.seriesId = parseInt(seriesId, 10);
this.chapterId = parseInt(chapterId, 10);
this.incognitoMode = this.route.snapshot.queryParamMap.get('incognitoMode') === 'true';
const readingListId = this.route.snapshot.queryParamMap.get('readingListId');
if (readingListId != null) {
this.readingListMode = true;
this.readingListId = parseInt(readingListId, 10);
}
this.memberService.hasReadingProgress(this.libraryId).pipe(take(1)).subscribe(hasProgress => {
if (!hasProgress) {
@ -276,32 +359,71 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
});
forkJoin({
chapter: this.seriesService.getChapter(this.chapterId),
progress: this.readerService.getProgress(this.chapterId),
chapters: this.bookService.getBookChapters(this.chapterId),
info: this.bookService.getBookInfo(this.chapterId)
}).pipe(take(1)).subscribe(results => {
this.chapter = results.chapter;
this.volumeId = results.chapter.volumeId;
this.maxPages = results.chapter.pages;
this.chapters = results.chapters;
this.pageNum = results.progress.pageNum;
this.bookTitle = results.info;
this.init();
}
init() {
this.nextChapterId = CHAPTER_ID_NOT_FETCHED;
this.prevChapterId = CHAPTER_ID_NOT_FETCHED;
this.nextChapterDisabled = false;
this.prevChapterDisabled = false;
this.nextChapterPrefetched = false;
if (this.pageNum >= this.maxPages) {
this.pageNum = this.maxPages - 1;
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
this.bookService.getBookInfo(this.chapterId).subscribe(info => {
this.bookTitle = info.bookTitle;
if (this.readingListMode && info.seriesFormat !== MangaFormat.EPUB) {
// Redirect to the manga reader.
const params = this.readerService.getQueryParamsObject(this.incognitoMode, this.readingListMode, this.readingListId);
this.router.navigate(['library', info.libraryId, 'series', info.seriesId, 'manga', this.chapterId], {queryParams: params});
return;
}
// Check if user progress has part, if so load it so we scroll to it
this.loadPage(results.progress.bookScrollId || undefined);
}, () => {
setTimeout(() => {
this.closeReader();
}, 200);
forkJoin({
chapter: this.seriesService.getChapter(this.chapterId),
progress: this.readerService.getProgress(this.chapterId),
chapters: this.bookService.getBookChapters(this.chapterId),
}).pipe(take(1)).subscribe(results => {
this.chapter = results.chapter;
this.volumeId = results.chapter.volumeId;
this.maxPages = results.chapter.pages;
this.chapters = results.chapters;
this.pageNum = results.progress.pageNum;
this.continuousChaptersStack.push(this.chapterId);
if (this.pageNum >= this.maxPages) {
this.pageNum = this.maxPages - 1;
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
}
this.readerService.getNextChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
this.nextChapterId = chapterId;
if (chapterId === CHAPTER_ID_DOESNT_EXIST || chapterId === this.chapterId) {
this.nextChapterDisabled = true;
}
});
this.readerService.getPrevChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
this.prevChapterId = chapterId;
if (chapterId === CHAPTER_ID_DOESNT_EXIST || chapterId === this.chapterId) {
this.prevChapterDisabled = true;
}
});
// Check if user progress has part, if so load it so we scroll to it
this.loadPage(results.progress.bookScrollId || undefined);
}, () => {
setTimeout(() => {
this.closeReader();
}, 200);
});
});
}
@HostListener('window:keydown', ['$event'])
@ -322,7 +444,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;
@ -336,6 +460,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return 0;
});
if (intersectingEntries.length > 0) {
let path = this.getXPathTo(intersectingEntries[0]);
if (path === '') { return; }
@ -346,13 +471,74 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
loadChapter(pageNum: number, part: string) {
loadNextChapter() {
if (this.nextPageDisabled) { return; }
this.isLoading = true;
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');
});
} else {
this.loadChapter(this.nextChapterId, 'Next');
}
}
loadPrevChapter() {
if (this.prevPageDisabled) { return; }
this.isLoading = true;
this.continuousChaptersStack.pop();
const prevChapter = this.continuousChaptersStack.peek();
if (prevChapter != this.chapterId) {
if (prevChapter !== undefined) {
this.chapterId = prevChapter;
this.init();
return;
}
}
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');
});
} else {
this.loadChapter(this.prevChapterId, 'Prev');
}
}
loadChapter(chapterId: number, direction: 'Next' | 'Prev') {
if (chapterId >= 0) {
this.chapterId = chapterId;
this.continuousChaptersStack.push(chapterId);
// Load chapter Id onto route but don't reload
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.isLoading = false;
if (direction === 'Prev') {
this.prevPageDisabled = true;
} else {
this.nextPageDisabled = true;
}
}
}
loadChapterPage(pageNum: number, part: string) {
this.setPageNum(pageNum);
this.loadPage('id("' + part + '")');
}
closeReader() {
this.location.back();
if (this.readingListMode) {
this.router.navigateByUrl('lists/' + this.readingListId);
} else {
this.location.back();
}
}
resetSettings() {
@ -466,7 +652,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 = {};
@ -483,7 +671,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
loadPage(part?: string | undefined, scrollTop?: number | undefined) {
this.isLoading = true;
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
this.bookService.getBookPage(this.chapterId, this.pageNum).pipe(take(1)).subscribe(content => {
this.page = this.domSanitizer.bypassSecurityTrustHtml(content);
@ -563,7 +753,14 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.setPageNum(this.pageNum + 1);
}
if (oldPageNum === 0) {
// Move to next volume/chapter automatically
this.loadPrevChapter();
return;
}
if (oldPageNum === this.pageNum) { return; }
this.loadPage();
}
@ -579,7 +776,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
} else {
this.setPageNum(this.pageNum - 1);
}
if (this.pageNum >= this.maxPages - 1) {
// Move to next volume/chapter automatically
this.loadNextChapter();
}
if (oldPageNum === this.pageNum) { return; }
this.loadPage();

3
UI/Web/src/app/book-reader/book.service.ts
View file

@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { BookChapterItem } from './_models/book-chapter-item';
import { BookInfo } from './_models/book-info';
export interface BookPage {
bookTitle: string;
@ -32,7 +33,7 @@ export class BookService {
}
getBookInfo(chapterId: number) {
return this.http.get<string>(this.baseUrl + 'book/' + chapterId + '/book-info', {responseType: 'text' as 'json'});
return this.http.get<BookInfo>(this.baseUrl + 'book/' + chapterId + '/book-info');
}
getBookPageUrl(chapterId: number, page: number) {

4
UI/Web/src/app/cards/_modals/card-details-modal/card-details-modal.component.html
View file

@ -37,8 +37,8 @@
<h5 class="mt-0 mb-1">
<span *ngIf="chapter.number !== '0'; else specialHeader">
<span class="">
<app-card-actionables (actionHandler)="performAction($event, chapter)" [actions]="chapterActions" [labelBy]="'Chapter' + formatChapterNumber(chapter)"></app-card-actionables>
</span>&nbsp;Chapter {{formatChapterNumber(chapter)}}
<app-card-actionables (actionHandler)="performAction($event, chapter)" [actions]="chapterActions" [labelBy]="'Chapter' + formatChapterNumber(chapter)"></app-card-actionables>&nbsp;
</span>Chapter {{formatChapterNumber(chapter)}}
<span class="badge badge-primary badge-pill">
<span *ngIf="chapter.pagesRead > 0 && chapter.pagesRead < chapter.pages">{{chapter.pagesRead}} / {{chapter.pages}}</span>
<span *ngIf="chapter.pagesRead === 0">UNREAD</span>

2
UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html
View file

@ -11,7 +11,7 @@
Promotion means that the tag can be seen server-wide, not just for admin users. All series that have this tag will still have user-access restrictions placed on them.
</p>
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs nav-pills">
<li [ngbNavItem]="tabs[0]">
<a ngbNavLink>{{tabs[0]}}</a>
<ng-template ngbNavContent>

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

@ -6,13 +6,13 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body scrollable-modal">
<form [formGroup]="editSeriesForm">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<div class="modal-body scrollable-modal {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? '' : 'd-flex'}}">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
<li [ngbNavItem]="tabs[0]">
<a ngbNavLink>{{tabs[0]}}</a>
<ng-template ngbNavContent>
<form [formGroup]="editSeriesForm">
<div class="row no-gutters">
<div class="form-group" style="width: 100%">
<label for="name">Name</label>
@ -77,6 +77,7 @@
<textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
</div>
</div>
</form>
</ng-template>
</li>
@ -117,7 +118,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>
@ -152,9 +152,8 @@
</ng-template>
</li>
</ul>
</form>
<div [ngbNavOutlet]="nav" class="mt-3"></div>
<div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ml-4 flex-fill'}}"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">Close</button>

8
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts
View file

@ -3,7 +3,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { forkJoin, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service';
import { TypeaheadSettings } from 'src/app/typeahead/typeahead-settings';
import { Chapter } from 'src/app/_models/chapter';
import { CollectionTag } from 'src/app/_models/collection-tag';
@ -43,6 +43,10 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
*/
selectedCover: string = '';
get Breakpoint(): typeof Breakpoint {
return Breakpoint;
}
constructor(public modal: NgbActiveModal,
private seriesService: SeriesService,
public utilityService: UtilityService,
@ -83,6 +87,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
if (metadata) {
this.metadata = metadata;
this.settings.savedData = metadata.tags;
this.tags = metadata.tags;
}
});
@ -147,6 +152,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.seriesService.updateMetadata(this.metadata, this.tags)
];
if (selectedIndex > 0) {
apis.push(this.uploadService.updateSeriesCoverImage(model.id, this.selectedCover));
}

8
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html Normal file
View file

@ -0,0 +1,8 @@
<div *ngIf="bulkSelectionService.hasSelections()" class="bulk-select mb-3 fixed-top" [ngStyle]="{'margin-top': topOffset + 'px'}">
<div class="d-flex justify-content-around align-items-center">
<span class="highlight"><i class="fa fa-check" aria-hidden="true"></i>&nbsp;{{bulkSelectionService.totalSelections()}} selected</span>
<app-card-actionables [actions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
<span id="bulk-actions-header" class="sr-only">Bulk Actions</span>
<button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times" aria-hidden="true"></i>&nbsp;Deselect All</button>
</div>
</div>

16
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss Normal file
View file

@ -0,0 +1,16 @@
@import "../../../theme/colors";
@import "../../../assets/themes/dark.scss";
.bulk-select {
background-color: $dark-form-background-no-opacity;
border-bottom: 2px solid $primary-color;
color: white;
}
.btn-icon {
color: white;
}
.highlight {
color: $primary-color !important;
}

39
UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts Normal file
View file

@ -0,0 +1,39 @@
import { Component, Input, OnInit } from '@angular/core';
import { Action, ActionItem } from 'src/app/_services/action-factory.service';
import { BulkSelectionService } from '../bulk-selection.service';
@Component({
selector: 'app-bulk-operations',
templateUrl: './bulk-operations.component.html',
styleUrls: ['./bulk-operations.component.scss']
})
export class BulkOperationsComponent implements OnInit {
@Input() actionCallback!: (action: Action, data: any) => void;
topOffset: number = 0;
get actions() {
return this.bulkSelectionService.getActions(this.actionCallback.bind(this));
}
constructor(public bulkSelectionService: BulkSelectionService) { }
ngOnInit(): void {
const navBar = document.querySelector('.navbar');
if (navBar) {
this.topOffset = Math.ceil(navBar.getBoundingClientRect().height);
}
}
handleActionCallback(action: Action, data: any) {
this.actionCallback(action, data);
}
performAction(action: ActionItem<any>) {
if (typeof action.callback === 'function') {
action.callback(action.action, null);
}
}
}

147
UI/Web/src/app/cards/bulk-selection.service.ts Normal file
View file

@ -0,0 +1,147 @@
import { Injectable } from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Action, ActionFactoryService } from '../_services/action-factory.service';
type DataSource = 'volume' | 'chapter' | 'special' | 'series';
/**
* Responsible for handling selections on cards. Can handle multiple card sources next to each other in different loops.
* This will clear selections between pages.
*
* Remakrs: Page which renders cards is responsible for listening for shift keydown/keyup and updating our state variable.
*/
@Injectable({
providedIn: 'root'
})
export class BulkSelectionService {
private debug: boolean = false;
private prevIndex: number = 0;
private prevDataSource!: DataSource;
private selectedCards: { [key: string]: {[key: number]: boolean} } = {};
private dataSourceMax: { [key: string]: number} = {};
public isShiftDown: boolean = false;
constructor(private router: Router, private actionFactory: ActionFactoryService) {
router.events
.pipe(filter(event => event instanceof NavigationStart))
.subscribe((event) => {
this.deselectAll();
this.dataSourceMax = {};
this.prevIndex = 0;
});
}
handleCardSelection(dataSource: DataSource, index: number, maxIndex: number, wasSelected: boolean) {
if (this.isShiftDown) {
if (dataSource === this.prevDataSource) {
this.debugLog('Selecting ' + dataSource + ' cards from ' + this.prevIndex + ' to ' + index);
this.selectCards(dataSource, this.prevIndex, index, !wasSelected);
} else {
const isForwardSelection = index < this.prevIndex;
if (isForwardSelection) {
this.debugLog('Selecting ' + this.prevDataSource + ' cards from ' + this.prevIndex + ' to ' + this.dataSourceMax[this.prevDataSource]);
this.selectCards(this.prevDataSource, this.prevIndex, this.dataSourceMax[this.prevDataSource], !wasSelected);
this.debugLog('Selecting ' + dataSource + ' cards from ' + 0 + ' to ' + index);
this.selectCards(dataSource, 0, index, !wasSelected);
} else {
this.debugLog('Selecting ' + this.prevDataSource + ' cards from ' + 0 + ' to ' + this.prevIndex);
this.selectCards(this.prevDataSource, this.prevIndex, 0, !wasSelected);
this.debugLog('Selecting ' + dataSource + ' cards from ' + index + ' to ' + maxIndex);
this.selectCards(dataSource, index, maxIndex, !wasSelected);
}
}
} else {
this.debugLog('Selecting ' + dataSource + ' cards at ' + index);
this.selectCards(dataSource, index, index, !wasSelected);
}
this.prevIndex = index;
this.prevDataSource = dataSource;
this.dataSourceMax[dataSource] = maxIndex;
}
isCardSelected(dataSource: DataSource, index: number) {
if (this.selectedCards.hasOwnProperty(dataSource) && this.selectedCards[dataSource].hasOwnProperty(index)) {
return this.selectedCards[dataSource][index];
}
return false;
}
selectCards(dataSource: DataSource, from: number, to: number, value: boolean) {
if (!this.selectedCards.hasOwnProperty(dataSource)) {
this.selectedCards[dataSource] = {};
}
if (from === to) {
this.selectedCards[dataSource][to] = value;
return;
}
if (from > to) {
for (let i = to; i <= from; i++) {
this.selectedCards[dataSource][i] = value;
}
}
for (let i = from; i <= to; i++) {
this.selectedCards[dataSource][i] = value;
}
}
deselectAll() {
this.selectedCards = {};
}
hasSelections() {
const keys = Object.keys(this.selectedCards);
return keys.filter(key => {
return Object.values(this.selectedCards[key]).filter(item => item).length > 0;
}).length > 0;
}
totalSelections() {
let sum = 0;
const keys = Object.keys(this.selectedCards);
keys.forEach(key => {
sum += Object.values(this.selectedCards[key]).filter(item => item).length;
});
return sum;
}
getSelectedCardsForSource(dataSource: DataSource) {
if (!this.selectedCards.hasOwnProperty(dataSource)) return [];
let ret = [];
for(let k in this.selectedCards[dataSource]) {
if (this.selectedCards[dataSource][k]) {
ret.push(k);
}
}
return ret;
}
getActions(callback: (action: Action, data: any) => void) {
// checks if series is present. If so, returns only series actions
// else returns volume/chapter items
const allowedActions = [Action.AddToReadingList, Action.MarkAsRead, Action.MarkAsUnread];
if (Object.keys(this.selectedCards).filter(item => item === 'series').length > 0) {
return this.actionFactory.getSeriesActions(callback).filter(item => allowedActions.includes(item.action));
}
return this.actionFactory.getVolumeActions(callback).filter(item => allowedActions.includes(item.action));
}
private debugLog(message: string, extraData?: any) {
if (!this.debug) return;
if (extraData !== undefined) {
console.log(message, extraData);
} else {
console.log(message);
}
}
}

4
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -3,8 +3,8 @@
<div class="col mr-auto">
<h2 style="display: inline-block">
<span *ngIf="actions.length > 0" class="">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
</span>&nbsp;{{header}}&nbsp;
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>&nbsp;
</span>{{header}}&nbsp;
<!-- NOTE: On mobile the pill can eat up a lot of space, we can hide it and move to the filter section if user is interested -->
<span class="badge badge-primary badge-pill" attr.aria-label="{{pagination.totalItems}} total items" *ngIf="pagination != undefined">{{pagination.totalItems}}</span>
</h2>

3
UI/Web/src/app/cards/card-item/card-actionables/card-actionables.component.ts
View file

@ -39,7 +39,4 @@ export class CardActionablesComponent implements OnInit {
}
}
// TODO: Insert hr to separate admin actions
}

14
UI/Web/src/app/cards/card-item/card-item.component.html
View file

@ -1,5 +1,5 @@
<div class="card">
<div class="overlay" (click)="handleClick()">
<div class="overlay" (click)="handleClick($event)">
<img *ngIf="total > 0 || supressArchiveWarning" class="img-top lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl"
(error)="imageService.updateErroredImage($event)" aria-hidden="true" height="230px" width="158px">
<img *ngIf="total === 0 && !supressArchiveWarning" class="img-top lazyload" [src]="imageService.errorImage" [attr.data-src]="imageUrl"
@ -15,22 +15,24 @@
</span>
</div>
<div class="error-banner" *ngIf="total === 0 && !supressArchiveWarning">
Cannot Read Archive
Cannot Read
</div>
<div class="not-read-badge" *ngIf="read === 0 && total > 0"></div>
<div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
<input type="checkbox" attr.aria-labelledby="{{title}}_{{entity.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
</div>
</div>
<div class="card-body" *ngIf="title.length > 0 || actions.length > 0">
<div>
<span class="card-title" placement="top" ngbTooltip="{{title}}" (click)="handleClick()" tabindex="0">
<span class="card-title" placement="top" id="{{title}}_{{entity.id}}" ngbTooltip="{{title}}" (click)="handleClick()" tabindex="0">
<span *ngIf="isPromoted()">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
<span class="sr-only">(promoted)</span>
</span>
<i class="fa {{utilityService.mangaFormatIcon(format)}}" aria-hidden="true" *ngIf="format != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(format)}}"></i><span class="sr-only">{{utilityService.mangaFormat(format)}}</span>
&nbsp;{{title}}
<span class="sr-only">(promoted)</span>
</span>
<span class="card-actions float-right">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>

28
UI/Web/src/app/cards/card-item/card-item.component.scss
View file

@ -38,6 +38,8 @@ $image-width: 160px;
margin-bottom: 0px;
}
.img-top {
height: $image-height;
}
@ -71,12 +73,38 @@ $image-width: 160px;
border-color: transparent $primary-color transparent transparent;
}
.bulk-mode {
position: absolute;
top: 5px;
left: 5px;
visibility: hidden;
&.always-show {
visibility: visible !important;
width: $image-width;
height: $image-height;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
}
}
.overlay {
height: $image-height;
&:hover {
visibility: visible;
.bulk-mode {
visibility: visible;
}
.overlay-item {
visibility: visible;
}

93
UI/Web/src/app/cards/card-item/card-item.component.ts
View file

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { Observable, Subject } from 'rxjs';
import { finalize, take, takeUntil, takeWhile } from 'rxjs/operators';
@ -13,6 +13,7 @@ import { Volume } from 'src/app/_models/volume';
import { Action, ActionItem } from 'src/app/_services/action-factory.service';
import { ImageService } from 'src/app/_services/image.service';
import { LibraryService } from 'src/app/_services/library.service';
import { BulkSelectionService } from '../bulk-selection.service';
@Component({
selector: 'app-card-item',
@ -21,23 +22,71 @@ import { LibraryService } from 'src/app/_services/library.service';
})
export class CardItemComponent implements OnInit, OnDestroy {
/**
* Card item url. Will internally handle error and missing covers
*/
@Input() imageUrl = '';
/**
* Name of the card
*/
@Input() title = '';
/**
* Any actions to perform on the card
*/
@Input() actions: ActionItem<any>[] = [];
@Input() read = 0; // Pages read
@Input() total = 0; // Total Pages
/**
* Pages Read
*/
@Input() read = 0;
/**
* Total Pages
*/
@Input() total = 0;
/**
* Supress library link
*/
@Input() supressLibraryLink = false;
@Input() entity!: Series | Volume | Chapter | CollectionTag; // This is the entity we are representing. It will be returned if an action is executed.
/**
* This is the entity we are representing. It will be returned if an action is executed.
*/
@Input() entity!: Series | Volume | Chapter | CollectionTag;
/**
* If the entity is selected or not.
*/
@Input() selected: boolean = false;
/**
* If the entity should show selection code
*/
@Input() allowSelection: boolean = false;
/**
* Event emitted when item is clicked
*/
@Output() clicked = new EventEmitter<string>();
libraryName: string | undefined = undefined; // Library name item belongs to
/**
* When the card is selected.
*/
@Output() selection = new EventEmitter<boolean>();
/**
* Library name item belongs to
*/
libraryName: string | undefined = undefined;
libraryId: number | undefined = undefined;
supressArchiveWarning: boolean = false; // This will supress the cannot read archive warning when total pages is 0
/**
* This will supress the cannot read archive warning when total pages is 0
*/
supressArchiveWarning: boolean = false;
/**
* Format of the entity (only applies to Series)
*/
format: MangaFormat = MangaFormat.UNKNOWN;
download$: Observable<Download> | null = null;
downloadInProgress: boolean = false;
isShiftDown: boolean = false;
get MangaFormat(): typeof MangaFormat {
return MangaFormat;
}
@ -46,7 +95,7 @@ export class CardItemComponent implements OnInit, OnDestroy {
constructor(public imageService: ImageService, private libraryService: LibraryService,
public utilityService: UtilityService, private downloadService: DownloadService,
private toastr: ToastrService) {}
private toastr: ToastrService, public bulkSelectionService: BulkSelectionService) {}
ngOnInit(): void {
if (this.entity.hasOwnProperty('promoted') && this.entity.hasOwnProperty('title')) {
@ -69,7 +118,25 @@ export class CardItemComponent implements OnInit, OnDestroy {
this.onDestroy.complete();
}
handleClick() {
prevTouchTime: number = 0;
@HostListener('touchstart', ['$event'])
onTouchStart(event: TouchEvent) {
this.prevTouchTime = event.timeStamp;
}
@HostListener('touchend', ['$event'])
onTouchEnd(event: TouchEvent) {
if (event.timeStamp - this.prevTouchTime >= 200) {
this.handleSelection();
event.stopPropagation();
event.preventDefault();
}
this.prevTouchTime = 0;
}
handleClick(event?: any) {
this.clicked.emit(this.title);
}
@ -148,4 +215,12 @@ export class CardItemComponent implements OnInit, OnDestroy {
const tag = this.entity as CollectionTag;
return tag.hasOwnProperty('promoted') && tag.promoted;
}
handleSelection(event?: any) {
if (event) {
event.stopPropagation();
}
this.selection.emit(this.selected);
}
}

7
UI/Web/src/app/cards/cards.module.ts
View file

@ -19,6 +19,7 @@ import { TypeaheadModule } from '../typeahead/typeahead.module';
import { BrowserModule } from '@angular/platform-browser';
import { CardDetailLayoutComponent } from './card-detail-layout/card-detail-layout.component';
import { CardDetailsModalComponent } from './_modals/card-details-modal/card-details-modal.component';
import { BulkOperationsComponent } from './bulk-operations/bulk-operations.component';
@ -34,7 +35,8 @@ import { CardDetailsModalComponent } from './_modals/card-details-modal/card-det
BookmarksModalComponent,
CardActionablesComponent,
CardDetailLayoutComponent,
CardDetailsModalComponent
CardDetailsModalComponent,
BulkOperationsComponent
],
imports: [
CommonModule,
@ -70,7 +72,8 @@ import { CardDetailsModalComponent } from './_modals/card-details-modal/card-det
BookmarksModalComponent,
CardActionablesComponent,
CardDetailLayoutComponent,
CardDetailsModalComponent
CardDetailsModalComponent,
BulkOperationsComponent
]
})
export class CardsModule { }

5
UI/Web/src/app/cards/series-card/series-card.component.html
View file

@ -1,3 +1,6 @@
<ng-container *ngIf="data !== undefined">
<app-card-item [title]="data.name" [actions]="actions" [supressLibraryLink]="suppressLibraryLink" [imageUrl]="imageUrl" [entity]="data" [total]="data.pages" [read]="data.pagesRead" (clicked)="handleClick()"></app-card-item>
<app-card-item [title]="data.name" [actions]="actions" [supressLibraryLink]="suppressLibraryLink" [imageUrl]="imageUrl"
[entity]="data" [total]="data.pages" [read]="data.pagesRead" (clicked)="handleClick()"
[allowSelection]="allowSelection" (selection)="selection.emit(selected)" [selected]="selected"
></app-card-item>
</ng-container>

17
UI/Web/src/app/cards/series-card/series-card.component.ts
View file

@ -21,9 +21,22 @@ export class SeriesCardComponent implements OnInit, OnChanges {
@Input() data!: Series;
@Input() libraryId = 0;
@Input() suppressLibraryLink = false;
/**
* If the entity is selected or not.
*/
@Input() selected: boolean = false;
/**
* If the entity should show selection code
*/
@Input() allowSelection: boolean = false;
@Output() clicked = new EventEmitter<Series>();
@Output() reload = new EventEmitter<boolean>();
@Output() dataChanged = new EventEmitter<Series>();
/**
* When the card is selected.
*/
@Output() selection = new EventEmitter<boolean>();
isAdmin = false;
actions: ActionItem<Series>[] = [];
@ -78,6 +91,9 @@ export class SeriesCardComponent implements OnInit, OnChanges {
case(Action.Bookmarks):
this.actionService.openBookmarkModal(series, (series) => {/* No Operation */ });
break;
case(Action.AddToReadingList):
this.actionService.addSeriesToReadingList(series, (series) => {/* No Operation */ });
break;
default:
break;
}
@ -91,7 +107,6 @@ export class SeriesCardComponent implements OnInit, OnChanges {
if (closeResult.success) {
if (closeResult.coverImageUpdate) {
this.imageUrl = this.imageService.randomize(this.imageService.getSeriesCoverImage(closeResult.series.id));
console.log('image url: ', this.imageUrl);
}
this.seriesService.getSeries(data.id).subscribe(series => {
this.data = series;

19
UI/Web/src/app/collections/all-collections/all-collections.component.html
View file

@ -1,23 +1,8 @@
<ng-container *ngIf="collectionTagId === 0; else collectionTagDetail;">
<app-card-detail-layout header="Collections"
<app-card-detail-layout header="Collections"
[isLoading]="isLoading"
[items]="collections"
(pageChange)="onPageChange($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="item.coverImage" (clicked)="loadCollection(item)"></app-card-item>
</ng-template>
</app-card-detail-layout>
</ng-container>
<ng-template #collectionTagDetail>
<app-card-detail-layout header="{{collectionTagName}} Collection"
[isLoading]="isLoading"
[items]="series"
[pagination]="seriesPagination"
(pageChange)="onPageChange($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"></app-series-card>
</ng-template>
</app-card-detail-layout>
</ng-template>
</app-card-detail-layout>

69
UI/Web/src/app/collections/all-collections/all-collections.component.ts
View file

@ -1,21 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
import { CollectionTag } from 'src/app/_models/collection-tag';
import { Pagination } from 'src/app/_models/pagination';
import { Series } from 'src/app/_models/series';
import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
import { CollectionTagService } from 'src/app/_services/collection-tag.service';
import { ImageService } from 'src/app/_services/image.service';
import { SeriesService } from 'src/app/_services/series.service';
/**
* This component is used as a standard layout for any card detail. ie) series, in-progress, collections, etc.
*/
@Component({
selector: 'app-all-collections',
templateUrl: './all-collections.component.html',
@ -25,32 +18,13 @@ export class AllCollectionsComponent implements OnInit {
isLoading: boolean = true;
collections: CollectionTag[] = [];
collectionTagId: number = 0; // 0 is not a valid id, if 0, we will load all tags
collectionTagName: string = '';
series: Array<Series> = [];
seriesPagination!: Pagination;
collectionTagActions: ActionItem<CollectionTag>[] = [];
constructor(private collectionService: CollectionTagService, private router: Router, private route: ActivatedRoute,
private seriesService: SeriesService, private toastr: ToastrService, private actionFactoryService: ActionFactoryService,
private modalService: NgbModal, private titleService: Title, private imageService: ImageService) {
constructor(private collectionService: CollectionTagService, private router: Router,
private actionFactoryService: ActionFactoryService, private modalService: NgbModal,
private titleService: Title, private imageService: ImageService) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
const routeId = this.route.snapshot.paramMap.get('id');
if (routeId != null) {
this.collectionTagId = parseInt(routeId, 10);
this.collectionService.allTags().subscribe(tags => {
this.collections = tags;
const matchingTags = this.collections.filter(t => t.id === this.collectionTagId);
if (matchingTags.length === 0) {
this.toastr.error('You don\'t have access to any libraries this tag belongs to or this tag is invalid');
this.router.navigate(['collections']);
return;
}
this.collectionTagName = tags.filter(item => item.id === this.collectionTagId)[0].title;
this.titleService.setTitle('Kavita - ' + this.collectionTagName + ' Collection');
});
}
this.titleService.setTitle('Kavita - Collections');
}
ngOnInit() {
@ -60,38 +34,15 @@ export class AllCollectionsComponent implements OnInit {
loadCollection(item: CollectionTag) {
this.collectionTagId = item.id;
this.collectionTagName = item.title;
this.router.navigate(['collections', this.collectionTagId]);
this.router.navigate(['collections', item.id]);
this.loadPage();
}
onPageChange(pagination: Pagination) {
this.router.navigate(['collections', this.collectionTagId], {replaceUrl: true, queryParamsHandling: 'merge', queryParams: {page: this.seriesPagination.currentPage} });
}
loadPage() {
const page = this.route.snapshot.queryParamMap.get('page');
if (page != null) {
if (this.seriesPagination === undefined || this.seriesPagination === null) {
this.seriesPagination = {currentPage: 0, itemsPerPage: 30, totalItems: 0, totalPages: 1};
}
this.seriesPagination.currentPage = parseInt(page, 10);
}
// Reload page after a series is updated or first load
if (this.collectionTagId === 0) {
this.collectionService.allTags().subscribe(tags => {
this.collections = tags;
this.isLoading = false;
});
} else {
this.seriesService.getSeriesForTag(this.collectionTagId, this.seriesPagination?.currentPage, this.seriesPagination?.itemsPerPage).subscribe(tags => {
this.series = tags.result;
this.seriesPagination = tags.pagination;
this.isLoading = false;
window.scrollTo(0, 0);
});
}
this.collectionService.allTags().subscribe(tags => {
this.collections = tags;
this.isLoading = false;
});
}
handleCollectionActionCallback(action: Action, collectionTag: CollectionTag) {

13
UI/Web/src/app/collections/collection-detail/collection-detail.component.html
View file

@ -11,14 +11,6 @@
</h2>
</div>
<div class="row no-gutters mt-2 mb-2">
<!-- <div>
<button class="btn btn-primary" (click)="read()" [disabled]="isLoading">
<span>
<i class="fa fa-book-open"></i>
</span>
<span class="read-btn--text">&nbsp;Read</span>
</button>
</div> -->
<div class="ml-2" *ngIf="isAdmin">
<button class="btn btn-secondary" (click)="openEditCollectionTagModal(collectionTag)" title="Edit Series information">
<span>
@ -33,6 +25,7 @@
</div>
</div>
<hr>
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-card-detail-layout
header="Series"
@ -44,7 +37,9 @@
(applyFilter)="updateFilter($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"></app-series-card>
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="loadPage()"
(selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
></app-series-card>
</ng-template>
</app-card-detail-layout>

49
UI/Web/src/app/collections/collection-detail/collection-detail.component.ts
View file

@ -1,19 +1,20 @@
import { Component, OnInit } from '@angular/core';
import { Component, HostListener, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, ActivatedRoute } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
import { BulkSelectionService } from 'src/app/cards/bulk-selection.service';
import { UpdateFilterEvent } from 'src/app/cards/card-detail-layout/card-detail-layout.component';
import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { KEY_CODES } from 'src/app/shared/_services/utility.service';
import { CollectionTag } from 'src/app/_models/collection-tag';
import { MangaFormat } from 'src/app/_models/manga-format';
import { Pagination } from 'src/app/_models/pagination';
import { Series } from 'src/app/_models/series';
import { FilterItem, mangaFormatFilters, SeriesFilter } from 'src/app/_models/series-filter';
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 { CollectionTagService } from 'src/app/_services/collection-tag.service';
import { ImageService } from 'src/app/_services/image.service';
import { SeriesService } from 'src/app/_services/series.service';
@ -39,9 +40,35 @@ export class CollectionDetailComponent implements OnInit {
mangaFormat: null
};
bulkActionCallback = (action: Action, data: any) => {
const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series');
const selectedSeries = this.series.filter((series, index: number) => selectedSeriesIndexies.includes(index + ''));
switch (action) {
case Action.AddToReadingList:
this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsRead:
this.actionService.markMultipleSeriesAsRead(selectedSeries, () => {
this.loadPage();
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsUnread:
this.actionService.markMultipleSeriesAsUnread(selectedSeries, () => {
this.loadPage();
this.bulkSelectionService.deselectAll();
});
break;
}
}
constructor(public imageService: ImageService, private collectionService: CollectionTagService, private router: Router, private route: ActivatedRoute,
private seriesService: SeriesService, private toastr: ToastrService, private actionFactoryService: ActionFactoryService,
private modalService: NgbModal, private titleService: Title, private accountService: AccountService, private utilityService: UtilityService) {
private modalService: NgbModal, private titleService: Title, private accountService: AccountService,
public bulkSelectionService: BulkSelectionService, private actionService: ActionService) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
@ -63,6 +90,20 @@ export class CollectionDetailComponent implements OnInit {
this.collectionTagActions = this.actionFactoryService.getCollectionTagActions(this.handleCollectionActionCallback.bind(this));
}
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = true;
}
}
@HostListener('document:keyup.shift', ['$event'])
handleKeyUp(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = false;
}
}
updateTag(tagId: number) {
this.collectionService.allTags().subscribe(tags => {
this.collections = tags;

3
UI/Web/src/app/collections/collections.module.ts
View file

@ -18,6 +18,9 @@ import { AllCollectionsComponent } from './all-collections/all-collections.compo
SharedModule,
CardsModule,
CollectionsRoutingModule,
],
exports: [
AllCollectionsComponent
]
})
export class CollectionsModule { }

21
UI/Web/src/app/dashboard/dashboard.component.html Normal file
View file

@ -0,0 +1,21 @@
<div class="container-fluid">
<nav role="navigation">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-pills justify-content-center mt-3" role="tab">
<li *ngFor="let tab of tabs" [ngbNavItem]="tab" class="nav-item">
<a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | titlecase }}</a>
<ng-template ngbNavContent>
<ng-container *ngIf="tab.fragment === ''">
<app-library></app-library>
</ng-container>
<ng-container *ngIf="tab.fragment === 'lists'">
<app-reading-lists></app-reading-lists>
</ng-container>
<ng-container *ngIf="tab.fragment === 'collections'">
<app-all-collections></app-all-collections>
</ng-container>
</ng-template>
</li>
</ul>
</nav>
<div [ngbNavOutlet]="nav" class="mt-3"></div>
</div>

0
UI/Web/src/app/dashboard/dashboard.component.scss Normal file
View file

37
UI/Web/src/app/dashboard/dashboard.component.ts Normal file
View file

@ -0,0 +1,37 @@
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { ServerService } from '../_services/server.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
tabs: Array<{title: string, fragment: string}> = [
{title: 'Libraries', fragment: ''},
{title: 'Lists', fragment: 'lists'},
{title: 'Collections', fragment: 'collections'},
];
active = this.tabs[0];
constructor(public route: ActivatedRoute, private serverService: ServerService,
private toastr: ToastrService, private titleService: Title) {
this.route.fragment.subscribe(frag => {
const tab = this.tabs.filter(item => item.fragment === frag);
if (tab.length > 0) {
this.active = tab[0];
} else {
this.active = this.tabs[0]; // Default to first tab
}
});
this.titleService.setTitle('Kavita - Dashboard');
}
ngOnInit(): void {
}
}

3
UI/Web/src/app/library-detail/library-detail.component.html
View file

@ -1,3 +1,4 @@
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-card-detail-layout header="{{libraryName}}"
[isLoading]="loadingSeries"
[items]="series"
@ -8,6 +9,6 @@
(pageChange)="onPageChange($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="libraryId" [suppressLibraryLink]="true" (reload)="loadPage()"></app-series-card>
<app-series-card [data]="item" [libraryId]="libraryId" [suppressLibraryLink]="true" (reload)="loadPage()" (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"></app-series-card>
</ng-template>
</app-card-detail-layout>

46
UI/Web/src/app/library-detail/library-detail.component.ts
View file

@ -1,8 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { Component, HostListener, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs/operators';
import { BulkSelectionService } from '../cards/bulk-selection.service';
import { UpdateFilterEvent } from '../cards/card-detail-layout/card-detail-layout.component';
import { KEY_CODES } from '../shared/_services/utility.service';
import { Library } from '../_models/library';
import { Pagination } from '../_models/pagination';
import { Series } from '../_models/series';
@ -30,9 +32,35 @@ export class LibraryDetailComponent implements OnInit {
mangaFormat: null
};
bulkActionCallback = (action: Action, data: any) => {
const selectedSeriesIndexies = this.bulkSelectionService.getSelectedCardsForSource('series');
const selectedSeries = this.series.filter((series, index: number) => selectedSeriesIndexies.includes(index + ''));
switch (action) {
case Action.AddToReadingList:
this.actionService.addMultipleSeriesToReadingList(selectedSeries, () => {
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsRead:
this.actionService.markMultipleSeriesAsRead(selectedSeries, () => {
this.loadPage();
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsUnread:
this.actionService.markMultipleSeriesAsUnread(selectedSeries, () => {
this.loadPage();
this.bulkSelectionService.deselectAll();
});
break;
}
}
constructor(private route: ActivatedRoute, private router: Router, private seriesService: SeriesService,
private libraryService: LibraryService, private titleService: Title, private actionFactoryService: ActionFactoryService,
private actionService: ActionService) {
private actionService: ActionService, public bulkSelectionService: BulkSelectionService) {
const routeId = this.route.snapshot.paramMap.get('id');
if (routeId === null) {
this.router.navigateByUrl('/libraries');
@ -53,6 +81,20 @@ export class LibraryDetailComponent implements OnInit {
}
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = true;
}
}
@HostListener('document:keyup.shift', ['$event'])
handleKeyUp(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = false;
}
}
handleAction(action: Action, library: Library) {
let lib: Partial<Library> = library;
if (library === undefined) {

51
UI/Web/src/app/library/library.component.html
View file

@ -1,33 +1,24 @@
<div *ngIf="libraries.length === 0 && !isLoading && isAdmin" class="d-flex justify-content-center">
<p>There are no libraries setup yet. Configure some in <a href="/admin/dashboard#libraries">Server settings</a>.</p>
</div>
<div *ngIf="libraries.length === 0 && !isLoading && !isAdmin" class="d-flex justify-content-center">
<p>You haven't been granted access to any libraries.</p>
</div>
<div class="container-fluid">
<div *ngIf="libraries.length === 0 && !isLoading && isAdmin" class="d-flex justify-content-center">
<p>There are no libraries setup yet. Configure some in <a href="/admin/dashboard#libraries">Server settings</a>.</p>
</div>
<div *ngIf="libraries.length === 0 && !isLoading && !isAdmin" class="d-flex justify-content-center">
<p>You haven't been granted access to any libraries.</p>
</div>
<app-carousel-reel [items]="libraries" title="Libraries">
<ng-template #carouselItem let-item let-position="idx">
<app-library-card [data]="item"></app-library-card>
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="inProgress" title="In Progress" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="reloadInProgress($event)" (dataChanged)="reloadInProgress($event)"></app-series-card>
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="inProgress" title="In Progress" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="reloadInProgress($event)" (dataChanged)="reloadInProgress($event)"></app-series-card>
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="recentlyAdded" title="Recently Added" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="reloadTags()" (dataChanged)="loadRecentlyAdded()"></app-series-card>
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="recentlyAdded" title="Recently Added" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-series-card [data]="item" [libraryId]="item.libraryId" (reload)="reloadTags()" (dataChanged)="loadRecentlyAdded()"></app-series-card>
</ng-template>
</app-carousel-reel>
<app-carousel-reel [items]="collectionTags" title="Collections" (sectionClick)="handleSectionClick($event)">
<ng-template #carouselItem let-item let-position="idx">
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="item.coverImage" (clicked)="loadCollection(item)"></app-card-item>
</ng-template>
</app-carousel-reel>
</div>
<app-carousel-reel [items]="libraries" title="Libraries">
<ng-template #carouselItem let-item let-position="idx">
<app-library-card [data]="item"></app-library-card>
</ng-template>
</app-carousel-reel>

50
UI/Web/src/app/library/library.component.ts
View file

@ -5,7 +5,6 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject } from 'rxjs';
import { take, takeUntil } from 'rxjs/operators';
import { EditCollectionTagsComponent } from '../cards/_modals/edit-collection-tags/edit-collection-tags.component';
import { ScrollService } from '../scroll.service';
import { CollectionTag } from '../_models/collection-tag';
import { InProgressChapter } from '../_models/in-progress-chapter';
import { Library } from '../_models/library';
@ -33,8 +32,8 @@ export class LibraryComponent implements OnInit, OnDestroy {
recentlyAdded: Series[] = [];
inProgress: Series[] = [];
continueReading: InProgressChapter[] = [];
collectionTags: CollectionTag[] = [];
collectionTagActions: ActionItem<CollectionTag>[] = [];
// collectionTags: CollectionTag[] = [];
// collectionTagActions: ActionItem<CollectionTag>[] = [];
private readonly onDestroy = new Subject<void>();
@ -43,8 +42,7 @@ export class LibraryComponent implements OnInit, OnDestroy {
constructor(public accountService: AccountService, private libraryService: LibraryService,
private seriesService: SeriesService, private actionFactoryService: ActionFactoryService,
private collectionService: CollectionTagService, private router: Router,
private modalService: NgbModal, private titleService: Title, public imageService: ImageService,
private scrollService: ScrollService) { }
private modalService: NgbModal, private titleService: Title, public imageService: ImageService) { }
ngOnInit(): void {
this.titleService.setTitle('Kavita - Dashboard');
@ -58,7 +56,7 @@ export class LibraryComponent implements OnInit, OnDestroy {
});
});
this.collectionTagActions = this.actionFactoryService.getCollectionTagActions(this.handleCollectionActionCallback.bind(this));
//this.collectionTagActions = this.actionFactoryService.getCollectionTagActions(this.handleCollectionActionCallback.bind(this));
this.reloadSeries();
}
@ -103,9 +101,9 @@ export class LibraryComponent implements OnInit, OnDestroy {
}
reloadTags() {
this.collectionService.allTags().pipe(takeUntil(this.onDestroy)).subscribe(tags => {
this.collectionTags = tags;
});
// this.collectionService.allTags().pipe(takeUntil(this.onDestroy)).subscribe(tags => {
// this.collectionTags = tags;
// });
}
handleSectionClick(sectionTitle: string) {
@ -119,24 +117,24 @@ export class LibraryComponent implements OnInit, OnDestroy {
}
loadCollection(item: CollectionTag) {
this.router.navigate(['collections', item.id]);
//this.router.navigate(['collections', item.id]);
}
handleCollectionActionCallback(action: Action, collectionTag: CollectionTag) {
switch (action) {
case(Action.Edit):
const modalRef = this.modalService.open(EditCollectionTagsComponent, { size: 'lg', scrollable: true });
modalRef.componentInstance.tag = collectionTag;
modalRef.closed.subscribe((results: {success: boolean, coverImageUpdated: boolean}) => {
this.reloadTags();
if (results.coverImageUpdated) {
collectionTag.coverImage = this.imageService.randomize(collectionTag.coverImage);
}
});
break;
default:
break;
}
}
// handleCollectionActionCallback(action: Action, collectionTag: CollectionTag) {
// switch (action) {
// case(Action.Edit):
// const modalRef = this.modalService.open(EditCollectionTagsComponent, { size: 'lg', scrollable: true });
// modalRef.componentInstance.tag = collectionTag;
// modalRef.closed.subscribe((results: {success: boolean, coverImageUpdated: boolean}) => {
// this.reloadTags();
// if (results.coverImageUpdated) {
// collectionTag.coverImage = this.imageService.randomize(collectionTag.coverImage);
// }
// });
// break;
// default:
// break;
// }
// }
}

5
UI/Web/src/app/manga-reader/_models/chapter-info.ts
View file

@ -1,8 +1,13 @@
import { MangaFormat } from "src/app/_models/manga-format";
export interface ChapterInfo {
chapterNumber: string;
volumeNumber: string;
chapterTitle: string;
seriesName: string;
seriesFormat: MangaFormat;
seriesId: number;
libraryId: number;
fileName: string;
isSpecial: boolean;
volumeId: number;

8
UI/Web/src/app/manga-reader/_models/reader-enums.ts
View file

@ -2,21 +2,21 @@ export enum FITTING_OPTION {
HEIGHT = 'full-height',
WIDTH = 'full-width',
ORIGINAL = 'original'
}
}
export enum SPLIT_PAGE_PART {
NO_SPLIT = 'none',
LEFT_PART = 'left',
RIGHT_PART = 'right'
}
}
export enum PAGING_DIRECTION {
FORWARD = 1,
BACKWARDS = -1,
}
}
export enum COLOR_FILTER {
NONE = '',
SEPIA = 'filter-sepia',
DARK = 'filter-dark'
}
}

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

@ -1,15 +1,43 @@
<div class="fixed-top overlay" *ngIf="debug">
<div class="fixed-top overlay" *ngIf="showDebugBar()">
<strong>Captures Scroll Events:</strong> {{!this.isScrolling && this.allImagesLoaded}}
<strong>Is Scrolling:</strong> {{isScrollingForwards() ? 'Forwards' : 'Backwards'}} {{this.isScrolling}}
<strong>All Images Loaded:</strong> {{this.allImagesLoaded}}
<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}}
<strong>Total Height:</strong> {{getTotalHeight()}}
<strong>Total Scroll:</strong> {{getTotalScroll()}}
<strong>Scroll Top:</strong> {{getScrollTop()}}
</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;">
<img src="{{item.src}}" style="display: block" class="mx-auto {{pageNum === item.page && showDebugOutline() ? '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);
}
}

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

@ -1,10 +1,40 @@
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 { 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;
/**
* Bitwise enums for configuring how much debug information we want
*/
const enum DEBUG_MODES {
/**
* No Debug information
*/
None = 0,
/**
* Turn on debug logging
*/
Logs = 2,
/**
* Turn on the action bar in UI
*/
ActionBar = 4,
/**
* Turn on Page outline
*/
Outline = 8
}
@Component({
selector: 'app-infinite-scroller',
templateUrl: './infinite-scroller.component.html',
@ -29,6 +59,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>();
@ -71,9 +103,21 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
*/
imagesLoaded: {[key: number]: number} = {};
/**
* Debug mode. Will show extra information
* If the user has scrolled all the way to the bottom. This is used solely for continuous reading
*/
debug: boolean = false;
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. Use bitwise (|) operators between different modes to enable different output
*/
debugMode: DEBUG_MODES = DEBUG_MODES.None;
get minPageLoaded() {
return Math.min(...Object.values(this.imagesLoaded));
@ -85,9 +129,10 @@ 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 +149,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 +190,61 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
this.scrollingDirection = PAGING_DIRECTION.BACKWARDS;
}
this.prevScrollPosition = verticalOffset;
// Check if we hit the last page
this.checkIfShouldTriggerContinuousReader();
}
getTotalHeight() {
let totalHeight = 0;
document.querySelectorAll('img[id^="page-"]').forEach(img => totalHeight += img.getBoundingClientRect().height);
return totalHeight;
}
getTotalScroll() {
return document.documentElement.offsetHeight + document.documentElement.scrollTop;
}
getScrollTop() {
return document.documentElement.scrollTop
}
checkIfShouldTriggerContinuousReader() {
if (this.isScrolling) return;
if (this.scrollingDirection === PAGING_DIRECTION.FORWARD) {
const totalHeight = this.getTotalHeight();
const totalScroll = this.getTotalScroll();
// 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;
}
// debug mode will add an extra pixel from the image border + (this.debug ? 1 : 0)
if (totalScroll === totalHeight && !this.atBottom) {
this.atBottom = true;
this.setPageNum(this.totalPages);
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollTop;
requestAnimationFrame(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
} 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 {
// < 5 because debug mode and FF (mobile) can report non 0, despite being at 0
if (this.getScrollTop() < 5 && this.pageNum === 0 && !this.atTop) {
this.atBottom = false;
this.atTop = true;
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollHeight - document.documentElement.scrollTop;
requestAnimationFrame(() => window.scrollTo(0, SPACER_SCROLL_INTO_PX));
} else if (this.getScrollTop() < 5 && this.pageNum === 0 && this.atTop) {
// If already at top, then we moving on
this.loadPrevChapter.emit();
}
}
}
/**
@ -170,6 +270,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
initWebtoonReader() {
this.imagesLoaded = {};
this.webtoonImages.next([]);
this.atBottom = false;
this.checkIfShouldTriggerContinuousReader();
const [startingIndex, endingIndex] = this.calculatePrefetchIndecies();
@ -236,6 +338,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);
@ -341,7 +448,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (startingIndex === 0 && endingIndex === 0) { return; }
this.debugLog('\t[PREFETCH] prefetching pages: ' + startingIndex + ' to ' + endingIndex);
for(let i = startingIndex; i < endingIndex; i++) {
for(let i = startingIndex; i <= endingIndex; i++) {
this.loadWebtoonImage(i);
}
@ -354,7 +461,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
debugLog(message: string, extraData?: any) {
if (!this.debug) { return; }
if (!(this.debugMode & DEBUG_MODES.Logs)) return;
if (extraData !== undefined) {
console.log(message, extraData);
@ -362,4 +469,12 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
console.log(message);
}
}
showDebugBar() {
return this.debugMode & DEBUG_MODES.ActionBar;
}
showDebugOutline() {
return this.debugMode & DEBUG_MODES.Outline;
}
}

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

@ -7,7 +7,7 @@
</button>
<div>
<div style="font-weight: bold;">{{title}}</div>
<div style="font-weight: bold;">{{title}} <span *ngIf="incognitoMode">(<i class="fa fa-glasses" aria-hidden="true"></i><span class="sr-only">Incognito Mode</span>)</span></div>
<div class="subtitle">
{{subtitle}}
</div>
@ -28,29 +28,28 @@
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-->
<ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD">
<div class="{{readerMode === READER_MODE.MANGA_LR ? 'right' : 'top'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
<div class="{{readerMode === READER_MODE.MANGA_LR ? 'left' : 'bottom'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
</ng-container>
<ng-template #webtoonClickArea>
<div class="top {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
<div class="right {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
<div class="left {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
<div class="bottom {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
</ng-template>
</div>
<div class="fixed-bottom overlay" *ngIf="menuOpen" [@slideFromBottom]="menuOpen">
<div class="form-group" *ngIf="pageOptions != undefined && pageOptions.ceil != undefined && pageOptions.ceil > 0">
<div class="form-group" *ngIf="pageOptions != undefined && pageOptions.ceil != undefined">
<span class="sr-only" id="slider-info"></span>
<div class="row no-gutters">
<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">
<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()" (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>
@ -59,7 +58,7 @@
</div>
<div class="row pt-4 ml-2 mr-2">
<div class="col">
<button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === READER_MODE.WEBTOON" aria-describedby="reading-direction" title="Reading Direction: {{readingDirection === ReadingDirection.LeftToRight ? 'Left to Right' : 'Right to Left'}}">
<button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === READER_MODE.WEBTOON || readerMode === READER_MODE.MANGA_UD" 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="sr-only">{{readingDirection === ReadingDirection.LeftToRight ? 'Left to Right' : 'Right to Left'}}</span>
</button>

14
UI/Web/src/app/manga-reader/manga-reader.component.scss
View file

@ -92,20 +92,6 @@ canvas {
}
.center-menu {
position: fixed;
top: 10px;
left: $side-width;
width: $center-width;
border-bottom: $dash-width dashed $secondary-color;
text-align: center;
z-index: 2;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.right {
position: fixed;
right: 0px;

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

@ -22,6 +22,7 @@ import { ChapterInfo } from './_models/chapter-info';
import { COLOR_FILTER, FITTING_OPTION, PAGING_DIRECTION, SPLIT_PAGE_PART } from './_models/reader-enums';
import { Preferences, scalingOptions } from '../_models/preferences/preferences';
import { READER_MODE } from '../_models/preferences/reader-mode';
import { MangaFormat } from '../_models/manga-format';
const PREFETCH_PAGES = 5;
@ -65,7 +66,20 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
seriesId!: number;
volumeId!: number;
chapterId!: number;
/**
* Reading List id. Defaults to -1.
*/
readingListId: number = CHAPTER_ID_DOESNT_EXIST;
/**
* If this is true, no progress will be saved.
*/
incognitoMode: boolean = false;
/**
* If this is true, chapters will be fetched in the order of a reading list, rather than natural series order.
*/
readingListMode: boolean = false;
/**
* The current page. UI will show this number + 1.
*/
@ -259,6 +273,14 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.libraryId = parseInt(libraryId, 10);
this.seriesId = parseInt(seriesId, 10);
this.chapterId = parseInt(chapterId, 10);
this.incognitoMode = this.route.snapshot.queryParamMap.get('incognitoMode') === 'true';
const readingListId = this.route.snapshot.queryParamMap.get('readingListId');
if (readingListId != null) {
this.readingListMode = true;
this.readingListId = parseInt(readingListId, 10);
}
this.continuousChaptersStack.push(this.chapterId);
@ -325,11 +347,26 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@HostListener('window:keyup', ['$event'])
handleKeyPress(event: KeyboardEvent) {
if (event.key === KEY_CODES.RIGHT_ARROW || event.key === KEY_CODES.DOWN_ARROW) {
this.readingDirection === ReadingDirection.LeftToRight ? this.nextPage() : this.prevPage();
} else if (event.key === KEY_CODES.LEFT_ARROW || event.key === KEY_CODES.UP_ARROW) {
this.readingDirection === ReadingDirection.LeftToRight ? this.prevPage() : this.nextPage();
} else if (event.key === KEY_CODES.ESC_KEY) {
switch (this.readerMode) {
case READER_MODE.MANGA_LR:
if (event.key === KEY_CODES.RIGHT_ARROW) {
this.readingDirection === ReadingDirection.LeftToRight ? this.nextPage() : this.prevPage();
} else if (event.key === KEY_CODES.LEFT_ARROW) {
this.readingDirection === ReadingDirection.LeftToRight ? this.prevPage() : this.nextPage();
}
break;
case READER_MODE.MANGA_UD:
case READER_MODE.WEBTOON:
if (event.key === KEY_CODES.DOWN_ARROW) {
this.nextPage()
} else if (event.key === KEY_CODES.UP_ARROW) {
this.prevPage()
}
break;
}
if (event.key === KEY_CODES.ESC_KEY) {
if (this.menuOpen) {
this.toggleMenu();
event.stopPropagation();
@ -343,6 +380,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();
}
}
@ -352,21 +391,30 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.nextChapterDisabled = false;
this.prevChapterDisabled = false;
this.nextChapterPrefetched = false;
this.pageNum = 1;
this.pageNum = 0;
forkJoin({
progress: this.readerService.getProgress(this.chapterId),
chapterInfo: this.readerService.getChapterInfo(this.seriesId, this.chapterId),
chapterInfo: this.readerService.getChapterInfo(this.chapterId),
bookmarks: this.readerService.getBookmarks(this.chapterId)
}).pipe(take(1)).subscribe(results => {
if (this.readingListMode && results.chapterInfo.seriesFormat === MangaFormat.EPUB) {
// Redirect to the book reader.
const params = this.readerService.getQueryParamsObject(this.incognitoMode, this.readingListMode, this.readingListId);
this.router.navigate(['library', results.chapterInfo.libraryId, 'series', results.chapterInfo.seriesId, 'book', this.chapterId], {queryParams: params});
return;
}
this.volumeId = results.chapterInfo.volumeId;
this.maxPages = results.chapterInfo.pages;
let page = results.progress.pageNum;
if (page >= this.maxPages) {
if (page > this.maxPages) {
page = this.maxPages - 1;
}
this.setPageNum(page);
// Due to change detection rules in Angular, we need to re-create the options object to apply the change
const newOptions: Options = Object.assign({}, this.pageOptions);
@ -381,20 +429,20 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.bookmarks[bookmark.page] = 1;
});
this.readerService.getNextChapter(this.seriesId, this.volumeId, this.chapterId).pipe(take(1)).subscribe(chapterId => {
this.readerService.getNextChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
this.nextChapterId = chapterId;
if (chapterId === CHAPTER_ID_DOESNT_EXIST || chapterId === this.chapterId) {
this.nextChapterDisabled = true;
}
});
this.readerService.getPrevChapter(this.seriesId, this.volumeId, this.chapterId).pipe(take(1)).subscribe(chapterId => {
this.readerService.getPrevChapter(this.seriesId, this.volumeId, this.chapterId, this.readingListId).pipe(take(1)).subscribe(chapterId => {
this.prevChapterId = chapterId;
if (chapterId === CHAPTER_ID_DOESNT_EXIST || chapterId === this.chapterId) {
this.prevChapterDisabled = true;
}
});
// ! Should I move the prefetching code if we start in webtoon reader mode?
const images = [];
for (let i = 0; i < PREFETCH_PAGES + 2; i++) {
images.push(new Image());
@ -420,7 +468,11 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
closeReader() {
this.location.back();
if (this.readingListMode) {
this.router.navigateByUrl('lists/' + this.readingListId);
} else {
this.location.back();
}
}
updateTitle(chapterInfo: ChapterInfo) {
@ -668,12 +720,12 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.nextPageDisabled) { return; }
this.isLoading = true;
if (this.nextChapterId === CHAPTER_ID_NOT_FETCHED || this.nextChapterId === this.chapterId) {
this.readerService.getNextChapter(this.seriesId, this.volumeId, this.chapterId).pipe(take(1)).subscribe(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');
}
}
@ -691,29 +743,29 @@ 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).pipe(take(1)).subscribe(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);
// Load chapter Id onto route but don't reload
const lastSlashIndex = this.router.url.lastIndexOf('/');
const newRoute = this.router.url.substring(0, lastSlashIndex + 1) + this.chapterId + '';
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;
@ -722,12 +774,44 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
/**
* There are some hard limits on the size of canvas' that we must cap at. https://github.com/jhildenbiddle/canvas-size#test-results
* For Safari, it's 16,777,216, so we cap at 4096x4096 when this happens. The drawImage in render will perform bi-cubic scaling for us.
* @returns If we should continue to the render loop
*/
setCanvasSize() {
if (this.ctx && this.canvas) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const isSafari = [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document);
const canvasLimit = isSafari ? 16_777_216 : 124_992_400;
const needsScaling = this.canvasImage.width * this.canvasImage.height > canvasLimit;
if (needsScaling) {
this.canvas.nativeElement.width = isSafari ? 4_096 : 16_384;
this.canvas.nativeElement.height = isSafari ? 4_096 : 16_384;
} else {
this.canvas.nativeElement.width = this.canvasImage.width;
this.canvas.nativeElement.height = this.canvasImage.height;
}
}
return true;
}
renderPage() {
if (this.ctx && this.canvas) {
this.canvasImage.onload = null;
//this.ctx.imageSmoothingEnabled = true;
this.canvas.nativeElement.width = this.canvasImage.width;
this.canvas.nativeElement.height = this.canvasImage.height;
if (!this.setCanvasSize()) return;
const needsSplitting = this.canvasImage.width > this.canvasImage.height;
this.updateSplitPage();
@ -777,8 +861,9 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
pageNum = this.pageNum + 1;
}
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
if (!this.incognitoMode) {
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
this.isLoading = true;
this.canvasImage = this.cachedImages.current();
@ -838,13 +923,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (this.pageNum >= this.maxPages - 10) {
// Tell server to cache the next chapter
if (this.nextChapterId > 0 && !this.nextChapterPrefetched) {
this.readerService.getChapterInfo(this.seriesId, this.nextChapterId).pipe(take(1)).subscribe(res => {
this.readerService.getChapterInfo(this.nextChapterId).pipe(take(1)).subscribe(res => {
this.nextChapterPrefetched = true;
});
}
} else if (this.pageNum <= 10) {
if (this.prevChapterId > 0 && !this.prevChapterPrefetched) {
this.readerService.getChapterInfo(this.seriesId, this.prevChapterId).pipe(take(1)).subscribe(res => {
this.readerService.getChapterInfo(this.prevChapterId).pipe(take(1)).subscribe(res => {
this.prevChapterPrefetched = true;
});
}
@ -901,11 +986,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
switch(this.readerMode) {
case READER_MODE.MANGA_LR:
this.readerMode = READER_MODE.MANGA_UD;
this.pagingDirection = PAGING_DIRECTION.FORWARD;
break;
case READER_MODE.MANGA_UD:
this.readerMode = READER_MODE.WEBTOON;
// Temp disable ability to use webtoon
//this.readerMode = READER_MODE.MANGA_LR;
break;
case READER_MODE.WEBTOON:
this.readerMode = READER_MODE.MANGA_LR;
@ -929,10 +1013,12 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
handleWebtoonPageChange(updatedPageNum: number) {
this.setPageNum(updatedPageNum);
if (this.incognitoMode) return;
this.readerService.saveProgress(this.seriesId, this.volumeId, this.chapterId, this.pageNum).pipe(take(1)).subscribe(() => {/* No operation */});
}
saveSettings() {
// NOTE: This is not called anywhere
if (this.user === undefined) return;
const data: Preferences = {
@ -974,9 +1060,9 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* Bookmarks the current page for the chapter
*/
bookmarkPage() {
// TODO: Show some sort of UI visual to show that a page was bookmarked
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];
});

7
UI/Web/src/app/manga-reader/manga-reader.router.module.ts
View file

@ -6,7 +6,12 @@ const routes: Routes = [
{
path: ':chapterId',
component: MangaReaderComponent
}
},
{
// This will allow the MangaReader to have a list to use for next/prev chapters rather than natural sort order
path: ':chapterId/list/:listId',
component: MangaReaderComponent
}
];

2
UI/Web/src/app/nav-header/nav-header.component.html
View file

@ -2,7 +2,7 @@
<div class="container-fluid">
<a class="sr-only sr-only-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
<a class="navbar-brand" routerLink="/library" routerLinkActive="active"><img class="logo" src="../../assets/images/logo.png" alt="kavita icon" aria-hidden="true"/><span class="phone-hidden"> Kavita</span></a>
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav col mr-auto">
<div class="nav-item" *ngIf="(accountService.currentUser$ | async) as user">
<div>

2
UI/Web/src/app/nav-header/nav-header.component.ts
View file

@ -72,7 +72,7 @@ export class NavHeaderComponent implements OnInit, OnDestroy {
onChangeSearch(val: string) {
this.isLoading = true;
this.searchTerm = val;
this.searchTerm = val.trim();
this.libraryService.search(val).pipe(takeUntil(this.onDestroy)).subscribe(results => {
this.searchResults = results;
this.isLoading = false;

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 { }

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

@ -0,0 +1,46 @@
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Add to Reading List</h4>
<button type="button" class="close" aria-label="Close" (click)="close()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form style="width: 100%" [formGroup]="listForm">
<div class="modal-body">
<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 | 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>
<li class="list-group-item" *ngIf="loading">
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
</li>
</ul>
</div>
<div class="modal-footer" style="justify-content: normal">
<div style="width: 100%;">
<div class="form-row">
<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>
</div>
</form>

7
UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss Normal file
View file

@ -0,0 +1,7 @@
.clickable {
cursor: pointer;
}
.clickable:hover, .clickable:focus {
background-color: lightgreen;
}

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

@ -0,0 +1,137 @@
import { noUndefined } from '@angular/compiler/src/util';
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { ReadingList } from 'src/app/_models/reading-list';
import { ReadingListService } from 'src/app/_services/reading-list.service';
export enum ADD_FLOW {
Series = 0,
Volume = 1,
Chapter = 2,
Multiple = 3,
Multiple_Series
}
@Component({
selector: 'app-add-to-list-modal',
templateUrl: './add-to-list-modal.component.html',
styleUrls: ['./add-to-list-modal.component.scss']
})
export class AddToListModalComponent implements OnInit, AfterViewInit {
@Input() title!: string;
/**
* Only used in Series flow
*/
@Input() seriesId?: number;
/**
* Only used in Volume flow
*/
@Input() volumeId?: number;
/**
* Only used in Chapter flow
*/
@Input() chapterId?: number;
/**
* Only used in Multiple flow
*/
@Input() volumeIds?: Array<number>;
/**
* Only used in Multiple flow
*/
@Input() chapterIds?: Array<number>;
/**
* Only used in Multiple_Series flow
*/
@Input() seriesIds?: Array<number>;
/**
* Determines which Input is required and which API is used to associate to the Reading List
*/
@Input() type!: ADD_FLOW;
/**
* All existing reading lists sorted by recent use date
*/
lists: Array<any> = [];
loading: boolean = false;
listForm: FormGroup = new FormGroup({});
@ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
constructor(private modal: NgbActiveModal, private readingListService: ReadingListService, private toastr: ToastrService) { }
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 => {
this.lists = lists.result;
this.loading = false;
});
}
ngAfterViewInit() {
// Shift focus to input
if (this.inputElem) {
this.inputElem.nativeElement.select();
}
}
close() {
this.modal.close();
}
create() {
this.readingListService.createList(this.listForm.value.title).subscribe(list => {
this.addToList(list);
});
}
addToList(readingList: ReadingList) {
if (this.type === ADD_FLOW.Multiple_Series && this.seriesIds !== undefined) {
this.readingListService.updateByMultipleSeries(readingList.id, this.seriesIds).subscribe(() => {
this.toastr.success('Series added to reading list');
this.modal.close();
});
}
if (this.seriesId === undefined) return;
if (this.type === ADD_FLOW.Series && this.seriesId !== undefined) {
this.readingListService.updateBySeries(readingList.id, this.seriesId).subscribe(() => {
this.toastr.success('Series added to reading list');
this.modal.close();
});
} else if (this.type === ADD_FLOW.Volume && this.volumeId !== undefined) {
this.readingListService.updateByVolume(readingList.id, this.seriesId, this.volumeId).subscribe(() => {
this.toastr.success('Volumes added to reading list');
this.modal.close();
});
} else if (this.type === ADD_FLOW.Chapter && this.chapterId !== undefined) {
this.readingListService.updateByChapter(readingList.id, this.seriesId, this.chapterId).subscribe(() => {
this.toastr.success('Chapter added to reading list');
this.modal.close();
});
} else if (this.type === ADD_FLOW.Multiple && this.volumeIds !== undefined && this.chapterIds !== undefined) {
this.readingListService.updateByMultiple(readingList.id, this.seriesId, this.volumeIds, this.chapterIds).subscribe(() => {
this.toastr.success('Chapters and Volumes added to reading list');
this.modal.close();
});
}
}
filterList = (listItem: ReadingList) => {
return listItem.title.toLowerCase().indexOf((this.listForm.value.filterQuery || '').toLowerCase()) >= 0;
}
}

31
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.html Normal file
View file

@ -0,0 +1,31 @@
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Edit {{readingList.title}} Reading List</h4>
<button type="button" class="close" aria-label="Close" (click)="close()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
This list is currently {{readingList?.promoted ? 'promoted' : 'not promoted'}} (<i class="fa fa-angle-double-up" aria-hidden="true"></i>).
Promotion means that the list can be seen server-wide, not just for admin users. All series that are within this list will still have user-access restrictions placed on them.
</p>
<form [formGroup]="reviewGroup">
<div class="form-group">
<label for="title">Name</label>
<input id="title" class="form-control" formControlName="title" type="text">
</div>
<div class="form-group">
<label for="summary">Summary</label>
<textarea id="summary" class="form-control" formControlName="summary" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">Close</button>
<button type="button" class="btn btn-info" (click)="togglePromotion()">{{readingList.promoted ? 'Demote' : 'Promote'}}</button>
<button type="submit" class="btn btn-primary" [disabled]="reviewGroup.get('title')?.value.trim().length === 0" (click)="save()">Save</button>
</div>

0
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.scss Normal file
View file

52
UI/Web/src/app/reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component.ts Normal file
View file

@ -0,0 +1,52 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ReadingList } from 'src/app/_models/reading-list';
import { ReadingListService } from 'src/app/_services/reading-list.service';
@Component({
selector: 'app-edit-reading-list-modal',
templateUrl: './edit-reading-list-modal.component.html',
styleUrls: ['./edit-reading-list-modal.component.scss']
})
export class EditReadingListModalComponent implements OnInit {
@Input() readingList!: ReadingList;
reviewGroup!: FormGroup;
constructor(private ngModal: NgbActiveModal, private readingListService: ReadingListService) { }
ngOnInit(): void {
this.reviewGroup = new FormGroup({
title: new FormControl(this.readingList.title, [Validators.required]),
summary: new FormControl(this.readingList.summary, [])
});
}
close() {
this.ngModal.dismiss(undefined);
}
save() {
if (this.reviewGroup.value.title.trim() === '') return;
const model = {...this.reviewGroup.value, readingListId: this.readingList.id, promoted: this.readingList.promoted};
this.readingListService.update(model).subscribe(() => {
this.readingList.title = model.title;
this.readingList.summary = model.summary;
this.ngModal.close(this.readingList);
});
}
togglePromotion() {
const originalPromotion = this.readingList.promoted;
this.readingList.promoted = !this.readingList.promoted;
const model = {readingListId: this.readingList.id, promoted: this.readingList.promoted};
this.readingListService.update(model).subscribe(res => {
/* No Operation */
}, err => {
this.readingList.promoted = originalPromotion;
});
}
}

23
UI/Web/src/app/reading-list/dragable-ordered-list/dragable-ordered-list.component.html Normal file
View file

@ -0,0 +1,23 @@
<div cdkDropList class="{{items.length > 0 ? 'example-list list-group-flush' : ''}}" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of items; index as i" cdkDrag [cdkDragData]="item" cdkDragBoundary=".example-list">
<div class="mr-3 align-middle">
<i class="fa fa-grip-vertical drag-handle" aria-hidden="true" cdkDragHandle></i>
</div>
<ng-container style="display: inline-block" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<div class="align-middle" style="padding-top: 40px">
<label for="reorder-{{i}}" class="sr-only">Reorder</label>
<input *ngIf="accessibilityMode" id="reorder-{{i}}" type="number" min="0" [max]="items.length - 1" [value]="i" style="width: 40px" (focusout)="updateIndex(i, item)" (keydown.enter)="updateIndex(i, item)" aria-describedby="instructions">
</div>
<button class="btn btn-icon pull-right" (click)="removeItem(item, i)">
<i class="fa fa-times" aria-hidden="true"></i>
<span class="sr-only" attr.aria-labelledby="item.id--{{i}}">Remove item</span>
</button>
</div>
</div>
<p class="sr-only" id="instructions">
</p>

47
UI/Web/src/app/reading-list/dragable-ordered-list/dragable-ordered-list.component.scss Normal file
View file

@ -0,0 +1,47 @@
.example-list {
min-width: 500px;
max-width: 100%;
min-height: 60px;
display: block;
border-radius: 4px;
overflow: hidden;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: row;
box-sizing: border-box;
font-size: 14px;
.drag-handle {
cursor: move;
font-size: 24px;
margin-top: 215%;
}
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

63
UI/Web/src/app/reading-list/dragable-ordered-list/dragable-ordered-list.component.ts Normal file
View file

@ -0,0 +1,63 @@
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
export interface IndexUpdateEvent {
fromPosition: number;
toPosition: number;
item: any;
}
export interface ItemRemoveEvent {
position: number;
item: any;
}
@Component({
selector: 'app-dragable-ordered-list',
templateUrl: './dragable-ordered-list.component.html',
styleUrls: ['./dragable-ordered-list.component.scss']
})
export class DragableOrderedListComponent implements OnInit {
@Input() accessibilityMode: boolean = false;
@Input() items: Array<any> = [];
@Output() orderUpdated: EventEmitter<IndexUpdateEvent> = new EventEmitter<IndexUpdateEvent>();
@Output() itemRemove: EventEmitter<ItemRemoveEvent> = new EventEmitter<ItemRemoveEvent>();
@ContentChild('draggableItem') itemTemplate!: TemplateRef<any>;
constructor() { }
ngOnInit(): void {
}
drop(event: CdkDragDrop<string[]>) {
if (event.previousIndex === event.currentIndex) return;
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
this.orderUpdated.emit({
fromPosition: event.previousIndex,
toPosition: event.currentIndex,
item: this.items[event.currentIndex]
});
}
updateIndex(previousIndex: number, item: any) {
// get the new value of the input
var inputElem = <HTMLInputElement>document.querySelector('#reorder-' + previousIndex);
const newIndex = parseInt(inputElem.value, 10);
if (previousIndex === newIndex) return;
moveItemInArray(this.items, previousIndex, newIndex);
this.orderUpdated.emit({
fromPosition: previousIndex,
toPosition: newIndex,
item: this.items[newIndex]
});
}
removeItem(item: any, position: number) {
this.itemRemove.emit({
position,
item
});
}
}

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

@ -0,0 +1,73 @@
<div class="container-sm mt-2" *ngIf="readingList">
<div class="mb-3">
<!-- Title row-->
<div class="row no-gutters">
<h2 style="display: inline-block">
<span *ngIf="actions.length > 0">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="readingList.title"></app-card-actionables>&nbsp;
</span>
{{readingList.title}}&nbsp;<span *ngIf="readingList?.promoted">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>&nbsp;
<span class="badge badge-primary badge-pill" attr.aria-label="{{items.length}} total items">{{items.length}}</span>
</h2>
</div>
<!-- Action row-->
<div class="row no-gutters">
<div class="mr-2">
<button class="btn btn-primary" title="Read" (click)="read()">
<span>
<i class="fa fa-book-open" aria-hidden="true"></i>
<span class="read-btn--text">&nbsp;Read</span>
</span>
</button>
</div>
<div>
<button class="btn btn-secondary" (click)="removeRead()" [disabled]="readingList?.promoted && !this.isAdmin">
<span>
<i class="fa fa-check"></i>
</span>
<span class="read-btn--text">&nbsp;Remove Read</span>
</button>
</div>
<div class="ml-2 mt-2" *ngIf="!(readingList?.promoted && !this.isAdmin)">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="accessibilit-mode" [value]="accessibilityMode" (change)="accessibilityMode = !accessibilityMode">
<label class="form-check-label" for="accessibilit-mode">Order Numbers</label>
</div>
</div>
</div>
<!-- Summary row-->
<div class="row no-gutters mt-2">
<app-read-more [text]="readingList.summary" [maxLength]="250"></app-read-more>
</div>
</div>
<div *ngIf="items.length === 0">
No chapters added
</div>
<app-dragable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" (itemRemove)="itemRemoved($event)" [accessibilityMode]="accessibilityMode">
<ng-template #draggableItem let-item let-position="idx">
<div class="media" style="width: 100%;">
<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)}}&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>
</ng-template>
</app-dragable-ordered-list>
</div>

4
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss Normal file
View file

@ -0,0 +1,4 @@
.container-sm {
padding-left: 0px;
padding-right: 0px;
}

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

@ -0,0 +1,159 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
import { ConfirmService } from 'src/app/shared/confirm.service';
import { UtilityService } from 'src/app/shared/_services/utility.service';
import { MangaFormat } from 'src/app/_models/manga-format';
import { ReadingList, ReadingListItem } 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';
import { IndexUpdateEvent, ItemRemoveEvent } from '../dragable-ordered-list/dragable-ordered-list.component';
@Component({
selector: 'app-reading-list-detail',
templateUrl: './reading-list-detail.component.html',
styleUrls: ['./reading-list-detail.component.scss']
})
export class ReadingListDetailComponent implements OnInit {
items: Array<ReadingListItem> = [];
listId!: number;
readingList!: ReadingList;
actions: Array<ActionItem<any>> = [];
isAdmin: boolean = false;
isLoading: boolean = false;
accessibilityMode: boolean = false;
// Downloading
hasDownloadingRole: boolean = false;
downloadInProgress: boolean = false;
get MangaFormat(): typeof MangaFormat {
return MangaFormat;
}
constructor(private route: ActivatedRoute, private router: Router, private readingListService: ReadingListService,
private actionService: ActionService, private actionFactoryService: ActionFactoryService, public utilityService: UtilityService,
public imageService: ImageService, private accountService: AccountService, private toastr: ToastrService, private confirmService: ConfirmService) {}
ngOnInit(): void {
const listId = this.route.snapshot.paramMap.get('id');
if (listId === null) {
this.router.navigateByUrl('/libraries');
return;
}
this.listId = parseInt(listId, 10);
this.readingListService.getReadingList(this.listId).subscribe(readingList => {
if (readingList == null) {
// The list doesn't exist
this.toastr.error('This list doesn\'t exist.');
this.router.navigateByUrl('library');
return;
}
this.readingList = readingList;
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));
}
});
});
this.getListItems();
}
getListItems() {
this.isLoading = true;
this.readingListService.getListItems(this.listId).subscribe(items => {
this.items = items;
this.isLoading = false;
});
}
performAction(action: ActionItem<any>) {
// TODO: Try to move performAction into the actionables component. (have default handler in the component, allow for overridding to pass additional context)
if (typeof action.callback === 'function') {
action.callback(action.action, this.readingList);
}
}
handleReadingListActionCallback(action: Action, readingList: ReadingList) {
switch(action) {
case Action.Delete:
this.deleteList(readingList);
break;
case Action.Edit:
this.actionService.editReadingList(readingList, (readingList: ReadingList) => {
// Reload information around list
this.readingList = readingList;
});
break;
}
}
async deleteList(readingList: ReadingList) {
if (!await this.confirmService.confirm('Are you sure you want to delete the reading list? This cannot be undone.')) return;
this.readingListService.delete(readingList.id).subscribe(() => {
this.toastr.success('Reading list deleted');
this.router.navigateByUrl('library#lists');
});
}
formatTitle(item: ReadingListItem) {
if (item.chapterNumber === '0') {
return 'Volume ' + item.volumeNumber;
}
if (item.seriesFormat === MangaFormat.EPUB) {
return 'Volume ' + this.utilityService.cleanSpecialTitle(item.chapterNumber);
}
return 'Chapter ' + item.chapterNumber;
}
orderUpdated(event: IndexUpdateEvent) {
this.readingListService.updatePosition(this.readingList.id, event.item.id, event.fromPosition, event.toPosition).subscribe(() => { /* No Operation */ });
}
itemRemoved(event: ItemRemoveEvent) {
this.readingListService.deleteItem(this.readingList.id, event.item.id).subscribe(() => {
this.items.splice(event.position, 1);
this.toastr.success('Item removed');
});
}
removeRead() {
this.isLoading = true;
this.readingListService.removeRead(this.readingList.id).subscribe(() => {
this.getListItems();
});
}
read() {
let currentlyReadingChapter = this.items[0];
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].pagesRead >= this.items[i].pagesTotal) {
continue;
}
currentlyReadingChapter = this.items[i];
break;
}
if (currentlyReadingChapter.seriesFormat === MangaFormat.EPUB) {
this.router.navigate(['library', currentlyReadingChapter.libraryId, 'series', currentlyReadingChapter.seriesId, 'book', currentlyReadingChapter.chapterId], {queryParams: {readingListId: this.readingList.id}});
} else {
this.router.navigate(['library', currentlyReadingChapter.libraryId, 'series', currentlyReadingChapter.seriesId, 'manga', currentlyReadingChapter.chapterId], {queryParams: {readingListId: this.readingList.id}});
}
}
}

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

@ -0,0 +1,40 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DragableOrderedListComponent } from './dragable-ordered-list/dragable-ordered-list.component';
import { ReadingListDetailComponent } from './reading-list-detail/reading-list-detail.component';
import { ReadingListRoutingModule } from './reading-list.router.module';
import {DragDropModule} from '@angular/cdk/drag-drop';
import { AddToListModalComponent } from './_modals/add-to-list-modal/add-to-list-modal.component';
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';
@NgModule({
declarations: [
DragableOrderedListComponent,
ReadingListDetailComponent,
AddToListModalComponent,
ReadingListsComponent,
EditReadingListModalComponent
],
imports: [
CommonModule,
ReadingListRoutingModule,
ReactiveFormsModule,
DragDropModule,
CardsModule,
PipeModule,
SharedModule
],
exports: [
AddToListModalComponent,
ReadingListsComponent,
EditReadingListModalComponent
]
})
export class ReadingListModule { }

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

@ -0,0 +1,23 @@
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AuthGuard } from "../_guards/auth.guard";
import { ReadingListDetailComponent } from "./reading-list-detail/reading-list-detail.component";
const routes: Routes = [
{
path: '',
runGuardsAndResolvers: 'always',
canActivate: [AuthGuard],
children: [
{path: '', component: ReadingListDetailComponent, pathMatch: 'full'},
{path: ':id', component: ReadingListDetailComponent, pathMatch: 'full'},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ReadingListRoutingModule { }

11
UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html Normal file
View file

@ -0,0 +1,11 @@
<app-card-detail-layout header="Reading Lists"
[isLoading]="loadingLists"
[items]="lists"
[actions]="actions"
[pagination]="pagination"
(pageChange)="onPageChange($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-card-item [title]="item.title" [entity]="item" [actions]="getActions(item)" [supressLibraryLink]="true" [imageUrl]="imageService.placeholderImage" (clicked)="handleClick(item)"></app-card-item>
</ng-template>
</app-card-detail-layout>

0
UI/Web/src/app/reading-list/reading-lists/reading-lists.component.scss Normal file
View file

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

@ -0,0 +1,96 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { take } from 'rxjs/operators';
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';
@Component({
selector: 'app-reading-lists',
templateUrl: './reading-lists.component.html',
styleUrls: ['./reading-lists.component.scss']
})
export class ReadingListsComponent implements OnInit {
lists: ReadingList[] = [];
loadingLists = false;
pagination!: Pagination;
actions: ActionItem<ReadingList>[] = [];
isAdmin: boolean = false;
constructor(private readingListService: ReadingListService, public imageService: ImageService, private actionFactoryService: ActionFactoryService,
private accountService: AccountService, private toastr: ToastrService, private router: Router, private actionService: ActionService) { }
ngOnInit(): void {
this.loadPage();
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
if (user) {
this.isAdmin = this.accountService.hasAdminRole(user);
}
});
}
getActions(readingList: ReadingList) {
return this.actionFactoryService.getReadingListActions(this.handleReadingListActionCallback.bind(this)).filter(action => this.readingListService.actionListFilter(action, readingList, this.isAdmin));
}
performAction(action: ActionItem<any>, readingList: ReadingList) {
// TODO: Try to move performAction into the actionables component. (have default handler in the component, allow for overridding to pass additional context)
if (typeof action.callback === 'function') {
action.callback(action.action, readingList);
}
}
handleReadingListActionCallback(action: Action, readingList: ReadingList) {
switch(action) {
case Action.Delete:
this.readingListService.delete(readingList.id).subscribe(() => {
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;
}
}
getPage() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('page');
}
loadPage() {
const page = this.getPage();
if (page != null) {
this.pagination.currentPage = parseInt(page, 10);
}
this.loadingLists = true;
this.readingListService.getReadingLists(true, this.pagination?.currentPage, this.pagination?.itemsPerPage).pipe(take(1)).subscribe((readingLists: PaginatedResult<ReadingList[]>) => {
this.lists = readingLists.result;
this.pagination = readingLists.pagination;
this.loadingLists = false;
window.scrollTo(0, 0);
});
}
onPageChange(pagination: Pagination) {
window.history.replaceState(window.location.href, '', window.location.href.split('?')[0] + '?page=' + this.pagination.currentPage);
this.loadPage();
}
handleClick(list: ReadingList) {
this.router.navigateByUrl('lists/' + list.id);
}
}

35
UI/Web/src/app/series-detail/series-detail.component.html
View file

@ -95,19 +95,18 @@
</div>
</div>
</div>
<hr>
<div>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav-tabs" [destroyOnHide]="false">
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav-tabs nav-pills" [destroyOnHide]="false">
<li [ngbNavItem]="1" *ngIf="hasSpecials">
<a ngbNavLink>Specials</a>
<ng-template ngbNavContent>
<div class="row">
<div *ngFor="let chapter of specials">
<app-card-item class="col-auto" *ngIf="chapter.isSpecial" [entity]="chapter" [title]="chapter.title || chapter.range" (click)="openChapter(chapter)"
<div class="row no-gutters">
<div *ngFor="let chapter of specials; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto" *ngIf="chapter.isSpecial" [entity]="chapter" [title]="chapter.title || chapter.range" (click)="openChapter(chapter)"
[imageUrl]="imageService.getChapterCoverImage(chapter.id)"
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions"></app-card-item>
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('special', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('special', idx)" [allowSelection]="true"></app-card-item>
</div>
</div>
</ng-template>
@ -115,17 +114,17 @@
<li [ngbNavItem]="2" *ngIf="hasNonSpecialVolumeChapters">
<a ngbNavLink>Volumes/Chapters</a>
<ng-template ngbNavContent>
<div class="row">
<div *ngFor="let volume of volumes">
<app-card-item class="col-auto" *ngIf="volume.number != 0" [entity]="volume" [title]="'Volume ' + volume.name" (click)="openVolume(volume)"
[imageUrl]="imageService.getVolumeCoverImage(volume.id) + '&offset=' + coverImageOffset"
[read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions"></app-card-item>
</div>
<div *ngFor="let chapter of chapters">
<app-card-item class="col-auto" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="'Chapter ' + chapter.range" (click)="openChapter(chapter)"
[imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions"></app-card-item>
</div>
<div class="row no-gutters">
<div *ngFor="let volume of volumes; let idx = index; trackBy: trackByVolumeIdentity">
<app-card-item class="col-auto" *ngIf="volume.number != 0" [entity]="volume" [title]="'Volume ' + volume.name" (click)="openVolume(volume)"
[imageUrl]="imageService.getVolumeCoverImage(volume.id) + '&offset=' + coverImageOffset"
[read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
</div>
<div *ngFor="let chapter of chapters; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="'Chapter ' + chapter.range" (click)="openChapter(chapter)"
[imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
</div>
</div>
</ng-template>
</li>

2
UI/Web/src/app/series-detail/series-detail.component.scss
View file

@ -13,7 +13,7 @@
.poster {
width: 100%;
max-height: 481px;
max-width: 400px;
}

127
UI/Web/src/app/series-detail/series-detail.component.ts
View file

@ -1,18 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { finalize, take, takeWhile } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { finalize, take, takeUntil, takeWhile } from 'rxjs/operators';
import { BulkSelectionService } from '../cards/bulk-selection.service';
import { CardDetailsModalComponent } from '../cards/_modals/card-details-modal/card-details-modal.component';
import { EditSeriesModalComponent } from '../cards/_modals/edit-series-modal/edit-series-modal.component';
import { ConfirmConfig } from '../shared/confirm-dialog/_models/confirm-config';
import { ConfirmService } from '../shared/confirm.service';
import { TagBadgeCursor } from '../shared/tag-badge/tag-badge.component';
import { DownloadService } from '../shared/_services/download.service';
import { UtilityService } from '../shared/_services/utility.service';
import { KEY_CODES, UtilityService } from '../shared/_services/utility.service';
import { ReviewSeriesModalComponent } from '../_modals/review-series-modal/review-series-modal.component';
import { Chapter } from '../_models/chapter';
import { ScanSeriesEvent } from '../_models/events/scan-series-event';
import { LibraryType } from '../_models/library';
import { MangaFormat } from '../_models/manga-format';
import { Series } from '../_models/series';
@ -23,6 +26,7 @@ import { ActionItem, ActionFactoryService, Action } from '../_services/action-fa
import { ActionService } from '../_services/action.service';
import { ImageService } from '../_services/image.service';
import { LibraryService } from '../_services/library.service';
import { MessageHubService } from '../_services/message-hub.service';
import { ReaderService } from '../_services/reader.service';
import { SeriesService } from '../_services/series.service';
@ -32,7 +36,7 @@ import { SeriesService } from '../_services/series.service';
templateUrl: './series-detail.component.html',
styleUrls: ['./series-detail.component.scss']
})
export class SeriesDetailComponent implements OnInit {
export class SeriesDetailComponent implements OnInit, OnDestroy {
series!: Series;
volumes: Volume[] = [];
@ -50,6 +54,7 @@ export class SeriesDetailComponent implements OnInit {
seriesActions: ActionItem<Series>[] = [];
volumeActions: ActionItem<Volume>[] = [];
chapterActions: ActionItem<Chapter>[] = [];
bulkActions: ActionItem<any>[] = [];
hasSpecials = false;
specials: Array<Chapter> = [];
@ -76,6 +81,57 @@ export class SeriesDetailComponent implements OnInit {
*/
actionInProgress: boolean = false;
/**
* Track by function for Volume to tell when to refresh card data
*/
trackByVolumeIdentity = (index: number, item: Volume) => `${item.name}_${item.pagesRead}`;
/**
* Track by function for Chapter to tell when to refresh card data
*/
trackByChapterIdentity = (index: number, item: Chapter) => `${item.title}_${item.number}_${item.pagesRead}`;
bulkActionCallback = (action: Action, data: any) => {
if (this.series === undefined) {
return;
}
const seriesId = this.series.id;
// we need to figure out what is actually selected now
const selectedVolumeIndexes = this.bulkSelectionService.getSelectedCardsForSource('volume');
const selectedChapterIndexes = this.bulkSelectionService.getSelectedCardsForSource('chapter');
const selectedSpecialIndexes = this.bulkSelectionService.getSelectedCardsForSource('special');
const selectedChapterIds = this.chapters.filter((_chapter, index: number) => selectedChapterIndexes.includes(index + ''));
const selectedVolumeIds = this.volumes.filter((_volume, index: number) => selectedVolumeIndexes.includes(index + ''));
const selectedSpecials = this.specials.filter((_chapter, index: number) => selectedSpecialIndexes.includes(index + ''));
const chapters = [...selectedChapterIds, ...selectedSpecials];
switch (action) {
case Action.AddToReadingList:
this.actionService.addMultipleToReadingList(seriesId, selectedVolumeIds, chapters, () => {
this.actionInProgress = false;
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsRead:
this.actionService.markMultipleAsRead(seriesId, selectedVolumeIds, chapters, () => {
this.setContinuePoint();
this.actionInProgress = false;
this.bulkSelectionService.deselectAll();
});
break;
case Action.MarkAsUnread:
this.actionService.markMultipleAsUnread(seriesId, selectedVolumeIds, chapters, () => {
this.setContinuePoint();
this.actionInProgress = false;
this.bulkSelectionService.deselectAll();
});
break;
}
}
private onDestroy: Subject<void> = new Subject();
get LibraryType(): typeof LibraryType {
return LibraryType;
@ -97,7 +153,8 @@ export class SeriesDetailComponent implements OnInit {
private actionFactoryService: ActionFactoryService, private libraryService: LibraryService,
private confirmService: ConfirmService, private titleService: Title,
private downloadService: DownloadService, private actionService: ActionService,
public imageSerivce: ImageService) {
public imageSerivce: ImageService, private messageHub: MessageHubService,
public bulkSelectionService: BulkSelectionService) {
ratingConfig.max = 5;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
@ -116,20 +173,39 @@ export class SeriesDetailComponent implements OnInit {
return;
}
this.messageHub.scanSeries.pipe(takeUntil(this.onDestroy)).subscribe((event: ScanSeriesEvent) => {
if (event.seriesId == this.series.id)
this.loadSeries(seriesId);
this.seriesImage = this.imageService.randomize(this.imageService.getSeriesCoverImage(this.series.id));
this.toastr.success('Scan series completed');
});
const seriesId = parseInt(routeId, 10);
this.libraryId = parseInt(libraryId, 10);
this.seriesImage = this.imageService.getSeriesCoverImage(seriesId);
this.loadSeriesMetadata(seriesId);
this.libraryService.getLibraryType(this.libraryId).subscribe(type => {
this.libraryType = type;
this.loadSeries(seriesId);
});
}
loadSeriesMetadata(seriesId: number) {
this.seriesService.getMetadata(seriesId).subscribe(metadata => {
this.seriesMetadata = metadata;
});
ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = true;
}
}
@HostListener('document:keyup.shift', ['$event'])
handleKeyUp(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
this.bulkSelectionService.isShiftDown = false;
}
}
handleSeriesActionCallback(action: Action, series: Series) {
@ -159,6 +235,9 @@ export class SeriesDetailComponent implements OnInit {
case(Action.Bookmarks):
this.actionService.openBookmarkModal(series, () => this.actionInProgress = false);
break;
case(Action.AddToReadingList):
this.actionService.addSeriesToReadingList(series, () => this.actionInProgress = false);
break;
default:
break;
}
@ -175,6 +254,14 @@ export class SeriesDetailComponent implements OnInit {
case(Action.Edit):
this.openViewInfo(volume);
break;
case(Action.AddToReadingList):
this.actionService.addVolumeToReadingList(volume, this.series.id, () => {/* No Operation */ });
break;
case(Action.IncognitoRead):
if (volume.chapters != undefined && volume.chapters?.length >= 1) {
this.openChapter(volume.chapters[0], true);
}
break;
default:
break;
}
@ -191,6 +278,12 @@ export class SeriesDetailComponent implements OnInit {
case(Action.Edit):
this.openViewInfo(chapter);
break;
case(Action.AddToReadingList):
this.actionService.addChapterToReadingList(chapter, this.series.id, () => {/* No Operation */ });
break;
case(Action.IncognitoRead):
this.openChapter(chapter, true);
break;
default:
break;
}
@ -245,6 +338,7 @@ export class SeriesDetailComponent implements OnInit {
this.volumeActions = this.actionFactoryService.getVolumeActions(this.handleVolumeActionCallback.bind(this));
this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this));
this.seriesService.getVolumes(this.series.id).subscribe(volumes => {
this.chapters = volumes.filter(v => v.number === 0).map(v => v.chapters || []).flat().sort(this.utilityService.sortChapters);
@ -269,6 +363,11 @@ export class SeriesDetailComponent implements OnInit {
this.hasNonSpecialVolumeChapters = false;
}
// If an update occured and we were on specials, re-activate Volumes/Chapters
if (!this.hasSpecials && this.activeTabId != 2) {
this.activeTabId = 2;
}
this.isLoading = false;
});
}, err => {
@ -348,16 +447,16 @@ export class SeriesDetailComponent implements OnInit {
});
}
openChapter(chapter: Chapter) {
openChapter(chapter: Chapter, incognitoMode = false) {
if (chapter.pages === 0) {
this.toastr.error('There are no pages. Kavita was not able to read this archive.');
return;
}
if (chapter.files.length > 0 && chapter.files[0].format === MangaFormat.EPUB) {
this.router.navigate(['library', this.libraryId, 'series', this.series?.id, 'book', chapter.id]);
this.router.navigate(['library', this.libraryId, 'series', this.series?.id, 'book', chapter.id], {queryParams: {incognitoMode}});
} else {
this.router.navigate(['library', this.libraryId, 'series', this.series?.id, 'manga', chapter.id]);
this.router.navigate(['library', this.libraryId, 'series', this.series?.id, 'manga', chapter.id], {queryParams: {incognitoMode}});
}
}
@ -405,7 +504,6 @@ export class SeriesDetailComponent implements OnInit {
window.scrollTo(0, 0);
if (closeResult.success) {
this.loadSeries(this.series.id);
this.loadSeriesMetadata(this.series.id);
if (closeResult.coverImageUpdate) {
// Random triggers a load change without any problems with API
this.seriesImage = this.imageService.randomize(this.imageService.getSeriesCoverImage(this.series.id));
@ -450,7 +548,6 @@ export class SeriesDetailComponent implements OnInit {
}
downloadSeries() {
this.downloadService.downloadSeriesSize(this.series.id).pipe(take(1)).subscribe(async (size) => {
const wantToDownload = await this.downloadService.confirmSize(size, 'series');
if (!wantToDownload) { return; }

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.
*

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

@ -13,10 +13,19 @@ export enum KEY_CODES {
SPACE = ' ',
ENTER = 'Enter',
G = 'g',
B = 'b',
BACKSPACE = 'Backspace',
DELETE = 'Delete'
DELETE = 'Delete',
SHIFT = 'Shift'
}
export enum Breakpoint {
Mobile = 768,
Tablet = 1280,
Desktop = 1440
}
@Injectable({
providedIn: 'root'
})
@ -110,4 +119,12 @@ export class UtilityService {
return <Series>d;
}
getActiveBreakpoint(): Breakpoint {
if (window.innerWidth <= Breakpoint.Mobile) return Breakpoint.Mobile;
else if (window.innerWidth > Breakpoint.Mobile && window.innerWidth <= Breakpoint.Tablet) return Breakpoint.Tablet;
else if (window.innerWidth > Breakpoint.Tablet) return Breakpoint.Desktop
return Breakpoint.Desktop;
}
}

2
UI/Web/src/app/shared/shared.module.ts
View file

@ -13,7 +13,6 @@ import { ShowIfScrollbarDirective } from './show-if-scrollbar.directive';
import { A11yClickDirective } from './a11y-click.directive';
import { SeriesFormatComponent } from './series-format/series-format.component';
import { UpdateNotificationModalComponent } from './update-notification/update-notification-modal.component';
import { SAVER, getSaver } from './_providers/saver.provider';
import { CircularLoaderComponent } from './circular-loader/circular-loader.component';
import { NgCircleProgressModule } from 'ng-circle-progress';
@ -51,6 +50,5 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
TagBadgeComponent,
CircularLoaderComponent,
],
//providers: [{provide: SAVER, useFactory: getSaver}]
})
export class SharedModule { }

34
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View file

@ -1,6 +1,6 @@
<div class="container">
<h2>User Dashboard</h2>
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs nav-pills">
<li *ngFor="let tab of tabs" [ngbNavItem]="tab">
<a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | titlecase }}</a>
<ng-template ngbNavContent>
@ -9,8 +9,14 @@
These are global settings that are bound to your account.
</p>
<ngb-accordion [closeOthers]="true" activeIds="site-panel">
<ngb-accordion [closeOthers]="true" activeIds="site-panel" #acc="ngbAccordion">
<ngb-panel id="site-panel" title="Site">
<ng-template ngbPanelHeader>
<div class="d-flex align-items-center justify-content-between">
<button ngbPanelToggle class="btn container-fluid text-left pl-0 accordion-header">Site</button>
<span class="pull-right"><i class="fa fa-angle-{{acc.isExpanded('site-panel') ? 'down' : 'up'}}" aria-hidden="true"></i></span>
</div>
</ng-template>
<ng-template ngbPanelContent>
<form [formGroup]="settingsForm" *ngIf="user !== undefined">
<div class="form-group">
@ -34,6 +40,12 @@
</ng-template>
</ngb-panel>
<ngb-panel id="reading-panel" title="Reading">
<ng-template ngbPanelHeader>
<div class="d-flex align-items-center justify-content-between">
<button ngbPanelToggle class="btn container-fluid text-left pl-0 accordion-header">Reading</button>
<span class="pull-right"><i class="fa fa-angle-{{acc.isExpanded('reading-panel') ? 'down' : 'up'}}" aria-hidden="true"></i></span>
</div>
</ng-template>
<ng-template ngbPanelContent>
<form [formGroup]="settingsForm" *ngIf="user !== undefined">
<h3 id="manga-header">Manga</h3>
@ -130,20 +142,20 @@
</div>
<div class="form-group">
<label id="font-size">Font Size</label>
<ngx-slider [options]="bookReaderFontSizeOptions" formControlName="bookReaderFontSize" aria-labelledby="font-size"></ngx-slider>
<div class="custom-slider"><ngx-slider [options]="bookReaderFontSizeOptions" formControlName="bookReaderFontSize" aria-labelledby="font-size"></ngx-slider></div>
</div>
<div class="form-group">
<label>Line Height</label>&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="right" [ngbTooltip]="bookLineHeightOptionTooltip" role="button" tabindex="0"></i>
<ng-template #bookLineHeightOptionTooltip>How much spacing between the lines of the book</ng-template>
<span class="sr-only" id="settings-booklineheight-option-help">How much spacing between the lines of the book</span>
<ngx-slider [options]="bookReaderLineSpacingOptions" formControlName="bookReaderLineSpacing" aria-describedby="settings-booklineheight-option-help"></ngx-slider>
<div class="custom-slider"><ngx-slider [options]="bookReaderLineSpacingOptions" formControlName="bookReaderLineSpacing" aria-describedby="settings-booklineheight-option-help"></ngx-slider></div>
</div>
<div class="form-group">
<label>Margin</label>&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="right" [ngbTooltip]="bookReaderMarginOptionTooltip" role="button" tabindex="0"></i>
<ng-template #bookReaderMarginOptionTooltip>How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting.</ng-template>
<span class="sr-only" id="settings-bookmargin-option-help">How much spacing on each side of the screen. This will override to 0 on mobile devices regardless of this setting.</span>
<ngx-slider [options]="bookReaderMarginOptions" formControlName="bookReaderMargin" aria-describedby="bookmargin"></ngx-slider>
<div class="custom-slider"><ngx-slider [options]="bookReaderMarginOptions" formControlName="bookReaderMargin" aria-describedby="bookmargin"></ngx-slider></div>
</div>
<div class="float-right mb-3">
@ -156,6 +168,12 @@
<ngb-panel id="password-panel" title="Password">
<ng-template ngbPanelHeader>
<div class="d-flex align-items-center justify-content-between">
<button ngbPanelToggle class="btn container-fluid text-left pl-0 accordion-header">Password</button>
<span class="pull-right"><i class="fa fa-angle-{{acc.isExpanded('password-panel') ? 'down' : 'up'}}" aria-hidden="true"></i></span>
</div>
</ng-template>
<ng-template ngbPanelContent>
<p>Change your Password</p>
<div class="alert alert-danger" role="alert" *ngIf="resetPasswordErrors.length > 0">
@ -191,6 +209,12 @@
</ng-template>
</ngb-panel>
<ngb-panel id="api-panel" title="OPDS">
<ng-template ngbPanelHeader>
<div class="d-flex align-items-center justify-content-between">
<button ngbPanelToggle class="btn container-fluid text-left pl-0 accordion-header">OPDS</button>
<span class="pull-right"><i class="fa fa-angle-{{acc.isExpanded('api-panel') ? 'down' : 'up'}}" aria-hidden="true"></i></span>
</div>
</ng-template>
<ng-template ngbPanelContent>
<p class="alert alert-danger" role="alert" *ngIf="!opdsEnabled">
OPDS is not enabled on this server!

54
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.scss
View file

@ -1,3 +1,55 @@
@import '../../../theme/colors';
.invalid-feedback {
display: inline-block !important;
}
}
// Slider handle override
::ng-deep {
.custom-slider .ngx-slider .ngx-slider-bar {
background: #545a52;
height: 2px;
}
.custom-slider .ngx-slider .ngx-slider-selection {
background: $primary-color;
}
.custom-slider .ngx-slider .ngx-slider-pointer {
width: 8px;
height: 16px;
top: auto; /* to remove the default positioning */
bottom: 0;
background-color: $primary-color;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.custom-slider .ngx-slider .ngx-slider-pointer:after {
display: none;
}
.custom-slider .ngx-slider .ngx-slider-bubble {
bottom: 14px;
font-weight: bold;
}
.custom-slider .ngx-slider .ngx-slider-limit {
font-weight: bold;
color: white !important;
}
.custom-slider .ngx-slider .ngx-slider-tick {
width: 1px;
height: 10px;
margin-left: 4px;
border-radius: 0;
background: #ffe4d1;
top: -1px;
}
.custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
background: $primary-color;
}
}

7
UI/Web/src/assets/themes/dark.scss
View file

@ -5,6 +5,7 @@ $dark-primary-color: rgba(74, 198, 148, 0.9);
$dark-text-color: #efefef;
$dark-hover-color: #4ac694;
$dark-form-background: rgba(1, 4, 9, 0.5);
$dark-form-background-no-opacity: rgb(1, 4, 9);
$dark-form-placeholder: #efefef;
$dark-link-color: rgb(88, 166, 255);
$dark-icon-color: white;
@ -30,6 +31,11 @@ $dark-item-accent-bg: #292d32;
color: white;
}
.accordion-header {
font-weight: bold;
color: $dark-primary-color;
}
.accent {
background-color: $dark-form-background !important;
@ -121,6 +127,7 @@ $dark-item-accent-bg: #292d32;
.dropdown-menu {
background-color: #171719;
.dropdown-item:hover, .dropdown-item:focus {
color: $dark-text-color;
background-color: $dark-hover-color;

48
UI/Web/src/styles.scss
View file

@ -51,54 +51,6 @@ body {
cursor: pointer;
}
// Slider handle override
::ng-deep {
.custom-slider .ngx-slider .ngx-slider-bar {
background: #ffe4d1;
height: 2px;
}
.custom-slider .ngx-slider .ngx-slider-selection {
background: orange;
}
.custom-slider .ngx-slider .ngx-slider-pointer {
width: 8px;
height: 16px;
top: auto; /* to remove the default positioning */
bottom: 0;
background-color: #333;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.custom-slider .ngx-slider .ngx-slider-pointer:after {
display: none;
}
.custom-slider .ngx-slider .ngx-slider-bubble {
bottom: 14px;
}
.custom-slider .ngx-slider .ngx-slider-limit {
font-weight: bold;
color: orange;
}
.custom-slider .ngx-slider .ngx-slider-tick {
width: 1px;
height: 10px;
margin-left: 4px;
border-radius: 0;
background: #ffe4d1;
top: -1px;
}
.custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
background: orange;
}
}
// Utiliities
@include media-breakpoint-down(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {