456 lines
13 KiB
Objective-C
456 lines
13 KiB
Objective-C
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*/
|
|
|
|
#import "RCTImageView.h"
|
|
|
|
#import <React/RCTBridge.h>
|
|
#import <React/RCTConvert.h>
|
|
#import <React/RCTEventDispatcher.h>
|
|
#import <React/RCTImageSource.h>
|
|
#import <React/RCTUtils.h>
|
|
#import <React/UIView+React.h>
|
|
|
|
#import "RCTImageBlurUtils.h"
|
|
#import "RCTImageLoader.h"
|
|
#import "RCTImageUtils.h"
|
|
|
|
/**
|
|
* Determines whether an image of `currentSize` should be reloaded for display
|
|
* at `idealSize`.
|
|
*/
|
|
static BOOL RCTShouldReloadImageForSizeChange(CGSize currentSize, CGSize idealSize)
|
|
{
|
|
static const CGFloat upscaleThreshold = 1.2;
|
|
static const CGFloat downscaleThreshold = 0.5;
|
|
|
|
CGFloat widthMultiplier = idealSize.width / currentSize.width;
|
|
CGFloat heightMultiplier = idealSize.height / currentSize.height;
|
|
|
|
return widthMultiplier > upscaleThreshold || widthMultiplier < downscaleThreshold ||
|
|
heightMultiplier > upscaleThreshold || heightMultiplier < downscaleThreshold;
|
|
}
|
|
|
|
/**
|
|
* See RCTConvert (ImageSource). We want to send down the source as a similar
|
|
* JSON parameter.
|
|
*/
|
|
static NSDictionary *onLoadParamsForSource(RCTImageSource *source)
|
|
{
|
|
NSDictionary *dict = @{
|
|
@"width": @(source.size.width),
|
|
@"height": @(source.size.height),
|
|
@"url": source.request.URL.absoluteString,
|
|
};
|
|
return @{ @"source": dict };
|
|
}
|
|
|
|
@interface RCTImageView ()
|
|
|
|
@property (nonatomic, copy) RCTDirectEventBlock onLoadStart;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onProgress;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onError;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onPartialLoad;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onLoad;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onLoadEnd;
|
|
|
|
@end
|
|
|
|
@implementation RCTImageView
|
|
{
|
|
// Weak reference back to the bridge, for image loading
|
|
__weak RCTBridge *_bridge;
|
|
|
|
// The image source that's currently displayed
|
|
RCTImageSource *_imageSource;
|
|
|
|
// The image source that's being loaded from the network
|
|
RCTImageSource *_pendingImageSource;
|
|
|
|
// Size of the image loaded / being loaded, so we can determine when to issue a reload to accommodate a changing size.
|
|
CGSize _targetSize;
|
|
|
|
// A block that can be invoked to cancel the most recent call to -reloadImage, if any
|
|
RCTImageLoaderCancellationBlock _reloadImageCancellationBlock;
|
|
|
|
// Whether the latest change of props requires the image to be reloaded
|
|
BOOL _needsReload;
|
|
}
|
|
|
|
- (instancetype)initWithBridge:(RCTBridge *)bridge
|
|
{
|
|
if ((self = [super init])) {
|
|
_bridge = bridge;
|
|
|
|
NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
|
|
[center addObserver:self
|
|
selector:@selector(clearImageIfDetached)
|
|
name:UIApplicationDidReceiveMemoryWarningNotification
|
|
object:nil];
|
|
[center addObserver:self
|
|
selector:@selector(clearImageIfDetached)
|
|
name:UIApplicationDidEnterBackgroundNotification
|
|
object:nil];
|
|
}
|
|
return self;
|
|
}
|
|
|
|
- (void)dealloc
|
|
{
|
|
[[NSNotificationCenter defaultCenter] removeObserver:self];
|
|
}
|
|
|
|
RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
|
|
|
- (void)updateWithImage:(UIImage *)image
|
|
{
|
|
if (!image) {
|
|
super.image = nil;
|
|
return;
|
|
}
|
|
|
|
// Apply rendering mode
|
|
if (_renderingMode != image.renderingMode) {
|
|
image = [image imageWithRenderingMode:_renderingMode];
|
|
}
|
|
|
|
if (_resizeMode == RCTResizeModeRepeat) {
|
|
image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeTile];
|
|
} else if (!UIEdgeInsetsEqualToEdgeInsets(UIEdgeInsetsZero, _capInsets)) {
|
|
// Applying capInsets of 0 will switch the "resizingMode" of the image to "tile" which is undesired
|
|
image = [image resizableImageWithCapInsets:_capInsets resizingMode:UIImageResizingModeStretch];
|
|
}
|
|
|
|
// Apply trilinear filtering to smooth out mis-sized images
|
|
self.layer.minificationFilter = kCAFilterTrilinear;
|
|
self.layer.magnificationFilter = kCAFilterTrilinear;
|
|
|
|
super.image = image;
|
|
}
|
|
|
|
- (void)setImage:(UIImage *)image
|
|
{
|
|
image = image ?: _defaultImage;
|
|
if (image != self.image) {
|
|
[self updateWithImage:image];
|
|
}
|
|
}
|
|
|
|
- (void)setBlurRadius:(CGFloat)blurRadius
|
|
{
|
|
if (blurRadius != _blurRadius) {
|
|
_blurRadius = blurRadius;
|
|
_needsReload = YES;
|
|
}
|
|
}
|
|
|
|
- (void)setCapInsets:(UIEdgeInsets)capInsets
|
|
{
|
|
if (!UIEdgeInsetsEqualToEdgeInsets(_capInsets, capInsets)) {
|
|
if (UIEdgeInsetsEqualToEdgeInsets(_capInsets, UIEdgeInsetsZero) ||
|
|
UIEdgeInsetsEqualToEdgeInsets(capInsets, UIEdgeInsetsZero)) {
|
|
_capInsets = capInsets;
|
|
// Need to reload image when enabling or disabling capInsets
|
|
_needsReload = YES;
|
|
} else {
|
|
_capInsets = capInsets;
|
|
[self updateWithImage:self.image];
|
|
}
|
|
}
|
|
}
|
|
|
|
- (void)setRenderingMode:(UIImageRenderingMode)renderingMode
|
|
{
|
|
if (_renderingMode != renderingMode) {
|
|
_renderingMode = renderingMode;
|
|
[self updateWithImage:self.image];
|
|
}
|
|
}
|
|
|
|
- (void)setImageSources:(NSArray<RCTImageSource *> *)imageSources
|
|
{
|
|
if (![imageSources isEqual:_imageSources]) {
|
|
_imageSources = [imageSources copy];
|
|
_needsReload = YES;
|
|
}
|
|
}
|
|
|
|
- (void)setResizeMode:(RCTResizeMode)resizeMode
|
|
{
|
|
if (_resizeMode != resizeMode) {
|
|
_resizeMode = resizeMode;
|
|
|
|
if (_resizeMode == RCTResizeModeRepeat) {
|
|
// Repeat resize mode is handled by the UIImage. Use scale to fill
|
|
// so the repeated image fills the UIImageView.
|
|
self.contentMode = UIViewContentModeScaleToFill;
|
|
} else {
|
|
self.contentMode = (UIViewContentMode)resizeMode;
|
|
}
|
|
|
|
if ([self shouldReloadImageSourceAfterResize]) {
|
|
_needsReload = YES;
|
|
}
|
|
}
|
|
}
|
|
|
|
- (void)cancelImageLoad
|
|
{
|
|
RCTImageLoaderCancellationBlock previousCancellationBlock = _reloadImageCancellationBlock;
|
|
if (previousCancellationBlock) {
|
|
previousCancellationBlock();
|
|
_reloadImageCancellationBlock = nil;
|
|
}
|
|
|
|
_pendingImageSource = nil;
|
|
}
|
|
|
|
- (void)clearImage
|
|
{
|
|
[self cancelImageLoad];
|
|
[self.layer removeAnimationForKey:@"contents"];
|
|
self.image = nil;
|
|
_imageSource = nil;
|
|
}
|
|
|
|
- (void)clearImageIfDetached
|
|
{
|
|
if (!self.window) {
|
|
[self clearImage];
|
|
}
|
|
}
|
|
|
|
- (BOOL)hasMultipleSources
|
|
{
|
|
return _imageSources.count > 1;
|
|
}
|
|
|
|
- (RCTImageSource *)imageSourceForSize:(CGSize)size
|
|
{
|
|
if (![self hasMultipleSources]) {
|
|
return _imageSources.firstObject;
|
|
}
|
|
|
|
// Need to wait for layout pass before deciding.
|
|
if (CGSizeEqualToSize(size, CGSizeZero)) {
|
|
return nil;
|
|
}
|
|
|
|
const CGFloat scale = RCTScreenScale();
|
|
const CGFloat targetImagePixels = size.width * size.height * scale * scale;
|
|
|
|
RCTImageSource *bestSource = nil;
|
|
CGFloat bestFit = CGFLOAT_MAX;
|
|
for (RCTImageSource *source in _imageSources) {
|
|
CGSize imgSize = source.size;
|
|
const CGFloat imagePixels =
|
|
imgSize.width * imgSize.height * source.scale * source.scale;
|
|
const CGFloat fit = ABS(1 - (imagePixels / targetImagePixels));
|
|
|
|
if (fit < bestFit) {
|
|
bestFit = fit;
|
|
bestSource = source;
|
|
}
|
|
}
|
|
return bestSource;
|
|
}
|
|
|
|
- (BOOL)shouldReloadImageSourceAfterResize
|
|
{
|
|
// If capInsets are set, image doesn't need reloading when resized
|
|
return UIEdgeInsetsEqualToEdgeInsets(_capInsets, UIEdgeInsetsZero);
|
|
}
|
|
|
|
- (BOOL)shouldChangeImageSource
|
|
{
|
|
// We need to reload if the desired image source is different from the current image
|
|
// source AND the image load that's pending
|
|
RCTImageSource *desiredImageSource = [self imageSourceForSize:self.frame.size];
|
|
return ![desiredImageSource isEqual:_imageSource] &&
|
|
![desiredImageSource isEqual:_pendingImageSource];
|
|
}
|
|
|
|
- (void)reloadImage
|
|
{
|
|
[self cancelImageLoad];
|
|
_needsReload = NO;
|
|
|
|
RCTImageSource *source = [self imageSourceForSize:self.frame.size];
|
|
_pendingImageSource = source;
|
|
|
|
if (source && self.frame.size.width > 0 && self.frame.size.height > 0) {
|
|
if (_onLoadStart) {
|
|
_onLoadStart(nil);
|
|
}
|
|
|
|
RCTImageLoaderProgressBlock progressHandler = nil;
|
|
if (_onProgress) {
|
|
progressHandler = ^(int64_t loaded, int64_t total) {
|
|
self->_onProgress(@{
|
|
@"loaded": @((double)loaded),
|
|
@"total": @((double)total),
|
|
});
|
|
};
|
|
}
|
|
|
|
__weak RCTImageView *weakSelf = self;
|
|
RCTImageLoaderPartialLoadBlock partialLoadHandler = ^(UIImage *image) {
|
|
[weakSelf imageLoaderLoadedImage:image error:nil forImageSource:source partial:YES];
|
|
};
|
|
|
|
CGSize imageSize = self.bounds.size;
|
|
CGFloat imageScale = RCTScreenScale();
|
|
if (!UIEdgeInsetsEqualToEdgeInsets(_capInsets, UIEdgeInsetsZero)) {
|
|
// Don't resize images that use capInsets
|
|
imageSize = CGSizeZero;
|
|
imageScale = source.scale;
|
|
}
|
|
|
|
RCTImageLoaderCompletionBlock completionHandler = ^(NSError *error, UIImage *loadedImage) {
|
|
[weakSelf imageLoaderLoadedImage:loadedImage error:error forImageSource:source partial:NO];
|
|
};
|
|
|
|
_reloadImageCancellationBlock =
|
|
[_bridge.imageLoader loadImageWithURLRequest:source.request
|
|
size:imageSize
|
|
scale:imageScale
|
|
clipped:NO
|
|
resizeMode:_resizeMode
|
|
progressBlock:progressHandler
|
|
partialLoadBlock:partialLoadHandler
|
|
completionBlock:completionHandler];
|
|
} else {
|
|
[self clearImage];
|
|
}
|
|
}
|
|
|
|
- (void)imageLoaderLoadedImage:(UIImage *)loadedImage error:(NSError *)error forImageSource:(RCTImageSource *)source partial:(BOOL)isPartialLoad
|
|
{
|
|
if (![source isEqual:_pendingImageSource]) {
|
|
// Bail out if source has changed since we started loading
|
|
return;
|
|
}
|
|
|
|
if (error) {
|
|
if (_onError) {
|
|
_onError(@{ @"error": error.localizedDescription });
|
|
}
|
|
if (_onLoadEnd) {
|
|
_onLoadEnd(nil);
|
|
}
|
|
return;
|
|
}
|
|
|
|
void (^setImageBlock)(UIImage *) = ^(UIImage *image) {
|
|
if (!isPartialLoad) {
|
|
self->_imageSource = source;
|
|
self->_pendingImageSource = nil;
|
|
}
|
|
|
|
if (image.reactKeyframeAnimation) {
|
|
[self.layer addAnimation:image.reactKeyframeAnimation forKey:@"contents"];
|
|
} else {
|
|
[self.layer removeAnimationForKey:@"contents"];
|
|
self.image = image;
|
|
}
|
|
|
|
if (isPartialLoad) {
|
|
if (self->_onPartialLoad) {
|
|
self->_onPartialLoad(nil);
|
|
}
|
|
} else {
|
|
if (self->_onLoad) {
|
|
RCTImageSource *sourceLoaded = [source imageSourceWithSize:image.size scale:source.scale];
|
|
self->_onLoad(onLoadParamsForSource(sourceLoaded));
|
|
}
|
|
if (self->_onLoadEnd) {
|
|
self->_onLoadEnd(nil);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (_blurRadius > __FLT_EPSILON__) {
|
|
// Blur on a background thread to avoid blocking interaction
|
|
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
|
|
UIImage *blurredImage = RCTBlurredImageWithRadius(loadedImage, self->_blurRadius);
|
|
RCTExecuteOnMainQueue(^{
|
|
setImageBlock(blurredImage);
|
|
});
|
|
});
|
|
} else {
|
|
// No blur, so try to set the image on the main thread synchronously to minimize image
|
|
// flashing. (For instance, if this view gets attached to a window, then -didMoveToWindow
|
|
// calls -reloadImage, and we want to set the image synchronously if possible so that the
|
|
// image property is set in the same CATransaction that attaches this view to the window.)
|
|
RCTExecuteOnMainQueue(^{
|
|
setImageBlock(loadedImage);
|
|
});
|
|
}
|
|
}
|
|
|
|
- (void)reactSetFrame:(CGRect)frame
|
|
{
|
|
[super reactSetFrame:frame];
|
|
|
|
// If we didn't load an image yet, or the new frame triggers a different image source
|
|
// to be loaded, reload to swap to the proper image source.
|
|
if ([self shouldChangeImageSource]) {
|
|
_targetSize = frame.size;
|
|
[self reloadImage];
|
|
} else if ([self shouldReloadImageSourceAfterResize]) {
|
|
CGSize imageSize = self.image.size;
|
|
CGFloat imageScale = self.image.scale;
|
|
CGSize idealSize = RCTTargetSize(imageSize, imageScale, frame.size, RCTScreenScale(),
|
|
(RCTResizeMode)self.contentMode, YES);
|
|
|
|
// Don't reload if the current image or target image size is close enough
|
|
if (!RCTShouldReloadImageForSizeChange(imageSize, idealSize) ||
|
|
!RCTShouldReloadImageForSizeChange(_targetSize, idealSize)) {
|
|
return;
|
|
}
|
|
|
|
// Don't reload if the current image size is the maximum size of the image source
|
|
CGSize imageSourceSize = _imageSource.size;
|
|
if (imageSize.width * imageScale == imageSourceSize.width * _imageSource.scale &&
|
|
imageSize.height * imageScale == imageSourceSize.height * _imageSource.scale) {
|
|
return;
|
|
}
|
|
|
|
RCTLogInfo(@"Reloading image %@ as size %@", _imageSource.request.URL.absoluteString, NSStringFromCGSize(idealSize));
|
|
|
|
// If the existing image or an image being loaded are not the right
|
|
// size, reload the asset in case there is a better size available.
|
|
_targetSize = idealSize;
|
|
[self reloadImage];
|
|
}
|
|
}
|
|
|
|
- (void)didSetProps:(NSArray<NSString *> *)changedProps
|
|
{
|
|
if (_needsReload) {
|
|
[self reloadImage];
|
|
}
|
|
}
|
|
|
|
- (void)didMoveToWindow
|
|
{
|
|
[super didMoveToWindow];
|
|
|
|
if (!self.window) {
|
|
// Cancel loading the image if we've moved offscreen. In addition to helping
|
|
// prioritise image requests that are actually on-screen, this removes
|
|
// requests that have gotten "stuck" from the queue, unblocking other images
|
|
// from loading.
|
|
[self cancelImageLoad];
|
|
} else if ([self shouldChangeImageSource]) {
|
|
[self reloadImage];
|
|
}
|
|
}
|
|
|
|
@end
|