How to add a smooth scrolling VOD feature to your iOS app in 15 minutes

This is a complete a step-by-step guide on Gcore’s solution for adding a new VOD feature to your iOS application in 15 minutes. The feature allows users to scroll and watch videos through the player on one screen with minimal preloading (like on TikTok).

Here is what the result will look like:

This is part of a series of guides about adding new video features to an iOS application. In other articles, we show you how to create a mobile streaming app on iOS, and how to add video call and VOD uploading features to an existing app.

What functions you can add with the help of this guide

The solution includes the following:

• List of AVPlayers: A virtual list of video players with a separate AVPlayer for each video
• Autoplay: Automatically start playback when scrolling by the video, and pause when scrolling further down the video
• Swipe: Support for swipe up and down gestures for switching between videos
• Preload in the background: An algorithm for preloading videos that the user has not yet scrolled to; this allows you to quickly start playback without buffering
• Adaptive bitrate playback: Preload videos in a quality that matches the user’s internet connection: low quality for a poor connection, high quality for a better connection, etc.

How to add the smooth scrolling VOD feature

Step 1. Authorization

You’ll need a Gcore account, which can be created in just 1 minute at gcore.com. You won’t need to pay anything; you can test the solution with a free plan.

To use Gcore services, you’ll need an access token, which comes in the server’s response to the authentication request. Here’s how to get it:

1. Create a model that will come from the server.

struct Tokens: Decodable {     let refresh: String     let access: String }

2. Create a common protocol for requests.

protocol DataRequest {     associatedtype Response          var url: String { get }     var method: HTTPMethod { get }     var headers: [String : String] { get }     var queryItems: [String : String] { get }     var body: Data? { get }     var contentType: String { get }          func decode(_ data: Data) throws -> Response }  extension DataRequest where Response: Decodable {     func decode(_ data: Data) throws -> Response {         let decoder = JSONDecoder()         return try decoder.decode(Response.self, from: data)     } }  extension DataRequest {     var contentType: String { "application/json" }     var headers: [String : String] { [:] }     var queryItems: [String : String] { [:] }     var body: Data? { nil } }

3. Create an authentication request.

struct AuthenticationRequest: DataRequest {     typealias Response = Tokens          let username: String     let password: String          var url: String { GсoreAPI.authorization.rawValue }     var method: HTTPMethod { .post }          var body: Data? {        try? JSONEncoder().encode([         "password": password,         "username": username,        ])     } }

4. Then you can use the request in any part of the application, using your preferred approach for your internet connection. For example:

func signOn(username: String, password: String) {         let request = AuthenticationRequest(username: username, password: password)         let communicator = HTTPCommunicator()                  communicator.request(request) { [weak self] result in             switch result {             case .success(let tokens):                  Settings.shared.refreshToken = tokens.refresh                 Settings.shared.accessToken = tokens.access                 Settings.shared.username = username                 Settings.shared.userPassword = password                 DispatchQueue.main.async {                     self?.view.window?.rootViewController = MainController()                 }             case .failure(let error):                 self?.errorHandle(error)             }         }     }

Step 2. Getting a video

After you receive the access token, you need to use it to get a list of videos. To do this, create another request:

struct VODRequest: DataRequest {     typealias Response = [VOD]          let token: String     let page: Int          var url: String { GcoreAPI.videos.rawValue }     var method: HTTPMethod { .get }          var headers: [String: String] {         [ "Authorization" : "Bearer \(token)" ]     }          var queryItems: [String: String] {         [             "q[status_eq]": String(3), // It is used to download only ready-to-watch videos             "page": String(page),         ]     } }

In the response, an array of videos will come from the server; the limit for a page is 25 videos.

Step 3. UI

VOD data view

We will use the tableNode from AsyncDisplayKit, it will take over most of the work on displaying and downloading videos, and caching. But to display the VOD data (name, ID), we will use an additional View over the table Cell.

1. Create VODDataView.

final class VODDataView: UIView {     private let nameLabel = UILabel()     private let idLabel = UILabel()      override init(frame: CGRect) {         super.init(frame: frame)         setupView()     }      required init?(coder: NSCoder) {         super.init(coder: coder)         setupView()     }      func setupData(with vod: VOD) {         nameLabel.text = "Name: \(vod.name)"         idLabel.text = "ID: \(vod.id)"                  [nameLabel, idLabel].forEach {             $0.widthAnchor.constraint(equalToConstant: $0.intrinsicContentSize.width + 20).isActive = true             $0.heightAnchor.constraint(equalToConstant: $0.intrinsicContentSize.height + 10).isActive = true         }     } }

2. Create init layout for the view.

     private func setupView() {         backgroundColor = .clear         isUserInteractionEnabled = false          [nameLabel, idLabel].forEach {             $0.translatesAutoresizingMaskIntoConstraints = false             $0.textColor = .white             $0.backgroundColor = .darkGray             $0.font = .systemFont(ofSize: 17)             $0.clipsToBounds = true             $0.layer.cornerRadius = 15             $0.textAlignment = .center         }          let stackView = UIStackView(arrangedSubviews: [nameLabel, idLabel])         stackView.axis = .vertical         stackView.alignment = .leading         stackView.distribution = .fill         stackView.spacing = 10          stackView.translatesAutoresizingMaskIntoConstraints = false         addSubview(stackView)          NSLayoutConstraint.activate([             stackView.leftAnchor.constraint(equalTo: leftAnchor, constant: 30),             stackView.rightAnchor.constraint(lessThanOrEqualTo: rightAnchor, constant: -20),             stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -30)         ])     }

3. Create a custom node cell. AVPlayer will be connected to each cell, which creates a list of players, adding a variable for autoplay.

import Foundation import AsyncDisplayKit  final class VODSmoothCell: ASCellNode {     var data: VOD      var playerNode: ASVideoPlayerNode      var isShouldPlay = false {         didSet { checkPlayerState(playerNode.playerState) }     }      init(data: VOD) {         self.data = data         playerNode = ASVideoPlayerNode(url: data.hls!)         super.init()          playerNode.placeholderImageURL = data.screenshot         playerNode.delegate = self         playerNode.gravity = AVLayerVideoGravity.resizeAspect.rawValue          DispatchQueue.main.async { [weak self] in             guard let self = self, let hls = data.hls else { return }             self.playerNode.asset = AVAsset(url: hls)              let dataView = VODDataView()             dataView.setupData(with: data)             dataView.frame = self.view.bounds              self.view.addSubview(dataView)             self.view.backgroundColor = .black         }          addSubnode(playerNode)     } }

4. Add layout for the node cell:

    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {         ASInsetLayoutSpec(insets: .zero, child: playerNode)     }

5. Subscribe to ASVideoNodeDelegate in order to catch the events of the player.

extension VODSmoothCell: ASVideoPlayerNodeDelegate {     func videoPlayerNode(_ videoPlayer: ASVideoPlayerNode, willChangeVideoNodeState state: ASVideoNodePlayerState, toVideoNodeState toState: ASVideoNodePlayerState) {         if toState == .paused && isShouldPlay {             checkPlayerState(.unknown)         } else {             checkPlayerState(toState)         }     } }

6. Add a method to start/pause the player.

private func checkPlayerState(_ state: ASVideoNodePlayerState) {     switch state {     case .playbackLikelyToKeepUpButNotPlaying, .paused:          if isShouldPlay {             playerNode.play()         }     case .playing:         if !isShouldPlay {             playerNode.pause()         }     default:         break     } }

MainView

Create the main view for the module. To display different screen states, we will use enumeration.

1. Add a table view that will swipe the cells.

final class SmoothScrollingMainView: UIView {     enum State {         case proccess, empty, content     }          weak var delegate: SmoothScrollingMainViewDelegate?          var state: State = .proccess {         didSet {             switch state {             case .empty: showEmptyState()             case .proccess: showProccessState()             case .content: showContentState()             }         }     }      lazy var tableView: ASTableNode = {         let table = ASTableNode(style: .plain)         table.view.isPagingEnabled = true         table.view.separatorColor = .clear         table.view.backgroundColor = .black         return table     }()          private let indicatorView: UIActivityIndicatorView = {         let view = UIActivityIndicatorView()         view.color = .grey800         view.transform = .init(scaleX: 2, y: 2)         view.hidesWhenStopped = false         view.startAnimating()         return view     }()          private let emptyView = EmptyStateView()      override init(frame: CGRect) {         super.init(frame: frame)         setupView()     }          required init?(coder: NSCoder) {         super.init(coder: coder)         setupView()     }          private func setupView() {         emptyView.delegate = self         initLayout()     } }

2. Implement methods that will change the screen state.

    private func showContentState() {         indicatorView.isHidden = true         emptyView.isHidden = true         tableView.isHidden = false     }          private func showEmptyState() {         indicatorView.isHidden = true         emptyView.isHidden = false         tableView.isHidden = true     }          private func showProccessState() {         indicatorView.isHidden = false         emptyView.isHidden = true         tableView.isHidden = true     }

3. Create a method that will customize the layout.

    func initLayout() {         [tableView.view, indicatorView, emptyView].forEach {             $0.translatesAutoresizingMaskIntoConstraints = false             addSubview($0)         }          NSLayoutConstraint.activate([             tableView.view.topAnchor.constraint(equalTo: topAnchor),             tableView.view.leftAnchor.constraint(equalTo: leftAnchor),             tableView.view.rightAnchor.constraint(equalTo: rightAnchor),             tableView.view.bottomAnchor.constraint(equalTo: bottomAnchor),              emptyView.topAnchor.constraint(equalTo: topAnchor),             emptyView.bottomAnchor.constraint(equalTo: bottomAnchor),             emptyView.leftAnchor.constraint(equalTo: leftAnchor),             emptyView.rightAnchor.constraint(equalTo: rightAnchor),              indicatorView.centerXAnchor.constraint(equalTo: centerXAnchor),             indicatorView.centerYAnchor.constraint(equalTo: centerYAnchor)         ])     }

The result of the layout will look like this:

Controller

Create a controller that will contain the logic for displaying video and interacting with the server.

1. Create the SmoothScrollingController class and init properties and layout.

import UIKit import AVKit import AsyncDisplayKit  final class SmoothScrollingController: BaseViewController {     override var preferredStatusBarStyle: UIStatusBarStyle {         .lightContent     }      private let mainView = SmoothScrollingMainView()     private var isLoading = false      var data: [VOD] = []      private var currentPage = 1     private var lastCell: VODSmoothCell?      override func viewDidLoad() {         super.viewDidLoad()         view.addSubview(mainView)          let statusBarView = UIView(frame: UIApplication.shared.statusBarFrame)         statusBarView.backgroundColor = .black         view.addSubview(statusBarView)          mainView.translatesAutoresizingMaskIntoConstraints = false         mainView.tableView.delegate = self         mainView.tableView.dataSource = self         mainView.state = .proccess          loadVOD(page: 1)          NSLayoutConstraint.activate([             mainView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),             mainView.leftAnchor.constraint(equalTo: view.leftAnchor),             mainView.rightAnchor.constraint(equalTo: view.rightAnchor),             mainView.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor),         ])     }      override func viewWillAppear(_ animated: Bool) {         super.viewWillAppear(animated)         tabBarController?.tabBar.barTintColor = .black     }      override func viewWillDisappear(_ animated: Bool) {         super.viewWillDisappear(animated)         tabBarController?.tabBar.barTintColor = .white     } }

2. Add a method for VOD downloading.

Due to HLS and access to various qualities, the player will play using the Adaptive Bitrate (ABR) playback.

    private func loadVOD(page: Int) {         guard !isLoading else { return }         isLoading = !isLoading              guard let token = Settings.shared.accessToken else {             refreshToken()             return         }                  if mainView.state == .empty {             mainView.state = .proccess         }          let http = HTTPCommunicator()         let requst = VODRequest(token: token, page: page)          http.request(requst) { [weak self] result in             guard let self = self else { return }                          DispatchQueue.main.async {                 defer { self.isLoading = !self.isLoading }                  switch result {                 case .failure(let error):                     if let error = error as? ErrorResponse, error == .invalidToken {                         Settings.shared.accessToken = nil                         self.refreshToken()                     } else {                         self.errorHandle(error)                     }                  case .success(let vodArray):                      var newVOD: [VOD] = []                     vodArray.forEach { loadedVod in                         if !self.data.contains(where: { $0.id == loadedVod.id }) {                             newVOD += [loadedVod]                         }                     }                                          guard !self.data.isEmpty || !newVOD.isEmpty else {                         self.mainView.state = .empty                         return                     }                      if !newVOD.isEmpty {                         self.data += newVOD                         self.mainView.tableView.reloadData()                     }                      if self.data.count == self.currentPage * 25 {                         self.currentPage += 1                     }                      self.mainView.state = .content                                  }             }         }     }

Preloading in the background

Responsibility for preloading the video is shifted to TableNode. To do the preloading, you need to subscribe to the necessary protocols and transfer data to the cell.

Subscribe to the table node protocols.

extension SmoothScrollingController: ASTableDataSource {     func tableNode(_: ASTableNode, numberOfRowsInSection _: Int) -> Int {         data.count     }      func tableNode(_: ASTableNode, nodeBlockForRowAt indexPath: IndexPath) -> ASCellNodeBlock {         let vod = data[indexPath.row]         let cell = VODSmoothCell(data: vod)          if lastCell == nil {             lastCell = cell             cell.isShouldPlay = true         }          return {             return cell         }     } }  extension SmoothScrollingController: ASTableDelegate {     func tableNode(_: ASTableNode, constrainedSizeForRowAt _: IndexPath) -> ASSizeRange {         return ASSizeRangeMake(mainView.tableView.bounds.size)     }      func shouldBatchFetch(for _: ASTableNode) -> Bool {         return false     }      func tableNode(_: ASTableNode, willBeginBatchFetchWith context: ASBatchContext) {         loadVOD(page: currentPage)     }      func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {         let currentPage = Int(scrollView.contentOffset.y / scrollView.frame.size.height)         let indexPath = IndexPath(item: currentPage, section: 0)                 guard let currentCell = mainView.tableView.nodeForRow(at: indexPath) as? VODSmoothCell, currentCell != lastCell else { return }          // load new page when we get the penultimate video          if data.count = currentPage * 25 && currentCell.indexPath?.row ?? 0 >= data.count - 2 {             loadVOD(page: currentPage)         }          // Here we will also switch the flag in order for the video to be played automatically.         lastCell?.isShouldPlay = false         currentCell.isShouldPlay = true         lastCell = currentCell     } }

And this was the last step; the job is done! The new feature has been added to your app and configured.

Result

By properly configuring all parts of your application and using Gcore services, you’ve provided your users with a convenient way to watch videos.

Developer notes

There was a problem with data management and VOD loading in the form of AJAX pagination. To resolve this, all the functionality was put into a separate entity that started a maximum of 60 VOD in RAM, and, if necessary, the prior or next videos were loaded.

All the necessary code is provided in the project.

To perform video preload, we use the Texture framework. Besides preloading and saving videos, it also has several advantages:

It clears the cache itself, which prevents errors related to lack of memory;

It downloads and caches screenshots for videos by itself;

It takes all the display logic from the main thread, which beneficially affects the performance.

It is installed via cocoapods. You need to add this line to the podfile below your project:

pod "Texture"

Conclusion

Through this guide, you’ve learned how to add a smooth scrolling VOD feature to your iOS application. We hope this solution will satisfy your needs and delight your users with new options.

Also, we invite you to take a look at our demo application. You will see the result of setting up the VOD viewing for an iOS project.