Videos are placed on top of images in collection view? - ios

Question

I have a collection view which is populated with videos or images, based on what is fetched from firebase.
I am having this problem where when I fetch the data and add to the cells, some cells get a video added on top [of the image].
I have looked through the code found bellow and cant seem to . find where the problem is coming from.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Item", for: indexPath) as! CollectionViewCell1
if postArray[indexPath.item].media[0].image != nil { //its an image
let date = ConvertDate(mediaTimestamp: postArray[indexPath.row].media[0].postNum!, isItForP3: false).getDate!
do {
cell.imageView.image = postArray[indexPath.item].media[0].image!
if postArray[indexPath.item].user.profileImageUrl != "" {
let url = URL(string: "\(postArray[indexPath.item].user.profileImageUrl)")
let data = try Data(contentsOf: url!)
if let profileImage = UIImage(data: data) {
cell.profImage.image = profileImage
cell.titleLabel.text = postArray[indexPath.item].user.username
cell.subtitleLabel.text = date
}
} else {
//I add a fake image here
cell.titleLabel.text = postArray[indexPath.item].user.username
cell.subtitleLabel.text = date
cell.profImage.image = UIImage(named: "media")
}
} catch {
print("need to add stuff to this catch")
}
} else { //its a video
let videoURL = postArray[indexPath.item].media[0].videoURL
let player = AVPlayer(url: videoURL! as URL)
let playerLayer = AVPlayerLayer(player: player)
playerLayer.frame = cell.bounds
cell.layer.addSublayer(playerLayer)
let date = ConvertDate(mediaTimestamp: postArray[indexPath.item].media[0].postNum!, isItForP3: false).getDate!
do {
if postArray[indexPath.item].user.profileImageUrl != "" {
let url = URL(string: "\(postArray[indexPath.item].user.profileImageUrl)")
let data = try Data(contentsOf: url!)
if let profileImage = UIImage(data: data) {
cell.profImage.image = profileImage
cell.titleLabel.text = postArray[indexPath.item].user.username
cell.subtitleLabel.text = date
}
} else {
//I add a fake profile image here
cell.titleLabel.text = postArray[indexPath.item].user.username
cell.subtitleLabel.text = date
cell.profImage.image = UIImage(named: "media")
}
} catch {
print("need to add stuff to this catch")
}
}
print("Completed: ", cell.imageView!)
return cell
}
How do i fix this?

Answer 1

The reason is here
cell.layer.addSublayer(playerLayer)
you should clear the cell because it's dequeued
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Item", for: indexPath) as! CollectionViewCell1
cell.layer.sublayers.forEach {
if $0 is AVPlayerLayer {
$0.removeFromSuperlayer()
}
}
, also you shouldn't use
let data = try Data(contentsOf: url!)
for remote data gribbing , you may use SDWebImage

Answer 2

When you say
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "p1Item", for: indexPath) as! CollectionViewCell1
This means that you are reusing the old cell and in your case the old cell might have a AVPlayerLayer
One way to fix this is to use different withReuseIdentifier
if postArray[indexPath.item].media[0].image != nil { //its an image
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImgageCell", for: indexPath) as! CollectionViewCell1
return cell
} else { //its a video
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "VideoCell", for: indexPath) as! CollectionViewCell1
return cell
}
}
Or reset the Cell before reuse i.e. remove the layer after dequeueReusableCell