Video Feed (iOS)

Display Video Feed

Use VideoFeedViewController

Integration

1. Import FireworkVideo.

2. Create a new VideoFeedViewController.

3. Present, push or embed the instantiated VideoFeedViewController.

Important FireworkVideoSDK.inializedSDK() must be called before trying to use any Firework Video UI Components. It is advised to call this at app start to ensure proper functionality.

import UIKit
import FireworkVideo

class ViewController: UIViewController {

    func addFeedToTabBarController() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let feedVC = VideoFeedViewController(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
        feedVC.viewConfiguration = getVideoFeedContentConfiguration()
        feedVC.tabBarItem = UITabBarItem(title: "Videos", image: nil, selectedImage: nil)
        self.tabBarController?.viewControllers?.append(feedVC)
    }

    func pushFeedOnNavigationController() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let feedVC = VideoFeedViewController(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
        feedVC.viewConfiguration = getVideoFeedContentConfiguration()
        self.navigationController?.pushViewController(feedVC, animated: true)
    }

    func embedFeedInViewController() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let feedVC = VideoFeedViewController(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
        feedVC.viewConfiguration = getVideoFeedContentConfiguration()

        self.addChild(feedVC)

        feedVC.view.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(feedVC.view)
        NSLayoutConstraint.activate([
            feedVC.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            feedVC.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            feedVC.view.heightAnchor.constraint(equalToConstant: 240),
            feedVC.view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])

        feedVC.didMove(toParent: self)
    }
    
    func getVideoFeedContentConfiguration() -> VideoFeedContentConfiguration {
        var viewConfiguration = VideoFeedContentConfiguration()
        viewConfiguration.itemView.autoplay.isEnabled = true
        viewConfiguration.playerView.playbackButton.isHidden = false
        return viewConfiguration
    }
}

Use VideoFeedView

The VideoFeedView provides a UIView wrapper for the FireworkVideo.VideoFeedViewController. You can customize the VideoFeedView just like the FireworkVideo.VideoFeedViewController.

Integration

1. Follow the instruction to install FireworkVideoUI.

2. Import FireworkVideo and FireworkVideoUI.

3. Instantiate VideoFeedView and embed it.

The following are the sample codes:

import UIKit
import FireworkVideo
import FireworkVideoUI

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.addVideoFeedView()
    }

    func addVideoFeedView() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let videoFeedView = VideoFeedView(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
        videoFeedView.viewConfiguration = getVideoFeedContentConfiguration()

        videoFeedView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(videoFeedView)

        NSLayoutConstraint.activate([
            videoFeedView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            videoFeedView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            videoFeedView.heightAnchor.constraint(equalToConstant: 240),
            videoFeedView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
    }

    func getVideoFeedContentConfiguration() -> VideoFeedContentConfiguration {
        var viewConfiguration = VideoFeedContentConfiguration()
        viewConfiguration.itemView.autoplay.isEnabled = true
        viewConfiguration.playerView.playbackButton.isHidden = false
        return viewConfiguration
    }
}

Use VideoFeedSwiftUIView(SwiftUI)

The VideoFeedSwiftUIView provides a SwiftUI View wrapper for the FireworkVideo.VideoFeedViewController. You can customize the VideoFeedSwiftUIView just like the FireworkVideo.VideoFeedViewController.

Integration

1. Follow the instruction to install FireworkVideoUI.

2. Import FireworkVideo and FireworkVideoUI.

3. Instantiate VideoFeedSwiftUIView and embed it.

The following are the sample codes:

import SwiftUI
import FireworkVideo
import FireworkVideoUI

let channelID = "<Encoded Channel ID>"
let playlistID = "<Encoded Playlist ID>"

struct ContentView: View {
    var body: some View {
        List {
            Spacer()
            VideoFeedSwiftUIView(
                source: .channelPlaylist(channelID: channelID, playlistID: playlistID),
                viewConfiguration: getVideoFeedContentConfiguration(),
                isPictureInPictureEnabled: true,
                onVideoFeedLoaded: {
                    debugPrint("Video feed loaded successfully.")
                },
                onVideoFeedFailedToLoad: { error in
                    debugPrint("Video feed did fail loading.")
                }
            ).frame(height: 240)
            Spacer()
        }
    }

    func getVideoFeedContentConfiguration() -> VideoFeedContentConfiguration {
        var viewConfiguration = VideoFeedContentConfiguration()
        viewConfiguration.itemView.autoplay.isEnabled = true
        viewConfiguration.playerView.playbackButton.isHidden = false
        return viewConfiguration
    }
}

Custom Call-To-Action Button Handling

Custom Call-To-Action button handling is done via the FireworkVideoCTADelegate protocol. This provides control over what occurs when a call-to-action button is tapped.

1. Set the delegate:

FireworkVideoSDK.ctaDelegate = self

2. Conform to protocol:

func handleCustomCTAClick(_ viewController: PlayerViewController, url: URL, for video: VideoDetails) -> Bool {
    // Your custom action code here...
    return true
}

Force Refresh

A VideoFeedViewController can be forced to refreshed by calling the refresh() method on the instance that should be refreshed. This functionality is useful if your feed is embedded along with other components that are also updated and you support features like pull to refresh.

Receive video feed events

1. Set the delegate

feedVC.delegate = self

1. Conform to VideoFeedViewControllerDelegate protocol

func videoFeedDidLoadFeed(
    _ viewController: VideoFeedViewController
) {
    debugPrint("Video feed loaded successfully.")
}

func videoFeed(
    _ viewController: VideoFeedViewController,
    didFailToLoadFeed error: VideoFeedError
) {
    debugPrint("Video feed did fail loading.")
    if case .contentSourceError(let feedContentSourceError) = error,
       case .emptyFeed = feedContentSourceError {
        // This is a specific error.
        // SDK will trigger this error when the feed is empty.
        // For example, this error will be triggered when loading an empty playlist.
    } else {
        // Other error
    }
}

Video feed configurations

Please refer to Video feed configurations (iOS).

Player configurations

Please refer to Player configurations (iOS).