Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-05-24 00:52:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Bugfixes (#1177)

Browse Source 
* Fixed an underline on hover of pagination link

* Ensure title of companion bar eats full width if there is no filter

* If a user doesn't have the Download role, they will not be able to download over OPDS.

* Fixed a bug where after going into webtoon reader mode then leaving, the bookmark effect would continue using the webtoon mode styling

* Fixed a bug where continuous reader wasn't being triggered due to moving scrollbar to body and a floating point percision error on scroll top

* Fixed how continuous trigger is shown so that we properly adjust scroll on the top (for prev chapter)

* Fixed a bad merge that broke saving any edits to series metadata

* When a epub key is not correct, even after we correct it, ignore the inlining of the style so the book is at least still readable.

* Disabled double rendering (this feature is being postponed to a later release)

* Disabled user setting and forced it to Single on any save

* Removed cache directory from UpdateSettings validation as we don't allow changing it.

* Fix security issue with url parse

* After all migrations run, update the installed version in the Database. Send that installed version on the stat service.

* Dependency bot to update some security stuff

* Some misc code cleanup and fixes on the typeahead (still broken)
This commit is contained in:
Joseph Milazzo 2022-03-25 18:38:13 -05:00 committed by GitHub
parent 1a011e30c2
commit 242d8b106d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 165 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
API/Controllers/DownloadController.cs
View File

@ -89,8 +89,7 @@ namespace API.Controllers
private async Task<bool> HasDownloadPermission()
{
var user = await _unitOfWork.UserRepository.GetUserByUsernameAsync(User.GetUsername());
var roles = await _userManager.GetRolesAsync(user);
return roles.Contains(PolicyConstants.DownloadRole) || roles.Contains(PolicyConstants.AdminRole);
return await _downloadService.HasDownloadPermission(user);
}
private async Task<ActionResult> GetFirstFileDownload(IEnumerable<MangaFile> files)

12
API/Controllers/OPDSController.cs
View File

@ -765,7 +765,7 @@ public class OpdsController : BaseApiController
filename);
accLink.TotalPages = chapter.Pages;
return new FeedEntry()
var entry = new FeedEntry()
{
Id = mangaFile.Id.ToString(),
Title = title,
@ -776,7 +776,6 @@ public class OpdsController : BaseApiController
{
CreateLink(FeedLinkRelation.Image, FeedLinkType.Image, $"/api/image/chapter-cover?chapterId={chapterId}"),
CreateLink(FeedLinkRelation.Thumbnail, FeedLinkType.Image, $"/api/image/chapter-cover?chapterId={chapterId}"),
accLink,
CreatePageStreamLink(seriesId, volumeId, chapterId, mangaFile, apiKey)
},
Content = new FeedEntryContent()
@ -785,6 +784,15 @@ public class OpdsController : BaseApiController
Type = "text"
}
};
var user = await _unitOfWork.UserRepository.GetUserByIdAsync(await GetUser(apiKey));
if (await _downloadService.HasDownloadPermission(user))
{
entry.Links.Add(accLink);
}
return entry;
}
[HttpGet("{apiKey}/image")]

10
API/Controllers/SettingsController.cs
View File

@ -105,16 +105,6 @@ namespace API.Controllers
{
_logger.LogInformation("{UserName} is updating Server Settings", User.GetUsername());
if (updateSettingsDto.CacheDirectory.Equals(string.Empty))
{
return BadRequest("Cache Directory cannot be empty");
}
if (!Directory.Exists(updateSettingsDto.CacheDirectory))
{
return BadRequest("Directory does not exist or is not accessible.");
}
// We do not allow CacheDirectory changes, so we will ignore.
var currentSettings = await _unitOfWork.SettingsRepository.GetSettingsAsync();
var updateBookmarks = false;

4
API/Controllers/UsersController.cs
View File

@ -4,6 +4,7 @@ using System.Threading.Tasks;
using API.Data;
using API.Data.Repositories;
using API.DTOs;
using API.Entities.Enums;
using API.Extensions;
using AutoMapper;
using Microsoft.AspNetCore.Authorization;
@ -87,6 +88,9 @@ namespace API.Controllers
existingPreferences.BookReaderReadingDirection = preferencesDto.BookReaderReadingDirection;
existingPreferences.Theme = await _unitOfWork.SiteThemeRepository.GetThemeById(preferencesDto.Theme.Id);
// TODO: Remove this code - this overrides layout mode to be single until the mode is released
existingPreferences.LayoutMode = LayoutMode.Single;
_unitOfWork.UserRepository.Update(existingPreferences);
if (await _unitOfWork.CommitAsync())

1
API/DTOs/Settings/ServerSettingDTO.cs
View File

@ -37,5 +37,6 @@ namespace API.DTOs.Settings
/// </summary>
/// <remarks>If null or empty string, will default back to default install setting aka <see cref="EmailService.DefaultApiUrl"/></remarks>
public string EmailServiceUrl { get; set; }
public string InstallVersion { get; set; }
}
}

4
API/Data/Repositories/SeriesRepository.cs
View File

@ -610,8 +610,6 @@ public class SeriesRepository : ISeriesRepository
/// <returns></returns>
public async Task<IEnumerable<SeriesDto>> GetOnDeck(int userId, int libraryId, UserParams userParams, FilterDto filter, bool cutoffOnDate = true)
{
//var allSeriesWithProgress = await _context.AppUserProgresses.Select(p => p.SeriesId).ToListAsync();
//var allChapters = await GetChapterIdsForSeriesAsync(allSeriesWithProgress);
var cutoffProgressPoint = DateTime.Now - TimeSpan.FromDays(30);
var query = (await CreateFilteredSearchQueryable(userId, libraryId, filter))
.Join(_context.AppUserProgresses, s => s.Id, progress => progress.SeriesId, (s, progress) =>
@ -625,7 +623,7 @@ public class SeriesRepository : ISeriesRepository
.Where(p => p.Id == progress.Id && p.AppUserId == userId)
.Max(p => p.LastModified),
// This is only taking into account chapters that have progress on them, not all chapters in said series
LastChapterCreated = _context.Chapter.Where(c => progress.ChapterId == c.Id).Max(c => c.Created)
LastChapterCreated = _context.Chapter.Where(c => progress.ChapterId == c.Id).Max(c => c.Created),
//LastChapterCreated = _context.Chapter.Where(c => allChapters.Contains(c.Id)).Max(c => c.Created)
});
if (cutoffOnDate)

3
API/Helpers/Converters/ServerSettingConverter.cs
View File

@ -45,6 +45,9 @@ namespace API.Helpers.Converters
case ServerSettingKey.EmailServiceUrl:
destination.EmailServiceUrl = row.Value;
break;
case ServerSettingKey.InstallVersion:
destination.InstallVersion = row.Value;
break;
}
}

1
API/Program.cs
View File

@ -36,7 +36,6 @@ namespace API
var directoryService = new DirectoryService(null, new FileSystem());
//MigrateConfigFiles.Migrate(isDocker, directoryService);
// Before anything, check if JWT has been generated properly or if user still has default
if (!Configuration.CheckIfJwtTokenSet() &&

23
API/Services/BookService.cs
View File

@ -150,7 +150,7 @@ namespace API.Services
{
// @Import statements will be handled by browser, so we must inline the css into the original file that request it, so they can be
// Scoped
var prepend = filename.Length > 0 ? filename.Replace(Path.GetFileName(filename), "") : string.Empty;
var prepend = filename.Length > 0 ? filename.Replace(Path.GetFileName(filename), string.Empty) : string.Empty;
var importBuilder = new StringBuilder();
foreach (Match match in Parser.Parser.CssImportUrlRegex.Matches(stylesheetHtml))
{
@ -343,7 +343,7 @@ namespace API.Services
{
foreach (var styleLinks in styleNodes)
{
var key = BookService.CleanContentKeys(styleLinks.Attributes["href"].Value);
var key = CleanContentKeys(styleLinks.Attributes["href"].Value);
// Some epubs are malformed the key in content.opf might be: content/resources/filelist_0_0.xml but the actual html links to resources/filelist_0_0.xml
// In this case, we will do a search for the key that ends with
if (!book.Content.Css.ContainsKey(key))
@ -358,11 +358,20 @@ namespace API.Services
key = correctedKey;
}
var styleContent = await ScopeStyles(await book.Content.Css[key].ReadContentAsync(), apiBase,
book.Content.Css[key].FileName, book);
if (styleContent != null)
try
{
body.PrependChild(HtmlNode.CreateNode($"<style>{styleContent}</style>"));
var cssFile = book.Content.Css[key];
var styleContent = await ScopeStyles(await cssFile.ReadContentAsync(), apiBase,
cssFile.FileName, book);
if (styleContent != null)
{
body.PrependChild(HtmlNode.CreateNode($"<style>{styleContent}</style>"));
}
}
catch (Exception ex)
{
_logger.LogError(ex, "There was an error reading css file for inlining likely due to a key mismatch in metadata");
}
}
}
@ -460,7 +469,7 @@ namespace API.Services
}
/// <summary>
/// Removes the leading ../
/// Removes all leading ../
/// </summary>
/// <param name="key"></param>
/// <returns></returns>

2
API/Services/DirectoryService.cs
View File

@ -84,6 +84,8 @@ namespace API.Services
ConfigDirectory = FileSystem.Path.Join(FileSystem.Directory.GetCurrentDirectory(), "config");
BookmarkDirectory = FileSystem.Path.Join(FileSystem.Directory.GetCurrentDirectory(), "config", "bookmarks");
SiteThemeDirectory = FileSystem.Path.Join(FileSystem.Directory.GetCurrentDirectory(), "config", "themes");
ExistOrCreate(SiteThemeDirectory);
}
/// <summary>

13
API/Services/DownloadService.cs
View File

@ -2,7 +2,9 @@
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using API.Constants;
using API.Entities;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.StaticFiles;
namespace API.Services;
@ -11,15 +13,18 @@ public interface IDownloadService
{
Task<(byte[], string, string)> GetFirstFileDownload(IEnumerable<MangaFile> files);
string GetContentTypeFromFile(string filepath);
Task<bool> HasDownloadPermission(AppUser user);
}
public class DownloadService : IDownloadService
{
private readonly IDirectoryService _directoryService;
private readonly UserManager<AppUser> _userManager;
private readonly FileExtensionContentTypeProvider _fileTypeProvider = new FileExtensionContentTypeProvider();
public DownloadService(IDirectoryService directoryService)
public DownloadService(IDirectoryService directoryService, UserManager<AppUser> userManager)
{
_directoryService = directoryService;
_userManager = userManager;
}
/// <summary>
@ -53,4 +58,10 @@ public class DownloadService : IDownloadService
return contentType;
}
public async Task<bool> HasDownloadPermission(AppUser user)
{
var roles = await _userManager.GetRolesAsync(user);
return roles.Contains(PolicyConstants.DownloadRole) || roles.Contains(PolicyConstants.AdminRole);
}
}

3
API/Services/Tasks/StatsService.cs
View File

@ -99,11 +99,12 @@ public class StatsService : IStatsService
public async Task<ServerInfoDto> GetServerInfo()
{
var installId = await _unitOfWork.SettingsRepository.GetSettingAsync(ServerSettingKey.InstallId);
var installVersion = await _unitOfWork.SettingsRepository.GetSettingAsync(ServerSettingKey.InstallVersion);
var serverInfo = new ServerInfoDto
{
InstallId = installId.Value,
Os = RuntimeInformation.OSDescription,
KavitaVersion = BuildInfo.Version.ToString(),
KavitaVersion = installVersion.Value,
DotnetVersion = Environment.Version.ToString(),
IsDocker = new OsInfo(Array.Empty<IOsVersionAdapter>()).IsDocker,
NumOfCores = Math.Max(Environment.ProcessorCount, 1),

24
API/Startup.cs
View File

@ -8,6 +8,7 @@ using System.Threading.Tasks;
using API.Constants;
using API.Data;
using API.Entities;
using API.Entities.Enums;
using API.Extensions;
using API.Middleware;
using API.Services;
@ -148,13 +149,19 @@ namespace API
// Apply all migrations on startup
var logger = serviceProvider.GetRequiredService<ILogger<Program>>();
var userManager = serviceProvider.GetRequiredService<UserManager<AppUser>>();
var context = serviceProvider.GetRequiredService<DataContext>();
await MigrateBookmarks.Migrate(directoryService, unitOfWork,
logger, cacheService);
// Only run this if we are upgrading
await MigrateChangePasswordRoles.Migrate(unitOfWork, userManager);
// Update the version in the DB after all migrations are run
var installVersion = await unitOfWork.SettingsRepository.GetSettingAsync(ServerSettingKey.InstallVersion);
installVersion.Value = BuildInfo.Version.ToString();
unitOfWork.SettingsRepository.Update(installVersion);
await unitOfWork.CommitAsync();
}).GetAwaiter()
.GetResult();
}
@ -206,21 +213,6 @@ namespace API
app.UseDefaultFiles();
// This is not implemented completely. Commenting out until implemented
// var service = serviceProvider.GetRequiredService<IUnitOfWork>();
// var settings = service.SettingsRepository.GetSettingsDto();
// if (!string.IsNullOrEmpty(settings.BaseUrl) && !settings.BaseUrl.Equals("/"))
// {
// var path = !settings.BaseUrl.StartsWith("/")
// ? $"/{settings.BaseUrl}"
// : settings.BaseUrl;
// path = !path.EndsWith("/")
// ? $"{path}/"
// : path;
// app.UsePathBase(path);
// Console.WriteLine("Starting with base url as " + path);
// }
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = new FileExtensionContentTypeProvider()

24
UI/Web/package-lock.json generated
View File

@ -8995,9 +8995,9 @@
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"minipass": {
"version": "3.1.6",
@ -9224,9 +9224,9 @@
}
},
"node-forge": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
"integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz",
"integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==",
"dev": true
},
"node-gyp": {
@ -10498,8 +10498,7 @@
"dependencies": {
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"resolved": "",
"dev": true
},
"strip-ansi": {
@ -10704,8 +10703,7 @@
"dependencies": {
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"resolved": "",
"dev": true
},
"ansi-styles": {
@ -12296,9 +12294,9 @@
}
},
"url-parse": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
"integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
"requires": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"

18
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts
View File

@ -101,6 +101,8 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.libraryService.getLibraryNames().pipe(takeUntil(this.onDestroy)).subscribe(names => {
this.libraryName = names[this.series.libraryId];
});
this.initSeries = Object.assign({}, this.series);
this.editSeriesForm = this.fb.group({
@ -217,10 +219,14 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
return {id: 0, title: title, promoted: false, coverImage: '', summary: '', coverImageLocked: false };
});
this.collectionTagSettings.compareFn = (options: CollectionTag[], filter: string) => {
console.log('compareFN:')
console.log('options: ', options);
console.log('filter: ', filter);
console.log('results: ', options.filter(m => this.utilityService.filter(m.title, filter)));
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.collectionTagSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.id == b.id;
this.collectionTagSettings.selectionCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.title === b.title;
}
if (this.metadata.collectionTags) {
@ -248,7 +254,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.tagsSettings.addTransformFn = ((title: string) => {
return {id: 0, title: title };
});
this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => {
this.tagsSettings.selectionCompareFn = (a: Tag, b: Tag) => {
return a.id == b.id;
}
@ -272,7 +278,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.genreSettings.compareFn = (options: Genre[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => {
this.genreSettings.selectionCompareFn = (a: Genre, b: Genre) => {
return a.title == b.title;
}
@ -316,7 +322,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.languageSettings.fetchFn = (filter: string) => of(this.validLanguages)
.pipe(map(items => this.languageSettings.compareFn(items, filter)));
this.languageSettings.singleCompareFn = (a: Language, b: Language) => {
this.languageSettings.selectionCompareFn = (a: Language, b: Language) => {
return a.isoCode == b.isoCode;
}
@ -366,7 +372,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
personSettings.singleCompareFn = (a: Person, b: Person) => {
personSettings.selectionCompareFn = (a: Person, b: Person) => {
return a.name == b.name && a.role == b.role;
}
personSettings.fetchFn = (filter: string) => {

2
UI/Web/src/app/events-widget/events-widget.component.ts
View File

@ -110,7 +110,7 @@ export class EventsWidgetComponent implements OnInit, OnDestroy {
break;
case 'ended':
data = this.progressEventsSource.getValue();
data = data.filter(m => m.name !== message.name); // This does not work // && m.title !== message.title
data = data.filter(m => m.name !== message.name);
this.progressEventsSource.next(data);
this.activeEvents = Math.max(this.activeEvents - 1, 0);
break;

4
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.scss
View File

@ -42,10 +42,10 @@ img, .full-width {
}
.bookmark-effect {
animation: bookmark 1s cubic-bezier(0.165, 0.84, 0.44, 1);
animation: infinite-scroll-bookmark 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes bookmark {
@keyframes infinite-scroll-bookmark {
0%, 100% {
filter: opacity(1);
}

39
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.ts
View File

@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
import { Component, ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges } from '@angular/core';
import { BehaviorSubject, fromEvent, merge, ReplaySubject, Subject } from 'rxjs';
import { debounceTime, take, takeUntil } from 'rxjs/operators';
import { ScrollService } from 'src/app/scroll.service';
import { ReaderService } from '../../_services/reader.service';
import { PAGING_DIRECTION } from '../_models/reader-enums';
import { WebtoonImage } from '../_models/webtoon-image';
@ -93,7 +94,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
/**
* The minimum width of images in webtoon. On image loading, this is checked and updated. All images will get this assigned to them for rendering.
*/
webtoonImageWidth: number = window.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth;
webtoonImageWidth: number = window.innerWidth || this.document.body.clientWidth || this.document.documentElement.clientWidth;
/**
* Used to tell if a scrollTo() operation is in progress
*/
@ -145,7 +146,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
get areImagesWiderThanWindow() {
let [_, innerWidth] = this.getInnerDimensions();
return this.webtoonImageWidth > (innerWidth || document.documentElement.clientWidth);
return this.webtoonImageWidth > (innerWidth || document.body.clientWidth);
}
@ -153,7 +154,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private readerService: ReaderService, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {
constructor(private readerService: ReaderService, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, private scrollService: ScrollService) {
// This will always exist at this point in time since this is used within manga reader
const reader = document.querySelector('.reader');
if (reader !== null) {
@ -230,7 +231,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
recalculateImageWidth() {
const [_, innerWidth] = this.getInnerDimensions();
this.webtoonImageWidth = innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
this.webtoonImageWidth = innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
}
getVerticalOffset() {
@ -244,8 +245,9 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
return (offset
|| document.body.scrollTop
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0);
|| 0);
}
/**
@ -290,19 +292,20 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
getTotalHeight() {
let totalHeight = 0;
document.querySelectorAll('img[id^="page-"]').forEach(img => totalHeight += img.getBoundingClientRect().height);
return totalHeight;
return Math.round(totalHeight);
}
getTotalScroll() {
if (this.isFullscreenMode) {
return this.readerElemRef.nativeElement.offsetHeight + this.readerElemRef.nativeElement.scrollTop;
}
return document.documentElement.offsetHeight + document.documentElement.scrollTop;
return document.body.offsetHeight + document.body.scrollTop;
}
getScrollTop() {
if (this.isFullscreenMode) {
return this.readerElemRef.nativeElement.scrollTop;
}
return document.documentElement.scrollTop;
return document.body.scrollTop;
}
checkIfShouldTriggerContinuousReader() {
@ -316,14 +319,14 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (this.atTop && this.pageNum > 0) {
this.atTop = false;
}
if (totalScroll === totalHeight && !this.atBottom) {
this.atBottom = true;
this.setPageNum(this.totalPages);
// Scroll user back to original location
this.previousScrollHeightMinusTop = this.getScrollTop();
requestAnimationFrame(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
requestAnimationFrame(() => document.body.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
} else if (totalScroll >= totalHeight + SPACER_SCROLL_INTO_PX && this.atBottom) {
// This if statement will fire once we scroll into the spacer at all
this.loadNextChapter.emit();
@ -335,8 +338,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
this.atTop = true;
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollHeight - document.documentElement.scrollTop;
requestAnimationFrame(() => window.scrollTo(0, SPACER_SCROLL_INTO_PX)); // TODO: does this need to be fullscreen protected?
this.previousScrollHeightMinusTop = document.body.scrollHeight - document.body.scrollTop;
const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
requestAnimationFrame(() => this.scrollService.scrollTo((SPACER_SCROLL_INTO_PX / 2), reader));
} else if (this.getScrollTop() < 5 && this.pageNum === 0 && this.atTop) {
// If already at top, then we moving on
this.loadPrevChapter.emit();
@ -377,8 +382,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
return (rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (innerHeight || document.documentElement.clientHeight) &&
rect.left <= (innerWidth || document.documentElement.clientWidth)
rect.top <= (innerHeight || document.body.clientHeight) &&
rect.left <= (innerWidth || document.body.clientWidth)
);
}
@ -398,10 +403,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (innerHeight || document.documentElement.clientHeight) &&
rect.left <= (innerWidth || document.documentElement.clientWidth)
rect.top <= (innerHeight || document.body.clientHeight) &&
rect.left <= (innerWidth || document.body.clientWidth)
) {
const topX = (innerHeight || document.documentElement.clientHeight);
const topX = (innerHeight || document.body.clientHeight);
return Math.abs(rect.top / topX) <= 0.25;
}
return false;

3
UI/Web/src/app/manga-reader/manga-reader.component.html
View File

@ -19,6 +19,7 @@
<span class="visually-hidden">Keyboard Shortcuts Modal</span>
</button>
<!-- {{this.pageNum}} -->
{{readerService.imageUrlToPageNum(canvasImage.src)}}<ng-container *ngIf="ShouldRenderDoublePage && (this.pageNum + 1 <= maxPages - 1 && this.pageNum > 0)"> - {{PageNumber + 1}}</ng-container>
<button class="btn btn-icon btn-small" role="checkbox" [attr.aria-checked]="isCurrentPageBookmarked" title="{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}" (click)="bookmarkPage()"><i class="{{isCurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i><span class="visually-hidden">{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}</span></button>
</div>
@ -154,7 +155,7 @@
</div>
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<div class="col-md-6 col-sm-12" *ngIf="false">
<label for="layout-mode" class="form-label">Layout Mode</label>
<select class="form-control" id="page-fitting" formControlName="layoutMode">
<option [value]="opt.value" *ngFor="let opt of layoutModes">{{opt.text}}</option>

13
UI/Web/src/app/manga-reader/manga-reader.component.ts
View File

@ -851,10 +851,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const notInSplit = this.currentImageSplitPart !== (this.isSplitLeftToRight() ? SPLIT_PAGE_PART.RIGHT_PART : SPLIT_PAGE_PART.LEFT_PART);
const pageAmount = (this.layoutMode !== LayoutMode.Single && !this.isCoverImage()) ? 2: 1;
// If the prev page before we change current page is a cover image, we actually are skipping a page
console.log('Page ', this.PageNumber, ' is cover image: ', this.isCoverImage(this.cachedImages.prev()))
console.log('Page ', this.pageNum, ' is cover image: ', this.isCoverImage())
const pageAmount = (this.layoutMode !== LayoutMode.Single && !this.isCoverImage(this.cachedImages.prev())) ? 2: 1;
// BUG: isCoverImage works on canvasImage, where we need to know if the previous image is a cover image or not.
console.log('pageAmt: ', pageAmount);
if ((this.pageNum - 1 < 0 && notInSplit) || this.isLoading) {
if (this.isLoading) { return; }
// Move to next volume/chapter automatically
@ -1021,8 +1024,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.generalSettingsForm.get('fittingOption')?.setValue(newScale, {emitEvent: false});
}
isCoverImage() {
return this.canvasImage.width > this.canvasImage.height;
isCoverImage(elem?: HTMLImageElement) {
if (elem) return elem.width > elem.height;
const element = elem || this.canvasImage;
return element.width > element.height;
}

18
UI/Web/src/app/metadata-filter/metadata-filter.component.ts
View File

@ -201,7 +201,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.formatSettings.singleCompareFn = (a: FilterItem<MangaFormat>, b: FilterItem<MangaFormat>) => {
this.formatSettings.selectionCompareFn = (a: FilterItem<MangaFormat>, b: FilterItem<MangaFormat>) => {
return a.title == b.title;
}
@ -225,7 +225,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.librarySettings.compareFn = (options: Library[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
this.librarySettings.singleCompareFn = (a: Library, b: Library) => {
this.librarySettings.selectionCompareFn = (a: Library, b: Library) => {
return a.name == b.name;
}
@ -252,7 +252,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.genreSettings.compareFn = (options: Genre[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => {
this.genreSettings.selectionCompareFn = (a: Genre, b: Genre) => {
return a.title == b.title;
}
@ -279,7 +279,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.ageRatingSettings.singleCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => {
this.ageRatingSettings.selectionCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => {
return a.title == b.title;
}
@ -306,7 +306,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.publicationStatusSettings.singleCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => {
this.publicationStatusSettings.selectionCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => {
return a.title == b.title;
}
@ -332,7 +332,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.tagsSettings.fetchFn = (filter: string) => this.metadataService.getAllTags(this.filter.libraries)
.pipe(map(items => this.tagsSettings.compareFn(items, filter)));
this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => {
this.tagsSettings.selectionCompareFn = (a: Tag, b: Tag) => {
return a.id == b.id;
}
@ -358,7 +358,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.languageSettings.fetchFn = (filter: string) => this.metadataService.getAllLanguages(this.filter.libraries)
.pipe(map(items => this.languageSettings.compareFn(items, filter)));
this.languageSettings.singleCompareFn = (a: Language, b: Language) => {
this.languageSettings.selectionCompareFn = (a: Language, b: Language) => {
return a.isoCode == b.isoCode;
}
@ -384,7 +384,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.collectionSettings.fetchFn = (filter: string) => this.collectionTagService.allTags()
.pipe(map(items => this.collectionSettings.compareFn(items, filter)));
this.collectionSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => {
this.collectionSettings.selectionCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.id == b.id;
}
@ -453,7 +453,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
personSettings.singleCompareFn = (a: Person, b: Person) => {
personSettings.selectionCompareFn = (a: Person, b: Person) => {
return a.name == b.name && a.role == b.role;
}
personSettings.fetchFn = (filter: string) => {

2
UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.html
View File

@ -4,7 +4,7 @@
<ng-content select="[title]"></ng-content>
<ng-content select="[subtitle]"></ng-content>
</div>
<div class="col mr-auto">
<div class="col mr-auto hide-if-empty">
<ng-content select="[main]"></ng-content>
</div>
<div class="col" *ngIf="hasFilter">

3
UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss
View File

@ -0,0 +1,3 @@
.hide-if-empty:empty {
display: none;
}

8
UI/Web/src/app/typeahead/typeahead-settings.ts
View File

@ -28,13 +28,15 @@ export class TypeaheadSettings<T> {
*/
savedData!: T[] | T;
/**
* Function to compare the elements. Should return all elements that fit the matching criteria. This is only used with non-Observable based fetchFn, but must be defined for all uses of typeahead (TODO)
* Function to compare the elements. Should return all elements that fit the matching criteria.
* This is only used with non-Observable based fetchFn, but must be defined for all uses of typeahead (TODO)
*/
compareFn!: ((optionList: T[], filter: string) => T[]);
/**
* Function which is used for comparing objects when keeping track of state. Useful over shallow equal when you have image urls that have random numbers on them.
* Function which is used for comparing objects when keeping track of state.
* Useful over shallow equal when you have image urls that have random numbers on them.
*/
singleCompareFn?: SelectionCompareFn<T>;
selectionCompareFn?: SelectionCompareFn<T>;
/**
* Function to fetch the data from the server. If data is mainatined in memory, wrap in an observable.
*/

41
UI/Web/src/app/typeahead/typeahead.component.ts
View File

@ -1,4 +1,5 @@
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable, of, ReplaySubject, Subject } from 'rxjs';
import { debounceTime, filter, map, shareReplay, switchMap, take, takeUntil, tap } from 'rxjs/operators';
@ -168,7 +169,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private renderer2: Renderer2) { }
constructor(private renderer2: Renderer2, @Inject(DOCUMENT) private document: Document) { }
ngOnDestroy(): void {
this.onDestroy.next();
@ -224,9 +225,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
let results: Observable<any[]>;
if (Array.isArray(this.settings.fetchFn)) {
const filteredArray = this.settings.compareFn(this.settings.fetchFn, val.trim());
results = of(filteredArray).pipe(map((items: any[]) => items.filter(item => this.filterSelected(item))));
results = of(filteredArray).pipe(takeUntil(this.onDestroy), map((items: any[]) => items.filter(item => this.filterSelected(item))));
} else {
results = this.settings.fetchFn(val.trim()).pipe(map((items: any[]) => items.filter(item => this.filterSelected(item))));
results = this.settings.fetchFn(val.trim()).pipe(takeUntil(this.onDestroy), map((items: any[]) => items.filter(item => this.filterSelected(item))));
}
return results;
@ -234,10 +235,11 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
tap((val) => {
this.isLoadingOptions = false;
this.focusedIndex = 0;
setTimeout(() => {
this.updateShowAddItem(val);
this.updateHighlight();
}, 10);
this.updateShowAddItem(val);
// setTimeout(() => {
// this.updateShowAddItem(val);
// this.updateHighlight();
// }, 10);
setTimeout(() => this.updateHighlight(), 20);
}),
shareReplay(),
@ -279,7 +281,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
case KEY_CODES.DOWN_ARROW:
case KEY_CODES.RIGHT_ARROW:
{
this.focusedIndex = Math.min(this.focusedIndex + 1, document.querySelectorAll('.list-group-item').length - 1);
this.focusedIndex = Math.min(this.focusedIndex + 1, this.document.querySelectorAll('.list-group-item').length - 1);
this.updateHighlight();
break;
}
@ -292,14 +294,14 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
}
case KEY_CODES.ENTER:
{
document.querySelectorAll('.list-group-item').forEach((item, index) => {
this.document.querySelectorAll('.list-group-item').forEach((item, index) => {
if (item.classList.contains('active')) {
this.filteredOptions.pipe(take(1)).subscribe((res: any[]) => {
// This isn't giving back the filtered array, but everything
console.log(item.classList.contains('add-item'));
if (this.settings.addIfNonExisting && item.classList.contains('add-item')) {
this.addNewItem(this.typeaheadControl.value);
this.resetField();
this.focusedIndex = 0;
return;
}
@ -337,12 +339,12 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
}
toggleSelection(opt: any): void {
this.optionSelection.toggle(opt, undefined, this.settings.singleCompareFn);
this.optionSelection.toggle(opt, undefined, this.settings.selectionCompareFn);
this.selectedData.emit(this.optionSelection.selected());
}
removeSelectedOption(opt: any) {
this.optionSelection.toggle(opt, undefined, this.settings.singleCompareFn);
this.optionSelection.toggle(opt, undefined, this.settings.selectionCompareFn);
this.selectedData.emit(this.optionSelection.selected());
this.resetField();
}
@ -376,9 +378,14 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
this.onInputFocus(undefined);
}
/**
*
* @param item
* @returns True if the item is NOT selected already
*/
filterSelected(item: any) {
if (this.settings.unique && this.settings.multiple) {
return !this.optionSelection.isSelected(item, this.settings.singleCompareFn);
return !this.optionSelection.isSelected(item, this.settings.selectionCompareFn);
}
return true;
@ -402,7 +409,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
if (this.inputElem) {
// hack: To prevent multiple typeaheads from being open at once, click document then trigger the focus
document.querySelector('body')?.click();
this.document.body.click();
this.inputElem.nativeElement.focus();
this.hasFocus = true;
}
@ -422,7 +429,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
// Updates the highlight to focus on the selected item
updateHighlight() {
document.querySelectorAll('.list-group-item').forEach((item, index) => {
this.document.querySelectorAll('.list-group-item').forEach((item, index) => {
if (index === this.focusedIndex && !item.classList.contains('no-hover')) {
// apply active class
this.renderer2.addClass(item, 'active');
@ -438,6 +445,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
&& this.typeaheadControl.value.trim().length >= Math.max(this.settings.minCharacters, 1)
&& this.typeaheadControl.dirty
&& (typeof this.settings.compareFn == 'function' && this.settings.compareFn(options, this.typeaheadControl.value.trim()).length === 0);
console.log('show Add item: ', this.showAddItem);
console.log('compare func: ', this.settings.compareFn(options, this.typeaheadControl.value.trim()));
}

2
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View File

@ -68,7 +68,7 @@
</div>
<div class="row g-0">
<div class="col-md-6 col-sm-12 pe-2 mb-2">
<div class="col-md-6 col-sm-12 pe-2 mb-2" *ngIf="false">
<label for="settings-layoutmode-option" class="form-label">Layout Mode</label>&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="right" [ngbTooltip]="layoutModeTooltip" role="button" tabindex="0"></i>
<ng-template #layoutModeTooltip>Render a single image to the screen to two side-by-side images</ng-template>
<span class="visually-hidden" id="settings-layoutmode-option-help"><ng-container [ngTemplateOutlet]="layoutModeTooltip"></ng-container></span>

3
UI/Web/src/theme/components/_pagination.scss
View File

@ -10,7 +10,7 @@
border-color: var(--pagination-active-link-border-color);
&:hover {
color: var(--pagination-link-text-color);;
color: var(--pagination-link-text-color);
}
}
@ -21,6 +21,7 @@
&:hover {
color: var(--pagination-link-hover-color);
text-decoration: none;
}
}