feat(settings): add an option to enable/disable fetching cover images using CORS proxy

Author: AXeL-dev

src/app/models/settings.ts

@@ -25,6 +25,7 @@ export interface ProxySettings {
   enabled: boolean;
   name?: string;
   apiKey?: string;
+  shouldFetchImages?: boolean;
 }
 
 export enum View {

src/app/modules/settings/general/general.component.html

@@ -48,6 +48,23 @@
         />
       </div>
     </li>
+    <li *ngIf="settings.proxy.enabled" mdcListItem>
+      <i mdcListItemGraphic class="material-icons">image</i>
+      <span mdcListItemText>
+        Use the proxy to fetch images
+        <span mdcListItemSecondaryText
+          >Will fetch the episodes cover images using the proxy on loading
+          failures</span
+        >
+      </span>
+      <div mdcListItemMeta mdcSwitch>
+        <input
+          mdcSwitchInput
+          type="checkbox"
+          [(ngModel)]="settings.proxy.shouldFetchImages"
+        />
+      </div>
+    </li>
     <li *ngIf="browser.isWebExtension" mdcListItem>
       <i mdcListItemGraphic class="material-icons">open_in_new</i>
       <span mdcListItemText>

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

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { ScraperService } from 'src/app/services/scraper.service';
+import { SettingsService } from 'src/app/services/settings.service';
 
 export type ProxyPipeAction = 'resolveUrl';
 export type ProxyPipeValueType = 'image';
@@ -9,7 +10,10 @@ export type ProxyPipeValueType = 'image';
   pure: true,
 })
 export class ProxyPipe implements PipeTransform {
-  constructor(protected scraper: ScraperService) {}
+  constructor(
+    protected settings: SettingsService,
+    protected scraper: ScraperService
+  ) {}
 
   private getImageOrFallback = (
     path: string,
@@ -30,12 +34,15 @@ export class ProxyPipe implements PipeTransform {
   ): Promise<string> {
     switch (action) {
       case 'resolveUrl': {
-        const url = this.scraper.resolveUrl(value);
         switch (type) {
           case 'image':
-            return await this.getImageOrFallback(value, url);
+            if (!this.settings.proxy.shouldFetchImages) {
+              return value;
+            }
+            const fallback = this.scraper.resolveUrl(value);
+            return await this.getImageOrFallback(value, fallback);
           default:
-            return url;
+            return this.scraper.resolveUrl(value);
         }
       }
       default:

src/app/services/settings.service.ts

@@ -80,6 +80,7 @@ export class SettingsService {
         : {
             enabled: true,
             name: CORSProxies[0].name,
+            shouldFetchImages: false,
           },
       openInNewTab:
         !this.browser.isWebExtension || this.browser.isFirefox ? true : false,