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

Reading Lists & More (#564)

Browse source 
* 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
This commit is contained in:
Joseph Milazzo 2021-09-08 10:03:27 -07:00 • committed by GitHub
parent d65e49926a
commit cf7a9aa71e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
117 changed files with 7050 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

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

51
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';
@ -17,7 +18,8 @@ export enum Action {
RefreshMetadata = 6,
Download = 7,
Bookmarks = 8,
IncognitoRead = 9
IncognitoRead = 9,
AddToReadingList = 10
}
export interface ActionItem<T> {
@ -42,6 +44,8 @@ export class ActionFactoryService {
collectionTagActions: Array<ActionItem<CollectionTag>> = [];
readingListActions: Array<ActionItem<ReadingList>> = [];
isAdmin = false;
hasDownloadRole = false;
@ -113,6 +117,13 @@ export class ActionFactoryService {
callback: this.dummyCallback,
requiresAdmin: false
});
// this.readingListActions.push({
// action: Action.Promote, // Should I just use CollectionTag modal-like instead?
// title: 'Delete',
// callback: this.dummyCallback,
// requiresAdmin: true
// });
}
if (this.hasDownloadRole || this.isAdmin) {
@ -158,6 +169,11 @@ export class ActionFactoryService {
return this.collectionTagActions;
}
getReadingListActions(callback: (action: Action, readingList: ReadingList) => void) {
this.readingListActions.forEach(action => action.callback = callback);
return this.readingListActions;
}
filterBookmarksForFormat(action: ActionItem<Series>, series: Series) {
if (action.action === Action.Bookmarks && series?.format === MangaFormat.EPUB) return false;
return true;
@ -188,7 +204,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 = [
@ -204,6 +226,12 @@ 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',
@ -232,8 +260,23 @@ export class ActionFactoryService {
requiresAdmin: false
},
{
action: Action.IncognitoRead,
title: 'Read in Incognito',
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
},

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

@ -4,8 +4,11 @@ import { ToastrService } from 'ngx-toastr';
import { forkJoin, Subject } from 'rxjs';
import { take, takeUntil } 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,7 @@ 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;
/**
* Responsible for executing actions
@ -27,6 +31,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) { }
@ -217,4 +222,85 @@ export class ActionService implements OnDestroy {
});
}
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);
}
});
}
}

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

@ -1,6 +1,5 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ChapterInfo } from '../manga-reader/_models/chapter-info';
import { UtilityService } from '../shared/_services/utility.service';
@ -73,17 +72,23 @@ export class ReaderService {
return this.httpClient.post(this.baseUrl + 'reader/mark-volume-unread', {seriesId, volumeId});
}
getNextChapter(seriesId: number, volumeId: number, currentChapterId: number) {
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) {
@ -137,4 +142,37 @@ 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;
}
}

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

@ -0,0 +1,102 @@
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' });
}
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;
}
}

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

@ -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>

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;

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>

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

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

@ -67,7 +67,7 @@
<div class="col-10" style="margin-top: 9px">
<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" (click)="goToPage(maxPages - 1)" title="Go to last page">{{maxPages - 1}}</div>
</div>
<div class="table-of-contents">
<h3>Table of Contents</h3>
@ -77,18 +77,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>
@ -122,12 +122,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>

236
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',
@ -65,15 +67,30 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
chapterId!: number;
chapter!: Chapter;
/**
* If we should save progress or not
* 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;
@ -94,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
@ -122,6 +171,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
* Last seen progress part path
*/
lastSeenScrollPartPath: string = '';
/**
* Hack: Override background color for reader and restore it onDestroy
*/
@ -151,6 +203,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,
@ -274,6 +344,13 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
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) {
this.toggleDrawer();
@ -281,34 +358,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;
if (!this.incognitoMode) {
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'])
@ -353,7 +467,63 @@ 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();
} 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 + '")');
}
@ -572,7 +742,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();
}
@ -588,7 +765,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>

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

@ -83,6 +83,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
if (metadata) {
this.metadata = metadata;
this.settings.savedData = metadata.tags;
this.tags = metadata.tags;
}
});
@ -147,6 +148,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));
}

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>

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

@ -146,6 +146,7 @@ export class CardItemComponent implements OnInit, OnDestroy {
isPromoted() {
const tag = this.entity as CollectionTag;
// TODO: Validate if this works with reading lists
return tag.hasOwnProperty('promoted') && tag.promoted;
}
}

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

@ -78,6 +78,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;
}

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

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

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;

39
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,12 +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.
*/
@ -265,6 +274,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
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);
@ -365,6 +381,14 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
chapterInfo: this.readerService.getChapterInfo(this.seriesId, 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;
@ -387,13 +411,13 @@ 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;
@ -674,7 +698,7 @@ 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');
});
@ -697,7 +721,7 @@ 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');
});
@ -711,11 +735,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.chapterId = chapterId;
this.continuousChaptersStack.push(chapterId);
// Load chapter Id onto route but don't reload
const lastSlashIndex = this.router.url.lastIndexOf('/');
let newRoute = this.router.url.substring(0, lastSlashIndex + 1) + this.chapterId + '';
if (this.incognitoMode) {
newRoute += '?incognitoMode=true';
}
const newRoute = this.readerService.getNextChapterUrl(this.router.url, this.chapterId, this.incognitoMode, this.readingListMode, this.readingListId);
window.history.replaceState({}, '', newRoute);
this.init();
} else {
@ -734,7 +754,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
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;
const needsSplitting = this.canvasImage.width > this.canvasImage.height;

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

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

@ -0,0 +1,37 @@
<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>
<div class="modal-body">
<!-- TODO: Put filter here -->
<ul class="list-group">
<li class="list-group-item clickable" tabindex="0" role="button" *ngFor="let readingList of lists; let i = index" (click)="addToList(readingList)">
<!-- Think about using radio buttons maybe for screen reader-->
{{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">
<form style="width: 100%" [formGroup]="listForm">
<div class="form-row">
<div class="col-md-10">
<label class="sr-only" for="add-rlist">Reading List</label>
<input width="100%" #title ngbAutofocus type="text" class="form-control mb-2" id="add-rlist" formControlName="title">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" (click)="create()">Create</button>
</div>
</div>
</form>
</div>

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

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

@ -0,0 +1,90 @@
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 { 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
}
@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;
@Input() seriesId?: number;
@Input() volumeId?: number;
@Input() chapterId?: 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) { }
ngOnInit(): void {
this.listForm.addControl('title', new FormControl(this.title, []));
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.seriesId === undefined) return;
if (this.type === ADD_FLOW.Series) {
this.readingListService.updateBySeries(readingList.id, this.seriesId).subscribe(() => {
this.modal.close();
});
} else if (this.type === ADD_FLOW.Volume && this.volumeId !== undefined) {
this.readingListService.updateByVolume(readingList.id, this.seriesId, this.volumeId).subscribe(() => {
this.modal.close();
});
} else if (this.type === ADD_FLOW.Chapter && this.chapterId !== undefined) {
this.readingListService.updateByChapter(readingList.id, this.seriesId, this.chapterId).subscribe(() => {
this.modal.close();
});
}
}
}

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;
});
}
}

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

@ -0,0 +1,20 @@
<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>
<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" (keydown.enter)="updateIndex(i, item)" aria-describedby="instructions">
</div>
<ng-container style="display: inline-block" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<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>

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

@ -0,0 +1,53 @@
.example-list {
min-width: 500px;
max-width: 100%;
//border: solid 1px #ccc;
min-height: 60px;
display: block;
//background: white;
border-radius: 4px;
overflow: hidden;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
//color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
//align-items: center;
//justify-content: space-between;
box-sizing: border-box;
//background: white;
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
});
}
}

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

@ -0,0 +1,58 @@
<div class="container mt-2" *ngIf="readingList">
<div class="row mb-3">
<div class="col-md-10 col-xs-8 col-sm-6">
<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>
<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>
<p class="mt-2" *ngIf="readingList.summary.length > 0">{{readingList.summary}}</p>
</div>
</div>
<div *ngIf="items.length === 0">
No chapters added
</div>
<!-- NOTE: It might be nice to have a switch for the accessibility toggle -->
<app-dragable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" (itemRemove)="itemRemoved($event)">
<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)}}</h5>
<i class="fa {{utilityService.mangaFormatIcon(item.seriesFormat)}}" aria-hidden="true" *ngIf="item.seriesFormat != MangaFormat.UNKNOWN" title="{{utilityService.mangaFormat(item.seriesFormat)}}"></i><span class="sr-only">{{utilityService.mangaFormat(item.seriesFormat)}}</span>&nbsp;
<a href="/library/{{item.libraryId}}/series/{{item.seriesId}}">{{item.seriesName}}</a>
<span *ngIf="item.promoted">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</span>
</div>
<div class="pull-right" *ngIf="item.pagesRead === item.pagesTotal"><i class="fa fa-check-square" aria-label="Read"></i></div>
</div>
</ng-template>
</app-dragable-ordered-list>
</div>

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

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

@ -0,0 +1,153 @@
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 { ReaderService } from 'src/app/_services/reader.service';
import { ReadingListService } from 'src/app/_services/reading-list.service';
import { IndexUpdateEvent, ItemRemoveEvent } from '../dragable-ordered-list/dragable-ordered-list.component';
@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;
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.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}});
}
}
}

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

@ -0,0 +1,36 @@
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';
@NgModule({
declarations: [
DragableOrderedListComponent,
ReadingListDetailComponent,
AddToListModalComponent,
ReadingListsComponent,
EditReadingListModalComponent
],
imports: [
CommonModule,
ReadingListRoutingModule,
ReactiveFormsModule,
DragDropModule,
CardsModule
],
exports: [
AddToListModalComponent,
ReadingListsComponent,
EditReadingListModalComponent
]
})
export class ReadingListModule { }

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

@ -0,0 +1,24 @@
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], // TODO: Add a guard if they have access to said :id
children: [
{path: '', component: ReadingListDetailComponent, pathMatch: 'full'},
{path: ':id', component: ReadingListDetailComponent, pathMatch: 'full'},
// {path: ':id', component: CollectionDetailComponent},
]
}
];
@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

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

@ -0,0 +1,88 @@
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 { 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) { }
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();
});
}
}
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);
}
}

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

@ -99,7 +99,7 @@
<div>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav-tabs" [destroyOnHide]="false">
<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>

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

@ -159,6 +159,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 +178,9 @@ 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);
@ -196,6 +202,9 @@ 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;

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

28
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>
@ -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!

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

@ -30,6 +30,11 @@ $dark-item-accent-bg: #292d32;
color: white;
}
.accordion-header {
font-weight: bold;
color: $dark-primary-color;
}
.accent {
background-color: $dark-form-background !important;