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

Small Bugfixes (#2414)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-08 12:38:44 -06:00 • committed by GitHub
parent 26b0cb7d0c
commit b7e7eaf1a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 91 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

10
UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.html
View file

@ -99,13 +99,9 @@
<li [ngbNavItem]="tabs[TabID.Cover]" [disabled]="(isAdmin$ | async) === false">
<a ngbNavLink>{{t(tabs[TabID.Cover].title)}}</a>
<ng-template ngbNavContent>
<app-cover-image-chooser [(imageUrls)]="imageUrls"
[showReset]="chapter.coverImageLocked"
[showApplyButton]="true"
(applyCover)="applyCoverImage($event)"
(resetCover)="resetCoverImage()"
>
</app-cover-image-chooser>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateCoverImageIndex($event)"
(selectedBase64Url)="applyCoverImage($event)" [showReset]="chapter.coverImageLocked"
(resetClicked)="resetCoverImage()"></app-cover-image-chooser>
</ng-template>
</li>

5
UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts
View file

@ -206,6 +206,11 @@ export class CardDetailDrawerComponent implements OnInit {
this.uploadService.updateChapterCoverImage(this.chapter.id, coverUrl).subscribe(() => {});
}
updateCoverImageIndex(selectedIndex: number) {
if (selectedIndex <= 0) return;
this.applyCoverImage(this.imageUrls[selectedIndex]);
}
resetCoverImage() {
this.uploadService.resetChapterCoverLock(this.chapter.id).subscribe(() => {
this.toastr.info(translate('toasts.regen-cover'));

2
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html
View file

@ -31,7 +31,7 @@
<div class="input-group col-auto me-md-2" style="width: 83%">
<label class="input-group-text" for="load-image">{{t('url-label')}}</label>
<input type="text" autofocus autocomplete="off" class="form-control" formControlName="coverImageUrl" placeholder="https://" id="load-image" class="form-control">
<button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImage(); mode='all';" [disabled]="(form.get('coverImageUrl')?.value).length === 0">
<button class="btn btn-outline-secondary" type="button" id="load-image-addon" (click)="loadImageFromUrl(); mode='all';" [disabled]="(form.get('coverImageUrl')?.value).length === 0">
{{t('load')}}
</button>
</div>

35
UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts
View file

@ -1,7 +1,7 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, DestroyRef,
Component,
EventEmitter,
inject,
Inject,
@ -11,7 +11,7 @@ import {
} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {NgxFileDropEntry, FileSystemFileEntry, NgxFileDropModule} from 'ngx-file-drop';
import { fromEvent, Subject } from 'rxjs';
import { fromEvent } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
import { ImageService } from 'src/app/_services/image.service';
@ -37,7 +37,6 @@ import {translate, TranslocoModule} from "@ngneat/transloco";
})
export class CoverImageChooserComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly cdRef = inject(ChangeDetectorRef);
public readonly imageService = inject(ImageService);
public readonly fb = inject(FormBuilder);
@ -84,8 +83,7 @@ export class CoverImageChooserComponent implements OnInit {
appliedIndex: number = 0;
form!: FormGroup;
files: NgxFileDropEntry[] = [];
acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp'].join(',');
acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif'].join(',');
mode: 'file' | 'url' | 'all' = 'all';
constructor(@Inject(DOCUMENT) private document: Document) { }
@ -182,6 +180,25 @@ export class CoverImageChooserComponent implements OnInit {
});
}
loadImageFromUrl(url?: string) {
url = url || this.form.get('coverImageUrl')?.value.trim();
if (!url || url === '') return;
this.uploadService.uploadByUrl(url).subscribe(filename => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.src = this.imageService.getCoverUploadImage(filename);
img.onload = (e) => this.handleUrlImageAdd(img);
img.onerror = (e) => {
this.toastr.error(translate('errors.rejected-cover-upload'));
this.form.get('coverImageUrl')?.setValue('');
this.cdRef.markForCheck();
};
this.form.get('coverImageUrl')?.setValue('');
this.cdRef.markForCheck();
});
}
changeMode(mode: 'url') {
@ -239,12 +256,6 @@ export class CoverImageChooserComponent implements OnInit {
});
}
public fileOver(event: any){
}
public fileLeave(event: any){
}
reset() {
this.resetClicked.emit();
this.selectedIndex = -1;
@ -275,4 +286,6 @@ export class CoverImageChooserComponent implements OnInit {
});
}
protected fileOver(event: any){}
protected fileLeave(event: any){}
}

2
UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
View file

@ -157,7 +157,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
/**
* Debug mode. Will show extra information. Use bitwise (|) operators between different modes to enable different output
*/
debugMode: DEBUG_MODES = DEBUG_MODES.Outline;
debugMode: DEBUG_MODES = DEBUG_MODES.None;
/**
* Debug mode. Will filter out any messages in here so they don't hit the log
*/

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

@ -3,7 +3,7 @@
<h5>{{heading}}</h5>
</div>
<div class="col-lg-9 col-md-8 col-sm-12">
<app-badge-expander [items]="tags">
<app-badge-expander [items]="tags" [itemsTillExpander]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 30 : 4">
<ng-template #badgeExpanderItem let-item let-position="idx">
<ng-container *ngIf="itemTemplate; else useTitle">
<span (click)="goTo(queryParam, item.id)">

11
UI/Web/src/app/series-detail/_components/metadata-detail/metadata-detail.component.ts
View file

@ -6,6 +6,7 @@ import {TagBadgeComponent, TagBadgeCursor} from "../../../shared/tag-badge/tag-b
import {FilterUtilitiesService} from "../../../shared/_services/filter-utilities.service";
import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
import {Breakpoint, UtilityService} from "../../../shared/_services/utility.service";
@Component({
selector: 'app-metadata-detail',
@ -17,6 +18,11 @@ import {FilterField} from "../../../_models/metadata/v2/filter-field";
})
export class MetadataDetailComponent {
private readonly filterUtilityService = inject(FilterUtilitiesService);
public readonly utilityService = inject(UtilityService);
protected readonly TagBadgeCursor = TagBadgeCursor;
protected readonly Breakpoint = Breakpoint;
@Input({required: true}) tags: Array<any> = [];
@Input({required: true}) libraryId!: number;
@Input({required: true}) heading!: string;
@ -24,12 +30,11 @@ export class MetadataDetailComponent {
@ContentChild('titleTemplate') titleTemplate!: TemplateRef<any>;
@ContentChild('itemTemplate') itemTemplate?: TemplateRef<any>;
private readonly filterUtilityService = inject(FilterUtilitiesService);
protected readonly TagBadgeCursor = TagBadgeCursor;
goTo(queryParamName: FilterField, filter: any) {
if (queryParamName === FilterField.None) return;
this.filterUtilityService.applyFilter(['library', this.libraryId], queryParamName, FilterComparison.Equal, filter).subscribe();
}
}

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

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'series-metadata-detail'">
<div class="row g-0 mt-2 mb-2">
<app-read-more [text]="seriesSummary" [maxLength]="250"></app-read-more>
<app-read-more [text]="seriesSummary" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 1000 : 250"></app-read-more>
</div>

2
UI/Web/src/app/series-detail/_components/series-metadata-detail/series-metadata-detail.component.ts
View file

@ -121,4 +121,6 @@ export class SeriesMetadataDetailComponent implements OnChanges {
navigate(basePage: string, id: number) {
this.router.navigate([basePage, id]);
}
protected readonly Breakpoint = Breakpoint;
}

10
UI/Web/src/app/shared/_providers/saver.provider.ts
View file

@ -1,10 +0,0 @@
import {InjectionToken} from '@angular/core'
import { saveAs } from 'file-saver';
export type Saver = (blob: Blob, filename?: string) => void
export const SAVER = new InjectionToken<Saver>('saver')
export function getSaver(): Saver {
return saveAs;
}

14
UI/Web/src/app/shared/_services/download.service.ts
View file

@ -14,7 +14,6 @@ import {
of,
filter,
} from 'rxjs';
import { SAVER, Saver } from '../_providers/saver.provider';
import { download, Download } from '../_models/download';
import { PageBookmark } from 'src/app/_models/readers/page-bookmark';
import {switchMap, take, takeWhile, throttleTime} from 'rxjs/operators';
@ -69,7 +68,7 @@ export class DownloadService {
private readonly destroyRef = inject(DestroyRef);
constructor(private httpClient: HttpClient, private confirmService: ConfirmService,
@Inject(SAVER) private save: Saver, private accountService: AccountService) { }
private accountService: AccountService) { }
/**
@ -270,4 +269,15 @@ export class DownloadService {
finalize(() => this.finalizeDownloadState(downloadType, subtitle))
);
}
private save(blob: Blob, filename: string) {
const saveLink = document.createElement( 'a' );
if (saveLink.href) {
URL.revokeObjectURL(saveLink.href);
}
saveLink.href = URL.createObjectURL(blob);
saveLink.download = filename;
saveLink.dispatchEvent( new MouseEvent( 'click' ) );
}
}

15
UI/Web/src/app/shared/badge-expander/badge-expander.component.ts
View file

@ -1,4 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
inject,
Input,
OnInit,
TemplateRef
} from '@angular/core';
import {CommonModule} from "@angular/common";
import {TranslocoDirective} from "@ngneat/transloco";
@ -12,6 +21,8 @@ import {TranslocoDirective} from "@ngneat/transloco";
})
export class BadgeExpanderComponent implements OnInit {
private readonly cdRef = inject(ChangeDetectorRef);
@Input() items: Array<any> = [];
@Input() itemsTillExpander: number = 4;
@ContentChild('badgeExpanderItem') itemTemplate!: TemplateRef<any>;
@ -24,8 +35,6 @@ export class BadgeExpanderComponent implements OnInit {
return Math.max(this.items.length - this.itemsTillExpander, 0);
}
constructor(private readonly cdRef: ChangeDetectorRef) { }
ngOnInit(): void {
this.visibleItems = this.items.slice(0, this.itemsTillExpander);
this.cdRef.markForCheck();

10
UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
View file

@ -79,13 +79,9 @@
<ng-template ngbNavContent>
<p *ngIf="isAddLibrary" class="alert alert-secondary" role="alert">{{t('cover-description')}}</p>
<p>{{t('cover-description-extra')}}</p>
<app-cover-image-chooser [(imageUrls)]="imageUrls"
[showReset]="false"
[showApplyButton]="true"
(applyCover)="applyCoverImage($event)"
(resetCover)="resetCoverImage()"
>
</app-cover-image-chooser>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateCoverImageIndex($event)"
(selectedBase64Url)="applyCoverImage($event)" [showReset]="library.coverImage !== undefined "
(resetClicked)="resetCoverImage()"></app-cover-image-chooser>
</ng-template>
</li>

5
UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.ts
View file

@ -218,6 +218,11 @@ export class LibrarySettingsModalComponent implements OnInit {
this.uploadService.updateLibraryCoverImage(this.library.id, coverUrl).subscribe(() => {});
}
updateCoverImageIndex(selectedIndex: number) {
if (selectedIndex <= 0) return;
this.applyCoverImage(this.imageUrls[selectedIndex]);
}
resetCoverImage() {
this.uploadService.updateLibraryCoverImage(this.library.id, '').subscribe(() => {});
}

2
UI/Web/src/main.ts
View file

@ -9,7 +9,6 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app/app-routing.module';
import { SAVER, getSaver } from './app/shared/_providers/saver.provider';
import { Title, BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { JwtInterceptor } from './app/_interceptors/jwt.interceptor';
import { ErrorInterceptor } from './app/_interceptors/error.interceptor';
@ -147,7 +146,6 @@ bootstrapApplication(AppComponent, {
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
preLoad,
Title,
{ provide: SAVER, useFactory: getSaver },
provideHttpClient(withInterceptorsFromDi())
]
} as ApplicationConfig)