@nativescript-community/ui-image 4.4.0 → 4.5.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.5.0](https://github.com/nativescript-community/ui-image/compare/v4.4.0...v4.5.0) (2024-04-23)
+
+### Features
+
+* **image:** headers property support. Thanks to @Logikgate ([8704ee7](https://github.com/nativescript-community/ui-image/commit/8704ee7dcd17518f1e330b57103eab23b514aac2))
+
 ## [4.4.0](https://github.com/nativescript-community/ui-image/compare/v4.3.41...v4.4.0) (2024-04-23)
 
 ### Features

package/README.md

@@ -439,6 +439,13 @@ Number value used as the downsampled width of the imageModule drawable.
 <@nativescript-community/ui-image:Img decodeHeight="100"/>
 ```
 
+- **headers**
+
+Object that defines custom request headers to be sent with the image download request.
+
+```xml
+<@nativescript-community/ui-image:Img headers="{Authorization: 'bearer abcdefghijk'}"/>
+```
 
 - **progressiveRenderingEnabled**
 

package/blueprint.md

@@ -372,6 +372,13 @@ Number value used as the downsampled width of the imageModule drawable.
 <@nativescript-community/ui-image:Img decodeHeight="100"/>
 ```
 
+- **headers**
+
+Object that defines custom request headers to be sent with the image download request.
+
+```xml
+<@nativescript-community/ui-image:Img headers="{Authorization: 'bearer abcdefghijk'}"/>
+```
 
 - **progressiveRenderingEnabled**
 

package/index-common.d.ts

@@ -56,6 +56,7 @@ export declare class EventData implements IEventData {
 }
 export type Stretch = 'none' | 'fill' | 'aspectFill' | 'aspectFit';
 export declare const srcProperty: Property<ImageBase, string | ImageSource | ImageAsset>;
+export declare const headersProperty: Property<ImageBase, Record<string, string>>;
 export declare const lowerResSrcProperty: Property<ImageBase, string>;
 export declare const placeholderImageUriProperty: Property<ImageBase, string>;
 export declare const failureImageUriProperty: Property<ImageBase, string>;
@@ -106,7 +107,7 @@ export declare abstract class ImageBase extends View {
     progressiveRenderingEnabled: boolean;
     localThumbnailPreviewsEnabled: boolean;
     showProgressBar: boolean;
-    progressBarColor: string;
+    progressBarColor: Color;
     roundAsCircle: boolean;
     roundBottomRightRadius: number;
     roundTopLeftRadius: number;
@@ -124,6 +125,7 @@ export declare abstract class ImageBase extends View {
     alwaysFade: boolean;
     noCache: boolean;
     tintColor: Color;
+    headers: Record<string, string>;
     readonly isLoading: boolean;
     get nativeImageViewProtected(): any;
     mCanRequestImage: boolean;

package/index-common.js

@@ -118,6 +118,7 @@ export class EventData {
     }
 }
 export const srcProperty = new Property({ name: 'src' });
+export const headersProperty = new Property({ name: 'headers' });
 export const lowerResSrcProperty = new Property({ name: 'lowerResSrc' });
 export const placeholderImageUriProperty = new Property({ name: 'placeholderImageUri' });
 export const failureImageUriProperty = new Property({ name: 'failureImageUri' });
@@ -309,6 +310,7 @@ ImageBase.intermediateImageSetEvent = 'intermediateImageSet';
 ImageBase.releaseEvent = 'release';
 ImageBase.submitEvent = 'submit';
 srcProperty.register(ImageBase);
+headersProperty.register(ImageBase);
 lowerResSrcProperty.register(ImageBase);
 placeholderImageUriProperty.register(ImageBase);
 failureImageUriProperty.register(ImageBase);

package/index.android.js

@@ -1,9 +1,9 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
 export * from './index-common';
 import { Application, ImageAsset, ImageSource, Trace, Utils, backgroundInternalProperty, knownFolders, path } from '@nativescript/core';
 import { isString } from '@nativescript/core/utils/types';
 import { layout } from '@nativescript/core/utils/layout-helper';
-import { CLog, CLogTypes, EventData, ImageBase, ScaleType, aspectRatioProperty, backgroundUriProperty, blurDownSamplingProperty, blurRadiusProperty, fadeDurationProperty, failureImageUriProperty, imageRotationProperty, lowerResSrcProperty, needRequestImage, placeholderImageUriProperty, progressBarColorProperty, roundAsCircleProperty, roundBottomLeftRadiusProperty, roundBottomRightRadiusProperty, roundTopLeftRadiusProperty, roundTopRightRadiusProperty, showProgressBarProperty, srcProperty, stretchProperty, tintColorProperty, wrapNativeException } from './index-common';
+import { CLog, CLogTypes, EventData, ImageBase, ScaleType, aspectRatioProperty, backgroundUriProperty, blurDownSamplingProperty, blurRadiusProperty, fadeDurationProperty, failureImageUriProperty, headersProperty, imageRotationProperty, lowerResSrcProperty, needRequestImage, placeholderImageUriProperty, progressBarColorProperty, roundAsCircleProperty, roundBottomLeftRadiusProperty, roundBottomRightRadiusProperty, roundTopLeftRadiusProperty, roundTopRightRadiusProperty, showProgressBarProperty, srcProperty, stretchProperty, tintColorProperty, wrapNativeException } from './index-common';
 let initialized = false;
 let initializeConfig;
 export function initialize(config) {
@@ -14,23 +14,25 @@ export function initialize(config) {
             return;
         }
         let builder;
-        const useOkhttp = config?.useOkhttp;
+        const useOkhttp = config?.useOkhttp !== false;
         if (useOkhttp) {
+            //@ts-ignore
+            let client;
             //@ts-ignore
             if (useOkhttp instanceof okhttp3.OkHttpClient) {
-                builder = com.facebook.imagepipeline.backends.okhttp3.OkHttpImagePipelineConfigFactory.newBuilder(context, useOkhttp);
+                client = useOkhttp;
             }
             else {
                 //@ts-ignore
-                builder = com.facebook.imagepipeline.backends.okhttp3.OkHttpImagePipelineConfigFactory.newBuilder(context, new okhttp3.OkHttpClient());
+                client = new okhttp3.OkHttpClient();
             }
+            builder = com.facebook.imagepipeline.backends.okhttp3.OkHttpImagePipelineConfigFactory.newBuilder(context, client);
+            builder.setNetworkFetcher(new com.nativescript.image.OkHttpNetworkFetcher(client));
         }
         else {
             builder = com.facebook.imagepipeline.core.ImagePipelineConfig.newBuilder(context);
         }
-        if (config?.isDownsampleEnabled) {
-            builder.setDownsampleEnabled(true);
-        }
+        builder.setDownsampleEnabled(config?.isDownsampleEnabled === true);
         if (config?.leakTracker) {
             builder.setCloseableReferenceLeakTracker(config.leakTracker);
         }
@@ -424,6 +426,9 @@ export class Img extends ImageBase {
     [_u = aspectRatioProperty.setNative]() {
         this.initImage();
     }
+    [_v = headersProperty.setNative](value) {
+        this.initImage();
+    }
     [backgroundInternalProperty.setNative](value) {
         super[backgroundInternalProperty.setNative](value);
         this.nativeViewProtected.setClipToOutline(value?.hasBorderRadius());
@@ -586,7 +591,8 @@ export class Img extends ImageBase {
                     lowerResSrc: this.lowerResSrc ? getUri(this.lowerResSrc, false) : undefined,
                     blurDownSampling: this.blurDownSampling,
                     autoPlayAnimations: this.autoPlayAnimations,
-                    tapToRetryEnabled: this.tapToRetryEnabled
+                    tapToRetryEnabled: this.tapToRetryEnabled,
+                    headers: this.headers
                 });
                 view.setUri(uri, options, this.controllerListener);
                 // const async = this.loadMode === 'async';
@@ -673,7 +679,7 @@ export class Img extends ImageBase {
                 builder.setBackground(backgroundDrawable);
             }
             if (this.showProgressBar) {
-                builder.setProgressBarImage(this.progressBarColor, this.stretch);
+                builder.setProgressBarImage(this.progressBarColor?.hex, this.stretch);
             }
             if (this.roundAsCircle) {
                 builder.setRoundingParamsAsCircle();
@@ -813,6 +819,9 @@ __decorate([
 __decorate([
     needRequestImage
 ], Img.prototype, _u, null);
+__decorate([
+    needRequestImage
+], Img.prototype, _v, null);
 class GenericDraweeHierarchyBuilder {
     constructor() {
         const res = Utils.android.getApplicationContext().getResources();

package/index.d.ts

@@ -194,6 +194,11 @@ export class Img extends View {
      */
     decodeHeight: number;
 
+    /**
+     * add custom headers to the image download request
+     */
+    headers: Record<string, string>;
+
     /**
      * IOS: if you want to show animated images you need to set this to true
      */

package/index.ios.js

@@ -1,9 +1,9 @@
-var _a, _b, _c, _d;
+var _a, _b, _c, _d, _e;
 export * from './index-common';
-import { Color, ImageAsset, ImageSource, Screen, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { 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, progressBarColorProperty, showProgressBarProperty, srcProperty, stretchProperty, wrapNativeException } from './index-common';
+import { CLog, CLogTypes, ImageBase, ScaleType, failureImageUriProperty, headersProperty, imageRotationProperty, placeholderImageUriProperty, progressBarColorProperty, showProgressBarProperty, srcProperty, stretchProperty, wrapNativeException } from './index-common';
 export class ImageInfo {
     constructor(width, height) {
         this.width = width;
@@ -456,12 +456,22 @@ export class Img extends ImageBase {
                         context.setValueForKey(value, k);
                     });
                 }
+                if (this.headers) {
+                    const requestModifier = SDWebImageDownloaderRequestModifier.requestModifierWithBlock((request) => {
+                        const newRequest = request.mutableCopy();
+                        Object.keys(this.headers).forEach((k) => {
+                            newRequest.addValueForHTTPHeaderField(this.headers[k], k);
+                        });
+                        return newRequest.copy();
+                    });
+                    context.setValueForKey(requestModifier, SDWebImageContextDownloadRequestModifier);
+                }
                 this.mCacheKey = SDWebImageManager.sharedManager.cacheKeyForURLContext(uri, context);
                 if (this.showProgressBar) {
                     try {
-                        if (this.progressBarColor && Color.isValid(this.progressBarColor)) {
+                        if (this.progressBarColor) {
                             const indicator = new SDWebImageActivityIndicator();
-                            indicator.indicatorView.color = new Color(this.progressBarColor).ios;
+                            indicator.indicatorView.color = this.progressBarColor.ios;
                             this.nativeImageViewProtected.sd_imageIndicator = indicator;
                         }
                         else {
@@ -495,6 +505,8 @@ export class Img extends ImageBase {
     [progressBarColorProperty.setNative](value) {
         this.progressBarColor = value;
     }
+    [_e = headersProperty.setNative](value) {
+    }
     [failureImageUriProperty.setNative]() {
         // this.updateHierarchy();
     }
@@ -536,4 +548,7 @@ __decorate([
 __decorate([
     needRequestImage
 ], Img.prototype, _d, null);
+__decorate([
+    needRequestImage
+], Img.prototype, _e, null);
 //# sourceMappingURL=index.ios.js.map

package/package.json

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

package/platforms/android/include.gradle

@@ -9,6 +9,7 @@ dependencies {
 	implementation("com.facebook.fresco:imagepipeline-okhttp3:$frescoVersion") {
 		exclude group: 'com.facebook.soloader', module: 'soloader'
 	}
+    implementation("com.facebook.fresco:middleware:$frescoVersion")
     implementation("com.facebook.fresco:nativeimagetranscoder:$frescoVersion")
     implementation 'com.facebook.infer.annotation:infer-annotation:0.18.0'
 	// implementation ("com.facebook.fresco:animated-gif:$frescoVersion") {

package/platforms/android/java/com/nativescript/image/DraweeView.java

@@ -272,10 +272,12 @@ public class DraweeView extends SimpleDraweeView {
     public void setUri(android.net.Uri uri, String jsonOptions, com.facebook.drawee.controller.ControllerListener listener) {
     ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(uri).setRotationOptions( com.facebook.imagepipeline.common.RotationOptions.autoRotate());
         JSONObject object = null;
+        JSONObject headers = null;
         if (jsonOptions.length() > 2) {
             try {
                 object = new JSONObject(jsonOptions);
-            } catch (Exception ignored) {
+            } catch (Exception e) {
+                e.printStackTrace();
             }
         }
         if (object != null) {
@@ -296,9 +298,9 @@ public class DraweeView extends SimpleDraweeView {
                 int blurDownSampling = object.optInt("blurDownSampling", 1);
                 requestBuilder = requestBuilder.setPostprocessor(new com.nativescript.image.ScalingBlurPostprocessor(2, blurRadius, blurDownSampling));
             }
+            headers = object.optJSONObject("headers");
         }
-        
-        ImageRequest request = requestBuilder.build();
+        ImageRequest request = NetworkImageRequest.fromBuilderWithHeaders(requestBuilder, headers);
 
         // if (object != null && object.optBoolean("async") == false) {
         //     DataSource<CloseableReference<CloseableImage>> dataSource =

package/platforms/android/java/com/nativescript/image/NetworkImageRequest.java

@@ -0,0 +1,55 @@
+package com.nativescript.image;
+
+import com.facebook.imagepipeline.request.ImageRequest;
+import com.facebook.imagepipeline.request.ImageRequestBuilder;
+
+import org.json.JSONObject;
+import org.json.JSONException;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Iterator;
+
+import android.util.Log;
+
+/** Extended ImageRequest with request headers */
+public class NetworkImageRequest extends ImageRequest {
+
+  /** Headers for the request */
+  private Map<String, String> mHeaders = null;
+
+static Map<String, String> toMap(JSONObject object) throws JSONException {
+    Map<String, String> map = new HashMap<String, String>();
+
+    Iterator<String> keysItr = object.keys();
+    while(keysItr.hasNext()) {
+        String key = keysItr.next();
+        Object value = object.get(key);
+        
+        if(value instanceof String) {
+            map.put(key, (String)value);
+        }
+    }
+    return map;
+}
+
+  public static NetworkImageRequest fromBuilderWithHeaders(
+      ImageRequestBuilder builder, JSONObject headers) {
+    return new NetworkImageRequest(builder, headers);
+  }
+
+  protected NetworkImageRequest(ImageRequestBuilder builder, JSONObject headers) {
+    super(builder);
+    if (headers != null) {
+        try {
+            mHeaders = toMap(headers);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+  }
+
+  public Map<String, String> getHeaders() {
+    return mHeaders;
+  }
+}

package/platforms/android/java/com/nativescript/image/OkHttpNetworkFetcher.java

@@ -0,0 +1,56 @@
+package com.nativescript.image;
+
+import android.net.Uri;
+import android.os.SystemClock;
+import android.util.Log;
+import com.facebook.imagepipeline.producers.NetworkFetcher;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.concurrent.Executor;
+import okhttp3.CacheControl;
+import okhttp3.Headers;
+import okhttp3.OkHttpClient;
+import okhttp3.Request;
+
+class OkHttpNetworkFetcher extends com.facebook.imagepipeline.backends.okhttp3.OkHttpNetworkFetcher {
+
+  private static final String TAG = "OkHttpNetworkFetcher";
+
+  private final OkHttpClient mOkHttpClient;
+  private final Executor mCancellationExecutor;
+
+  /**
+   * @param okHttpClient client to use
+   */
+  public OkHttpNetworkFetcher(OkHttpClient okHttpClient) {
+    super(okHttpClient);
+    mOkHttpClient = okHttpClient;
+    mCancellationExecutor = okHttpClient.dispatcher().executorService();
+  }
+
+  @Override
+  public void fetch(
+      final OkHttpNetworkFetcher.OkHttpNetworkFetchState fetchState,
+      final NetworkFetcher.Callback callback) {
+    fetchState.submitTime = SystemClock.elapsedRealtime();
+    final Uri uri = fetchState.getUri();
+      Map<String, String> requestHeaders = null;
+      if (fetchState.getContext().getImageRequest() instanceof NetworkImageRequest) {
+      NetworkImageRequest networkImageRequest =
+          (NetworkImageRequest) fetchState.getContext().getImageRequest();
+      requestHeaders = networkImageRequest.getHeaders();
+    }
+    if (requestHeaders == null) {
+      requestHeaders = Collections.emptyMap();
+    }
+    final Request request =
+        new Request.Builder()
+            .url(uri.toString())
+            .headers(Headers.of(requestHeaders))
+            .get()
+            .build();
+
+    fetchWithRequest(fetchState, callback, request);
+  }
+}

package/platforms/android/native-api-usage.json

@@ -27,7 +27,11 @@
         "com.facebook.drawee.backends.pipeline.info:ImagePerfData",
         "com.facebook.drawee.controller:ControllerListener",
         "com.nativescript.image:DraweeView",
+        "com.nativescript.image:OkHttpNetworkFetcher",
         "com.nativescript.image:ScalingBlurPostprocessor",
+        "com.facebook.imagepipeline.producers:NetworkFetcher",
+        "com.facebook.imagepipeline.backends.okhttp3:OkHttpImagePipelineConfigFactory",
+        "okhttp3:OkHttpClient",
         "android.graphics.drawable:Animatable",
         "com.facebook.imagepipeline.image:ImageInfo",
         "com.facebook.common.util:UriUtil",

package/typings/android.d.ts

@@ -20,6 +20,9 @@ declare namespace com {
             class BaseDataSubscriber extends facebook.datasource.BaseDataSubscriber<any> {
                 public constructor(listener: BaseDataSubscriberListener);
             }
+            class OkHttpNetworkFetcher extends facebook.imagepipeline.backends.okhttp3.OkHttpNetworkFetcher {
+
+            }
         }
     }
 }