This guide shows you how to create a smooth scrolling feed known from the popular short form video sharing App TikTok.
To build the perfect viewing experience for a feed full of reactive videos, you would want to avoid blocking any expensive operation on your main thread.
This mostly applies to UIs that implement infinite scrolls like the one you know from TikTok. This feed of neverending videos additionally contains images, animations and text and needs to stay responsive to touches at any time. Without proper thread handling scrolling through a UI like that can result in massive frame drops especially for older devices.
In accordance to this we are making use of the open source framework Texture. Built by Facebook, Textures uses
CALayer abstractions that are not blocking the main thread for UI layouts.
Texture’s basic unit is the node.
ASDisplayNodeis an abstraction over UIView, which in turn is an abstraction over
CALayer. Unlike views, which can only be used on the main thread, nodes are thread-safe: you can instantiate and configure entire hierarchies of them in parallel on background threads.
Another important part is the preloading/precaching of videos that are about to play if the user scrolls throgh the feed really quick.
For this reason, we are providing
VKPlayersManager. VKPlayersManager is a helper class responsible for fetching videos from our backend. It is also able to prepare them to be played instantly by initializing a video player view already.
Texture comes with a Table View (
ASTableNode) with paging functionality that makes it possible to re-create the vertical full screen video view from TikTok.
As you can see,
ASTableNode is able to preload the UI as shown in the figure in green. In addition to that, our
VKPlayersManager is additionally preparing a player instance to preload the corresponding video to show. The combination of Texture and VideoKit enables a non blocking instant display of videos in a fast scrolling feed:
Refer to our Getting Started Guide on how to install VideoKit into your project.
Import VideoKitPlayer and VideoKitcCore in your ViewController
Add the following code to your AppDelegates didFinishLaunchingWithOptions method.
Make sure that you enter the corresponding api token for your App taken from dashboard.video.io.
Create a new data source component that is responsible for retrieveing subsets of videos from video.io.
Add the following code to your main view controller.
Create a new class called VideoNode.
VideoNode is going to represent a table node playing the video for each post inside of the feed.
Our player node is in charge of playing the video in each table view cell using
VKPlayerViewController from VideoKit/Player.
If you prefer to take a look at the working project, here is the full project source code:Download Source