StoryBlock (Android)

StoryBlock component allows the host app to embed the Fireworks video player directly into its view hierarchy.

Story block integrated into the layout

Lifecycle

Integration

To include a StoryBlock in your app, add it to your app's layout, and initialise it by calling init() method.

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:layout_gravity="center"
            android:layout_marginVertical="16dp">

            <com.firework.storyblock.FwStoryBlockView
                android:id="@+id/story_block"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="9:16"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

Initialisation of the StoryBlock the component is as below

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Discovery)
            }
            playerOptions {
                playerMode(PlayerMode.FIT_MODE)
            }
            storyBlockOptions {
                enableAutoPlay(true)
                showFullScreenIcon(true)
            }
        }

        binding.storyBlock.init(
            fragmentManager = supportFragmentManager,
            lifecycle = lifecycle,
            viewOptions = viewOptions,
            pauseWhenNotVisible = true,
        )
    }
}

When you set the pauseWhenNotVisible parameter to true in the init() function, the StoryBlock will take automatic action to pause (or mute, in the case of a livestream) its playback whenever it becomes invisible on the screen. It will then resume normal playback when it becomes visible again.

Calling storyblock.destroy()releases all resources allocated for the StoryBlock.

StoryBlock standalone configurations

You can choose whether to enable autoplay mode or not; it's turned on by default.

You can also decide if you want to display the full-screen icon on the story block by adjusting the settings in storyBlockOptions; the default setting for this is true.

        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Discovery)
            }
            playerOptions {
                playerMode(PlayerMode.FIT_MODE)
            }
            storyBlockOptions {
                enableAutoPlay(true)
                showFullScreenIcon(true)
            }
        }

        binding.storyBlock.init(
            fragmentManager = supportFragmentManager,
            lifecycle = lifecycle,
            viewOptions = viewOptions,
            pauseWhenNotVisible = true,
        )

StoryBlock player modes

You may choose between two-player modes for the StoryBlock:

  • FIT_MODE

  • FULL_BLEED_MODE

When StoryBlock is set up to display video in PlayerMode.FIT_MODE, internally it tries to scale video with 9:16 dimension ratio. To achieve the proper result StoryBlock the container should be placed into ConstraintLayout with app:layout_constraintDimensionRatio="9:16" attribute:

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:layout_marginVertical="16dp">

          <com.firework.storyblock.FwStoryBlockView
                android:id="@+id/story_block"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintDimensionRatio="9:16" \\ this property is needed for FIT_MODE
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />   

 </androidx.constraintlayout.widget.ConstraintLayout>

If StoryBlock is set up with FULL_BLEED_MODE , it will just fill in the container following its width and height.

Fullscreen and Compact state

StoryBlock maybe displayed in fullscreen and compact mode

It is possible to open the fullscreen mode programmatically by calling:

storyBlock.openFullscreen()

Play and pause the video in StoryBlock

Users can pause and resume the video by calling the following functions

storyBlock.pause()
// and
storyBlock.play()

Keep in mind that pause() function will not work for ad videos and livestreams.

Automatically release StoryBlock (Deprecated, please use FwStoryBlockView instead)

The FwLifecycleAwareStoryBlockView is a wrapper for the FwStoryBlockView class, providing automatic cleanup when the parent component (Fragment or Activity) is destroyed.

To utilize and set up the FwLifecycleAwareStoryBlockView, follow the same procedures as you would for the FwStoryBlockView. The only difference is that the destroy() method will be triggered automatically when needed.

Last updated

Was this helpful?