Infinite Scroll + List View + Cover Upload Redesign (#1319)

* Started with the redesign of the cover image chooser redesign to be less click intensive for volume/chapter images.

Made some headings bold in card detail drawer.

* Tweaked the styles

* Moved where the info cards show

* Added an ability to open a page settings drawer

* Cleaned up some old code that isn't needed anymore.

* Started implementing a list view. Refactored some title code to a dedicated component

* List view implemented but way too many API calls. Either need caching or adjusting the SeriesDetail api.

* Fixed a bug where if the progress bar didn't render on a card item while a download was in progress, the download indicator would be removed.

* Large refactor to move a lot of the needed fields to the chapter and volume dtos for series detail. All fields are noted when only used in series detail.

* Implemented cards for other tabs (except related)

* Fixed the unit test which needed a mocked reader service call.

* More cleanup around age rating and removing old code from the refactor. Commented out sorting till i feel motivated to work on that.

* Some cleanup and restored cards as initial layout. Time to test this out and see if there is value add.

* Added ability for Chapters tab to show the volume chapters belong to (if applicable)

* Adding style fixes

* Cover image updates, don't allow the first image (which is what is currently set) to respond to cover changes.

Hide the ID field on list item for series detail.

* Refactored the title for list item to be injectable

* Cleaned up the selection code to make it less finicky on mobile when tap scrolling.

* Refactored chapter tab to show volume as well on list view.

* Ensure word count shows for Volumes

* Started adding virtual scrolling, pushing up so Robbie can mess around

* Started adding virtual scrolling, pushing up so Robbie can mess around

* Fixed a bug where all chapters would come under specials

* Show title data as accent if set.

* Style fixes for virtual scroller

* Restyling scroll

* Implemented a way to show storyline with virtual scrolling

* Show Word Count for chapters and cleaned up some logics.

* I might have card layout working with virtual scroll code.

* Some cleanup to hide more system like properties from info bar on series detail page. Fixed some missing time estimate info on storyline chapters.

* Fixed a regression on series service when I integrated VolumeTitle.

* Refactored read time to the backend. Added WordCount to the volume itself so we don't need to calculate on frontend. When asking to analyze files from a series, force the calculation.

* Fixed SeriesDetail api code

* Fixed up the code in the drawer to better update list/card mode

* Basic infinite scroll implemented, however due to how we are updating the list to render, we are re-rending cards that haven't been touched.

* Updated how we render and layout data for infinite scroll on library detail. It's almost there.

* Started laying foundation for loading pages backwards.

Removed lazy loading of images since we are now using virtual paging.

* Hooked in some basic code to allow user to load a prev page with infinite scroll.

* Fixed up series detail api and undid the non-lazy loaded images.

Changed the router to help with this infinite loading on Firefox issue.

* Fixed up some naming issues with Series Detail and added a new test.

* This is an infinite scroll without pagination implementation. It is not fully done, but off to a good start. Virtual scroller with jump bar is working pretty well, def needs more polishing and tweaking. There are hacks in this implementation that need to be revisited.

* Refactored code so that we don't use any pagination and load all results by default.

* Misc code cleanup from build warnings.

* Cleaned up some logic for how to display titles in list view.

* More title cleanup for specials

* Hooked up page layout to user preferences and renamed an existing user pref name to match the dto.

* Swapped out everything but storyline with virtual-scroller over CDK

* Removed CDK from series detail.

* Default value for migration on page layout

* Updating card layout for library detail page

* fixing height for mobile

* Moved scrollbar

* Tweaked some styling for layouts when there is no data

* Refactored the series cards into their own component to make it re-usable.

* More tweaks on series info cards layout and enhanced a few pages with trackby functions.

* Removed some dead code

* Added download on series detail to actionables to fit in with new scroll strategy.

* Fixed language not being updated and sent to the backend for series update.

* Fixed a bad migration (if you ran any prior migration in this branch, you need to undo before you use this commit)

* Adding sticky tabs

* fixed mobile gap on sticky tab

* Enhanced the card title for books to show number up front.

* Adjusted the gutters on admin dashboard

* Removed debug code

* Removing duplicate book title

* Cleaned up old references to cdk scroller

* Implemented a basic jump bar scaling algorithm. Not perfect, but works pretty well.

* Code smells

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

API/Entities/AppUserPreferences.cs

@@ -1,4 +1,5 @@
 using API.Entities.Enums;
+using API.Entities.Enums.UserPreferences;
 
 namespace API.Entities
 {
@@ -81,13 +82,17 @@ namespace API.Entities
         /// 2 column is fit to height, 2 columns
         /// </summary>
         /// <remarks>Defaults to Default</remarks>
-        public BookPageLayoutMode PageLayoutMode { get; set; } = BookPageLayoutMode.Default;
+        public BookPageLayoutMode BookReaderLayoutMode { get; set; } = BookPageLayoutMode.Default;
         /// <summary>
         /// Book Reader Option: A flag that hides the menu-ing system behind a click on the screen. This should be used with tap to paginate, but the app doesn't enforce this.
         /// </summary>
         /// <remarks>Defaults to false</remarks>
         public bool BookReaderImmersiveMode { get; set; } = false;
-
+        /// <summary>
+        /// Global Site Option: If the UI should layout items as Cards or List items
+        /// </summary>
+        /// <remarks>Defaults to Cards</remarks>
+        public PageLayoutMode GlobalPageLayoutMode { get; set; } = PageLayoutMode.Cards;
 
         public AppUser AppUser { get; set; }
         public int AppUserId { get; set; }

API/Entities/Chapter.cs

@@ -3,10 +3,11 @@ using System.Collections.Generic;
 using API.Entities.Enums;
 using API.Entities.Interfaces;
 using API.Parser;
+using API.Services;
 
 namespace API.Entities
 {
-    public class Chapter : IEntityDate
+    public class Chapter : IEntityDate, IHasReadTimeEstimate
     {
         public int Id { get; set; }
         /// <summary>
@@ -24,7 +25,7 @@ namespace API.Entities
         public DateTime Created { get; set; }
         public DateTime LastModified { get; set; }
         /// <summary>
-        /// Absolute path to the (managed) image file
+        /// Relative path to the (managed) image file representing the cover image
         /// </summary>
         /// <remarks>The file is managed internally to Kavita's APPDIR</remarks>
         public string CoverImage { get; set; }
@@ -73,9 +74,16 @@ namespace API.Entities
         public int Count { get; set; } = 0;
 
         /// <summary>
-        /// Total words in a Chapter (books only)
+        /// Total Word count of all chapters in this chapter.
         /// </summary>
+        /// <remarks>Word Count is only available from EPUB files</remarks>
         public long WordCount { get; set; }
+        /// <inheritdoc cref="IHasReadTimeEstimate"/>
+        public int MinHoursToRead { get; set; }
+        /// <inheritdoc cref="IHasReadTimeEstimate"/>
+        public int MaxHoursToRead { get; set; }
+        /// <inheritdoc cref="IHasReadTimeEstimate"/>
+        public int AvgHoursToRead { get; set; }
 
 
         /// <summary>

API/Entities/Enums/PersonRole.cs

@@ -7,10 +7,6 @@
         /// </summary>
         Other = 1,
         /// <summary>
-        /// Artist
-        /// </summary>
-        //Artist = 2,
-        /// <summary>
         /// Author or Writer
         /// </summary>
         Writer = 3,

API/Entities/Enums/UserPreferences/PageLayoutMode.cs

@@ -0,0 +1,11 @@
+using System.ComponentModel;
+
+namespace API.Entities.Enums.UserPreferences;
+
+public enum PageLayoutMode
+{
+    [Description("Cards")]
+    Cards = 0,
+    [Description("List")]
+    List = 1
+}

API/Entities/Interfaces/IHasReadTimeEstimate.cs

@@ -0,0 +1,25 @@
+using API.Services;
+
+namespace API.Entities.Interfaces;
+
+/// <summary>
+/// Entity has read time estimate properties to estimate time to read
+/// </summary>
+public interface IHasReadTimeEstimate
+{
+    /// <summary>
+    /// Min hours to read the chapter
+    /// </summary>
+    /// <remarks>Uses a fixed number to calculate from <see cref="ReaderService"/></remarks>
+    public int MinHoursToRead { get; set; }
+    /// <summary>
+    /// Max hours to read the chapter
+    /// </summary>
+    /// <remarks>Uses a fixed number to calculate from <see cref="ReaderService"/></remarks>
+    public int MaxHoursToRead { get; set; }
+    /// <summary>
+    /// Average hours to read the chapter
+    /// </summary>
+    /// <remarks>Uses a fixed number to calculate from <see cref="ReaderService"/></remarks>
+    public int AvgHoursToRead { get; set; }
+}

API/Entities/Series.cs

@@ -6,7 +6,7 @@ using API.Entities.Metadata;
 
 namespace API.Entities;
 
-public class Series : IEntityDate
+public class Series : IEntityDate, IHasReadTimeEstimate
 {
     public int Id { get; set; }
     /// <summary>
@@ -66,10 +66,15 @@ public class Series : IEntityDate
     public DateTime LastChapterAdded { get; set; }
 
     /// <summary>
-    /// Total words in a Series (books only)
+    /// Total Word count of all chapters in this chapter.
     /// </summary>
+    /// <remarks>Word Count is only available from EPUB files</remarks>
     public long WordCount { get; set; }
 
+    public int MinHoursToRead { get; set; }
+    public int MaxHoursToRead { get; set; }
+    public int AvgHoursToRead { get; set; }
+
     public SeriesMetadata Metadata { get; set; }
 
     public ICollection<AppUserRating> Ratings { get; set; } = new List<AppUserRating>();
@@ -87,5 +92,4 @@ public class Series : IEntityDate
     public List<Volume> Volumes { get; set; }
     public Library Library { get; set; }
     public int LibraryId { get; set; }
-
 }

API/Entities/Volume.cs

@@ -1,11 +1,10 @@
 using System;
 using System.Collections.Generic;
 using API.Entities.Interfaces;
-using Microsoft.EntityFrameworkCore;
 
 namespace API.Entities
 {
-    public class Volume : IEntityDate
+    public class Volume : IEntityDate, IHasReadTimeEstimate
     {
         public int Id { get; set; }
         /// <summary>
@@ -25,12 +24,23 @@ namespace API.Entities
         /// </summary>
         /// <remarks>The file is managed internally to Kavita's APPDIR</remarks>
         public string CoverImage { get; set; }
+        /// <summary>
+        /// Total pages of all chapters in this volume
+        /// </summary>
         public int Pages { get; set; }
-
+        /// <summary>
+        /// Total Word count of all chapters in this volume.
+        /// </summary>
+        /// <remarks>Word Count is only available from EPUB files</remarks>
+        public long WordCount { get; set; }
+        public int MinHoursToRead { get; set; }
+        public int MaxHoursToRead { get; set; }
+        public int AvgHoursToRead { get; set; }
 
 
         // Relationships
         public Series Series { get; set; }
         public int SeriesId { get; set; }
+
     }
 }