make load strategy a setting

src/lang/en-US/langStrings.json

@@ -300,7 +300,7 @@
         "offlineMode": "Offline mode",
         "removeApps_desc": "all added games and controllers",
         "removeApps_btn": "Remove",
-        "preloadImages": "Preload retrieved images immediately",
+        "preloadImages": "Artwork loading strategy",
         "fuzzy_verbose": "Log matching results",
         "fuzzy_filter": "Filter images",
         "enabledProviders": "Enabled image providers",

src/lang/en-US/markdown/settings.md

@@ -30,8 +30,8 @@ Resets the stored list of titles used for fuzzy matching to the list of titles r
 ### Reset fuzzy cache
 Clears the cache of titles that fuzzy matching has already seen (try this if changes you make to fuzzy list are not resulting in changes to titles in SRM).
 ## Image provider settings
-### Preload retrieved images `[Recommend disabled]`
-When enabled, SRM will pull all available artwork for every game, rather than pulling one piece of artwork at a time as the user flips through the images. Don't enable this unless you have a good reason and a very small library of games, otherwise it could result in very large (slow) network requests.
+### Artwork loading strategy `[Recommend Load artwork lazily]`
+This is the strategy SRM uses to pull artwork thumbnails for the `Add Games` UI. If you are parsing a lot of games, `Load artwork lazily` is recommended. `Preload first artwork` will try to pull the first piece of artwork for each game in each artwork category, and `Preload all artwork` will try to pull all available artwork for each game in each artwork category. `Preload all artwork` will cause network and performance issues unless the number of games is quite small (less than `30` or so).
 ### Enabled providers
 Global setting to enable/disable particular image providers. Current options are `SteamGridDB` and `Steam Official`.
 ### DNS manual override

src/lib/image-providers/available-providers.ts

@@ -125,7 +125,18 @@ export const dnsSelect = [
   {value: '1.0.0.1', displayValue: 'Cloudflare (Alt)'},
   {value: '8.8.8.8', displayValue: 'Google'},
   {value: '8.8.4.4', displayValue: 'Google (Alt)'},
-
 ]
 
 export const sgdbIdRegex: RegExp = /^\$\{gameid\:([0-9]*?)\}$/;
+
+export const imageLoadStrategies = [
+  'loadPre',
+  'loadNormal',
+  'loadLazy'
+] as const;
+
+export const loadStrategiesSelect = [
+  {value: 'loadLazy', displayValue: 'Load artwork lazily'},
+  {value: 'loadNormal', displayValue: 'Preload first artwork'},
+  {value: 'loadPre', displayValue: 'Preload all artwork'}
+]

src/models/settings.model.ts

@@ -1,12 +1,15 @@
 import { OnlineProviderType } from ".";
+import { imageLoadStrategies } from "../lib/image-providers/available-providers";
 import { FuzzyListTimestamps } from "./fuzzy.model";
 
+export type imageLoadStrategy = typeof imageLoadStrategies[number];
+
 export interface PreviewSettings {
     retrieveCurrentSteamImages: boolean,
     disableCategories: boolean,
     deleteDisabledShortcuts: boolean,
     imageZoomPercentage: number,
-    preload: boolean,
+    imageLoadStrategy: imageLoadStrategy,
     imageTypes: string[],
     hideUserAccount: boolean
 }

src/renderer/components/preview.component.ts

@@ -276,7 +276,7 @@ export class PreviewComponent implements OnDestroy {
     artworkType?: ArtworkType, imageIndex?: number, notLazy?: boolean) {
     const currentViewType = this.previewService.getCurrentViewType();
     const actualArtworkType: ArtworkType = this.getActualArtworkType(artworkType);
-    if(!notLazy && !this.inViewDict[appId + currentViewType]) { return null; }
+    if(this.appSettings.previewSettings.imageLoadStrategy=='loadLazy' && !notLazy && !this.inViewDict[appId + currentViewType]) { return null; }
     if (image == undefined) {
       let imagepool: string = app.images[actualArtworkType].imagePool;
       if (this.previewService.getImages(actualArtworkType)[imagepool].online)

src/renderer/components/settings.component.ts

@@ -12,7 +12,7 @@ import { fstat } from 'fs';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as paths from '../../paths';
-import { providersSelect, dnsSelect } from '../../lib/image-providers/available-providers';
+import { providersSelect, dnsSelect, loadStrategiesSelect } from '../../lib/image-providers/available-providers';
 
 @Component({
   selector: 'settings',
@@ -68,6 +68,10 @@ export class SettingsComponent implements OnDestroy {
   get availableDNS() {
     return dnsSelect;
   }
+
+  get availableLoadStrategies() {
+    return loadStrategiesSelect;
+  }
 
   get lang() {
     return APP.lang.settings.component;
@@ -135,7 +139,6 @@ export class SettingsComponent implements OnDestroy {
   onSettingsChange(detectChanges: boolean = true) {
     if (detectChanges)
       this.settingsService.settingsChanged();
-
     this.settingsService.saveAppSettings();
   }
 
@@ -194,10 +197,6 @@ export class SettingsComponent implements OnDestroy {
     this.fuzzyService.fuzzyLoader.resetCache();
   }
 
-  preload(value: boolean) {
-    this.settings.previewSettings.preload = value;
-  }
-
   loadLanguage(){
     this.languageService.loadLanguage(this.settings.language);
   }

src/renderer/modifiers/app-settings.modifier.ts

@@ -5,7 +5,7 @@ let versionUp = (version: number) => { return version + 1 };
 
 export const appSettings: ValidatorModifier<AppSettings> = {
   controlProperty: 'version',
-  latestVersion: 8,
+  latestVersion: 9,
   fields: {
     undefined: {
       'version': { method: () => 0 },
@@ -95,6 +95,18 @@ export const appSettings: ValidatorModifier<AppSettings> = {
       'dnsServers': {method: (oldValue) => {
         return [];
       }}
+    },
+    8: {
+      'version': {method: versionUp},
+      'previewSettings': {method: (oldValue, oldConfiguration) => {
+        const oldPreload = oldConfiguration['preload'];
+        delete oldConfiguration['preload'];
+        if(oldPreload) {
+          return {...oldConfiguration, imageLoadStrategy: 'loadPre'}
+        } else {
+          return {...oldConfiguration, imageLoadStrategy: 'loadLazy'}
+        }
+      }}
     }
   }
 };

src/renderer/schemas/app-settings.schema.ts

@@ -1,5 +1,5 @@
 import { languageManager } from '../../variables';
-import { onlineProviders } from "../../lib/image-providers/available-providers";
+import { onlineProviders, imageLoadStrategies } from "../../lib/image-providers/available-providers";
 import { availableThemes } from "../../lib/themes";
 
 export const appSettings = {
@@ -43,7 +43,11 @@ export const appSettings = {
         disableCategories: {type: 'boolean', default: false},
         deleteDisabledShortcuts: { type: 'boolean', default: false },
         imageZoomPercentage: { type: "number", default: 30, minimum: 10, maximum: 100 },
-        preload: { type: 'boolean', default: false },
+        imageLoadStrategy: {
+          type: 'string',
+          enum: imageLoadStrategies,
+          default: 'loadLazy'
+        },
         hideUserAccount: { type: 'boolean', default: false}
       }
     },

src/renderer/services/preview.service.ts

@@ -370,7 +370,6 @@ export class PreviewService {
     if (image && image.loadStatus === 'notStarted' || image.loadStatus === 'failed') {
       image.loadStatus = 'downloading';
       this.previewDataChanged.next();
-
       let imageLoader = new Image();
       imageLoader.onload = () => {
         image.loadStatus = 'done';
@@ -751,7 +750,7 @@ export class PreviewService {
                     }
                     if(!skip) {
                       let newImage: ImageContent = this.addUniqueImage(imageKey, imageContent, artworkType, returnedProvider, preInsert);
-                      if (newImage !== null && this.appSettings.previewSettings.preload) {
+                      if (newImage !== null && this.appSettings.previewSettings.imageLoadStrategy=='loadPre') {
                         this.preloadImage(newImage);
                       }
                     }

src/renderer/templates/settings.component.html

@@ -97,7 +97,13 @@
     </label>
     </div>
     <div class="inputContainer">
-      <ng-toggle-button class="ngToggleButton" [ngModel]="settings.previewSettings.preload" (ngModelChange)="preload($event); onSettingsChange();">{{lang.text.preloadImages}}</ng-toggle-button>
+      <div class="inlineGroup">
+        <ng-select style="font-size: 0.85em;" class="ngSelect"
+        [ngModel]="settings.previewSettings.imageLoadStrategy" (ngModelChange)="settings.previewSettings.imageLoadStrategy= $event; onSettingsChange();"
+        [multiple]="false" [allowEmpty]="false" [values]="availableLoadStrategies">
+        </ng-select>
+        <div class=text style="margin-left: 0.25em;">{{lang.text.preloadImages}}</div>
+      </div>
     </div>
     <div class="inputContainer">
       <div class="inlineGroup">