Links

Storyblock

FwStoryblock component allows the host app to embed Firework video player directly into its view hierarchy.
Story block integrated into the layout

Integration

A FwStoryblock component should always be placed into a FrameLayout container for a correct experience. Reference to this container is passed to the FwStoryblock as a parameter of init() function.
<FrameLayout
android:id="@+id/story_block_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="9:16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<com.firework.storyblock.FwStoryBlockView
android:id="@+id/story_block"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Initialization of the FwStoryBlock component is as below
Kotlin
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,
containerView = binding.storyBlockContainer,
)
}
}
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);
}
}
All the resources allocated for the FwStoryblock will be released when the parent component (Activity or Fragment) is destroyed.
Important - FwStoryblock should always be wrapped in a separate container. It will not work properly if it is added directly to the root layout.

FwStoryblock player modes

You may choose between two player modes for the FwStoryblock:
  • FIT_MODE
  • FULL_BLEED_MODE
When FwStoryblock is set up to display video in PlayerMode.FIT_MODE, internally it tries to scale video with 9:16 dimension ratio. To achieve proper result Story block 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">
<FrameLayout
android:id="@+id/story_block_container"
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">
<com.firework.storyblock.FwStoryBlockView
android:id="@+id/story_block"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
If FwStoryblock is set up FULL_BLEED_MODE the story block will just will in the container following its width and height.

Fullscreen and Compact state

FwStoryblock may be displayed in fullscreen and compact mode
When the FwStoryblock is in the compact mode it displays a limited set of components. For example, shopping and livestream chat components are supported only in fullscreen mode currently. This will be improved in coming releases to support more features in the Compact mode.
It is possible to change the FwStoryblock state programmatically. To switch to compact mode the following snippet may be used:
Kotlin
Java
if (storyBlock.isFullscreen) {
storyBlock.toggleFullscreen()
}
if(storyBlock.isFullscreen())
storyBlock.toggleFullscreen();
You can also set a listener to react to the FwStoryblock fullscreen/compact mode changes:
Kotlin
Java
storyBlock.setOnFullscreenStateChangeListener { isFullscreen ->
Toast.makeText(requireContext(), "Is fullscreen: $isFullscreen", Toast.LENGTH_SHORT).show()
}
storyBlock.setOnFullscreenStateChangeListener(new FwStoryBlockView.OnFullscreenStateChangeListener() {
@Override
public void onFullscreenStateChange(boolean isFullscreen) {
Toast.makeText(this, "Is fullscreen: "+ isFullscreen, Toast.LENGTH_SHORT).show()
}
});

Play and pause the video in FwStoryblock

User 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.