@nativescript-community/ui-image 4.3.41 → 4.4.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.0](https://github.com/nativescript-community/ui-image/compare/v4.3.41...v4.4.0) (2024-04-23)
+
+### Features
+
+* **image:** add progress indicator for ios ([11b894a](https://github.com/nativescript-community/ui-image/commit/11b894a787afae629ba53038bbbcad4e1a48fc54))
+
 ## [4.3.41](https://github.com/nativescript-community/ui-image/compare/v4.3.40...v4.3.41) (2024-04-23)
 
 ### Bug Fixes

package/README.md

@@ -448,7 +448,7 @@ Boolean value used for enabling or disabling the streaming of progressive JPEG i
 <@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
 ```
 
-- **showProgressBar**  (Android only)
+- **showProgressBar**
 
 Boolean value used for showing or hiding the progress bar.
 
@@ -456,7 +456,7 @@ Boolean value used for showing or hiding the progress bar.
 <@nativescript-community/ui-image:Img showProgressBar="true"/>
 ```
 
-- **progressBarColor**  (Android only)
+- **progressBarColor**
 
 String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
 

package/blueprint.md

@@ -381,7 +381,7 @@ Boolean value used for enabling or disabling the streaming of progressive JPEG i
 <@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
 ```
 
-- **showProgressBar**  (Android only)
+- **showProgressBar**
 
 Boolean value used for showing or hiding the progress bar.
 
@@ -389,7 +389,7 @@ Boolean value used for showing or hiding the progress bar.
 <@nativescript-community/ui-image:Img showProgressBar="true"/>
 ```
 
-- **progressBarColor**  (Android only)
+- **progressBarColor**
 
 String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
 

package/index-common.d.ts

@@ -2,6 +2,7 @@ import { Color, CoreTypes, Property, View } from '@nativescript/core';
 import { EventData as IEventData } from '@nativescript/core/data/observable';
 import { ImageAsset } from '@nativescript/core/image-asset';
 import { ImageSource } from '@nativescript/core/image-source';
+export declare function colorConverter(v: string | Color): Color;
 export declare enum CLogTypes {
     log = 0,
     info = 1,
@@ -63,7 +64,7 @@ export declare const backgroundUriProperty: Property<ImageBase, string>;
 export declare const progressiveRenderingEnabledProperty: Property<ImageBase, boolean>;
 export declare const localThumbnailPreviewsEnabledProperty: Property<ImageBase, boolean>;
 export declare const showProgressBarProperty: Property<ImageBase, boolean>;
-export declare const progressBarColorProperty: Property<ImageBase, string>;
+export declare const progressBarColorProperty: Property<ImageBase, Color>;
 export declare const roundAsCircleProperty: Property<ImageBase, boolean>;
 export declare const blurRadiusProperty: Property<ImageBase, number>;
 export declare const blurDownSamplingProperty: Property<ImageBase, number>;

package/index-common.js

@@ -1,5 +1,11 @@
-import { Length, Property, Trace, View, booleanConverter } from '@nativescript/core';
+import { Color, Length, Property, Trace, View, booleanConverter } from '@nativescript/core';
 import { isAndroid } from '@nativescript/core/platform';
+export function colorConverter(v) {
+    if (!v || v instanceof Color) {
+        return v;
+    }
+    return new Color(v);
+}
 function isNonNegativeFiniteNumber(value) {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
@@ -119,8 +125,8 @@ export const stretchProperty = new Property({ name: 'stretch' });
 export const backgroundUriProperty = new Property({ name: 'backgroundUri' });
 export const progressiveRenderingEnabledProperty = new Property({ name: 'progressiveRenderingEnabled', valueConverter: booleanConverter });
 export const localThumbnailPreviewsEnabledProperty = new Property({ name: 'localThumbnailPreviewsEnabled', valueConverter: booleanConverter });
-export const showProgressBarProperty = new Property({ name: 'showProgressBar', valueConverter: booleanConverter });
-export const progressBarColorProperty = new Property({ name: 'progressBarColor', defaultValue: undefined });
+export const showProgressBarProperty = new Property({ name: 'showProgressBar', valueConverter: booleanConverter, defaultValue: false });
+export const progressBarColorProperty = new Property({ name: 'progressBarColor', valueConverter: colorConverter });
 export const roundAsCircleProperty = new Property({ name: 'roundAsCircle', valueConverter: booleanConverter, affectsLayout: isAndroid });
 export const blurRadiusProperty = new Property({ name: 'blurRadius', valueConverter: (v) => parseFloat(v) });
 export const blurDownSamplingProperty = new Property({ name: 'blurDownSampling', valueConverter: (v) => parseFloat(v) });

package/index.ios.js

@@ -1,9 +1,9 @@
-var _a, _b, _c;
+var _a, _b, _c, _d;
 export * from './index-common';
-import { ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { Color, ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
 import { layout } from '@nativescript/core/utils/layout-helper';
 import { isString } from '@nativescript/core/utils/types';
-import { CLog, CLogTypes, ImageBase, ScaleType, failureImageUriProperty, imageRotationProperty, placeholderImageUriProperty, srcProperty, stretchProperty, wrapNativeException } from './index-common';
+import { CLog, CLogTypes, ImageBase, ScaleType, failureImageUriProperty, imageRotationProperty, placeholderImageUriProperty, progressBarColorProperty, showProgressBarProperty, srcProperty, stretchProperty, wrapNativeException } from './index-common';
 export class ImageInfo {
     constructor(width, height) {
         this.width = width;
@@ -457,6 +457,21 @@ export class Img extends ImageBase {
                     });
                 }
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
+                if (this.showProgressBar) {
+                    try {
+                        if (this.progressBarColor && Color.isValid(this.progressBarColor)) {
+                            const indicator = new SDWebImageActivityIndicator();
+                            indicator.indicatorView.color = new Color(this.progressBarColor).ios;
+                            this.nativeImageViewProtected.sd_imageIndicator = indicator;
+                        }
+                        else {
+                            this.nativeImageViewProtected.sd_imageIndicator = SDWebImageActivityIndicator.grayIndicator;
+                        }
+                    }
+                    catch (ex) {
+                        console.error(ex);
+                    }
+                }
                 this.nativeImageViewProtected.sd_setImageWithURLPlaceholderImageOptionsContextProgressCompleted(uri, this.placeholderImage, options, context, this.onLoadProgress, this.handleImageLoaded);
             }
             else if (this.placeholderImage) {
@@ -473,9 +488,12 @@ export class Img extends ImageBase {
     [_b = imageRotationProperty.setNative](value) {
         this.initImage();
     }
-    [_c = placeholderImageUriProperty.setNative]() {
-        // this.placeholderImage = this.getUIImage(this.placeholderImageUri);
-        // this.initImage();
+    [_c = placeholderImageUriProperty.setNative]() { }
+    [_d = showProgressBarProperty.setNative](value) {
+        this.showProgressBar = value;
+    }
+    [progressBarColorProperty.setNative](value) {
+        this.progressBarColor = value;
     }
     [failureImageUriProperty.setNative]() {
         // this.updateHierarchy();
@@ -515,4 +533,7 @@ __decorate([
 __decorate([
     needRequestImage
 ], Img.prototype, _c, null);
+__decorate([
+    needRequestImage
+], Img.prototype, _d, null);
 //# sourceMappingURL=index.ios.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-image",
-    "version": "4.3.41",
+    "version": "4.4.0",
     "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": "74b1253fcbfcebe4dd5458ee9e0962294482c426"
+    "gitHead": "532c0a394b6a40a8168483f729d831707b8d50c4"
 }

package/typings/ios.d.ts

@@ -6,6 +6,8 @@ declare namespace NSURL {
     export function sd_URLWithAssetLocalIdentifier(identifier: string): NSURL;
 }
 declare interface UIImageView {
+    sd_imageIndicator: SDWebImageIndicator;
+
     sd_setHighlightedImageWithURL(url: NSURL): void;
 
     sd_setHighlightedImageWithURLCompleted(url: NSURL, completedBlock: (p1: UIImage, p2: NSError, p3: SDImageCacheType, p4: NSURL) => void): void;