StoryBlock Options

StoryBlockOption configures behavior specific to FwStoryBlockView. These options control autoplay, fullscreen functionality, appearance, and advanced features unique to the StoryBlock component.

Overview

StoryBlockOption provides configuration for:

• Autoplay and autopause behavior

• Fullscreen icon visibility

• Compact mode sizing

• Jetpack Compose integration

• Vertical swipe gestures

• Immersive mode parameters

Creating StoryBlockOption

Using Builder

val storyBlockOption = StoryBlockOption.Builder()
    .enableAutoPlay(true)
    .showFullScreenIcon(true)
    .enableAutoPause(false)
    .build()

Using DSL (Recommended)

val viewOptions = viewOptions {
    storyBlockOptions {
        enableAutoPlay(true)
        showFullScreenIcon(true)
        enableAutoPause(false)
        enableVerticalSwipe(false)
    }
}

Properties

enableAutoPlay

Type: Boolean Default: true

Enable or disable automatic video playback when StoryBlock is initialized.

storyBlockOptions {
    enableAutoPlay(true)
}

When enabled:

• Video starts playing automatically after initialization

• Ideal for story-like experiences

When disabled:

• User must tap to start playback

• Better for user-controlled experiences

showFullScreenIcon

Type: Boolean Default: true

Show or hide the fullscreen expansion icon in compact mode.

storyBlockOptions {
    showFullScreenIcon(true)
}

The fullscreen icon allows users to expand the StoryBlock from compact mode to fullscreen mode.

enableAutoPause

Type: Boolean Default: false

Automatically pause when StoryBlock finish playing a video.

storyBlockOptions {
    enableAutoPause(true)
}

Note: For most cases, use the pauseWhenNotVisible parameter in FwStoryBlockView.init() instead.

usedOnJetpackCompose

Type: Boolean Default: false

Enable optimizations when using StoryBlock with Jetpack Compose.

storyBlockOptions {
    usedOnJetpackCompose(true)
}

Set to true when integrating StoryBlock in a Compose-based UI for better performance.

enableSmallSizeInCompact

Type: Boolean Default: false

Use smaller UI elements in compact mode.

storyBlockOptions {
    enableSmallSizeInCompact(true)
}

Reduces the size of UI controls and elements when the StoryBlock is displayed in compact mode.

handleAppearanceManually

Type: Boolean Default: false

Manually control appearance/disappearance callbacks.

storyBlockOptions {
    handleAppearanceManually(true)
}

When enabled, you're responsible for managing visibility state changes.

setImmersiveParam

Type: ImmersiveParam Default: ImmersiveParam(topControlsInset = 0)

Configure top inset for immersive mode.

storyBlockOptions {
    setImmersiveParam(
        ImmersiveParam(topControlsInset = 24.dpToPx())
    )
}

Use this to adjust for system UI elements like status bars in immersive fullscreen mode.

enableVerticalSwipe

Type: Boolean Default: false

Enable vertical swipe gestures to navigate between videos.

storyBlockOptions {
    enableVerticalSwipe(true)
}

When enabled, users can swipe up/down to navigate between videos in the StoryBlock.

Default Values

Property	Default Value
enableAutoPlay	true
showFullScreenIcon	true
enableAutoPause	false
usedOnJetpackCompose	false
enableSmallSizeInCompact	false
handleAppearanceManually	false
immersiveParam	ImmersiveParam(0)
enableVerticalSwipe	false

Complete Examples

Standard StoryBlock Configuration

class StoryBlockActivity : AppCompatActivity() {
    private lateinit var storyBlock: FwStoryBlockView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_story_block)
        
        storyBlock = findViewById(R.id.storyBlock)
        
        val viewOptions = viewOptions {
            baseOptions {
                feedResource(FeedResource.Discovery)
            }
            playerOptions {
                playerMode(PlayerMode.FIT_MODE)
            }
            storyBlockOptions {
                enableAutoPlay(true)
                showFullScreenIcon(true)
            }
        }
        
        storyBlock.init(
            fragmentManager = supportFragmentManager,
            lifecycle = lifecycle,
            viewOptions = viewOptions,
            pauseWhenNotVisible = true
        )
    }
    
    override fun onDestroy() {
        super.onDestroy()
        storyBlock.destroy()
    }
}

Vertical Swipe Navigation

val viewOptions = viewOptions {
    baseOptions {
        feedResource(FeedResource.Discovery)
    }
    storyBlockOptions {
        enableAutoPlay(true)
        enableVerticalSwipe(true) // Swipe up/down to navigate
        showFullScreenIcon(true)
    }
}

Compose Integration

val viewOptions = viewOptions {
    storyBlockOptions {
        usedOnJetpackCompose(true)
        enableAutoPlay(true)
        showFullScreenIcon(true)
    }
}

Immersive Mode with Status Bar

val viewOptions = viewOptions {
    playerOptions {
        enableImmersiveMode(true)
    }
    storyBlockOptions {
        setImmersiveParam(
            ImmersiveParam(
                topControlsInset = getStatusBarHeight()
            )
        )
        enableAutoPlay(true)
    }
}

fun getStatusBarHeight(): Int {
    val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
    return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
}

Important Notes

• enableAutoPlay affects initial playback only; users can always control playback after

• showFullScreenIcon is only visible in compact mode

• Fullscreen mode provides access to all features (shopping, chat, etc.)

• usedOnJetpackCompose should be enabled for Compose-based UIs

• pauseWhenNotVisible in init() is preferred over enableAutoPause

• handleAppearanceManually is for advanced use cases only

• Vertical swipe gestures may conflict with scroll views

• ImmersiveParam helps position content correctly under system UI

• StoryBlock options only apply to FwStoryBlockView, not other widgets

See Also

• ViewOptions Overview - Complete configuration system

• FwStoryBlockView - StoryBlock widget guide

• PlayerOption - Player configuration

• BaseOption - Content source configuration