[iOS] Youtube – view layout and floating video player

Learn from a book is good, but learn from the success model is even better. Youtube iOS app is one of the well-implemented apps. In order to study the app, I use a tool called Reveal App to help retrieve the views hierarchy. This took me many days for the first setup. However, what I eventually have discovered is worthy. Ok, let’s see what is in the mystery box.

Overall layout

To avoid going off the topic, I would not bring in too many unnecessary details. Below is the diagram of the main layout of the app.

Youtube app - view layout

We have known, the app must have at least one window, and window must have at least one root view controller (In this case, YTAppViewController is the root VC). In each UIViewController object, We’re able to add multiple sub view controllers into. In youtube case, its main layout includes 3 sub-view controllers in the root view controller:

  1. The most bottom one, YTScrollableNavigationController is the main navigation controller.
  2. The middle one, YTNGWatchLayerViewController acts as a floating video layer.
  3. The top one, YTPivotBarViewController is the bottom menu bar. This is a Tabbar alike, but I don’t think it is a subclass of UITabbarController.

Basing on memory address observing, these above objects are global. They are retained throughout the app life-cycle

These three view controllers have their views are siblings. By this way, It gains these abilities:

  • The bottom menu bar and the video layer can float on the top.
  • The bottom menu bar and video layer can be shared between pages.

Navigation trail

Youtube-Navigation controller.png

The main navigation controller relies on UINavigationController. It is a subclass of UINavigationController for sure.

The benefit is UINavigationController has a built-in stack to help navigate back and forth children VCs, parent VCs, and maintain the trail, no matter how many view controllers you push into.

However, there is a drawback. When changing tab to either Home, Trending, Subscriptions, Inbox, Library in the bottom bar. It may need to clean up the main navigation controller’s stack for the new trail. Therefore, to remain the existing trail, it may need a separate stack for each tab.

Well, this is my temporary conclusion by on the memory address observation until I figure out the new evidence which negative this.

Floating video layer

In the first section, We have seen how the video view is able to float on the top. In this part, I analyze further how it transitions from the full-mode floating video view to the mini-mode floating video view.

Youtube app - floating video player

The floating video layer or YTNGWatchLayerViewController has 2 sub view controllers:

  1. YTNGWatchFlowViewController, this acts as a full-mode floating video view
  2. YTNGWatchMiniBarViewController, this is a mini-mode floating video view which stays at the bottom of the screen.

These two float video views co-exist in the floating view layer. They cooperate to carry out the smooth transition from full-mode to mini-mode and vice versa

Youtube-float video view transition.gif

In transition, the full-mode floating video view is hidden and lays underneath the mini floating video view. It is the shadow behind the video view which you see in the above picture. Normally, You can’t see it.

The thing We actually see is the combination of the mini-mode video view and 2 other views:

  1. The mini-mode video view sits exactly on the same place with the full-mode video view. This mini-mode video view gradually changes its size in transition.
  2. One view replicates exactly the collection view of full-mode video view by rendering the captured picture.
  3. Another view (The view in blue color) just changes color alpha for fade-in/out effects.

The bottom menu bar is also asked to move in/out the screen appropriately.

Fullscreen video player

Youtube-video player transition to fullscreen.gif

In order to transition to fullscreen mode, per my observation, it asks the root view controller to present a separate video view.

About the rotation animation, I think it may have to implement a custom animation for presentation and dismissal.

Multi-windows

The Youtube app is the app which implements multi-windows. To be more specific, I have seen 2 windows (not include the system windows):

  1. One window, I have brought up above, it is YTMainWindow
  2. The second window is the one which just contains the VR Video player.

Youtube - VR Mode

The second window appears in the scenario which you want to watch a video in VR-Mode.

Why do Youtube guys want to put the VR video player in a separate Window? Well, I don’t know the answer for now. Maybe it is just an experiment because The VR video player does not have complex navigation. Or it does this on purpose to support the external display (Learn more here)

Bonus, One benefit of using multi-windows is you have separate orientation on each Window by managing their orientation in the app delegate.

Continue…

Well, this post is long enough. I temporarily stop here. Hopefully, these details can help you understand the approaches Youtube guys has used to implement the app. These may be something helpful for your own case as well.

What’s next? I don’t know, but I’m gonna do some more experiments, so stay tuned.

 

One thought on “[iOS] Youtube – view layout and floating video player

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s