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",