So what I am trying to do is I have a UICollectionViewController with cells of images and videos and I want it so that when you tap on the video it plays the video in full screen. I have already made this for the images, however I am not quite sure how to do this for the videos? So with the images, you tap on the image (cell) and the image goes to the center of the screen with a black background view. I would like to incorporate the same thing but with videos, and of course the video will play etc...
I am fetching the video from Firebase.
Code on what I have for the image:
import UIKit
import Firebase
import MobileCoreServices
import AVFoundation
class ImagesAndVideosController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
lazy var messageImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.layer.cornerRadius = 16
imageView.layer.masksToBounds = true
imageView.contentMode = .scaleAspectFill
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleZoomTap)))
return imageView
}()
func handleZoomTap(_ tapGesture: UITapGestureRecognizer) {
if message?.videoUrl != nil {
return
}
if let imageView = tapGesture.view as? UIImageView {
self.chatLogController?.performZoomInForStartingImageView(imageView)
}
}
var startingFrame: CGRect?
var blackBackgroundView: UIView?
var startingImageView: UIImageView?
func performZoomInForStartingImageView(_ startingImageView: UIImageView) {
self.startingImageView = startingImageView
self.startingImageView?.isHidden = true
startingFrame = startingImageView.superview?.convert(startingImageView.frame, to: nil)
let zoomingImageView = UIImageView(frame: startingFrame!)
zoomingImageView.backgroundColor = UIColor.red
zoomingImageView.image = startingImageView.image
zoomingImageView.isUserInteractionEnabled = true
zoomingImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleZoomOut)))
if let keyWindow = UIApplication.shared.keyWindow {
blackBackgroundView = UIView(frame: keyWindow.frame)
blackBackgroundView?.backgroundColor = UIColor.black
blackBackgroundView?.alpha = 0
keyWindow.addSubview(blackBackgroundView!)
keyWindow.addSubview(zoomingImageView)
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.blackBackgroundView?.alpha = 1
self.inputContainerView.alpha = 0
// math?
// h2 / w1 = h1 / w1
// h2 = h1 / w1 * w1
let height = self.startingFrame!.height / self.startingFrame!.width * keyWindow.frame.width
zoomingImageView.frame = CGRect(x: 0, y: 0, width: keyWindow.frame.width, height: height)
zoomingImageView.center = keyWindow.center
}, completion: { (completed) in
// do nothing
})
}
}
func handleZoomOut(_ tapGesture: UITapGestureRecognizer) {
if let zoomOutImageView = tapGesture.view {
//need to animate back out to controller
zoomOutImageView.layer.cornerRadius = 16
zoomOutImageView.clipsToBounds = true
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
zoomOutImageView.frame = self.startingFrame!
self.blackBackgroundView?.alpha = 0
self.inputContainerView.alpha = 1
}, completion: { (completed) in
zoomOutImageView.removeFromSuperview()
self.startingImageView?.isHidden = false
})
}
}
}
I am sorry if the code I have presented doesn't make much sense, I am sure you all know that this stuff is super confidential so I had to kind of cut and paste enough to show but not all of it. So again I apologize. I also have a play button so when there is a video that loads into the collection view it knows and puts a play button on top of it so that the video will play, however the video plays inside of the cell, that is why I want it to go to the center (like you see in most applications).
Thank you SO MUCH!! I hope I have provided enough information?