409 lines
19 KiB
Swift
409 lines
19 KiB
Swift
//
|
|
// CachedAsyncGiffy.swift
|
|
// Pocket Poster
|
|
//
|
|
// Created by lemin on 7/18/25.
|
|
//
|
|
|
|
|
|
//
|
|
// Created by Lorenzo Fiamingo on 04/11/20.
|
|
//
|
|
|
|
import SwiftUI
|
|
import Giffy
|
|
|
|
/// A view that asynchronously loads, cache and displays an image.
|
|
///
|
|
/// This view uses a custom default
|
|
/// <doc://com.apple.documentation/documentation/Foundation/URLSession>
|
|
/// instance to load an image from the specified URL, and then display it.
|
|
/// For example, you can display an icon that's stored on a server:
|
|
///
|
|
/// CachedAsyncGiffy(url: URL(string: "https://example.com/icon.gif"))
|
|
/// .frame(width: 200, height: 200)
|
|
///
|
|
/// Until the image loads, the view displays a standard placeholder that
|
|
/// fills the available space. After the load completes successfully, the view
|
|
/// updates to display the image. In the example above, the icon is smaller
|
|
/// than the frame, and so appears smaller than the placeholder.
|
|
///
|
|
/// 
|
|
///
|
|
/// You can specify a custom placeholder using
|
|
/// ``init(url:urlCache:scale:content:placeholder:)``. With this initializer, you can
|
|
/// also use the `content` parameter to manipulate the loaded image.
|
|
/// For example, you can add a modifier to make the loaded image resizable:
|
|
///
|
|
/// CachedAsyncGiffy(url: URL(string: "https://example.com/icon.gif")) { image in
|
|
/// image.resizable()
|
|
/// } placeholder: {
|
|
/// ProgressView()
|
|
/// }
|
|
/// .frame(width: 50, height: 50)
|
|
///
|
|
/// For this example, SwiftUI shows a ``ProgressView`` first, and then the
|
|
/// image scaled to fit in the specified frame:
|
|
///
|
|
/// 
|
|
///
|
|
/// > Important: You can't apply image-specific modifiers, like
|
|
/// ``Image/resizable(capInsets:resizingMode:)``, directly to a `CachedAsyncImage`.
|
|
/// Instead, apply them to the ``Image`` instance that your `content`
|
|
/// closure gets when defining the view's appearance.
|
|
///
|
|
/// To gain more control over the loading process, use the
|
|
/// ``init(url:urlCache:scale:transaction:content:)`` initializer, which takes a
|
|
/// `content` closure that receives an ``AsyncImagePhase`` to indicate
|
|
/// the state of the loading operation. Return a view that's appropriate
|
|
/// for the current phase:
|
|
///
|
|
/// CachedAsyncGiffy(url: URL(string: "https://example.com/icon.gif")) { phase in
|
|
/// if let image = phase.image {
|
|
/// image // Displays the loaded image.
|
|
/// } else if phase.error != nil {
|
|
/// Color.red // Indicates an error.
|
|
/// } else {
|
|
/// Color.blue // Acts as a placeholder.
|
|
/// }
|
|
/// }
|
|
///
|
|
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
|
|
public struct CachedAsyncGiffy<Content>: View where Content: View {
|
|
|
|
@State private var phase: AsyncGiffyPhase
|
|
|
|
private let urlRequest: URLRequest?
|
|
|
|
private let urlSession: URLSession
|
|
|
|
private let scale: CGFloat
|
|
|
|
private let transaction: Transaction
|
|
|
|
private let content: (AsyncGiffyPhase) -> Content
|
|
|
|
public var body: some View {
|
|
content(phase)
|
|
.task(id: urlRequest, load)
|
|
}
|
|
|
|
/// Loads and displays an image from the specified URL.
|
|
///
|
|
/// Until the image loads, SwiftUI displays a default placeholder. When
|
|
/// the load operation completes successfully, SwiftUI updates the
|
|
/// view to show the loaded image. If the operation fails, SwiftUI
|
|
/// continues to display the placeholder. The following example loads
|
|
/// and displays an icon from an example server:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png"))
|
|
///
|
|
/// If you want to customize the placeholder or apply image-specific
|
|
/// modifiers --- like ``Image/resizable(capInsets:resizingMode:)`` ---
|
|
/// to the loaded image, use the ``init(url:scale:content:placeholder:)``
|
|
/// initializer instead.
|
|
///
|
|
/// - Parameters:
|
|
/// - url: The URL of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
public init(url: URL?, urlCache: URLCache = .shared, scale: CGFloat = 1) where Content == Giffy {
|
|
let urlRequest = url == nil ? nil : URLRequest(url: url!)
|
|
self.init(urlRequest: urlRequest, urlCache: urlCache, scale: scale)
|
|
}
|
|
|
|
/// Loads and displays an image from the specified URL.
|
|
///
|
|
/// Until the image loads, SwiftUI displays a default placeholder. When
|
|
/// the load operation completes successfully, SwiftUI updates the
|
|
/// view to show the loaded image. If the operation fails, SwiftUI
|
|
/// continues to display the placeholder. The following example loads
|
|
/// and displays an icon from an example server:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png"))
|
|
///
|
|
/// If you want to customize the placeholder or apply image-specific
|
|
/// modifiers --- like ``Image/resizable(capInsets:resizingMode:)`` ---
|
|
/// to the loaded image, use the ``init(url:scale:content:placeholder:)``
|
|
/// initializer instead.
|
|
///
|
|
/// - Parameters:
|
|
/// - urlRequest: The URL request of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
public init(urlRequest: URLRequest?, urlCache: URLCache = .shared, scale: CGFloat = 1) where Content == Giffy {
|
|
self.init(urlRequest: urlRequest, urlCache: urlCache, scale: scale) { phase in
|
|
#if os(macOS)
|
|
phase.image ?? Image(nsImage: .init())
|
|
#else
|
|
switch phase {
|
|
case .success(let giffy):
|
|
return giffy
|
|
default:
|
|
return Giffy("")
|
|
}
|
|
#endif
|
|
}
|
|
}
|
|
|
|
/// Loads and displays a modifiable image from the specified URL using
|
|
/// a custom placeholder until the image loads.
|
|
///
|
|
/// Until the image loads, SwiftUI displays the placeholder view that
|
|
/// you specify. When the load operation completes successfully, SwiftUI
|
|
/// updates the view to show content that you specify, which you
|
|
/// create using the loaded image. For example, you can show a green
|
|
/// placeholder, followed by a tiled version of the loaded image:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png")) { image in
|
|
/// image.resizable(resizingMode: .tile)
|
|
/// } placeholder: {
|
|
/// Color.green
|
|
/// }
|
|
///
|
|
/// If the load operation fails, SwiftUI continues to display the
|
|
/// placeholder. To be able to display a different view on a load error,
|
|
/// use the ``init(url:scale:transaction:content:)`` initializer instead.
|
|
///
|
|
/// - Parameters:
|
|
/// - url: The URL of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
/// - content: A closure that takes the loaded image as an input, and
|
|
/// returns the view to show. You can return the image directly, or
|
|
/// modify it as needed before returning it.
|
|
/// - placeholder: A closure that returns the view to show until the
|
|
/// load operation completes successfully.
|
|
public init<I, P>(url: URL?, urlCache: URLCache = .shared, scale: CGFloat = 1, @ViewBuilder content: @escaping (Giffy) -> I, @ViewBuilder placeholder: @escaping () -> P) where Content == _ConditionalContent<I, P>, I : View, P : View {
|
|
let urlRequest = url == nil ? nil : URLRequest(url: url!)
|
|
self.init(urlRequest: urlRequest, urlCache: urlCache, scale: scale, content: content, placeholder: placeholder)
|
|
}
|
|
|
|
/// Loads and displays a modifiable image from the specified URL using
|
|
/// a custom placeholder until the image loads.
|
|
///
|
|
/// Until the image loads, SwiftUI displays the placeholder view that
|
|
/// you specify. When the load operation completes successfully, SwiftUI
|
|
/// updates the view to show content that you specify, which you
|
|
/// create using the loaded image. For example, you can show a green
|
|
/// placeholder, followed by a tiled version of the loaded image:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png")) { image in
|
|
/// image.resizable(resizingMode: .tile)
|
|
/// } placeholder: {
|
|
/// Color.green
|
|
/// }
|
|
///
|
|
/// If the load operation fails, SwiftUI continues to display the
|
|
/// placeholder. To be able to display a different view on a load error,
|
|
/// use the ``init(url:scale:transaction:content:)`` initializer instead.
|
|
///
|
|
/// - Parameters:
|
|
/// - urlRequest: The URL request of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
/// - content: A closure that takes the loaded image as an input, and
|
|
/// returns the view to show. You can return the image directly, or
|
|
/// modify it as needed before returning it.
|
|
/// - placeholder: A closure that returns the view to show until the
|
|
/// load operation completes successfully.
|
|
public init<I, P>(urlRequest: URLRequest?, urlCache: URLCache = .shared, scale: CGFloat = 1, @ViewBuilder content: @escaping (Giffy) -> I, @ViewBuilder placeholder: @escaping () -> P) where Content == _ConditionalContent<I, P>, I : View, P : View {
|
|
self.init(urlRequest: urlRequest, urlCache: urlCache, scale: scale) { phase in
|
|
switch phase {
|
|
case .success(let image):
|
|
content(image)
|
|
default:
|
|
placeholder()
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Loads and displays a modifiable image from the specified URL in phases.
|
|
///
|
|
/// If you set the asynchronous image's URL to `nil`, or after you set the
|
|
/// URL to a value but before the load operation completes, the phase is
|
|
/// ``AsyncImagePhase/empty``. After the operation completes, the phase
|
|
/// becomes either ``AsyncImagePhase/failure(_:)`` or
|
|
/// ``AsyncImagePhase/success(_:)``. In the first case, the phase's
|
|
/// ``AsyncImagePhase/error`` value indicates the reason for failure.
|
|
/// In the second case, the phase's ``AsyncImagePhase/image`` property
|
|
/// contains the loaded image. Use the phase to drive the output of the
|
|
/// `content` closure, which defines the view's appearance:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png")) { phase in
|
|
/// if let image = phase.image {
|
|
/// image // Displays the loaded image.
|
|
/// } else if phase.error != nil {
|
|
/// Color.red // Indicates an error.
|
|
/// } else {
|
|
/// Color.blue // Acts as a placeholder.
|
|
/// }
|
|
/// }
|
|
///
|
|
/// To add transitions when you change the URL, apply an identifier to the
|
|
/// ``CachedAsyncImage``.
|
|
///
|
|
/// - Parameters:
|
|
/// - url: The URL of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
/// - transaction: The transaction to use when the phase changes.
|
|
/// - content: A closure that takes the load phase as an input, and
|
|
/// returns the view to display for the specified phase.
|
|
public init(url: URL?, urlCache: URLCache = .shared, scale: CGFloat = 1, transaction: Transaction = Transaction(), @ViewBuilder content: @escaping (AsyncGiffyPhase) -> Content) {
|
|
let urlRequest = url == nil ? nil : URLRequest(url: url!)
|
|
self.init(urlRequest: urlRequest, urlCache: urlCache, scale: scale, transaction: transaction, content: content)
|
|
}
|
|
|
|
/// Loads and displays a modifiable image from the specified URL in phases.
|
|
///
|
|
/// If you set the asynchronous image's URL to `nil`, or after you set the
|
|
/// URL to a value but before the load operation completes, the phase is
|
|
/// ``AsyncImagePhase/empty``. After the operation completes, the phase
|
|
/// becomes either ``AsyncImagePhase/failure(_:)`` or
|
|
/// ``AsyncImagePhase/success(_:)``. In the first case, the phase's
|
|
/// ``AsyncImagePhase/error`` value indicates the reason for failure.
|
|
/// In the second case, the phase's ``AsyncImagePhase/image`` property
|
|
/// contains the loaded image. Use the phase to drive the output of the
|
|
/// `content` closure, which defines the view's appearance:
|
|
///
|
|
/// CachedAsyncImage(url: URL(string: "https://example.com/icon.png")) { phase in
|
|
/// if let image = phase.image {
|
|
/// image // Displays the loaded image.
|
|
/// } else if phase.error != nil {
|
|
/// Color.red // Indicates an error.
|
|
/// } else {
|
|
/// Color.blue // Acts as a placeholder.
|
|
/// }
|
|
/// }
|
|
///
|
|
/// To add transitions when you change the URL, apply an identifier to the
|
|
/// ``CachedAsyncImage``.
|
|
///
|
|
/// - Parameters:
|
|
/// - urlRequest: The URL request of the image to display.
|
|
/// - urlCache: The URL cache for providing cached responses to requests within the session.
|
|
/// - scale: The scale to use for the image. The default is `1`. Set a
|
|
/// different value when loading images designed for higher resolution
|
|
/// displays. For example, set a value of `2` for an image that you
|
|
/// would name with the `@2x` suffix if stored in a file on disk.
|
|
/// - transaction: The transaction to use when the phase changes.
|
|
/// - content: A closure that takes the load phase as an input, and
|
|
/// returns the view to display for the specified phase.
|
|
public init(urlRequest: URLRequest?, urlCache: URLCache = .shared, scale: CGFloat = 1, transaction: Transaction = Transaction(), @ViewBuilder content: @escaping (AsyncGiffyPhase) -> Content) {
|
|
let configuration = URLSessionConfiguration.default
|
|
configuration.urlCache = urlCache
|
|
self.urlRequest = urlRequest
|
|
self.urlSession = URLSession(configuration: configuration)
|
|
self.scale = scale
|
|
self.transaction = transaction
|
|
self.content = content
|
|
|
|
self._phase = State(wrappedValue: .loading)
|
|
do {
|
|
if let urlRequest = urlRequest, let image = try cachedGif(from: urlRequest, cache: urlCache) {
|
|
self._phase = State(wrappedValue: .success(image))
|
|
}
|
|
} catch {
|
|
self._phase = State(wrappedValue: .error)
|
|
}
|
|
}
|
|
|
|
@Sendable
|
|
private func load() async {
|
|
do {
|
|
if let urlRequest = urlRequest {
|
|
let (image, metrics) = try await remoteGif(from: urlRequest, session: urlSession)
|
|
if metrics.transactionMetrics.last?.resourceFetchType == .localCache {
|
|
// WARNING: This does not behave well when the url is changed with another
|
|
phase = .success(image)
|
|
} else {
|
|
withAnimation(transaction.animation) {
|
|
phase = .success(image)
|
|
}
|
|
}
|
|
} else {
|
|
withAnimation(transaction.animation) {
|
|
phase = .loading
|
|
}
|
|
}
|
|
} catch {
|
|
withAnimation(transaction.animation) {
|
|
phase = .error
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Helpers
|
|
|
|
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
|
|
private extension CachedAsyncGiffy {
|
|
private func remoteGif(from request: URLRequest, session: URLSession) async throws -> (Giffy, URLSessionTaskMetrics) {
|
|
let (data, _, metrics) = try await session.data(for: request)
|
|
if metrics.redirectCount > 0, let lastResponse = metrics.transactionMetrics.last?.response {
|
|
let requests = metrics.transactionMetrics.map { $0.request }
|
|
requests.forEach(session.configuration.urlCache!.removeCachedResponse)
|
|
let lastCachedResponse = CachedURLResponse(response: lastResponse, data: data)
|
|
session.configuration.urlCache!.storeCachedResponse(lastCachedResponse, for: request)
|
|
}
|
|
return (try gif(from: data), metrics)
|
|
}
|
|
|
|
private func cachedGif(from request: URLRequest, cache: URLCache) throws -> Giffy? {
|
|
guard let cachedResponse = cache.cachedResponse(for: request) else { return nil }
|
|
return try gif(from: cachedResponse.data)
|
|
}
|
|
|
|
private func gif(from data: Data) throws -> Giffy {
|
|
#if os(macOS)
|
|
if let nsImage = NSImage(data: data) {
|
|
return Giffy(nsImage: nsImage)
|
|
} else {
|
|
throw AsyncGiffy<Content>.LoadingError()
|
|
}
|
|
#else
|
|
return Giffy(imageData: data)
|
|
#endif
|
|
}
|
|
}
|
|
|
|
// MARK: - AsyncImageURLSession
|
|
|
|
private class URLSessionTaskController: NSObject, URLSessionTaskDelegate {
|
|
|
|
var metrics: URLSessionTaskMetrics?
|
|
|
|
func urlSession(_ session: URLSession, task: URLSessionTask, didFinishCollecting metrics: URLSessionTaskMetrics) {
|
|
self.metrics = metrics
|
|
}
|
|
}
|
|
|
|
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
|
|
private extension URLSession {
|
|
|
|
func data(for request: URLRequest) async throws -> (Data, URLResponse, URLSessionTaskMetrics) {
|
|
let controller = URLSessionTaskController()
|
|
let (data, response) = try await data(for: request, delegate: controller)
|
|
return (data, response, controller.metrics!)
|
|
}
|
|
}
|