Add render button fallback for files that fail to load

Author: floogulinc

src/app/hydrus-file-mimes.ts

@@ -689,7 +689,15 @@ const renderableFiletypes596 = [
   HydrusFiletype.ANIMATION_UGOIRA
 ]
 
+const renderableFiletypes607 = [
+  ...renderableFiletypes596,
+  HydrusFiletype.IMAGE_JXL
+]
+
 export function isFileHydrusRenderable(mime: HydrusFiletype, hydrusVersion?: number) {
+  if(hydrusVersion && hydrusVersion >= 607) {
+    return renderableFiletypes607.includes(mime);
+  }
   if(hydrusVersion && hydrusVersion >= 596) {
     return renderableFiletypes596.includes(mime);
   }

src/app/photoswipe.service.ts

@@ -256,35 +256,7 @@ export class PhotoswipeService {
         errorMsgText.className = 'pswp-error-text';
         errorMsgEl.appendChild(errorMsgText);
 
-        const renderButton = document.createElement('button');
-        renderButton.setAttribute('mat-stroked-button', '');
-        const psdButtonComponent = createComponent(MatButton, {
-          environmentInjector: this.injector,
-          hostElement: renderButton,
-          projectableNodes: [
-            [document.createTextNode('Load render from Hydrus')]
-          ]
-        })
-
-        const buttonContainer = document.createElement('div');
-        buttonContainer.className = 'pswp-error-text';
-        errorMsgEl.appendChild(buttonContainer);
-        buttonContainer.appendChild(renderButton);
-        this.appRef.attachView(psdButtonComponent.hostView);
-
-        renderButton.addEventListener('click', async (ev) => {
-          psdButtonComponent.setInput('disabled', true);
-          const data = {
-            type: 'image',
-            src: file.render_url,
-            msrc: file.thumbnail_url,
-            width: file.width,
-            height: file.height,
-            file
-          }
-          this.processedFiles.set(file.hash, data);
-          pswp.refreshSlideContent(content.index);
-        })
+        this.addRenderButton(file, errorMsgEl, pswp, content);
 
         this.addPhotopeaButton(file, errorMsgEl);
 
@@ -369,6 +341,10 @@ export class PhotoswipeService {
       errorMsgText.className = 'pswp-error-text';
       errorMsgEl.appendChild(errorMsgText);
 
+      if(file.render_url) {
+        this.addRenderButton(file, errorMsgEl, pswp, content);
+      }
+
       return errorMsgEl;
     });
 
@@ -468,7 +444,7 @@ export class PhotoswipeService {
     }
   }
 
-  addPhotopeaButton(file: HydrusBasicFile, element: HTMLElement) {
+  private addPhotopeaButton(file: HydrusBasicFile, element: HTMLElement) {
     if(canOpenInPhotopea(file) && this.settingsService.appSettings.photopeaIntegration) {
       const photopeaButton = document.createElement('a');
       photopeaButton.setAttribute('mat-stroked-button', '');
@@ -492,4 +468,36 @@ export class PhotoswipeService {
     }
   }
 
+  private addRenderButton(file: HydrusBasicFile, element: HTMLElement, pswp: PhotoSwipe, content: Content) {
+    const renderButton = document.createElement('button');
+      renderButton.setAttribute('mat-stroked-button', '');
+      const psdButtonComponent = createComponent(MatButton, {
+        environmentInjector: this.injector,
+        hostElement: renderButton,
+        projectableNodes: [
+          [document.createTextNode('Load render from Hydrus')]
+        ]
+      })
+
+      const buttonContainer = document.createElement('div');
+      buttonContainer.className = 'pswp-error-text';
+      element.appendChild(buttonContainer);
+      buttonContainer.appendChild(renderButton);
+      this.appRef.attachView(psdButtonComponent.hostView);
+
+      renderButton.addEventListener('click', async (ev) => {
+        psdButtonComponent.setInput('disabled', true);
+        const data = {
+          type: 'image',
+          src: file.render_url,
+          msrc: file.thumbnail_url,
+          width: file.width,
+          height: file.height,
+          file
+        }
+        this.processedFiles.set(file.hash, data);
+        pswp.refreshSlideContent(content.index);
+      })
+  }
+
 }

src/app/theme/theme-tags.service.ts

@@ -32,8 +32,7 @@ export class ThemeTagsService {
       filter(options => !!options?.old_options?.namespace_colours),
       map(options => options.old_options.namespace_colours),
       distinctUntilChanged(dequal),
-      switchMap(namespace_colours => this.setThemeFromNamespaceColors(namespace_colours))
-    ).subscribe()
+    ).subscribe(namespace_colours => this.setThemeFromNamespaceColors(namespace_colours))
 
   }
 

src/app/theme/theme.service.ts

@@ -25,13 +25,11 @@ export class ThemeService {
     document.adoptedStyleSheets.push(this.themeStylesheet);
     this.settings.appSettings$.pipe(
       filter(settings => settings.themeEnabled),
-      switchMap(settings => this.setThemeFromHexColor(settings.themeColor, settings.themeVariant))
-    ).subscribe()
+    ).subscribe(settings => this.setThemeFromHexColor(settings.themeColor, settings.themeVariant))
 
     this.settings.appSettings$.pipe(
       filter(settings => !settings.themeEnabled),
-      switchMap(() => this.removeTheme())
-    ).subscribe()
+    ).subscribe(() => this.removeTheme())
   }
 
   async setThemeFromHexColor(color: string, variant: SettingsThemeVariant = SettingsThemeVariant.DEFAULT) {