Video Feed (iOS)

Display Video Feed

Use FWSVideoFeedView

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

Integration

1. Import FireworkVideo.

2. Instantiate FWSVideoFeedView and embed it.

The following are the sample codes:

import UIKit
import FireworkVideo

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

    func addVideoFeedView() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let videoFeedView = FWSVideoFeedView(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 FWSVideoFeedSwiftUIView(SwiftUI)

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

Integration

1. Import FireworkVideo.

2. Instantiate FWSVideoFeedSwiftUIView and embed it.

The following are the sample codes:

import SwiftUI
import FireworkVideo

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

struct ContentView: View {
    let videoFeedContainer = FWSVideoFeedSwiftUIContainer()
    var body: some View {
        List {
            Spacer()
            FWSVideoFeedSwiftUIView(
                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)
            Button("Refresh") {
                videoFeedContainer.handler?.refresh()
            }
            Spacer()
        }
    }

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

Content Source

Please refer to Video Feed Content Source (iOS).

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

You can force a VideoFeedViewController to reload its content by calling the refresh() method on the instance you want to update. This is useful when your feed is embedded alongside other components that refresh together, or when 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, host app can hide video feed for this error.
    } else {
        // Other error
    }
}

Receive onVideosLoaded callback

The onVideosLoaded closure is called whenever videos are loaded into the video feed, including the initial page and every subsequent page loaded via pagination. The closure receives a VideoFeedVideosLoadedInfo value whose videos property contains the [VideoDetails] that were loaded for that page.

Use FWSVideoFeedView

onVideosLoaded is exposed as a property on FWSVideoFeedView:

let videoFeedView = FWSVideoFeedView(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
videoFeedView.onVideosLoaded = { info in
    debugPrint("Loaded \(info.videos.count) videos.")
    for video in info.videos {
        debugPrint("Video ID: \(video.id)")
    }
}

Use FWSVideoFeedSwiftUIView(SwiftUI)

onVideosLoaded is exposed as an initializer parameter on FWSVideoFeedSwiftUIView:

FWSVideoFeedSwiftUIView(
    source: .channelPlaylist(channelID: channelID, playlistID: playlistID),
    viewConfiguration: getVideoFeedContentConfiguration(),
    isPictureInPictureEnabled: true,
    onVideosLoaded: { info in
        debugPrint("Loaded \(info.videos.count) videos.")
        for video in info.videos {
            debugPrint("Video ID: \(video.id)")
        }
    }
).frame(height: 240)

Autoplay

Autoplay lets the video feed automatically start playing the first eligible item without requiring user interaction. To enable it, set:

viewConfiguration.itemView.autoplay.isEnabled = true

All behavior described below assumes this prerequisite is met. Which item is picked as "eligible" depends on the visibility threshold (viewConfiguration.itemView.autoplay.triggerVisibilityPercentage) and on whether viewport-based autoplay is turned on (useSafeAreaViewport).

Container-based autoplay (default)

When useSafeAreaViewport = false (the default), visibility is measured against the feed component's own bounds:

• Autoplay is active whenever the component is at least partially on screen, and inactive when the component is fully off-screen.

• While active, the first item whose visibility within the component's bounds is greater than or equal to triggerVisibilityPercentage starts playing automatically.

Viewport-based autoplay

When the component is embedded in a ScrollView, TableView, or CollectionView, you can opt into viewport-based autoplay by setting useSafeAreaViewport = true on FWSVideoFeedView or FWSVideoFeedSwiftUIView. In this mode, visibility is measured against the viewport rather than the component's own bounds:

• The first item whose visibility within the viewport is greater than or equal to triggerVisibilityPercentage starts playing automatically.

• The viewport itself is customizable via safeAreaEdges and additionalViewportExcludedInset (see below).

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

Customize viewport

The default viewport is defined as the screen bounds minus the safe area insets—such as the status bar, top navigation bar, bottom tab bar, and bottom home indicator.

/// Default Viewport = Screen - Top Safe Area - Bottom Safe Area
/// 
/// Screen (Full Device Screen)
/// ┌─────────────────────────┐ ← Screen Top
/// │   Status Bar            │ ← Safe Area (excluded)
/// ├─────────────────────────┤
/// │   Navigation Bar        │ ← Safe Area (excluded, if present)
/// ├─────────────────────────┤
/// │                         │
/// │                         │
/// │   Default Viewport      │ ← Visible content area
/// │   (Visible Content)     │    (Screen - Safe Area)
/// │                         │
/// │                         │
/// ├─────────────────────────┤
/// │   Tab Bar               │ ← Safe Area (excluded, if present)
/// ├─────────────────────────┤
/// │   Home Indicator        │ ← Safe Area (excluded)
/// └─────────────────────────┘ ← Screen Bottom

However, you can further refine this viewport by specifying safeAreaEdges and additionalViewportExcludedInset. Please refer to the following code snippets for more details.

viewConfiguration.useSafeAreaViewport = true
/// Viewport Configuration:
/// 
/// With the configuration below, the viewport is calculated as:
/// Viewport = Screen - Top Safe Area - 50pt Bottom Padding
/// 
/// Visual Layout:
/// ┌─────────────────────────┐
/// │ Status Bar              │ \
/// ├─────────────────────────┤  > Excluded (safeAreaEdges = .top)
/// │ Nav Bar (if present)    │ /
/// ╞═════════════════════════╡ ← Viewport Top
/// │                         │
/// │   Viewport Area         │ ← Content visible here
/// │                         │
/// ╞═════════════════════════╡ ← Viewport Bottom
/// │ 50pt bottom padding     │ ← Excluded (additionalViewportExcludedInset.bottom)
/// └─────────────────────────┘
/// 
viewConfiguration.safeAreaEdges = .top
viewConfiguration.additionalViewportExcludedInset = UIEdgeInsets(
    top: 0,
    left: 0,
    bottom: 50,
    right: 0
)

Video feed configurations

Please refer to Video feed configurations (iOS).

Player configurations

Please refer to Player configurations (iOS).