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

Polish Round 2 (#2411)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-07 17:42:17 -06:00 • committed by GitHub
parent ba3e760b31
commit a2fd87c454
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 213 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

13
UI/Web/src/app/shared/image/image.component.html
View file

@ -1,11 +1,6 @@
<!--<img #img class="lazyload img-placeholder {{classes}} fade-in" src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="-->
<!-- [attr.data-src]="imageUrl"-->
<!-- (error)="imageService.updateErroredImage($event)"-->
<!-- aria-hidden="true"-->
<!-- alt=""-->
<!-- >-->
<img class="img-placeholder {{classes}} fade-in"
<img class="img-placeholder fade-in"
#img
alt=""
[lazyLoad]="imageUrl" (onStateChange)="myCallbackFunction($event)">
aria-hidden="true"
[lazyLoad]="imageUrl"
(onStateChange)="myCallbackFunction($event)">

5
UI/Web/src/app/shared/image/image.component.scss
View file

@ -3,11 +3,6 @@ img {
transition: opacity 1s;
}
.img-placeholder {
background: rgb(44,47,51);
background: radial-gradient(circle, rgba(44,47,51,1) 0%, rgba(34,42,24,1) 37%, rgba(2,0,36,1) 100%);
}
.fade-in {
opacity: 0;
transition: opacity 0.3s ease-in-out;

32
UI/Web/src/app/shared/image/image.component.ts
View file

@ -30,6 +30,12 @@ import {LazyLoadImageModule, StateChange} from "ng-lazyload-image";
})
export class ImageComponent implements OnChanges {
private readonly destroyRef = inject(DestroyRef);
protected readonly imageService = inject(ImageService);
private readonly renderer = inject(Renderer2);
private readonly hubService = inject(MessageHubService);
private readonly cdRef = inject(ChangeDetectorRef);
/**
* Source url to load image
*/
@ -66,14 +72,18 @@ export class ImageComponent implements OnChanges {
* If the image component should respond to cover updates
*/
@Input() processEvents: boolean = true;
@Input() classes: string = '';
/**
* Note: Parent component must use ViewEncapsulation.None
*/
@Input() classes: string = '';
/**
* A collection of styles to apply. This is useful if the parent component doesn't want to use no view encapsulation
*/
@Input() styles: string = '';
@Input() errorImage: string = this.imageService.errorImage;
@ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;
private readonly destroyRef = inject(DestroyRef);
protected readonly imageService = inject(ImageService);
private readonly renderer = inject(Renderer2);
private readonly hubService = inject(MessageHubService);
private readonly cdRef = inject(ChangeDetectorRef);
constructor() {
this.hubService.messages$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(res => {
@ -127,6 +137,14 @@ export class ImageComponent implements OnChanges {
if (this.background != '') {
this.renderer.setStyle(this.imgElem.nativeElement, 'background', this.background);
}
if (this.styles != '') {
this.renderer.setStyle(this.imgElem.nativeElement, 'styles', this.styles);
}
if (this.classes != '') {
this.renderer.addClass(this.imgElem.nativeElement, this.classes);
}
}
@ -154,7 +172,7 @@ export class ImageComponent implements OnChanges {
case 'loading-failed':
// The image could not be loaded for some reason.
// `event.data` is the error in this case
image.src = this.imageService.errorImage;
image.src = this.errorImage;
this.cdRef.markForCheck();
break;
case 'finally':