react-native-firework-sdk 2.0.0 → 2.2.0-beta.1

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

@@ -11,11 +11,13 @@ import android.os.Process
 import android.provider.Settings
 import android.util.Base64
 import com.facebook.react.bridge.*
+import com.firework.analyticsevents.cta.CtaButtonClickAnalyticsEvent
+import com.firework.analyticsevents.player.PlayerLifecycleAnalyticsEvent
+import com.firework.analyticsevents.share.ShareButtonAnalyticsEvent
+import com.firework.bus.FwAnalyticCallable
 import com.firework.imageloading.glide.GlideImageLoaderFactory
 import com.firework.livestream.multihost.MultihostLivestreamPlayerInitializer
 import com.firework.livestream.singlehost.LivestreamPlayerInitializer
-import com.firework.player.lifecycle.LifecycleState
-import com.firework.player.lifecycle.PlaybackLifecycleObserver
 import com.firework.sdk.FireworkSdk
 import com.firework.sdk.FireworkSdkConfig
 import com.fireworksdk.bridge.FWInitializationProvider
@@ -57,8 +59,8 @@ class FireworkSDKModule(
     val sdkInitOptionsModel = FWSDKInitOptionsModelDeserializer.deserialize(jsonObject)
 
     initSdk(sdkInitOptionsModel)
-    handleCustomCTAClick()
     promise.resolve(Arguments.createMap())
+    FireworkSdk.analytics.register(this)
   }
 
   /**
@@ -97,6 +99,9 @@ class FireworkSDKModule(
    */
   @ReactMethod
   override fun setShareBaseURL(url: String?, promise: Promise) {
+    url?.let {
+      FWGlobalDataUtil.shareBaseUrl = it
+    }
     promise.resolve(Arguments.createMap())
   }
 
@@ -117,7 +122,6 @@ class FireworkSDKModule(
   @ReactMethod
   override fun setVideoPlaybackEventEnabled(value: Boolean?) {
     FWGlobalDataUtil.videoPlaybackEventEnabled = value?:false
-    handleVideoPlaybackEvent()
   }
 
   private fun initSdk(sdkInitOptions: FWSDKInitOptionsModel?) {
@@ -145,7 +149,7 @@ class FireworkSDKModule(
 //      .shareBaseUrl("https://www.mytest.com")
 //      .muteOnLaunch(true)
     shareBaseURL?.let {
-      configBuilder.shareBaseUrl(it)
+      FWGlobalDataUtil.shareBaseUrl = it
     }
     when (videoLaunchBehavior) {
       FWVideoPlayerConstant.FW_PLAYER_LAUNCH_BEHAVIOR_DEFAULT -> {}
@@ -196,54 +200,132 @@ class FireworkSDKModule(
     return Base64.encodeToString(hash, Base64.DEFAULT)
   }
 
-  private fun handleCustomCTAClick() {
-    FireworkSdk.setCtaButtonClickHandler { _, actionUrl, _ ->
-
-      FWEventUtils.sendLogMessageEvent(reactApplicationContext, "[Android] Receive CustomCTAClick event ${FWDateUtils.getDateString(
-        Date()
-      )}")
+  @FwAnalyticCallable
+  fun onCtaButtonClicked(event: CtaButtonClickAnalyticsEvent) {
+    FWEventUtils.sendLogMessageEvent(reactApplicationContext, "[Android] Receive CustomCTAClick event ${FWDateUtils.getDateString(
+      Date()
+    )}")
+
+    if (FWGlobalDataUtil.videoPlaybackEventEnabled) {
+      FWEventUtils.sendVideoPlaybackEvent(
+        reactApplicationContext,
+        FWVideoPlaybackSubEventName.ClickCTA.rawValue,
+        FWVideoPlaybackDetails(
+          badge = event.videoInfo.badge,
+          caption = event.videoInfo.caption,
+          duration = event.videoInfo.duration,
+          hasCta = true,
+          height = event.videoInfo.playerHeight,
+          width = event.videoInfo.playerWidth,
+          videoId = event.videoInfo.id,
+        )
+      )
+    }
 
-      FWEventUtils.sendCustomCTAClickEvent(reactApplicationContext, actionUrl)
+    FWEventUtils.sendCustomCTAClickEvent(reactApplicationContext, event.actionUrl)
 
-      if (!appComponentName.isNullOrBlank() && !customCTALinkContentPageRouteName.isNullOrBlank()) {
-        val activity = FWInitializationProvider.INSTANCE.resumedActivity
+    if (!FWGlobalDataUtil.appComponentName.isNullOrBlank() && !FWGlobalDataUtil.customCTALinkContentPageRouteName.isNullOrBlank()) {
+      val activity = FWInitializationProvider.INSTANCE.resumedActivity
 
-        activity?.startActivity(
-          FWContainerActivity.createIntent(activity, appComponentName,
+      activity?.startActivity(
+        FWContainerActivity.createIntent(activity, FWGlobalDataUtil.appComponentName,
           hashMapOf(
-            "initialRouteName" to customCTALinkContentPageRouteName,
-            "initialParams" to hashMapOf("url" to actionUrl)
+            "initialRouteName" to FWGlobalDataUtil.customCTALinkContentPageRouteName,
+            "initialParams" to hashMapOf("url" to event.actionUrl)
           )
         ))
-        return@setCtaButtonClickHandler true
-      }
+    }
+  }
 
-      return@setCtaButtonClickHandler FWGlobalDataUtil.customCTAClickEnabled
+  @FwAnalyticCallable
+  fun onShareButtonClicked(event: ShareButtonAnalyticsEvent) {
+    if (FWGlobalDataUtil.videoPlaybackEventEnabled) {
+      FWEventUtils.sendVideoPlaybackEvent(
+        reactApplicationContext,
+        FWVideoPlaybackSubEventName.ClickShare.rawValue,
+        FWVideoPlaybackDetails(
+          badge = event.videoInfo.badge,
+          caption = event.videoInfo.caption,
+          duration = event.videoInfo.duration,
+          hasCta = event.videoInfo.hasCta,
+          height = event.videoInfo.playerHeight,
+          width = event.videoInfo.playerWidth,
+          videoId = event.videoInfo.id,
+        )
+      )
     }
   }
 
-  private fun handleVideoPlaybackEvent() {
+  @FwAnalyticCallable
+  fun onPlaybackEvent(event: PlayerLifecycleAnalyticsEvent) {
     if (!FWGlobalDataUtil.videoPlaybackEventEnabled) {
       return
     }
-    FireworkSdk.registerPlaybackLifecycleObserver(object : PlaybackLifecycleObserver {
-      override fun onStateChanged(lifecycleState: LifecycleState) {
-        FWLogUtils.d { "onStateChanged: $lifecycleState - ${lifecycleState.playable.id}" }
-        val playable = lifecycleState.playable
-
+    val progress = event.progress
+
+    val videoPlaybackDetails = FWVideoPlaybackDetails(
+      badge = event.videoInfo.badge,
+      caption = event.videoInfo.caption,
+      duration = event.videoInfo.duration,
+      hasCta = event.videoInfo.hasCta,
+      height = event.videoInfo.playerHeight,
+      width = event.videoInfo.playerWidth,
+      videoId = event.videoInfo.id,
+      progress = progress
+    )
+    when (event) {
+      is PlayerLifecycleAnalyticsEvent.OnStarted -> {
+        if (event.videoInfo.isAd) {
+          FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.AdStart.rawValue, videoPlaybackDetails)
+        } else {
+          FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Start.rawValue, videoPlaybackDetails)
+        }
+      }
+      is PlayerLifecycleAnalyticsEvent.OnPrepared -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Impression.rawValue, videoPlaybackDetails)
       }
-    })
+      is PlayerLifecycleAnalyticsEvent.OnBuffering -> {}
+      is PlayerLifecycleAnalyticsEvent.OnIdle -> {}
+      is PlayerLifecycleAnalyticsEvent.OnRepeat -> {}
+      is PlayerLifecycleAnalyticsEvent.OnEnded -> {
+        if (event.videoInfo.isAd) {
+          FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.AdEnd.rawValue, videoPlaybackDetails)
+        } else {
+          FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Complete.rawValue, videoPlaybackDetails)
+        }
+      }
+      is PlayerLifecycleAnalyticsEvent.OnError -> {}
+      is PlayerLifecycleAnalyticsEvent.OnSeek -> {}
+      is PlayerLifecycleAnalyticsEvent.OnVideoSizeChanged -> {}
+      is PlayerLifecycleAnalyticsEvent.OnFirstQuartile -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.FirstQuartile.rawValue, videoPlaybackDetails)
+      }
+      is PlayerLifecycleAnalyticsEvent.OnSecondQuartile -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Midpoint.rawValue, videoPlaybackDetails)
+      }
+      is PlayerLifecycleAnalyticsEvent.OnThirdQuartile -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.ThirdQuartile.rawValue, videoPlaybackDetails)
+      }
+      is PlayerLifecycleAnalyticsEvent.OnPlaybackProgressChanged -> {}
+      is PlayerLifecycleAnalyticsEvent.OnPaused -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Pause.rawValue, videoPlaybackDetails)
+      }
+      is PlayerLifecycleAnalyticsEvent.OnResumed -> {
+        FWEventUtils.sendVideoPlaybackEvent(reactApplicationContext, FWVideoPlaybackSubEventName.Resume.rawValue, videoPlaybackDetails)
+      }
+      else -> {}
+    }
   }
 
   @ReactMethod
   override fun setCustomCTALinkContentPageRouteName(name: String?, promise: Promise) {
-    customCTALinkContentPageRouteName = name
+    FWGlobalDataUtil.customCTALinkContentPageRouteName = name
     promise.resolve(Arguments.createMap())
   }
 
   @ReactMethod
   override fun setAppComponentName(name: String?, promise: Promise) {
-    appComponentName = name
+    FWGlobalDataUtil.appComponentName = name
     promise.resolve(Arguments.createMap())
   }
 
@@ -313,10 +395,4 @@ class FireworkSDKModule(
     return "FireworkSDK"
   }
 
-  companion object {
-    var appComponentName: String? = null
-    var customCTALinkContentPageRouteName: String? = null
-    var initSuccess: Boolean = false
-  }
-
 }

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

@@ -7,9 +7,9 @@ import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.firework.common.product.Product
 import com.fireworksdk.bridge.models.*
 import com.fireworksdk.bridge.FWInitializationProvider
-import com.fireworksdk.bridge.reactnative.module.FireworkSDKModule
 import com.fireworksdk.bridge.reactnative.pages.FWContainerActivity
 import com.fireworksdk.bridge.utils.FWDateUtils
+import com.fireworksdk.bridge.utils.FWGlobalDataUtil
 import com.fireworksdk.bridge.utils.FWLogUtils
 import java.util.*
 
@@ -19,7 +19,7 @@ object FWEventUtils {
     FWLogUtils.d { "FWNavigatorModule pushNativeContainer: $props" }
     val activity = FWInitializationProvider.INSTANCE.resumedActivity
 
-    if (activity == null || FireworkSDKModule.appComponentName.isNullOrBlank()) {
+    if (activity == null || FWGlobalDataUtil.appComponentName.isNullOrBlank()) {
       promise?.resolve(false)
       return
     }
@@ -36,7 +36,7 @@ object FWEventUtils {
           Date()
         )}")
 
-      activity.startActivity(FWContainerActivity.createIntent(activity, FireworkSDKModule.appComponentName, props?.toHashMap()))
+      activity.startActivity(FWContainerActivity.createIntent(activity, FWGlobalDataUtil.appComponentName, props?.toHashMap()))
 
       sendLogMessageEvent(reactContext, "[Android] After Starting container activity ${
         FWDateUtils.getDateString(
@@ -109,7 +109,7 @@ object FWEventUtils {
       contentMap.putString("videoId", info?.videoId)
     }
     if (info?.duration != null) {
-      contentMap.putDouble("duration", info.duration.toDouble())
+      contentMap.putDouble("duration", info.duration)
     }
     if (info?.caption.isNullOrBlank()) {
       contentMap.putString("caption", info?.caption)
@@ -130,17 +130,21 @@ object FWEventUtils {
     if (info?.hasCta != null) {
       contentMap.putBoolean("hasCTA", info.hasCta)
     }
+    if (info?.progress != null) {
+      contentMap.putDouble("progress", info.progress)
+    }
     eventMap.putMap("info", contentMap)
 
     sendEvent(reactContext, FWEventName.VideoPlayback.rawValue, eventMap)
   }
 
-  fun sendAddToCartClickEvent(reactContext: ReactContext, productId: String?, unitId: String?, callbackId: Int?) {
+  fun sendShoppingCtaButtonClickEvent(reactContext: ReactContext, productId: String?, unitId: String?, url: String?, callbackId: Int?) {
     val eventMap = Arguments.createMap()
     eventMap.putString("productId", productId)
     eventMap.putString("unitId", unitId)
+    eventMap.putString("url", url)
     eventMap.putInt("callbackId", callbackId?:0)
-    sendEvent(reactContext, FWVideoShoppingEventName.AddToCart.rawValue, eventMap)
+    sendEvent(reactContext, FWVideoShoppingEventName.CtaButtonClick.rawValue, eventMap)
   }
 
   fun sendCartIconClickEvent(reactContext: ReactContext, callbackId: Int?) {
@@ -205,6 +209,12 @@ object FWEventUtils {
     receiveEvent(reactContext, targetTag, FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, eventMap)
   }
 
+  fun receiveStoryBlockFullScreenStateChangedEvent(reactContext: ReactContext, targetTag: Int, isFullScreen: Boolean) {
+    val eventMap = Arguments.createMap()
+    eventMap.putBoolean("isFullScreen", isFullScreen)
+    receiveEvent(reactContext, targetTag, FWStoryBlockEventName.StoryBlockFullScreenStateChanged.rawValue, eventMap)
+  }
+
   private fun receiveEvent(reactContext: ReactContext, targetTag: Int, eventName: String, event: WritableMap?) {
     reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(
       targetTag,

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

@@ -14,6 +14,7 @@ import com.firework.viewoptions.*
 import com.fireworksdk.bridge.FWInitializationProvider
 import com.fireworksdk.bridge.constants.FWVideoPlayerConstant
 import com.fireworksdk.bridge.models.*
+import com.fireworksdk.bridge.reactnative.module.FireworkSDKModule
 
 object FWConfigUtil {
 
@@ -50,6 +51,15 @@ object FWConfigUtil {
       }
       FWVideoFeedSource.PlaylistGroup.rawValue -> {
 
+      }
+      FWVideoFeedSource.HashtagPlaylist.rawValue -> {
+        videoFeedPropsModel.channel?.let { channel ->
+          if (!videoFeedPropsModel.hashtagFilterExpression.isNullOrBlank()) {
+            baseOptionBuilder.feedResource(FeedResource.ChannelHashtag(channel, videoFeedPropsModel.hashtagFilterExpression))
+          } else {
+            baseOptionBuilder.feedResource(FeedResource.Channel(channel))
+          }
+        }
       }
       else -> {}
     }
@@ -174,6 +184,21 @@ object FWConfigUtil {
       playerOptionBuilder.autoplay(it)
     }
 
+    FWGlobalDataUtil.shareBaseUrl?.let {
+      playerOptionBuilder.shareBaseUrl(it)
+    }
+
+    val shareBaseUrl = videoFeedPropsModel.videoPlayerConfiguration?.shareBaseUrl
+    shareBaseUrl?.let {
+      playerOptionBuilder.shareBaseUrl(it)
+    }
+
+    if (!FWGlobalDataUtil.appComponentName.isNullOrBlank() && !FWGlobalDataUtil.customCTALinkContentPageRouteName.isNullOrBlank()) {
+      playerOptionBuilder.sdkHandleCtaButtonClick(false)
+    } else {
+      playerOptionBuilder.sdkHandleCtaButtonClick(!FWGlobalDataUtil.customCTAClickEnabled)
+    }
+
     val gridColumns = videoFeedPropsModel.videoFeedConfiguration?.gridColumns
     if (gridColumns != null && gridColumns > 0) {
       layoutOptionBuilder.columnCount(gridColumns)
@@ -281,59 +306,28 @@ object FWConfigUtil {
   private fun getDefaultLayoutOptionBuilder(): LayoutOption.Builder {
     val context = FWInitializationProvider.INSTANCE.resumedActivity ?: return LayoutOption.Builder()
     return LayoutOption.Builder()
-      .feedLayout(FeedLayout.HORIZONTAL)
-      .columnCount(2)
-      .backgroundColor(Color.WHITE)
-//      .itemSpacing()
-      .roundedCorner(false)
-//      .roundedCornerRadius(FWCommonUtil.dpToPx("20".toFloat(), context))
-      .showPlayIcon(true)
-      .playIconWidth(FWCommonUtil.dpToPx("24".toFloat(), context))
-      .feedTitlePosition(FeedTitlePosition.NESTED)
+      .playIconWidth(FWCommonUtil.dpToPx("36".toFloat(), context))
   }
 
   private fun getDefaultTitleOptionBuilder(): TitleOption.Builder {
     return TitleOption.Builder()
-      .showFeedTitle(true)
-//      .feedTitleTextTypeface(titleTypeface.toTypeface())
-//      .feedTitleTextColor(ContextCompat.getColor(context, R.color.white))
-//      .feedTitleBackgroundColor(titleBackColor.toBackgroundColor())
-//      .feedTitleTextNumberOfLines(titleMaxLines.toInt())
-//      .feedTitleTextPadding(titlePadding.dpToPixel())
-//      .feedTitleTextSize(titleTextSize.spToPixel())
   }
 
   private fun getDefaultPlayerOptionBuilder(): PlayerOption.Builder {
     return PlayerOption.Builder()
-      .playerMode(PlayerMode.FULL_BLEED_MODE)
-      .autoPlayOnComplete(true)
-      .showShareButton(true)
-      .showFireworkLogo(true)
-      .showMuteButton(true)
-      .showPlayPauseButton(true)
-      .autoplay(false)
-      .enablePipMode(false)
   }
 
   private fun getDefaultBaseOptionBuilder(): BaseOption.Builder {
     return BaseOption.Builder()
-      .feedResource(FeedResource.Discovery)
   }
 
   private fun getDefaultAdBadgeOptionBuilder(): AdBadgeOption.Builder {
 
     return AdBadgeOption.Builder()
-//      .adBadgeBackColor(Color.parseColor("#FF6200EE"))
-      .adBadgeTextColor(Color.parseColor("#FFFFFFFF"))
-      .adBadgeLabel(AdBadgeTextType.SPONSORED)
-      .adBadgeIsHidden(false)
-      .adBadgeShowOnThumbnails(false)
-      .adBadgeTypeface(Typeface.DEFAULT)
   }
 
   private fun getDefaultCtaOptionBuilder(): CtaOption.Builder {
     return CtaOption.Builder()
-      .ctaDelay(CtaDelay(3.0f, CtaDelayUnit.SECONDS))
   }
 
 }

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

@@ -1,6 +1,8 @@
 package com.fireworksdk.bridge.utils
 
+import com.fireworksdk.bridge.components.videofeed.StoryBlockFragment
 import com.fireworksdk.bridge.models.FWAdBadgeConfigModel
+import com.fireworksdk.bridge.models.weakProperty
 
 object FWGlobalDataUtil {
 
@@ -11,4 +13,12 @@ object FWGlobalDataUtil {
   var videoPlaybackEventEnabled: Boolean = false
 
   var customClickLinkButtonEnabled: Boolean = false
+
+  var storyBlockFragment by weakProperty<StoryBlockFragment?>()
+
+  var shareBaseUrl: String? = null
+
+  var appComponentName: String? = null
+
+  var customCTALinkContentPageRouteName: String? = null
 }

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

@@ -10,40 +10,66 @@ object FWLanguageUtil {
   private const val LOCALE_SP = "fw_locale_sp"
   private const val LOCALE_KEY = "fw_locale_key"
 
-  private fun init(context: Context) {
+  private var systemLocale: Locale? = null
+
+  private fun readLocaleFromSp(context: Context) {
     locale = context.getSharedPreferences(LOCALE_SP, Context.MODE_PRIVATE)
       .getString(LOCALE_KEY, null)
   }
 
   fun changeLanguage(context: Context, l: String?): Boolean {
-    if (l.isNullOrBlank() || !isValidLocale(l)) {
+    readLocaleFromSp(context)
+    val sharedPreferences =
+      context.getSharedPreferences(LOCALE_SP, Context.MODE_PRIVATE)
+    if (l.isNullOrBlank()) {
+      if (locale.isNullOrBlank()) {
+        return true
+      }
+
+      locale = null
+      sharedPreferences.edit().apply {
+        remove(LOCALE_KEY)
+      }.commit()
+
+      // change sdk locale to system locale
+//      val sysLocale = getSystemLocale()
+//      if (sysLocale.country.isNullOrBlank()) {
+//        FwSDK.changeAppLocale(context, sysLocale.language)
+//      } else {
+//        FwSDK.changeAppLocale(context, "${sysLocale.language}-${sysLocale.country}")
+//      }
+
+      restartActivity(context)
+      return true
+    }
+
+    if (!isValidLocale(l)) {
       return false
     }
 
-    if (isSame(context, l)) {
+    if (locale == l) {
       return true
     }
 
     locale = l
 
     // save to sp
-    val sharedPreferences =
-      context.getSharedPreferences(LOCALE_SP, Context.MODE_PRIVATE)
     sharedPreferences.edit().apply {
         putString(LOCALE_KEY, l)
       }.apply()
 
-    if (context is Activity) {
-      context.recreate()
-    }
+    restartActivity(context)
 
     return true
   }
 
-  fun updateBaseContextLocale(context: Context?): Context? {
-    context ?: return null
+  fun updateBaseContextLocale(context: Context): Context {
+    if (systemLocale == null) {
+      systemLocale = Locale.getDefault()
+    }
+
     if (locale.isNullOrBlank()) {
-      init(context)
+      readLocaleFromSp(context)
     }
     locale?.let {
       val locale = getLocale(it)
@@ -51,7 +77,10 @@ object FWLanguageUtil {
 
       return updateResourcesLocale(context, locale)
     }
-    return context
+
+    val l = getSystemLocale()
+    Locale.setDefault(l)
+    return updateResourcesLocale(context, l)
   }
 
   private fun updateResourcesLocale(context: Context, locale: Locale): Context {
@@ -78,11 +107,14 @@ object FWLanguageUtil {
     return Locale(locale)
   }
 
-  private fun isSame(context: Context, l: String?) : Boolean {
-    if (locale.isNullOrBlank()) {
-      init(context)
+  private fun restartActivity(context: Context) {
+    if (context is Activity) {
+      context.recreate()
     }
-    return locale.equals(l)
+  }
+
+  private fun getSystemLocale(): Locale {
+    return systemLocale ?: Locale.getDefault()
   }
 
 }

package/android/src/main/res/layout/fw_bridge_story_block.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:layout_gravity="center"
+  android:layout_marginVertical="16dp">
+
+  <FrameLayout
+    android:id="@+id/story_block_container"
+    android:layout_width="0dp"
+    android:layout_height="0dp"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent">
+
+    <com.firework.storyblock.FwStoryBlockView
+      android:id="@+id/story_block"
+      android:layout_width="match_parent"
+      android:layout_height="match_parent" />
+
+  </FrameLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

package/ios/Components/StoryBlock.swift

@@ -10,7 +10,7 @@ import UIKit
 
 @objc
 public enum StoryBlockSourceType: Int {
-    case discover, channel, playlist, dynamicContent
+    case discover, channel, playlist, dynamicContent, hashtagPlaylist
 }
 
 public protocol StoryBlockViewDelegate: AnyObject {
@@ -24,7 +24,9 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
     @objc public var channel: String = ""
     @objc public var playlist: String = ""
     @objc public var dynamicContentParameters: [String: [String]] = [:]
+    @objc public var hashtagFilterExpression: String = ""
     @objc public var enablePictureInPicture: Bool = false
+    @objc public var adConfiguration: AdConfiguration?
 
     public weak var delegate: StoryBlockViewDelegate?
 
@@ -42,6 +44,8 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
             return .channelPlaylist(channelID: channel, playlistID: playlist)
         case .dynamicContent:
             return .dynamicContent(channelID: channel, parameters: dynamicContentParameters)
+        case .hashtagPlaylist:
+            return .hashtagPlaylist(channelID: channel, filterExpression: hashtagFilterExpression)
         }
     }
 
@@ -68,7 +72,17 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
             return
         }
 
-        let storyBlockVC = StoryBlockViewController(source: source)
+        var resultStoryBlockVC: StoryBlockViewController?
+        if let fireworkVideoAdConfiguration = RCTConvert.getFireworkVideoAdConfiguration(adConfiguration) {
+            resultStoryBlockVC = StoryBlockViewController(source: source, adConfiguration: fireworkVideoAdConfiguration)
+        } else {
+            resultStoryBlockVC = StoryBlockViewController(source: source)
+        }
+
+        guard let storyBlockVC = resultStoryBlockVC else {
+            return
+        }
+
         if self.enablePictureInPicture {
             storyBlockVC.isPictureInPictureEnabled = true
         }
@@ -89,6 +103,22 @@ public class StoryBlock: UIView, StoryBlockViewControllerDelegate {
         self.storyBlockVC = nil
     }
 
+    @objc
+    public func play() {
+        guard let storyBlockVC = self.storyBlockVC else {
+            return
+        }
+        storyBlockVC.play()
+    }
+
+    @objc
+    public func pause() {
+        guard let storyBlockVC = self.storyBlockVC else {
+            return
+        }
+        storyBlockVC.pause()
+    }
+
     public func storyBlockDidLoadFeed(_ viewController: StoryBlockViewController) {
         guard let delegate = self.delegate else {
             return

package/ios/Components/StoryBlockManager.m

@@ -8,7 +8,13 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTViewManager.h>
 #import <React/RCTUIManager.h>
+
+#if __has_include(<react_native_firework_sdk/react_native_firework_sdk-Swift.h>)
+#import <react_native_firework_sdk/react_native_firework_sdk-Swift.h>
+#else
 #import "react_native_firework_sdk-Swift.h"
+#endif
+
 
 @interface RCT_EXTERN_REMAP_MODULE(FWStoryBlock, StoryBlockManager, NSObject)
 
@@ -21,10 +27,37 @@ RCT_CUSTOM_VIEW_PROPERTY(source, StoryBlockSource, StoryBlock) {
 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_CUSTOM_VIEW_PROPERTY(adConfiguration, AdConfiguration, StoryBlock) {
+    AdConfiguration *config = [RCTConvert adConfiguration:json];
+    view.adConfiguration = config;
+}
 
 RCT_EXPORT_VIEW_PROPERTY(onStoryBlockLoadFinished, RCTBubblingEventBlock)
 
+RCT_EXPORT_METHOD(play:(nonnull NSNumber *)reactTag) {
+    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+        StoryBlock *view = (StoryBlock *)(viewRegistry[reactTag]);
+        if (!view || ![view isKindOfClass:[StoryBlock class]]) {
+            RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
+            return;
+        }
+        [view play];
+    }];
+}
+
+RCT_EXPORT_METHOD(pause:(nonnull NSNumber *)reactTag) {
+    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+        StoryBlock *view = (StoryBlock *)(viewRegistry[reactTag]);
+        if (!view || ![view isKindOfClass:[StoryBlock class]]) {
+            RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
+            return;
+        }
+        [view pause];
+    }];
+}
+
 @end