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

Adding cover image functionality

Browse source
This commit is contained in:
Andrew Song 2021-01-03 20:01:45 -06:00
parent 0415ebb882
commit daf291c5ee
3 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/series-detail/series-detail.component.html
View file

@ -22,7 +22,8 @@
<h4 class="mt-3">Volumes</h4> <h4 class="mt-3">Volumes</h4>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-sm-auto" *ngFor="let volume of volumes"> <div class="col-sm-auto" *ngFor="let volume of volumes">
<app-card-item [entity]="volume" [title]="'Volume ' + volume.number" (click)="openVolume(volume)"></app-card-item> <app-card-item [entity]="volume" [title]="'Volume ' + volume.number" (click)="openVolume(volume)"
[imageUrl]="volume.coverImage === null ? 'assets/images/image-placeholder.jpg' : volume.coverImage"></app-card-item>
</div> </div>
</div> </div>

2
src/app/shared/card-item/card-item.component.html
View file

@ -1,6 +1,6 @@
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<!-- TODO: I need an anchor around this so you can open in new page easily --> <!-- TODO: I need an anchor around this so you can open in new page easily -->
<img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}"> <img (click)="handleClick()" class="card-img-top" [src]="isNullOrEmpty(imageUrl) ? placeholderImage : safeImage" alt="{{title}}">
<div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0"> <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">

11
src/app/shared/card-item/card-item.component.ts
View file

@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
export interface CardItemAction { export interface CardItemAction {
@ -19,12 +20,13 @@ export class CardItemComponent implements OnInit {
@Input() entity: any; // This is the entity we are representing. It will be returned if an action is executed. @Input() entity: any; // This is the entity we are representing. It will be returned if an action is executed.
@Output() clicked = new EventEmitter<string>(); @Output() clicked = new EventEmitter<string>();
safeImage: any;
placeholderImage = 'assets/images/image-placeholder.jpg'; placeholderImage = 'assets/images/image-placeholder.jpg';
constructor() { } constructor(private sanitizer: DomSanitizer) { }
ngOnInit(): void { ngOnInit(): void {
this.createSafeImage(this.imageUrl);
} }
handleClick() { handleClick() {
@ -42,4 +44,9 @@ export class CardItemComponent implements OnInit {
} }
} }
createSafeImage(coverImage: string) {
let imageUrl = 'data:image/jpeg;base64,' + coverImage;
this.safeImage = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
}
} }