feat: allow dynamic high resolution override

maranmaran · Aug 23, 2024 · 1b5bda3 · 1b5bda3
1 parent 19821e7
commit 1b5bda3
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 25 deletions.
diff --git a/src/brave-snouts-frontend/src/app/shared/media-gallery/firebase-image.pipe.ts b/src/brave-snouts-frontend/src/app/shared/media-gallery/firebase-image.pipe.ts
@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform, inject } from '@angular/core';
 import { ImageItemData } from 'ng-gallery';
-import { map, shareReplay } from 'rxjs';
+import { combineLatest, map, shareReplay } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { FirebaseFile } from '../../../business/models/firebase-file.model';
 import { SettingsService } from '../../../business/services/settings.service';
@@ -13,6 +13,11 @@ export class FirebaseImagePipe implements PipeTransform {
   private readonly settingsSvc = inject(SettingsService);
   readonly imageCacheSeed = environment.imageCacheSeed
 
+  protected loadFullResolution$ = this.settingsSvc.settings$.pipe(
+    map(x => x.loadFullResolution),
+    shareReplay(1)
+  );
+
   protected loadGradually$ = this.settingsSvc.settings$.pipe(
     map(x => x.gradualImageLoading),
     shareReplay(1)
@@ -23,32 +28,64 @@ export class FirebaseImagePipe implements PipeTransform {
   }
 
   transform(value: Partial<FirebaseFile>, forceHighQuality: boolean = false) {
-    return this.loadGradually$.pipe(
-      map(loadGradually => loadGradually ||= forceHighQuality),
-      map(loadGradually => {
-        const original = this.cachedImage(value.original.gUrl);
-        const thumbnail = this.cachedImage(value.thumbnail.gUrl);
-        const compressed = this.cachedImage(value.compressed.gUrl);
-        const type = value.type;
-        const src = loadGradually ? original : compressed;
-        const thumb = loadGradually ? compressed : thumbnail;
-        return <Partial<ImageItemData>>{ src, thumb, type };
-      })
-    )
+    return combineLatest([
+      this.loadGradually$,
+      this.loadFullResolution$
+    ])
+      .pipe(
+        map(([loadGradually, loadFullResolution]) => {
+          loadGradually ||= forceHighQuality
+          return [loadGradually, loadFullResolution]
+        }),
+        map(([loadGradually, loadFullResolution]) => {
+          const original = this.cachedImage(value.original.gUrl);
+          const thumbnail = this.cachedImage(value.thumbnail.gUrl);
+          const compressed = this.cachedImage(value.compressed.gUrl);
+          const type = value.type;
+
+          if (loadFullResolution) {
+            return <Partial<ImageItemData>>{
+              src: original,
+              thumb: original,
+              type: original
+            };
+          }
+
+          const src = loadGradually ? original : compressed;
+          const thumb = loadGradually ? compressed : thumbnail;
+          return <Partial<ImageItemData>>{ src, thumb, type };
+        })
+      )
   }
 
   transformArr(value: Partial<FirebaseFile>[], forceHighQuality: boolean = false) {
-    return this.loadGradually$.pipe(
-      map(loadGradually => loadGradually ||= forceHighQuality),
-      map(loadGradually => value.map(v => {
-        const original = this.cachedImage(v.original.gUrl);
-        const thumbnail = this.cachedImage(v.thumbnail.gUrl);
-        const compressed = this.cachedImage(v.compressed.gUrl);
-        const type = v.type;
-        const src = loadGradually ? original : compressed;
-        const thumb = loadGradually ? compressed : thumbnail;
-        return <Partial<ImageItemData>>{ src, thumb, type };
-      }))
-    )
+    return combineLatest([
+      this.loadGradually$,
+      this.loadFullResolution$
+    ])
+      .pipe(
+        map(([loadGradually, loadFullResolution]) => {
+          loadGradually ||= forceHighQuality
+          return [loadGradually, loadFullResolution]
+        }),
+        map(([loadGradually, loadFullResolution]) => value.map(v => {
+          const original = this.cachedImage(v.original.gUrl);
+          const thumbnail = this.cachedImage(v.thumbnail.gUrl);
+          const compressed = this.cachedImage(v.compressed.gUrl);
+          const type = v.type;
+
+          if (loadFullResolution) {
+            return <Partial<ImageItemData>>{
+              src: original,
+              thumb: original,
+              type: original
+            };
+          }
+
+          const src = loadGradually ? original : compressed;
+          const thumb = loadGradually ? compressed : thumbnail;
+          return <Partial<ImageItemData>>{ src, thumb, type };
+        }))
+      )
   }
 }
diff --git a/src/brave-snouts-frontend/src/business/services/settings.service.ts b/src/brave-snouts-frontend/src/business/services/settings.service.ts
@@ -55,6 +55,7 @@ export class SettingsService {
 export interface GlobalSettings {
     eurRate: number;
     gradualImageLoading: boolean;
+    loadFullResolution: boolean;
     testing: {
         email: string;
         itemsCount: number;

diff --git a/src/utilities/src/scripts/initialize-app-environment.scripts.ts b/src/utilities/src/scripts/initialize-app-environment.scripts.ts
@@ -86,6 +86,10 @@ const initializeFirestore = async (projectName) => {
             // Turning this to TRUE increases costs because of our
             // storage bandwith increase (more high res images more download egress more money spent)
             gradualImageLoading: false,
+
+            // False, if we do not wish to override all images to use full resolution (original upload)
+            // True, if we wish to override all images to use full resolution (original upload)
+            loadFullResolution: false,
             // Parameters used when invoking "test" mail from the application
             testing: {
                 email: '[email protected]',