react-native-firework-sdk 2.0.0-beta.5 → 2.1.0

package/android/build.gradle

@@ -50,8 +50,8 @@ android {
     }
   }
 
-  dataBinding {
-    enabled = true
+  buildFeatures {
+    viewBinding = true
   }
 
   lintOptions {
@@ -151,7 +151,7 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
 
 
-  def fireworkSdkVersion = "6.0.0"
+  def fireworkSdkVersion = "6.1.1"
   implementation "com.firework:sdk:$fireworkSdkVersion"
   implementation "com.firework.external.imageloading:glide:$fireworkSdkVersion"
   implementation "com.firework.external.livestream:singleHostPlayer:$fireworkSdkVersion"
@@ -165,6 +165,8 @@ dependencies {
 
   // required to avoid crash on Android 12 API 31
   implementation 'androidx.work:work-runtime-ktx:2.7.0'
+
+  implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
 }
 
 configurations.all {

package/android/src/main/java/com/fireworksdk/bridge/components/videofeed/StoryBlockFragment.kt

@@ -0,0 +1,129 @@
+package com.fireworksdk.bridge.components.videofeed
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.activity.OnBackPressedCallback
+import androidx.fragment.app.Fragment
+import com.firework.storyblock.FeedLoadListener
+import com.firework.storyblock.FwStoryBlockView
+import com.fireworksdk.bridge.databinding.FwBridgeStoryBlockBinding
+import com.fireworksdk.bridge.models.FWVideoFeedPropsModel
+import com.fireworksdk.bridge.utils.FWConfigUtil
+
+class StoryBlockFragment : Fragment() {
+
+  private var _binding: FwBridgeStoryBlockBinding? = null
+  private val binding: FwBridgeStoryBlockBinding get() = _binding!!
+
+  private var feedLoadListener: FeedLoadListener? = null
+  private var fullScreenStateChangeListener: FwStoryBlockView.OnFullscreenStateChangeListener? = null
+  private var videoFeedPropsModel: FWVideoFeedPropsModel = FWVideoFeedPropsModel()
+
+  override fun onCreateView(
+    inflater: LayoutInflater,
+    container: ViewGroup?,
+    savedInstanceState: Bundle?,
+  ): View {
+    _binding = FwBridgeStoryBlockBinding.inflate(inflater)
+    return binding.root
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    super.onViewCreated(view, savedInstanceState)
+    afterUpdateTransaction()
+    // need to call it after init()
+    binding.storyBlock.setFeedLoadListener(feedLoadListener)
+    binding.storyBlock.setOnFullscreenStateChangeListener(fullScreenStateChangeListener)
+//    addBackPressedCallback()
+//    Handler(Looper.getMainLooper()).postDelayed({
+//      addBackPressedCallback()
+//    }, 10000)
+  }
+
+
+  override fun onDestroyView() {
+//    removeBackPressedCallback()
+    _binding = null
+    super.onDestroyView()
+  }
+
+  private fun afterUpdateTransaction() {
+    val viewOptionsBuilder = FWConfigUtil.generateViewOptionsBuilder(videoFeedPropsModel)
+    binding.storyBlock.init(
+      childFragmentManager,
+      requireActivity().lifecycle,
+      viewOptionsBuilder.build(),
+      binding.storyBlockContainer,
+    )
+  }
+
+  fun setProps(props: FWVideoFeedPropsModel?) {
+    props ?: return
+    videoFeedPropsModel = props
+  }
+
+  fun play() {
+    binding.storyBlock.play()
+  }
+
+  fun pause() {
+    binding.storyBlock.pause()
+  }
+
+  fun toggleFullScreen() {
+    binding.storyBlock.toggleFullscreen()
+  }
+
+  fun setFeedLoadListener(feedLoadListener: FeedLoadListener?) {
+    this.feedLoadListener = feedLoadListener
+  }
+
+  fun setOnFullScreenStateChangedListener(listener: FwStoryBlockView.OnFullscreenStateChangeListener?) {
+    this.fullScreenStateChangeListener = listener
+  }
+
+  fun isFullScreen(): Boolean {
+    return binding.storyBlock.isFullscreen()
+  }
+
+  private val mBackPressedCallback: OnBackPressedCallback by lazy  {
+    object : OnBackPressedCallback(true) {
+      override fun handleOnBackPressed() {
+        if (binding.storyBlock.isFullscreen()) {
+          binding.storyBlock.toggleFullscreen()
+        } else {
+          isEnabled = false
+          requireActivity().onBackPressed()
+        }
+      }
+    }
+  }
+
+  private fun addBackPressedCallback() {
+    requireActivity()
+      .onBackPressedDispatcher
+      .addCallback(
+        viewLifecycleOwner,
+        mBackPressedCallback
+      )
+  }
+
+  private fun removeBackPressedCallback() {
+    mBackPressedCallback.remove()
+  }
+
+  override fun onPause() {
+    super.onPause()
+  }
+
+  override fun onResume() {
+    super.onResume()
+  }
+
+  override fun onDestroy() {
+    super.onDestroy()
+  }
+
+}

package/android/src/main/java/com/fireworksdk/bridge/components/videofeed/StoryBlockFrameLayout.kt

@@ -0,0 +1,84 @@
+package com.fireworksdk.bridge.components.videofeed
+
+import android.content.Context
+import android.util.AttributeSet
+import android.widget.FrameLayout
+import com.fireworksdk.bridge.models.*
+
+class StoryBlockFrameLayout(
+  context: Context,
+  attrs: AttributeSet?
+) : FrameLayout(context, attrs) {
+
+  constructor(context: Context) : this(context, null)
+
+  private var videoFeedPropsModel: FWVideoFeedPropsModel = FWVideoFeedPropsModel()
+  private var storyBlockFragment by weakProperty<StoryBlockFragment?>()
+
+  fun setSource(source: String?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      source = source
+    )
+  }
+
+  fun setChannel(channel: String?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      channel = channel
+    )
+  }
+
+  fun setPlaylist(playlist: String?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      playlist = playlist
+    )
+  }
+
+  fun setDynamicContentParameters(parametersMap: HashMap<String, List<String>>?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      dynamicContentParameters = parametersMap
+    )
+  }
+
+  fun setEnablePictureInPicture(enablePictureInPicture: Boolean?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      enablePictureInPicture = enablePictureInPicture
+    )
+  }
+
+  fun setVideoFeedConfig(config: FWVideoFeedConfigModel?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      videoFeedConfiguration = config
+    )
+  }
+
+  fun setVideoPlayerConfig(config: FWVideoPlayerConfigModel?) {
+    videoFeedPropsModel = videoFeedPropsModel.copy(
+      videoPlayerConfiguration = config
+    )
+  }
+
+  fun setFragment(fragment: StoryBlockFragment) {
+    this.storyBlockFragment = fragment
+    fragment.setProps(videoFeedPropsModel)
+  }
+
+  fun getFragment(): StoryBlockFragment? {
+    return storyBlockFragment
+  }
+
+  fun play() {
+    storyBlockFragment?.play()
+  }
+
+  fun pause() {
+    storyBlockFragment?.pause()
+  }
+
+  fun toggleFullScreen() {
+    storyBlockFragment?.toggleFullScreen()
+  }
+
+  fun destroy() {
+    storyBlockFragment = null
+  }
+}

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

@@ -31,7 +31,7 @@ enum class FWVideoPlaybackSubEventName(val rawValue: String) {
 }
 
 enum class FWVideoShoppingEventName(val rawValue: String) {
-  AddToCart("fw:shopping:add-to-cart"),
+  CtaButtonClick("fw:shopping:cta-button-click"),
   ClickCartIcon("fw:shopping:click-cart-icon"),
   UpdateProductDetails("fw:shopping:update-product-details"),
   WillDisplayProduct("fw:shopping:will-display-product"),
@@ -47,4 +47,5 @@ enum class FWLiveStreamEventName(val rawValue: String) {
 
 enum class FWStoryBlockEventName(val rawValue: String) {
   StoryBlockLoadFinished("onStoryBlockLoadFinished"),
+  StoryBlockFullScreenStateChanged("onStoryBlockFullScreenStateChanged"),
 }

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

@@ -5,13 +5,26 @@ import kotlinx.android.parcel.Parcelize
 
 @Parcelize
 data class FWProductInfoViewConfiguration(
-  var addToCartButton: AddToCartButtonStyle? = null,
+  val ctaButton: CtaButtonConfiguration? = null,
+  val linkButton: LinkButtonConfiguration? = null,
 ) : Parcelable {
 
   @Parcelize
-  data class AddToCartButtonStyle(
-    var backgroundColor: String? = null,
-    var textColor: String? = null,
-    var fontSize: Int? = null,
+  data class CtaButtonConfiguration(
+    val text: TextValue? = null,
+    val backgroundColor: String? = null,
+    val textColor: String? = null,
+    val fontSize: Int? = null,
+  ) : Parcelable {
+
+    enum class TextValue(val rawValue: String) {
+      AddToCart("addToCart"),
+      ShopNow("shopNow"),
+    }
+  }
+
+  @Parcelize
+  data class LinkButtonConfiguration(
+    val isHidden: Boolean? = null,
   ) : Parcelable
 }

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

@@ -4,32 +4,56 @@ import org.json.JSONObject
 
 object FWProductInfoViewConfigurationDeserializer {
 
-  private const val ADD_TO_CART_BUTTON_STYLE = "addToCartButton"
+  private const val CTA_BUTTON = "ctaButton"
+  private const val LINK_BUTTON = "linkButton"
 
+  private const val TEXT_KEY = "text"
   private const val BACKGROUND_COLOR_KEY = "backgroundColor"
   private const val TEXT_COLOR_KEY = "textColor"
   private const val FONT_SIZE_KEY = "fontSize"
 
+  private const val IS_HIDDEN_KEY = "isHidden"
+
   fun deserialize(responseJson: JSONObject?): FWProductInfoViewConfiguration? {
     responseJson ?: return null
 
-    val addToCartButton = deserializeAddToCartButtonStyle(responseJson.optJSONObject(ADD_TO_CART_BUTTON_STYLE))
+    val ctaButtonConfiguration = deserializeCtaButtonConfiguration(responseJson.optJSONObject(CTA_BUTTON))
+    val linkButtonConfiguration = deserializeLinkButtonConfiguration(responseJson.optJSONObject(LINK_BUTTON))
 
     return FWProductInfoViewConfiguration(
-      addToCartButton = addToCartButton
+      ctaButton = ctaButtonConfiguration,
+      linkButton = linkButtonConfiguration,
     )
   }
 
-  private fun deserializeAddToCartButtonStyle(addToCartButtonStyleJson: JSONObject?): FWProductInfoViewConfiguration.AddToCartButtonStyle {
-    val backgroundColor = addToCartButtonStyleJson?.optString(BACKGROUND_COLOR_KEY)
-    val textColor = addToCartButtonStyleJson?.optString(TEXT_COLOR_KEY)
-    val fontSize = addToCartButtonStyleJson?.optInt(FONT_SIZE_KEY)
-
-    return FWProductInfoViewConfiguration.AddToCartButtonStyle(
+  private fun deserializeCtaButtonConfiguration(ctaButtonConfiguration: JSONObject?): FWProductInfoViewConfiguration.CtaButtonConfiguration {
+    val textString = ctaButtonConfiguration?.optString(TEXT_KEY)
+    val backgroundColor = ctaButtonConfiguration?.optString(BACKGROUND_COLOR_KEY)
+    val textColor = ctaButtonConfiguration?.optString(TEXT_COLOR_KEY)
+    val fontSize = ctaButtonConfiguration?.optInt(FONT_SIZE_KEY)
+
+    var text = FWProductInfoViewConfiguration.CtaButtonConfiguration.TextValue.AddToCart
+    when (textString) {
+      FWProductInfoViewConfiguration.CtaButtonConfiguration.TextValue.ShopNow.rawValue -> {
+        text = FWProductInfoViewConfiguration.CtaButtonConfiguration.TextValue.ShopNow
+      }
+      else -> {}
+    }
+
+    return FWProductInfoViewConfiguration.CtaButtonConfiguration(
+      text = text,
       backgroundColor = backgroundColor,
       textColor = textColor,
       fontSize = fontSize,
     )
   }
 
+  private fun deserializeLinkButtonConfiguration(addToCartButtonStyleJson: JSONObject?): FWProductInfoViewConfiguration.LinkButtonConfiguration {
+    val isHidden = addToCartButtonStyleJson?.optBoolean(IS_HIDDEN_KEY)
+
+    return FWProductInfoViewConfiguration.LinkButtonConfiguration(
+      isHidden = isHidden,
+    )
+  }
+
 }

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

@@ -0,0 +1,17 @@
+package com.fireworksdk.bridge.models
+
+import android.os.Parcelable
+import kotlinx.android.parcel.Parcelize
+
+@Parcelize
+data class FWShoppingCtaResult(
+  val res: Res? = null,
+  val tips: String? = null,
+) : Parcelable {
+
+  enum class Res(val rawValue: String) {
+    Success("success"),
+    Fail("fail"),
+    Loading("loading"),
+  }
+}

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

@@ -0,0 +1,33 @@
+package com.fireworksdk.bridge.models
+
+import org.json.JSONObject
+
+object FWShoppingCtaResultDeserializer {
+
+  private const val RES_KEY = "res"
+  private const val TIPS_KEY = "tips"
+
+
+  fun deserialize(responseJson: JSONObject?): FWShoppingCtaResult? {
+    responseJson?: return null
+
+    val resString = responseJson.optString(RES_KEY)
+    val tips = responseJson.optString(TIPS_KEY)
+
+    var res = FWShoppingCtaResult.Res.Success
+    when (resString) {
+      FWShoppingCtaResult.Res.Fail.rawValue -> {
+        res = FWShoppingCtaResult.Res.Fail
+      }
+      FWShoppingCtaResult.Res.Loading.rawValue -> {
+        res = FWShoppingCtaResult.Res.Loading
+      }
+      else -> {}
+    }
+
+    return FWShoppingCtaResult(
+      res = res,
+      tips = tips,
+    )
+  }
+}

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

@@ -3,10 +3,7 @@ package com.fireworksdk.bridge.reactnative.manager
 import android.view.Choreographer
 import android.view.View
 import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.annotation.Nullable
 import androidx.appcompat.app.AppCompatActivity
-import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
@@ -14,78 +11,102 @@ import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.uimanager.annotations.ReactPropGroup
-import com.fireworksdk.bridge.models.FWStoryBlockEventName
-import com.fireworksdk.bridge.models.FWVideoFeedPropsModel
+import com.firework.storyblock.FeedLoadState
+import com.fireworksdk.bridge.components.videofeed.StoryBlockFragment
+import com.fireworksdk.bridge.components.videofeed.StoryBlockFrameLayout
+import com.fireworksdk.bridge.models.*
+import com.fireworksdk.bridge.reactnative.utils.FWEventUtils
+import com.fireworksdk.bridge.utils.FWGlobalDataUtil
 import com.fireworksdk.bridge.utils.FWLogUtils
+import org.json.JSONObject
 
 
 class FWStoryBlockManager(
   private val reactContext: ReactApplicationContext
-) : ViewGroupManager<FrameLayout>() {
-
-  private val videoFeedPropsModel: FWVideoFeedPropsModel by lazy { FWVideoFeedPropsModel() }
-
-  private var viewId: Int? = null
+) : ViewGroupManager<StoryBlockFrameLayout>() {
 
   override fun getName(): String {
     return REACT_CLASS
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
-    return FrameLayout(reactContext)
+  override fun createViewInstance(reactContext: ThemedReactContext): StoryBlockFrameLayout {
+    return StoryBlockFrameLayout(reactContext)
   }
 
-  override fun onAfterUpdateTransaction(view: FrameLayout) {
+  override fun onAfterUpdateTransaction(view: StoryBlockFrameLayout) {
     super.onAfterUpdateTransaction(view)
+    // after createFragment
     FWLogUtils.d { "FWStoryBlockManager onAfterUpdateTransaction" }
   }
 
-  @Nullable
-  override fun getCommandsMap(): Map<String, Int>? {
-    return MapBuilder.of("create", COMMAND_CREATE)
+  override fun getCommandsMap(): Map<String, Int> {
+    val map: MutableMap<String, Int> = HashMap()
+    map["create"] = COMMAND_CREATE
+    map["play"] = COMMAND_PLAY
+    map["pause"] = COMMAND_PAUSE
+    map["toggle_full_screen"] = COMMAND_TOGGLE_FULL_SCREEN
+    return map
   }
 
   override fun receiveCommand(
-    root: FrameLayout,
+    root: StoryBlockFrameLayout,
     commandId: String?,
     args: ReadableArray?
   ) {
     super.receiveCommand(root, commandId, args)
-    val reactNativeViewId = requireNotNull(args).getInt(0)
-
-    FWLogUtils.d { "FWStoryBlockManager receiveCommand commandId: $commandId, reactNativeViewId: $reactNativeViewId" }
+    FWLogUtils.d { "FWStoryBlockManager receiveCommand commandId: $commandId, root.isAttachedToWindow: ${root.isAttachedToWindow}" }
     when (commandId?.toInt()) {
-      COMMAND_CREATE -> createFragment(root, reactNativeViewId)
+      COMMAND_CREATE -> {
+        val reactNativeViewId = requireNotNull(args).getInt(0)
+        createFragment(root, reactNativeViewId)
+      }
+      COMMAND_PLAY -> root.play()
+      COMMAND_PAUSE -> root.pause()
+      COMMAND_TOGGLE_FULL_SCREEN -> root.toggleFullScreen()
       else -> {}
     }
   }
 
   @ReactProp(name = "source")
-  fun setSource(view: FrameLayout, source: String?) {
-//    videoFeedPropsModel.source = source
+  fun setSource(view: StoryBlockFrameLayout, source: String?) {
+    view.setSource(source)
   }
 
   @ReactProp(name = "channel")
-  fun setChannel(view: FrameLayout, channel: String?) {
-//    videoFeedPropsModel.channel = channel
+  fun setChannel(view: StoryBlockFrameLayout, channel: String?) {
+    view.setChannel(channel)
   }
 
   @ReactProp(name = "playlist")
-  fun setPlaylist(view: FrameLayout, playlist: String?) {
-//    videoFeedPropsModel.playlist = playlist
+  fun setPlaylist(view: StoryBlockFrameLayout, playlist: String?) {
+    view.setPlaylist(playlist)
   }
 
   @ReactProp(name = "dynamicContentParameters")
-  fun setDynamicContentParameters(view: FrameLayout, parameters: ReadableMap?) {
+  fun setDynamicContentParameters(view: StoryBlockFrameLayout, parameters: ReadableMap?) {
     val parametersMap = parameters?.toHashMap() as? HashMap<String, List<String>>
-//    videoFeedPropsModel.dynamicContentParameters = parametersMap
+    view.setDynamicContentParameters(parametersMap)
+  }
+
+  @ReactProp(name = "enablePictureInPicture")
+  fun setEnablePictureInPicture(view: StoryBlockFrameLayout, enablePictureInPicture: Boolean?) {
+    view.setEnablePictureInPicture(enablePictureInPicture)
+  }
+
+  @ReactProp(name = "videoFeedConfiguration")
+  fun setVideoFeedConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
+    val configMap = config?.toHashMap() ?: hashMapOf()
+    val jsonObject = JSONObject(configMap)
+    val videoFeedConfigModel = FWVideoFeedConfigModelDeserializer.deserialize(jsonObject)
+    view.setVideoFeedConfig(videoFeedConfigModel)
   }
 
-  @ReactPropGroup(names = ["width", "height"], customType = "Style")
-  fun setStyle(view: FrameLayout, index: Int, value: Dynamic) {
-//    if (index == 0) propWidth = value
-//    if (index == 1) propHeight = value
+  @ReactProp(name = "videoPlayerConfiguration")
+  fun setVideoPlayerConfig(view: StoryBlockFrameLayout, config: ReadableMap?) {
+    val configMap = config?.toHashMap() ?: hashMapOf()
+    val jsonObject = JSONObject(configMap)
+    val videoPlayerConfigModel = FWVideoPlayerConfigModelDeserializer.deserialize(jsonObject)
+    view.setVideoPlayerConfig(videoPlayerConfigModel)
   }
 
   private fun setupLayout(view: View) {
@@ -100,46 +121,106 @@ class FWStoryBlockManager(
     })
   }
 
-  /**
-   * Layout all children properly
-   */
   private fun manuallyLayoutChildren(view: View) {
     view.measure(
       View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
       View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY)
     )
-
     view.layout(view.left, view.top, view.right, view.bottom)
   }
 
+  private fun addStoryBlockListener(fragment: StoryBlockFragment, reactNativeViewId: Int) {
+    fragment.setFeedLoadListener { feedLoadState ->
+      when (feedLoadState) {
+        FeedLoadState.FeedLoaded -> {
+          FWEventUtils.receiveStoryBlockLoadFinishedSuccessEvent(reactContext, reactNativeViewId)
+        }
+        FeedLoadState.FeedLoadFailed -> {
+          FWEventUtils.receiveStoryBlockLoadFinishedFailedEvent(
+            reactContext,
+            reactNativeViewId,
+            "FeedLoadFailed",
+            "FeedLoadFailed"
+          )
+        }
+        else -> {}
+      }
+    }
 
-  private fun createFragment(root: FrameLayout, reactNativeViewId: Int?) {
+    fragment.setOnFullScreenStateChangedListener { isFullScreen ->
+      if (isFullScreen) {
+        FWGlobalDataUtil.storyBlockFragment = fragment
+      }
+      FWEventUtils.receiveStoryBlockFullScreenStateChangedEvent(
+        reactContext,
+        reactNativeViewId,
+        isFullScreen
+      )
+    }
+  }
+
+
+  private fun createFragment(root: StoryBlockFrameLayout, reactNativeViewId: Int?) {
     FWLogUtils.d { "FWStoryBlockManager createFragment, reactNativeViewId = $reactNativeViewId" }
     reactNativeViewId ?: return
     val activity = (reactContext.currentActivity as AppCompatActivity?) ?: return
 
-    viewId = reactNativeViewId
-
     val parentView = root.findViewById(reactNativeViewId) as ViewGroup
 //    parentView.setBackgroundColor(Color.YELLOW)
     setupLayout(parentView)
+
+    val fragment = StoryBlockFragment()
+    root.setFragment(fragment)
+    addStoryBlockListener(fragment, reactNativeViewId)
+
+    if (parentView.isAttachedToWindow) {
+      if (!fragment.isAdded) {
+        activity.supportFragmentManager
+          .beginTransaction()
+          .replace(reactNativeViewId, fragment, reactNativeViewId.toString())
+          .commit()
+      }
+    } else {
+      parentView.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
+        override fun onViewAttachedToWindow(v: View?) {
+          FWLogUtils.d { "FWStoryBlockManager createFragment doOnAttach" }
+          if (!fragment.isAdded) {
+            activity.supportFragmentManager
+              .beginTransaction()
+              .replace(reactNativeViewId, fragment, reactNativeViewId.toString())
+              .commit()
+          }
+        }
+
+        override fun onViewDetachedFromWindow(v: View?) {
+        }
+      })
+    }
   }
 
-  override fun onDropViewInstance(view: FrameLayout) {
+  override fun onDropViewInstance(view: StoryBlockFrameLayout) {
+    val activity = reactContext.currentActivity as AppCompatActivity
+    val fragment = view.getFragment()
+    fragment?.let {
+      activity.supportFragmentManager.beginTransaction().remove(it).commit()
+    }
+    view.destroy()
     super.onDropViewInstance(view)
   }
 
   override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any>? {
     return MapBuilder.builder<String, Any>()
       .put(FWStoryBlockEventName.StoryBlockLoadFinished.rawValue, MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", FWStoryBlockEventName.StoryBlockLoadFinished.rawValue)))
+      .put(FWStoryBlockEventName.StoryBlockFullScreenStateChanged.rawValue, MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", FWStoryBlockEventName.StoryBlockFullScreenStateChanged.rawValue)))
       .build()
   }
 
   companion object {
     private const val REACT_CLASS = "FWStoryBlock"
-    const val FW_STORY_BLOCK_INIT_ACTION = "FW_STORY_BLOCK_INIT_ACTION"
-    const val FW_STORY_BLOCK_INIT_INTENT = "FW_STORY_BLOCK_INIT_INTENT"
-    private const val COMMAND_CREATE = 1
+    private const val COMMAND_CREATE = 1000000
+    private const val COMMAND_PLAY = 1000001
+    private const val COMMAND_PAUSE = 1000002
+    private const val COMMAND_TOGGLE_FULL_SCREEN = 1000003
   }
 
 }