react-native-firework-sdk 2.4.2 → 2.5.0

package/FireworkVideoUI.xcframework/Info.plist

@@ -6,30 +6,30 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>FireworkVideoUI.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>FireworkVideoUI.framework</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/FireworkVideoUI.xcframework/ios-arm64_x86_64-simulator/FireworkVideoUI.framework/_CodeSignature/CodeResources

@@ -14,7 +14,7 @@
 		</data>
 		<key>Info.plist</key>
 		<data>
-		85EsI3LO/3Cyvsf61nuxOhuVZjY=
+		nH1fSyWMkZZfhrpMBpFPHfKmzYA=
 		</data>
 		<key>Modules/FireworkVideoUI.swiftmodule/arm64-apple-ios-simulator.abi.json</key>
 		<data>

package/android/src/main/java/com/fireworksdk/bridge/models/FWProductInfoViewConfiguration.kt

@@ -1,10 +1,13 @@
 package com.fireworksdk.bridge.models
 
 import com.fireworksdk.bridge.models.enums.FWCtaButtonTextValue
+import com.fireworksdk.bridge.models.enums.FWProductCardCtaButtonTextValue
+import com.fireworksdk.bridge.models.enums.FWProductCardTheme
 
 data class FWProductInfoViewConfiguration(
   val ctaButton: CtaButtonConfiguration? = null,
   val linkButton: LinkButtonConfiguration? = null,
+  val productCard: ProductCardConfiguration? = null,
 ) {
 
   data class CtaButtonConfiguration(
@@ -17,4 +20,9 @@ data class FWProductInfoViewConfiguration(
   data class LinkButtonConfiguration(
     val isHidden: Boolean? = null,
   )
+
+  data class ProductCardConfiguration(
+    val ctaButtonText: FWProductCardCtaButtonTextValue? = null,
+    val theme: FWProductCardTheme? = null,
+  )
 }

package/android/src/main/java/com/fireworksdk/bridge/models/FWProductInfoViewConfigurationDeserializer.kt

@@ -1,12 +1,15 @@
 package com.fireworksdk.bridge.models
 
 import com.fireworksdk.bridge.models.enums.FWCtaButtonTextValue
+import com.fireworksdk.bridge.models.enums.FWProductCardCtaButtonTextValue
+import com.fireworksdk.bridge.models.enums.FWProductCardTheme
 import org.json.JSONObject
 
 object FWProductInfoViewConfigurationDeserializer {
 
-  private const val CTA_BUTTON = "ctaButton"
-  private const val LINK_BUTTON = "linkButton"
+  private const val CTA_BUTTON_KEY = "ctaButton"
+  private const val LINK_BUTTON_KEY = "linkButton"
+  private const val PRODUCT_CARD_KEY = "productCard"
 
   private const val TEXT_KEY = "text"
   private const val BACKGROUND_COLOR_KEY = "backgroundColor"
@@ -15,15 +18,20 @@ object FWProductInfoViewConfigurationDeserializer {
 
   private const val IS_HIDDEN_KEY = "isHidden"
 
+  private const val CTA_BUTTON_TEXT_KEY = "ctaButtonText"
+  private const val THEME_KEY = "theme"
+
   fun deserialize(responseJson: JSONObject?): FWProductInfoViewConfiguration? {
     responseJson ?: return null
 
-    val ctaButtonConfiguration = deserializeCtaButtonConfiguration(responseJson.optJSONObject(CTA_BUTTON))
-    val linkButtonConfiguration = deserializeLinkButtonConfiguration(responseJson.optJSONObject(LINK_BUTTON))
+    val ctaButtonConfiguration = deserializeCtaButtonConfiguration(responseJson.optJSONObject(CTA_BUTTON_KEY))
+    val linkButtonConfiguration = deserializeLinkButtonConfiguration(responseJson.optJSONObject(LINK_BUTTON_KEY))
+    val productCardConfiguration = deserializeProductCardConfiguration(responseJson.optJSONObject(PRODUCT_CARD_KEY))
 
     return FWProductInfoViewConfiguration(
       ctaButton = ctaButtonConfiguration,
       linkButton = linkButtonConfiguration,
+      productCard = productCardConfiguration,
     )
   }
 
@@ -36,7 +44,7 @@ object FWProductInfoViewConfigurationDeserializer {
     val fontSize = if (ctaButtonConfiguration.has(FONT_SIZE_KEY)) ctaButtonConfiguration.optInt(FONT_SIZE_KEY) else null
 
     return FWProductInfoViewConfiguration.CtaButtonConfiguration(
-      text = FWCtaButtonTextValue.deserialize(textString ?: FWCtaButtonTextValue.AddToCart.rawValue),
+      text = FWCtaButtonTextValue.deserialize(textString),
       backgroundColor = backgroundColor,
       textColor = textColor,
       fontSize = fontSize,
@@ -53,4 +61,16 @@ object FWProductInfoViewConfigurationDeserializer {
     )
   }
 
+  private fun deserializeProductCardConfiguration(productCardConfigJson: JSONObject?): FWProductInfoViewConfiguration.ProductCardConfiguration {
+    productCardConfigJson ?: return FWProductInfoViewConfiguration.ProductCardConfiguration()
+
+    val ctaButtonTextString = if (productCardConfigJson.has(CTA_BUTTON_TEXT_KEY)) productCardConfigJson.optString(CTA_BUTTON_TEXT_KEY) else null
+    val themeString = if (productCardConfigJson.has(THEME_KEY)) productCardConfigJson.optString(THEME_KEY) else null
+
+    return FWProductInfoViewConfiguration.ProductCardConfiguration(
+      ctaButtonText = FWProductCardCtaButtonTextValue.deserialize(ctaButtonTextString),
+      theme = FWProductCardTheme.deserialize(themeString),
+    )
+  }
+
 }

package/android/src/main/java/com/fireworksdk/bridge/models/FWProductInfoViewConfigurationSerializer.kt

@@ -5,8 +5,9 @@ import org.json.JSONObject
 
 object FWProductInfoViewConfigurationSerializer {
 
-  private const val CTA_BUTTON = "ctaButton"
-  private const val LINK_BUTTON = "linkButton"
+  private const val CTA_BUTTON_KEY = "ctaButton"
+  private const val LINK_BUTTON_KEY = "linkButton"
+  private const val PRODUCT_CARD_KEY = "productCard"
 
   private const val TEXT_KEY = "text"
   private const val BACKGROUND_COLOR_KEY = "backgroundColor"
@@ -15,11 +16,15 @@ object FWProductInfoViewConfigurationSerializer {
 
   private const val IS_HIDDEN_KEY = "isHidden"
 
+  private const val CTA_BUTTON_TEXT_KEY = "ctaButtonText"
+  private const val THEME_KEY = "theme"
+
   fun serialize(model: FWProductInfoViewConfiguration?): JSONObject? {
     model ?: return null
     val jsonObject = JSONObject()
-    jsonObject.put(CTA_BUTTON, serializeCtaButtonConfiguration(model.ctaButton))
-    jsonObject.put(LINK_BUTTON, serializeLinkButtonConfiguration(model.linkButton))
+    jsonObject.put(CTA_BUTTON_KEY, serializeCtaButtonConfiguration(model.ctaButton))
+    jsonObject.put(LINK_BUTTON_KEY, serializeLinkButtonConfiguration(model.linkButton))
+    jsonObject.put(PRODUCT_CARD_KEY, serializeProductCardConfiguration(model.productCard))
     return jsonObject
   }
 
@@ -39,4 +44,12 @@ object FWProductInfoViewConfigurationSerializer {
     jsonObject.put(IS_HIDDEN_KEY, model.isHidden)
     return jsonObject
   }
+
+  private fun serializeProductCardConfiguration(model: FWProductInfoViewConfiguration.ProductCardConfiguration?): JSONObject? {
+    model ?: return null
+    val jsonObject = JSONObject()
+    jsonObject.put(CTA_BUTTON_TEXT_KEY, model.ctaButtonText)
+    jsonObject.put(THEME_KEY, model.theme)
+    return jsonObject
+  }
 }

package/android/src/main/java/com/fireworksdk/bridge/models/FWVideoFeedPropsModel.kt

@@ -10,6 +10,7 @@ data class FWVideoFeedPropsModel(
   val playlistGroup: String? = null,
   val hashtagFilterExpression: String? = null,
   val productIds: List<String>? = null,
+  val contentId: String? = null,
   val shareUrl: String? = null,
   val mode: FWVideoFeedMode? = null,
   val videoFeedConfiguration: FWVideoFeedConfigModel? = null,

package/android/src/main/java/com/fireworksdk/bridge/models/FWVideoFeedPropsModelDeserializer.kt

@@ -12,6 +12,7 @@ object FWVideoFeedPropsModelDeserializer {
   private const val PLAYLIST_GROUP_KEY = "playlistGroup"
   private const val HASHTAG_FILTER_EXPRESSION_KEY = "hashtagFilterExpression"
   private const val PRODUCT_IDS_KEY = "productIds"
+  private const val CONTENT_ID_KEY = "contentId"
   private const val SHARE_URL_KEY = "shareUrl"
   private const val MODE_KEY = "mode"
   private const val MARGIN_RIGHT_KEY = "marginRight"
@@ -43,6 +44,8 @@ object FWVideoFeedPropsModelDeserializer {
       productIds = list
     }
 
+    val contentId = if (responseJson.has(CONTENT_ID_KEY)) responseJson.optString(CONTENT_ID_KEY) else null
+
     val shareUrl = if (responseJson.has(SHARE_URL_KEY)) responseJson.optString(SHARE_URL_KEY) else null
     val mode = if (responseJson.has(MODE_KEY)) responseJson.optString(MODE_KEY) else null
 
@@ -86,6 +89,7 @@ object FWVideoFeedPropsModelDeserializer {
       playlistGroup = playlistGroup,
       hashtagFilterExpression = hashtagFilterExpression,
       productIds = productIds,
+      contentId = contentId,
       shareUrl = shareUrl,
       mode = if (!mode.isNullOrBlank()) FWVideoFeedMode.deserialize(mode) else null,
       videoFeedConfiguration = videoFeedConfiguration,

package/android/src/main/java/com/fireworksdk/bridge/models/FWVideoFeedPropsModelSerializer.kt

@@ -13,6 +13,7 @@ object FWVideoFeedPropsModelSerializer {
   private const val PLAYLIST_GROUP_KEY = "playlistGroup"
   private const val HASHTAG_FILTER_EXPRESSION_KEY = "hashtagFilterExpression"
   private const val PRODUCT_IDS_KEY = "productIds"
+  private const val CONTENT_ID_KEY = "contentId"
   private const val SHARE_URL_KEY = "shareUrl"
   private const val MODE_KEY = "mode"
   private const val MARGIN_RIGHT_KEY = "marginRight"
@@ -39,6 +40,7 @@ object FWVideoFeedPropsModelSerializer {
       jsonObject.put(PRODUCT_IDS_KEY, productIdJsonArray)
     }
 
+    jsonObject.put(CONTENT_ID_KEY, model.contentId)
     jsonObject.put(SHARE_URL_KEY, model.shareUrl)
     jsonObject.put(MODE_KEY, FWVideoFeedMode.serialize(model.mode))
     jsonObject.put(VIDEO_FEED_CONFIGURATION_KEY, FWVideoFeedConfigModelSerializer.serialize(model.videoFeedConfiguration))

package/android/src/main/java/com/fireworksdk/bridge/models/enums/FWProductCardCtaButtonTextValue.kt

@@ -0,0 +1,18 @@
+package com.fireworksdk.bridge.models.enums
+
+enum class FWProductCardCtaButtonTextValue(val rawValue: String) {
+  ShopNow("shopNow"),
+  BuyNow("buyNow");
+
+  companion object {
+    fun deserialize(rawValue: String?): FWProductCardCtaButtonTextValue? {
+      rawValue ?: return null
+      return values().first { it.rawValue == rawValue }
+    }
+
+    fun serialize(model: FWProductCardCtaButtonTextValue?): String? {
+      model ?: return null
+      return model.rawValue
+    }
+  }
+}

package/android/src/main/java/com/fireworksdk/bridge/models/enums/FWProductCardTheme.kt

@@ -0,0 +1,18 @@
+package com.fireworksdk.bridge.models.enums
+
+enum class FWProductCardTheme(val rawValue: String) {
+  Dark("dark"),
+  Light("light");
+
+  companion object {
+    fun deserialize(rawValue: String?): FWProductCardTheme? {
+      rawValue ?: return null
+      return values().first { it.rawValue == rawValue }
+    }
+
+    fun serialize(model: FWProductCardTheme?): String? {
+      model ?: return null
+      return model.rawValue
+    }
+  }
+}

package/android/src/main/java/com/fireworksdk/bridge/models/enums/FWVideoFeedSource.kt

@@ -8,7 +8,8 @@ enum class FWVideoFeedSource(val rawValue: String) {
   PlaylistGroup("playlistGroup"),
   HashtagPlaylist("hashtagPlaylist"),
   Sku("sku"),
-  ShareUrl("shareUrl");
+  ShareUrl("shareUrl"),
+  SingleContent("singleContent");
 
   companion object {
     fun deserialize(rawValue: String?): FWVideoFeedSource? {

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWStoryBlockManager.kt

@@ -107,6 +107,13 @@ class FWStoryBlockManager : ViewGroupManager<StoryBlockFrameLayout>() {
     )
   }
 
+  @ReactProp(name = "contentId")
+  fun setContentId(view: StoryBlockFrameLayout, contentId: String?) {
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      contentId = contentId
+    )
+  }
+
   @ReactProp(name = "shareUrl")
   fun setShareUrl(view: StoryBlockFrameLayout, shareUrl: String?) {
     view.videoFeedPropsModel = view.videoFeedPropsModel.copy(

package/android/src/main/java/com/fireworksdk/bridge/reactnative/manager/FWVideoFeedManager.kt

@@ -91,6 +91,13 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     )
   }
 
+  @ReactProp(name = "contentId")
+  fun setContentId(view: FWVideoFeed, contentId: String?) {
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      contentId = contentId
+    )
+  }
+
   @ReactProp(name = "shareUrl")
   fun setShareUrl(view: FWVideoFeed, shareUrl: String?) {
     view.videoFeedPropsModel = view.videoFeedPropsModel.copy(

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FWVideoShoppingModule.kt

@@ -151,7 +151,7 @@ class FWVideoShoppingModule(
 
     FireworkSdk.shopping.setShoppingViewOptions(
       ShoppingViewOptions(
-        ProductDetailsOptions(
+        productDetailsOptions = ProductDetailsOptions(
           linkButtonOptions = LinkButtonOptions(isVisible = !isLinkButtonHidden),
           shoppingCtaButtonOptions = ShoppingCtaButtonOptions(text = text),
         ),

package/android/src/main/java/com/fireworksdk/bridge/reactnative/module/FireworkSDKModule.kt

@@ -51,6 +51,8 @@ class FireworkSDKModule(
    */
   @ReactMethod
   override fun init(config: ReadableMap?, promise: Promise) {
+    FWColorUtil.useRgba = true
+
     val configMap = config?.toHashMap() ?: hashMapOf()
     val jsonObject = JSONObject(configMap)
     val sdkInitOptionsModel = FWSDKInitOptionsModelDeserializer.deserialize(jsonObject)

package/android/src/main/java/com/fireworksdk/bridge/utils/FWColorUtil.kt

@@ -0,0 +1,65 @@
+package com.fireworksdk.bridge.utils
+
+import android.graphics.Color
+
+object FWColorUtil {
+
+  /**
+   * android system default: argb
+   */
+  var useRgba: Boolean = false
+
+  /**
+   * color:
+   * #FF3A86FF, #3A86FF
+   * 0xFF3A86FF, 0XFF3A86FF, 0x3A86FF, 0X3A86FF
+   */
+  fun parseColor(color: String): Int {
+    return when {
+      color.startsWith("0x") || color.startsWith("0X") -> {
+        parseIntColor(color)
+      }
+
+      else -> {
+        parseHashtagColor(color)
+      }
+    }
+  }
+
+  /**
+   * color: #FF3A86FF, #3A86FF
+   */
+  private fun parseHashtagColor(color: String): Int {
+
+    if (useRgba) {
+      when (color.length) {
+        9 -> {
+          val argbStr = color.substring(0, 1) + color.substring(7, 9) + color.substring(1, 7)
+          return Color.parseColor(argbStr)
+        }
+        else -> {}
+      }
+    }
+
+    return Color.parseColor(color)
+  }
+
+  /**
+   * color: 0xFF3A86FF, 0XFF3A86FF, 0x3A86FF, 0X3A86FF
+   */
+  private fun parseIntColor(color: String): Int {
+
+    if (useRgba) {
+      when (color.length) {
+        10 -> {
+          val argbStr = color.substring(0, 2) + color.substring(8, 10) + color.substring(2, 8)
+          return argbStr.toInt()
+        }
+        else -> {}
+      }
+    }
+
+    return color.toInt()
+  }
+
+}

package/android/src/main/java/com/fireworksdk/bridge/utils/FWConfigUtil.kt

@@ -1,7 +1,6 @@
 package com.fireworksdk.bridge.utils
 
 import android.content.Context
-import android.graphics.Color
 import android.graphics.Typeface
 import android.graphics.drawable.GradientDrawable
 import com.firework.common.PlayerMode
@@ -84,6 +83,7 @@ object FWConfigUtil {
           baseOptionBuilder.feedResource(FeedResource.ShareUrl(shareUrl))
         }
       }
+      FWVideoFeedSource.SingleContent -> {}
       else -> {}
     }
 
@@ -102,7 +102,7 @@ object FWConfigUtil {
 
     val backgroundColor = videoFeedPropsModel.videoFeedConfiguration?.backgroundColor
     if (!backgroundColor.isNullOrBlank()) {
-      layoutOptionBuilder.backgroundColor(Color.parseColor(backgroundColor))
+      layoutOptionBuilder.backgroundColor(FWColorUtil.parseColor(backgroundColor))
     }
 
     val cornerRadius = videoFeedPropsModel.videoFeedConfiguration?.cornerRadius
@@ -123,7 +123,7 @@ object FWConfigUtil {
         titleOptionBuilder.showFeedTitle(!titleHidden)
       }
       if (!titleTextColor.isNullOrBlank()) {
-        titleOptionBuilder.feedTitleTextColor(Color.parseColor(titleTextColor))
+        titleOptionBuilder.feedTitleTextColor(FWColorUtil.parseColor(titleTextColor))
       }
       if (titleFontSize != null && titleFontSize > 0) {
         titleOptionBuilder.feedTitleTextSize(FWCommonUtil.spToPx(titleFontSize.toFloat(), context))
@@ -132,7 +132,7 @@ object FWConfigUtil {
         titleOptionBuilder.feedTitleTextTypeface(it)
       }
       if (!titleBackgroundColor.isNullOrBlank()) {
-        titleOptionBuilder.feedTitleBackgroundColor(Color.parseColor(titleBackgroundColor))
+        titleOptionBuilder.feedTitleBackgroundColor(FWColorUtil.parseColor(titleBackgroundColor))
       }
       if (titleGradientDrawable != null) {
         val orientation = titleGradientDrawable.orientation
@@ -167,7 +167,7 @@ object FWConfigUtil {
             else -> {}
           }
           val intColors = colors.map {
-            Color.parseColor(it)
+            FWColorUtil.parseColor(it)
           }
           titleOptionBuilder.feedTitleBackgroundDrawable(
             GradientDrawable(
@@ -219,10 +219,10 @@ object FWConfigUtil {
       else -> {}
     }
     if (!adBadgeBackgroundColor.isNullOrBlank()) {
-      adBadgeOptionBuilder.adBadgeBackColor(Color.parseColor(adBadgeBackgroundColor))
+      adBadgeOptionBuilder.adBadgeBackColor(FWColorUtil.parseColor(adBadgeBackgroundColor))
     }
     if (!adBadgeTextColor.isNullOrBlank()) {
-      adBadgeOptionBuilder.adBadgeTextColor(Color.parseColor(adBadgeTextColor))
+      adBadgeOptionBuilder.adBadgeTextColor(FWColorUtil.parseColor(adBadgeTextColor))
     }
     adBadgeTypeface?.let {
       adBadgeOptionBuilder.adBadgeTypeface(it)
@@ -381,7 +381,6 @@ object FWConfigUtil {
   }
 
   private fun getDefaultAdBadgeOptionBuilder(): AdBadgeOption.Builder {
-
     return AdBadgeOption.Builder()
   }
 

package/ios/Components/StoryBlock.swift

@@ -10,7 +10,7 @@ import UIKit
 
 @objc
 public enum StoryBlockSourceType: Int {
-    case discover, channel, playlist, dynamicContent, hashtagPlaylist, sku
+    case discover, channel, playlist, dynamicContent, hashtagPlaylist, sku, singleContent
 }
 
 public protocol StoryBlockViewDelegate: AnyObject {
@@ -26,6 +26,7 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
     @objc public var dynamicContentParameters: NSDictionary = NSDictionary()
     @objc public var hashtagFilterExpression: String = ""
     @objc public var productIds: NSArray = NSArray()
+    @objc public var contentId: String = ""
     @objc public var adConfiguration: AdConfiguration?
     @objc public var storyBlockConfiguration: StoryBlockConfiguration?
 
@@ -50,6 +51,8 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
             return .hashtagPlaylist(channelID: channel, filterExpression: hashtagFilterExpression)
         case .sku:
             return .skuPlaylist(channelID: channel, productIDs: (productIds as? [String]) ?? [])
+        case .singleContent:
+            return .singleContent(videoOrLiveStreamID: contentId)
         }
     }
 

package/ios/Components/StoryBlockManager.m

@@ -29,6 +29,7 @@ RCT_EXPORT_VIEW_PROPERTY(playlist, NSString)
 RCT_EXPORT_VIEW_PROPERTY(dynamicContentParameters, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(hashtagFilterExpression, NSString)
 RCT_EXPORT_VIEW_PROPERTY(productIds, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(contentId, NSString)
 
 RCT_CUSTOM_VIEW_PROPERTY(adConfiguration, AdConfiguration, StoryBlock) {
     AdConfiguration *config = [RCTConvert adConfiguration:json];

package/ios/Components/VideoFeed.swift

@@ -20,7 +20,7 @@ public enum VideoFeedMode: Int {
 
 @objc
 public enum VideFeedSourceType: Int {
-    case discover, channel, playlist, playlistGroup, dynamicContent, hashtagPlaylist, sku
+    case discover, channel, playlist, playlistGroup, dynamicContent, hashtagPlaylist, sku, singleContent
 }
 
 public protocol VideoFeedDelegate: AnyObject {
@@ -39,8 +39,9 @@ public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
     @objc public var playlist: String = ""
     @objc public var playlistGroup: String = ""
     @objc public var dynamicContentParameters: NSDictionary = NSDictionary()
-    @objc public var productIds: NSArray = NSArray()
     @objc public var hashtagFilterExpression: String = ""
+    @objc public var productIds: NSArray = NSArray()
+    @objc public var contentId: String = ""
     @objc public var mode: VideoFeedMode = .row
     @objc public var feedViewConfig: VideoFeedConfiguration? {
         didSet {
@@ -84,6 +85,8 @@ public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
             return .hashtagPlaylist(channelID: channel, filterExpression: hashtagFilterExpression)
         case .sku:
             return .skuPlaylist(channelID: channel, productIDs: (productIds as? [String]) ?? [])
+        case .singleContent:
+            return .singleContent(videoOrLiveStreamID: contentId)
         }
     }
 
@@ -257,8 +260,8 @@ extension VideoFeed {
             if let hidden = title.hidden {
                 vfcConfig.title.isHidden = hidden
             }
-            if let textcolor = title.textColor {
-                vfcConfig.title.textColor = textcolor.uicolor()
+            if let textcolor = title.textColor, let color = textcolor.uicolor() {
+                vfcConfig.title.textColor = color
             }
             if let numberOfLines = title.numberOfLines {
                 vfcConfig.title.numberOfLines = numberOfLines
@@ -342,11 +345,11 @@ extension VideoFeed {
             vpcConfig.shareButton.isHidden = !showShareButton
         }
         if let ctaButtonStyle = config.ctaButtonStyle {
-            if let backgroundColor = ctaButtonStyle.backgroundColor {
-                vpcConfig.ctaButton.contentConfiguration.backgroundColor = backgroundColor.uicolor()
+            if let backgroundColor = ctaButtonStyle.backgroundColor, let color = backgroundColor.uicolor() {
+                vpcConfig.ctaButton.contentConfiguration.backgroundColor = color
             }
-            if let textcolor = ctaButtonStyle.textColor {
-                vpcConfig.ctaButton.contentConfiguration.textColor = textcolor.uicolor()
+            if let textcolor = ctaButtonStyle.textColor, let color = textcolor.uicolor() {
+                vpcConfig.ctaButton.contentConfiguration.textColor = color
             }
             if let fontSize = ctaButtonStyle.fontSize {
                 let iOSFontInfo = ctaButtonStyle.iOSFontInfo ?? FontInfo()
@@ -399,6 +402,32 @@ extension VideoFeed {
             vpcConfig.ctaButton.width = ctaWidth.width()
         }
 
+        if let buttonConfiguration = config.buttonConfiguration {
+            if let videoDetailButtonDisplay = buttonConfiguration.videoDetailButton?.getButtonDisplayConfiguration() {
+                vpcConfig.videoDetailButtonDisplayConfiguration = videoDetailButtonDisplay
+            }
+
+            if let closeButtonDisplay = buttonConfiguration.closeButton?.getButtonDisplayConfiguration() {
+                vpcConfig.closeButtonConfiguration.closeDisplay = closeButtonDisplay
+            }
+
+            if let muteButtonDisplay = buttonConfiguration.muteButton?.getButtonDisplayConfiguration() {
+                vpcConfig.muteButton.muteDisplay = muteButtonDisplay
+            }
+
+            if let unmuteButtonDisplay = buttonConfiguration.unmuteButton?.getButtonDisplayConfiguration() {
+                vpcConfig.muteButton.unmuteDisplay = unmuteButtonDisplay
+            }
+
+            if let playButtonDisplay = buttonConfiguration.playButton?.getButtonDisplayConfiguration() {
+                vpcConfig.playbackButton.playDisplay = playButtonDisplay
+            }
+
+            if let pauseButtonDisplay = buttonConfiguration.pauseButton?.getButtonDisplayConfiguration() {
+                vpcConfig.playbackButton.pauseDisplay = pauseButtonDisplay
+            }
+        }
+
         return vpcConfig
     }
 
@@ -414,8 +443,8 @@ extension VideoFeed {
             videoConfig.playerView = vpcConfig
         }
 
-        if let backgroundColor = feedViewConfig?.backgroundColor {
-            videoConfig.backgroundColor = backgroundColor.uicolor()
+        if let backgroundColor = feedViewConfig?.backgroundColor, let color = backgroundColor.uicolor() {
+            videoConfig.backgroundColor = color
         }
 
         if let adBadge = FireworkSDKModule.convertToFWAdBadgeConfiguration(gAdBadgeConfiguration) {

package/ios/Components/VideoFeedManager.m

@@ -30,6 +30,7 @@ RCT_EXPORT_VIEW_PROPERTY(playlistGroup, NSString)
 RCT_EXPORT_VIEW_PROPERTY(dynamicContentParameters, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(hashtagFilterExpression, NSString)
 RCT_EXPORT_VIEW_PROPERTY(productIds, NSArray)
+RCT_EXPORT_VIEW_PROPERTY(contentId, NSString)
 
 RCT_CUSTOM_VIEW_PROPERTY(mode, VideoFeedMode, VideoFeed) {
     if (json) {

package/ios/Components/VideoPlayerConfiguration.swift

@@ -22,6 +22,7 @@ public class VideoPlayerConfiguration: NSObject, Codable {
     var shareBaseURL: String?
     var ctaWidth: VideoPlayerCTAWidth?
     var enablePictureInPicture: Bool?
+    var buttonConfiguration: VideoPlayerButtonConfiguration?
 
     public enum VideoPlayerStyle: String, Codable {
         case full, fit
@@ -61,4 +62,13 @@ public class VideoPlayerConfiguration: NSObject, Codable {
             }
         }
     }
+
+    public class VideoPlayerButtonConfiguration: NSObject, Codable {
+        var videoDetailButton: ButtonInfo?
+        var closeButton: ButtonInfo?
+        var muteButton: ButtonInfo?
+        var unmuteButton: ButtonInfo?
+        var playButton: ButtonInfo?
+        var pauseButton: ButtonInfo?
+    }
 }