feat(background): cache background urls

After-the-End-of-All-Things · Jun 28, 2023 · 6ee80ac · 6ee80ac
1 parent 429fbf8
commit 6ee80ac
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/client/src/app/components/background-art/background-art.component.ts b/client/src/app/components/background-art/background-art.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { BackgroundImageService } from '@services/backgroundimage.service';
+import { AssetService } from '@services/asset.service';
 
 @Component({
   selector: 'app-background-art',
@@ -11,13 +11,13 @@ export class BackgroundArtComponent implements OnInit, OnChanges {
 
   public bgUrl: any;
 
-  constructor(private backgroundImageService: BackgroundImageService) {}
+  constructor(private assetService: AssetService) {}
 
   async ngOnInit() {
-    this.bgUrl = await this.backgroundImageService.getSafeImageUrl(this.sprite);
+    this.bgUrl = await this.assetService.getBackgroundUrl(this.sprite);
   }
 
   async ngOnChanges() {
-    this.bgUrl = await this.backgroundImageService.getSafeImageUrl(this.sprite);
+    this.bgUrl = await this.assetService.getBackgroundUrl(this.sprite);
   }
 }
diff --git a/client/src/app/services/asset.service.ts b/client/src/app/services/asset.service.ts
@@ -11,6 +11,7 @@ export class AssetService {
   private maxPortraits = 0;
   private maxBackgrounds = 0;
 
+  private backgroundUrls: Record<string, string> = {};
   private spritesheetUrlsByQuality: Record<string, Record<string, string>> = {};
 
   public get portraitCount(): number {
@@ -36,25 +37,30 @@ export class AssetService {
 
     this.maxBackgrounds = manifestData.assets.backgrounds.length;
 
-    manifestData.assets.backgrounds.forEach(
-      async ({ name, path, hash }: any) => {
+    await Promise.all(
+      manifestData.assets.backgrounds.map(async ({ name, path, hash }: any) => {
         const fullUrl = `${environment.assetsUrl}/${path}`;
 
         const oldImage = await this.backgroundImageService.getImageDataById(
           name,
         );
 
         if (!oldImage || oldImage.hash !== hash) {
-          this.backgroundImageService.fetchImage(fullUrl).subscribe((blob) => {
-            this.backgroundImageService.saveImageToDatabase(
-              name,
-              hash,
-              fullUrl,
-              blob,
-            );
-          });
+          const blob = await lastValueFrom(
+            this.imageService.fetchImage(fullUrl),
+          );
+
+          this.backgroundImageService.saveImageToDatabase(
+            name,
+            hash,
+            fullUrl,
+            blob,
+          );
         }
-      },
+
+        const url = await this.backgroundImageService.getSafeImageUrl(name);
+        this.backgroundUrls[name] = url;
+      }),
     );
 
     const qualitiesAndSheets = [
@@ -99,4 +105,8 @@ export class AssetService {
   public getSpritesheetUrl(name: string, quality: string): string {
     return this.spritesheetUrlsByQuality[quality][name];
   }
+
+  public getBackgroundUrl(name: string): string {
+    return this.backgroundUrls[name];
+  }
 }