chore: resolve cover images urls using CORS proxy on loading failures

Author: AXeL-dev

src/app/modules/episode/card/card.component.html

@@ -9,7 +9,11 @@
       mdcCardMedia
       size="square"
       [style.background-image]="
-        episode.anime.cover | url: 'encodeAndFormat' | safe: 'style'
+        episode.anime.cover
+          | proxy: 'resolveUrl':'image'
+          | async
+          | url: 'encodeAndFormat'
+          | safe: 'style'
       "
       [attr.data-cover]="episode.anime.cover"
     >

src/app/modules/shared/pipes/proxy.pipe.ts

@@ -0,0 +1,47 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ScraperService } from 'src/app/services/scraper.service';
+
+export type ProxyPipeAction = 'resolveUrl';
+export type ProxyPipeValueType = 'image';
+
+@Pipe({
+  name: 'proxy',
+  pure: true,
+})
+export class ProxyPipe implements PipeTransform {
+  constructor(protected scraper: ScraperService) {}
+
+  private getImageOrFallback = (
+    path: string,
+    fallback: string
+  ): Promise<string> => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.src = path;
+      img.onload = () => resolve(path);
+      img.onerror = () => resolve(fallback);
+    });
+  };
+
+  async transform(
+    value: string,
+    action: ProxyPipeAction,
+    type?: ProxyPipeValueType
+  ): Promise<string> {
+    switch (action) {
+      case 'resolveUrl': {
+        const url = this.scraper.resolveUrl(value);
+        switch (type) {
+          case 'image':
+            return await this.getImageOrFallback(value, url);
+          default:
+            return url;
+        }
+      }
+      default:
+        throw new Error(
+          `ProxyPipe unable to transform value for invalid action: ${action}`
+        );
+    }
+  }
+}

src/app/modules/shared/pipes/safe.pipe.ts

@@ -20,7 +20,7 @@ export type SafePipeType = 'html' | 'style' | 'script' | 'url' | 'resourceUrl';
 export class SafePipe implements PipeTransform {
   constructor(protected sanitizer: DomSanitizer) {}
 
-  public transform(
+  transform(
     value: string,
     type: SafePipeType
   ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {

src/app/modules/shared/pipes/url.pipe.ts

@@ -14,7 +14,7 @@ export type UrlPipeAction =
 export class UrlPipe implements PipeTransform {
   constructor() {}
 
-  public transform(value: string, action: UrlPipeAction): string {
+  transform(value: string, action: UrlPipeAction): string {
     switch (action) {
       case 'format':
         return `url("${value}")`;

src/app/modules/shared/shared.module.ts

@@ -10,6 +10,7 @@ import { ShortDatePipe } from './pipes/shortdate.pipe';
 import { DateTimePipe } from './pipes/datetime.pipe';
 import { UrlPipe } from './pipes/url.pipe';
 import { SafePipe } from './pipes/safe.pipe';
+import { ProxyPipe } from './pipes/proxy.pipe';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { SafePipe } from './pipes/safe.pipe';
     DateTimePipe,
     UrlPipe,
     SafePipe,
+    ProxyPipe,
   ],
   imports: [CommonModule, FormsModule, MaterialModule],
   exports: [
@@ -33,6 +35,7 @@ import { SafePipe } from './pipes/safe.pipe';
     DateTimePipe,
     UrlPipe,
     SafePipe,
+    ProxyPipe,
   ],
 })
 export class SharedModule {}

src/app/services/scraper.service.ts

@@ -56,7 +56,7 @@ export class ScraperService {
       );
   }
 
-  private resolveUrl(url: string): string {
+  resolveUrl(url: string): string {
     return this.settings.proxy.enabled ? `${this.proxy.url}${url}` : url;
   }