Create Movie/Series Detail Screen on tvOS
(Part 6 of 8)
This is the sixth part of our tvOS Bootcamp. Please check out the previous pages to know more about this series.
This part of bootcamp takes care of implementing the Detail screen of our app.
To achieve this and to make it dynamic for future scalability, we will follow the same approach as HomeViewController and make use of UICollectionView APIs.
This is how we are going to create this:
Approach: We are going to have a collection view with SectionHeader containing the entire top part including the Image on the right, title, summary and buttons.
Bottom part is the same carousel we used in Home page. We are going to display the full rail of the asset from previous page.
Tapping Play/Watch will play the content in video player.
Tapping any asset in the bottom carousel will open the Detail screen again for selected asset.
This is how the code looks like:
As we can see, we are doing the exact same in setting up the UICollectionView in Home screen with the only difference being, we are making use of the new section header view called DetailBackdropView.
This is how the datasource & delegates are implemented:
This is also very similar to Home screen. The only difference is the handling of Play & Wishlist buttons in section header.
This is how the top view code looks like:
It only has a few outlets of the view components and 2 closure properties to tell respective class when any button is tapped.
Finally, whenever play button is tapped. We are going to make use of the native AVPlayerViewController and play video in it like this:
To explain what is going on, we first create an instance of URL from string using a category of String class. This category simply takes a string and converts it into a URL.
Once we have the url, we create an instance of AVPlayer by providing it the resulting url.
This player is then provided to AVPlayerViewController instance.
It is very important to only play the content when player has finished presenting. For this, we will call the method present(controller, animated: true) and call player.play() method in the completion block.
Viola, we can now play any video in the player with all functionalities built-in like a draggable seek bar, audio, subtitle, dynamic range support etc.
Here is the actual screenshot of the detail screen.
Everything works smoothly with the only exception being, if you scroll to the end of the carousel and swipe up, neither Wishlist nor Play button gets focused.
We will try to resolve this issue in our next tutorial.
https://atulkhatri.medium.com/using-focus-guide-on-tvos-5f2917b41b06
