From 83ac8bd7334cf81750cfd98cdc7bc49a465a4bd3 Mon Sep 17 00:00:00 2001 From: Joe Milazzo Date: Tue, 13 Dec 2022 12:00:54 -0600 Subject: [PATCH] Reader Refactor Part 2 (#1694) * Updated swiper and some packages for reported security issues * Fixed reading lists promotion not working * Refactor RenameFileForCopy to use iterative recursion, rather than functional. * Ensured that bookmarks are fetched and ordered by Created date. * Fixed a bug where bookmarks were coming back in the correct order, but due to filenames, would not sort correctly. * Default installs to Debug log level given errors users have and Debug not being too noisy * Added jumpbar to bookmarks page * Now added jumpbar to bookmarks * Refactored some code into pipes and added some debug messaging for prefetcher * Try loading next and prev chapter's first/last page to cache so it renders faster * Updated GetImage to do a bound check on max page. Fixed a critical bug in how manga reader updates image elements src to prefetch/load pages. I was not creating a new reference which broke Angular's ability to update DOM on changes. * Refactored the image setting code to use a single method which tries to use a cached image always. * Refactored code to use getPage which favors cache and simplifies image creation code * Started the work to split the canvas renderer into it's own component * Refactored a lot of common methods into a service for the reader to support the upcoming renderer split * Moved components to nested folder. Refactored more code to streamline image sending to child renderer. Added notes across the code to help streamline flow of data and who owns what. * Swapped out SQLite for Memory, but the one from hangfire. Added DisableConcurrentExecution on ProcessChange to avoid duplication when multiple threads execute at once. * Basic split right to left is working with canvas renderer * Left to right and right to left now work * Fixed a bug where pagesplitoption wasn't being updated when modifying menu * Canvas rendering still has a bug with switching between right to left -> left to right on the re-render, it will choose a bad state. All else works fine with it. * Updated canvas renderer to implement the ImageRenderer interface * Canvas renderer is done * Setup single renderer. Need to figure out how to share CSS between renderers and also share some global stuff, like image height. * Refactored code so that image-container is within the renderers themselves. Still broken in scaling, but working towards a solution. * Added double click to shortcut menu * Moved image containers within the renderers * Pushing up for Robbie * nothing new * Move common css to a single scss file * More css consolidation * Fixed a npe in isWideImage * Refactored page updates to renderers to include max pages. Rewrote most of renderer into observables. * Moved bookmark for second page to double renderer * Started hooking in double renderer renderPage() * Fixed height scaling, but now canvas renderer is broken again * Fixed a bug with canvas renderer not moving to next page. Streamlined the code for getting page amounts from the dfferent renderers * Added double click to bookmark for canvas * Stashing the code and taking a break * Nothing much, buffer is still broken * Got double renderer to render at least one page * Double renderer now has access to 5 images at any time, so it can make appropriate decisions on when to render double pages. * Fixed up double rendererer moving backward page calc * Forward logic seems to be working * Cleaned up dead code after testing * Moved a few loggers in folder watching to trace * Everything seems to work fine, time to do double manga renderer * Moved some css around and added the reverse double component * Only execute renderer's pipes when in the correct mode * Still working on double renderer * Fixed scaling issues on double * Updating double logic - Fixed: Fixed an issue where a second page would render when current page was wide. * Hooked up double renderer * Made changes but not sure if im making progress * double manga fixes * Claned some of robbies code * Fixing last page bug * Library Settings Modal + New Library Settings (#1660) * Bump loader-utils from 2.0.3 to 2.0.4 in /UI/Web Bumps [loader-utils](https://github.com/webpack/loader-utils) from 2.0.3 to 2.0.4. - [Release notes](https://github.com/webpack/loader-utils/releases) - [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.4/CHANGELOG.md) - [Commits](https://github.com/webpack/loader-utils/compare/v2.0.3...v2.0.4) --- updated-dependencies: - dependency-name: loader-utils dependency-type: indirect ... Signed-off-by: dependabot[bot] * Fixed want to read button on series detail not performing the correct action * Started the library settings. Added ability to update a cover image for a library. Updated backup db to also copy reading list (and now library) cover images. * Integrated Edit Library into new settings (not tested) and hooked up a wizard-like flow for new library. * Fixed a missing update event in backend when updating a library. * Disable Save when form invalid. Do inline validation on Library name when user types to ensure the name is valid. * Trim library names before you check anything * General code cleanup * Implemented advanced settings for library (include in dashboard, search, recommended) and ability to turn off folder watching for individual libraries. Refactored some code to streamline perf in some flows. * Removed old components replaced with new modal * Code smells Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump versions by dotnet-bump-version. * UX Alignment and bugfixes (#1663) * Refactored the design of reading list page to follow more in line with list view. Added release date on the reading list items, if it's set in underlying chapter. Fixed a bug where reordering the list items could sometimes not update correctly with drag and drop. * Removed a bug marker that I just fixed * When generating library covers, make them much smaller as they are only ever icons. * Fixed library settings not showing the correct image. * Fixed a bug where duplicate collection tags could be created. Fixed a bug where collection tag normalized title was being set to uppercase. Redesigned the edit collection tag modal to align with new library settings and provide inline name checks. * Updated edit reading list modal to align with new library settings modal pattern. Refactored the backend to ensure it flows correctly without allowing duplicate names. Don't show Continue point on series detail if the whole series is read. * Added some more unit tests around continue point * Fixed a bug on series detail when bulk selecting between volume and chapters, the code which determines which chapters are selected didn't take into account mixed layout for Storyline tab. * Refactored to generate an OpenAPI spec at root of Kavita. This will be loaded by a new API site for easy hosting. Deprecated EnableSwaggerUi preference as after validation new system works, this will be removed and instances can use our hosting to hit their server (or run a debug build). * Test GA * Reverted GA and instead do it in the build step. This will just force developers to commit it in. * GA please work * Removed redundant steps from test since build already does it. * Try another GA * Moved all test actions into initial build step, which should drastically cut down on time. Only run sonar if the secret is present (so not for forks). Updated build requirements for develop and stable docker pushes. * Fixed env variable * Okay not possible to do secrets in if statement * Fixed the build step to output the openapi.json where it's expected. * Fixed GA (#1664) * Bump versions by dotnet-bump-version. * Applied new _components layout structure to Kavita. All except manga as there is an open PR that drastically changes that module. (#1666) * Fixed typeahead and updated manga reader to new layout structure * Fixed book reader fonts lookups * Fixed up some build issues * Fixed a bad import of css image * Some cleanup and rewrote how we log out data. * Renderer can be null on first load when performing some work. * Library Settings Modal + New Library Settings (#1660) * Bump loader-utils from 2.0.3 to 2.0.4 in /UI/Web Bumps [loader-utils](https://github.com/webpack/loader-utils) from 2.0.3 to 2.0.4. - [Release notes](https://github.com/webpack/loader-utils/releases) - [Changelog](https://github.com/webpack/loader-utils/blob/v2.0.4/CHANGELOG.md) - [Commits](https://github.com/webpack/loader-utils/compare/v2.0.3...v2.0.4) --- updated-dependencies: - dependency-name: loader-utils dependency-type: indirect ... Signed-off-by: dependabot[bot] * Fixed want to read button on series detail not performing the correct action * Started the library settings. Added ability to update a cover image for a library. Updated backup db to also copy reading list (and now library) cover images. * Integrated Edit Library into new settings (not tested) and hooked up a wizard-like flow for new library. * Fixed a missing update event in backend when updating a library. * Disable Save when form invalid. Do inline validation on Library name when user types to ensure the name is valid. * Trim library names before you check anything * General code cleanup * Implemented advanced settings for library (include in dashboard, search, recommended) and ability to turn off folder watching for individual libraries. Refactored some code to streamline perf in some flows. * Removed old components replaced with new modal * Code smells Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * UX Alignment and bugfixes (#1663) * Refactored the design of reading list page to follow more in line with list view. Added release date on the reading list items, if it's set in underlying chapter. Fixed a bug where reordering the list items could sometimes not update correctly with drag and drop. * Removed a bug marker that I just fixed * When generating library covers, make them much smaller as they are only ever icons. * Fixed library settings not showing the correct image. * Fixed a bug where duplicate collection tags could be created. Fixed a bug where collection tag normalized title was being set to uppercase. Redesigned the edit collection tag modal to align with new library settings and provide inline name checks. * Updated edit reading list modal to align with new library settings modal pattern. Refactored the backend to ensure it flows correctly without allowing duplicate names. Don't show Continue point on series detail if the whole series is read. * Added some more unit tests around continue point * Fixed a bug on series detail when bulk selecting between volume and chapters, the code which determines which chapters are selected didn't take into account mixed layout for Storyline tab. * Refactored to generate an OpenAPI spec at root of Kavita. This will be loaded by a new API site for easy hosting. Deprecated EnableSwaggerUi preference as after validation new system works, this will be removed and instances can use our hosting to hit their server (or run a debug build). * Test GA * Reverted GA and instead do it in the build step. This will just force developers to commit it in. * GA please work * Removed redundant steps from test since build already does it. * Try another GA * Moved all test actions into initial build step, which should drastically cut down on time. Only run sonar if the secret is present (so not for forks). Updated build requirements for develop and stable docker pushes. * Fixed env variable * Okay not possible to do secrets in if statement * Fixed the build step to output the openapi.json where it's expected. * Applied new _components layout structure to Kavita. All except manga as there is an open PR that drastically changes that module. (#1666) * Post merge cleanup * Again moving the file * Fixed an issue with switching to double renderer and the image not loading for cover image. * Fixed double manga last page repeating twice * Added ability to quickly save a few settings to user preferences from manga reader * Fixed up some success messaging * Single image and canvas could stack, last page on double wouldn't render. * Stashing code, want to work on something else * Suppress a concurrency issue when opening a fresh chapter to read. * Refactored a function into a pipe * Took care of one TODO * Tightened up the logic around single renderer handling fit to screen images. * Added some code to see how long api takes on average. * First pass integration of page dimensions into single renderer and base code * Canvas renderer pass for new page dimensions * On time left, don't use the word left again * Moved the page dimension code into manga service to make it seemless * Hooked in a replacement for image based isWide * Canvas renderer is working again * Double renderer now follows how Komga does it to keep it simple. * Double renderer is working really well so far. * don't use nbsp * Added response caching to file-dimensions and chapter info api * Allow chapter info to send back file dimensions optionally * Fixed an issue with dimensions api locking files on Windows * Refactored all code to use isWidePage * More fixes and cleanup * More double reverse logic * Recently Read stats page will allow you to click the items. Signed-off-by: dependabot[bot] Co-authored-by: Robbie Davis Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- API/API.csproj | 6 +- API/Controllers/ReaderController.cs | 6 +- API/Controllers/UsersController.cs | 1 + API/DTOs/Reader/ChapterInfoDto.cs | 2 + API/DTOs/UserPreferencesDto.cs | 5 + ...20221212215914_EmulateBookPref.Designer.cs | 1705 +++++++++++++++++ .../20221212215914_EmulateBookPref.cs | 26 + .../Migrations/DataContextModelSnapshot.cs | 3 + API/Entities/AppUserPreferences.cs | 4 + API/Services/ArchiveService.cs | 1 + API/Services/CacheService.cs | 5 +- API/Services/ReaderService.cs | 9 +- UI/Web/src/_manga-reader-common.scss | 29 + .../app/_models/preferences/preferences.ts | 1 + .../src/app/_services/message-hub.service.ts | 7 - UI/Web/src/app/_services/reader.service.ts | 9 +- .../directory-picker.component.html | 2 +- .../manage-email-settings.component.html | 2 +- .../cards/card-item/card-item.component.html | 4 +- .../series-info-cards.component.html | 2 +- .../canvas-renderer.component.html | 2 +- .../canvas-renderer.component.scss | 3 +- .../canvas-renderer.component.ts | 24 +- .../double-renderer.component.html | 4 +- .../double-renderer.component.scss | 1 + .../double-renderer.component.ts | 175 +- .../double-reverse-renderer.component.html | 6 +- .../double-reverse-renderer.component.ts | 317 +-- .../infinite-scroller.component.ts | 2 - .../manga-reader/manga-reader.component.html | 43 +- .../manga-reader/manga-reader.component.scss | 60 - .../manga-reader/manga-reader.component.ts | 239 +-- .../single-renderer.component.html | 22 +- .../single-renderer.component.ts | 52 +- .../app/manga-reader/_models/chapter-info.ts | 5 + .../manga-reader/_models/file-dimension.ts | 4 +- .../manga-reader/_models/reader-setting.ts | 1 + .../src/app/manga-reader/_models/renderer.ts | 2 +- .../manga-reader/_pipes/fitting-icon.pipe.ts | 21 + .../_series/managa-reader.service.ts | 60 +- .../app/manga-reader/manga-reader.module.ts | 2 + .../src/app/manga-reader/swipe.directive.ts | 4 +- .../series-detail.component.html | 4 +- .../library-settings-modal.component.html | 3 + .../server-stats/server-stats.component.html | 2 +- .../server-stats/server-stats.component.ts | 11 +- .../stat-list/stat-list.component.html | 2 +- .../stat-list/stat-list.component.scss | 5 + .../stat-list/stat-list.component.ts | 10 + .../user-preferences.component.html | 14 +- .../user-preferences.component.ts | 6 +- openapi.json | 27 +- 52 files changed, 2261 insertions(+), 701 deletions(-) create mode 100644 API/Data/Migrations/20221212215914_EmulateBookPref.Designer.cs create mode 100644 API/Data/Migrations/20221212215914_EmulateBookPref.cs create mode 100644 UI/Web/src/app/manga-reader/_pipes/fitting-icon.pipe.ts diff --git a/API/API.csproj b/API/API.csproj index 652e37a6c..f1b6b43b7 100644 --- a/API/API.csproj +++ b/API/API.csproj @@ -8,10 +8,10 @@ true true - + - - + + false diff --git a/API/Controllers/ReaderController.cs b/API/Controllers/ReaderController.cs index b020a3450..6322718e6 100644 --- a/API/Controllers/ReaderController.cs +++ b/API/Controllers/ReaderController.cs @@ -161,6 +161,7 @@ public class ReaderController : BaseApiController /// /// [HttpGet("file-dimensions")] + [ResponseCache(CacheProfileName = ResponseCacheProfiles.Hour, VaryByQueryKeys = new []{"chapterId", "extractPdf"})] public async Task>> GetFileDimensions(int chapterId, bool extractPdf = false) { if (chapterId <= 0) return null; @@ -174,9 +175,11 @@ public class ReaderController : BaseApiController /// /// /// Should Kavita extract pdf into images. Defaults to false. + /// Include file dimensions. Only useful for image based reading /// [HttpGet("chapter-info")] - public async Task> GetChapterInfo(int chapterId, bool extractPdf = false) + [ResponseCache(CacheProfileName = ResponseCacheProfiles.Hour, VaryByQueryKeys = new []{"chapterId", "extractPdf", "includeDimensions"})] + public async Task> GetChapterInfo(int chapterId, bool extractPdf = false, bool includeDimensions = false) { if (chapterId <= 0) return null; // This can happen occasionally from UI, we should just ignore var chapter = await _cacheService.Ensure(chapterId, extractPdf); @@ -201,6 +204,7 @@ public class ReaderController : BaseApiController ChapterTitle = dto.ChapterTitle ?? string.Empty, Subtitle = string.Empty, Title = dto.SeriesName, + PageDimensions = _cacheService.GetCachedFileDimensions(chapterId) }; if (info.ChapterTitle is {Length: > 0}) { diff --git a/API/Controllers/UsersController.cs b/API/Controllers/UsersController.cs index 6636bf519..1738ea539 100644 --- a/API/Controllers/UsersController.cs +++ b/API/Controllers/UsersController.cs @@ -85,6 +85,7 @@ public class UsersController : BaseApiController existingPreferences.PageSplitOption = preferencesDto.PageSplitOption; existingPreferences.AutoCloseMenu = preferencesDto.AutoCloseMenu; existingPreferences.ShowScreenHints = preferencesDto.ShowScreenHints; + existingPreferences.EmulateBook = preferencesDto.EmulateBook; existingPreferences.ReaderMode = preferencesDto.ReaderMode; existingPreferences.LayoutMode = preferencesDto.LayoutMode; existingPreferences.BackgroundColor = string.IsNullOrEmpty(preferencesDto.BackgroundColor) ? "#000000" : preferencesDto.BackgroundColor; diff --git a/API/DTOs/Reader/ChapterInfoDto.cs b/API/DTOs/Reader/ChapterInfoDto.cs index 842add713..6945c2b24 100644 --- a/API/DTOs/Reader/ChapterInfoDto.cs +++ b/API/DTOs/Reader/ChapterInfoDto.cs @@ -66,4 +66,6 @@ public class ChapterInfoDto : IChapterInfoDto /// Usually just series name, but can include chapter title public string Title { get; set; } + public IEnumerable PageDimensions { get; set; } + } diff --git a/API/DTOs/UserPreferencesDto.cs b/API/DTOs/UserPreferencesDto.cs index 6e5d51442..5667f1634 100644 --- a/API/DTOs/UserPreferencesDto.cs +++ b/API/DTOs/UserPreferencesDto.cs @@ -37,6 +37,11 @@ public class UserPreferencesDto [Required] public LayoutMode LayoutMode { get; set; } /// + /// Manga Reader Option: Emulate a book by applying a shadow effect on the pages + /// + [Required] + public bool EmulateBook { get; set; } + /// /// Manga Reader Option: Background color of the reader /// [Required] diff --git a/API/Data/Migrations/20221212215914_EmulateBookPref.Designer.cs b/API/Data/Migrations/20221212215914_EmulateBookPref.Designer.cs new file mode 100644 index 000000000..431307ba2 --- /dev/null +++ b/API/Data/Migrations/20221212215914_EmulateBookPref.Designer.cs @@ -0,0 +1,1705 @@ +// +using System; +using API.Data; +using Microsoft.EntityFrameworkCore; +using Microsoft.EntityFrameworkCore.Infrastructure; +using Microsoft.EntityFrameworkCore.Migrations; +using Microsoft.EntityFrameworkCore.Storage.ValueConversion; + +#nullable disable + +namespace API.Data.Migrations +{ + [DbContext(typeof(DataContext))] + [Migration("20221212215914_EmulateBookPref")] + partial class EmulateBookPref + { + protected override void BuildTargetModel(ModelBuilder modelBuilder) + { +#pragma warning disable 612, 618 + modelBuilder.HasAnnotation("ProductVersion", "6.0.10"); + + modelBuilder.Entity("API.Entities.AppRole", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ConcurrencyStamp") + .IsConcurrencyToken() + .HasColumnType("TEXT"); + + b.Property("Name") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.Property("NormalizedName") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("NormalizedName") + .IsUnique() + .HasDatabaseName("RoleNameIndex"); + + b.ToTable("AspNetRoles", (string)null); + }); + + modelBuilder.Entity("API.Entities.AppUser", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AccessFailedCount") + .HasColumnType("INTEGER"); + + b.Property("AgeRestriction") + .HasColumnType("INTEGER"); + + b.Property("AgeRestrictionIncludeUnknowns") + .HasColumnType("INTEGER"); + + b.Property("ApiKey") + .HasColumnType("TEXT"); + + b.Property("ConcurrencyStamp") + .IsConcurrencyToken() + .HasColumnType("TEXT"); + + b.Property("ConfirmationToken") + .HasColumnType("TEXT"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("Email") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.Property("EmailConfirmed") + .HasColumnType("INTEGER"); + + b.Property("LastActive") + .HasColumnType("TEXT"); + + b.Property("LockoutEnabled") + .HasColumnType("INTEGER"); + + b.Property("LockoutEnd") + .HasColumnType("TEXT"); + + b.Property("NormalizedEmail") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.Property("NormalizedUserName") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.Property("PasswordHash") + .HasColumnType("TEXT"); + + b.Property("PhoneNumber") + .HasColumnType("TEXT"); + + b.Property("PhoneNumberConfirmed") + .HasColumnType("INTEGER"); + + b.Property("RowVersion") + .IsConcurrencyToken() + .HasColumnType("INTEGER"); + + b.Property("SecurityStamp") + .HasColumnType("TEXT"); + + b.Property("TwoFactorEnabled") + .HasColumnType("INTEGER"); + + b.Property("UserName") + .HasMaxLength(256) + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("NormalizedEmail") + .HasDatabaseName("EmailIndex"); + + b.HasIndex("NormalizedUserName") + .IsUnique() + .HasDatabaseName("UserNameIndex"); + + b.ToTable("AspNetUsers", (string)null); + }); + + modelBuilder.Entity("API.Entities.AppUserBookmark", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("ChapterId") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("FileName") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("Page") + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("VolumeId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.ToTable("AppUserBookmark"); + }); + + modelBuilder.Entity("API.Entities.AppUserPreferences", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("AutoCloseMenu") + .HasColumnType("INTEGER"); + + b.Property("BackgroundColor") + .ValueGeneratedOnAdd() + .HasColumnType("TEXT") + .HasDefaultValue("#000000"); + + b.Property("BlurUnreadSummaries") + .HasColumnType("INTEGER"); + + b.Property("BookReaderFontFamily") + .HasColumnType("TEXT"); + + b.Property("BookReaderFontSize") + .HasColumnType("INTEGER"); + + b.Property("BookReaderImmersiveMode") + .HasColumnType("INTEGER"); + + b.Property("BookReaderLayoutMode") + .HasColumnType("INTEGER"); + + b.Property("BookReaderLineSpacing") + .HasColumnType("INTEGER"); + + b.Property("BookReaderMargin") + .HasColumnType("INTEGER"); + + b.Property("BookReaderReadingDirection") + .HasColumnType("INTEGER"); + + b.Property("BookReaderTapToPaginate") + .HasColumnType("INTEGER"); + + b.Property("BookThemeName") + .ValueGeneratedOnAdd() + .HasColumnType("TEXT") + .HasDefaultValue("Dark"); + + b.Property("EmulateBook") + .HasColumnType("INTEGER"); + + b.Property("GlobalPageLayoutMode") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER") + .HasDefaultValue(0); + + b.Property("LayoutMode") + .HasColumnType("INTEGER"); + + b.Property("NoTransitions") + .HasColumnType("INTEGER"); + + b.Property("PageSplitOption") + .HasColumnType("INTEGER"); + + b.Property("PromptForDownloadSize") + .HasColumnType("INTEGER"); + + b.Property("ReaderMode") + .HasColumnType("INTEGER"); + + b.Property("ReadingDirection") + .HasColumnType("INTEGER"); + + b.Property("ScalingOption") + .HasColumnType("INTEGER"); + + b.Property("ShowScreenHints") + .HasColumnType("INTEGER"); + + b.Property("ThemeId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId") + .IsUnique(); + + b.HasIndex("ThemeId"); + + b.ToTable("AppUserPreferences"); + }); + + modelBuilder.Entity("API.Entities.AppUserProgress", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("BookScrollId") + .HasColumnType("TEXT"); + + b.Property("ChapterId") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("LibraryId") + .HasColumnType("INTEGER"); + + b.Property("PagesRead") + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("VolumeId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.HasIndex("SeriesId"); + + b.ToTable("AppUserProgresses"); + }); + + modelBuilder.Entity("API.Entities.AppUserRating", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("Rating") + .HasColumnType("INTEGER"); + + b.Property("Review") + .HasColumnType("TEXT"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.HasIndex("SeriesId"); + + b.ToTable("AppUserRating"); + }); + + modelBuilder.Entity("API.Entities.AppUserRole", b => + { + b.Property("UserId") + .HasColumnType("INTEGER"); + + b.Property("RoleId") + .HasColumnType("INTEGER"); + + b.HasKey("UserId", "RoleId"); + + b.HasIndex("RoleId"); + + b.ToTable("AspNetUserRoles", (string)null); + }); + + modelBuilder.Entity("API.Entities.Chapter", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AgeRating") + .HasColumnType("INTEGER"); + + b.Property("AvgHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("Count") + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("CoverImageLocked") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("IsSpecial") + .HasColumnType("INTEGER"); + + b.Property("Language") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("MaxHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("MinHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("Number") + .HasColumnType("TEXT"); + + b.Property("Pages") + .HasColumnType("INTEGER"); + + b.Property("Range") + .HasColumnType("TEXT"); + + b.Property("ReleaseDate") + .HasColumnType("TEXT"); + + b.Property("Summary") + .HasColumnType("TEXT"); + + b.Property("Title") + .HasColumnType("TEXT"); + + b.Property("TitleName") + .HasColumnType("TEXT"); + + b.Property("TotalCount") + .HasColumnType("INTEGER"); + + b.Property("VolumeId") + .HasColumnType("INTEGER"); + + b.Property("WordCount") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("VolumeId"); + + b.ToTable("Chapter"); + }); + + modelBuilder.Entity("API.Entities.CollectionTag", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("CoverImageLocked") + .HasColumnType("INTEGER"); + + b.Property("NormalizedTitle") + .HasColumnType("TEXT"); + + b.Property("Promoted") + .HasColumnType("INTEGER"); + + b.Property("RowVersion") + .HasColumnType("INTEGER"); + + b.Property("Summary") + .HasColumnType("TEXT"); + + b.Property("Title") + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("Id", "Promoted") + .IsUnique(); + + b.ToTable("CollectionTag"); + }); + + modelBuilder.Entity("API.Entities.Device", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("EmailAddress") + .HasColumnType("TEXT"); + + b.Property("IpAddress") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("LastUsed") + .HasColumnType("TEXT"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("Platform") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.ToTable("Device"); + }); + + modelBuilder.Entity("API.Entities.FolderPath", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("LastScanned") + .HasColumnType("TEXT"); + + b.Property("LibraryId") + .HasColumnType("INTEGER"); + + b.Property("Path") + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("LibraryId"); + + b.ToTable("FolderPath"); + }); + + modelBuilder.Entity("API.Entities.Genre", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ExternalTag") + .HasColumnType("INTEGER"); + + b.Property("NormalizedTitle") + .HasColumnType("TEXT"); + + b.Property("Title") + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("NormalizedTitle", "ExternalTag") + .IsUnique(); + + b.ToTable("Genre"); + }); + + modelBuilder.Entity("API.Entities.Library", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("FolderWatching") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER") + .HasDefaultValue(true); + + b.Property("IncludeInDashboard") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER") + .HasDefaultValue(true); + + b.Property("IncludeInRecommended") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER") + .HasDefaultValue(true); + + b.Property("IncludeInSearch") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER") + .HasDefaultValue(true); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("LastScanned") + .HasColumnType("TEXT"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("Type") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.ToTable("Library"); + }); + + modelBuilder.Entity("API.Entities.MangaFile", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("Bytes") + .HasColumnType("INTEGER"); + + b.Property("ChapterId") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("Extension") + .HasColumnType("TEXT"); + + b.Property("FilePath") + .HasColumnType("TEXT"); + + b.Property("Format") + .HasColumnType("INTEGER"); + + b.Property("LastFileAnalysis") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("Pages") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("ChapterId"); + + b.ToTable("MangaFile"); + }); + + modelBuilder.Entity("API.Entities.Metadata.SeriesMetadata", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AgeRating") + .HasColumnType("INTEGER"); + + b.Property("AgeRatingLocked") + .HasColumnType("INTEGER"); + + b.Property("CharacterLocked") + .HasColumnType("INTEGER"); + + b.Property("ColoristLocked") + .HasColumnType("INTEGER"); + + b.Property("CoverArtistLocked") + .HasColumnType("INTEGER"); + + b.Property("EditorLocked") + .HasColumnType("INTEGER"); + + b.Property("GenresLocked") + .HasColumnType("INTEGER"); + + b.Property("InkerLocked") + .HasColumnType("INTEGER"); + + b.Property("Language") + .HasColumnType("TEXT"); + + b.Property("LanguageLocked") + .HasColumnType("INTEGER"); + + b.Property("LettererLocked") + .HasColumnType("INTEGER"); + + b.Property("MaxCount") + .HasColumnType("INTEGER"); + + b.Property("PencillerLocked") + .HasColumnType("INTEGER"); + + b.Property("PublicationStatus") + .HasColumnType("INTEGER"); + + b.Property("PublicationStatusLocked") + .HasColumnType("INTEGER"); + + b.Property("PublisherLocked") + .HasColumnType("INTEGER"); + + b.Property("ReleaseYear") + .HasColumnType("INTEGER"); + + b.Property("ReleaseYearLocked") + .HasColumnType("INTEGER"); + + b.Property("RowVersion") + .IsConcurrencyToken() + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("Summary") + .HasColumnType("TEXT"); + + b.Property("SummaryLocked") + .HasColumnType("INTEGER"); + + b.Property("TagsLocked") + .HasColumnType("INTEGER"); + + b.Property("TotalCount") + .HasColumnType("INTEGER"); + + b.Property("TranslatorLocked") + .HasColumnType("INTEGER"); + + b.Property("WriterLocked") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("SeriesId") + .IsUnique(); + + b.HasIndex("Id", "SeriesId") + .IsUnique(); + + b.ToTable("SeriesMetadata"); + }); + + modelBuilder.Entity("API.Entities.Metadata.SeriesRelation", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("RelationKind") + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("TargetSeriesId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("SeriesId"); + + b.HasIndex("TargetSeriesId"); + + b.ToTable("SeriesRelation"); + }); + + modelBuilder.Entity("API.Entities.Person", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("NormalizedName") + .HasColumnType("TEXT"); + + b.Property("Role") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.ToTable("Person"); + }); + + modelBuilder.Entity("API.Entities.ReadingList", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AgeRating") + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("CoverImageLocked") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("NormalizedTitle") + .HasColumnType("TEXT"); + + b.Property("Promoted") + .HasColumnType("INTEGER"); + + b.Property("Summary") + .HasColumnType("TEXT"); + + b.Property("Title") + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.ToTable("ReadingList"); + }); + + modelBuilder.Entity("API.Entities.ReadingListItem", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ChapterId") + .HasColumnType("INTEGER"); + + b.Property("Order") + .HasColumnType("INTEGER"); + + b.Property("ReadingListId") + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("VolumeId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("ChapterId"); + + b.HasIndex("ReadingListId"); + + b.HasIndex("SeriesId"); + + b.HasIndex("VolumeId"); + + b.ToTable("ReadingListItem"); + }); + + modelBuilder.Entity("API.Entities.Series", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AppUserId") + .HasColumnType("INTEGER"); + + b.Property("AvgHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("CoverImageLocked") + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("FolderPath") + .HasColumnType("TEXT"); + + b.Property("Format") + .HasColumnType("INTEGER"); + + b.Property("LastChapterAdded") + .HasColumnType("TEXT"); + + b.Property("LastFolderScanned") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("LibraryId") + .HasColumnType("INTEGER"); + + b.Property("LocalizedName") + .HasColumnType("TEXT"); + + b.Property("LocalizedNameLocked") + .HasColumnType("INTEGER"); + + b.Property("MaxHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("MinHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("NameLocked") + .HasColumnType("INTEGER"); + + b.Property("NormalizedLocalizedName") + .HasColumnType("TEXT"); + + b.Property("NormalizedName") + .HasColumnType("TEXT"); + + b.Property("OriginalName") + .HasColumnType("TEXT"); + + b.Property("Pages") + .HasColumnType("INTEGER"); + + b.Property("SortName") + .HasColumnType("TEXT"); + + b.Property("SortNameLocked") + .HasColumnType("INTEGER"); + + b.Property("WordCount") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("AppUserId"); + + b.HasIndex("LibraryId"); + + b.ToTable("Series"); + }); + + modelBuilder.Entity("API.Entities.ServerSetting", b => + { + b.Property("Key") + .HasColumnType("INTEGER"); + + b.Property("RowVersion") + .IsConcurrencyToken() + .HasColumnType("INTEGER"); + + b.Property("Value") + .HasColumnType("TEXT"); + + b.HasKey("Key"); + + b.ToTable("ServerSetting"); + }); + + modelBuilder.Entity("API.Entities.SiteTheme", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("FileName") + .HasColumnType("TEXT"); + + b.Property("IsDefault") + .HasColumnType("INTEGER"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("NormalizedName") + .HasColumnType("TEXT"); + + b.Property("Provider") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.ToTable("SiteTheme"); + }); + + modelBuilder.Entity("API.Entities.Tag", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ExternalTag") + .HasColumnType("INTEGER"); + + b.Property("NormalizedTitle") + .HasColumnType("TEXT"); + + b.Property("Title") + .HasColumnType("TEXT"); + + b.HasKey("Id"); + + b.HasIndex("NormalizedTitle", "ExternalTag") + .IsUnique(); + + b.ToTable("Tag"); + }); + + modelBuilder.Entity("API.Entities.Volume", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("AvgHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("CoverImage") + .HasColumnType("TEXT"); + + b.Property("Created") + .HasColumnType("TEXT"); + + b.Property("LastModified") + .HasColumnType("TEXT"); + + b.Property("MaxHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("MinHoursToRead") + .HasColumnType("INTEGER"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("Number") + .HasColumnType("INTEGER"); + + b.Property("Pages") + .HasColumnType("INTEGER"); + + b.Property("SeriesId") + .HasColumnType("INTEGER"); + + b.Property("WordCount") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("SeriesId"); + + b.ToTable("Volume"); + }); + + modelBuilder.Entity("AppUserLibrary", b => + { + b.Property("AppUsersId") + .HasColumnType("INTEGER"); + + b.Property("LibrariesId") + .HasColumnType("INTEGER"); + + b.HasKey("AppUsersId", "LibrariesId"); + + b.HasIndex("LibrariesId"); + + b.ToTable("AppUserLibrary"); + }); + + modelBuilder.Entity("ChapterGenre", b => + { + b.Property("ChaptersId") + .HasColumnType("INTEGER"); + + b.Property("GenresId") + .HasColumnType("INTEGER"); + + b.HasKey("ChaptersId", "GenresId"); + + b.HasIndex("GenresId"); + + b.ToTable("ChapterGenre"); + }); + + modelBuilder.Entity("ChapterPerson", b => + { + b.Property("ChapterMetadatasId") + .HasColumnType("INTEGER"); + + b.Property("PeopleId") + .HasColumnType("INTEGER"); + + b.HasKey("ChapterMetadatasId", "PeopleId"); + + b.HasIndex("PeopleId"); + + b.ToTable("ChapterPerson"); + }); + + modelBuilder.Entity("ChapterTag", b => + { + b.Property("ChaptersId") + .HasColumnType("INTEGER"); + + b.Property("TagsId") + .HasColumnType("INTEGER"); + + b.HasKey("ChaptersId", "TagsId"); + + b.HasIndex("TagsId"); + + b.ToTable("ChapterTag"); + }); + + modelBuilder.Entity("CollectionTagSeriesMetadata", b => + { + b.Property("CollectionTagsId") + .HasColumnType("INTEGER"); + + b.Property("SeriesMetadatasId") + .HasColumnType("INTEGER"); + + b.HasKey("CollectionTagsId", "SeriesMetadatasId"); + + b.HasIndex("SeriesMetadatasId"); + + b.ToTable("CollectionTagSeriesMetadata"); + }); + + modelBuilder.Entity("GenreSeriesMetadata", b => + { + b.Property("GenresId") + .HasColumnType("INTEGER"); + + b.Property("SeriesMetadatasId") + .HasColumnType("INTEGER"); + + b.HasKey("GenresId", "SeriesMetadatasId"); + + b.HasIndex("SeriesMetadatasId"); + + b.ToTable("GenreSeriesMetadata"); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ClaimType") + .HasColumnType("TEXT"); + + b.Property("ClaimValue") + .HasColumnType("TEXT"); + + b.Property("RoleId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("RoleId"); + + b.ToTable("AspNetRoleClaims", (string)null); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim", b => + { + b.Property("Id") + .ValueGeneratedOnAdd() + .HasColumnType("INTEGER"); + + b.Property("ClaimType") + .HasColumnType("TEXT"); + + b.Property("ClaimValue") + .HasColumnType("TEXT"); + + b.Property("UserId") + .HasColumnType("INTEGER"); + + b.HasKey("Id"); + + b.HasIndex("UserId"); + + b.ToTable("AspNetUserClaims", (string)null); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin", b => + { + b.Property("LoginProvider") + .HasColumnType("TEXT"); + + b.Property("ProviderKey") + .HasColumnType("TEXT"); + + b.Property("ProviderDisplayName") + .HasColumnType("TEXT"); + + b.Property("UserId") + .HasColumnType("INTEGER"); + + b.HasKey("LoginProvider", "ProviderKey"); + + b.HasIndex("UserId"); + + b.ToTable("AspNetUserLogins", (string)null); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken", b => + { + b.Property("UserId") + .HasColumnType("INTEGER"); + + b.Property("LoginProvider") + .HasColumnType("TEXT"); + + b.Property("Name") + .HasColumnType("TEXT"); + + b.Property("Value") + .HasColumnType("TEXT"); + + b.HasKey("UserId", "LoginProvider", "Name"); + + b.ToTable("AspNetUserTokens", (string)null); + }); + + modelBuilder.Entity("PersonSeriesMetadata", b => + { + b.Property("PeopleId") + .HasColumnType("INTEGER"); + + b.Property("SeriesMetadatasId") + .HasColumnType("INTEGER"); + + b.HasKey("PeopleId", "SeriesMetadatasId"); + + b.HasIndex("SeriesMetadatasId"); + + b.ToTable("PersonSeriesMetadata"); + }); + + modelBuilder.Entity("SeriesMetadataTag", b => + { + b.Property("SeriesMetadatasId") + .HasColumnType("INTEGER"); + + b.Property("TagsId") + .HasColumnType("INTEGER"); + + b.HasKey("SeriesMetadatasId", "TagsId"); + + b.HasIndex("TagsId"); + + b.ToTable("SeriesMetadataTag"); + }); + + modelBuilder.Entity("API.Entities.AppUserBookmark", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithMany("Bookmarks") + .HasForeignKey("AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("AppUser"); + }); + + modelBuilder.Entity("API.Entities.AppUserPreferences", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithOne("UserPreferences") + .HasForeignKey("API.Entities.AppUserPreferences", "AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.SiteTheme", "Theme") + .WithMany() + .HasForeignKey("ThemeId"); + + b.Navigation("AppUser"); + + b.Navigation("Theme"); + }); + + modelBuilder.Entity("API.Entities.AppUserProgress", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithMany("Progresses") + .HasForeignKey("AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Series", null) + .WithMany("Progress") + .HasForeignKey("SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("AppUser"); + }); + + modelBuilder.Entity("API.Entities.AppUserRating", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithMany("Ratings") + .HasForeignKey("AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Series", null) + .WithMany("Ratings") + .HasForeignKey("SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("AppUser"); + }); + + modelBuilder.Entity("API.Entities.AppUserRole", b => + { + b.HasOne("API.Entities.AppRole", "Role") + .WithMany("UserRoles") + .HasForeignKey("RoleId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.AppUser", "User") + .WithMany("UserRoles") + .HasForeignKey("UserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Role"); + + b.Navigation("User"); + }); + + modelBuilder.Entity("API.Entities.Chapter", b => + { + b.HasOne("API.Entities.Volume", "Volume") + .WithMany("Chapters") + .HasForeignKey("VolumeId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Volume"); + }); + + modelBuilder.Entity("API.Entities.Device", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithMany("Devices") + .HasForeignKey("AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("AppUser"); + }); + + modelBuilder.Entity("API.Entities.FolderPath", b => + { + b.HasOne("API.Entities.Library", "Library") + .WithMany("Folders") + .HasForeignKey("LibraryId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Library"); + }); + + modelBuilder.Entity("API.Entities.MangaFile", b => + { + b.HasOne("API.Entities.Chapter", "Chapter") + .WithMany("Files") + .HasForeignKey("ChapterId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Chapter"); + }); + + modelBuilder.Entity("API.Entities.Metadata.SeriesMetadata", b => + { + b.HasOne("API.Entities.Series", "Series") + .WithOne("Metadata") + .HasForeignKey("API.Entities.Metadata.SeriesMetadata", "SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Series"); + }); + + modelBuilder.Entity("API.Entities.Metadata.SeriesRelation", b => + { + b.HasOne("API.Entities.Series", "Series") + .WithMany("Relations") + .HasForeignKey("SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Series", "TargetSeries") + .WithMany("RelationOf") + .HasForeignKey("TargetSeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Series"); + + b.Navigation("TargetSeries"); + }); + + modelBuilder.Entity("API.Entities.ReadingList", b => + { + b.HasOne("API.Entities.AppUser", "AppUser") + .WithMany("ReadingLists") + .HasForeignKey("AppUserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("AppUser"); + }); + + modelBuilder.Entity("API.Entities.ReadingListItem", b => + { + b.HasOne("API.Entities.Chapter", "Chapter") + .WithMany() + .HasForeignKey("ChapterId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.ReadingList", "ReadingList") + .WithMany("Items") + .HasForeignKey("ReadingListId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Series", "Series") + .WithMany() + .HasForeignKey("SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Volume", "Volume") + .WithMany() + .HasForeignKey("VolumeId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Chapter"); + + b.Navigation("ReadingList"); + + b.Navigation("Series"); + + b.Navigation("Volume"); + }); + + modelBuilder.Entity("API.Entities.Series", b => + { + b.HasOne("API.Entities.AppUser", null) + .WithMany("WantToRead") + .HasForeignKey("AppUserId"); + + b.HasOne("API.Entities.Library", "Library") + .WithMany("Series") + .HasForeignKey("LibraryId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Library"); + }); + + modelBuilder.Entity("API.Entities.Volume", b => + { + b.HasOne("API.Entities.Series", "Series") + .WithMany("Volumes") + .HasForeignKey("SeriesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.Navigation("Series"); + }); + + modelBuilder.Entity("AppUserLibrary", b => + { + b.HasOne("API.Entities.AppUser", null) + .WithMany() + .HasForeignKey("AppUsersId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Library", null) + .WithMany() + .HasForeignKey("LibrariesId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("ChapterGenre", b => + { + b.HasOne("API.Entities.Chapter", null) + .WithMany() + .HasForeignKey("ChaptersId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Genre", null) + .WithMany() + .HasForeignKey("GenresId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("ChapterPerson", b => + { + b.HasOne("API.Entities.Chapter", null) + .WithMany() + .HasForeignKey("ChapterMetadatasId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Person", null) + .WithMany() + .HasForeignKey("PeopleId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("ChapterTag", b => + { + b.HasOne("API.Entities.Chapter", null) + .WithMany() + .HasForeignKey("ChaptersId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Tag", null) + .WithMany() + .HasForeignKey("TagsId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("CollectionTagSeriesMetadata", b => + { + b.HasOne("API.Entities.CollectionTag", null) + .WithMany() + .HasForeignKey("CollectionTagsId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Metadata.SeriesMetadata", null) + .WithMany() + .HasForeignKey("SeriesMetadatasId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("GenreSeriesMetadata", b => + { + b.HasOne("API.Entities.Genre", null) + .WithMany() + .HasForeignKey("GenresId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Metadata.SeriesMetadata", null) + .WithMany() + .HasForeignKey("SeriesMetadatasId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityRoleClaim", b => + { + b.HasOne("API.Entities.AppRole", null) + .WithMany() + .HasForeignKey("RoleId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserClaim", b => + { + b.HasOne("API.Entities.AppUser", null) + .WithMany() + .HasForeignKey("UserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserLogin", b => + { + b.HasOne("API.Entities.AppUser", null) + .WithMany() + .HasForeignKey("UserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("Microsoft.AspNetCore.Identity.IdentityUserToken", b => + { + b.HasOne("API.Entities.AppUser", null) + .WithMany() + .HasForeignKey("UserId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("PersonSeriesMetadata", b => + { + b.HasOne("API.Entities.Person", null) + .WithMany() + .HasForeignKey("PeopleId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Metadata.SeriesMetadata", null) + .WithMany() + .HasForeignKey("SeriesMetadatasId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("SeriesMetadataTag", b => + { + b.HasOne("API.Entities.Metadata.SeriesMetadata", null) + .WithMany() + .HasForeignKey("SeriesMetadatasId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + + b.HasOne("API.Entities.Tag", null) + .WithMany() + .HasForeignKey("TagsId") + .OnDelete(DeleteBehavior.Cascade) + .IsRequired(); + }); + + modelBuilder.Entity("API.Entities.AppRole", b => + { + b.Navigation("UserRoles"); + }); + + modelBuilder.Entity("API.Entities.AppUser", b => + { + b.Navigation("Bookmarks"); + + b.Navigation("Devices"); + + b.Navigation("Progresses"); + + b.Navigation("Ratings"); + + b.Navigation("ReadingLists"); + + b.Navigation("UserPreferences"); + + b.Navigation("UserRoles"); + + b.Navigation("WantToRead"); + }); + + modelBuilder.Entity("API.Entities.Chapter", b => + { + b.Navigation("Files"); + }); + + modelBuilder.Entity("API.Entities.Library", b => + { + b.Navigation("Folders"); + + b.Navigation("Series"); + }); + + modelBuilder.Entity("API.Entities.ReadingList", b => + { + b.Navigation("Items"); + }); + + modelBuilder.Entity("API.Entities.Series", b => + { + b.Navigation("Metadata"); + + b.Navigation("Progress"); + + b.Navigation("Ratings"); + + b.Navigation("RelationOf"); + + b.Navigation("Relations"); + + b.Navigation("Volumes"); + }); + + modelBuilder.Entity("API.Entities.Volume", b => + { + b.Navigation("Chapters"); + }); +#pragma warning restore 612, 618 + } + } +} diff --git a/API/Data/Migrations/20221212215914_EmulateBookPref.cs b/API/Data/Migrations/20221212215914_EmulateBookPref.cs new file mode 100644 index 000000000..d2883ba0c --- /dev/null +++ b/API/Data/Migrations/20221212215914_EmulateBookPref.cs @@ -0,0 +1,26 @@ +using Microsoft.EntityFrameworkCore.Migrations; + +#nullable disable + +namespace API.Data.Migrations +{ + public partial class EmulateBookPref : Migration + { + protected override void Up(MigrationBuilder migrationBuilder) + { + migrationBuilder.AddColumn( + name: "EmulateBook", + table: "AppUserPreferences", + type: "INTEGER", + nullable: false, + defaultValue: false); + } + + protected override void Down(MigrationBuilder migrationBuilder) + { + migrationBuilder.DropColumn( + name: "EmulateBook", + table: "AppUserPreferences"); + } + } +} diff --git a/API/Data/Migrations/DataContextModelSnapshot.cs b/API/Data/Migrations/DataContextModelSnapshot.cs index a7b1cccb8..c474690ce 100644 --- a/API/Data/Migrations/DataContextModelSnapshot.cs +++ b/API/Data/Migrations/DataContextModelSnapshot.cs @@ -217,6 +217,9 @@ namespace API.Data.Migrations .HasColumnType("TEXT") .HasDefaultValue("Dark"); + b.Property("EmulateBook") + .HasColumnType("INTEGER"); + b.Property("GlobalPageLayoutMode") .ValueGeneratedOnAdd() .HasColumnType("INTEGER") diff --git a/API/Entities/AppUserPreferences.cs b/API/Entities/AppUserPreferences.cs index f29ede382..9e7b65df7 100644 --- a/API/Entities/AppUserPreferences.cs +++ b/API/Entities/AppUserPreferences.cs @@ -36,6 +36,10 @@ public class AppUserPreferences /// public bool ShowScreenHints { get; set; } = true; /// + /// Manga Reader Option: Emulate a book by applying a shadow effect on the pages + /// + public bool EmulateBook { get; set; } = false; + /// /// Manga Reader Option: How many pages to display in the reader at once /// public LayoutMode LayoutMode { get; set; } = LayoutMode.Single; diff --git a/API/Services/ArchiveService.cs b/API/Services/ArchiveService.cs index a547dc36d..25c0a1db8 100644 --- a/API/Services/ArchiveService.cs +++ b/API/Services/ArchiveService.cs @@ -409,6 +409,7 @@ public class ArchiveService : IArchiveService private void ExtractArchiveEntities(IEnumerable entries, string extractPath) { _directoryService.ExistOrCreate(extractPath); + // TODO: Look into a Parallel.ForEach foreach (var entry in entries) { entry.WriteToDirectory(extractPath, new ExtractionOptions() diff --git a/API/Services/CacheService.cs b/API/Services/CacheService.cs index 5ef4184d3..fcfe6655d 100644 --- a/API/Services/CacheService.cs +++ b/API/Services/CacheService.cs @@ -1,5 +1,6 @@ using System; using System.Collections.Generic; +using System.Diagnostics; using System.IO; using System.Linq; using System.Threading.Tasks; @@ -60,6 +61,7 @@ public class CacheService : ICacheService public IEnumerable GetCachedFileDimensions(int chapterId) { + var sw = Stopwatch.StartNew(); var path = GetCachePath(chapterId); var files = _directoryService.GetFilesWithExtension(path, Tasks.Scanner.Parser.Parser.ImageFileExtensions) .OrderByNatural(Path.GetFileNameWithoutExtension) @@ -74,7 +76,7 @@ public class CacheService : ICacheService for (var i = 0; i < files.Length; i++) { var file = files[i]; - using var image = Image.NewFromStream(File.OpenRead(file), access: Enums.Access.SequentialUnbuffered); + using var image = Image.NewFromFile(file, memory:false, access: Enums.Access.SequentialUnbuffered); dimensions.Add(new FileDimensionDto() { PageNumber = i, @@ -84,6 +86,7 @@ public class CacheService : ICacheService }); } + _logger.LogDebug("File Dimensions call for {Length} images took {Time}ms", dimensions.Count, sw.ElapsedMilliseconds); return dimensions; } diff --git a/API/Services/ReaderService.cs b/API/Services/ReaderService.cs index c14a0425e..453aa77b6 100644 --- a/API/Services/ReaderService.cs +++ b/API/Services/ReaderService.cs @@ -225,6 +225,7 @@ public class ReaderService : IReaderService try { + // TODO: Rewrite this code to just pull user object with progress for that particiular appuserprogress, else create it var userProgress = await _unitOfWork.AppUserProgressRepository.GetUserProgressAsync(progressDto.ChapterId, userId); @@ -241,8 +242,7 @@ public class ReaderService : IReaderService SeriesId = progressDto.SeriesId, ChapterId = progressDto.ChapterId, LibraryId = progressDto.LibraryId, - BookScrollId = progressDto.BookScrollId, - LastModified = DateTime.Now + BookScrollId = progressDto.BookScrollId }); _unitOfWork.UserRepository.Update(userWithProgress); } @@ -253,7 +253,6 @@ public class ReaderService : IReaderService userProgress.VolumeId = progressDto.VolumeId; userProgress.LibraryId = progressDto.LibraryId; userProgress.BookScrollId = progressDto.BookScrollId; - userProgress.LastModified = DateTime.Now; _unitOfWork.AppUserProgressRepository.Update(userProgress); } @@ -267,6 +266,10 @@ public class ReaderService : IReaderService } catch (Exception exception) { + // This can happen when the reader sends 2 events at same time, so 2 threads are inserting and one fails. + if (exception.Message.StartsWith( + "The database operation was expected to affect 1 row(s), but actually affected 0 row(s)")) + return true; _logger.LogError(exception, "Could not save progress"); await _unitOfWork.RollbackAsync(); } diff --git a/UI/Web/src/_manga-reader-common.scss b/UI/Web/src/_manga-reader-common.scss index e6ff3aac8..403787e70 100644 --- a/UI/Web/src/_manga-reader-common.scss +++ b/UI/Web/src/_manga-reader-common.scss @@ -45,6 +45,10 @@ img { vertical-align: top; max-width: fit-content; } + + .fit-to-screen.full-width { + max-height: calc(var(--vh)*100); + } } @@ -70,4 +74,29 @@ img { background-color: var(--manga-reader-prev-highlight-bg-color) !important; animation: fadein .5s both; backdrop-filter: blur(10px); +} + + +::ng-deep .image-container.book-shadow.center-double:before { + content: ''; + position: absolute; + top: 0; + left: 50%; + height: 100%; + box-shadow: + 0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%), + 0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%), + 0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%), + 0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%); +} + +@supports (-moz-appearance:none) { + ::ng-deep .image-container.book-shadow.center-double:before { + box-shadow: + 0px 0px calc(17px*3.14) 25px rgb(0 0 0 / 43%), + 0px 0px calc(2px*3.14) 2px rgb(0 0 0 / 43%), + 0px 0px calc(5px*3.14) 4px rgb(0 0 0 / 43%), + 0px 0px calc(0.5px*3.14) 0.3px rgb(0 0 0 / 43%), + 0px 0px 1px 0.5px rgb(0 0 0 / 43%); + } } \ No newline at end of file diff --git a/UI/Web/src/app/_models/preferences/preferences.ts b/UI/Web/src/app/_models/preferences/preferences.ts index 674dd88ca..a053ac447 100644 --- a/UI/Web/src/app/_models/preferences/preferences.ts +++ b/UI/Web/src/app/_models/preferences/preferences.ts @@ -18,6 +18,7 @@ export interface Preferences { layoutMode: LayoutMode; backgroundColor: string; showScreenHints: boolean; + emulateBook: boolean; // Book Reader bookReaderMargin: number; diff --git a/UI/Web/src/app/_services/message-hub.service.ts b/UI/Web/src/app/_services/message-hub.service.ts index d454f3866..635425336 100644 --- a/UI/Web/src/app/_services/message-hub.service.ts +++ b/UI/Web/src/app/_services/message-hub.service.ts @@ -146,13 +146,6 @@ export class MessageHubService { this.onlineUsersSource.next(usernames); }); - this.hubConnection.on("LogObject", resp => { - console.log(resp); - }); - this.hubConnection.on("LogString", resp => { - console.log(resp); - }); - this.hubConnection.on(EVENTS.ScanSeries, resp => { this.messagesSource.next({ event: EVENTS.ScanSeries, diff --git a/UI/Web/src/app/_services/reader.service.ts b/UI/Web/src/app/_services/reader.service.ts index a3a5ed8d2..e9fa4aa65 100644 --- a/UI/Web/src/app/_services/reader.service.ts +++ b/UI/Web/src/app/_services/reader.service.ts @@ -103,8 +103,8 @@ export class ReaderService { return this.baseUrl + 'reader/bookmark-image?seriesId=' + seriesId + '&page=' + page + '&apiKey=' + encodeURIComponent(apiKey); } - getChapterInfo(chapterId: number) { - return this.httpClient.get(this.baseUrl + 'reader/chapter-info?chapterId=' + chapterId); + getChapterInfo(chapterId: number, includeDimensions = false) { + return this.httpClient.get(this.baseUrl + 'reader/chapter-info?chapterId=' + chapterId + '&includeDimensions=' + includeDimensions); } getFileDimensions(chapterId: number) { @@ -194,6 +194,11 @@ export class ReaderService { return parseInt(imageSrc.split('&page=')[1], 10); } + imageUrlToChapterId(imageSrc: string) { + if (imageSrc === undefined || imageSrc === '') { return -1; } + return parseInt(imageSrc.split('chapterId=')[1].split('&')[0], 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 + ''; diff --git a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html index 758922079..94e47bae1 100644 --- a/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html +++ b/UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.html @@ -30,7 +30,7 @@ -
Select a folder to view breadcrumb. Don't see your directory, try checking / first. +
Select a folder to view breadcrumb. Don't see your directory? Try checking / first.
diff --git a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html index 31bebb152..6b71c5f9b 100644 --- a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html +++ b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html @@ -9,7 +9,7 @@ If you want Send To device to work, you must host your own email service.

-   + Use fully qualified url of the email service. Do not include ending slash.
diff --git a/UI/Web/src/app/cards/card-item/card-item.component.html b/UI/Web/src/app/cards/card-item/card-item.component.html index 9e117b4c3..c672cedc3 100644 --- a/UI/Web/src/app/cards/card-item/card-item.component.html +++ b/UI/Web/src/app/cards/card-item/card-item.component.html @@ -41,10 +41,10 @@ - + -  {{title}} + {{title}} diff --git a/UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html b/UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html index 09420410e..ed3529240 100644 --- a/UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html +++ b/UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html @@ -93,7 +93,7 @@
- ~{{readingTimeLeft.avgHours}} Hour{{readingTimeLeft.avgHours > 1 ? 's' : ''}} Left + ~{{readingTimeLeft.avgHours}} Hour{{readingTimeLeft.avgHours > 1 ? 's' : ''}}
diff --git a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.html b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.html index f34bec0a2..c72f27f42 100644 --- a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.html +++ b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.html @@ -1,5 +1,5 @@
diff --git a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.scss b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.scss index 1443e0e15..74ffdb37e 100644 --- a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.scss +++ b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.scss @@ -5,7 +5,8 @@ margin: 0 auto; max-height: calc(var(--vh)*100); vertical-align: top; - &.wide { + + &.wide { height: 100vh; } } diff --git a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.ts index fbe731238..571abccc6 100644 --- a/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.ts +++ b/UI/Web/src/app/manga-reader/_components/canvas-renderer/canvas-renderer.component.ts @@ -1,6 +1,7 @@ import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; -import { map, Observable, of, Subject, takeUntil, tap } from 'rxjs'; +import { filter, map, Observable, of, Subject, takeUntil, takeWhile, tap } from 'rxjs'; import { PageSplitOption } from 'src/app/_models/preferences/page-split-option'; +import { ReaderService } from 'src/app/_services/reader.service'; import { LayoutMode } from '../../_models/layout-mode'; import { FITTING_OPTION, PAGING_DIRECTION, SPLIT_PAGE_PART } from '../../_models/reader-enums'; import { ReaderSetting } from '../../_models/reader-setting'; @@ -47,7 +48,7 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy - constructor(private readonly cdRef: ChangeDetectorRef, private mangaReaderService: ManagaReaderService) { } + constructor(private readonly cdRef: ChangeDetectorRef, private mangaReaderService: ManagaReaderService, private readerService: ReaderService) { } ngOnInit(): void { this.readerSettings$.pipe(takeUntil(this.onDestroy), tap(value => { @@ -63,6 +64,7 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy this.darkenss$ = this.readerSettings$.pipe( map(values => 'brightness(' + values.darkness + '%)'), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); @@ -75,15 +77,15 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy // Would this ever execute given that we perform splitting only in this renderer? if ( - this.mangaReaderService.isWideImage(this.canvasImage) && + this.mangaReaderService.isWidePage(this.readerService.imageUrlToPageNum(this.canvasImage.src)) && this.mangaReaderService.shouldRenderAsFitSplit(this.pageSplit) ) { // Rewriting to fit to width for this cover image - console.log('Fit (override): ', fit); return FITTING_OPTION.WIDTH; } return fit; - }) + }), + filter(() => this.isValid()), ); @@ -94,7 +96,6 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy if (!this.canvas) return; const elements = [this.canvas?.nativeElement]; - console.log('Applying bookmark on ', elements); this.mangaReaderService.applyBookmarkEffect(elements); }) ).subscribe(() => {}); @@ -122,7 +123,8 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy updateSplitPage() { if (this.canvasImage == null) return; - const needsSplitting = this.mangaReaderService.isWideImage(this.canvasImage); + const needsSplitting = this.mangaReaderService.isWidePage(this.readerService.imageUrlToPageNum(this.canvasImage.src)); + if (!needsSplitting || this.mangaReaderService.isNoSplit(this.pageSplit)) { this.currentImageSplitPart = SPLIT_PAGE_PART.NO_SPLIT; return needsSplitting; @@ -160,6 +162,10 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy return needsSplitting; } + isValid() { + return this.renderWithCanvas; + } + /** * This renderer does not render when splitting is not needed * @param img @@ -173,7 +179,6 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy this.cdRef.markForCheck(); const needsSplitting = this.updateSplitPage(); - //console.log('split: ',this.currentImageSplitPart); if (!needsSplitting) return; if (this.currentImageSplitPart === SPLIT_PAGE_PART.NO_SPLIT) return; @@ -195,7 +200,7 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy getPageAmount(direction: PAGING_DIRECTION) { if (this.canvasImage === null) return 1; - if (!this.mangaReaderService.isWideImage(this.canvasImage)) return 1; + if (!this.mangaReaderService.isWidePage(this.readerService.imageUrlToPageNum(this.canvasImage.src))) return 1; switch(direction) { case PAGING_DIRECTION.FORWARD: return this.shouldMoveNext() ? 1 : 0; @@ -221,7 +226,6 @@ export class CanvasRendererComponent implements OnInit, AfterViewInit, OnDestroy setCanvasSize() { if (this.canvasImage == null) return; if (!this.ctx || !this.canvas) { return; } - // TODO: Move this somewhere else (maybe canvas renderer?) // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const isSafari = [ diff --git a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.html b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.html index f3611c3f2..e0993cda2 100644 --- a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.html +++ b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.html @@ -1,5 +1,5 @@ -
@@ -9,7 +9,7 @@ class="{{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}" > - + diff --git a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.scss b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.scss index 919a0ab00..1d782acba 100644 --- a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.scss +++ b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.scss @@ -43,3 +43,4 @@ left: 50%; max-width: 100%; } + diff --git a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts index 0a087e47e..e4edbd63d 100644 --- a/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts +++ b/UI/Web/src/app/manga-reader/_components/double-renderer/double-renderer.component.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { Observable, of, Subject, map, takeUntil, tap, zip, shareReplay, filter } from 'rxjs'; +import { Observable, of, Subject, map, takeUntil, tap, zip, shareReplay, filter, combineLatest } from 'rxjs'; import { PageSplitOption } from 'src/app/_models/preferences/page-split-option'; import { ReaderMode } from 'src/app/_models/preferences/reader-mode'; import { ReaderService } from 'src/app/_services/reader.service'; @@ -10,6 +10,9 @@ import { ReaderSetting } from '../../_models/reader-setting'; import { ImageRenderer } from '../../_models/renderer'; import { ManagaReaderService } from '../../_series/managa-reader.service'; +/** + * Renders 2 pages except on first page, last page, and before a wide image + */ @Component({ selector: 'app-double-renderer', templateUrl: './double-renderer.component.html', @@ -20,10 +23,6 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer @Input() readerSettings$!: Observable; @Input() image$!: Observable; - /** - * The image fit class - */ - @Input() imageFit$!: Observable; @Input() bookmark$!: Observable; @Input() showClickOverlay$!: Observable; @Input() pageNum$!: Observable<{pageNum: number, maxPages: number}>; @@ -36,8 +35,8 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer showClickOverlayClass$!: Observable; readerModeClass$!: Observable; layoutClass$!: Observable; - shouldRenderSecondPage$!: Observable; darkenss$: Observable = of('brightness(100%)'); + emulateBookClass$: Observable = of(''); layoutMode: LayoutMode = LayoutMode.Single; pageSplit: PageSplitOption = PageSplitOption.FitSplit; pageNum: number = 0; @@ -53,26 +52,6 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer * @remarks Used for rendering to screen. */ currentImage2 = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the previous image to currentImage - * @see currentImage - */ - currentImagePrev = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the next image to currentImage - * @see currentImage - */ - currentImageNext = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current - 2 image to currentImage - * @see currentImage - */ - currentImage2Behind = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current + 2 image to currentImage - * @see currentImage - */ - currentImage2Ahead = new Image(); /** * Determines if we should render a double page. @@ -95,9 +74,9 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer ngOnInit(): void { this.readerModeClass$ = this.readerSettings$.pipe( - filter(_ => this.isValid()), map(values => values.readerMode), map(mode => mode === ReaderMode.LeftRight || mode === ReaderMode.UpDown ? '' : 'd-none'), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); @@ -107,6 +86,13 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer takeUntil(this.onDestroy) ); + this.emulateBookClass$ = this.readerSettings$.pipe( + map(data => data.emulateBook), + map(enabled => enabled ? 'book-shadow' : ''), + filter(_ => this.isValid()), + takeUntil(this.onDestroy) + ); + this.showClickOverlayClass$ = this.showClickOverlay$.pipe( map(showOverlay => showOverlay ? 'blur' : ''), filter(_ => this.isValid()), @@ -115,7 +101,6 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer this.pageNum$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), tap(pageInfo => { this.pageNum = pageInfo.pageNum; this.maxPages = pageInfo.maxPages; @@ -123,68 +108,36 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer this.currentImage = this.getPage(this.pageNum); this.currentImage2 = this.getPage(this.pageNum + 1); - this.currentImageNext = this.getPage(this.pageNum + 1); - this.currentImagePrev = this.getPage(this.pageNum - 1); - - this.currentImage2Behind = this.getPage(this.pageNum - 2); - this.currentImage2Ahead = this.getPage(this.pageNum + 2); this.cdRef.markForCheck(); - })).subscribe(() => {}); + }), + filter(_ => this.isValid()), + ).subscribe(() => {}); this.shouldRenderDouble$ = this.pageNum$.pipe( takeUntil(this.onDestroy), + map((_) => this.shouldRenderDouble()), filter(_ => this.isValid()), - map((_) => { - return this.shouldRenderDouble(); - }) ); - this.layoutClass$ = zip(this.shouldRenderDouble$, this.imageFit$).pipe( + this.imageFitClass$ = this.readerSettings$.pipe( takeUntil(this.onDestroy), + map(values => values.fitting), filter(_ => this.isValid()), + shareReplay() + ); + + this.layoutClass$ = combineLatest([this.shouldRenderDouble$, this.readerSettings$]).pipe( + takeUntil(this.onDestroy), map((value) => { - if (!value[0]) return 'd-none'; - if (value[0] && value[1] === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset'; - if (value[0] && value[1] === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset'; - if (value[0] && value[1] === FITTING_OPTION.ORIGINAL) return 'original-double-offset'; + if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset'; + if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset'; + if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset'; return ''; - }) - ); - - this.shouldRenderSecondPage$ = this.pageNum$.pipe( - takeUntil(this.onDestroy), + }), filter(_ => this.isValid()), - map(_ => { - if (this.currentImage2.src === '') { - console.log('Not rendering second page as 2nd image is empty'); - return false; - } - if (this.mangaReaderService.isCoverImage(this.pageNum)) { - console.log('Not rendering second page as on cover image'); - return false; - } - if (this.readerService.imageUrlToPageNum(this.currentImage2.src) > this.maxPages - 1) { - console.log('Not rendering second page as 2nd image is on last page'); - return false; - } - if (this.mangaReaderService.isWideImage(this.currentImageNext)) { - console.log('Not rendering second page as next page is wide'); - return false; - } - - if (this.mangaReaderService.isWideImage(this.currentImage)) { - console.log('Not rendering second page as next page is wide'); - return false; - } - - if (this.mangaReaderService.isWideImage(this.currentImagePrev)) { - console.log('Not rendering second page as prev page is wide'); - return false; - } - return true; - }) ); + this.readerSettings$.pipe( takeUntil(this.onDestroy), tap(values => { @@ -196,7 +149,6 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer this.bookmark$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), tap(_ => { const elements = []; const image1 = this.document.querySelector('#image-1'); @@ -206,16 +158,9 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer if (image2 != null) elements.push(image2); this.mangaReaderService.applyBookmarkEffect(elements); - }) - ).subscribe(() => {}); - - - this.imageFitClass$ = this.readerSettings$.pipe( - takeUntil(this.onDestroy), + }), filter(_ => this.isValid()), - map(values => values.fitting), - shareReplay() - ); + ).subscribe(() => {}); } ngOnDestroy(): void { @@ -224,13 +169,29 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer } shouldRenderDouble() { - if (this.layoutMode !== LayoutMode.Double) return false; + if (!this.isValid()) return false; - return !( - this.mangaReaderService.isCoverImage(this.pageNum) - || this.mangaReaderService.isWideImage(this.currentImage) - || this.mangaReaderService.isWideImage(this.currentImageNext) - ); + if (this.mangaReaderService.isCoverImage(this.pageNum)) { + console.log('Not rendering double as current page is cover image'); + return false; + } + + if (this.mangaReaderService.isWidePage(this.pageNum) ) { + console.log('Not rendering double as current page is wide image'); + return false; + } + + if (this.mangaReaderService.isLastImage(this.pageNum, this.maxPages)) { + console.log('Not rendering double as current page is last and there are an odd number of pages'); + return false; + } + + if (this.mangaReaderService.isWidePage(this.pageNum + 1) ) { + console.log('Not rendering double as next page is wide image'); + return false; + } + + return true; } isValid() { @@ -240,19 +201,12 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer renderPage(img: Array): void { if (img === null || img.length === 0 || img[0] === null) return; if (!this.isValid()) return; - - console.log('[DoubleRenderer] renderPage(): ', this.pageNum); - console.log(this.readerService.imageUrlToPageNum(this.currentImage2Behind.src), this.readerService.imageUrlToPageNum(this.currentImagePrev.src), - '[', this.readerService.imageUrlToPageNum(this.currentImage.src), ']', - this.readerService.imageUrlToPageNum(this.currentImageNext.src), this.readerService.imageUrlToPageNum(this.currentImage2Ahead.src)) - - if (!this.shouldRenderDouble()) { - this.imageHeight.emit(this.currentImage.height); + // First load, switching from double manga -> double, this is 0 and thus not rendering + if (!this.shouldRenderDouble() && (this.currentImage.height || img[0].height) > 0) { + this.imageHeight.emit(this.currentImage.height || img[0].height); return; } - - this.currentImage2 = this.currentImageNext; this.cdRef.markForCheck(); this.imageHeight.emit(Math.max(this.currentImage.height, this.currentImage2.height)); @@ -268,18 +222,17 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer getPageAmount(direction: PAGING_DIRECTION): number { if (this.layoutMode !== LayoutMode.Double) return 0; - // If prev page: switch (direction) { case PAGING_DIRECTION.FORWARD: if (this.mangaReaderService.isCoverImage(this.pageNum)) { console.log('Moving forward 1 page as on cover image'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImage)) { + if (this.mangaReaderService.isWidePage(this.pageNum)) { console.log('Moving forward 1 page as current page is wide'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImageNext)) { + if (this.mangaReaderService.isWidePage(this.pageNum + 1)) { console.log('Moving forward 1 page as next page is wide'); return 1; } @@ -298,23 +251,19 @@ export class DoubleRendererComponent implements OnInit, OnDestroy, ImageRenderer console.log('Moving back 1 page as on cover image'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImage)) { + if (this.mangaReaderService.isWidePage(this.pageNum)) { console.log('Moving back 1 page as current page is wide'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImagePrev)) { + if (this.mangaReaderService.isWidePage(this.pageNum - 1)) { console.log('Moving back 1 page as prev page is wide'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImage2Behind)) { + if (this.mangaReaderService.isWidePage(this.pageNum - 2)) { console.log('Moving back 1 page as 2 pages back is wide'); return 1; } - // Not sure about this condition on moving backwards - if (this.mangaReaderService.isSecondLastImage(this.pageNum, this.maxPages)) { - console.log('Moving back 1 page as 2 pages left'); - return 1; - } + console.log('Moving back 2 pages'); return 2; } diff --git a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.html b/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.html index c1874dd9f..d007d1b9f 100644 --- a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.html +++ b/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.html @@ -1,7 +1,7 @@ -
+ [ngClass]="{'center-double': (shouldRenderDouble$ | async), 'reverse': (shouldRenderDouble$ | async)}"> - + diff --git a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts index feda43ada..1f5583567 100644 --- a/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts +++ b/UI/Web/src/app/manga-reader/_components/double-reverse-renderer/double-reverse-renderer.component.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { Observable, of, Subject, map, takeUntil, tap, zip, shareReplay, filter } from 'rxjs'; +import { Observable, of, Subject, map, takeUntil, tap, zip, shareReplay, filter, combineLatest } from 'rxjs'; import { PageSplitOption } from 'src/app/_models/preferences/page-split-option'; import { ReaderMode } from 'src/app/_models/preferences/reader-mode'; import { ReaderService } from 'src/app/_services/reader.service'; @@ -25,10 +25,6 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR @Input() readerSettings$!: Observable; @Input() image$!: Observable; - /** - * The image fit class - */ - @Input() imageFit$!: Observable; @Input() bookmark$!: Observable; @Input() showClickOverlay$!: Observable; @Input() pageNum$!: Observable<{pageNum: number, maxPages: number}>; @@ -41,8 +37,8 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR showClickOverlayClass$!: Observable; readerModeClass$!: Observable; layoutClass$!: Observable; - shouldRenderSecondPage$!: Observable; darkenss$: Observable = of('brightness(100%)'); + emulateBookClass$: Observable = of(''); layoutMode: LayoutMode = LayoutMode.Single; pageSplit: PageSplitOption = PageSplitOption.FitSplit; pageNum: number = 0; @@ -54,50 +50,10 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR */ leftImage = new Image(); /** - * Used solely for LayoutMode.Double rendering. + * Used solely for LayoutMode.Double rendering. Will always hold the next image to currentImage * @remarks Used for rendering to screen. */ rightImage = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the previous image to currentImage - * @see currentImage - */ - currentImagePrev = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the next image to currentImage - * @see currentImage - */ - currentImageNext = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current - 2 image to currentImage - * @see currentImage - */ - currentImage2Behind = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current + 2 image to currentImage - * @see currentImage - */ - currentImage2Ahead = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current - 3 image to currentImage - * @see currentImage - */ - currentImage3Behind = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current + 3 image to currentImage - * @see currentImage - */ - currentImage3Ahead = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current - 4 image to currentImage - * @see currentImage - */ - currentImage4Behind = new Image(); - /** - * Used solely for LayoutMode.Double rendering. Will always hold the current + 4 image to currentImage - * @see currentImage - */ - currentImage4Ahead = new Image(); /** * Determines if we should render a double page. @@ -107,8 +63,6 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR */ shouldRenderDouble$!: Observable; - pageSpreadMap: {[key: number]: 'W'|'S'} = {}; - private readonly onDestroy = new Subject(); get ReaderMode() {return ReaderMode;} @@ -129,122 +83,62 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR ); this.darkenss$ = this.readerSettings$.pipe( - filter(_ => this.isValid()), map(values => 'brightness(' + values.darkness + '%)'), + filter(_ => this.isValid()), + takeUntil(this.onDestroy) + ); + + this.emulateBookClass$ = this.readerSettings$.pipe( + map(data => data.emulateBook), + map(enabled => enabled ? 'book-shadow' : ''), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); this.showClickOverlayClass$ = this.showClickOverlay$.pipe( - filter(_ => this.isValid()), map(showOverlay => showOverlay ? 'blur' : ''), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); this.pageNum$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), tap(pageInfo => { this.pageNum = pageInfo.pageNum; this.maxPages = pageInfo.maxPages; this.leftImage = this.getPage(this.pageNum); this.rightImage = this.getPage(this.pageNum + 1); - - this.currentImageNext = this.getPage(this.pageNum + 1); - this.currentImagePrev = this.getPage(this.pageNum - 1); - - this.currentImage2Behind = this.getPage(this.pageNum - 2); - this.currentImage2Ahead = this.getPage(this.pageNum + 2); - - this.currentImage3Behind = this.getPage(this.pageNum - 3); - this.currentImage3Ahead = this.getPage(this.pageNum + 3); - - this.currentImage4Behind = this.getPage(this.pageNum - 4); - this.currentImage4Ahead = this.getPage(this.pageNum + 4); - - this.leftImage.addEventListener('load', () => { - this.updatePageMap(this.leftImage) - }); - this.rightImage.addEventListener('load', () => { - this.updatePageMap(this.rightImage) - }); - this.currentImageNext.addEventListener('load', () => { - this.updatePageMap(this.currentImageNext) - }); - this.currentImagePrev.addEventListener('load', () => { - this.updatePageMap(this.currentImagePrev) - }); - this.currentImage2Behind.addEventListener('load', () => { - this.updatePageMap(this.currentImage2Behind) - }); - this.currentImage2Ahead.addEventListener('load', () => { - this.updatePageMap(this.currentImage2Ahead) - }); - this.currentImage3Behind.addEventListener('load', () => { - this.updatePageMap(this.currentImage3Behind) - }); - this.currentImage3Ahead.addEventListener('load', () => { - this.updatePageMap(this.currentImage3Ahead) - }); - this.currentImage4Behind.addEventListener('load', () => { - this.updatePageMap(this.currentImage4Behind) - }); - this.currentImage4Ahead.addEventListener('load', () => { - this.updatePageMap(this.currentImage4Ahead) - }); - })).subscribe(() => {}); + }), + filter(_ => this.isValid()), + ).subscribe(() => {}); this.shouldRenderDouble$ = this.pageNum$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), map((_) => this.shouldRenderDouble()), + filter(_ => this.isValid()), shareReplay() ); - this.layoutClass$ = zip(this.shouldRenderDouble$, this.imageFit$).pipe( + this.imageFitClass$ = this.readerSettings$.pipe( takeUntil(this.onDestroy), + map(values => values.fitting), filter(_ => this.isValid()), - map((value) => { - if (!value[0]) return 'd-none'; - if (value[0] && value[1] === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset'; - if (value[0] && value[1] === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset'; - if (value[0] && value[1] === FITTING_OPTION.ORIGINAL) return 'original-double-offset'; - return ''; - }) + shareReplay() ); - this.shouldRenderSecondPage$ = this.pageNum$.pipe( + this.layoutClass$ = combineLatest([this.shouldRenderDouble$, this.readerSettings$]).pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), - map(_ => { - if (this.mangaReaderService.isCoverImage(this.pageNum)) { - console.log('Not rendering second page as on cover image'); - return false; - } - if (this.readerService.imageUrlToPageNum(this.rightImage.src) > this.maxPages - 1) { - console.log('Not rendering second page as 2nd image is on last page'); - return false; - } - if (this.isWide(this.leftImage)) { - console.log('Not rendering second page as right page is wide'); - return false; - } - if (this.isWide(this.rightImage)) { - console.log('Not rendering second page as right page is wide'); - return false; - } - if (this.isWide(this.currentImageNext)) { - console.log('Not rendering second page as next page is wide'); - return false; - } - if (this.isWide(this.currentImagePrev) && (this.isWide(this.currentImage3Ahead))) { - console.log('Not rendering second page as prev page is wide'); - return false; - } - return true; + map((value) => { + if (value[0] && value[1].fitting === FITTING_OPTION.WIDTH) return 'fit-to-width-double-offset'; + if (value[0] && value[1].fitting === FITTING_OPTION.HEIGHT) return 'fit-to-height-double-offset'; + if (value[0] && value[1].fitting === FITTING_OPTION.ORIGINAL) return 'original-double-offset'; + return ''; }), + filter(_ => this.isValid()), ); + this.readerSettings$.pipe( takeUntil(this.onDestroy), tap(values => { @@ -256,7 +150,6 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR this.bookmark$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), tap(_ => { const elements = []; const image1 = this.document.querySelector('#image-1'); @@ -266,16 +159,9 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR if (image2 != null) elements.push(image2); this.mangaReaderService.applyBookmarkEffect(elements); - }) - ).subscribe(() => {}); - - - this.imageFitClass$ = this.readerSettings$.pipe( - takeUntil(this.onDestroy), + }), filter(_ => this.isValid()), - map(values => values.fitting), - shareReplay() - ); + ).subscribe(() => {}); } ngOnDestroy(): void { @@ -283,62 +169,30 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR this.onDestroy.complete(); } - updatePageMap(img: HTMLImageElement) { - const page = this.readerService.imageUrlToPageNum(img.src); - if (!this.pageSpreadMap.hasOwnProperty(page)) { - this.pageSpreadMap[page] = this.mangaReaderService.isWideImage(img) ? 'W' : 'S'; - } - } - - /** - * We should Render 2 pages if: - * 1. We are not currently the first image (cover image) - * 2. The previous page is not a cover image - * 3. The current page is not a wide image - * 4. The next page is not a wide image - */ shouldRenderDouble() { if (!this.isValid()) return false; if (this.mangaReaderService.isCoverImage(this.pageNum)) { - console.log('Not rendering right image as is cover image'); - return false; - } - if (this.mangaReaderService.isCoverImage(this.pageNum + 1)) { - console.log('Not rendering right image as current - 1 is cover image'); - return false; - } - if (this.isWide(this.leftImage)) { - console.log('Not rendering right image as left is wide'); - //return false; - } - if (this.isWide(this.rightImage)) { - console.log('Not rendering right image as it is wide'); + console.log('Not rendering double as current page is cover image'); return false; } - if (this.isWide(this.currentImageNext)) { - console.log('Not rendering right image as it is wide'); + if (this.mangaReaderService.isWidePage(this.pageNum)) { + console.log('Not rendering double as current page is wide image'); return false; } + if (this.mangaReaderService.isWidePage(this.pageNum + 1) ) { + console.log('Not rendering double as next page is wide image'); + return false; + } + + if (this.mangaReaderService.isLastImage(this.pageNum, this.maxPages)) { + console.log('Not rendering double as current page is last and there are an odd number of pages'); + return false; + } return true; - - - // const result = !( - // this.mangaReaderService.isCoverImage(this.pageNum) - // || this.mangaReaderService.isCoverImage(this.pageNum - 1) // This is because we use prev page and hence the cover will re-show - // || this.mangaReaderService.isWideImage(this.leftImage) - // || this.mangaReaderService.isWideImage(this.currentImageNext) - // ); - - // return result; - } - - isWide(img: HTMLImageElement) { - const page = this.readerService.imageUrlToPageNum(img.src); - return this.mangaReaderService.isWideImage(img) || this.pageSpreadMap.hasOwnProperty(page) && this.pageSpreadMap[page] === 'W'; } isValid() { @@ -349,25 +203,6 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR if (img === null || img.length === 0 || img[0] === null) return; if (!this.isValid()) return; - console.log('[DoubleRenderer] renderPage(): ', this.pageNum); - - const allImages = [ - this.currentImage4Behind, this.currentImage3Behind, this.currentImage2Behind, this.currentImagePrev, - this.leftImage, - this.currentImageNext, this.currentImage2Ahead, this.currentImage3Ahead, this.currentImage4Ahead - ]; - - console.log('DoubleRenderer buffered pages: ', allImages.map(img => { - const page = this.readerService.imageUrlToPageNum(img.src); - if (page === this.pageNum) return '[' + page + ']'; - return page; - }).join(', ')); - - - this.rightImage = this.currentImageNext; - - - this.cdRef.markForCheck(); this.imageHeight.emit(Math.max(this.leftImage.height, this.rightImage.height)); this.cdRef.markForCheck(); } @@ -380,31 +215,6 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR } getPageAmount(direction: PAGING_DIRECTION): number { if (this.layoutMode !== LayoutMode.DoubleReversed) return 0; - // console.log("----currentImage4Behind:", this.currentImage4Behind); - // console.log("---currentImage3Behind:", this.currentImage3Behind); - // console.log("--currentImage2Behind:", this.currentImage2Behind); - // console.log("-currentImagePrev:", this.currentImagePrev); - // console.log("leftImage", this.leftImage); - // console.log("rightImage", this.rightImage); - // console.log("+currentImageNext:", this.currentImageNext); - // console.log("++currentImage2Ahead:", this.currentImage2Ahead); - // console.log("+++currentImage3Ahead:", this.currentImage3Ahead); - // console.log("++++currentImage4Ahead:", this.currentImage4Ahead); - - const allImages = [ - this.currentImage4Behind, this.currentImage3Behind, this.currentImage2Behind, this.currentImagePrev, - this.leftImage, this.rightImage, - this.currentImageNext, this.currentImage2Ahead, this.currentImage3Ahead, this.currentImage4Ahead - ]; - - console.log('[getPageAmount for double reverse]: ', allImages.map(img => { - const page = this.readerService.imageUrlToPageNum(img.src); - if (page === this.pageNum) return '[' + page; - if (page === this.pageNum + 1) return page + ']'; - return page + ''; - })); - console.log("Current Page: ", this.pageNum); - console.log("Total Pages: ", this.maxPages); switch (direction) { case PAGING_DIRECTION.FORWARD: @@ -413,39 +223,35 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR return 1; } - if (this.mangaReaderService.isSecondLastImage(this.pageNum, this.maxPages-1)) { + if (this.mangaReaderService.isSecondLastImage(this.pageNum, this.maxPages)) { console.log('Moving forward 1 page as 2 pages left'); return 1; } - if (this.mangaReaderService.isWideImage(this.rightImage)) { + if (this.mangaReaderService.isWidePage(this.pageNum)) { console.log('Moving forward 1 page as current page is wide'); return 1; } - if (this.mangaReaderService.isWideImage(this.leftImage)) { + if (this.mangaReaderService.isWidePage(this.pageNum + 1)) { console.log('Moving forward 1 page as current page is wide'); return 1; } - if (this.mangaReaderService.isWideImage(this.currentImageNext)) { - console.log('Moving forward 1 page as next page is wide'); - return 1; - } - if (this.mangaReaderService.isWideImage(this.currentImagePrev)) { - console.log('Moving forward 1 page as prev page is wide'); - return 1; - } - - if (this.mangaReaderService.isLastImage(this.pageNum, this.maxPages-1)) { - console.log('Moving forward 1 page as 1 page left'); - return 1; + if (this.mangaReaderService.isLastImage(this.pageNum + 1, this.maxPages)) { + console.log('Moving forward 2 pages as right image is the last page and we just rendered double page'); + return 2; } if (this.pageNum === this.maxPages - 1) { console.log('Moving forward 0 page as on last page'); return 0; } + + if (this.mangaReaderService.isLastImage(this.pageNum, this.maxPages)) { + console.log('Moving forward 1 page as 1 page left'); + return 1; + } console.log('Moving forward 2 pages'); return 2; @@ -455,32 +261,37 @@ export class DoubleReverseRendererComponent implements OnInit, OnDestroy, ImageR return 1; } - if (this.isWide(this.rightImage)) { + if (this.mangaReaderService.isWidePage(this.pageNum + 1)) { console.log('Moving back 2 page as right page is wide'); return 2; } - if (this.isWide(this.leftImage) && (!this.isWide(this.currentImage4Behind))) { + if (this.mangaReaderService.isWidePage(this.pageNum + 2)) { + console.log('Moving back 1 page as coming from wide page'); + return 1; + } + + if (this.mangaReaderService.isWidePage(this.pageNum)) { console.log('Moving back 1 page as left page is wide'); return 1; } - if (this.isWide(this.currentImageNext)) { - console.log('Moving back 2 page as prev page is wide'); + if (this.mangaReaderService.isWidePage(this.pageNum) && (!this.mangaReaderService.isWidePage(this.pageNum - 4))) { + console.log('Moving back 1 page as left page is wide'); return 1; } - if (this.isWide(this.currentImagePrev)) { + if (this.mangaReaderService.isWidePage(this.pageNum - 1)) { console.log('Moving back 1 page as prev page is wide'); return 1; } - if (this.isWide(this.currentImage2Behind)) { + if (this.mangaReaderService.isWidePage(this.pageNum - 2)) { console.log('Moving back 1 page as 2 pages back is wide'); return 1; } - if (this.isWide(this.currentImage2Ahead)) { + if (this.mangaReaderService.isWidePage(this.pageNum + 2)) { console.log('Moving back 2 page as 2 pages back is wide'); return 1; } diff --git a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts index 27e5057b0..467cc0c6d 100644 --- a/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts +++ b/UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts @@ -184,7 +184,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { initScrollHandler() { console.log('Setting up Scroll handler on ', this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body); fromEvent(this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body, 'scroll') - //fromEvent(this.document.body, 'scroll') .pipe(debounceTime(20), takeUntil(this.onDestroy)) .subscribe((event) => this.handleScrollEvent(event)); } @@ -265,7 +264,6 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy { */ handleScrollEvent(event?: any) { const verticalOffset = this.getVerticalOffset(); - console.log('offset: ', verticalOffset); if (verticalOffset > this.prevScrollPosition) { this.scrollingDirection = PAGING_DIRECTION.FORWARD; diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html index ddab7f8a0..a5e47b77f 100644 --- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html +++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html @@ -36,7 +36,6 @@ [ngStyle]="{'background-color': backgroundColor, 'height': readerMode === ReaderMode.Webtoon ? 'inherit' : 'calc(var(--vh)*100)'}" #readingArea> -
- @@ -191,7 +170,7 @@
-   +  
-
+
-
- +
+
+
+
+
+ + +
+
+
+
@@ -259,6 +247,9 @@
+
+ +
diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss index f9f59601a..5a9617592 100644 --- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss +++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.scss @@ -54,64 +54,6 @@ $pointer-offset: 5px; } } -// Fitting Options - -.full-height { - width: auto; - margin: 0 auto; - max-height: calc(var(--vh)*100); - vertical-align: top; - &.wide { - height: 100vh; - } -} - -.original { - align-self: center; - width: auto; - margin: 0 auto; - vertical-align: top; -} - -.full-width { - width: 100%; - margin: 0 auto; - vertical-align: top; - max-width: fit-content; - - &.double { - width: 50%; - - &.cover { - width: 100%; - } - } -} - -.center-double { - display: flex; - overflow: unset; -} - -.fit-to-width-double-offset { - max-width: 100%; // max-width fixes center alignment issue -} - -.original-double-offset { - max-width: 100%; -} - -.fit-to-height-double-offset { - // position: absolute; - height: 100vh; - object-fit: scale-down; - top: 50%; - left: 50%; - // transform: translate(-50%, 0%); - max-width: 100%; -} - - // Splitting Icon .split { height: 20px; @@ -217,7 +159,6 @@ $pointer-offset: 5px; } - .pagination-area { $pagination-bg: rgba(0, 0, 0, 0); //$pagination-bg: rgba(0, 0, 255, 0.4); // DEBUG CODE @@ -265,4 +206,3 @@ $pointer-offset: 5px; z-index: 100; } } - diff --git a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts index cda419fb4..ba6b75fe1 100644 --- a/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts +++ b/UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts @@ -41,8 +41,6 @@ const ANIMATION_SPEED = 200; const OVERLAY_AUTO_CLOSE_TIME = 3000; const CLICK_OVERLAY_TIMEOUT = 3000; - - @Component({ selector: 'app-manga-reader', templateUrl: './manga-reader.component.html', @@ -312,14 +310,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { private currentImage: Subject = new ReplaySubject(1); currentImage$: Observable = this.currentImage.asObservable(); - private imageFit: Subject = new ReplaySubject(); - private imageFitClass: Subject = new ReplaySubject(); - imageFitClass$: Observable = this.imageFitClass.asObservable(); - imageFit$: Observable = this.imageFit.asObservable(); - - private imageHeight: Subject = new ReplaySubject(); - imageHeight$: Observable = this.imageHeight.asObservable(); - private pageNumSubject: Subject<{pageNum: number, maxPages: number}> = new ReplaySubject(); pageNum$: Observable<{pageNum: number, maxPages: number}> = this.pageNumSubject.asObservable(); @@ -347,11 +337,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { } get ImageHeight() { - // ?! This doesn't work reliably - //console.log('Reading Area Height: ', this.readingArea?.nativeElement?.clientHeight) - //console.log('Image 1 Height: ', this.document.querySelector('#image-1')?.clientHeight || 0) - //return 'calc(100*var(--vh))'; - return Math.max(this.readingArea?.nativeElement?.clientHeight, this.document.querySelector('#image-1')?.clientHeight || 0) + 'px'; + if (this.FittingOption !== FITTING_OPTION.HEIGHT) return this.mangaReaderService.getPageDimensions(this.pageNum)?.height + 'px'; + return this.readingArea?.nativeElement?.clientHeight + 'px'; } get RightPaginationOffset() { @@ -372,39 +359,20 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { } - get ReaderMode() { - return ReaderMode; - } - get LayoutMode() { - return LayoutMode; - } - - get ReadingDirection() { - return ReadingDirection; - } - - get PageSplitOption() { - return PageSplitOption; - } - - get Breakpoint() { - return Breakpoint; - } - - get FITTING_OPTION() { - return FITTING_OPTION; - } - - get FittingOption() { - return this.generalSettingsForm.get('fittingOption')?.value; - } + get ReaderMode() { return ReaderMode; } + get LayoutMode() { return LayoutMode; } + get ReadingDirection() { return ReadingDirection; } + get PageSplitOption() { return PageSplitOption; } + get Breakpoint() { return Breakpoint; } + get FITTING_OPTION() { return FITTING_OPTION; } + get FittingOption() { return this.generalSettingsForm.get('fittingOption')?.value || FITTING_OPTION.HEIGHT; } constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService, public readerService: ReaderService, private formBuilder: FormBuilder, private navService: NavService, private toastr: ToastrService, private memberService: MemberService, - public utilityService: UtilityService, private renderer: Renderer2, - @Inject(DOCUMENT) private document: Document, private modalService: NgbModal, - private readonly cdRef: ChangeDetectorRef, public mangaReaderService: ManagaReaderService) { + public utilityService: UtilityService, @Inject(DOCUMENT) private document: Document, + private modalService: NgbModal, private readonly cdRef: ChangeDetectorRef, + public mangaReaderService: ManagaReaderService) { this.navService.hideNavBar(); this.navService.hideSideNav(); this.cdRef.markForCheck(); @@ -457,17 +425,17 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { pageSplitOption: new FormControl(this.pageSplitOption), fittingOption: new FormControl(this.mangaReaderService.translateScalingOption(this.scalingOption)), layoutMode: new FormControl(this.layoutMode), - darkness: new FormControl(100) + darkness: new FormControl(100), + emulateBook: new FormControl(this.user.preferences.emulateBook) }); this.readerModeSubject.next(this.readerMode); this.pagingDirectionSubject.next(this.pagingDirection); - // We need a mergeMap when page changes this.readerSettings$ = merge(this.generalSettingsForm.valueChanges, this.pagingDirection$, this.readerMode$).pipe( + map(_ => this.createReaderSettingsUpdate()), takeUntil(this.onDestroy), - map(_ => this.createReaderSettingsUpdate()) ); this.updateForm(); @@ -497,6 +465,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.layoutMode = parseInt(val, 10); if (this.layoutMode === LayoutMode.Single) { + this.generalSettingsForm.get('pageSplitOption')?.setValue(this.user.preferences.pageSplitOption); this.generalSettingsForm.get('pageSplitOption')?.enable(); this.generalSettingsForm.get('fittingOption')?.enable(); } else { @@ -504,6 +473,11 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.generalSettingsForm.get('pageSplitOption')?.disable(); this.generalSettingsForm.get('fittingOption')?.setValue(this.mangaReaderService.translateScalingOption(ScalingOption.FitToHeight)); this.generalSettingsForm.get('fittingOption')?.disable(); + + // If we are in double mode, we need to check if our current page is on a right edge or not, if so adjust by decrementing by 1 + if (this.readerMode !== ReaderMode.Webtoon) { + this.setPageNum(this.mangaReaderService.adjustForDoubleReader(this.pageNum)); + } } this.cdRef.markForCheck(); @@ -517,7 +491,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.autoCloseMenu = this.generalSettingsForm.get('autoCloseMenu')?.value; this.pageSplitOption = parseInt(this.generalSettingsForm.get('pageSplitOption')?.value, 10); - const needsSplitting = this.mangaReaderService.isWideImage(this.canvasImage); + const needsSplitting = this.mangaReaderService.isWidePage(this.readerService.imageUrlToPageNum(this.canvasImage.src)); // If we need to split on a menu change, then we need to re-render. if (needsSplitting) { // If we need to re-render, to ensure things layout properly, let's update paging direction & reset render @@ -570,17 +544,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { @HostListener('window:resize', ['$event']) @HostListener('window:orientationchange', ['$event']) onResize() { - if (window.innerWidth > window.innerHeight) { - this.generalSettingsForm.get('layoutMode')?.enable(); - this.cdRef.markForCheck(); - return; - }; - if (this.layoutMode === LayoutMode.Single || this.readerMode === ReaderMode.Webtoon) return; - - this.generalSettingsForm.get('layoutMode')?.setValue(LayoutMode.Single); - this.generalSettingsForm.get('layoutMode')?.disable(); - this.toastr.info('Layout mode switched to Single due to insufficient space to render double layout'); - this.cdRef.markForCheck(); + this.disableDoubleRendererIfScreenTooSmall(); } @HostListener('window:keyup', ['$event']) @@ -631,24 +595,40 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { createReaderSettingsUpdate() { return { pageSplit: parseInt(this.generalSettingsForm.get('pageSplitOption')?.value, 10), - fitting: this.mangaReaderService.translateScalingOption(this.scalingOption), + fitting: (this.generalSettingsForm.get('fittingOption')?.value as FITTING_OPTION), layoutMode: this.layoutMode, darkness: 100, pagingDirection: this.pagingDirection, - readerMode: this.readerMode + readerMode: this.readerMode, + emulateBook: this.generalSettingsForm.get('emulateBook')?.value, }; } + disableDoubleRendererIfScreenTooSmall() { + if (window.innerWidth > window.innerHeight) { + this.generalSettingsForm.get('layoutMode')?.enable(); + this.cdRef.markForCheck(); + return; + }; + if (this.layoutMode === LayoutMode.Single || this.readerMode === ReaderMode.Webtoon) return; + + this.generalSettingsForm.get('layoutMode')?.setValue(LayoutMode.Single); + this.generalSettingsForm.get('layoutMode')?.disable(); + this.toastr.info('Layout mode switched to Single due to insufficient space to render double layout'); + this.cdRef.markForCheck(); + } + /** * Gets a page from cache else gets a brand new Image * @param pageNum Page Number to load * @param forceNew Forces to fetch a new image - * @param chapterId ChapterId to fetch page from. Defaults to current chapterId. Does not search against cached images with chapterId + * @param chapterId ChapterId to fetch page from. Defaults to current chapterId * @returns */ getPage(pageNum: number, chapterId: number = this.chapterId, forceNew: boolean = false) { - // ?! This doesn't compare with chapterId, only for fetching - let img = this.cachedImages.find(img => this.readerService.imageUrlToPageNum(img.src) === pageNum); + let img = this.cachedImages.find(img => this.readerService.imageUrlToPageNum(img.src) === pageNum + && (this.readerService.imageUrlToChapterId(img.src) == chapterId || this.readerService.imageUrlToChapterId(img.src) === -1) + ); if (!img || forceNew) { img = new Image(); img.src = this.getPageUrl(pageNum, chapterId); @@ -674,7 +654,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { // This is menu code clickOverlayClass(side: 'right' | 'left') { - // TODO: This needs to be validated with subject if (!this.showClickOverlay) { return ''; } @@ -738,7 +717,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { forkJoin({ progress: this.readerService.getProgress(this.chapterId), - chapterInfo: this.readerService.getChapterInfo(this.chapterId), + chapterInfo: this.readerService.getChapterInfo(this.chapterId, true), bookmarks: this.readerService.getBookmarks(this.chapterId), }).pipe(take(1)).subscribe(results => { if (this.readingListMode && (results.chapterInfo.seriesFormat === MangaFormat.EPUB || results.chapterInfo.seriesFormat === MangaFormat.PDF)) { @@ -748,13 +727,21 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { return; } + this.mangaReaderService.loadPageDimensions(results.chapterInfo.pageDimensions); + this.volumeId = results.chapterInfo.volumeId; this.maxPages = results.chapterInfo.pages; let page = results.progress.pageNum; if (page > this.maxPages) { page = this.maxPages - 1; } - this.setPageNum(page); + + // If we are in double mode, we need to check if our current page is on a right edge or not, if so adjust by decrementing by 1 + if (this.layoutMode !== LayoutMode.Single && this.readerMode !== ReaderMode.Webtoon) { + page = this.mangaReaderService.adjustForDoubleReader(page); + } + + this.setPageNum(page); // first call this.goToPageEvent = new BehaviorSubject(this.pageNum); // Due to change detection rules in Angular, we need to re-create the options object to apply the change @@ -768,6 +755,8 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.inSetup = false; + this.disableDoubleRendererIfScreenTooSmall(); + // From bookmarks, create map of pages to make lookup time O(1) this.bookmarks = {}; @@ -797,7 +786,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { } }); - this.render(); }, () => { setTimeout(() => { @@ -819,69 +807,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { } } - getFittingOptionClass() { - const formControl = this.generalSettingsForm.get('fittingOption'); - let val = FITTING_OPTION.HEIGHT; - if (formControl === undefined) { - val = FITTING_OPTION.HEIGHT; - } - val = formControl?.value; - - - if ( - this.mangaReaderService.isWideImage(this.canvasImage) && - this.layoutMode === LayoutMode.Single && - val !== FITTING_OPTION.WIDTH && - this.mangaReaderService.shouldRenderAsFitSplit(this.generalSettingsForm.get('pageSplitOption')?.value) - ) { - // Rewriting to fit to width for this cover image - this.imageFitClass.next(FITTING_OPTION.WIDTH); - this.imageFit.next(FITTING_OPTION.WIDTH); - return FITTING_OPTION.WIDTH; - } - - // TODO: Move this to double renderer - if (this.mangaReaderService.isWideImage(this.canvasImage) && this.layoutMode !== LayoutMode.Single) { - this.imageFitClass.next(val + ' wide double'); - return val + ' wide double'; - } - - // TODO: Move this to double renderer - if (this.mangaReaderService.isCoverImage(this.pageNum) && this.layoutMode !== LayoutMode.Single) { - this.imageFitClass.next(val + ' cover double'); - return val + ' cover double'; - } - - this.imageFitClass.next(val); - this.imageFit.next(val); - return val; - } - - - getFittingIcon() { - const value = this.getFit(); - // TODO: This can be a pipe - switch(value) { - case FITTING_OPTION.HEIGHT: - return 'fa-arrows-alt-v'; - case FITTING_OPTION.WIDTH: - return 'fa-arrows-alt-h'; - case FITTING_OPTION.ORIGINAL: - return 'fa-expand-arrows-alt'; - } - } - - getFit() { - // TODO: getFit can be refactored with typed form controls so we don't need this - // can't this also just be this.generalSettingsForm.get('fittingOption')?.value || FITTING_OPTION.HEIGHT - let value = FITTING_OPTION.HEIGHT; - const formControl = this.generalSettingsForm.get('fittingOption'); - if (formControl !== undefined) { - value = formControl?.value; - } - return value; - } - cancelMenuCloseTimer() { if (this.menuTimeout) { clearTimeout(this.menuTimeout); @@ -927,7 +852,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { } onSwipeEvent(event: any) { - console.log('Swipe event occured: ', event); } handlePageChange(event: any, direction: string) { @@ -957,8 +881,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { const pageAmount = Math.max(this.canvasRenderer.getPageAmount(PAGING_DIRECTION.FORWARD), this.singleRenderer.getPageAmount(PAGING_DIRECTION.FORWARD), this.doubleRenderer.getPageAmount(PAGING_DIRECTION.FORWARD), this.doubleReverseRenderer.getPageAmount(PAGING_DIRECTION.FORWARD)); - const notInSplit = this.canvasRenderer.shouldMovePrev(); // TODO: Make this generic like above, but by default only canvasRenderer will have logic - //console.log('Next Page, in split: ', !notInSplit, ' page amt: ', pageAmount, ' page: ', this.canvasImage.src); + const notInSplit = this.canvasRenderer.shouldMovePrev(); if ((this.pageNum + pageAmount >= this.maxPages && notInSplit)) { // Move to next volume/chapter automatically @@ -984,7 +907,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.doubleReverseRenderer.getPageAmount(PAGING_DIRECTION.BACKWARDS)); const notInSplit = this.canvasRenderer.shouldMovePrev(); - //console.log('Prev Page, not in split: ', notInSplit, ' page amt: ', pageAmount); if ((this.pageNum - 1 < 0 && notInSplit)) { // Move to next volume/chapter automatically @@ -1004,7 +926,6 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { this.canvasImage = this.getPage(this.pageNum, this.chapterId, this.layoutMode !== LayoutMode.Single); this.canvasImage.addEventListener('load', () => { this.currentImage.next(this.canvasImage); - //this.renderPage(); // This can execute before cachedImages are ready }, false); this.cdRef.markForCheck(); @@ -1080,15 +1001,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { renderPage() { - console.log('[Manga Reader] renderPage()'); - const page = [this.canvasImage]; - this.canvasRenderer.renderPage(page); - this.singleRenderer.renderPage(page); - this.doubleRenderer.renderPage(page); - this.doubleReverseRenderer.renderPage(page); + this.canvasRenderer?.renderPage(page); + this.singleRenderer?.renderPage(page); + this.doubleRenderer?.renderPage(page); + this.doubleReverseRenderer?.renderPage(page); - if (this.getFit() !== FITTING_OPTION.HEIGHT) { + if (this.FittingOption !== FITTING_OPTION.HEIGHT) { this.readingArea.nativeElement.scroll(0,0); } @@ -1103,7 +1022,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { || document.documentElement.clientHeight || document.body.clientHeight; - const needsSplitting = this.mangaReaderService.isWideImage(this.canvasImage); + const needsSplitting = this.mangaReaderService.isWidePage(this.readerService.imageUrlToPageNum(this.canvasImage.src)); let newScale = this.FittingOption; const widthRatio = windowWidth / (this.canvasImage.width / (needsSplitting ? 2 : 1)); const heightRatio = windowHeight / (this.canvasImage.height); @@ -1142,10 +1061,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { const pagesBefore = pages.filter(p => p >= 0 && p < this.pageNum).length; const pagesAfter = pages.filter(p => p >= 0 && p > this.pageNum).length; //console.log('Buffer Health: Before: ', pagesBefore, ' After: ', pagesAfter); - console.log(this.pageNum, ' Prefetched pages: ', pages.map(p => { - if (this.pageNum === p) return '[' + p + ']'; - return '' + p - })); + // console.log(this.pageNum, ' Prefetched pages: ', pages.map(p => { + // if (this.pageNum === p) return '[' + p + ']'; + // return '' + p + // })); } @@ -1156,6 +1075,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { if (this.readerMode === ReaderMode.Webtoon) return; this.isLoading = true; + this.setPageNum(this.pageNum); this.setCanvasImage(); this.cdRef.markForCheck(); @@ -1308,6 +1228,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { if (this.readerMode !== ReaderMode.Webtoon) { this.canvasImage = this.cachedImages[this.pageNum & this.cachedImages.length]; this.currentImage.next(this.canvasImage); + this.pageNumSubject.next({pageNum: this.pageNum, maxPages: this.maxPages}); this.isLoading = true; } @@ -1401,4 +1322,26 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy { {key: 'SPACE', description: 'Toggle Menu'}, ]; } + + // menu only code + savePref() { + const modelSettings = this.generalSettingsForm.value; + // Get latest preferences from user, overwrite with what we manage in this UI, then save + this.accountService.currentUser$.pipe(take(1)).subscribe(user => { + if (!user) return; + const data = {...user.preferences}; + data.layoutMode = parseInt(modelSettings.layoutMode, 10); + data.readerMode = this.readerMode; + data.autoCloseMenu = this.autoCloseMenu; + data.readingDirection = this.readingDirection; + data.emulateBook = modelSettings.emulateBook; + this.accountService.updatePreferences(data).subscribe((updatedPrefs) => { + this.toastr.success('User preferences updated'); + if (this.user) { + this.user.preferences = updatedPrefs; + this.cdRef.markForCheck(); + } + }) + }); + } } diff --git a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html index e92dac737..db30021c6 100644 --- a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html +++ b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.html @@ -1,10 +1,12 @@ -
- - - -
\ No newline at end of file + +
+ + + +
+ \ No newline at end of file diff --git a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts index cd25e34cb..a8911bb9f 100644 --- a/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts +++ b/UI/Web/src/app/manga-reader/_components/single-renderer/single-renderer.component.ts @@ -1,8 +1,9 @@ import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { filter, map, Observable, of, Subject, takeUntil, tap, zip } from 'rxjs'; +import { combineLatest, filter, map, Observable, of, shareReplay, Subject, takeUntil, tap } from 'rxjs'; import { PageSplitOption } from 'src/app/_models/preferences/page-split-option'; import { ReaderMode } from 'src/app/_models/preferences/reader-mode'; +import { ReaderService } from 'src/app/_services/reader.service'; import { LayoutMode } from '../../_models/layout-mode'; import { FITTING_OPTION, PAGING_DIRECTION } from '../../_models/reader-enums'; import { ReaderSetting } from '../../_models/reader-setting'; @@ -19,12 +20,9 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer @Input() readerSettings$!: Observable; @Input() image$!: Observable; - /** - * The image fit class - */ - @Input() imageFit$!: Observable; @Input() bookmark$!: Observable; @Input() showClickOverlay$!: Observable; + @Input() pageNum$!: Observable<{pageNum: number, maxPages: number}>; @Output() imageHeight: EventEmitter = new EventEmitter(); @@ -36,32 +34,43 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer layoutMode: LayoutMode = LayoutMode.Single; pageSplit: PageSplitOption = PageSplitOption.FitSplit; + pageNum: number = 0; + maxPages: number = 1; + private readonly onDestroy = new Subject(); get ReaderMode() {return ReaderMode;} get LayoutMode() {return LayoutMode;} - constructor(private readonly cdRef: ChangeDetectorRef, private mangaReaderService: ManagaReaderService, - @Inject(DOCUMENT) private document: Document) { } + constructor(private readonly cdRef: ChangeDetectorRef, public mangaReaderService: ManagaReaderService, + @Inject(DOCUMENT) private document: Document, private readerService: ReaderService) { } ngOnInit(): void { this.readerModeClass$ = this.readerSettings$.pipe( - filter(_ => this.isValid()), map(values => values.readerMode), map(mode => mode === ReaderMode.LeftRight || mode === ReaderMode.UpDown ? '' : 'd-none'), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); + this.pageNum$.pipe( + takeUntil(this.onDestroy), + tap(pageInfo => { + this.pageNum = pageInfo.pageNum; + this.maxPages = pageInfo.maxPages; + }), + ).subscribe(() => {}); + this.darkenss$ = this.readerSettings$.pipe( - filter(_ => this.isValid()), map(values => 'brightness(' + values.darkness + '%)'), + filter(_ => this.isValid()), takeUntil(this.onDestroy) ); this.showClickOverlayClass$ = this.showClickOverlay$.pipe( - filter(_ => this.isValid()), map(showOverlay => showOverlay ? 'blur' : ''), - takeUntil(this.onDestroy) + takeUntil(this.onDestroy), + filter(_ => this.isValid()), ); this.readerSettings$.pipe( @@ -75,32 +84,31 @@ export class SingleRendererComponent implements OnInit, OnDestroy, ImageRenderer this.bookmark$.pipe( takeUntil(this.onDestroy), - filter(_ => this.isValid()), tap(_ => { const elements = []; const image1 = this.document.querySelector('#image-1'); if (image1 != null) elements.push(image1); this.mangaReaderService.applyBookmarkEffect(elements); - }) + }), + filter(_ => this.isValid()), ).subscribe(() => {}); - this.imageFitClass$ = zip(this.readerSettings$, this.image$).pipe( - takeUntil(this.onDestroy), - filter(_ => this.isValid()), + this.imageFitClass$ = combineLatest([this.readerSettings$, this.pageNum$]).pipe( map(values => values[0].fitting), map(fit => { if ( - this.mangaReaderService.isWideImage(this.currentImage) && - this.layoutMode === LayoutMode.Single && - fit !== FITTING_OPTION.WIDTH && + this.mangaReaderService.isWidePage(this.pageNum) && this.mangaReaderService.shouldRenderAsFitSplit(this.pageSplit) ) { // Rewriting to fit to width for this cover image - console.log('overridding for fit to screen'); - return FITTING_OPTION.WIDTH; + return FITTING_OPTION.WIDTH + ' fit-to-screen'; } + return fit; - }) + }), + shareReplay(), + filter(_ => this.isValid()), + takeUntil(this.onDestroy), ); } diff --git a/UI/Web/src/app/manga-reader/_models/chapter-info.ts b/UI/Web/src/app/manga-reader/_models/chapter-info.ts index 2a099e06b..953e2244d 100644 --- a/UI/Web/src/app/manga-reader/_models/chapter-info.ts +++ b/UI/Web/src/app/manga-reader/_models/chapter-info.ts @@ -1,5 +1,6 @@ import { LibraryType } from "src/app/_models/library"; import { MangaFormat } from "src/app/_models/manga-format"; +import { FileDimension } from "./file-dimension"; export interface ChapterInfo { chapterNumber: string; @@ -16,4 +17,8 @@ export interface ChapterInfo { pages: number; subtitle: string; title: string; + /** + * This will not always be present. Depends on if asked from backend. + */ + pageDimensions: Array; } \ No newline at end of file diff --git a/UI/Web/src/app/manga-reader/_models/file-dimension.ts b/UI/Web/src/app/manga-reader/_models/file-dimension.ts index 47fb0a64d..9c9e87ec7 100644 --- a/UI/Web/src/app/manga-reader/_models/file-dimension.ts +++ b/UI/Web/src/app/manga-reader/_models/file-dimension.ts @@ -2,4 +2,6 @@ export interface FileDimension { pageNumber: number; width: number; height: number; -} \ No newline at end of file +} + +export type DimensionMap = {[key: number]: {width: number, height: number, isWide: boolean}}; \ No newline at end of file diff --git a/UI/Web/src/app/manga-reader/_models/reader-setting.ts b/UI/Web/src/app/manga-reader/_models/reader-setting.ts index aae62ed7c..33c3e7ba4 100644 --- a/UI/Web/src/app/manga-reader/_models/reader-setting.ts +++ b/UI/Web/src/app/manga-reader/_models/reader-setting.ts @@ -10,4 +10,5 @@ export interface ReaderSetting { darkness: number; pagingDirection: PAGING_DIRECTION; readerMode: ReaderMode; + emulateBook: boolean; } \ No newline at end of file diff --git a/UI/Web/src/app/manga-reader/_models/renderer.ts b/UI/Web/src/app/manga-reader/_models/renderer.ts index 530a5c128..89ea3aabc 100644 --- a/UI/Web/src/app/manga-reader/_models/renderer.ts +++ b/UI/Web/src/app/manga-reader/_models/renderer.ts @@ -32,7 +32,7 @@ export interface ImageRenderer { */ shouldMoveNext(): boolean; /** - * Returns the number of pages that should occur based on page direction and internal state of the renderer. + * Returns the number of pages that should occur based on page direction and internal state of the renderer. Should return 0 when not in the conditions to render. */ getPageAmount(direction: PAGING_DIRECTION): number; /** diff --git a/UI/Web/src/app/manga-reader/_pipes/fitting-icon.pipe.ts b/UI/Web/src/app/manga-reader/_pipes/fitting-icon.pipe.ts new file mode 100644 index 000000000..a64214215 --- /dev/null +++ b/UI/Web/src/app/manga-reader/_pipes/fitting-icon.pipe.ts @@ -0,0 +1,21 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { FITTING_OPTION } from '../_models/reader-enums'; + +@Pipe({ + name: 'fittingIcon', + pure: true +}) +export class FittingIconPipe implements PipeTransform { + + transform(fit: FITTING_OPTION): string { + switch(fit) { + case FITTING_OPTION.HEIGHT: + return 'fa fa-arrows-alt-v'; + case FITTING_OPTION.WIDTH: + return 'fa fa-arrows-alt-h'; + case FITTING_OPTION.ORIGINAL: + return 'fa fa-expand-arrows-alt'; + } + } + +} diff --git a/UI/Web/src/app/manga-reader/_series/managa-reader.service.ts b/UI/Web/src/app/manga-reader/_series/managa-reader.service.ts index 9ea45502a..87ed5c1b4 100644 --- a/UI/Web/src/app/manga-reader/_series/managa-reader.service.ts +++ b/UI/Web/src/app/manga-reader/_series/managa-reader.service.ts @@ -1,8 +1,8 @@ -import { DOCUMENT } from '@angular/common'; -import { ElementRef, Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; +import { ElementRef, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; import { PageSplitOption } from 'src/app/_models/preferences/page-split-option'; import { ScalingOption } from 'src/app/_models/preferences/scaling-option'; import { ReaderService } from 'src/app/_services/reader.service'; +import { DimensionMap, FileDimension } from '../_models/file-dimension'; import { FITTING_OPTION } from '../_models/reader-enums'; @Injectable({ @@ -10,28 +10,58 @@ import { FITTING_OPTION } from '../_models/reader-enums'; }) export class ManagaReaderService { + private pageDimensions: DimensionMap = {}; + private pairs: {[key: number]: number} = {}; private renderer: Renderer2; - constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document: Document, private readerService: ReaderService) { + constructor(rendererFactory: RendererFactory2, private readerService: ReaderService) { this.renderer = rendererFactory.createRenderer(null, null); } + loadPageDimensions(dims: Array) { + this.pageDimensions = {}; + let counter = 0; + let i = 0; + dims.forEach(d => { + const isWide = (d.width > d.height); + this.pageDimensions[d.pageNumber] = { + height: d.height, + width: d.width, + isWide: isWide + }; + + if (isWide) { + this.pairs[d.pageNumber] = d.pageNumber; + } else { + this.pairs[d.pageNumber] = counter % 2 === 0 ? Math.max(i - 1, 0) : counter; + counter++; + } + + i++; + }); + } + + adjustForDoubleReader(page: number) { + if (!this.pairs.hasOwnProperty(page)) return page; + return this.pairs[page]; + } + + getPageDimensions(pageNum: number) { + if (!this.pageDimensions.hasOwnProperty(pageNum)) return null; + return this.pageDimensions[pageNum]; + } /** * If the image's width is greater than it's height - * @param elem Image + * @param pageNum Page number - Expected to call loadPageDimensions before this call */ - isWideImage(elem: HTMLImageElement) { - if (!elem) return false; - if (elem) { - elem.addEventListener('load', () => { - return elem.width > elem.height; - }, false); - if (elem.src === '') return false; - } - return elem.width > elem.height; + isWidePage(pageNum: number) { + if (!this.pageDimensions.hasOwnProperty(pageNum)) return false; + return this.pageDimensions[pageNum].isWide; } + + /** * If pagenumber is 0 aka first page, which on double page rendering should always render as a single. * @@ -64,7 +94,7 @@ export class ManagaReaderService { * If the current page is second to last image */ isSecondLastImage(pageNum: number, maxPages: number) { - return maxPages - 1 - pageNum === 2; + return maxPages - 2 === pageNum; } /** @@ -81,7 +111,7 @@ export class ManagaReaderService { * @returns */ shouldSplit(img: HTMLImageElement, pageSplitOption: PageSplitOption) { - const needsSplitting = this.isWideImage(img); + const needsSplitting = this.isWidePage(this.readerService.imageUrlToPageNum(img?.src)); return !(this.isNoSplit(pageSplitOption) || !needsSplitting) } diff --git a/UI/Web/src/app/manga-reader/manga-reader.module.ts b/UI/Web/src/app/manga-reader/manga-reader.module.ts index 00ed28a14..3e6f25eea 100644 --- a/UI/Web/src/app/manga-reader/manga-reader.module.ts +++ b/UI/Web/src/app/manga-reader/manga-reader.module.ts @@ -17,6 +17,7 @@ import { SingleRendererComponent } from './_components/single-renderer/single-re import { DoubleRendererComponent } from './_components/double-renderer/double-renderer.component'; import { DoubleReverseRendererComponent } from './_components/double-reverse-renderer/double-reverse-renderer.component'; import { MangaReaderComponent } from './_components/manga-reader/manga-reader.component'; +import { FittingIconPipe } from './_pipes/fitting-icon.pipe'; @NgModule({ declarations: [ @@ -30,6 +31,7 @@ import { MangaReaderComponent } from './_components/manga-reader/manga-reader.co SingleRendererComponent, DoubleRendererComponent, DoubleReverseRendererComponent, + FittingIconPipe, ], imports: [ CommonModule, diff --git a/UI/Web/src/app/manga-reader/swipe.directive.ts b/UI/Web/src/app/manga-reader/swipe.directive.ts index b94533da0..379077486 100644 --- a/UI/Web/src/app/manga-reader/swipe.directive.ts +++ b/UI/Web/src/app/manga-reader/swipe.directive.ts @@ -18,11 +18,11 @@ export class SwipeDirective { touchCancels$!: Observable; @HostListener('touchstart') onTouchStart(event: TouchEvent) { - console.log('Touch Start: ', event); + //console.log('Touch Start: ', event); } @HostListener('touchend') onTouchEnd(event: TouchEvent) { - console.log('Touch End: ', event); + //console.log('Touch End: ', event); } constructor(private el: ElementRef) { diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html index 782445825..ba844dce3 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html @@ -57,13 +57,13 @@
-
+
{{unreadCount}}
-
+
Continue {{ContinuePointTitle}}
diff --git a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html index 9536ee156..f4557df4b 100644 --- a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html +++ b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html @@ -68,6 +68,9 @@

Help us out by following our guide to naming and organizing your media.

+
+

Kavita has folder requirements. Check this link to ensure you are following, else files my not show up in scan.

+
diff --git a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html index 37f03e50e..f9554771b 100644 --- a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html +++ b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html @@ -86,7 +86,7 @@
- +
diff --git a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.ts b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.ts index 16684447c..b01432aa0 100644 --- a/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.ts +++ b/UI/Web/src/app/statistics/_components/server-stats/server-stats.component.ts @@ -1,6 +1,8 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { map, Observable, shareReplay, Subject, takeUntil } from 'rxjs'; import { DownloadService } from 'src/app/shared/_services/download.service'; +import { Series } from 'src/app/_models/series'; import { User } from 'src/app/_models/user'; import { StatisticsService } from 'src/app/_services/statistics.service'; import { FileExtensionBreakdown } from '../../_models/file-breakdown'; @@ -24,7 +26,7 @@ export class ServerStatsComponent implements OnInit, OnDestroy { stats$!: Observable; private readonly onDestroy = new Subject(); - constructor(private statService: StatisticsService) { + constructor(private statService: StatisticsService, private router: Router) { this.stats$ = this.statService.getServerStatistics().pipe(takeUntil(this.onDestroy), shareReplay()); this.releaseYears$ = this.statService.getTopYears().pipe(takeUntil(this.onDestroy)); this.mostActiveUsers$ = this.stats$.pipe( @@ -54,7 +56,7 @@ export class ServerStatsComponent implements OnInit, OnDestroy { this.recentlyRead$ = this.stats$.pipe( map(d => d.recentlyRead), map(counts => counts.map(count => { - return {name: count.name, value: -1}; + return {name: count.name, value: -1, extra: count}; })), takeUntil(this.onDestroy) ); @@ -70,6 +72,11 @@ export class ServerStatsComponent implements OnInit, OnDestroy { this.onDestroy.complete(); } + handleRecentlyReadClick = (data: PieDataItem) => { + const series = data.extra as Series; + this.router.navigate(['library', series.libraryId, 'series', series.id]); + } + } diff --git a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.html b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.html index d6bdd286b..f6dcdd18d 100644 --- a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.html +++ b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.html @@ -5,7 +5,7 @@
    -
  • +
  • {{item.name}} {{item.value}} {{label}}
diff --git a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.scss b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.scss index 980cfcc51..6101a9664 100644 --- a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.scss +++ b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.scss @@ -1,3 +1,8 @@ .card { border: var(--bs-card-border-width) solid var(--bs-card-border-color); } + +.underline { + text-decoration: underline; + cursor: pointer; +} \ No newline at end of file diff --git a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.ts b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.ts index 5dab1de0b..1b2b28441 100644 --- a/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.ts +++ b/UI/Web/src/app/statistics/_components/stat-list/stat-list.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { PieData } from '@swimlane/ngx-charts'; import { Observable } from 'rxjs'; import { PieDataItem } from '../../_models/pie-data-item'; @@ -23,5 +24,14 @@ export class StatListComponent { */ @Input() description: string = ''; @Input() data$!: Observable; + /** + * Optional callback handler when an item is clicked + */ + @Input() handleClick: ((data: PieDataItem) => void) | undefined = undefined; + + doClick(item: PieDataItem) { + if (!this.handleClick) return; + this.handleClick(item); + } } diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html index 851902ea3..42bd6519f 100644 --- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html +++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html @@ -150,7 +150,6 @@
-
@@ -170,6 +169,19 @@
+
+
+
+
+ + +
+
+
+
+
+
+
diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts index f94ff3b58..eace0a07c 100644 --- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts +++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts @@ -126,6 +126,8 @@ export class UserPreferencesComponent implements OnInit, OnDestroy { this.settingsForm.addControl('showScreenHints', new FormControl(this.user.preferences.showScreenHints, [])); this.settingsForm.addControl('readerMode', new FormControl(this.user.preferences.readerMode, [])); this.settingsForm.addControl('layoutMode', new FormControl(this.user.preferences.layoutMode, [])); + this.settingsForm.addControl('emulateBook', new FormControl(this.user.preferences.emulateBook, [])); + this.settingsForm.addControl('bookReaderFontFamily', new FormControl(this.user.preferences.bookReaderFontFamily, [])); this.settingsForm.addControl('bookReaderFontSize', new FormControl(this.user.preferences.bookReaderFontSize, [])); this.settingsForm.addControl('bookReaderLineSpacing', new FormControl(this.user.preferences.bookReaderLineSpacing, [])); @@ -184,6 +186,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy { this.settingsForm.get('blurUnreadSummaries')?.setValue(this.user.preferences.blurUnreadSummaries); this.settingsForm.get('promptForDownloadSize')?.setValue(this.user.preferences.promptForDownloadSize); this.settingsForm.get('noTransitions')?.setValue(this.user.preferences.noTransitions); + this.settingsForm.get('emulateBook')?.setValue(this.user.preferences.emulateBook); this.cdRef.markForCheck(); this.settingsForm.markAsPristine(); } @@ -214,10 +217,11 @@ export class UserPreferencesComponent implements OnInit, OnDestroy { blurUnreadSummaries: modelSettings.blurUnreadSummaries, promptForDownloadSize: modelSettings.promptForDownloadSize, noTransitions: modelSettings.noTransitions, + emulateBook: modelSettings.emulateBook }; this.observableHandles.push(this.accountService.updatePreferences(data).subscribe((updatedPrefs) => { - this.toastr.success('Server settings updated'); + this.toastr.success('User preferences updated'); if (this.user) { this.user.preferences = updatedPrefs; this.cdRef.markForCheck(); diff --git a/openapi.json b/openapi.json index 047c374fe..7dfe40a49 100644 --- a/openapi.json +++ b/openapi.json @@ -7,7 +7,7 @@ "name": "GPL-3.0", "url": "https://github.com/Kareadita/Kavita/blob/develop/LICENSE" }, - "version": "0.6.1.12" + "version": "0.6.1.14" }, "servers": [ { @@ -3569,6 +3569,15 @@ "type": "boolean", "default": false } + }, + { + "name": "includeDimensions", + "in": "query", + "description": "Include file dimensions. Only useful for image based reading", + "schema": { + "type": "boolean", + "default": false + } } ], "responses": { @@ -9237,6 +9246,10 @@ "type": "boolean", "description": "Manga Reader Option: Show screen hints to the user on some actions, ie) pagination direction change" }, + "emulateBook": { + "type": "boolean", + "description": "Manga Reader Option: Emulate a book by applying a shadow effect on the pages" + }, "layoutMode": { "$ref": "#/components/schemas/LayoutMode" }, @@ -9889,6 +9902,13 @@ "type": "string", "description": "Series Title", "nullable": true + }, + "pageDimensions": { + "type": "array", + "items": { + "$ref": "#/components/schemas/FileDimensionDto" + }, + "nullable": true } }, "additionalProperties": false, @@ -13894,6 +13914,7 @@ "bookReaderReadingDirection", "bookReaderTapToPaginate", "bookReaderThemeName", + "emulateBook", "globalPageLayoutMode", "layoutMode", "noTransitions", @@ -13921,6 +13942,10 @@ "layoutMode": { "$ref": "#/components/schemas/LayoutMode" }, + "emulateBook": { + "type": "boolean", + "description": "Manga Reader Option: Emulate a book by applying a shadow effect on the pages" + }, "backgroundColor": { "minLength": 1, "type": "string",