AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WebP Covers + Series Detail Enhancements (#1652)

Browse source 
* Implemented save covers as webp. Reworked screen to provide more information up front about webp and what browsers can support it.

* cleaned up pages to use compact numbering and made compact numbering expand into one decimal place (20.5K)

* Fixed an issue with adding new device

* If a book has an invalid language set, drop the language altogether rather than reading in a corrupted entry.

* Ensure genres and tags render alphabetically.

Improved support for partial volumes in Comic parser.

* Ensure all people, tags, collections, and genres are in alphabetical order.

* Moved some code to Extensions to clean up code.

* More unit tests

* Cleaned up release year filter css

* Tweaked some code in all series to make bulk deletes cleaner on the UI.

* Trying out want to read and unread count on series detail page

* Added Want to Read button for series page to make it easy to see when something is in want to read list and toggle it.

Added tooltips instead of title to buttons, but they don't style correctly.

Added a continue point under cover image.

* Code smells
This commit is contained in:
Joe Milazzo 2022-11-14 08:43:19 -06:00 • committed by GitHub
parent f907486c74
commit e75b208d59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 481 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/_models/series-detail/series-detail.ts
View file

@ -9,4 +9,6 @@ export interface SeriesDetail {
chapters: Array<Chapter>;
volumes: Array<Volume>;
storylineChapters: Array<Chapter>;
unreadCount: number;
totalCount: number;
}

4
UI/Web/src/app/_services/series.service.ts
View file

@ -130,6 +130,10 @@ export class SeriesService {
}));
}
isWantToRead(seriesId: number) {
return this.httpClient.get<boolean>(this.baseUrl + 'want-to-read?seriesId=' + seriesId, {responseType: 'text' as 'json'});
}
getOnDeck(libraryId: number = 0, pageNum?: number, itemsPerPage?: number, filter?: SeriesFilter) {
const data = this.filterUtilitySerivce.createSeriesFilter(filter);

1
UI/Web/src/app/admin/_models/server-settings.ts
View file

@ -10,6 +10,7 @@ export interface ServerSettings {
bookmarksDirectory: string;
emailServiceUrl: string;
convertBookmarkToWebP: boolean;
convertCoverToWebP: boolean;
enableSwaggerUi: boolean;
totalBackups: number;
totalLogs: number;

18
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html
View file

@ -1,15 +1,29 @@
<div class="container-fluid">
<form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined">
<div class="row g-0">
<p>WebP can drastically reduce space requirements for files. WebP is not supported on all browsers or versions. To learn if these settings are appropriate for your setup, visit <a href="https://caniuse.com/?search=webp" target="_blank" rel="noopener noreferrer">Can I Use</a>.</p>
<div class="col-md-6 col-sm-12 mb-3">
<label for="bookmark-webp" class="form-label" aria-describedby="collection-info">Save Bookmarks as WebP</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="convertBookmarkToWebPTooltip" role="button" tabindex="0"></i>
<ng-template #convertBookmarkToWebPTooltip>When saving bookmarks, covert them to WebP. WebP is not supported on Safari devices and will not render at all. WebP can drastically reduce space requirements for files.</ng-template>
<label for="bookmark-webp" class="form-label me-1" aria-describedby="settings-convertBookmarkToWebP-help">Save Bookmarks as WebP</label>
<i class="fa fa-info-circle" placement="right" [ngbTooltip]="convertBookmarkToWebPTooltip" role="button" tabindex="0"></i>
<ng-template #convertBookmarkToWebPTooltip>When saving bookmarks, covert them to WebP.</ng-template>
<span class="visually-hidden" id="settings-convertBookmarkToWebP-help"><ng-container [ngTemplateOutlet]="convertBookmarkToWebPTooltip"></ng-container></span>
<div class="form-check form-switch">
<input id="bookmark-webp" type="checkbox" class="form-check-input" formControlName="convertBookmarkToWebP" role="switch">
<label for="bookmark-webp" class="form-check-label" aria-describedby="settings-convertBookmarkToWebP-help">{{settingsForm.get('convertBookmarkToWebP')?.value ? 'WebP' : 'Original' }}</label>
</div>
</div>
<div class="col-md-6 col-sm-12 mb-3">
<label for="cover-webp" class="form-label me-1" aria-describedby="settings-convertCoverToWebP-help">Save Covers as WebP</label>
<i class="fa fa-info-circle" placement="right" [ngbTooltip]="convertCoverToWebPTooltip" role="button" tabindex="0"></i>
<ng-template #convertCoverToWebPTooltip>When generating covers, covert them to WebP.</ng-template>
<span class="visually-hidden" id="settings-convertCoverToWebP-help"><ng-container [ngTemplateOutlet]="convertBookmarkToWebPTooltip"></ng-container></span>
<div class="form-check form-switch">
<input id="cover-webp" type="checkbox" class="form-check-input" formControlName="convertCoverToWebP" role="switch">
<label for="cover-webp" class="form-check-label" aria-describedby="settings-convertCoverToWebP-help">{{settingsForm.get('convertCoverToWebP')?.value ? 'WebP' : 'Original' }}</label>
</div>
</div>
</div>
<div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">

3
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts
View file

@ -21,17 +21,20 @@ export class ManageMediaSettingsComponent implements OnInit {
this.settingsService.getServerSettings().pipe(take(1)).subscribe((settings: ServerSettings) => {
this.serverSettings = settings;
this.settingsForm.addControl('convertBookmarkToWebP', new FormControl(this.serverSettings.convertBookmarkToWebP, [Validators.required]));
this.settingsForm.addControl('convertCoverToWebP', new FormControl(this.serverSettings.convertCoverToWebP, [Validators.required]));
});
}
resetForm() {
this.settingsForm.get('convertBookmarkToWebP')?.setValue(this.serverSettings.convertBookmarkToWebP);
this.settingsForm.get('convertCoverToWebP')?.setValue(this.serverSettings.convertCoverToWebP);
this.settingsForm.markAsPristine();
}
async saveSettings() {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.convertBookmarkToWebP = this.settingsForm.get('convertBookmarkToWebP')?.value;
modelSettings.convertCoverToWebP = this.settingsForm.get('convertCoverToWebP')?.value;
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;

1
UI/Web/src/app/all-series/all-series.component.html
View file

@ -9,7 +9,6 @@
[isLoading]="loadingSeries"
[items]="series"
[trackByIdentity]="trackByIdentity"
[pagination]="pagination"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
[jumpBarKeys]="jumpbarKeys"

37
UI/Web/src/app/all-series/all-series.component.ts
View file

@ -1,4 +1,4 @@
import { Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
@ -13,13 +13,15 @@ import { Series } from '../_models/series';
import { FilterEvent, SeriesFilter } from '../_models/series-filter';
import { Action, ActionItem } from '../_services/action-factory.service';
import { ActionService } from '../_services/action.service';
import { JumpbarService } from '../_services/jumpbar.service';
import { EVENTS, Message, MessageHubService } from '../_services/message-hub.service';
import { SeriesService } from '../_services/series.service';
@Component({
selector: 'app-all-series',
templateUrl: './all-series.component.html',
styleUrls: ['./all-series.component.scss']
styleUrls: ['./all-series.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AllSeriesComponent implements OnInit, OnDestroy {
@ -85,7 +87,8 @@ export class AllSeriesComponent implements OnInit, OnDestroy {
private titleService: Title, private actionService: ActionService,
public bulkSelectionService: BulkSelectionService, private hubService: MessageHubService,
private utilityService: UtilityService, private route: ActivatedRoute,
private filterUtilityService: FilterUtilitiesService) {
private filterUtilityService: FilterUtilitiesService, private jumpbarService: JumpbarService,
private readonly cdRef: ChangeDetectorRef) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.titleService.setTitle('Kavita - All Series');
@ -93,6 +96,7 @@ export class AllSeriesComponent implements OnInit, OnDestroy {
this.pagination = this.filterUtilityService.pagination(this.route.snapshot);
[this.filterSettings.presets, this.filterSettings.openByDefault] = this.filterUtilityService.filterPresetsFromUrl(this.route.snapshot);
this.filterActiveCheck = this.filterUtilityService.createSeriesFilter();
this.cdRef.markForCheck();
}
ngOnInit(): void {
@ -131,33 +135,14 @@ export class AllSeriesComponent implements OnInit, OnDestroy {
loadPage() {
this.filterActive = !this.utilityService.deepEqual(this.filter, this.filterActiveCheck);
this.loadingSeries = true;
this.cdRef.markForCheck();
this.seriesService.getAllSeries(undefined, undefined, this.filter).pipe(take(1)).subscribe(series => {
this.series = series.result;
const keys: {[key: string]: number} = {};
series.result.forEach(s => {
let ch = s.name.charAt(0);
if (/\d|\#|!|%|@|\(|\)|\^|\*/g.test(ch)) {
ch = '#';
}
if (!keys.hasOwnProperty(ch)) {
keys[ch] = 0;
}
keys[ch] += 1;
});
this.jumpbarKeys = Object.keys(keys).map(k => {
return {
key: k,
size: keys[k],
title: k.toUpperCase()
}
}).sort((a, b) => {
if (a.key < b.key) return -1;
if (a.key > b.key) return 1;
return 0;
});
this.jumpbarKeys = this.jumpbarService.getJumpKeys(this.series, (s: Series) => s.name);
this.pagination = series.pagination;
this.loadingSeries = false;
window.scrollTo(0, 0);
this.cdRef.markForCheck();
});
}

4
UI/Web/src/app/cards/entity-info-cards/entity-info-cards.component.html
View file

@ -19,8 +19,8 @@
<ng-container *ngIf="totalPages > 0">
<div class="col-auto mb-2">
<app-icon-and-title label="Print Length" [clickable]="false" fontClasses="fa-regular fa-file-lines" title="Pages">
{{totalPages | number:''}} Pages
<app-icon-and-title label="Length" [clickable]="false" fontClasses="fa-regular fa-file-lines" title="Pages">
{{totalPages | compactNumber}} Pages
</app-icon-and-title>
</div>
<div class="vr d-none d-lg-block m-2"></div>

4
UI/Web/src/app/cards/series-info-cards/series-info-cards.component.html
View file

@ -71,8 +71,8 @@
</ng-container>
<ng-template #showPages>
<div class="d-none d-md-block col-lg-1 col-md-4 col-sm-4 col-4 mb-2">
<app-icon-and-title label="Print Length" [clickable]="false" fontClasses="fa-regular fa-file-lines">
{{series.pages | number:''}} Pages
<app-icon-and-title label="Length" [clickable]="false" fontClasses="fa-regular fa-file-lines">
{{series.pages | compactNumber}} Pages
</app-icon-and-title>
</div>
<div class="vr d-none d-lg-block m-2"></div>

4
UI/Web/src/app/metadata-filter/metadata-filter.component.html
View file

@ -328,10 +328,10 @@
<div class="col-md-2 me-3">
<form [formGroup]="releaseYearRange" class="d-flex justify-content-between">
<div class="mb-3">
<label for="release-year-min" class="form-label">Release Year</label>
<label for="release-year-min" class="form-label">Release</label>
<input type="text" id="release-year-min" formControlName="min" class="form-control" style="width: 62px" placeholder="Min">
</div>
<div style="margin-top: 37px !important; width: 49px;">
<div style="margin-top: 37px !important;">
<i class="fa-solid fa-minus" aria-hidden="true"></i>
</div>
<div class="mb-3" style="margin-top: 0.5rem">

3
UI/Web/src/app/pipe/compact-number.pipe.ts
View file

@ -3,7 +3,8 @@ import { Pipe, PipeTransform } from '@angular/core';
const formatter = new Intl.NumberFormat('en-GB', {
//@ts-ignore
notation: 'compact' // https://github.com/microsoft/TypeScript/issues/36533
notation: 'compact', // https://github.com/microsoft/TypeScript/issues/36533
maximumSignificantDigits: 3
});
@Pipe({

16
UI/Web/src/app/series-detail/series-detail.component.html
View file

@ -59,8 +59,13 @@
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
<div class="row mb-3 info-container">
<div class="image-container col-4 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2 d-none d-sm-block">
<div class="to-read-counter" *ngIf="unreadCount > 0 && unreadCount !== totalCount">
<app-tag-badge [selectionMode]="TagBadgeCursor.NotAllowed" fillStyle="filled">{{unreadCount}}</app-tag-badge>
</div>
<app-image height="100%" maxHeight="400px" objectFit="contain" background="none" [imageUrl]="seriesImage"></app-image>
<!-- NOTE: We can put continue point here as Vol X Ch Y or just Ch Y or Book Z ?-->
<div class="under-image mt-1" *ngIf="hasReadingProgress && currentlyReadingChapter && !currentlyReadingChapter.isSpecial">
From {{ContinuePointTitle}}
</div>
</div>
<div class="col-xlg-10 col-lg-8 col-md-8 col-xs-8 col-sm-6 mt-2">
<div class="row g-0">
@ -72,8 +77,15 @@
<span class="d-none d-sm-inline-block">{{(hasReadingProgress) ? 'Continue' : 'Read'}}</span>
</button>
</div>
<div class="col-auto ms-2">
<button class="btn btn-secondary" (click)="toggleWantToRead()" placement="top" [closeDelay]="100000" ngbTooltip="{{isWantToRead ? 'Remove from' : 'Add to'}} Want to Read">
<span>
<i class="fa-{{isWantToRead ? 'solid' : 'regular'}} fa-star" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="col-auto ms-2" *ngIf="isAdmin">
<button class="btn btn-secondary" (click)="openEditSeriesModal()" title="Edit Series information">
<button class="btn btn-secondary" (click)="openEditSeriesModal()" placement="top" ngbTooltip="Edit Series information">
<span>
<i class="fa fa-pen" aria-hidden="true"></i>
</span>

23
UI/Web/src/app/series-detail/series-detail.component.scss
View file

@ -2,6 +2,29 @@
font-style: italic;
}
.want-to-read-star {
//position: absolute;
//top: 15px;
//left: 20px;
//color: var(--primary-color);
}
.to-read-counter {
position: absolute;
// top: 15px;
// right: 20px;
top: 15px;
left: 20px;
}
.under-image {
background-color: var(--breadcrumb-bg-color);
color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
}
.rating-star {
margin-top: 2px;
font-size: 1.5rem;

43
UI/Web/src/app/series-detail/series-detail.component.ts
View file

@ -42,6 +42,7 @@ import { User } from '../_models/user';
import { ScrollService } from '../_services/scroll.service';
import { DeviceService } from '../_services/device.service';
import { Device } from '../_models/device/device';
import { ThisReceiver } from '@angular/compiler';
interface RelatedSeris {
series: Series;
@ -107,6 +108,9 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
libraryType: LibraryType = LibraryType.Manga;
seriesMetadata: SeriesMetadata | null = null;
readingLists: Array<ReadingList> = [];
isWantToRead: boolean = false;
unreadCount: number = 0;
totalCount: number = 0;
/**
* Poster image for the Series
*/
@ -233,6 +237,26 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
return 'calc(var(--vh)*100 - ' + totalHeight + 'px)';
}
get ContinuePointTitle() {
if (this.currentlyReadingChapter === undefined || !this.hasReadingProgress) return '';
if (!this.currentlyReadingChapter.isSpecial) {
const vol = this.volumes.filter(v => v.id === this.currentlyReadingChapter?.volumeId);
// This is a lone chapter
if (vol.length === 0) {
return 'Ch ' + this.currentlyReadingChapter.number;
}
if (this.currentlyReadingChapter.number === "0") {
return 'Vol ' + vol[0].number;
}
return 'Vol ' + vol[0].number + ' Ch ' + this.currentlyReadingChapter.number;
}
return this.currentlyReadingChapter.title;
}
constructor(private route: ActivatedRoute, private seriesService: SeriesService,
private router: Router, public bulkSelectionService: BulkSelectionService,
private modalService: NgbModal, public readerService: ReaderService,
@ -454,6 +478,11 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
this.changeDetectionRef.markForCheck();
});
this.seriesService.isWantToRead(seriesId).subscribe(isWantToRead => {
this.isWantToRead = isWantToRead;
this.changeDetectionRef.markForCheck();
});
this.readingListService.getReadingListsForSeries(seriesId).subscribe(lists => {
this.readingLists = lists;
this.changeDetectionRef.markForCheck();
@ -508,6 +537,9 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
return of(null);
})).subscribe(detail => {
if (detail == null) return;
this.unreadCount = detail.unreadCount;
this.totalCount = detail.totalCount;
this.hasSpecials = detail.specials.length > 0;
this.specials = detail.specials;
@ -761,4 +793,15 @@ export class SeriesDetailComponent implements OnInit, OnDestroy, AfterContentChe
// this.filter.sortOptions.isAscending = this.isAscendingSort;
}
toggleWantToRead() {
if (this.isWantToRead) {
this.actionService.addMultipleSeriesToWantToReadList([this.series.id]);
} else {
this.actionService.removeMultipleSeriesFromWantToReadList([this.series.id]);
}
this.isWantToRead = !this.isWantToRead;
this.changeDetectionRef.markForCheck();
}
}

1
UI/Web/src/app/series-detail/series-metadata-detail/series-metadata-detail.component.html
View file

@ -48,7 +48,6 @@
<app-badge-expander [items]="readingLists">
<ng-template #badgeExpanderItem let-item let-position="idx">
<app-tag-badge a11y-click="13,32" class="col-auto" routerLink="/lists/{{item.id}}" [selectionMode]="TagBadgeCursor.Clickable">
<!-- TODO: Build a promoted badge code -->
<span *ngIf="item.promoted">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>&nbsp;
<span class="visually-hidden">(promoted)</span>

2
UI/Web/src/app/user-settings/edit-device/edit-device.component.html
View file

@ -18,7 +18,7 @@
<input id="email" aria-describedby="email-help"
class="form-control" formControlName="email" type="email"
placeholder="@kindle.com" [class.is-invalid]="settingsForm.get('email')?.invalid && settingsForm.get('email')?.touched">
placeholder="id@kindle.com" [class.is-invalid]="settingsForm.get('email')?.invalid && settingsForm.get('email')?.touched">
<ng-container *ngIf="settingsForm.get('email')?.errors as errors">
<p class="invalid-feedback" *ngIf="errors.email">
This must be a valid email

4
UI/Web/src/app/user-settings/edit-device/edit-device.component.ts
View file

@ -61,7 +61,7 @@ export class EditDeviceComponent implements OnInit, OnChanges, OnDestroy {
addDevice() {
if (this.device !== undefined) {
this.deviceService.updateDevice(this.device.id, this.settingsForm.value.name, this.settingsForm.value.platform, this.settingsForm.value.email).subscribe(() => {
this.deviceService.updateDevice(this.device.id, this.settingsForm.value.name, parseInt(this.settingsForm.value.platform, 10), this.settingsForm.value.email).subscribe(() => {
this.settingsForm.reset();
this.toastr.success('Device updated');
this.cdRef.markForCheck();
@ -70,7 +70,7 @@ export class EditDeviceComponent implements OnInit, OnChanges, OnDestroy {
return;
}
this.deviceService.createDevice(this.settingsForm.value.name, this.settingsForm.value.platform, this.settingsForm.value.email).subscribe(() => {
this.deviceService.createDevice(this.settingsForm.value.name, parseInt(this.settingsForm.value.platform, 10), this.settingsForm.value.email).subscribe(() => {
this.settingsForm.reset();
this.toastr.success('Device created');
this.cdRef.markForCheck();