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 feedVC = VideoFeedViewController(source: .discover)
        feedVC.viewConfiguration = getVideoFeedContentConfiguration()
        feedVC.tabBarItem = UITabBarItem(title: "Videos", image: nil, selectedImage: nil)
        self.tabBarController?.viewControllers?.append(feedVC)
    }

    func pushFeedOnNavigationController() {
        let feedVC = VideoFeedViewController()
        feedVC.viewConfiguration = getVideoFeedContentConfiguration()
        self.navigationController?.pushViewController(feedVC, animated: true)
    }

    func embedFeedInViewController() {
        let feedVC = VideoFeedViewController()
        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 videoFeedView = VideoFeedView(source: .discover)
        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

struct ContentView: View {
    var body: some View {
        List {
            Spacer()
            VideoFeedSwiftUIView(
                source: .discover,
                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.

Picture in Picture (PiP)

This feature allows the user to watch media while the application is in a backgrounded state. While in background mode a video will display in a floating, resizable window.

To enable PiP functionality, you’ll need to add Background Modes capability via Signing & Capabilities in your project settings. More information about this can be found here: Apple Documentation

Once the background mode is enabled, moving from an active state to a background state will immediately trigger the Picture In Picture functionality. PictureInPictureController is responsible for handling all of this functionality. PictureInPictureController retains a strong reference of AVPictureInPictureController. AVPictureInPictureController is a controller that responds to user-initiated Picture in Picture playback of video in a floating, resizable window.

let feedVC = VideoFeedViewController(
     layout: VideoFeedHorizontalLayout(),
     source: source,
     adConfiguration: adConfiguration)
     pipViewControlelr = PictureInPictureController(videoFeed: feedVC)swi

Receive video feed events

1. Set the delegate

feedVC.delegate = self

2. 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
    }
}