@nativescript-community/ui-image 4.3.34 → 4.3.36

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.3.36](https://github.com/nativescript-community/ui-image/compare/v4.3.35...v4.3.36) (2024-03-28)
+
+**Note:** Version bump only for package @nativescript-community/ui-image
+
+## [4.3.35](https://github.com/nativescript-community/ui-image/compare/v4.3.34...v4.3.35) (2024-03-22)
+
+**Note:** Version bump only for package @nativescript-community/ui-image
+
 ## [4.3.34](https://github.com/nativescript-community/ui-image/compare/v4.3.33...v4.3.34) (2024-02-27)
 
 **Note:** Version bump only for package @nativescript-community/ui-image

package/index-common.d.ts

@@ -84,6 +84,8 @@ export declare const loadModeProperty: Property<ImageBase, "sync" | "async">;
 export declare const clipToBoundsProperty: Property<ImageBase, boolean>;
 export declare const animatedImageViewProperty: Property<ImageBase, boolean>;
 export declare const needRequestImage: (target: any, propertyKey: string | Symbol, descriptor: PropertyDescriptor) => void;
+export type BasicSrcType = string | ImageSource | ImageAsset;
+export type SrcType = BasicSrcType | (() => BasicSrcType | PromiseLike<BasicSrcType>) | PromiseLike<BasicSrcType>;
 export declare abstract class ImageBase extends View {
     static finalImageSetEvent: string;
     static failureEvent: string;
@@ -91,7 +93,7 @@ export declare abstract class ImageBase extends View {
     static intermediateImageSetEvent: string;
     static releaseEvent: string;
     static submitEvent: string;
-    src: string | ImageSource | ImageAsset;
+    src: SrcType;
     lowerResSrc: string;
     placeholderImageUri: string;
     failureImageUri: string;

package/index.android.d.ts

@@ -1,5 +1,5 @@
 export * from './index-common';
-import { AnimatedImage, EventData, ImageBase, ImageError as ImageErrorBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting } from './index-common';
+import { AnimatedImage, EventData, ImageBase, ImageError as ImageErrorBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting, SrcType } from './index-common';
 export declare function initialize(config?: ImagePipelineConfigSetting): void;
 export declare function getImagePipeline(): ImagePipeline;
 export declare function shutDown(): void;
@@ -77,6 +77,7 @@ export declare class Img extends ImageBase {
     get cacheKey(): string | globalAndroid.net.Uri;
     updateImageUri(): Promise<void>;
     controllerListener: com.facebook.drawee.controller.ControllerListener<com.facebook.imagepipeline.image.ImageInfo>;
+    protected handleImageSrc(src: SrcType): Promise<void>;
     protected initImage(): Promise<void>;
     private updateHierarchy;
     private getDrawable;

package/index.android.js

@@ -355,7 +355,8 @@ export class Img extends ImageBase {
     }
     get cacheKey() {
         const src = this.src;
-        if (src && !(src instanceof ImageSource)) {
+        const srcType = typeof src;
+        if (src && (srcType === 'string' || src instanceof ImageAsset)) {
             return getUri(src);
         }
         return undefined;
@@ -363,15 +364,14 @@ export class Img extends ImageBase {
     async updateImageUri() {
         const imagePipeLine = getImagePipeline();
         const cacheKey = this.cacheKey;
-        const src = this.src;
         if (cacheKey) {
             // const isInCache = imagePipeLine.isInBitmapMemoryCache(uri);
             // // if (isInCache) {
             await imagePipeLine.evictFromCache(cacheKey);
             // }
         }
-        this.src = null;
-        this.src = src;
+        this.handleImageSrc(null);
+        this.initImage();
     }
     [_a = placeholderImageUriProperty.setNative]() {
         this.updateHierarchy();
@@ -436,13 +436,19 @@ export class Img extends ImageBase {
         super[backgroundInternalProperty.setNative](value);
         this.nativeViewProtected.setClipToOutline(value?.hasBorderRadius());
     }
-    async initImage() {
+    async handleImageSrc(src) {
         const view = this.nativeViewProtected;
         if (view) {
-            // this.nativeImageViewProtected.setImageURI(null);
-            const src = this.src;
             if (src instanceof Promise) {
-                this.src = await src;
+                this.handleImageSrc(await src);
+                return;
+            }
+            else if (typeof src === 'function') {
+                const newSrc = src();
+                if (newSrc instanceof Promise) {
+                    await newSrc;
+                }
+                this.handleImageSrc(newSrc);
                 return;
             }
             if (src) {
@@ -636,6 +642,10 @@ export class Img extends ImageBase {
             }
         }
     }
+    async initImage() {
+        // this.nativeImageViewProtected.setImageURI(null);
+        this.handleImageSrc(this.src);
+    }
     updateHierarchy() {
         if (!this.mCanUpdateHierarchy) {
             this.mNeedUpdateHierarchy = true;

package/index.d.ts

@@ -363,7 +363,7 @@ export class ImagePipeline {
      * Returns the actual cache key for url + context
      * this is an iOS feature because imageView properties are used for the cache key
      */
-    getCacheKey(uri: string, context): string;
+    getCacheKey(uri: string, options: Partial<Img>): string;
 
     /**
      * Returns whether the image is stored in the disk cache.

package/index.ios.d.ts

@@ -1,5 +1,5 @@
 export * from './index-common';
-import { EventData, ImageBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting } from './index-common';
+import { EventData, ImageBase, ImageInfo as ImageInfoBase, ImagePipelineConfigSetting, SrcType } from './index-common';
 export declare class ImageInfo implements ImageInfoBase {
     private width;
     private height;
@@ -16,7 +16,7 @@ export declare function shutDown(): void;
 export declare class ImagePipeline {
     private mIos;
     constructor();
-    getCacheKey(uri: string, context: any): string;
+    getCacheKey(uri: string, options: Partial<Img>): string;
     isInDiskCache(key: string): boolean;
     isInBitmapMemoryCache(key: string): boolean;
     evictFromMemoryCache(key: string): void;
@@ -37,9 +37,10 @@ export declare class Img extends ImageBase {
     nativeImageViewProtected: SDAnimatedImageView | UIImageView;
     isLoading: boolean;
     mCacheKey: string;
+    contextOptions: any;
     get cacheKey(): string;
     protected mImageSourceAffectsLayout: boolean;
-    protected mCIFilter: CIFilter;
+    mCIFilter: CIFilter;
     createNativeView(): UIImageView;
     _setNativeClipToBounds(): void;
     onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
@@ -49,6 +50,7 @@ export declare class Img extends ImageBase {
     private onLoadProgress;
     private getUIImage;
     protected initImage(): Promise<void>;
+    protected handleImageSrc(src: SrcType): Promise<void>;
     placeholderImage: UIImage;
     startAnimating(): void;
     stopAnimating(): void;

package/index.ios.js

@@ -73,11 +73,45 @@ export function initialize(config) {
     SDImageLoadersManager.sharedManager.loaders = NSArray.arrayWithArray([SDWebImageDownloader.sharedDownloader, SDImagePhotosLoader.sharedLoader]);
 }
 export function shutDown() { }
+function getContextFromOptions(options) {
+    const context = NSMutableDictionary.dictionary();
+    const transformers = [];
+    if (options.decodeWidth || options.decodeHeight) {
+        //@ts-ignore
+        transformers.push(NSImageDecodeSizeTransformer.transformerWithDecodeWidthDecodeHeight(options.decodeWidth || options.decodeHeight, options.decodeHeight || options.decodeWidth));
+    }
+    if (options.tintColor) {
+        transformers.push(SDImageTintTransformer.transformerWithColor(options.tintColor.ios));
+    }
+    if (options.blurRadius) {
+        transformers.push(SDImageBlurTransformer.transformerWithRadius(options.blurRadius));
+    }
+    if (options.roundAsCircle === true) {
+        //@ts-ignore
+        transformers.push(NSImageRoundAsCircleTransformer.transformer());
+    }
+    if (options.imageRotation !== 0 && !isNaN(options.imageRotation)) {
+        transformers.push(SDImageRotationTransformer.transformerWithAngleFitSize(-options.imageRotation * (Math.PI / 180), true));
+    }
+    if (options.roundBottomLeftRadius || options.roundBottomRightRadius || options.roundTopLeftRadius || options.roundTopRightRadius) {
+        transformers.push(
+        //@ts-ignore
+        NSImageRoundCornerTransformer.transformerWithTopLefRadiusTopRightRadiusBottomRightRadiusBottomLeftRadius(layout.toDeviceIndependentPixels(options.roundTopLeftRadius), layout.toDeviceIndependentPixels(options.roundTopRightRadius), layout.toDeviceIndependentPixels(options.roundBottomRightRadius), layout.toDeviceIndependentPixels(options.roundBottomLeftRadius)));
+    }
+    if (options.mCIFilter) {
+        transformers.push(SDImageFilterTransformer.transformerWithFilter(options.mCIFilter));
+    }
+    if (transformers.length > 0) {
+        context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
+    }
+    return context;
+}
 export class ImagePipeline {
     constructor() {
         this.mIos = SDImageCache.sharedImageCache;
     }
-    getCacheKey(uri, context) {
+    getCacheKey(uri, options) {
+        const context = getContextFromOptions(options);
         return SDWebImageManager.sharedManager.cacheKeyForURLContext(NSURL.URLWithString(uri), context);
     }
     isInDiskCache(key) {
@@ -186,6 +220,7 @@ export class Img extends ImageBase {
     constructor() {
         super(...arguments);
         this.isLoading = false;
+        this.contextOptions = null;
         this.mImageSourceAffectsLayout = true;
         this.handleImageLoaded = (image, error, cacheType) => {
             this.isLoading = false;
@@ -282,17 +317,18 @@ export class Img extends ImageBase {
     async updateImageUri() {
         const imagePipeLine = getImagePipeline();
         const src = this.src;
-        if (!(src instanceof ImageSource)) {
+        const srcType = typeof src;
+        if (src && (srcType === 'string' || src instanceof ImageAsset)) {
             const cachekKey = this.mCacheKey || getUri(src).absoluteString;
             // const isInCache = imagePipeLine.isInBitmapMemoryCache(cachekKey);
             // if (isInCache) {
             await imagePipeLine.evictFromCache(cachekKey);
             // }
         }
-        this.src = null;
+        // this.src = null;
         // ensure we clear the image as
         this._setNativeImage(null, false);
-        this.src = src;
+        this.initImage();
     }
     _setNativeImage(nativeImage, animated = true) {
         if (animated && this.fadeDuration) {
@@ -352,10 +388,21 @@ export class Img extends ImageBase {
         return image?.ios;
     }
     async initImage() {
+        // this.nativeImageViewProtected.setImageURI(null);
+        this.handleImageSrc(this.src);
+    }
+    async handleImageSrc(src) {
         if (this.nativeViewProtected) {
-            const src = this.src;
             if (src instanceof Promise) {
-                this.src = await src;
+                this.handleImageSrc(await src);
+                return;
+            }
+            else if (typeof src === 'function') {
+                const newSrc = src();
+                if (newSrc instanceof Promise) {
+                    await newSrc;
+                }
+                this.handleImageSrc(newSrc);
                 return;
             }
             if (src) {
@@ -395,42 +442,19 @@ export class Img extends ImageBase {
                 if (this.alwaysFade === true) {
                     options |= 131072 /* SDWebImageOptions.ForceTransition */;
                 }
-                const context = NSMutableDictionary.dictionary();
-                const transformers = [];
                 if (this.progressiveRenderingEnabled === true) {
                     options = options | 4 /* SDWebImageOptions.ProgressiveLoad */;
                 }
-                if (this.decodeWidth || this.decodeHeight) {
-                    //@ts-ignore
-                    transformers.push(NSImageDecodeSizeTransformer.transformerWithDecodeWidthDecodeHeight(this.decodeWidth || this.decodeHeight, this.decodeHeight || this.decodeWidth));
-                }
-                if (this.tintColor) {
-                    transformers.push(SDImageTintTransformer.transformerWithColor(this.tintColor.ios));
-                }
-                if (this.blurRadius) {
-                    transformers.push(SDImageBlurTransformer.transformerWithRadius(this.blurRadius));
+                const context = getContextFromOptions(this);
+                if (this.animatedImageView) {
+                    // as we use SDAnimatedImageView  all images are loaded as SDAnimatedImage;
+                    options |= 512 /* SDWebImageOptions.TransformAnimatedImage */;
                 }
-                if (this.roundAsCircle === true) {
-                    //@ts-ignore
-                    transformers.push(NSImageRoundAsCircleTransformer.transformer());
-                }
-                if (this.imageRotation !== 0 && !isNaN(this.imageRotation)) {
-                    transformers.push(SDImageRotationTransformer.transformerWithAngleFitSize(-this.imageRotation * (Math.PI / 180), true));
-                }
-                if (this.roundBottomLeftRadius || this.roundBottomRightRadius || this.roundTopLeftRadius || this.roundTopRightRadius) {
-                    transformers.push(
-                    //@ts-ignore
-                    NSImageRoundCornerTransformer.transformerWithTopLefRadiusTopRightRadiusBottomRightRadiusBottomLeftRadius(layout.toDeviceIndependentPixels(this.roundTopLeftRadius), layout.toDeviceIndependentPixels(this.roundTopRightRadius), layout.toDeviceIndependentPixels(this.roundBottomRightRadius), layout.toDeviceIndependentPixels(this.roundBottomLeftRadius)));
-                }
-                if (this.mCIFilter) {
-                    transformers.push(SDImageFilterTransformer.transformerWithFilter(this.mCIFilter));
-                }
-                if (transformers.length > 0) {
-                    if (this.animatedImageView) {
-                        // as we use SDAnimatedImageView  all images are loaded as SDAnimatedImage;
-                        options |= 512 /* SDWebImageOptions.TransformAnimatedImage */;
-                    }
-                    context.setValueForKey(SDImagePipelineTransformer.transformerWithTransformers(transformers), SDWebImageContextImageTransformer);
+                if (this.contextOptions && typeof this.contextOptions === 'object') {
+                    Object.keys(this.contextOptions).forEach((k) => {
+                        const value = this.contextOptions[k];
+                        context.setValueForKey(value, k);
+                    });
                 }
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
                 this.nativeImageViewProtected.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.3.34",
+    "version": "4.3.36",
     "description": "Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.",
     "main": "./index",
     "sideEffects": false,
@@ -36,5 +36,5 @@
     },
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
-    "gitHead": "778132d7f03c8e61248a5be6bdcc7362808de0a3"
+    "gitHead": "7b2244af770b88316960d3b8cc5b4eb7dccaff0b"
 }