Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Integration
  • StoryBlock standalone configurations
  • StoryBlock player modes
  • Fullscreen and Compact state
  • Play and pause the video in StoryBlock
  • Automatically release StoryBlock (Deprecated, please use FwStoryBlockView instead)

Was this helpful?

  1. Android SDK
  2. Integration Guide for Android SDK

StoryBlock (Android)

PreviousVideo Player (Android)NextShare & Video Deep linking

Last updated 3 months ago

Was this helpful?

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

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.

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,
        )
    }
}
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);

        BaseOption baseOption = new BaseOption.Builder()
                .feedResource(FeedResource.Discovery.INSTANCE)
                .build();

        PlayerOption playerOptions = new PlayerOption.Builder()
                .playerMode(PlayerMode.FIT_MODE)
                .build();

        StoryBlockOption storyBlockOptions = new StoryBlockOption.Builder()
                .showFullScreenIcon(true)
                .enableAutoPlay(true)

        ViewOptions viewOptions = new ViewOptions.Builder()
                .baseOption(baseOption)
                .playerOption(playerOptions)
                .build();

        storyBlock.init(getSupportFragmentManager(),getLifecycle(),viewOptions, 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,
        )
        BaseOption baseOption = new BaseOption.Builder()
                .feedResource(FeedResource.Discovery.INSTANCE)
                .build();

        PlayerOption playerOptions = new PlayerOption.Builder()
                .playerMode(PlayerMode.FIT_MODE)
                .build();

        StoryBlockOption storyBlockOptions = new StoryBlockOption.Builder()
                .showFullScreenIcon(true)
                .enableAutoPlay(true)

        ViewOptions viewOptions = new ViewOptions.Builder()
                .baseOption(baseOption)
                .playerOption(playerOptions)
                .build();

        storyBlock.init(getSupportFragmentManager(),getLifecycle(),viewOptions, 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

When 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:

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.

Story block integrated into the layout