Implement progressive image loading for Nodes
Summary: Support progressiveRenderingEnabled property for images on Nodes. Differential Revision: D3718834
This commit is contained in:
parent
bcf2e329ed
commit
f450e84942
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue