Kingfisher icon indicating copy to clipboard operation
Kingfisher copied to clipboard

KFImage Placeholder modifier has progress value, but imageView.kf doesnt

Open bilalmarifet opened this issue 3 years ago • 1 comments

Issue Description

Firstly, i'am using swiftui. in KFImage i can use progress value for showing loading indicator.

{ 
KFImage.url(viewModel.url)
                    .placeholder { progress in
                        Image("imagePlaceholder")
                        VStack {
                            Image("imagePlaceholder")
                                .padding()
                        }
                        .overlay(ZStack {
                            Circle()
                                .stroke(
                                    HR.Color.General.primary.opacity(0.5),
                                    lineWidth: 1
                                )
                            Circle()
                                .trim(from: 0, to: progress.fractionCompleted)
                                .stroke(
                                    HR.Color.General.primary,
                                    style: StrokeStyle(
                                        lineWidth: 1,
                                        lineCap: .round
                                    )
                                )
                                .rotationEffect(.degrees(-90))
                                // 1
                                .animation(.easeOut, value: progress.fractionCompleted)

                        })
                        
                    }
}

but there is nothing to do for gif images

public struct KFAnimatedImage: UIViewRepresentable {
    var resource: Resource
    
    @Binding var isPlaying: Bool
    @Binding var shouldPause: Bool
    @Binding var isImageBroken: Bool
    
    
    public func makeUIView(context: Context) -> AnimatedImageView {
        let view = AnimatedImageView()
        view.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        view.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
        return view
    }
    
    public func updateUIView(_ uiView: AnimatedImageView, context: Context) {
        uiView.autoPlayAnimatedImage = false
        let failureImage = UIImage(named: "brokenImage")
        uiView.kf.setImage(with: resource, placeholder: UIImage(named: "placeholder"), options: [.onFailureImage(failureImage), .retryStrategy(DelayRetryStrategy(maxRetryCount: 5,retryInterval: .accumulated(3)))]) { result in
            switch result {
            case .success(_):
                if isPlaying {
                    uiView.startAnimating()
                }
            default:
                break
            }
        }
        if isPlaying {
            uiView.startAnimating()
        } else {
            uiView.stopAnimating()
        }
    }
}

bilalmarifet avatar Nov 18 '22 13:11 bilalmarifet

For the UIKit world (a.k.a the uiImageView.kf extension), it now lacks a way to update the placeholder just in place like in SwiftUI. A possible solution is adding your own indicator and updating it in the progressBlock:

struct MyIndicator: Indicator {
    let view: UIView = UIView()
    
    func startAnimatingView() { view.isHidden = false }
    func stopAnimatingView() { view.isHidden = true }
    
    var percentage: Double {
        didSet { 
           // update your actual view.
        }
    }

    init() {
        // just a sample.
        view.backgroundColor = .red
    }
}

let myIndicator = MyIndicator()
imageView.kf.indicatorType = .custom(indicator: i)
imageView.kf.setImage(with: url, progressBlock: {
    receivedSize, totalSize in
    let percentage = (Float(receivedSize) / Float(totalSize)) * 100.0
    print("downloading progress: \(percentage)%")
    myIndicator.percentage = percentage
})

Or, instead of creating your own KFAnimatedImage, there is actually an existing wrapper with the same name (and its documentation is here). This wrapper conforms to the KFImageProtocol and it means all view modifiers for KFImage are also available for the official KFAnimatedImage.

onevcat avatar Nov 24 '22 14:11 onevcat