Comment on page
StoryBlock
StoryBlock component allows the host app to embed the Fireworks video player directly into its view hierarchy.
Story block integrated into the layout
StoryBlock is a heavy object containing multiple instances of the player, Heavy-lifting UI elements, and intensive background tasks, Beware that the recommended number of the StoryBlock being used in a single screen is 1. However, in a wide range of new Android devices, 2 instances might work alright. Any number of StoryBlock above this limitation is not recommended by the Firework team and is not supported.
StoryBlock lifecycle is very simple, the host app needs to create an instance of StoryBlock and initialise it once, then the StoryBlock goes to live mode and works as expected until the host app decides to kill the lifecycle, so call the destroy function. The
init function must not be called more than once, as same as destroy function. The SDK trusts the host app to use these handles as expected, any violation of the lifecycle use might lead to unexpected behaviour of StoryBlock.
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 belowKotlin
Java
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val viewOptions = viewOptions {
baseOptions {
feedResource(FeedResource.Discovery)
}
playerOptions {
playerMode(PlayerMode.FIT_MODE)
}
}
binding.storyBlock.init(
fragmentManager = supportFragmentManager,
lifecycle = lifecycle,
viewOptions = viewOptions,
pauseWhenNotVisible = true,
)
}
}
public class MainActivity extends AppCompatActivity {
private FwStoryBlockView storyBlock;
private FrameLayout storyBlockContainer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
storyBlock = findViewById(R.id.story_block);
storyBlockContainer = findViewById(R.id.story_block_container);
BaseOption baseOption = new BaseOption.Builder()
.feedResource(FeedResource.Discovery.INSTANCE)
.build();
PlayerOption playerOptions = new PlayerOption.Builder()
.playerMode(PlayerMode.FIT_MODE)
.build();
ViewOptions viewOptions = new ViewOptions.Builder()
.baseOption(baseOption)
.playerOption(playerOptions)
.build();
storyBlock.init(getSupportFragmentManager(),getLifecycle(),viewOptions, storyBlockContainer, 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.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.StoryBlock maybe displayed in fullscreen and compact modeWhen the
StoryBlockis in the compact mode it displays a limited set of components. For example, shopping and livestream chat components are supported only in fullscreen mode.It is possible to open the fullscreen mode programmatically by calling:
Kotlin
storyBlock.openFullscreen()
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.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 modified 7d ago