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(); int getBorderColor();
void setFadeDuration(int fadeDuration); 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 float mBorderRadius;
private int mBorderColor; private int mBorderColor;
private int mReactTag; private int mReactTag;
private boolean mProgressiveRenderingEnabled;
private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS; private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS;
private @Nullable FlatViewGroup.InvalidateCallback mCallback; private @Nullable FlatViewGroup.InvalidateCallback mCallback;
@ -138,6 +139,11 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
mFadeDuration = fadeDuration; mFadeDuration = fadeDuration;
} }
@Override
public void setProgressiveRenderingEnabled(boolean enabled) {
mProgressiveRenderingEnabled = enabled;
}
@Override @Override
public void setReactTag(int reactTag) { public void setReactTag(int reactTag) {
mReactTag = reactTag; mReactTag = reactTag;
@ -266,12 +272,14 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(source.getUri()) ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(source.getUri())
.setResizeOptions(resizeOptions) .setResizeOptions(resizeOptions)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build(); .build();
ImageRequest cachedImageRequest = null; ImageRequest cachedImageRequest = null;
if (cachedSource != null) { if (cachedSource != null) {
cachedImageRequest = ImageRequestBuilder.newBuilderWithSource(cachedSource.getUri()) cachedImageRequest = ImageRequestBuilder.newBuilderWithSource(cachedSource.getUri())
.setResizeOptions(resizeOptions) .setResizeOptions(resizeOptions)
.setProgressiveRenderingEnabled(mProgressiveRenderingEnabled)
.build(); .build();
} }
mRequestHelper = new 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 static final int BORDER_BITMAP_PATH_DIRTY = 1 << 1;
private final List<ImageSource> mSources = new LinkedList<>(); private final List<ImageSource> mSources = new LinkedList<>();
private @Nullable Context mContext;
private final Matrix mTransform = new Matrix(); private final Matrix mTransform = new Matrix();
private ScaleType mScaleType = ImageResizeMode.defaultValue(); private ScaleType mScaleType = ImageResizeMode.defaultValue();
private @Nullable PipelineRequestHelper mRequestHelper; private @Nullable PipelineRequestHelper mRequestHelper;
@ -62,6 +61,7 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
// variables used for fading the image in // variables used for fading the image in
private long mFirstDrawTime = -1; private long mFirstDrawTime = -1;
private boolean mProgressiveRenderingEnabled;
private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS; private int mFadeDuration = ReactImageView.REMOTE_IMAGE_FADE_DURATION_MS;
@Override @Override
@ -88,7 +88,6 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
} }
} }
} }
mContext = context;
mBitmapShader = null; mBitmapShader = null;
} }
@ -121,6 +120,11 @@ import com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult;
mFadeDuration = fadeDuration; 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. * 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; mRequestHelper = null;
return; 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 // DrawImageWithPipeline does now support displaying low res cache images before request
mRequestHelper = new PipelineRequestHelper(Assertions.assertNotNull(imageRequest)); mRequestHelper = new PipelineRequestHelper(Assertions.assertNotNull(imageRequest));

View File

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