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

Implemented the ability to allow the admin to change the cover generation size. (#2213)

Browse source 
Changed how covers are merged together. Now a cover image will always be generated for reading list and collections.

Fixed reading list page being a bit laggy due to a missing trackby function.

Reading list page will now show the cover image always. Collection detail page will only hide the image if there is no summary on the collection.
This commit is contained in:
Joe Milazzo 2023-08-14 06:56:09 -05:00 • committed by GitHub
parent 19801af6f3
commit d134196470
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 221 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

14
UI/Web/src/app/admin/_models/cover-image-size.ts Normal file
View file

@ -0,0 +1,14 @@
export enum CoverImageSize {
Default = 1,
Medium = 2,
Large = 3,
XLarge = 4
}
export const CoverImageSizes =
[
{value: CoverImageSize.Default, title: 'cover-image-size.default'},
{value: CoverImageSize.Medium, title: 'cover-image-size.medium'},
{value: CoverImageSize.Large, title: 'cover-image-size.large'},
{value: CoverImageSize.XLarge, title: 'cover-image-size.xlarge'}
];

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

@ -1,4 +1,5 @@
import { EncodeFormat } from "./encode-format";
import {CoverImageSize} from "./cover-image-size";
export interface ServerSettings {
cacheDirectory: string;
@ -20,4 +21,5 @@ export interface ServerSettings {
cacheSize: number;
onDeckProgressDays: number;
onDeckUpdateDays: number;
coverImageSize: CoverImageSize;
}

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

@ -7,7 +7,7 @@
<br/><b>{{t('encode-as-warning')}}</b>
</p>
<div *ngIf="settingsForm.get('encodeMediaAs')?.dirty" class="alert alert-danger" role="alert">{{t('media-warning')}}</div>
<div class="col-md-6 col-sm-12 mb-3">
<div class="col-md-6 col-sm-12 mb-3 pe-1">
<label for="settings-media-encodeMediaAs" class="form-label me-1">{{t('encode-as-label')}}</label>
<i class="fa fa-info-circle" placement="right" [ngbTooltip]="encodeMediaAsTooltip" role="button" tabindex="0"></i>
<ng-template #encodeMediaAsTooltip>{{t('encode-as-tooltip')}}</ng-template>
@ -16,6 +16,16 @@
<option *ngFor="let format of EncodeFormats" [value]="format.value">{{format.title}}</option>
</select>
</div>
<div class="col-md-6 col-sm-12 mb-3">
<label for="settings-media-coverImageSize" class="form-label me-1">{{t('cover-image-size-label')}}</label>
<i class="fa fa-info-circle" placement="right" [ngbTooltip]="coverImageSizeTooltip" role="button" tabindex="0"></i>
<ng-template #coverImageSizeTooltip>{{t('cover-image-size-tooltip')}}</ng-template>
<span class="visually-hidden" id="settings-media-coverImageSize-help"><ng-container [ngTemplateOutlet]="coverImageSizeTooltip"></ng-container></span>
<select class="form-select" aria-describedby="settings-media-coverImageSize-help" formControlName="coverImageSize" id="settings-media-coverImageSize">
<option *ngFor="let size of coverImageSizes" [value]="size.value">{{size.title}}</option>
</select>
</div>
</div>
<div class="row g-0">

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

@ -21,7 +21,8 @@ import {EncodeFormats} from '../_models/encode-format';
import {ManageScrobbleErrorsComponent} from '../manage-scrobble-errors/manage-scrobble-errors.component';
import {ManageAlertsComponent} from '../manage-alerts/manage-alerts.component';
import {NgFor, NgIf, NgTemplateOutlet} from '@angular/common';
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import {translate, TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import { CoverImageSizes } from '../_models/cover-image-size';
@Component({
selector: 'app-manage-media-settings',
@ -38,6 +39,11 @@ export class ManageMediaSettingsComponent implements OnInit {
alertCount: number = 0;
scrobbleCount: number = 0;
coverImageSizes = CoverImageSizes.map(o => {
const newObj = {...o};
newObj.title = translate(o.title);
return newObj;
})
private readonly translocoService = inject(TranslocoService);
private readonly cdRef = inject(ChangeDetectorRef);
@ -51,6 +57,7 @@ export class ManageMediaSettingsComponent implements OnInit {
this.serverSettings = settings;
this.settingsForm.addControl('encodeMediaAs', new FormControl(this.serverSettings.encodeMediaAs, [Validators.required]));
this.settingsForm.addControl('bookmarksDirectory', new FormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
this.settingsForm.addControl('coverImageSize', new FormControl(this.serverSettings.coverImageSize, [Validators.required]));
this.cdRef.markForCheck();
});
}
@ -58,6 +65,7 @@ export class ManageMediaSettingsComponent implements OnInit {
resetForm() {
this.settingsForm.get('encodeMediaAs')?.setValue(this.serverSettings.encodeMediaAs);
this.settingsForm.get('bookmarksDirectory')?.setValue(this.serverSettings.bookmarksDirectory);
this.settingsForm.get('coverImageSize')?.setValue(this.serverSettings.coverImageSize);
this.settingsForm.markAsPristine();
this.cdRef.markForCheck();
}
@ -66,6 +74,7 @@ export class ManageMediaSettingsComponent implements OnInit {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.encodeMediaAs = parseInt(this.settingsForm.get('encodeMediaAs')?.value, 10);
modelSettings.bookmarksDirectory = this.settingsForm.get('bookmarksDirectory')?.value;
modelSettings.coverImageSize = parseInt(this.settingsForm.get('coverImageSize')?.value, 10);
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;