Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bilalmarifet opened this issue Nov 18, 2022 · 1 comment

Comments

@bilalmarifet
Copy link

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()
        }
    }
}
@onevcat
Copy link
Owner

onevcat commented Nov 24, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants