@nativescript-community/ui-image 4.1.2 → 4.1.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.3](https://github.com/nativescript-community/ui-image/compare/v4.1.2...v4.1.3) (2022-01-14)
+
+
+### Bug Fixes
+
+* **ios:** fixed transforms not being applied. New `animatedImageView` property to be set when using animated images ([5fb20f1](https://github.com/nativescript-community/ui-image/commit/5fb20f1d13cc48fe57000dc2fa6bb15c8b568ff0))
+
+
+
+
+
 ## [4.1.2](https://github.com/nativescript-community/ui-image/compare/v4.1.1...v4.1.2) (2021-12-29)
 
 **Note:** Version bump only for package @nativescript-community/ui-image

package/image-common.d.ts

@@ -82,6 +82,7 @@ export declare class ImageBase extends View {
     aspectRatio: number;
     decodeWidth: number;
     decodeHeight: number;
+    animatedImageView: boolean;
     alwaysFade: boolean;
     noCache: boolean;
     tintColor: Color;
@@ -113,6 +114,7 @@ export declare class ImageBase extends View {
     static roundBottomLeftRadiusProperty: Property<ImageBase, CoreTypes.LengthType>;
     static roundBottomRightRadiusProperty: Property<ImageBase, CoreTypes.LengthType>;
     static clipToBoundsProperty: Property<ImageBase, boolean>;
+    static animatedImageViewProperty: Property<ImageBase, boolean>;
     protected handleImageProgress(value: number, totalSize?: number): void;
     private static needsSizeAdjustment;
     computeScaleFactor(measureWidth: number, measureHeight: number, widthIsFinite: boolean, heightIsFinite: boolean, nativeWidth: number, nativeHeight: number, aspectRatio: number): {

package/image-common.js

@@ -147,6 +147,7 @@ ImageBase.roundTopRightRadiusProperty = new Property({ name: 'roundTopRightRadiu
 ImageBase.roundBottomLeftRadiusProperty = new Property({ name: 'roundBottomLeftRadius', defaultValue: 0, valueConverter: (v) => Length.toDevicePixels(Length.parse(v)) });
 ImageBase.roundBottomRightRadiusProperty = new Property({ name: 'roundBottomRightRadius', defaultValue: 0, valueConverter: (v) => Length.toDevicePixels(Length.parse(v)) });
 ImageBase.clipToBoundsProperty = new Property({ name: 'clipToBounds', defaultValue: true, valueConverter: booleanConverter });
+ImageBase.animatedImageViewProperty = new Property({ name: 'animatedImageView', defaultValue: false, valueConverter: booleanConverter });
 ImageBase.srcProperty.register(ImageBase);
 ImageBase.lowerResSrcProperty.register(ImageBase);
 ImageBase.placeholderImageUriProperty.register(ImageBase);
@@ -173,4 +174,5 @@ ImageBase.decodeHeightProperty.register(ImageBase);
 ImageBase.alwaysFadeProperty.register(ImageBase);
 ImageBase.noCacheProperty.register(ImageBase);
 ImageBase.clipToBoundsProperty.register(ImageBase);
+ImageBase.animatedImageViewProperty.register(ImageBase);
 //# sourceMappingURL=image-common.js.map

package/image.d.ts

@@ -194,6 +194,11 @@ export class Img extends View {
      * Number value used as the resized image height
      */
     decodeHeight: number;
+
+    /**
+     * IOS: if you want to show animated images you need to set this to true
+     */
+    animatedImageView: boolean;
 }
 
 /**

package/image.ios.d.ts

@@ -31,10 +31,10 @@ export declare class ImagePipeline {
 }
 export declare function getImagePipeline(): ImagePipeline;
 export declare class Img extends ImageBase {
-    nativeViewProtected: SDAnimatedImageView;
+    nativeViewProtected: SDAnimatedImageView | UIImageView;
     isLoading: boolean;
     private _imageSourceAffectsLayout;
-    createNativeView(): SDAnimatedImageView;
+    createNativeView(): UIImageView;
     _setNativeClipToBounds(): void;
     onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
     updateImageUri(): void;

package/image.ios.js

@@ -3,39 +3,6 @@ import { ImageAsset, ImageSource, Screen, Trace, knownFolders, path } from '@nat
 import { isString } from '@nativescript/core/utils/types';
 import { RESOURCE_PREFIX, isFileOrResourcePath, isFontIconURI, layout } from '@nativescript/core/utils/utils';
 import { CLog, CLogTypes, ImageBase, ScaleType } from './image-common';
-var SDImageRoundAsCircleTransformer = /** @class */ (function (_super) {
-    __extends(SDImageRoundAsCircleTransformer, _super);
-    function SDImageRoundAsCircleTransformer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SDImageRoundAsCircleTransformer.transformer = function () {
-        var transformer = SDImageRoundAsCircleTransformer.alloc().init();
-        return transformer;
-    };
-    Object.defineProperty(SDImageRoundAsCircleTransformer.prototype, "transformerKey", {
-        get: function () {
-            return 'SDImageRoundAsCircleTransformer';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SDImageRoundAsCircleTransformer.prototype.transformedImageWithImageForKey = function (image, key) {
-        if (!image) {
-            return null;
-        }
-        var width = image.size.width;
-        var height = image.size.height;
-        var minwidth = Math.min(width, height);
-        var cornerRadius = minwidth / 2;
-        var result = image
-            .sd_resizedImageWithSizeScaleMode(CGSizeMake(minwidth, minwidth), SDImageScaleMode.AspectFill)
-            .sd_roundedCornerImageWithRadiusCornersBorderWidthBorderColor(cornerRadius, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, 0, null)
-            .sd_resizedImageWithSizeScaleMode(CGSizeMake(width, height), SDImageScaleMode.AspectFit);
-        return result;
-    };
-    SDImageRoundAsCircleTransformer.ObjCProtocols = [SDImageTransformer];
-    return SDImageRoundAsCircleTransformer;
-}(NSObject));
 export class ImageInfo {
     constructor(width, height) {
         this.width = width;
@@ -236,7 +203,7 @@ export class Img extends ImageBase {
         };
     }
     createNativeView() {
-        const result = SDAnimatedImageView.new();
+        const result = this.animatedImageView ? SDAnimatedImageView.new() : UIImageView.new();
         result.contentMode = 1;
         result.clipsToBounds = true;
         result.userInteractionEnabled = true;
@@ -379,12 +346,15 @@ export class Img extends ImageBase {
                     transformers.push(SDImageBlurTransformer.transformerWithRadius(this.blurRadius));
                 }
                 if (this.roundAsCircle === true) {
-                    transformers.push(SDImageRoundAsCircleTransformer.new());
+                    transformers.push(NSImageRoundAsCircleTransformer.transformer());
                 }
                 if (this.roundBottomLeftRadius || this.roundBottomRightRadius || this.roundTopLeftRadius || this.roundTopRightRadius) {
                     transformers.push(NSImageRoundCornerTransformer.transformerWithTopLefRadiusTopRightRadiusBottomRightRadiusBottomLeftRadius(layout.toDeviceIndependentPixels(this.roundTopLeftRadius), layout.toDeviceIndependentPixels(this.roundTopRightRadius), layout.toDeviceIndependentPixels(this.roundBottomRightRadius), layout.toDeviceIndependentPixels(this.roundBottomLeftRadius)));
                 }
                 if (transformers.length > 0) {
+                    if (this.animatedImageView) {
+                        options |= 512;
+                    }
                     context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
                 }
                 this.nativeViewProtected.sd_setImageWithURLPlaceholderImageOptionsContextProgressCompleted(uri, this.placeholderImage, options, context, this.onLoadProgress, this.handleImageLoaded);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-image",
-    "version": "4.1.2",
+    "version": "4.1.3",
     "description": "Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.",
     "main": "./image",
     "sideEffects": false,
@@ -36,5 +36,5 @@
     },
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
-    "gitHead": "a12811812f0f220d2ba522b76242182950bbf7bb"
+    "gitHead": "7234bbcc3e78bc8ea469bf75657ef2e3be3453d2"
 }

package/platforms/ios/src/NImage.h

@@ -4,3 +4,4 @@
 
 #import "NSImageRoundCornerTransformer.h"
 #import "NSImageDecodeSizeTransformer.h"
+#import "NSImageRoundAsCircleTransformer.h"

package/platforms/ios/src/NSImageRoundAsCircleTransformer.h

@@ -0,0 +1,8 @@
+#import <SDWebImage/SDImageTransformer.h>
+
+@interface NSImageRoundAsCircleTransformer: NSObject <SDImageTransformer>
+
+- (nonnull instancetype)init NS_UNAVAILABLE;
++ (nonnull instancetype)transformer;
+
+@end

package/platforms/ios/src/NSImageRoundAsCircleTransformer.m

@@ -0,0 +1,40 @@
+#import "NSImageRoundAsCircleTransformer.h"
+#import <SDWebImage/SDGraphicsImageRenderer.h>
+
+@interface NSImageRoundAsCircleTransformer ()
+
+@end
+
+@implementation NSImageRoundAsCircleTransformer
++ (instancetype)transformer {
+
+    NSImageRoundAsCircleTransformer *transformer = [NSImageRoundAsCircleTransformer new];
+    return transformer;
+}
+
+- (NSString *)transformerKey {
+    return [NSString stringWithFormat:@"NSImageRoundAsCircleTransformer"];
+}
+
+- (UIImage *)transformedImageWithImage:(UIImage *)image forKey:(NSString *)key {
+    if (!image) {
+        return nil;
+    }
+
+    CGFloat width = (CGFloat)image.size.width;
+    CGFloat height = (CGFloat)image.size.height;
+    CGFloat minwidth = MIN(width, height);
+    CGFloat cornerRadius = minwidth / 2;
+
+    UIImage * resultImage = [image sd_resizedImageWithSize:CGSizeMake(minwidth, minwidth) scaleMode:SDImageScaleModeAspectFill];
+    resultImage = [resultImage sd_roundedCornerImageWithRadius:cornerRadius corners:UIRectCornerAllCorners borderWidth:0 borderColor:nil];
+    return resultImage;
+    //     const result = (image as any)
+    //         .sd_resizedImageWithSizeScaleMode(CGSizeMake(minwidth, minwidth), SDImageScaleMode.AspectFill)
+    //         .sd_roundedCornerImageWithRadiusCornersBorderWidthBorderColor(cornerRadius, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, 0, null)
+    //         .sd_resizedImageWithSizeScaleMode(CGSizeMake(width, height), SDImageScaleMode.AspectFit);
+    //     return result;
+    // return resultImage;
+}
+
+@end