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.
Video Player
Video Deep linking
Last modified 1mo ago