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

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

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

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

* Cleanup old code from UserRepository.cs

* Refactored OPDS to use faster API lookups for User

* Refactored more code to be cleaner and faster.

* Refactored GetNext/Prev ChapterIds to ReaderService.

* Refactored Repository methods to their correct entity repos.

* Refactored DTOs and overall cleanup of the code.

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

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

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

* Cleaned up scroll code

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

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

* Removed some comments

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

* Added a benchmark to test out a sort code

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

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

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

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

* Removed ability to download reading lists

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

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

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

* More polishing on infinite scroller

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

* Cont Reading inf scroller edition is done.

* Code smells and fixed package.json explore script

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

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

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

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

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

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

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

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

UI/Web/src/app/reading-list/reading-list.module.ts

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

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

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

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

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