Apply pixelated upscale to gallery and slide

allusion-app · Nov 29, 2022 · 9c1a94a · 9c1a94a
1 parent 184faa5
commit 9c1a94a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/src/frontend/containers/ContentView/GalleryItem.tsx b/src/frontend/containers/ContentView/GalleryItem.tsx
@@ -151,12 +151,16 @@ export const Thumbnail = observer(({ file, mounted, forceNoThumbnail }: ItemProp
     return <span className="image-loading" />;
   } else if (imageSource.tag === 'ready') {
     if ('ok' in imageSource.value) {
+      const is_lowres = file.width < 320 || file.height < 320;
       return (
         <img
           src={encodeFilePath(imageSource.value.ok)}
           alt=""
           data-file-id={file.id}
           onError={handleImageError}
+          style={
+            is_lowres && uiStore.upscaleMode == 'pixelated' ? { imageRendering: 'pixelated' } : {}
+          }
         />
       );
     } else {

diff --git a/src/frontend/containers/ContentView/SlideMode/ZoomPan.tsx b/src/frontend/containers/ContentView/SlideMode/ZoomPan.tsx
@@ -22,6 +22,7 @@ import {
   tryPreventDefault,
   Vec2,
 } from './utils';
+import { UpscaleMode } from '../../../stores/UiStore';
 
 const OVERZOOM_TOLERANCE = 0.05;
 const DOUBLE_TAP_THRESHOLD = 250;
@@ -41,6 +42,7 @@ export interface ZoomPanProps {
   imageDimension: Dimension;
   containerDimension: Dimension;
   onClose?: () => void;
+  upscaleMode: UpscaleMode;
 
   transitionStart?: Transform;
   transitionEnd?: Transform;
@@ -292,7 +294,7 @@ export default class ZoomPan extends React.Component<ZoomPanProps, ZoomPanState>
           onWheel: this.handleMouseWheel,
           onDragStart: tryPreventDefault,
           onContextMenu: tryPreventDefault,
-          style: imageStyle(this.state),
+          style: imageStyle(this.state, this.props.upscaleMode),
         })}
       </div>
     );
@@ -481,9 +483,10 @@ export const CONTAINER_DEFAULT_STYLE = {
   margin: 'auto',
 };
 
-function imageStyle({ top, left, scale }: ZoomPanState): CSSProperties {
+function imageStyle({ top, left, scale }: ZoomPanState, upscaleMode: UpscaleMode): CSSProperties {
   return {
     transform: `translate3d(${left}px, ${top}px, 0) scale(${scale})`,
+    imageRendering: scale >= 2 && upscaleMode === 'pixelated' ? 'pixelated' : undefined,
   };
 }
 

diff --git a/src/frontend/containers/ContentView/SlideMode/index.tsx b/src/frontend/containers/ContentView/SlideMode/index.tsx
@@ -208,7 +208,7 @@ const ZoomableImage: React.FC<ZoomableImageProps> = ({
   transitionEnd,
   onClose,
 }: ZoomableImageProps) => {
-  const { imageLoader } = useStore();
+  const { imageLoader, uiStore } = useStore();
   const { absolutePath, width: imgWidth, height: imgHeight } = file;
   // Image src can be set asynchronously: keep track of it in a state
   // Needed for image formats not natively supported by the browser (e.g. tiff): will be converted to another format
@@ -277,6 +277,7 @@ const ZoomableImage: React.FC<ZoomableImageProps> = ({
         transitionStart={transitionStart}
         transitionEnd={transitionEnd}
         onClose={onClose}
+        upscaleMode={uiStore.upscaleMode}
       >
         {(props) => (
           <img

diff --git a/src/frontend/stores/UiStore.ts b/src/frontend/stores/UiStore.ts
@@ -20,7 +20,7 @@ export const enum ViewMethod {
 }
 export type ThumbnailSize = 'small' | 'medium' | 'large' | number;
 type ThumbnailShape = 'square' | 'letterbox';
-type UpscaleMode = 'smooth' | 'pixelated';
+export type UpscaleMode = 'smooth' | 'pixelated';
 export const PREFERENCES_STORAGE_KEY = 'preferences';
 
 export interface IHotkeyMap {
@@ -101,6 +101,7 @@ type PersistentPreferenceFields =
   | 'method'
   | 'thumbnailSize'
   | 'thumbnailShape'
+  | 'upscaleMode'
   | 'hotkeyMap'
   | 'isThumbnailTagOverlayEnabled'
   | 'isThumbnailFilenameOverlayEnabled'
@@ -218,10 +219,6 @@ class UiStore {
     this.setThumbnailShape('letterbox');
   }
 
-  @action.bound setUpscaleMode(mode: UpscaleMode) {
-    this.upscaleMode = mode;
-  }
-
   @action.bound setUpscaleModeSmooth() {
     this.setUpscaleMode('smooth');
   }
@@ -293,10 +290,6 @@ class UiStore {
     this.isThumbnailResolutionOverlayEnabled = !this.isThumbnailResolutionOverlayEnabled;
   }
 
-  @action.bound togglePixelated() {
-    this.isPixelated = !this.isPixelated;
-  }
-
   @action.bound toggleRememberSearchQuery() {
     this.isRememberSearchEnabled = !this.isRememberSearchEnabled;
   }
@@ -830,6 +823,9 @@ class UiStore {
         if (prefs.thumbnailShape) {
           this.setThumbnailShape(prefs.thumbnailShape);
         }
+        if (prefs.upscaleMode) {
+          this.setUpscaleMode(prefs.upscaleMode);
+        }
         this.isThumbnailTagOverlayEnabled = Boolean(prefs.isThumbnailTagOverlayEnabled ?? true);
         this.isThumbnailFilenameOverlayEnabled = Boolean(prefs.isThumbnailFilenameOverlayEnabled ?? false); // eslint-disable-line prettier/prettier
         this.isThumbnailResolutionOverlayEnabled = Boolean(prefs.isThumbnailResolutionOverlayEnabled ?? false); // eslint-disable-line prettier/prettier
@@ -884,6 +880,7 @@ class UiStore {
       method: this.method,
       thumbnailSize: this.thumbnailSize,
       thumbnailShape: this.thumbnailShape,
+      upscaleMode: this.upscaleMode,
       hotkeyMap: { ...this.hotkeyMap },
       isThumbnailFilenameOverlayEnabled: this.isThumbnailFilenameOverlayEnabled,
       isThumbnailTagOverlayEnabled: this.isThumbnailTagOverlayEnabled,
@@ -946,6 +943,10 @@ class UiStore {
   @action private setThumbnailShape(shape: ThumbnailShape) {
     this.thumbnailShape = shape;
   }
+
+  @action private setUpscaleMode(mode: UpscaleMode) {
+    this.upscaleMode = mode;
+  }
 }
 
 export default UiStore;