Player Deck (iOS) (Beta)

Display Player Deck

Use PlayerDeckView

The PlayerDeckView provides a UIView wrapper for the PlayerDeckFeedViewController.

Integration

1. Import FireworkVideo.

2. Instantiate PlayerDeckView and embed it.

The following are the sample codes:

import UIKit
import FireworkVideo

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

    func addPlayerDeckView() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let playerDeckView = PlayerDeckView(source: .channelPlaylist(channelID: channelID, playlistID: playlistID))
        playerDeckView.viewConfiguration = getPlayerDeckContentConfiguration()

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

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

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

Use PlayerDeckSwiftUIView(SwiftUI)

The PlayerDeckSwiftUIView provides a SwiftUI View wrapper for the PlayerDeckFeedViewController.

Integration

1. Import FireworkVideo.

2. Instantiate PlayerDeckSwiftUIView 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 playerDeckContainer = PlayerDeckSwiftUIContainer()
    var body: some View {
        List {
            Spacer()
            PlayerDeckSwiftUIView(
                source: .channelPlaylist(channelID: channelID, playlistID: playlistID),
                viewConfiguration: getPlayerDeckContentConfiguration(),
                isPictureInPictureEnabled: true,
                onPlayerDeckLoaded: {
                    debugPrint("Video feed loaded successfully.")
                },
                onPlayerDeckFailedToLoad: { error in
                    debugPrint("Video feed did fail loading.")
                }
            ).frame(height: 600)
            Button("Refresh") {
                playerDeckContainer.handler?.refresh()
            }
            Spacer()
        }
    }

    func getPlayerDeckContentConfiguration() -> PlayerDeckContentConfiguration {
        var viewConfiguration = PlayerDeckContentConfiguration()
        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

A PlayerDeckView or PlayerDeckSwiftUIView 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

playerDeckView.delegate = self

1. Conform to PlayerDeckFeedViewControllerDelegate protocol

func playerDeckFeedDidLoadFeed(_ viewController: PlayerDeckFeedViewController) {
    print(">>> Player deck feed load successfully")
}

func playerDeckFeed(_ viewController: PlayerDeckFeedViewController, didFailToLoadFeed error: VideoFeedError) {
    print(">>> Player deck feed did fail loading")
    if case .contentSourceError(let playerDeckContentSourceError) = error,
       case .emptyFeed = playerDeckContentSourceError {
        // This is a specific error.
        // SDK will trigger this error when the player deck is empty.
        // For example, host app can hide player deck for this error.
    } else {
        // Other error
    }
}

Viewport-based autoplay support

By default, autoplay is enabled, and the video begins playing as soon as the component is instantiated. However, when the component is embedded within a ScrollView, TableView, or CollectionView, a more seamless user experience is achieved by initiating autoplay only when the component enters the viewport, and pausing playback when it leaves.

Customization

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. However, you can further refine this viewport by specifying additionalViewportExcludedInset, which allows you to exclude additional custom insets. The final viewport is therefore determined by subtracting the combined insets of both the safe area and additionalViewportExcludedInset from the screen bounds.

func getPlayerDeckContentConfiguration() -> PlayerDeckContentConfiguration {
    var viewConfiguration = PlayerDeckContentConfiguration()
    // Add additional bottom inset
    viewConfig.additionalViewportExcludedInset = UIEdgeInsets(
        top: 0,
        left: 0,
        bottom: 50,
        right: 0
    )
    viewConfiguration.itemView.autoplay.triggerVisibilityPercentage = 100
    viewConfiguration.itemView.autoplay.isEnabled = true
    viewConfiguration.playerView.playbackButton.isHidden = false
    return viewConfiguration
}

Player Deck configurations

Please refer to Player Deck Configurations (iOS).

Player configurations

Please refer to Player configurations (iOS).