Implement progressive image loading for Nodes

Summary: Support progressiveRenderingEnabled property for images on Nodes.

Differential Revision: D3718834
This commit is contained in:
Ahmed El-Helw 2016-08-15 15:20:14 -07:00
parent bcf2e329ed
commit f450e84942
4 changed files with 24 additions and 3 deletions

View File

@ -64,4 +64,6 @@ import com.facebook.react.bridge.ReadableArray;
int getBorderColor();
void setFadeDuration(int fadeDuration);
void setProgressiveRenderingEnabled(boolean enabled);
}

View File

@ -55,6 +55,7 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
private float mBorderRadius;
private int mBorderColor;
private int mReactTag;
private boolean mProgressiveRenderingEnabled;
private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS;
private @Nullable FlatViewGroup.InvalidateCallback mCallback;
@ -138,6 +139,11 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
mFadeDuration = fadeDuration;
}
@Override
public void setProgressiveRenderingEnabled(boolean enabled) {
mProgressiveRenderingEnabled = enabled;
}
@Override
public void setReactTag(int reactTag) {
mReactTag = reactTag;
@ -266,12 +272,14 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(source.getUri())
.setResizeOptions(resizeOptions)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build();
ImageRequest cachedImageRequest = null;
if (cachedSource != null) {
cachedImageRequest = ImageRequestBuilder.newBuilderWithSource(cachedSource.getUri())
.setResizeOptions(resizeOptions)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build();
}
mRequestHelper = new

View File

@ -48,7 +48,6 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
private static final int BORDER_BITMAP_PATH_DIRTY = 1 << 1;
private final List<ImageSource> mSources = new LinkedList<>();
private @Nullable Context mContext;
private final Matrix mTransform = new Matrix();
private ScaleType mScaleType = ImageResizeMode.defaultValue();
private @Nullable PipelineRequestHelper mRequestHelper;
@ -62,6 +61,7 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
// variables used for fading the image in
private long mFirstDrawTime = -1;
private boolean mProgressiveRenderingEnabled;
private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS;
@Override
@ -88,7 +88,6 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
}
}
}
mContext = context;
mBitmapShader = null;
}
@ -121,6 +120,11 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
mFadeDuration = fadeDuration;
}
@Override
public void setProgressiveRenderingEnabled(boolean enabled) {
mProgressiveRenderingEnabled = enabled;
}
/**
* If the bitmap isn't loaded by the first draw, fade it in, otherwise don't fade.
*/
@ -241,7 +245,9 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
mRequestHelper = null;
return;
}
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(source.getUri()).build();
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(source.getUri())
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build();
// DrawImageWithPipeline does now support displaying low res cache images before request
mRequestHelper = new PipelineRequestHelper(Assertions.assertNotNull(imageRequest));

View File

@ -132,6 +132,11 @@ import com.facebook.react.views.image.ImageResizeMode;
getMutableDrawImage().setFadeDuration(durationMs);
}
@ReactProp(name = "progressiveRenderingEnabled")
public void setProgressiveRenderingEnabled(boolean enabled) {
getMutableDrawImage().setProgressiveRenderingEnabled(enabled);
}
private T getMutableDrawImage() {
if (mDrawImage.isFrozen()) {
mDrawImage = (T) mDrawImage.mutableCopy();