Use modern design (iOS)

Use modern (v2) short video player

The host app can utilize the following code to enable the modern (v2) design for short videos.

FireworkVideoSDK.shortVideoPlayerDesignVersion = .v2

Use modern (v2) livestream player

The modern (v2) livestream player offers a more extensive feature set than the classic (v1) version. For instance, features such as Giveaway, Trivia Giveaway, and AI Copilot are available exclusively in the modern player, and are not supported in the classic player.

FireworkVideoSDK.livestreamPlayerDesignVersion = .v2

Customize the V2 product card

When the modern (v2) design is enabled, shoppable videos display the V2 product card. You can customize it via the productCardV2Configuration property on ProductInfoViewConfigurable.

First, set the FireworkVideoShoppingDelegate delegate:

FireworkVideoSDK.shopping.delegate = <FireworkVideoShoppingDelegate delegate>

Then implement the fireworkShopping(_:willDisplayProductInfo:forVideo:) method:

func fireworkShopping(
    _ fireworkShopping: FireworkVideoShopping,
    willDisplayProductInfo productInfoViewConfigurator: ProductInfoViewConfigurable,
    forVideo video: VideoDetails
) {
    var productCardV2Config = ProductCardV2Configuration()
    // Specifies the background color for the V2 video product card
    // If not set, the default gradient background will be applied
    productCardV2Config.backgroundColor = .white
    // Specifies the corner radius to be applied to the V2 video product card
    productCardV2Config.cornerRadius = 8
    // Specifies the border color of the V2 video product card
    productCardV2Config.borderConfiguration.color = UIColor.white.withAlphaComponent(0.7)

    // Specifies the label text color of product name
    productCardV2Config.nameLabel.textColor = .black

    // Specifies the label text color of price
    productCardV2Config.priceConfiguration.priceLabel.textColor = .black
    // Specifies the label text color of discount
    productCardV2Config.priceConfiguration.discountLabel.textColor = .red
    // Specifies the label text color of original price
    productCardV2Config.priceConfiguration.originalPriceLabel.textColor = .gray

    // Apply the V2 product card configuration
    productInfoViewConfigurator.productCardV2Configuration = productCardV2Config
}

For more shopping-related configurations, please refer to Shopping configurations (iOS).