From daf291c5ee9d5839e4b949f416f84e884527375e Mon Sep 17 00:00:00 2001
From: Andrew Song <asong641@gmail.com>
Date: Sun, 3 Jan 2021 20:01:45 -0600
Subject: [PATCH] Adding cover image functionality

---
 src/app/series-detail/series-detail.component.html |  3 ++-
 src/app/shared/card-item/card-item.component.html  |  2 +-
 src/app/shared/card-item/card-item.component.ts    | 11 +++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/series-detail/series-detail.component.html b/src/app/series-detail/series-detail.component.html
index 65303a02e..8a6510bbf 100644
--- a/src/app/series-detail/series-detail.component.html
+++ b/src/app/series-detail/series-detail.component.html
@@ -22,7 +22,8 @@
     <h4 class="mt-3">Volumes</h4>
     <div class="row mt-3">
         <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>
 
diff --git a/src/app/shared/card-item/card-item.component.html b/src/app/shared/card-item/card-item.component.html
index f48009325..c34b9db25 100644
--- a/src/app/shared/card-item/card-item.component.html
+++ b/src/app/shared/card-item/card-item.component.html
@@ -1,6 +1,6 @@
 <div class="card" style="width: 18rem;">
     <!-- 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">
       
diff --git a/src/app/shared/card-item/card-item.component.ts b/src/app/shared/card-item/card-item.component.ts
index bbaafe27f..8c0b217f7 100644
--- a/src/app/shared/card-item/card-item.component.ts
+++ b/src/app/shared/card-item/card-item.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 
 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.
   @Output() clicked = new EventEmitter<string>();
 
-
+  safeImage: any;
   placeholderImage = 'assets/images/image-placeholder.jpg';
 
-  constructor() { }
+  constructor(private sanitizer: DomSanitizer) { }
 
   ngOnInit(): void {
+    this.createSafeImage(this.imageUrl);
   }
 
   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);
+  }
+
 }