543 lines
17 KiB
Swift
543 lines
17 KiB
Swift
// Copyright 2022-present 650 Industries. All rights reserved.
|
||
|
||
import SDWebImage
|
||
import ExpoModulesCore
|
||
#if !os(tvOS)
|
||
import VisionKit
|
||
#endif
|
||
|
||
typealias SDWebImageContext = [SDWebImageContextOption: Any]
|
||
|
||
// swiftlint:disable:next type_body_length
|
||
public final class ImageView: ExpoView {
|
||
static let contextSourceKey = SDWebImageContextOption(rawValue: "source")
|
||
static let screenScaleKey = SDWebImageContextOption(rawValue: "screenScale")
|
||
static let contentFitKey = SDWebImageContextOption(rawValue: "contentFit")
|
||
static let frameSizeKey = SDWebImageContextOption(rawValue: "frameSize")
|
||
|
||
let sdImageView = SDAnimatedImageView(frame: .zero)
|
||
|
||
// Custom image manager doesn't use shared loaders managers by default,
|
||
// so make sure it is provided here.
|
||
let imageManager = SDWebImageManager(
|
||
cache: SDImageCache.shared,
|
||
loader: SDImageLoadersManager.shared
|
||
)
|
||
|
||
var loadingOptions: SDWebImageOptions = [
|
||
.retryFailed, // Don't blacklist URLs that failed downloading
|
||
.handleCookies, // Handle cookies stored in the shared `HTTPCookieStore`
|
||
// Images from cache are `AnimatedImage`s. BlurRadius is done via a SDImageBlurTransformer
|
||
// so this flag needs to be enabled. Beware most transformers cannot manage animated images.
|
||
.transformAnimatedImage
|
||
]
|
||
|
||
/**
|
||
An array of sources from which the view will asynchronously load one of them that fits best into the view bounds.
|
||
*/
|
||
var sources: [ImageSource]?
|
||
|
||
/**
|
||
An image that has been loaded from one of the `sources` or set by the shared ref to an image.
|
||
*/
|
||
var sourceImage: UIImage?
|
||
|
||
var pendingOperation: SDWebImageCombinedOperation?
|
||
|
||
var contentFit: ContentFit = .cover
|
||
|
||
var contentPosition: ContentPosition = .center
|
||
|
||
var transition: ImageTransition?
|
||
|
||
var blurRadius: CGFloat = 0.0
|
||
|
||
var imageTintColor: UIColor?
|
||
|
||
var cachePolicy: ImageCachePolicy = .disk
|
||
|
||
var allowDownscaling: Bool = true
|
||
|
||
var lockResource: Bool = false
|
||
|
||
var enforceEarlyResizing: Bool = false
|
||
|
||
var recyclingKey: String? {
|
||
didSet {
|
||
if oldValue != nil && recyclingKey != oldValue {
|
||
sdImageView.image = nil
|
||
}
|
||
}
|
||
}
|
||
|
||
var autoplay: Bool = true
|
||
|
||
var useAppleWebpCodec: Bool = true
|
||
|
||
/**
|
||
The ideal image size that fills in the container size while maintaining the source aspect ratio.
|
||
*/
|
||
var imageIdealSize: CGSize = .zero
|
||
|
||
// MARK: - Events
|
||
|
||
let onLoadStart = EventDispatcher()
|
||
|
||
let onProgress = EventDispatcher()
|
||
|
||
let onError = EventDispatcher()
|
||
|
||
let onLoad = EventDispatcher()
|
||
|
||
let onDisplay = EventDispatcher()
|
||
|
||
// MARK: - View
|
||
|
||
public override var bounds: CGRect {
|
||
didSet {
|
||
// Reload the image when the bounds size has changed and is not empty.
|
||
if oldValue.size != bounds.size && bounds.size != .zero {
|
||
reload()
|
||
}
|
||
}
|
||
}
|
||
|
||
public required init(appContext: AppContext? = nil) {
|
||
super.init(appContext: appContext)
|
||
|
||
clipsToBounds = true
|
||
sdImageView.contentMode = contentFit.toContentMode()
|
||
sdImageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
|
||
sdImageView.layer.masksToBounds = false
|
||
|
||
// Apply trilinear filtering to smooth out mis-sized images.
|
||
sdImageView.layer.magnificationFilter = .trilinear
|
||
sdImageView.layer.minificationFilter = .trilinear
|
||
|
||
addSubview(sdImageView)
|
||
}
|
||
|
||
deinit {
|
||
// Cancel pending requests when the view is deallocated.
|
||
cancelPendingOperation()
|
||
}
|
||
|
||
public override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
|
||
super.traitCollectionDidChange(previousTraitCollection)
|
||
if self.traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
|
||
// The mask layer we adjusted would be invaliated from `RCTViewComponentView.traitCollectionDidChange`.
|
||
// After that we have to recalculate the mask layer in `applyContentPosition`.
|
||
applyContentPosition(contentSize: imageIdealSize, containerSize: frame.size)
|
||
}
|
||
}
|
||
|
||
// MARK: - Implementation
|
||
|
||
func reload(force: Bool = false) {
|
||
if lockResource && !force {
|
||
return
|
||
}
|
||
if isViewEmpty {
|
||
displayPlaceholderIfNecessary()
|
||
}
|
||
guard let source = bestSource else {
|
||
displayPlaceholderIfNecessary()
|
||
return
|
||
}
|
||
if sdImageView.image == nil {
|
||
sdImageView.contentMode = contentFit.toContentMode()
|
||
}
|
||
var context = createSDWebImageContext(forSource: source, cachePolicy: cachePolicy, useAppleWebpCodec: useAppleWebpCodec)
|
||
|
||
// Cancel currently running load requests.
|
||
cancelPendingOperation()
|
||
|
||
if blurRadius > 0 {
|
||
context[.imageTransformer] = createTransformPipeline()
|
||
}
|
||
|
||
// It seems that `UIImageView` can't tint some vector graphics. If the `tintColor` prop is specified,
|
||
// we tell the SVG coder to decode to a bitmap instead. This will become useless when we switch to SVGNative coder.
|
||
let shouldEarlyResize = imageTintColor != nil || enforceEarlyResizing || source.isPhotoLibraryAsset
|
||
if shouldEarlyResize {
|
||
context[.imagePreserveAspectRatio] = true
|
||
context[.imageThumbnailPixelSize] = CGSize(
|
||
width: sdImageView.bounds.size.width * screenScale,
|
||
height: sdImageView.bounds.size.height * screenScale
|
||
)
|
||
}
|
||
|
||
// Some loaders (e.g. PhotoLibraryAssetLoader) may need to know the screen scale.
|
||
context[ImageView.screenScaleKey] = screenScale
|
||
context[ImageView.frameSizeKey] = frame.size
|
||
context[ImageView.contentFitKey] = contentFit
|
||
|
||
// Do it here so we don't waste resources trying to fetch from a remote URL
|
||
if maybeRenderLocalAsset(from: source) {
|
||
return
|
||
}
|
||
|
||
onLoadStart([:])
|
||
|
||
pendingOperation = imageManager.loadImage(
|
||
with: source.uri,
|
||
options: loadingOptions,
|
||
context: context,
|
||
progress: imageLoadProgress(_:_:_:),
|
||
completed: imageLoadCompleted(_:_:_:_:_:_:)
|
||
)
|
||
}
|
||
|
||
// MARK: - Loading
|
||
|
||
private func imageLoadProgress(_ receivedSize: Int, _ expectedSize: Int, _ imageUrl: URL?) {
|
||
// Don't send the event when the expected size is unknown (it's usually -1 or 0 when called for the first time).
|
||
if expectedSize <= 0 {
|
||
return
|
||
}
|
||
|
||
// Photos library requester emits the progress as a double `0...1` that we map to `0...100` int in `PhotosLoader`.
|
||
// When that loader is used, we don't have any information about the sizes in bytes, so we only send the `progress` param.
|
||
let isPhotoLibraryAsset = isPhotoLibraryAssetUrl(imageUrl)
|
||
|
||
onProgress([
|
||
"loaded": isPhotoLibraryAsset ? nil : receivedSize,
|
||
"total": isPhotoLibraryAsset ? nil : expectedSize,
|
||
"progress": Double(receivedSize) / Double(expectedSize)
|
||
])
|
||
}
|
||
|
||
// swiftlint:disable:next function_parameter_count
|
||
private func imageLoadCompleted(
|
||
_ image: UIImage?,
|
||
_ data: Data?,
|
||
_ error: Error?,
|
||
_ cacheType: SDImageCacheType,
|
||
_ finished: Bool,
|
||
_ imageUrl: URL?
|
||
) {
|
||
if let error = error {
|
||
let code = (error as NSError).code
|
||
|
||
// SDWebImage throws an error when loading operation is canceled (interrupted) by another load request.
|
||
// We do want to ignore that one and wait for the new request to load.
|
||
if code != SDWebImageError.cancelled.rawValue {
|
||
onError(["error": error.localizedDescription])
|
||
}
|
||
return
|
||
}
|
||
guard finished else {
|
||
log.debug("Loading the image has been canceled")
|
||
return
|
||
}
|
||
|
||
if let image {
|
||
onLoad([
|
||
"cacheType": cacheTypeToString(cacheType),
|
||
"source": [
|
||
"url": imageUrl?.absoluteString,
|
||
"width": image.size.width,
|
||
"height": image.size.height,
|
||
"mediaType": imageFormatToMediaType(image.sd_imageFormat),
|
||
"isAnimated": image.sd_isAnimated
|
||
]
|
||
])
|
||
|
||
let scale = window?.screen.scale ?? UIScreen.main.scale
|
||
imageIdealSize = idealSize(
|
||
contentPixelSize: image.size * image.scale,
|
||
containerSize: frame.size,
|
||
scale: scale,
|
||
contentFit: contentFit
|
||
).rounded(.up)
|
||
|
||
let image = processImage(image, idealSize: imageIdealSize, scale: scale)
|
||
applyContentPosition(contentSize: imageIdealSize, containerSize: frame.size)
|
||
renderSourceImage(image)
|
||
} else {
|
||
displayPlaceholderIfNecessary()
|
||
}
|
||
}
|
||
|
||
private func maybeRenderLocalAsset(from source: ImageSource) -> Bool {
|
||
let path: String? = {
|
||
// .path() on iOS 16 would remove the leading slash, but it doesn't on tvOS 16 🙃
|
||
// It also crashes with EXC_BREAKPOINT when parsing data:image uris
|
||
// manually drop the leading slash below iOS 16
|
||
if let path = source.uri?.path {
|
||
return String(path.dropFirst())
|
||
}
|
||
return nil
|
||
}()
|
||
|
||
if let path, !path.isEmpty, let local = UIImage(named: path) {
|
||
renderSourceImage(local)
|
||
return true
|
||
}
|
||
|
||
return false
|
||
}
|
||
|
||
// MARK: - Placeholder
|
||
|
||
/**
|
||
A list of sources that the placeholder can be loaded from.
|
||
*/
|
||
var placeholderSources: [ImageSource] = [] {
|
||
didSet {
|
||
loadPlaceholderIfNecessary()
|
||
}
|
||
}
|
||
|
||
/**
|
||
A placeholder image to use when the proper image is unset.
|
||
*/
|
||
var placeholderImage: UIImage?
|
||
|
||
/**
|
||
Content fit for the placeholder. `scale-down` seems to be the best choice for spinners
|
||
and that the placeholders are usually smaller than the proper image, but it doesn't
|
||
apply to blurhash that by default could use the same fitting as the proper image.
|
||
*/
|
||
var placeholderContentFit: ContentFit = .scaleDown
|
||
|
||
/**
|
||
Same as `bestSource`, but for placeholders.
|
||
*/
|
||
var bestPlaceholder: ImageSource? {
|
||
return getBestSource(from: placeholderSources, forSize: bounds.size, scale: screenScale) ?? placeholderSources.first
|
||
}
|
||
|
||
/**
|
||
A bool value whether the placeholder can be displayed, i.e. nothing has been displayed yet or the sources are unset.
|
||
*/
|
||
var canDisplayPlaceholder: Bool {
|
||
return isViewEmpty || (!hasAnySource && sourceImage == nil)
|
||
}
|
||
|
||
/**
|
||
Loads a placeholder from the best source provided in `placeholder` prop.
|
||
A placeholder should be a local asset to have more time to show before the proper image is loaded,
|
||
but remote assets are also supported – for the bundler and to cache them on the disk to load faster next time.
|
||
- Note: Placeholders are not being resized nor transformed, so try to keep them small.
|
||
*/
|
||
func loadPlaceholderIfNecessary() {
|
||
// Exit early if placeholder is not set or there is already an image attached to the view.
|
||
// The placeholder is only used until the first image is loaded.
|
||
guard canDisplayPlaceholder, let placeholder = bestPlaceholder else {
|
||
return
|
||
}
|
||
|
||
// Cache placeholders on the disk. Should we let the user choose whether
|
||
// to cache them or apply the same policy as with the proper image?
|
||
// Basically they are also cached in memory as the `placeholderImage` property,
|
||
// so just `disk` policy sounds like a good idea.
|
||
var context = createSDWebImageContext(forSource: placeholder, cachePolicy: .disk, useAppleWebpCodec: useAppleWebpCodec)
|
||
|
||
let isPlaceholderHash = placeholder.isBlurhash || placeholder.isThumbhash
|
||
|
||
imageManager.loadImage(with: placeholder.uri, context: context, progress: nil) { [weak self] placeholder, _, _, _, finished, _ in
|
||
guard let self, let placeholder, finished else {
|
||
return
|
||
}
|
||
self.placeholderImage = placeholder
|
||
self.placeholderContentFit = isPlaceholderHash ? self.contentFit : self.placeholderContentFit
|
||
self.displayPlaceholderIfNecessary()
|
||
}
|
||
}
|
||
|
||
/**
|
||
Displays a placeholder if necessary – the placeholder can only be displayed when no image has been displayed yet or the sources are unset.
|
||
*/
|
||
private func displayPlaceholderIfNecessary() {
|
||
guard canDisplayPlaceholder, let placeholder = placeholderImage else {
|
||
return
|
||
}
|
||
setImage(placeholder, contentFit: placeholderContentFit, isPlaceholder: true)
|
||
}
|
||
|
||
// MARK: - Processing
|
||
|
||
private func createTransformPipeline() -> SDImagePipelineTransformer? {
|
||
let transformers: [SDImageTransformer] = [
|
||
SDImageBlurTransformer(radius: blurRadius)
|
||
]
|
||
return SDImagePipelineTransformer(transformers: transformers)
|
||
}
|
||
|
||
private func processImage(_ image: UIImage?, idealSize: CGSize, scale: Double) -> UIImage? {
|
||
guard let image = image, !bounds.isEmpty else {
|
||
return nil
|
||
}
|
||
sdImageView.animationTransformer = nil
|
||
// Downscale the image only when necessary
|
||
if allowDownscaling && shouldDownscale(image: image, toSize: idealSize, scale: scale) {
|
||
if image.sd_isAnimated {
|
||
let size = idealSize * scale
|
||
sdImageView.animationTransformer = SDImageResizingTransformer(size: size, scaleMode: .fill)
|
||
return image
|
||
}
|
||
return resize(image: image, toSize: idealSize, scale: scale)
|
||
}
|
||
return image
|
||
}
|
||
|
||
// MARK: - Rendering
|
||
|
||
/**
|
||
Moves the layer on which the image is rendered to respect the `contentPosition` prop.
|
||
*/
|
||
private func applyContentPosition(contentSize: CGSize, containerSize: CGSize) {
|
||
let offset = contentPosition.offset(contentSize: contentSize, containerSize: containerSize)
|
||
if sdImageView.layer.mask != nil {
|
||
// In New Architecture mode, React Native adds a mask layer to image subviews.
|
||
// When moving the layer frame, we must move the mask layer with a compensation value.
|
||
// This prevents the layer from being cropped.
|
||
// See https://github.com/expo/expo/issues/34201
|
||
// and https://github.com/facebook/react-native/blob/c72d4c5ee97/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L1066-L1076
|
||
CATransaction.begin()
|
||
CATransaction.setDisableActions(true)
|
||
sdImageView.layer.frame.origin = offset
|
||
sdImageView.layer.mask?.frame.origin = CGPoint(x: -offset.x, y: -offset.y)
|
||
CATransaction.commit()
|
||
} else {
|
||
sdImageView.layer.frame.origin = offset
|
||
}
|
||
}
|
||
|
||
internal func renderSourceImage(_ image: UIImage?) {
|
||
// Update the source image before it gets rendered or transitioned to.
|
||
sourceImage = image
|
||
|
||
if let transition = transition, transition.duration > 0 {
|
||
let options = transition.toAnimationOptions()
|
||
let seconds = transition.duration / 1000
|
||
|
||
UIView.transition(with: sdImageView, duration: seconds, options: options) { [weak self] in
|
||
if let self {
|
||
self.setImage(image, contentFit: self.contentFit, isPlaceholder: false)
|
||
}
|
||
}
|
||
} else {
|
||
setImage(image, contentFit: contentFit, isPlaceholder: false)
|
||
}
|
||
}
|
||
|
||
private func setImage(_ image: UIImage?, contentFit: ContentFit, isPlaceholder: Bool) {
|
||
sdImageView.contentMode = contentFit.toContentMode()
|
||
|
||
if isPlaceholder {
|
||
sdImageView.autoPlayAnimatedImage = true
|
||
} else {
|
||
sdImageView.autoPlayAnimatedImage = autoplay
|
||
}
|
||
|
||
if let imageTintColor, !isPlaceholder {
|
||
sdImageView.tintColor = imageTintColor
|
||
sdImageView.image = image?.withRenderingMode(.alwaysTemplate)
|
||
} else {
|
||
sdImageView.tintColor = nil
|
||
sdImageView.image = image
|
||
}
|
||
|
||
if !isPlaceholder {
|
||
onDisplay()
|
||
}
|
||
|
||
#if !os(tvOS)
|
||
if enableLiveTextInteraction {
|
||
analyzeImage()
|
||
}
|
||
#endif
|
||
}
|
||
|
||
// MARK: - Helpers
|
||
|
||
func cancelPendingOperation() {
|
||
pendingOperation?.cancel()
|
||
pendingOperation = nil
|
||
}
|
||
|
||
/**
|
||
A scale of the screen where the view is presented,
|
||
or the main scale if the view is not mounted yet.
|
||
*/
|
||
var screenScale: Double {
|
||
return window?.screen.scale as? Double ?? UIScreen.main.scale
|
||
}
|
||
|
||
/**
|
||
The image source that fits best into the view bounds.
|
||
*/
|
||
var bestSource: ImageSource? {
|
||
return getBestSource(from: sources, forSize: bounds.size, scale: screenScale)
|
||
}
|
||
|
||
/**
|
||
A bool value whether the image view doesn't render any image.
|
||
*/
|
||
var isViewEmpty: Bool {
|
||
return sdImageView.image == nil
|
||
}
|
||
|
||
/**
|
||
A bool value whether there is any source to load from.
|
||
*/
|
||
var hasAnySource: Bool {
|
||
return sources?.isEmpty == false
|
||
}
|
||
|
||
// MARK: - Live Text Interaction
|
||
#if !os(tvOS)
|
||
@available(iOS 16.0, macCatalyst 17.0, *)
|
||
static let imageAnalyzer = ImageAnalyzer.isSupported ? ImageAnalyzer() : nil
|
||
|
||
var enableLiveTextInteraction: Bool = false {
|
||
didSet {
|
||
guard #available(iOS 16.0, macCatalyst 17.0, *), oldValue != enableLiveTextInteraction, ImageAnalyzer.isSupported else {
|
||
return
|
||
}
|
||
if enableLiveTextInteraction {
|
||
let imageAnalysisInteraction = ImageAnalysisInteraction()
|
||
sdImageView.addInteraction(imageAnalysisInteraction)
|
||
} else if let interaction = findImageAnalysisInteraction() {
|
||
sdImageView.removeInteraction(interaction)
|
||
}
|
||
}
|
||
}
|
||
|
||
private func analyzeImage() {
|
||
guard #available(iOS 16.0, macCatalyst 17.0, *), ImageAnalyzer.isSupported, let image = sdImageView.image else {
|
||
return
|
||
}
|
||
|
||
Task {
|
||
guard let imageAnalyzer = Self.imageAnalyzer, let imageAnalysisInteraction = findImageAnalysisInteraction() else {
|
||
return
|
||
}
|
||
let configuration = ImageAnalyzer.Configuration([.text, .machineReadableCode])
|
||
|
||
do {
|
||
let imageAnalysis = try await imageAnalyzer.analyze(image, configuration: configuration)
|
||
|
||
// Make sure the image haven't changed in the meantime.
|
||
if image == sdImageView.image {
|
||
imageAnalysisInteraction.analysis = imageAnalysis
|
||
imageAnalysisInteraction.preferredInteractionTypes = .automatic
|
||
}
|
||
} catch {
|
||
log.error(error)
|
||
}
|
||
}
|
||
}
|
||
|
||
@available(iOS 16.0, macCatalyst 17.0, *)
|
||
private func findImageAnalysisInteraction() -> ImageAnalysisInteraction? {
|
||
let interaction = sdImageView.interactions.first {
|
||
return $0 is ImageAnalysisInteraction
|
||
}
|
||
return interaction as? ImageAnalysisInteraction
|
||
}
|
||
#endif
|
||
}
|