[Swift] 넷플릭스 화면 따라만들기 (3)

저번까지는 searchAPI를 구현해봤었다. 이제는 클릭 이후에, 영상을 가져오고/틀어주고, 화면전환까지 되도록 구현해보자. 

그러기 위해서는 먼저 

 

• 영상을 갖고 있는 movie라는 객체가 있어야 하고
• 영상을 틀어줄 playerViewController (player vc)가 있어야 한다. 
• 이후 player vc + movie 로 올려주고,
• presenting plaver vc를 통해 영상을 재생해준다. 

// 클릭 되었을 때 구현해줘야 하는 부분 
extension SearchViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // movie
        // player Viewcontroller(vc)
        // player vc + movie
        // presenting player vc
        
        let movie = movies[indexPath.item]
        // url 가져오고 언래핑해준다. 
        let url = URL(string: movie.previewURL)!
        // AVPlayerItem으로 url을 가져와 아이템으로 만들어주고
        let item = AVPlayerItem(url: url)
        
        // 이용할 스토리보드를 고르고
        let sb = UIStoryboard(name: "Player", bundle: nil)
        let vc = sb.instantiateViewController(identifier: "PlayerViewController") as! PlayerViewController
        vc.modalPresentationStyle = .fullScreen // iphone 10 이상 fullscreen 지원을 위해
        
        // 아이템을 삽입해주고
        vc.player.replaceCurrentItem(with: item)
        // 실행!
        present(vc, animated: false, completion: nil)
        
    }
}

 

그리고 Play에 관련된 요소들은 PlayerViewController에서 관리해준다. 

 

import UIKit
import AVFoundation

class PlayerViewController: UIViewController {

    @IBOutlet weak var playerView: PlayerView!
    @IBOutlet weak var controlView: UIView!
    @IBOutlet weak var playButton: UIButton!
    
    // 플레이어를 먼저 만들어주고
    let player = AVPlayer()
    
    // 가로전환을 위해 사용 ( landscape / Left / Right 가능 )
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return .landscapeRight
    }
    
    // 불러오면서 플레이어 설정해주고
    override func viewDidLoad() {
        super.viewDidLoad()
        playerView.player = player
    }
    
    // 클릭하자마자 플레이 되어야 함
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        play()
    }
    
    // 플레이 버튼 제어 
    @IBAction func togglePlaybutton(_ sender: Any) {
        if player.isPlaying {
            pause()
           
        } else {
            play()
        }
    }
    
    // 클릭 시, 버튼이 pause 모양으로 변경 + 재생되면서 버튼 천천히 사라짐. 
    func play() {
        player.play()
        playButton.isSelected = true
        UIView.animate(withDuration: 1, animations: {
            self.playButton.alpha = 0
        }) { (true) in
            self.playButton.isHidden = true
        }
        
    }
    
    // 정지 / 버튼이 플레이 모양으로 
    func pause() {
        player.pause()
        playButton.isSelected = false
        
    }
    
    // 리셋 
    func reset() {
        pause()
        player.replaceCurrentItem(with: nil)
    }
    
    // 우측 상단 종료시, 리셋 및 화면 종료
    @IBAction func closeButtonTapped(_ sender: Any) {
        reset()
        dismiss(animated: false, completion: nil)
    }
}

// 영상이 재생되고 있는지 판단하는 요소
extension AVPlayer {
    var isPlaying: Bool {
        guard self.currentItem != nil else { return false }
        return self.rate != 0
    }
}

 

버튼이 클릭되었을 때 이미지 바꾸기

자 그러면 이제 검색을 해보고 실제 재생까지 해보자.

 

오.... 재생까지 잘 되는 모습을 볼 수 있다. 

(다만 아직까지 버튼을 제대로 제어하지 못하고 있다... 재생시에 사라지게는 했으나, 화면 터치시 버튼이 나오게 하고, 다시 화면 터치시 버튼이 사라지도록 만들어 줄 것이다.)

 

이제는 검색을 통한 것이 아닌, 홈 화면에서 추천 받은 영상을 재생할 수 있도록 해보자. 

원래는 바로 url을 받아와서 재생하는 것이지만, 이전에 만들어둔 searchAPI를 활용해서 url을 가져오고 재생해보자! 

 

 

재생시켜볼 영화는 "인터스텔라"이다!  다만 강의와 현재 itunes 목록이 다른지 인터스텔라 영상이 없어 nil 처리가 되고 있다.. 

이에 좋아하는 영화 중 하나인 "어바웃 타임"을 재생시켜보자! 요 건은 HomeViewController에서 진행해준다. 

 

// 재생 버튼 클릭시 실행

@IBAction func playButtonTapped(_ sender: Any) {
        // "About Time"에 대한 정보를 searchAPI로 가져온다
        // 거기서 AboutTime 객체를 가져온다.
        // 그 객체를 이용해서 PlayerViewController를 띄운다.
        
        SearchAPI.search("about time") { movies in
        	// 찾는 영화가 없을 경우 "no keyword"
            guard let aboutTime = movies.first else { return print("no keyword") }
            DispatchQueue.main.async {
                let url = URL(string: aboutTime.previewURL)!
                let item = AVPlayerItem(url: url)
                
                let sb = UIStoryboard(name: "Player", bundle: nil)
                // 다운 캐스팅
                let vc = sb.instantiateViewController(identifier: "PlayerViewController") as! PlayerViewController
                // 아이템 전달
                vc.player.replaceCurrentItem(with: item)
                
                vc.modalPresentationStyle = .fullScreen
                
                self.present(vc, animated: false, completion: nil)
            }
        }
    }

 

이전 과정과 동일하다. 

 

• 영상을 찾고
• Url을 가져오고
• Url을 통해 아이템 객체에 삽입하고
• 사용한 스토리보드를 선택, 아이템 전달, present

결과를 확인해보자! 

 

실행이 잘 되는 모습을 볼 수 있다. 

 

이렇게 간단하게 searchAPI구현부터 AVFoundation을 활용하여 영상을 재생시켜보는 것 까지 경험해봤다. 

사실 겉핥기 수준이라, 내부의 버튼 구현이나 홈에서의 다른 추천 아이템도 재생 가능하도록 만드는 등의 추가요소가 많을 것 같다. 

 

우선 어떠한 기능들이 있고, 해당 기능들이 앱 내에서 어떤 역할을 하는지 숙지해봤고, 

영화를 가지고 실습하다보니 영화가 보고싶어지는 것 같다...!

 

오랜만에 어바웃 타임을 보러...

 

끄읕.

 

 

 

** 패스트캠퍼스 iOS 앱 개발 올인원 패키지