Storyblock
FwStoryblock
component allows the host app to embed Firework video player directly into its view hierarchy.

Story block integrated into the layout
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 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,
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.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.FwStoryblock
may be displayed in fullscreen and compact modeWhen 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()
}
});
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.Last modified 1mo ago