react-native-firework-sdk 2.3.1 → 2.4.0-beta.2

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

@@ -12,9 +12,11 @@ object FWVideoFeedPropsModelSerializer {
   private const val PLAYLIST_KEY = "playlist"
   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 SHARE_URL_KEY = "shareUrl"
   private const val MODE_KEY = "mode"
-  private const val ENABLE_PIP_KEY = "enablePictureInPicture"
   private const val MARGIN_RIGHT_KEY = "marginRight"
+  private const val CORNER_RADIUS_KEY = "cornerRadius"
 
   private const val VIDEO_FEED_CONFIGURATION_KEY = "videoFeedConfiguration"
   private const val VIDEO_PLAYER_CONFIGURATION_KEY = "videoPlayerConfiguration"
@@ -28,8 +30,17 @@ object FWVideoFeedPropsModelSerializer {
     jsonObject.put(PLAYLIST_KEY, model.playlist)
     jsonObject.put(PLAYLIST_GROUP_KEY, model.playlistGroup)
     jsonObject.put(HASHTAG_FILTER_EXPRESSION_KEY, model.hashtagFilterExpression)
+
+    if (model.productIds != null ) {
+      val productIdJsonArray = JSONArray()
+      for (item in model.productIds) {
+        productIdJsonArray.put(item)
+      }
+      jsonObject.put(PRODUCT_IDS_KEY, productIdJsonArray)
+    }
+
+    jsonObject.put(SHARE_URL_KEY, model.shareUrl)
     jsonObject.put(MODE_KEY, FWVideoFeedMode.serialize(model.mode))
-    jsonObject.put(ENABLE_PIP_KEY, model.enablePictureInPicture)
     jsonObject.put(VIDEO_FEED_CONFIGURATION_KEY, FWVideoFeedConfigModelSerializer.serialize(model.videoFeedConfiguration))
     jsonObject.put(VIDEO_PLAYER_CONFIGURATION_KEY, FWVideoPlayerConfigModelSerializer.serialize(model.videoPlayerConfiguration))
 
@@ -50,7 +61,8 @@ object FWVideoFeedPropsModelSerializer {
     }
 
     jsonObject.put(MARGIN_RIGHT_KEY, model.marginRight)
+    jsonObject.put(CORNER_RADIUS_KEY, model.cornerRadius)
 
     return jsonObject
   }
-}
+}

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

@@ -17,7 +17,8 @@ data class FWVideoPlayerConfigModel(
   val ctaHighlightDelay: FWCtaDelayModel? = null,
   val shareBaseUrl: String? = null,
   val ctaWidth: FWVideoPlayerCTAWidth? = null,
-) {
+  val enablePictureInPicture: Boolean? = null,
+  ) {
 
   data class FWCtaButtonStyleModel(
     val backgroundColor: String? = null,

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

@@ -19,6 +19,7 @@ object FWVideoPlayerConfigModelDeserializer {
   private const val CTA_HIGHLIGHT_DELAY_KEY = "ctaHighlightDelay"
   private const val SHARE_BASE_URL_KEY = "shareBaseURL"
   private const val CTA_WIDTH_KEY = "ctaWidth"
+  private const val ENABLE_PIP_KEY = "enablePictureInPicture"
 
   private const val BACKGROUND_COLOR_KEY = "backgroundColor"
   private const val FONT_SIZE_KEY = "fontSize"
@@ -41,6 +42,7 @@ object FWVideoPlayerConfigModelDeserializer {
     val ctaHighlightDelay = deserializeCtaDelay(responseJson.optJSONObject(CTA_HIGHLIGHT_DELAY_KEY))
     val shareBaseUrl = if (responseJson.has(SHARE_BASE_URL_KEY)) responseJson.optString(SHARE_BASE_URL_KEY) else null
     val ctaWidth = if (responseJson.has(CTA_WIDTH_KEY)) responseJson.optString(CTA_WIDTH_KEY) else null
+    val enablePictureInPicture = if (responseJson.has(ENABLE_PIP_KEY)) responseJson.optBoolean(ENABLE_PIP_KEY) else null
 
     return FWVideoPlayerConfigModel(
       playerStyle = if (!playerStyle.isNullOrBlank()) FWPlayerStyle.deserialize(playerStyle) else null,
@@ -54,6 +56,7 @@ object FWVideoPlayerConfigModelDeserializer {
       ctaHighlightDelay = ctaHighlightDelay,
       shareBaseUrl = shareBaseUrl,
       ctaWidth = if (!ctaWidth.isNullOrBlank()) FWVideoPlayerCTAWidth.deserialize(ctaWidth) else null,
+      enablePictureInPicture = enablePictureInPicture
     )
   }
 

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

@@ -19,6 +19,7 @@ object FWVideoPlayerConfigModelSerializer {
   private const val CTA_HIGHLIGHT_DELAY_KEY = "ctaHighlightDelay"
   private const val SHARE_BASE_URL_KEY = "shareBaseURL"
   private const val CTA_WIDTH_KEY = "ctaWidth"
+  private const val ENABLE_PIP_KEY = "enablePictureInPicture"
 
   private const val BACKGROUND_COLOR_KEY = "backgroundColor"
   private const val FONT_SIZE_KEY = "fontSize"
@@ -41,6 +42,7 @@ object FWVideoPlayerConfigModelSerializer {
     jsonObject.put(CTA_HIGHLIGHT_DELAY_KEY, serializeCtaDelay(model.ctaHighlightDelay))
     jsonObject.put(SHARE_BASE_URL_KEY, model.shareBaseUrl)
     jsonObject.put(CTA_WIDTH_KEY, FWVideoPlayerCTAWidth.serialize(model.ctaWidth))
+    jsonObject.put(ENABLE_PIP_KEY, model.enablePictureInPicture)
     return jsonObject
   }
 

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

@@ -6,7 +6,9 @@ enum class FWVideoFeedSource(val rawValue: String) {
   Playlist("playlist"),
   DynamicContent("dynamicContent"),
   PlaylistGroup("playlistGroup"),
-  HashtagPlaylist("hashtagPlaylist");
+  HashtagPlaylist("hashtagPlaylist"),
+  Sku("sku"),
+  ShareUrl("shareUrl");
 
   companion object {
     fun deserialize(rawValue: String?): FWVideoFeedSource? {

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

@@ -2,7 +2,9 @@ package com.fireworksdk.bridge.reactnative
 
 import android.app.Activity
 import android.content.Context
+import com.firework.imageloading.ImageLoader
 import com.firework.livestream.LivestreamPlayerInitializer
+import com.fireworksdk.bridge.utils.FWImageLoaderUtil
 import com.fireworksdk.bridge.utils.FWLanguageUtil
 import com.fireworksdk.bridge.utils.FWLiveStreamUtil
 
@@ -12,6 +14,10 @@ object FWReactNativeSDK {
     FWLiveStreamUtil.addLivestreamPlayerInitializer(initializer)
   }
 
+  fun setImageLoader(imageLoader: ImageLoader?) {
+    FWImageLoaderUtil.setImageLoader(imageLoader)
+  }
+
   fun updateBaseContextLocale(context: Context): Context {
     return FWLanguageUtil.getInstance(context).updateBaseContextLocale(context)
   }

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

@@ -99,18 +99,26 @@ class FWStoryBlockManager : ViewGroupManager<StoryBlockFrameLayout>() {
   }
 
   @Suppress("UNCHECKED_CAST")
-  @ReactProp(name = "dynamicContentParameters")
-  fun setDynamicContentParameters(view: StoryBlockFrameLayout, parameters: ReadableMap?) {
-    val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
+  @ReactProp(name = "productIds")
+  fun setProductIds(view: StoryBlockFrameLayout, productIdArray: ReadableArray?) {
     view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
-      dynamicContentParameters = parametersMap
+      productIds = productIdArray?.toArrayList() as ArrayList<String>?
     )
   }
 
-  @ReactProp(name = "enablePictureInPicture")
-  fun setEnablePictureInPicture(view: StoryBlockFrameLayout, enablePictureInPicture: Boolean?) {
+  @ReactProp(name = "shareUrl")
+  fun setShareUrl(view: StoryBlockFrameLayout, shareUrl: String?) {
     view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
-      enablePictureInPicture = enablePictureInPicture
+      shareUrl = shareUrl
+    )
+  }
+
+  @Suppress("UNCHECKED_CAST")
+  @ReactProp(name = "dynamicContentParameters")
+  fun setDynamicContentParameters(view: StoryBlockFrameLayout, parameters: ReadableMap?) {
+    val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      dynamicContentParameters = parametersMap
     )
   }
 
@@ -124,8 +132,8 @@ class FWStoryBlockManager : ViewGroupManager<StoryBlockFrameLayout>() {
     )
   }
 
-  @ReactProp(name = "videoPlayerConfiguration")
-  fun setVideoPlayerConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
+  @ReactProp(name = "storyBlockConfiguration")
+  fun setStoryBlockConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
     val configMap = config?.toHashMap() ?: hashMapOf()
     val jsonObject = JSONObject(configMap)
     val videoPlayerConfigModel = FWVideoPlayerConfigModelDeserializer.deserialize(jsonObject)
@@ -134,13 +142,10 @@ class FWStoryBlockManager : ViewGroupManager<StoryBlockFrameLayout>() {
     )
   }
 
-  @ReactProp(name = "storyBlockConfiguration")
-  fun setStoryBlockConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
-    val configMap = config?.toHashMap() ?: hashMapOf()
-    val jsonObject = JSONObject(configMap)
-    val videoPlayerConfigModel = FWVideoPlayerConfigModelDeserializer.deserialize(jsonObject)
+  @ReactProp(name = "cornerRadius")
+  fun setCornerRadius(view: StoryBlockFrameLayout, cornerRadius: Int?) {
     view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
-      videoPlayerConfiguration = videoPlayerConfigModel
+      cornerRadius = cornerRadius
     )
   }
 

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

@@ -15,6 +15,8 @@ import com.fireworksdk.bridge.models.FWVideoFeedConfigModelDeserializer
 import com.fireworksdk.bridge.models.FWVideoFeedItemDetailsModel
 import com.fireworksdk.bridge.models.FWVideoPlayerConfigModelDeserializer
 import com.fireworksdk.bridge.models.enums.FWFeedViewEventName
+import com.fireworksdk.bridge.models.enums.FWVideoFeedMode
+import com.fireworksdk.bridge.models.enums.FWVideoFeedSource
 import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
 import com.fireworksdk.bridge.utils.FWLogUtils
 import org.json.JSONObject
@@ -43,49 +45,72 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
 
   override fun onAfterUpdateTransaction(view: FWVideoFeed) {
     super.onAfterUpdateTransaction(view)
-    view.afterUpdateTransaction()
+    view.initVideoFeedView()
   }
 
   @ReactProp(name = "source")
   fun setSource(view: FWVideoFeed, source: String?) {
-    view.setSourceProps(source)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      source = if (!source.isNullOrBlank()) FWVideoFeedSource.deserialize(source) else null
+    )
   }
 
   @ReactProp(name = "channel")
   fun setChannel(view: FWVideoFeed, channel: String?) {
-    view.setChannelProps(channel)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      channel = channel
+    )
   }
 
   @ReactProp(name = "playlist")
   fun setPlaylist(view: FWVideoFeed, playlist: String?) {
-    view.setPlaylistProps(playlist)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      playlist = playlist
+    )
   }
 
   @ReactProp(name = "playlistGroup")
   fun setPlaylistGroup(view: FWVideoFeed, playlistGroup: String?) {
-    view.setPlaylistGroupProps(playlistGroup)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      playlistGroup = playlistGroup
+    )
   }
 
   @ReactProp(name = "hashtagFilterExpression")
   fun setHashtagFilterExpression(view: FWVideoFeed, hashtagFilterExpression: String?) {
-    view.setHashtagFilterExpressionProps(hashtagFilterExpression)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      hashtagFilterExpression = hashtagFilterExpression
+    )
   }
 
-  @ReactProp(name = "mode")
-  fun setMode(view: FWVideoFeed, mode: String?) {
-    view.setModeProps(mode)
+  @Suppress("UNCHECKED_CAST")
+  @ReactProp(name = "productIds")
+  fun setProductIds(view: FWVideoFeed, productIdArray: ReadableArray?) {
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      productIds = productIdArray?.toArrayList() as ArrayList<String>?
+    )
   }
 
-  @ReactProp(name = "enablePictureInPicture")
-  fun setEnablePictureInPicture(view: FWVideoFeed, enablePictureInPicture: Boolean?) {
-    view.setEnablePictureInPicture(enablePictureInPicture)
+  @ReactProp(name = "shareUrl")
+  fun setShareUrl(view: FWVideoFeed, shareUrl: String?) {
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      shareUrl = shareUrl
+    )
+  }
+
+  @ReactProp(name = "mode")
+  fun setMode(view: FWVideoFeed, mode: String?) {
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      mode = if (!mode.isNullOrBlank()) FWVideoFeedMode.deserialize(mode) else null
+    )
   }
 
   @Suppress("UNCHECKED_CAST")
   @ReactProp(name = "dynamicContentParameters")
   fun setDynamicContentParameters(view: FWVideoFeed, parameters: ReadableMap?) {
-    val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
-    view.setDynamicContentParametersProps(parametersMap)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      dynamicContentParameters = parameters?.toHashMap() as? HashMap<String, List<String>>
+    )
   }
 
   @ReactProp(name = "videoFeedConfiguration")
@@ -93,7 +118,9 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     val configMap = config?.toHashMap() ?: hashMapOf()
     val jsonObject = JSONObject(configMap)
     val videoFeedConfigModel = FWVideoFeedConfigModelDeserializer.deserialize(jsonObject)
-    view.setVideoFeedConfigProps(videoFeedConfigModel)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      videoFeedConfiguration = videoFeedConfigModel
+    )
   }
 
   @ReactProp(name = "videoPlayerConfiguration")
@@ -101,7 +128,9 @@ class FWVideoFeedManager : SimpleViewManager<FWVideoFeed>() {
     val configMap = config?.toHashMap() ?: hashMapOf()
     val jsonObject = JSONObject(configMap)
     val videoPlayerConfigModel = FWVideoPlayerConfigModelDeserializer.deserialize(jsonObject)
-    view.setVideoPlayerConfigProps(videoPlayerConfigModel)
+    view.videoFeedPropsModel = view.videoFeedPropsModel.copy(
+      videoPlayerConfiguration = videoPlayerConfigModel
+    )
   }
 
   private fun addVideoFeedListener(reactContext: ThemedReactContext, videoFeed: FWVideoFeed?) {

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

@@ -159,6 +159,11 @@ class FireworkSDKModule(
       else -> {}
     }
 
+    val imageLoader = FWImageLoaderUtil.getImageLoader()
+    if (imageLoader != null) {
+      configBuilder.imageLoader(imageLoader)
+    }
+
     val config = configBuilder.build()
 
     FireworkSdk.init(

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

@@ -74,6 +74,16 @@ object FWConfigUtil {
           }
         }
       }
+      FWVideoFeedSource.Sku -> {
+        videoFeedPropsModel.channel?.let { channel ->
+          baseOptionBuilder.feedResource(FeedResource.Sku(channel, videoFeedPropsModel.productIds ?: emptyList()))
+        }
+      }
+      FWVideoFeedSource.ShareUrl -> {
+        videoFeedPropsModel.shareUrl?.let { shareUrl ->
+          baseOptionBuilder.feedResource(FeedResource.ShareUrl(shareUrl))
+        }
+      }
       else -> {}
     }
 
@@ -270,7 +280,7 @@ object FWConfigUtil {
       playerOptionBuilder.showShareButton(it)
     }
 
-    val enablePipMode = videoFeedPropsModel.enablePictureInPicture
+    val enablePipMode = videoFeedPropsModel.videoPlayerConfiguration?.enablePictureInPicture
     enablePipMode?.let {
       playerOptionBuilder.enablePipMode(it)
     }

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

@@ -0,0 +1,16 @@
+package com.fireworksdk.bridge.utils
+
+import com.firework.imageloading.ImageLoader
+
+object FWImageLoaderUtil {
+
+  private var imageLoader: ImageLoader? = null
+
+  fun setImageLoader(imageLoader: ImageLoader?) {
+    this.imageLoader = imageLoader
+  }
+
+  fun getImageLoader(): ImageLoader? {
+    return imageLoader
+  }
+}

package/ios/Components/StoryBlock.swift

@@ -10,7 +10,7 @@ import UIKit
 
 @objc
 public enum StoryBlockSourceType: Int {
-    case discover, channel, playlist, dynamicContent, hashtagPlaylist
+    case discover, channel, playlist, dynamicContent, hashtagPlaylist, sku
 }
 
 public protocol StoryBlockViewDelegate: AnyObject {
@@ -23,10 +23,11 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
     @objc public var sourceType: StoryBlockSourceType = .discover
     @objc public var channel: String = ""
     @objc public var playlist: String = ""
-    @objc public var dynamicContentParameters: [String: [String]] = [:]
+    @objc public var dynamicContentParameters: NSDictionary = NSDictionary()
     @objc public var hashtagFilterExpression: String = ""
-    @objc public var enablePictureInPicture: Bool = false
+    @objc public var productIds: NSArray = NSArray()
     @objc public var adConfiguration: AdConfiguration?
+    @objc public var storyBlockConfiguration: StoryBlockConfiguration?
 
     public weak var delegate: StoryBlockViewDelegate?
 
@@ -43,9 +44,12 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
         case .playlist:
             return .channelPlaylist(channelID: channel, playlistID: playlist)
         case .dynamicContent:
-            return .dynamicContent(channelID: channel, parameters: dynamicContentParameters)
+            let parameters = dynamicContentParameters as? [String: [String]]
+            return .dynamicContent(channelID: channel, parameters: parameters ?? [:])
         case .hashtagPlaylist:
             return .hashtagPlaylist(channelID: channel, filterExpression: hashtagFilterExpression)
+        case .sku:
+            return .skuPlaylist(channelID: channel, productIDs: (productIds as? [String]) ?? [])
         }
     }
 
@@ -83,9 +87,7 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
             return
         }
 
-        if self.enablePictureInPicture {
-            storyBlockVC.isPictureInPictureEnabled = true
-        }
+        storyBlockVC.isPictureInPictureEnabled = storyBlockConfiguration?.enablePictureInPicture ?? true
 
         storyBlockVC.delegate = self
         self.storyBlockVC = storyBlockVC

package/ios/Components/StoryBlockConfiguration.swift

@@ -0,0 +1,13 @@
+//
+//  StoryBlockConfiguration.swift
+//  FireworkSdk
+//
+//  Created by linjie jiang on 6/26/23.
+//
+
+import Foundation
+
+@objc
+public class StoryBlockConfiguration: NSObject, Codable {
+    var enablePictureInPicture: Bool?
+}

package/ios/Components/StoryBlockManager.m

@@ -28,13 +28,18 @@ RCT_EXPORT_VIEW_PROPERTY(channel, NSString)
 RCT_EXPORT_VIEW_PROPERTY(playlist, NSString)
 RCT_EXPORT_VIEW_PROPERTY(dynamicContentParameters, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(hashtagFilterExpression, NSString)
-RCT_EXPORT_VIEW_PROPERTY(enablePictureInPicture, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(productIds, NSArray)
 
 RCT_CUSTOM_VIEW_PROPERTY(adConfiguration, AdConfiguration, StoryBlock) {
     AdConfiguration *config = [RCTConvert adConfiguration:json];
     view.adConfiguration = config;
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(storyBlockConfiguration, StoryBlockConfiguration, StoryBlock) {
+    StoryBlockConfiguration *config = [RCTConvert storyBlockConfiguration:json];
+    view.storyBlockConfiguration = config;
+}
+
 RCT_EXPORT_VIEW_PROPERTY(onStoryBlockLoadFinished, RCTBubblingEventBlock)
 
 RCT_EXPORT_METHOD(play:(nonnull NSNumber *)reactTag) {

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
+    case discover, channel, playlist, playlistGroup, dynamicContent, hashtagPlaylist, sku
 }
 
 public protocol VideoFeedDelegate: AnyObject {
@@ -39,6 +39,7 @@ 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 mode: VideoFeedMode = .row
     @objc public var feedViewConfig: VideoFeedConfiguration? {
@@ -59,7 +60,6 @@ public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
         }
     }
     @objc public var adConfiguration: AdConfiguration?
-    @objc public var enablePictureInPicture: Bool = false
 
     @objc var onVideoFeedLoadFinished: RCTBubblingEventBlock?
     //    @objc var onVideoFeedClick: RCTBubblingEventBlock?
@@ -82,6 +82,8 @@ public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
             return .dynamicContent(channelID: channel, parameters: parameters ?? [:])
         case .hashtagPlaylist:
             return .hashtagPlaylist(channelID: channel, filterExpression: hashtagFilterExpression)
+        case .sku:
+            return .skuPlaylist(channelID: channel, productIDs: (productIds as? [String]) ?? [])
         }
     }
 
@@ -190,9 +192,7 @@ public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
             feedVC.viewConfiguration = viewConfiguration
         }
 
-        if self.enablePictureInPicture {
-            feedVC.isPictureInPictureEnabled = true
-        }
+        feedVC.isPictureInPictureEnabled = playerViewConfig?.enablePictureInPicture ?? true
 
         feedVC.delegate = self
         self.feedVC = feedVC
@@ -422,11 +422,6 @@ extension VideoFeed {
             videoConfig.adBadge = adBadge
         }
 
-        // set a value different from default value to compatible with FireworkVideo SDK misalign bug
-        if videoConfig.itemView.titleLayoutConfiguration.insets == UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) {
-            videoConfig.itemView.titleLayoutConfiguration.insets = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
-        }
-
         return videoConfig
     }
 }

package/ios/Components/VideoFeedManager.m

@@ -29,6 +29,7 @@ RCT_EXPORT_VIEW_PROPERTY(playlist, NSString)
 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_CUSTOM_VIEW_PROPERTY(mode, VideoFeedMode, VideoFeed) {
     if (json) {
@@ -50,8 +51,6 @@ RCT_CUSTOM_VIEW_PROPERTY(adConfiguration, AdConfiguration, VideoFeed) {
     view.adConfiguration = config;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(enablePictureInPicture, BOOL)
-
 RCT_EXPORT_VIEW_PROPERTY(onVideoFeedLoadFinished, RCTBubblingEventBlock)
 //RCT_EXPORT_VIEW_PROPERTY(onVideoFeedClick, RCTBubblingEventBlock)
 

package/ios/Components/VideoPlayerConfiguration.swift

@@ -21,6 +21,7 @@ public class VideoPlayerConfiguration: NSObject, Codable {
     var ctaHighlightDelay: VideoPlayerCTADelay?
     var shareBaseURL: String?
     var ctaWidth: VideoPlayerCTAWidth?
+    var enablePictureInPicture: Bool?
 
     public enum VideoPlayerStyle: String, Codable {
         case full, fit