react-native-fast-image 8.10.0 → 8.12.0

package/README.md

@@ -186,6 +186,22 @@ Changing it restarts the animation.
 
 ---
 
+### `imageRendering?: 'auto' | 'smooth' | 'pixelated'`
+
+How the image is filtered when it's drawn smaller or larger than its size (like CSS's `image-rendering`):
+
+- `'auto'` **(Default)** - The platform's usual filtering.
+- `'smooth'` - iOS only. Keeps a large image drawn much smaller than its size (e.g. a big photo as a thumbnail, or fine lines and text) from looking jagged or noisy. **It uses more memory:** the image is also kept at smaller sizes for drawing, about a third more than the decoded image. On Android it's the same as `'auto'` (images are already decoded at about the view's size there).
+- `'pixelated'` - Sharp pixels, without smoothing, e.g. for pixel art drawn larger than its size. On Android, animated images are still smoothed.
+
+---
+
+### `paused?: boolean`
+
+Pauses an animated image (GIF, and animated WebP on iOS) on the frame it's showing; `false` plays it again from there. Each image animates on its own, so pausing one doesn't pause others showing the same file.
+
+---
+
 ### `onLoadStart?: () => void`
 
 Called when the image starts to load.

package/android/src/main/java/com/dylanvann/fastimage/FastImageGif.java

@@ -18,6 +18,7 @@ import com.bumptech.glide.load.resource.bitmap.BitmapResource;
 import com.bumptech.glide.load.resource.gif.GifBitmapProvider;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 
+import java.lang.reflect.Field;
 import java.nio.ByteBuffer;
 
 // Gives a view its own animation of a GIF. Glide gives every view that shows
@@ -64,6 +65,42 @@ final class FastImageGif {
         return copy;
     }
 
+    // GifDrawable.start() also starts counting plays again, so a paused GIF
+    // would play its whole loop count again when resumed; iOS continues it.
+    // The count isn't public: keep it across start() by reflection. A GIF
+    // that already finished its plays starts over, as on iOS. Without the
+    // fields (another Glide version), it counts again, as start() does.
+    @Nullable
+    private static final Field LOOP_COUNT = field("loopCount");
+    @Nullable
+    private static final Field MAX_LOOP_COUNT = field("maxLoopCount");
+
+    static void resume(GifDrawable gif) {
+        if (LOOP_COUNT == null || MAX_LOOP_COUNT == null) {
+            gif.start();
+            return;
+        }
+        try {
+            int played = LOOP_COUNT.getInt(gif);
+            int max = MAX_LOOP_COUNT.getInt(gif);
+            gif.start();
+            if (max == GifDrawable.LOOP_FOREVER || played < max) LOOP_COUNT.setInt(gif, played);
+        } catch (IllegalAccessException e) {
+            gif.start();
+        }
+    }
+
+    @Nullable
+    private static Field field(String name) {
+        try {
+            Field field = GifDrawable.class.getDeclaredField(name);
+            field.setAccessible(true);
+            return field.getType() == int.class ? field : null;
+        } catch (Exception e) {
+            return null;
+        }
+    }
+
     // ByteBufferGifDecoder's.
     private static int sampleSize(GifHeader header, int width, int height) {
         int exact = Math.min(header.getHeight() / height, header.getWidth() / width);

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java

@@ -94,6 +94,16 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setLoopCount(loopCount);
     }
 
+    @ReactProp(name = "imageRendering")
+    public void setImageRendering(FastImageViewWithUrl view, @Nullable String imageRendering) {
+        view.setImageRendering(imageRendering);
+    }
+
+    @ReactProp(name = "paused")
+    public void setPaused(FastImageViewWithUrl view, boolean paused) {
+        view.setPaused(paused);
+    }
+
     @ReactProp(name = "resizeMode")
     public void setResizeMode(FastImageViewWithUrl view, String resizeMode) {
         final FastImageViewWithUrl.ScaleType scaleType = FastImageViewConverter.getScaleType(resizeMode);

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java

@@ -5,6 +5,7 @@ import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_LOAD_END
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 
 import androidx.annotation.NonNull;
@@ -15,8 +16,10 @@ import androidx.core.view.ViewCompat;
 import com.bumptech.glide.RequestBuilder;
 import com.bumptech.glide.RequestManager;
 import com.bumptech.glide.load.model.GlideUrl;
+import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 import com.bumptech.glide.request.Request;
+import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.request.target.DrawableImageViewTarget;
 import com.bumptech.glide.request.target.SizeReadyCallback;
 import com.bumptech.glide.request.transition.Transition;
@@ -76,8 +79,26 @@ class FastImageViewWithUrl extends AppCompatImageView {
         // another view plays it.
         if (mOwnGif != null && getDrawable() == mOwnGif) {
             applyLoopCount(mOwnGif);
-            mOwnGif.stop();
-            mOwnGif.startFromFirstFrame();
+            if (!mPaused) {
+                mOwnGif.stop();
+                mOwnGif.startFromFirstFrame();
+            }
+        }
+    }
+
+    // Pauses GIFs on the frame they're showing (the view's own animation).
+    private boolean mPaused = false;
+
+    public void setPaused(boolean paused) {
+        if (paused == mPaused) return;
+        mPaused = paused;
+        if (mOwnGif != null && getDrawable() == mOwnGif) {
+            if (paused) {
+                mOwnGif.stop();
+            } else {
+                // Continues the loop count, as on iOS.
+                FastImageGif.resume(mOwnGif);
+            }
         }
     }
 
@@ -95,6 +116,13 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
         @Override
         public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
+            if (resource instanceof BitmapDrawable) {
+                if (mPixelated) {
+                    // Scaled by the view without filtering: sharp pixels.
+                    resource = resource.mutate();
+                    resource.setFilterBitmap(false);
+                }
+            }
             if (resource instanceof GifDrawable) {
                 GifDrawable own = FastImageGif.copy(
                         getContext(), (GifDrawable) resource, mLoadingWidth, mLoadingHeight);
@@ -102,12 +130,27 @@ class FastImageViewWithUrl extends AppCompatImageView {
                     applyLoopCount(own);
                     super.onResourceReady(own, transition);
                     mOwnGif = own;
+                    // The target starts it; paused, it waits on its first frame.
+                    if (mPaused) own.stop();
                     return;
                 }
             }
             super.onResourceReady(resource, transition);
         }
 
+        // The target starts animations again when the Activity does: not a
+        // paused one, and the view's own GIF continues its loop count (start()
+        // would count again).
+        @Override
+        public void onStart() {
+            if (mPaused) return;
+            if (mOwnGif != null && getDrawable() == mOwnGif) {
+                FastImageGif.resume(mOwnGif);
+            } else {
+                super.onStart();
+            }
+        }
+
         @Override
         protected void setResource(@Nullable Drawable resource) {
             super.setResource(resource);
@@ -134,6 +177,33 @@ class FastImageViewWithUrl extends AppCompatImageView {
         mNeedsReload = true;
     }
 
+    // imageRendering="pixelated": no resampling by Glide, and drawn without
+    // filtering (sharp pixels). "smooth" is iOS only; here it's the same as
+    // "auto": Glide already decodes a large image at about the view's size, and
+    // averaging it properly would need a full-size decode. Part of the
+    // request, so a change reloads.
+    private boolean mPixelated = false;
+
+    public void setImageRendering(@Nullable String imageRendering) {
+        boolean pixelated = "pixelated".equals(imageRendering);
+        if (pixelated == mPixelated) return;
+        mPixelated = pixelated;
+        mNeedsReload = true;
+    }
+
+    // The scale type's options (what into() would apply), or none when
+    // pixelated.
+    private RequestOptions renderingOptions(Object model) {
+        if (mPixelated) {
+            // Decoded as it is, then scaled by the view without filtering (see
+            // OwnGifTarget).
+            return new RequestOptions()
+                    .downsample(new FastImageSourceSize.Capture(DownsampleStrategy.NONE, String.valueOf(model)))
+                    .dontTransform();
+        }
+        return FastImageSourceSize.scaleTypeOptions(getScaleType(), FastImageSourceSize.capture(getScaleType(), model));
+    }
+
     // The request for the image the view shows once it has loaded, and the one
     // loading. A new source starts with the shown one as a thumbnail, from the
     // cache only, so the image stays until the new one has loaded instead of
@@ -353,7 +423,6 @@ class FastImageViewWithUrl extends AppCompatImageView {
         if (requestManager != null) {
             // Records the image's own size when Glide decodes it, for onLoad.
             Object model = imageSource == null ? null : imageSource.getSourceForLoad();
-            FastImageSourceSize.Capture capture = FastImageSourceSize.capture(getScaleType(), model);
             RequestBuilder<Drawable> builder =
                     requestManager
                             // This will make this work for remote and local images. e.g.
@@ -368,8 +437,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
                                     .placeholder(mDefaultSource) // show until loaded
                                     .fallback(mDefaultSource)) // null will not be treated as error
                             // What into() would apply for the scale type, with
-                            // the size capture.
-                            .apply(FastImageSourceSize.scaleTypeOptions(getScaleType(), capture));
+                            // the size capture, for imageRendering.
+                            .apply(renderingOptions(model));
             RequestBuilder<Drawable> request = builder.clone();
 
             boolean thumbnail = shownRequest != null && model != null;

package/dist/index.cjs.js.flow

@@ -90,6 +90,8 @@ export type FastImageProps = $ReadOnly<{|
     fallback?: ?boolean,
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    paused?: ?boolean,
     testID?: ?string,
 |}>
 

package/dist/index.d.ts

@@ -80,6 +80,20 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * or a number of times. Changing it restarts the animation.
      */
     loop?: boolean | number;
+    /**
+     * How the image is filtered when it's drawn smaller or larger than its
+     * size: `'auto'` (default, the platform's usual filtering), `'smooth'`
+     * (iOS only: keeps a large image drawn much smaller from looking jagged
+     * or noisy; uses more memory, see the README) or `'pixelated'` (sharp
+     * pixels, e.g. for pixel art).
+     */
+    imageRendering?: 'auto' | 'smooth' | 'pixelated';
+    /**
+     * Pauses an animated image (GIF, and animated WebP on iOS) on the frame
+     * it's showing; `false` plays it again from there. Each image animates on
+     * its own, so pausing one doesn't pause others showing the same file.
+     */
+    paused?: boolean;
     onLoadStart?(): void;
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;

package/dist/index.js.flow

@@ -90,6 +90,8 @@ export type FastImageProps = $ReadOnly<{|
     fallback?: ?boolean,
     recyclingKey?: ?string,
     loop?: ?(boolean | number),
+    imageRendering?: ?('auto' | 'smooth' | 'pixelated'),
+    paused?: ?boolean,
     testID?: ?string,
 |}>
 

package/ios/FastImage/FFFastImageView.h

@@ -25,6 +25,11 @@
 // How many times animated images play: -1 for the file's own loop count (the
 // `loop` prop not set), 0 for forever, or a number of times.
 @property (nonatomic, assign) NSInteger loopCount;
+// How the image is filtered when drawn at another size: auto, smooth or
+// pixelated.
+@property (nonatomic, copy) NSString *imageRendering;
+// Pauses animated images on the frame they're showing.
+@property (nonatomic, assign) BOOL paused;
 
 @end
 

package/ios/FastImage/FFFastImageView.m

@@ -53,6 +53,24 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     return self;
 }
 
+- (void) setImageRendering: (NSString*)imageRendering {
+    _imageRendering = [imageRendering copy];
+    if ([imageRendering isEqualToString: @"smooth"]) {
+        // Trilinear: drawn smaller from mipmaps, so a large image drawn much
+        // smaller is smoothed instead of aliased (#445). The mipmaps take
+        // about a third more memory than the decoded image.
+        self.layer.minificationFilter = kCAFilterTrilinear;
+        self.layer.magnificationFilter = kCAFilterLinear;
+    } else if ([imageRendering isEqualToString: @"pixelated"]) {
+        // Nearest neighbor: sharp pixels, e.g. for pixel art (#926).
+        self.layer.minificationFilter = kCAFilterNearest;
+        self.layer.magnificationFilter = kCAFilterNearest;
+    } else {
+        self.layer.minificationFilter = kCAFilterLinear;
+        self.layer.magnificationFilter = kCAFilterLinear;
+    }
+}
+
 - (void) setLoopCount: (NSInteger)loopCount {
     if (_loopCount == loopCount) {
         return;
@@ -67,9 +85,28 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
     } else if (self.player && [self.image conformsToProtocol: @protocol(SDAnimatedImage)]) {
         self.player.totalLoopCount = [(id<SDAnimatedImage>) self.image animatedImageLoopCount];
     }
-    // Apply it to the image that's showing, and play it again.
+    // Apply it to the image that's showing, and play it again (unless it's
+    // paused: then it waits on the first frame).
     if (self.player) {
         [self.player seekToFrameAtIndex: 0 loopCount: 0];
+        if (!_paused) {
+            [self startAnimating];
+        }
+    }
+}
+
+- (void) setPaused: (BOOL)paused {
+    if (_paused == paused) {
+        return;
+    }
+    _paused = paused;
+    // SDAnimatedImageView starts an animated image when it's shown, and again
+    // when the view comes back on screen, unless autoPlayAnimatedImage is off.
+    // Stopping keeps the frame it's on (resetFrameIndexWhenStopped is off).
+    self.autoPlayAnimatedImage = !paused;
+    if (paused) {
+        [self stopAnimating];
+    } else {
         [self startAnimating];
     }
 }

package/ios/FastImage/FFFastImageViewManager.m

@@ -19,6 +19,8 @@ RCT_EXPORT_VIEW_PROPERTY(defaultSource, UIImage)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
 RCT_EXPORT_VIEW_PROPERTY(recyclingKey, NSString)
 RCT_EXPORT_VIEW_PROPERTY(loopCount, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(imageRendering, NSString)
+RCT_EXPORT_VIEW_PROPERTY(paused, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.10.0",
+    "version": "8.12.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",
@@ -51,6 +51,7 @@
         "@types/react": "^17.0.14",
         "@types/react-native": "^0.69.5",
         "@types/react-test-renderer": "^17.0.1",
+        "conventional-changelog-angular": "8.3.1",
         "maestro-runner": "1.1.27",
         "odiff-bin": "^4.5.0",
         "oxfmt": "0.70.0",