collectionView cell Image change when scrolling - swift - programmatically - swift

Question

I need to load an ImageView inside UIcollectionViewcell using a URL that I pass during initialisation:
func configureCellWith(messageModel : MessageModel){
guard let url = URL(string: messageModel.contentUrl!) else { return }
if url.isURLPhoto(){
likedImageView.sd_setImage(with: url, placeholderImage: nil)
}
else if url.isURLVideo(){
getThumbnailImageFromVideoUrl(url: url) { (image) in
self.likedImageView.image = image
}
}
If url is video I need to load the image in this way using this method:
func getThumbnailImageFromVideoUrl(url: URL, completion: #escaping ((_ image: UIImage?)->Void)) {
DispatchQueue.global().async {
let asset = AVAsset(url: url)
let avAssetImageGenerator = AVAssetImageGenerator(asset: asset)
avAssetImageGenerator.appliesPreferredTrackTransform = true
let thumnailTime = CMTimeMake(value: 2, timescale: 1)
do {
let cgThumbImage = try avAssetImageGenerator.copyCGImage(at: thumnailTime, actualTime: nil)
let thumbNailImage = UIImage(cgImage: cgThumbImage)
DispatchQueue.main.async {
completion(thumbNailImage)
}
} catch {
print(error.localizedDescription)
DispatchQueue.main.async {
completion(nil)
}
}
}
}
As visible I retrieve the initial frame of the video and I load it inside the cell, obviously since it's an asynchronous function it will take some time for loading the image, there's no problem In that.
The problem occurs when I scroll through the collection and I see that some cells display images which don't correspond to the correct ones.
Searching online I found out that I need to clear the image in prepareForReuse of the cell and so I did (both in case the image is loaded through sd_setImage and though getThumbnailImageFromVideoUrl function):
override func prepareForReuse() {
super.prepareForReuse()
self.likedImageView.image = UIImage()
self.likedImageView.image = nil
self.likedImageView.sd_cancelCurrentImageLoad()
}
but I still get images mismatched when scrolling thought the collection view, what could be the problem?

Answer 1

I think the issue is not with images, i guess its with video thumbnail. You generate a thumbnail on background thread synchronously but while setting it back to imageView you never bothered to find if the cell is reused and the image u just created is outdated or not.
So in your cell
var currentModel: MessageModel! = nil //declare a instance variable to hold model
... other code
func configureCellWith(messageModel : MessageModel){
self.currentModel = messageModel //keep a copy of model passed to u as argument
guard let url = URL(string: messageModel.contentUrl!) else { return }
if url.isURLPhoto(){
likedImageView.sd_setImage(with: url, placeholderImage: nil)
}
else if url.isURLVideo(){
getThumbnailImageFromVideoUrl(url: url) { (image) in
self.likedImageView.image = image
}
}
Finally in getThumbnailImageFromVideoUrl
func getThumbnailImageFromVideoUrl(url: URL, completion: #escaping ((_ image: UIImage?)->Void)) {
DispatchQueue.global().async {
let asset = AVAsset(url: url)
let avAssetImageGenerator = AVAssetImageGenerator(asset: asset)
avAssetImageGenerator.appliesPreferredTrackTransform = true
let thumnailTime = CMTimeMake(value: 2, timescale: 1)
do {
let cgThumbImage = try avAssetImageGenerator.copyCGImage(at: thumnailTime, actualTime: nil)
let thumbNailImage = UIImage(cgImage: cgThumbImage)
if url.absoluteString == currentModel.contentUrl { //check if image you generated is still valid or its no longer needed
DispatchQueue.main.async {
completion(thumbNailImage)
}
}
} catch {
print(error.localizedDescription)
DispatchQueue.main.async {
completion(nil)
}
}
}