Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Epub Reading Overlay Re-Design (#2156)

Browse Source 
* Removed DeviceId

* Dependency updates part 1

* Dependency updates part 2

* Dependency updates part 3

* Dependency updates part 4

* Dependency updates done. Updated all backend and UI ones.

* Refactored the book line overlay to sit at the top of the reader. It looks much better and will work a lot better for future work.

* Removed an event that was causing series detail to load extra data when it didn't need to after editing series metadata.

* Removed one more load request on series detail after updating edit series modal.
This commit is contained in:
Joe Milazzo 2023-07-23 15:35:16 -05:00 committed by GitHub
parent 96366adbc4
commit 9dc785f031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 575 additions and 771 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
API.Benchmark/API.Benchmark.csproj
View File

@ -10,8 +10,8 @@
</ItemGroup>
<ItemGroup>
<PackageReference Include="BenchmarkDotNet" Version="0.13.5" />
<PackageReference Include="BenchmarkDotNet.Annotations" Version="0.13.5" />
<PackageReference Include="BenchmarkDotNet" Version="0.13.6" />
<PackageReference Include="BenchmarkDotNet.Annotations" Version="0.13.6" />
<PackageReference Include="NSubstitute" Version="5.0.0" />
</ItemGroup>

2
API.Tests/API.Tests.csproj
View File

@ -6,7 +6,7 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="7.0.8" />
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="7.0.9" />
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.6.3" />
<PackageReference Include="Moq" Version="4.18.4" />
<PackageReference Include="NSubstitute" Version="5.0.0" />

18
API/API.csproj
View File

@ -66,23 +66,23 @@
<PackageReference Include="Hangfire.MaximumConcurrentExecutions" Version="1.1.0" />
<PackageReference Include="Hangfire.MemoryStorage.Core" Version="1.4.0" />
<PackageReference Include="Hangfire.Storage.SQLite" Version="0.3.4" />
<PackageReference Include="HtmlAgilityPack" Version="1.11.49" />
<PackageReference Include="HtmlAgilityPack" Version="1.11.50" />
<PackageReference Include="MarkdownDeep.NET.Core" Version="1.5.0.4" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.8" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="7.0.8" />
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="7.0.8" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.9" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="7.0.9" />
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="7.0.9" />
<PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.1.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="7.0.8">
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="7.0.9">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="7.0.8" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="7.0.9" />
<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="7.0.0" />
<PackageReference Include="Microsoft.IO.RecyclableMemoryStream" Version="2.3.2" />
<PackageReference Include="MimeTypeMapOfficial" Version="1.0.17" />
<PackageReference Include="Nager.ArticleNumber" Version="1.0.7" />
<PackageReference Include="NetVips" Version="2.3.1" />
<PackageReference Include="NetVips.Native" Version="8.14.2" />
<PackageReference Include="NetVips.Native" Version="8.14.3" />
<PackageReference Include="NReco.Logging.File" Version="1.1.6" />
<PackageReference Include="Serilog" Version="3.0.1" />
<PackageReference Include="Serilog.AspNetCore" Version="7.0.0" />
@ -100,8 +100,8 @@
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
<PackageReference Include="Swashbuckle.AspNetCore.Filters" Version="7.0.6" />
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.31.0" />
<PackageReference Include="Swashbuckle.AspNetCore.Filters" Version="7.0.8" />
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.32.0" />
<PackageReference Include="System.IO.Abstractions" Version="19.2.29" />
<PackageReference Include="System.Drawing.Common" Version="7.0.0" />
<PackageReference Include="VersOne.Epub" Version="3.3.1" />

20
API/Services/SeriesService.cs
View File

@ -217,22 +217,14 @@ public class SeriesService : ISeriesService
// Trigger code to cleanup tags, collections, people, etc
await _taskScheduler.CleanupDbEntries();
if (updateSeriesMetadataDto.CollectionTags != null)
if (updateSeriesMetadataDto.CollectionTags == null) return true;
foreach (var tag in updateSeriesMetadataDto.CollectionTags)
{
foreach (var tag in updateSeriesMetadataDto.CollectionTags)
{
await _eventHub.SendMessageAsync(MessageFactory.SeriesAddedToCollection,
MessageFactory.SeriesAddedToCollectionEvent(tag.Id,
updateSeriesMetadataDto.SeriesMetadata.SeriesId), false);
}
await _eventHub.SendMessageAsync(MessageFactory.ScanSeries,
MessageFactory.ScanSeriesEvent(series.LibraryId, series.Id, series.Name), false);
await _unitOfWork.CollectionTagRepository.RemoveTagsWithoutSeries();
return true;
await _eventHub.SendMessageAsync(MessageFactory.SeriesAddedToCollection,
MessageFactory.SeriesAddedToCollectionEvent(tag.Id,
updateSeriesMetadataDto.SeriesMetadata.SeriesId), false);
}
return true;
}
catch (Exception ex)
{

28
Kavita.Common/HashUtil.cs
View File

@ -1,10 +1,5 @@
using System;
using System.Diagnostics;
using System.Text;
using System.Text.RegularExpressions;
using DeviceId;
using DeviceId.Components;
using Kavita.Common.EnvironmentInfo;
namespace Kavita.Common;
@ -62,27 +57,4 @@ public static class HashUtil
return id.ToString();
}
private static string RunAndCapture(string filename, string args)
{
var p = new Process
{
StartInfo =
{
FileName = filename,
Arguments = args,
UseShellExecute = false,
CreateNoWindow = true,
RedirectStandardOutput = true
}
};
p.Start();
// To avoid deadlocks, always read the output stream first and then wait.
var output = p.StandardOutput.ReadToEnd();
p.WaitForExit(1000);
return output;
}
}

5
Kavita.Common/Kavita.Common.csproj
View File

@ -10,11 +10,6 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="DeviceId" Version="6.3.0" />
<PackageReference Include="DeviceId.Linux" Version="6.3.0" />
<PackageReference Include="DeviceId.Mac" Version="6.2.0" />
<PackageReference Include="DeviceId.Windows" Version="6.2.0" />
<PackageReference Include="DeviceId.Windows.Wmi" Version="6.2.1" />
<PackageReference Include="DotNet.Glob" Version="3.1.3" />
<PackageReference Include="Flurl.Http" Version="3.2.4" />
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="7.0.0" />

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

File diff suppressed because it is too large Load Diff

54
UI/Web/package.json
View File

@ -12,24 +12,24 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.2",
"@angular/cdk": "^16.0.1",
"@angular/common": "^16.0.2",
"@angular/compiler": "^16.0.2",
"@angular/core": "^16.0.2",
"@angular/forms": "^16.0.2",
"@angular/localize": "^16.0.2",
"@angular/platform-browser": "^16.0.2",
"@angular/platform-browser-dynamic": "^16.0.2",
"@angular/router": "^16.0.2",
"@angular/animations": "^16.1.6",
"@angular/cdk": "^16.1.5",
"@angular/common": "^16.1.6",
"@angular/compiler": "^16.1.6",
"@angular/core": "^16.1.6",
"@angular/forms": "^16.1.6",
"@angular/localize": "^16.1.6",
"@angular/platform-browser": "^16.1.6",
"@angular/platform-browser-dynamic": "^16.1.6",
"@angular/router": "^16.1.6",
"@fortawesome/fontawesome-free": "^6.4.0",
"@iharbeck/ngx-virtual-scroller": "^16.0.0",
"@iplab/ngx-file-upload": "^16.0.1",
"@microsoft/signalr": "^7.0.5",
"@microsoft/signalr": "^7.0.9",
"@ng-bootstrap/ng-bootstrap": "^15.1.0",
"@popperjs/core": "^2.11.7",
"@swimlane/ngx-charts": "^20.1.2",
"@tweenjs/tween.js": "^20.0.3",
"@tweenjs/tween.js": "^21.0.0",
"@types/file-saver": "^2.0.5",
"bootstrap": "^5.2.3",
"eventsource": "^2.0.2",
@ -38,8 +38,8 @@
"ng-circle-progress": "^1.7.1",
"ngx-color-picker": "^14.0.0",
"ngx-extended-pdf-viewer": "^16.2.16",
"ngx-file-drop": "^15.0.0",
"ngx-slider-v2": "^15.0.4",
"ngx-file-drop": "^16.0.0",
"ngx-slider-v2": "^16.0.2",
"ngx-toastr": "^17.0.2",
"rxjs": "^7.8.0",
"screenfull": "^6.0.2",
@ -48,22 +48,22 @@
"zone.js": "^0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.2",
"@angular-eslint/builder": "^16.0.2",
"@angular-eslint/eslint-plugin": "^16.0.2",
"@angular-eslint/eslint-plugin-template": "^16.0.2",
"@angular-eslint/schematics": "^16.0.2",
"@angular-eslint/template-parser": "^16.0.2",
"@angular/cli": "^16.0.2",
"@angular/compiler-cli": "^16.0.2",
"@angular-devkit/build-angular": "^16.1.5",
"@angular-eslint/builder": "^16.1.0",
"@angular-eslint/eslint-plugin": "^16.1.0",
"@angular-eslint/eslint-plugin-template": "^16.1.0",
"@angular-eslint/schematics": "^16.1.0",
"@angular-eslint/template-parser": "^16.1.0",
"@angular/cli": "^16.1.5",
"@angular/compiler-cli": "^16.1.6",
"@types/d3": "^7.4.0",
"@types/node": "^20.2.1",
"@typescript-eslint/eslint-plugin": "5.48.1",
"@typescript-eslint/parser": "5.59.6",
"eslint": "^8.41.0",
"@types/node": "^20.4.4",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"eslint": "^8.45.0",
"karma-coverage": "~2.2.0",
"ts-node": "~10.9.1",
"typescript": "~5.0.4",
"typescript": "^5.1.6",
"webpack-bundle-analyzer": "^4.8.0"
}
}

74
UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.html
View File

@ -1,46 +1,44 @@
<div #container class="overlay" *ngIf="selectedText.length > 0 || mode !== BookLineOverlayMode.None"
[ngStyle]="{ 'top.px': overlayPosition.top, 'left.px': overlayPosition.left }">
<div class="overlay" *ngIf="selectedText.length > 0 || mode !== BookLineOverlayMode.None">
<!-- Todo: close button or something -->
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="BookLineOverlayMode.None">
<div class="row g-0">
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="copy()">
<i class="fa-solid fa-copy" aria-hidden="true"></i>
<div>Copy</div>
</button>
</div>
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="switchMode(BookLineOverlayMode.Bookmark)">
<i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
<div>Bookmark</div>
</button>
</div>
<div class="row g-0 justify-content-between">
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="BookLineOverlayMode.None">
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="copy()">
<i class="fa-solid fa-copy" aria-hidden="true"></i>
<div>Copy</div>
</button>
</div>
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="switchMode(BookLineOverlayMode.Bookmark)">
<i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
<div>Bookmark</div>
</button>
</div>
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="reset()">
<i class="fa-solid fa-times-circle" aria-hidden="true"></i>
<span class="visually-hidden">Close</span>
</button>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="BookLineOverlayMode.Bookmark">
<form [formGroup]="bookmarkForm">
<div class="input-group">
<input id="bookmark-name" class="form-control" formControlName="name" type="text" placeholder="Bookmark Name"
[class.is-invalid]="bookmarkForm.get('name')?.invalid && bookmarkForm.get('name')?.touched" aria-describedby="bookmark-name-btn">
<button class="btn btn-outline-primary" id="bookmark-name-btn" (click)="createPTOC()">Save</button>
<div id="bookmark-name-validations" class="invalid-feedback" *ngIf="bookmarkForm.dirty || bookmarkForm.touched">
<div *ngIf="bookmarkForm.get('name')?.errors?.required" role="status">
This field is required
<div class="col-auto">
<button class="btn btn-icon btn-sm" (click)="reset()">
<i class="fa-solid fa-times-circle" aria-hidden="true"></i>
<div>Close</div>
</button>
</div>
</ng-container>
<ng-container *ngSwitchCase="BookLineOverlayMode.Bookmark">
<form [formGroup]="bookmarkForm">
<div class="input-group">
<input id="bookmark-name" class="form-control" formControlName="name" type="text" placeholder="Bookmark Name"
[class.is-invalid]="bookmarkForm.get('name')?.invalid && bookmarkForm.get('name')?.touched" aria-describedby="bookmark-name-btn">
<button class="btn btn-outline-primary" id="bookmark-name-btn" (click)="createPTOC()">Save</button>
<div id="bookmark-name-validations" class="invalid-feedback" *ngIf="bookmarkForm.dirty || bookmarkForm.touched">
<div *ngIf="bookmarkForm.get('name')?.errors?.required" role="status">
This field is required
</div>
</div>
</div>
</div>
</form>
</form>
</ng-container>
</ng-container>
</ng-container>
</div>
</div>

9
UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.scss
View File

@ -1,9 +1,8 @@
.overlay {
position: absolute;
background-color: rgb(0, 0, 0);
color: white;
background-color: var(--br-actionbar-bg-color);
color: var(--bs-body-bg);
padding: 5px;
border-radius: 4px;
max-width: 285px; /* Optional: limit the width of the overlay box */
z-index: 9999; /* Ensure it's displayed above other elements */
z-index: 9999;
width: 100vw;
}

24
UI/Web/src/app/book-reader/_components/book-line-overlay/book-line-overlay.component.ts
View File

@ -40,8 +40,6 @@ export class BookLineOverlayComponent implements OnInit {
xPath: string = '';
selectedText: string = '';
previousSelection: string = '';
overlayPosition: { top: number; left: number } = { top: 0, left: 0 };
mode: BookLineOverlayMode = BookLineOverlayMode.None;
bookmarkForm: FormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
@ -81,23 +79,13 @@ export class BookLineOverlayComponent implements OnInit {
this.selectedText = selection ? selection.toString().trim() : '';
if (this.selectedText.length > 0 && this.mode === BookLineOverlayMode.None) {
// Get x,y coord so we can position overlay
if (event.target) {
const range = selection!.getRangeAt(0)
const rect = range.getBoundingClientRect();
const box = getBoundingClientRect(event.target as Element);
this.xPath = this.readerService.getXPathTo(event.target);
if (this.xPath !== '') {
this.xPath = '//' + this.xPath;
}
this.overlayPosition = {
top: rect.top + window.scrollY - 64 - rect.height, // 64px is the top menu area
left: rect.left + window.scrollX + 30 // Adjust 10 to center the overlay box horizontally
};
event.preventDefault();
event.stopPropagation();
this.xPath = this.readerService.getXPathTo(event.target);
if (this.xPath !== '') {
this.xPath = '//' + this.xPath;
}
event.preventDefault();
event.stopPropagation();
}
this.cdRef.markForCheck();
}

20
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
View File

@ -2,6 +2,14 @@
<div class="fixed-top" #stickyTop>
<a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>
<app-book-line-overlay [parent]="bookContainerElemRef" *ngIf="page !== undefined"
[libraryId]="libraryId"
[volumeId]="volumeId"
[chapterId]="chapterId"
[seriesId]="seriesId"
[pageNumber]="pageNum"
(refreshToC)="refreshPersonalToC()">
</app-book-line-overlay>
<app-drawer #commentDrawer="drawer" [(isOpen)]="drawerOpen" [options]="{topOffset: topOffset}">
<h5 header>
Book Settings
@ -89,7 +97,7 @@
</app-drawer>
</div>
<div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}" [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading ? true : false">
<div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}" [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading">
<ng-container *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe" [ngClass]="{'immersive' : immersiveMode}"
@ -144,14 +152,4 @@
</button>
</div>
</ng-template>
</div>
<app-book-line-overlay [parent]="bookContainerElemRef" *ngIf="page !== undefined"
[libraryId]="libraryId"
[volumeId]="volumeId"
[chapterId]="chapterId"
[seriesId]="seriesId"
[pageNumber]="pageNum"
(refreshToC)="refreshPersonalToC()">
</app-book-line-overlay>

1
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View File

@ -1595,4 +1595,5 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.refreshPToC.emit();
}
protected readonly undefined = undefined;
}

19
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts
View File

@ -71,7 +71,7 @@ import { TagBadgeComponent } from '../../../shared/tag-badge/tag-badge.component
import { CardActionablesComponent } from '../../../cards/card-item/card-actionables/card-actionables.component';
import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
interface RelatedSeris {
interface RelatedSeriesPair {
series: Series;
relation: RelationKind;
}
@ -153,7 +153,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
* Track by function for Chapter to tell when to refresh card data
*/
trackByChapterIdentity = (index: number, item: Chapter) => `${item.title}_${item.number}_${item.volumeId}_${item.pagesRead}`;
trackByRelatedSeriesIdentify = (index: number, item: RelatedSeris) => `${item.series.name}_${item.series.libraryId}_${item.series.pagesRead}_${item.relation}`;
trackByRelatedSeriesIdentify = (index: number, item: RelatedSeriesPair) => `${item.series.name}_${item.series.libraryId}_${item.series.pagesRead}_${item.relation}`;
trackBySeriesIdentify = (index: number, item: Series) => `${item.name}_${item.libraryId}_${item.pagesRead}`;
trackByStoryLineIdentity = (index: number, item: StoryLineItem) => {
if (item.isChapter) {
@ -174,7 +174,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
/**
* Related Series. Sorted by backend
*/
relations: Array<RelatedSeris> = [];
relations: Array<RelatedSeriesPair> = [];
/**
* Recommended Series
*/
@ -342,7 +342,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
this.libraryId = parseInt(libraryId, 10);
this.seriesImage = this.imageService.getSeriesCoverImage(this.seriesId);
this.cdRef.markForCheck();
this.loadSeries(this.seriesId);
this.loadSeries(this.seriesId, true);
this.pageExtrasGroup.get('renderMode')?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((val: PageLayoutMode | null) => {
if (val == null) return;
@ -493,7 +493,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
});
}
loadSeries(seriesId: number) {
loadSeries(seriesId: number, loadExternal: boolean = false) {
this.seriesService.getMetadata(seriesId).subscribe(metadata => {
this.seriesMetadata = metadata;
this.cdRef.markForCheck();
@ -517,7 +517,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
this.libraryType = results.libType;
this.series = results.series;
if (this.libraryType !== LibraryType.Comic) {
if (this.libraryType !== LibraryType.Comic && loadExternal) {
this.loadReviews(true);
}
@ -591,7 +591,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
}
createRelatedSeries(series: Series, relation: RelationKind) {
return {series, relation} as RelatedSeris;
return {series, relation} as RelatedSeriesPair;
}
/**
@ -751,11 +751,6 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
modalRef.closed.subscribe((closeResult: {success: boolean, series: Series, coverImageUpdate: boolean}) => {
window.scrollTo(0, 0);
if (closeResult.success) {
this.seriesService.getSeries(this.seriesId).subscribe(s => {
this.series = s;
this.cdRef.detectChanges();
});
this.loadSeries(this.seriesId);
}

2
openapi.json
View File

@ -7,7 +7,7 @@
"name": "GPL-3.0",
"url": "https://github.com/Kareadita/Kavita/blob/develop/LICENSE"
},
"version": "0.7.5.2"
"version": "0.7.5.4"
},
"servers": [
{